Merge branch 'release/v0.26.1'

holtwick · Jan 5, 2025 · 58104bf · 58104bf
2 parents ca2c87f + 6e53208
commit 58104bf
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/lib/basic/index.styl b/lib/basic/index.styl
@@ -1,6 +1,7 @@
 @require "./oui-card.styl";
 @require "./oui-form-item.styl";
 @require "./oui-form.styl";
+@require "./oui-file.styl";
 @require "./oui-input-group.styl";
 @require "./oui-log.styl";
 @require "./oui-notice.styl";

diff --git a/lib/basic/oui-file.demo.vue b/lib/basic/oui-file.demo.vue
@@ -8,13 +8,15 @@ const state = useLocalStorage('oui.demo.file', {
   preview: true,
   accept: 'image/*',
   title: 'Choose file...',
+  filename: '',
 })
 </script>
 
 <template>
   <div>
     <OuiFile
       v-model="state.value"
+      v-model:filename="state.filename"
       :multiple="state.multiple"
       :title="state.title"
       :accept="state.accept"
@@ -26,6 +28,14 @@ const state = useLocalStorage('oui.demo.file', {
         <img :src="state.value" alt="Preview" height="100">
       </template>
     </OuiFile>
+
+    <OuiFile
+      v-model="state.value"
+      v-model:filename="state.filename"
+      :multiple="state.multiple"
+      :title="state.title"
+      :accept="state.accept"
+    />
   </div>
   <OuiDemo :state="state">
     <OuiInput v-model="state.title" title="Title" />

diff --git a/lib/basic/oui-file.vue b/lib/basic/oui-file.vue
@@ -4,15 +4,23 @@ import { useDropZone, useFileDialog } from '@vueuse/core'
 import { ref } from 'vue'
 import { createPromise, Logger } from 'zeed'
 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
+  description?: string
   accept?: string
   // multiple?: boolean
   // preview?: boolean
+  required?: boolean
+  id?: string
 }>(), {
   accept: 'image/*',
   multiple: false,
@@ -26,11 +34,12 @@ const log: LoggerInterface = Logger('oui-file')
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-const filename = ref<string>()
-const filesize = ref<string>()
-const filetype = ref<string>()
+// const filename = ref<string>()
+// 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 })
 
 async function fileToDataURI(file: File): Promise<string | undefined> {
   const [promise, resolve] = createPromise<string | undefined> ()
@@ -41,9 +50,9 @@ async function fileToDataURI(file: File): Promise<string | undefined> {
   fileReader.readAsDataURL(file)
   const datauri = await promise
   if (datauri) {
-    filename.value = file.name
-    filesize.value = `${(file.size / 1024).toFixed(2)} KB`
-    filetype.value = file.type
+    modelFilename.value = file.name
+    // filesize.value = `${(file.size / 1024).toFixed(2)} KB`
+    // filetype.value = file.type
     // return `${datauri}?type=${encodeURIComponent(file.type)}&name=${encodeURIComponent(file.name)}&size=${file.size}`
   }
   return datauri
@@ -85,16 +94,24 @@ function doSelect() {
 </script>
 
 <template>
-  <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>
-      <template v-else>
-        <slot name="preview" :filename="filename">
-          {{ filename ?? 'File' }} <OuiClose @click="model = undefined" />
-        </slot>
-      </template>
+  <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>
+        <template v-else>
+          <slot name="preview" :filename="modelFilename">
+            {{ filename ?? 'File' }}
+          </slot>
+          <OuiClose @click="model = undefined" />
+        </template>
+      </div>
     </div>
-  </div>
+  </OuiFormItem>
 </template>
diff --git a/lib/basic/oui-tabs.styl b/lib/basic/oui-tabs.styl
@@ -33,9 +33,7 @@
       white-space: nowrap;
       font-weight: normal;
       color: var(--t3-fg);
-    }
 
-    button {
       &:hover {
         color: var(--p1-fg);
       }

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",