From a4a717f4e0ee1749f3b6bf4b4118557f85150e61 Mon Sep 17 00:00:00 2001
From: WangYK <62269186+AnotiaWang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 19:22:25 +0800
Subject: [PATCH] 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                   | 58 ++++++++++++++++++-
 .../textarea/examples/FwbTextareaExample.vue  |  2 +-
 .../examples/FwbTextareaExampleComment.vue    |  7 ++-
 .../examples/FwbTextareaExampleDisabled.vue   | 36 ++++++++++++
 .../examples/FwbTextareaExampleFormId.vue     | 36 ++++++++++++
 .../FwbInput/composables/useInputClasses.ts   |  2 +-
 src/components/FwbTextarea/FwbTextarea.vue    | 24 ++++----
 7 files changed, 147 insertions(+), 18 deletions(-)
 create mode 100644 docs/components/textarea/examples/FwbTextareaExampleDisabled.vue
 create mode 100644 docs/components/textarea/examples/FwbTextareaExampleFormId.vue

diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index e2ba755..92dbd6e 100644
--- a/docs/components/textarea.md
+++ b/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>
+```
diff --git a/docs/components/textarea/examples/FwbTextareaExample.vue b/docs/components/textarea/examples/FwbTextareaExample.vue
index 46cbc8f..93bdaa8 100644
--- a/docs/components/textarea/examples/FwbTextareaExample.vue
+++ b/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>
diff --git a/docs/components/textarea/examples/FwbTextareaExampleComment.vue b/docs/components/textarea/examples/FwbTextareaExampleComment.vue
index 620808b..921618a 100644
--- a/docs/components/textarea/examples/FwbTextareaExampleComment.vue
+++ b/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>
diff --git a/docs/components/textarea/examples/FwbTextareaExampleDisabled.vue b/docs/components/textarea/examples/FwbTextareaExampleDisabled.vue
new file mode 100644
index 0000000..eac3bad
--- /dev/null
+++ b/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>
diff --git a/docs/components/textarea/examples/FwbTextareaExampleFormId.vue b/docs/components/textarea/examples/FwbTextareaExampleFormId.vue
new file mode 100644
index 0000000..50e6539
--- /dev/null
+++ b/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>
diff --git a/src/components/FwbInput/composables/useInputClasses.ts b/src/components/FwbInput/composables/useInputClasses.ts
index d9bbd4c..772364b 100644
--- a/src/components/FwbInput/composables/useInputClasses.ts
+++ b/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)
   })
diff --git a/src/components/FwbTextarea/FwbTextarea.vue b/src/components/FwbTextarea/FwbTextarea.vue
index 6a1539d..ca09236 100644
--- a/src/components/FwbTextarea/FwbTextarea.vue
+++ b/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;
-  label?: string;
-  rows?: number;
-  custom?: boolean;
-  placeholder?: string;
+  modelValue?: string
+  label?: string
+  rows?: number
+  custom?: boolean
+  placeholder?: string
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<TextareaProps>(), {
   modelValue: '',
   label: 'Your message',
@@ -48,10 +53,5 @@ const model = computed({
   },
 })
 
-const {
-  textareaClasses,
-  labelClasses,
-  wrapperClasses,
-  footerClasses,
-} = useTextareaClasses(props.custom)
+const { textareaClasses, labelClasses, wrapperClasses, footerClasses } = useTextareaClasses(props.custom)
 </script>