Merge branch 'release/v0.26.2'

lib/basic/i18n.ts

@@ -1,5 +1,9 @@
 import { inject } from 'vue'
 
-export function t(s: string, ...args: any): string {
-  return (inject('t') ?? ((s: string) => String(s))) as any
+export function t(id: string, ...args: any): string {
+  return ((inject('t') ?? ((s: string) => String(s))) as any)(id, ...args)
+}
+
+export function tt(defaultString: string, id: string, ...args: any): string {
+  return ((inject('t') ?? ((s: string) => String(defaultString))) as any)(id, ...args)
 }

lib/basic/oui-file.demo.vue

@@ -7,7 +7,8 @@ const state = useLocalStorage('oui.demo.file', {
   multiple: true,
   preview: true,
   accept: 'image/*',
-  title: 'Choose file...',
+  title: 'A file input',
+  titleChoose: 'Choose a file',
   filename: '',
 })
 </script>
@@ -34,11 +35,13 @@ const state = useLocalStorage('oui.demo.file', {
       v-model:filename="state.filename"
       :multiple="state.multiple"
       :title="state.title"
+      :title-choose="state.titleChoose"
       :accept="state.accept"
     />
   </div>
   <OuiDemo :state="state">
     <OuiInput v-model="state.title" title="Title" />
+    <OuiInput v-model="state.titleChoose" title="Title Choose" />
     <OuiInput v-model="state.accept" title="Accept file types (MIME)" />
     <!-- <OuiCheckbox v-model="state.multiple" switch title="Multiple files" /> -->
     <!-- <OuiCheckbox v-model="state.preview" switch title="Preview" /> -->

lib/basic/oui-file.vue

@@ -3,18 +3,19 @@ import type { LoggerInterface } from 'zeed'
 import { useDropZone, useFileDialog } from '@vueuse/core'
 import { ref } from 'vue'
 import { createPromise, Logger } from 'zeed'
+import { t } from './i18n'
 import OuiClose from './oui-close.vue'
 import OuiFormItem from './oui-form-item.vue'
 
 import './oui-file.styl'
-import './oui-form.styl'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<{
   title?: string
+  titleChoose?: string
   description?: string
   accept?: string
   // multiple?: boolean
@@ -26,9 +27,9 @@ const props = withDefaults(defineProps<{
   multiple: false,
 })
 
-const emit = defineEmits<{
-  delete: []
-}>()
+// const emit = defineEmits<{
+//   delete: []
+// }>()
 
 const log: LoggerInterface = Logger('oui-file')
 
@@ -38,11 +39,11 @@ const dropZoneRef = ref<HTMLDivElement>()
 // const filesize = ref<string>()
 // const filetype = ref<string>()
 
-const model = defineModel<string | undefined | null>({ required: true })
-const modelFilename = defineModel<string | undefined | null>('filename', { required: false })
+const model = defineModel<string | undefined>({ required: true })
+const modelFilename = defineModel<string | undefined>('filename', { required: false })
 
 async function fileToDataURI(file: File): Promise<string | undefined> {
-  const [promise, resolve] = createPromise<string | undefined> ()
+  const [promise, resolve] = createPromise<string | undefined>()
   const fileReader = new FileReader()
   fileReader.addEventListener('error', resolve)
   fileReader.addEventListener('abort', resolve)
@@ -94,20 +95,15 @@ function doSelect() {
 </script>
 
 <template>
-  <OuiFormItem
-    :id="id"
-    :title="title"
-    :description="description"
-    :required="required"
-  >
+  <OuiFormItem :id="id" :title="title" :description="description" :required="required">
     <div ref="dropZoneRef" class="oui-file" :class="{ _over: isOverDropZone }" @click.prevent="doSelect">
       <div class="_content">
-        <template v-if="!model">
-          <slot>{{ title ?? 'Choose file...' }}</slot>
+        <template v-if="!model || model?.length <= 0">
+          <slot>{{ titleChoose ?? t('Choose file...', 'oui.file.choose') }}</slot>
         </template>
         <template v-else>
           <slot name="preview" :filename="modelFilename">
-            {{ filename ?? 'File' }}
+            {{ modelFilename ?? t('File available', 'oui.file.placeholder') }}
           </slot>
           <OuiClose @click="model = undefined" />
         </template>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.26.1",
+  "version": "0.26.2",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",