From 9f37b12c21e0e878690db0f1e3809de4cf22ab67 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 17 Apr 2024 14:21:15 +0800
Subject: [PATCH] feat: add file component

---
 .../registry/new-york/example/AutoForm.vue    |  3 ++
 .../new-york/ui/auto-form/AutoForm.vue        |  2 +-
 .../new-york/ui/auto-form/AutoFormField.vue   |  2 +-
 .../new-york/ui/auto-form/constant.ts         |  6 ++-
 .../new-york/ui/auto-form/fields/File.vue     | 53 +++++++++++++++++++
 5 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue

diff --git a/apps/www/src/lib/registry/new-york/example/AutoForm.vue b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
index 8273821d..ebc35eb5 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
@@ -153,6 +153,9 @@ const onSubmit = handleSubmit((values) => {
       bio: {
         component: 'textarea',
       },
+      file: {
+        component: 'file',
+      },
 
       subObject: {
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
index 01782fb7..ab3e5c6a 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
@@ -57,7 +57,7 @@ const shapes = computed(() => {
         />
       </slot>
 
-      {{ shape.schema }}
+      <!-- {{ shape.schema }} -->
     </template>
 
     <slot :shapes="shapes" />
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
index f1ecf07b..de85628f 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
@@ -18,7 +18,7 @@ defineProps<{
 
 <template>
   <component
-    :is="INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] "
+    :is="INPUT_COMPONENTS[config?.component ?? DEFAULT_ZOD_HANDLERS[shape.type]] "
     :name="name"
     :required="shape.required"
     :options="shape.options"
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts
index f35a2a0d..7a63d5e4 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts
@@ -1,8 +1,9 @@
-import FieldNumber from './fields/Number.vue'
-import FieldInput from './fields/Input.vue'
 import FieldBoolean from './fields/Boolean.vue'
 import FieldDate from './fields/Date.vue'
 import FieldEnum from './fields/Enum.vue'
+import FieldFile from './fields/File.vue'
+import FieldInput from './fields/Input.vue'
+import FieldNumber from './fields/Number.vue'
 
 export const INPUT_COMPONENTS = {
   date: FieldDate,
@@ -13,6 +14,7 @@ export const INPUT_COMPONENTS = {
   textarea: FieldInput,
   number: FieldNumber,
   string: FieldInput,
+  file: FieldFile,
 }
 
 /**
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
new file mode 100644
index 00000000..0cae6772
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { beautifyObjectName } from '../utils'
+import type { Config } from '../interface'
+import AutoFormLabel from '../AutoFormLabel.vue'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Input } from '@/lib/registry/new-york/ui/input'
+
+defineProps<{
+  name: string
+  required?: boolean
+  config?: Config
+}>()
+
+async function parseFileAsString(file: File | undefined): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (file) {
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        resolve(reader.result as string)
+      }
+      reader.onerror = (err) => {
+        reject(err)
+      }
+      reader.readAsDataURL(file)
+    }
+  })
+}
+</script>
+
+<template>
+  <FormField v-slot="{ componentField }" :name="name">
+    <FormItem v-bind="$attrs">
+      <AutoFormLabel :required="required">
+        {{ config?.label || beautifyObjectName(name) }}
+      </AutoFormLabel>
+      <FormControl>
+        <Input
+          type="file"
+          v-bind="{ ...config?.inputProps }"
+          @change="async (ev: InputEvent) => {
+            const file = (ev.target as HTMLInputElement).files?.[0]
+            const parsed = await parseFileAsString(file)
+            componentField.onInput(parsed)
+          }"
+        />
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>