fix(textarea): add new props: wrapperClass and inputClass

packages/forms/src/textarea/Textarea.stories.ts

@@ -30,24 +30,13 @@ export default {
 } as Meta;
 
 const Template: Story = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {VTextarea},
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return {args};
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `<VTextarea v-bind='args'/>`,
 });
 
-// export const Textarea: Story = (args) => ({
-//   components: { VTextarea },
-//   setup() {
-//     return { args };
-//   },
-//   template: '<VTextarea v-bind="args" />',
-// });
-
 export const Default = Template.bind({});
 Default.args = {};
 Default.parameters = {
@@ -96,10 +85,11 @@ Error.parameters = {
   },
 };
 
-export const Validation: Story<{}> = (args) => ({
+export const Validation: Story<{}> = () => ({
   components: {VTextarea, VBtn},
   setup() {
     const schema = object({
+      bio: string().required().label('Bio'),
       message: string().required().label('Message'),
     });
 
@@ -115,7 +105,19 @@ export const Validation: Story<{}> = (args) => ({
   },
   template: `
     <form @submit="onSubmit" class="border-none">
-      <v-textarea name="message" label="Message" placeholder="Enter your message" />
+      <v-textarea
+        wrapper-class="mb-4"
+        name="message"
+        label="Message"
+        placeholder="Enter your message"
+      />
+      <v-textarea
+        wrapper-class="mb-4"
+        name="bio"
+        label="Bio"
+        placeholder="Enter your bio"
+        input-class="italic"
+      />
       <v-btn type="submit">Submit</v-btn>
       <v-btn type="button" text @click="resetForm">Reset</v-btn>
     </form>

packages/forms/src/textarea/Textarea.vue

@@ -60,6 +60,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  wrapperClass: {
+    type: String,
+    default: '',
+  },
+  inputClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const {error, size} = toRefs(props);
@@ -71,19 +79,20 @@ const {value, errorMessage} = useField(props.name, props.rules, {
 });
 
 const {class: sizeClass} = useTextSize(size.value);
-const inputClass = computed(() =>
+const inputClasses = computed(() =>
   useInputClasses(error.value || !!errorMessage.value),
 );
 
 const classes = computed(() => [
-  inputClass.value,
+  inputClasses.value,
   sizeClass.value,
   {shadow: props.shadow},
+  props.inputClass,
 ]);
 </script>
 
 <template>
-  <div class="mb-4">
+  <div :class="wrapperClass">
     <label v-if="label" :for="name" class="mb-1 block">{{ label }}</label>
     <textarea
       :id="name"