From 2831a5fcd090c08e9de04863e6fcfe24f3e00e1f Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Sun, 5 Jan 2025 16:36:16 +0100
Subject: [PATCH 1/3] feat: oui-file with form support; fix css

---
 lib/basic/index.styl        |  1 +
 lib/basic/oui-file.demo.vue |  4 ++--
 lib/basic/oui-file.vue      | 37 ++++++++++++++++++++++++++-----------
 lib/basic/oui-tabs.styl     |  2 --
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/lib/basic/index.styl b/lib/basic/index.styl
index e35605a..6297720 100644
--- 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
index 2acdc68..c8aa92c 100644
--- a/lib/basic/oui-file.demo.vue
+++ b/lib/basic/oui-file.demo.vue
@@ -21,10 +21,10 @@ const state = useLocalStorage('oui.demo.file', {
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-up"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" /><path d="m14 19.5 3-3 3 3" /><path d="M17 22v-5.5" /><circle cx="9" cy="9" r="2" /></svg>
       Upload an image
-      <template #preview="{ filename }">
+      <!-- <template #preview="{ filename }">
         {{ filename }}
         <img :src="state.value" alt="Preview" height="100">
-      </template>
+      </template> -->
     </OuiFile>
   </div>
   <OuiDemo :state="state">
diff --git a/lib/basic/oui-file.vue b/lib/basic/oui-file.vue
index 0a313d3..24d47dd 100644
--- 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,
@@ -85,16 +93,23 @@ 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="filename">
+            {{ filename ?? 'File' }} <OuiClose @click="model = undefined" />
+          </slot>
+        </template>
+      </div>
     </div>
-  </div>
+  </OuiFormItem>
 </template>
diff --git a/lib/basic/oui-tabs.styl b/lib/basic/oui-tabs.styl
index 7d8d224..a040d35 100644
--- 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);
       }

From 5b18ab442d622868013ff84ec82d97d43d6e67e9 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Sun, 5 Jan 2025 16:40:47 +0100
Subject: [PATCH 2/3] feat: oui-file model:filename

---
 lib/basic/oui-file.demo.vue | 14 ++++++++++++--
 lib/basic/oui-file.vue      | 18 ++++++++++--------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/lib/basic/oui-file.demo.vue b/lib/basic/oui-file.demo.vue
index c8aa92c..73abb54 100644
--- a/lib/basic/oui-file.demo.vue
+++ b/lib/basic/oui-file.demo.vue
@@ -8,6 +8,7 @@ const state = useLocalStorage('oui.demo.file', {
   preview: true,
   accept: 'image/*',
   title: 'Choose file...',
+  filename: '',
 })
 </script>
 
@@ -15,17 +16,26 @@ const state = useLocalStorage('oui.demo.file', {
   <div>
     <OuiFile
       v-model="state.value"
+      v-model:filename="state.filename"
       :multiple="state.multiple"
       :title="state.title"
       :accept="state.accept"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-up"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" /><path d="m14 19.5 3-3 3 3" /><path d="M17 22v-5.5" /><circle cx="9" cy="9" r="2" /></svg>
       Upload an image
-      <!-- <template #preview="{ filename }">
+      <template #preview="{ filename }">
         {{ filename }}
         <img :src="state.value" alt="Preview" height="100">
-      </template> -->
+      </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
index 24d47dd..11449b9 100644
--- a/lib/basic/oui-file.vue
+++ b/lib/basic/oui-file.vue
@@ -34,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> ()
@@ -49,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
@@ -105,9 +106,10 @@ function doSelect() {
           <slot>{{ title ?? 'Choose file...' }}</slot>
         </template>
         <template v-else>
-          <slot name="preview" :filename="filename">
-            {{ filename ?? 'File' }} <OuiClose @click="model = undefined" />
+          <slot name="preview" :filename="modelFilename">
+            {{ filename ?? 'File' }}
           </slot>
+          <OuiClose @click="model = undefined" />
         </template>
       </div>
     </div>

From 6e53208eb5df84c260f83158ddfd63742906ed28 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Sun, 5 Jan 2025 16:40:51 +0100
Subject: [PATCH 3/3] 0.26.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c4aadda..27347b4 100644
--- 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": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",