Merge pull request #430 from themesberg/feature--dropzone-placeholder

feature: FwbFileInput editable dropzone placeholder

Author: Sqrcz

docs/components/fileInput.md

@@ -3,6 +3,7 @@ import FwbFileInputExample from './fileInput/examples/FwbFileInputExample.vue'
 import FwbFileInputExampleHelper from './fileInput/examples/FwbFileInputExampleHelper.vue'
 import FwbFileInputExampleSize from './fileInput/examples/FwbFileInputExampleSize.vue'
 import FwbFileInputExampleDropZone from './fileInput/examples/FwbFileInputExampleDropZone.vue'
+import FwbFileInputExampleDropZonePlaceholder from './fileInput/examples/FwbFileInputExampleDropZonePlaceholder.vue'
 import FwbFileInputExampleDropZoneMultiple from './fileInput/examples/FwbFileInputExampleDropZoneMultiple.vue'
 import FwbFileInputExampleMultiple from './fileInput/examples/FwbFileInputExampleMultiple.vue'
 </script>
@@ -31,6 +32,7 @@ const file = ref(null)
 </script>
 ```
 
+
 ## Multiple File upload
 
 <fwb-file-input-example-multiple />
@@ -52,6 +54,7 @@ const files = ref([])
 </script>
 ```
 
+
 ## Helper text
 
 <fwb-file-input-example-helper />
@@ -72,6 +75,7 @@ const file = ref(null)
 </script>
 ```
 
+
 ## Sizes
 
 <fwb-file-input-example-size />
@@ -90,8 +94,8 @@ const file = ref(null)
 </script>
 ```
 
-## Dropzone
 
+## Dropzone
 
 <fwb-file-input-example-drop-zone />
 ```vue
@@ -107,8 +111,32 @@ const file = ref(null)
 </script>
 ```
 
-## Dropzone multiple
 
+## Dropzone with custom placeholder
+
+You can customize the dropzone placeholder text using the `dropzonePlaceholder` slot:
+
+<fwb-file-input-example-drop-zone-placeholder />
+```vue
+<template>
+  <fwb-file-input v-model="file" dropzone>
+    <template #dropzonePlaceholder>
+      <span class="font-semibold">Choose your file</span>
+      or drop it here
+    </template>
+  </fwb-file-input>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
+</script>
+```
+
+
+## Dropzone multiple
 
 <fwb-file-input-example-drop-zone-multiple />
 ```vue
@@ -120,6 +148,7 @@ const file = ref(null)
 import { ref } from 'vue'
 import { FwbFileInput } from 'flowbite-vue'
 
+const file = ref(null)
 const files = ref([])
 </script>
-```
+```

docs/components/fileInput/examples/FwbFileInputExampleDropZoneMultiple.vue

@@ -7,7 +7,7 @@
     />
     <div
       v-if="files.length !== 0"
-      class="mt-4 rounded-md border border-gray-300 p-2 dark:border-gray-600"
+      class="mt-4 p-2 border border-gray-300 dark:border-gray-600 rounded-md"
     >
       <div
         v-for="file in files"

docs/components/fileInput/examples/FwbFileInputExampleDropZonePlaceholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw">
+    <fwb-file-input
+      v-model="file"
+      dropzone
+    >
+      <template #dropzonePlaceholder>
+        <span class="font-semibold">Choose your file</span>
+        or drop it here
+      </template>
+    </fwb-file-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { FwbFileInput } from '../../../../src/index'
+
+const file = ref(null)
+</script>

docs/components/fileInput/examples/FwbFileInputExampleHelper.vue

@@ -4,7 +4,7 @@
       v-model="file"
       label="Upload file"
     >
-      <p class="mt-1! text-sm text-gray-500 dark:text-gray-300">
+      <p class="mt-1! text-gray-500 dark:text-gray-300 text-sm">
         SVG, PNG, JPG or GIF (MAX. 800x400px).
       </p>
     </fwb-file-input>

docs/components/fileInput/examples/FwbFileInputExampleMultiple.vue

@@ -7,7 +7,7 @@
     />
     <div
       v-if="files.length !== 0"
-      class="mt-4 rounded-md border border-gray-300 p-2 dark:border-gray-600"
+      class="mt-4 p-2 border border-gray-300 dark:border-gray-600 rounded-md"
     >
       <div
         v-for="file in files"

docs/components/fileInput/examples/FwbFileInputExampleSize.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw grid gap-2">
+  <div class="gap-2 grid vp-raw">
     <fwb-file-input
       v-model="file"
       size="xs"

src/components/FwbFileInput/FwbFileInput.vue

@@ -15,7 +15,7 @@
     </div>
     <div
       v-else
-      class="flex flex-col items-start justify-center"
+      class="flex flex-col justify-center items-center"
       @dragover="dragOverHandler"
       @drop="dropFileHandler"
     >
@@ -40,14 +40,19 @@
               stroke="currentColor"
             />
           </svg>
-          <div v-if="!model">
+          <div v-if="(!model || (Array.isArray(model) && model.length === 0))">
             <p :class="dropzoneTextClasses">
-              <span class="font-semibold">Click to upload</span>
-              or drag and drop
+              <slot name="dropzonePlaceholder">
+                <span class="font-semibold">Click to upload</span>
+                or drag and drop
+              </slot>
             </p>
             <slot />
           </div>
-          <p v-else>File: {{ dropZoneText }}</p>
+          <p
+            v-else
+            class="text-center"
+          >File: {{ dropZoneText }}</p>
         </div>
         <input
           :accept="accept"

src/components/FwbFileInput/composables/useFileInputClasses.ts

@@ -2,11 +2,11 @@ import { computed } from 'vue'
 
 import { useMergeClasses } from '@/composables/useMergeClasses'
 
-const fileInpDefaultClasses = 'block w-full py-1 px-2 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'
-const fileInpLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-const fileInpDropzoneClasses = 'flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'
-const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'
-const fileDropzoneDefaultTextClasses = '-mb-2! text-sm text-gray-500 dark:text-gray-400'
+const fileInpDefaultClasses = 'block bg-gray-50 dark:bg-gray-700 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none w-full text-gray-900 dark:text-gray-400 text-sm cursor-pointer dark:placeholder-gray-400'
+const fileInpLabelClasses = 'block mb-2 font-medium text-gray-900 dark:text-white text-sm'
+const fileInpDropzoneClasses = 'flex flex-col justify-center items-center bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 border-2 border-gray-300 dark:border-gray-600 dark:hover:border-gray-500 border-dashed rounded-lg w-full h-64 cursor-pointer'
+const fileDropzoneWrapClasses = 'flex flex-col justify-center items-center pt-5 pb-6'
+const fileDropzoneDefaultTextClasses = '-mb-2! text-gray-500 dark:text-gray-400 text-sm'
 
 export function useFileInputClasses (size: string) {
   const fileInpClasses = computed(() => useMergeClasses([