feat(Forms.VFileUpload): use VInput as default file upload

gitsindonesia · Nov 16, 2022 · fb50eac · fb50eac
1 parent cff4e0d
commit fb50eac
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 54 deletions.
diff --git a/packages/forms/src/file-input/VFileUpload.stories.ts b/packages/forms/src/file-input/VFileUpload.stories.ts
@@ -1,5 +1,4 @@
 import {Story} from '@storybook/vue3';
-import {VInputProps} from 'packages/ui';
 import {useForm} from 'vee-validate';
 import {mixed, object} from 'yup';
 import {VInput} from '..';
@@ -22,7 +21,7 @@ export default {
     name: '',
     error: false,
     errorMessages: [],
-    placeholder: 'Browse file...',
+    placeholder: 'Choose file...',
     id: '',
   },
 };
@@ -96,7 +95,7 @@ Dropzone.parameters = {
   },
 };
 
-export const Validation: Story<VInputProps> = (args) => ({
+export const Validation: Story<{}> = () => ({
   components: {VInput, VBtn, VFileUpload},
   setup() {
     const schema = object({
@@ -211,7 +210,7 @@ export const InitialError: Story<VInputProps> = (args) => ({
 `,
 });
 
-export const InitialValues: Story<VInputProps> = (args) => ({
+export const InitialValues: Story<{}> = () => ({
   components: {VInput, VBtn, VFileUpload},
   setup() {
     const schema = object({

diff --git a/packages/forms/src/file-input/VFileUploadDefaultTheme.vue b/packages/forms/src/file-input/VFileUploadDefaultTheme.vue
@@ -1,5 +1,12 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup lang="ts">
 import VBtn from '@gits-id/button';
+import VInput from '../input/VInput.vue';
 
 type Props = {
   borderClass?: string;
@@ -28,55 +35,33 @@ const emit =
 </script>
 
 <template>
-  <div
-    class="
-      transition
-      duration-300
-      border
-      group
-      rounded-lg
-      flex
-      gap-4
-      items-center
-      py-1
-    "
-    :class="borderClass"
+  <VInput
+    readonly
+    :model-value="fileName"
+    :placeholder="fileName ? '' : placeholder"
+    @click="emit('choose')"
   >
-    <div
-      class="
-        flex-1
-        text-gray-500
-        hover:text-gray-700
-        text-sm
-        truncate
-        px-3
-        py-1
-        h-full
-      "
-      :title="fileName || placeholder"
-      @click="emit('choose')"
-    >
-      {{ fileName || placeholder }}
-    </div>
-    <div class="space-x-1 px-1">
-      <VBtn
-        :disabled="readonly || disabled"
-        type="button"
-        size="sm"
-        @click="emit('choose')"
-      >
-        {{ hasFile ? changeText : browseText }}
-      </VBtn>
-      <VBtn
-        v-if="hasFile && !hideRemove"
-        type="button"
-        size="sm"
-        color="error"
-        :disabled="readonly || disabled"
-        @click="emit('remove')"
-      >
-        {{ removeText }}
-      </VBtn>
-    </div>
-  </div>
+    <template #append>
+      <div class="v-input-action">
+        <VBtn
+          :disabled="readonly || disabled"
+          type="button"
+          size="sm"
+          @click="emit('choose')"
+        >
+          {{ hasFile ? changeText : browseText }}
+        </VBtn>
+        <VBtn
+          v-if="hasFile && !hideRemove"
+          type="button"
+          size="sm"
+          color="error"
+          :disabled="readonly || disabled"
+          @click="emit('remove')"
+        >
+          {{ removeText }}
+        </VBtn>
+      </div>
+    </template>
+  </VInput>
 </template>
diff --git a/packages/forms/src/forms.css b/packages/forms/src/forms.css
@@ -197,3 +197,7 @@
 .v-input-counter {
   /*  */
 }
+
+.v-input-action {
+  @apply flex items-center gap-2;
+}