textarea

Author: mapsandapps

static/usage/v7/textarea/autogrow/vue.md

@@ -10,12 +10,7 @@
   </ion-item>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonItem, IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonTextarea },
-  });
 </script>
 ```

static/usage/v7/textarea/basic/vue.md

@@ -13,12 +13,7 @@
   </ion-list>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonItem, IonList, IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonTextarea },
-  });
 </script>
 ```

static/usage/v7/textarea/clear-on-edit/vue.md

@@ -6,12 +6,7 @@
   ></ion-textarea>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```

static/usage/v7/textarea/counter/vue.md

@@ -11,17 +11,11 @@
   ></ion-textarea>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonTextarea },
-    methods: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+  function customFormatter(inputLength, maxLength) {
+    return `${maxLength - inputLength} characters remaining`;
+  }
 </script>
 ```

static/usage/v7/textarea/fill/vue.md

@@ -12,12 +12,7 @@
   ></ion-textarea>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```

static/usage/v7/textarea/helper-error/vue.md

@@ -12,36 +12,31 @@
   ></ion-textarea>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-    methods: {
-      validateEmail(email) {
-        return email.match(
-          /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-        );
-      },
-
-      validate(ev) {
-        const value = ev.target.value;
-
-        this.$refs.input.$el.classList.remove('ion-valid');
-        this.$refs.input.$el.classList.remove('ion-invalid');
-
-        if (value === '') return;
-
-        this.validateEmail(value)
-          ? this.$refs.input.$el.classList.add('ion-valid')
-          : this.$refs.input.$el.classList.add('ion-invalid');
-      },
-
-      markTouched() {
-        this.$refs.input.$el.classList.add('ion-touched');
-      },
-    },
-  });
+  import { ref } from 'vue';
+
+  const input = ref();
+
+  function validateEmail(email) {
+    return email.match(
+      /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    );
+  }
+
+  function validate(ev) {
+    const value = ev.target.value;
+
+    input.value.$el.classList.remove('ion-valid');
+    input.value.$el.classList.remove('ion-invalid');
+
+    if (value === '') return;
+
+    validateEmail(value) ? input.value.$el.classList.add('ion-valid') : input.value.$el.classList.add('ion-invalid');
+  }
+
+  function markTouched() {
+    input.value.$el.classList.add('ion-touched');
+  }
 </script>
 ```

static/usage/v7/textarea/label-placement/vue.md

@@ -16,12 +16,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTextarea, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList },
-  });
 </script>
 ```

static/usage/v7/textarea/label-slot/vue.md

@@ -9,12 +9,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTextarea, IonItem, IonList, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList, IonText },
-  });
 </script>
 ```

static/usage/v7/textarea/no-visible-label/vue.md

@@ -7,12 +7,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTextarea, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList },
-  });
 </script>
 ```

static/usage/v7/textarea/start-end-slots/vue.md

@@ -12,22 +12,12 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/vue';
   import { eye, lockClosed } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonItem,
-      IonList,
-      IonTextarea,
-    },
-    setup() {
-      return { eye, lockClosed };
-    },
-  });
+  function setup() {
+    return { eye, lockClosed };
+  }
 </script>
 ```