implement resiazble textarea

src/components/input.vue

@@ -9,13 +9,14 @@
         class="input"
         :id="id"
         :name="name"
-        cols="30"
-        rows="10"
+        rows="1"
         v-if="type == 'textarea'"
         :placeholder="placeholder"
         v-model="value"
         :required="required"
         :disabled="disabled"
+        @input="resizetxtArea"
+        ref="textarea"
       ></textarea>
       <input
         v-else
@@ -111,9 +112,18 @@ export default defineComponent({
       if (new_val !== this.modelValue) this.$emit("update:modelValue", new_val);
     },
   },
-  methods: {},
+  methods: {
+    resizetxtArea() {
+      const a = this.$refs.textarea as HTMLElement;
+      a.style.height = "auto";
+      a.style.height = a.scrollHeight + "px";
+    },
+  },
   mounted(): void {
     this.value = this.modelValue + "";
+    if (this.type == "textarea") {
+      this.resizetxtArea();
+    }
   },
 });
 </script>
@@ -207,7 +217,9 @@ export default defineComponent({
 .input--invalid:focus {
   box-shadow: 0 0 0 2px #e93255 !important;
 }
-
+textarea.input {
+  overflow: hidden;
+}
 .ds-link {
   all: initial;
   color: #063b9e;