Textarea props

docs/components/textarea.md

@@ -102,6 +102,13 @@ const message = ref('')
 ```vue
 <template>
   <div>
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      max-length="20"
+      min-length="10"
+    />
     <fwb-textarea
       v-model="message"
       label="Your message"

docs/components/textarea/examples/FwbTextareaExampleDisabled.vue

@@ -6,8 +6,8 @@
     <fwb-textarea
       v-model="message"
       label="Textarea with minlength 10 and maxlength 20"
-      minlength="10"
-      maxlength="20"
+      min-length="10"
+      max-length="20"
       required
     />
     <fwb-textarea

src/components/FwbFileInput/FwbFileInput.vue

@@ -15,11 +15,12 @@
     </div>
     <div
       v-else
-      class="flex items-center justify-center"
+      class="flex flex-col items-start justify-center"
       @change="handleChange"
       @dragover="dragOverHandler"
       @drop="dropFileHandler"
     >
+    <span v-if="label !== ''" :class="labelClasses">{{ label }}</span>
       <label :class="dropzoneLabelClasses">
         <div :class="dropzoneWrapClasses">
           <svg

src/components/FwbTextarea/FwbTextarea.vue

@@ -8,6 +8,8 @@
         :class="textareaClasses"
         :rows="rows"
         :placeholder="placeholder"
+        :maxlength="maxLength"
+        :minlength="minLength"
       />
       <span
         v-if="$slots.footer"
@@ -29,6 +31,8 @@ interface TextareaProps {
   rows?: number
   custom?: boolean
   placeholder?: string
+  maxLength?: number,
+  minLength?: number,
 }
 
 defineOptions({
@@ -41,6 +45,8 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   rows: 4,
   custom: false,
   placeholder: 'Write your message here...',
+  maxLength: 10000,
+  minLength: 0,
 })
 
 const emit = defineEmits(['update:modelValue'])

src/components/FwbTextarea/composables/useTextareaClasses.ts

@@ -2,7 +2,7 @@ import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
 import { computed } from 'vue'
 
 const textareaWrapperClasses = 'block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
-const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50'
 const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
 const textareaFooterClasses = 'block py-2 px-3 border-gray-200 dark:border-gray-600'