feat: inherit attrs to Textarea + fix Input label color (#245)

* feat: add more attributes to Textarea

* refactor: use `inheritAttrs` option to simplify code

* fix: `Input` label color in dark mode

docs/components/textarea.md

@@ -1,6 +1,8 @@
 <script setup>
 import FwbTextareaExample from './textarea/examples/FwbTextareaExample.vue'
 import FwbTextareaExampleComment from './textarea/examples/FwbTextareaExampleComment.vue'
+import FwbTextareaExampleDisabled from './textarea/examples/FwbTextareaExampleDisabled.vue'
+import FwbTextareaExampleFormId from './textarea/examples/FwbTextareaExampleFormId.vue'
 </script>
 
 # Vue Textarea - Flowbite
@@ -24,7 +26,7 @@ Get started with the default example of a textarea component below.
     v-model="message"
     :rows="4"
     label="Your message"
-    placeholder="Write you message..."
+    placeholder="Write your message..."
   />
 </template>
 
@@ -50,7 +52,7 @@ Most often the textarea component is used as the main text field input element i
         :rows="3"
         custom
         label="Your message"
-        placeholder="Write you message..."
+        placeholder="Write your message..."
       >
         <template #footer>
           <div class="flex items-center justify-between">
@@ -93,3 +95,55 @@ import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'
 const message = ref('')
 </script>
 ```
+
+## Disabled / Readonly Textarea
+
+<fwb-textarea-example-disabled />
+```vue
+<template>
+  <div>
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      disabled
+    />
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      readonly
+    />
+  </div>
+</template>
+```
+
+## Textarea with form ID
+
+<fwb-textarea-example-form-id />
+```vue
+<template>
+  <div>
+    <form id="my-form" @submit.prevent="handleSubmit">
+      <!-- Inside the form -->
+      <fwb-textarea
+        v-model="message"
+        label="Your message"
+        placeholder="Write your message..."
+      />
+      <fwb-button type="submit">
+        Submit
+      </fwb-button>
+    </form>
+
+    <!-- Outside the form -->
+    <fwb-textarea
+      v-model="message"
+      label="Your message"
+      placeholder="Write your message..."
+      form="my-form"
+      required
+    />
+  </div>
+</template>
+```

docs/components/textarea/examples/FwbTextareaExample.vue

@@ -4,7 +4,7 @@
       v-model="message"
       :rows="4"
       label="Your message"
-      placeholder="Write you message..."
+      placeholder="Write your message..."
     />
   </div>
 </template>

docs/components/textarea/examples/FwbTextareaExampleComment.vue

@@ -5,7 +5,7 @@
       :rows="3"
       custom
       label="Your message"
-      placeholder="Write you message..."
+      placeholder="Write your message..."
     >
       <template #footer>
         <div class="flex items-center justify-between">
@@ -84,7 +84,10 @@
     </fwb-textarea>
     <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
       Remember, contributions to this topic should follow our
-      <fwb-a href="#">
+      <fwb-a
+        class="underline"
+        href="#"
+      >
         Community Guidelines
       </fwb-a>.
     </p>

docs/components/textarea/examples/FwbTextareaExampleDisabled.vue

@@ -0,0 +1,36 @@
+<template>
+  <form
+    class="vp-raw"
+    @submit.prevent
+  >
+    <fwb-textarea
+      v-model="message"
+      label="Textarea with minlength 10 and maxlength 20"
+      minlength="10"
+      maxlength="20"
+      required
+    />
+    <fwb-textarea
+      v-model="message"
+      label="Disabled textarea"
+      placeholder="Cannot be edited"
+      disabled
+    />
+    <fwb-textarea
+      v-model="message"
+      label="Readonly textarea"
+      placeholder="Cannot be edited"
+      readonly
+    />
+    <fwb-button type="submit">
+      Validate
+    </fwb-button>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton, FwbTextarea } from '../../../../src/index'
+
+const message = ref('Edit me!')
+</script>

docs/components/textarea/examples/FwbTextareaExampleFormId.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-y-4">
+    <form
+      id="fwb-textarea-example-form-id"
+      class="vp-raw"
+      @submit.prevent
+    >
+      <fwb-input
+        v-model="inputMessage"
+        label="Input inside the form"
+        placeholder="Write your message..."
+      />
+      <fwb-button
+        class="mt-2"
+        type="submit"
+      >
+        Validate
+      </fwb-button>
+    </form>
+    <fwb-textarea
+      v-model="textareaMessage"
+      label="Textarea outside the form"
+      form="fwb-textarea-example-form-id"
+      minlength="20"
+      required
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbButton, FwbInput, FwbTextarea } from '../../../../src/index'
+
+const inputMessage = ref('')
+const textareaMessage = ref('')
+</script>

src/components/FwbInput/composables/useInputClasses.ts

@@ -55,7 +55,7 @@ export function useInputClasses (props: UseInputClassesProps): {
       ? 'text-green-700 dark:text-green-500'
       : vs === validationStatusMap.Error
         ? 'text-red-700 dark:text-red-500'
-        : 'text-gray-900 dark:text-gray-300'
+        : 'text-gray-900 dark:text-white'
 
     return twMerge(baseLabelClasses, classByStatus)
   })

src/components/FwbTextarea/FwbTextarea.vue

@@ -4,8 +4,9 @@
     <span :class="wrapperClasses">
       <textarea
         v-model="model"
-        :rows="rows"
+        v-bind="$attrs"
         :class="textareaClasses"
+        :rows="rows"
         :placeholder="placeholder"
       />
       <span
@@ -23,13 +24,17 @@ import { computed } from 'vue'
 import { useTextareaClasses } from './composables/useTextareaClasses'
 
 interface TextareaProps {
-  modelValue?: string;
+  modelValue?: string
-  label?: string;
+  label?: string
-  rows?: number;
+  rows?: number
-  custom?: boolean;
+  custom?: boolean
-  placeholder?: string;
+  placeholder?: string
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<TextareaProps>(), {
   modelValue: '',
   label: 'Your message',
@@ -48,10 +53,5 @@ const model = computed({
   },
 })
 
-const {
+const { textareaClasses, labelClasses, wrapperClasses, footerClasses } = useTextareaClasses(props.custom)
-  textareaClasses,
-  labelClasses,
-  wrapperClasses,
-  footerClasses,
-} = useTextareaClasses(props.custom)
 </script>