From 5458e5dada6739e262d76bc57fe0ff9e65f5f420 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:19:23 -0500
Subject: [PATCH 01/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/basic/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/basic/vue.md b/static/usage/v8/input/basic/vue.md
index cfdca09244a..70dc672fef3 100644
--- a/static/usage/v8/input/basic/vue.md
+++ b/static/usage/v8/input/basic/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```

From 2ee6800343067434b5b31584e36b697c12849661 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:20:14 -0500
Subject: [PATCH 02/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/clear/vue.md | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/static/usage/v8/input/clear/vue.md b/static/usage/v8/input/clear/vue.md
index e5cd540d469..ba7665b8850 100644
--- a/static/usage/v8/input/clear/vue.md
+++ b/static/usage/v8/input/clear/vue.md
@@ -34,12 +34,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
+<script setup lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';  
 </script>
 ```

From 0d44a769bfb39c9b9304f4f66038525ac989b95c Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:21:47 -0500
Subject: [PATCH 03/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/fill/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/fill/vue.md b/static/usage/v8/input/fill/vue.md
index d1f2e440b05..b974339fb82 100644
--- a/static/usage/v8/input/fill/vue.md
+++ b/static/usage/v8/input/fill/vue.md
@@ -7,12 +7,7 @@
   <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```

From 5c8f91f5efaf3820352c4a68fd60a372b8ee800d Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:23:20 -0500
Subject: [PATCH 04/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/filtering/vue.md | 45 +++++++++++---------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/static/usage/v8/input/filtering/vue.md b/static/usage/v8/input/filtering/vue.md
index a95e5dcc843..2e6990ffe33 100644
--- a/static/usage/v8/input/filtering/vue.md
+++ b/static/usage/v8/input/filtering/vue.md
@@ -12,35 +12,28 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  
+  const ionInputEl = ref();
+  const inputModel = ref('');
+  
+  const onInput = (ev) => {
+    const value = ev.target!.value;
 
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-    setup() {
-      const ionInputEl = ref();
-      const inputModel = ref('');
-      const onInput = (ev) => {
-        const value = ev.target!.value;
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
 
-        // Removes non alphanumeric characters
-        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    inputModel.value = filteredValue;
 
-        /**
-         * Update both the state variable and
-         * the component to keep them in sync.
-         */
-        inputModel.value = filteredValue;
-
-        const inputCmp = ionInputEl.value;
-        if (inputCmp !== undefined) {
-          inputCmp.$el.value = filteredValue;
-        }
-      };
-
-      return { ionInputEl, inputModel, onInput };
-    },
-  });
+    const inputCmp = ionInputEl.value;
+    if (inputCmp !== undefined) {
+      inputCmp.$el.value = filteredValue;
+    }
+  };
 </script>
 ```

From 7c585b4675d785e8eb1e08510cae309a32e45c20 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:30:15 -0500
Subject: [PATCH 05/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/helper-error/vue.md | 67 ++++++++++++-----------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/static/usage/v8/input/helper-error/vue.md b/static/usage/v8/input/helper-error/vue.md
index ce801d04ac7..6430da4c3b9 100644
--- a/static/usage/v8/input/helper-error/vue.md
+++ b/static/usage/v8/input/helper-error/vue.md
@@ -13,36 +13,41 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
-  import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-    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');
-      },
-    },
-  });
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IonInput } from '@ionic/vue';
+
+const intput = ref<HTMLElement | null>(null);
+
+function validateEmail(email: string) {
+  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])?)*$/
+  ) !== null;
+}
+
+function validate(ev: Event) {
+  const target = ev.target as HTMLInputElement;
+  const value = target.value;
+
+  if (!intput.value) return;
+
+  const inputElement = intput.value;
+
+  inputElement.classList.remove('ion-valid');
+  inputElement.classList.remove('ion-invalid');
+
+  if (value === '') return;
+
+  if (validateEmail(value)) {
+    inputElement.classList.add('ion-valid');
+  } else {
+    inputElement.classList.add('ion-invalid');
+  }
+}
+
+function markTouched() {
+  if (!intput.value) return;
+  intput.value.classList.add('ion-touched');
+}
 </script>
 ```

From a8c3a2cabb532ec42f337c7542a04eed4b9c0760 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:32:02 -0500
Subject: [PATCH 06/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/label-placement/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/label-placement/vue.md b/static/usage/v8/input/label-placement/vue.md
index 8854647965d..628492195a3 100644
--- a/static/usage/v8/input/label-placement/vue.md
+++ b/static/usage/v8/input/label-placement/vue.md
@@ -19,12 +19,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```

From 7f3e49d28d07a6e1a32afd501154d2550fb5658d Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:32:47 -0500
Subject: [PATCH 07/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/label-slot/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/label-slot/vue.md b/static/usage/v8/input/label-slot/vue.md
index 4b3fb3daeb8..97906146a2e 100644
--- a/static/usage/v8/input/label-slot/vue.md
+++ b/static/usage/v8/input/label-slot/vue.md
@@ -9,12 +9,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList, IonText },
-  });
 </script>
 ```

From 9030a6477afea998706b0a774e21f1fb7cf72066 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:33:47 -0500
Subject: [PATCH 08/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/no-visible-label/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/no-visible-label/vue.md b/static/usage/v8/input/no-visible-label/vue.md
index cc181047943..ceaa97a294b 100644
--- a/static/usage/v8/input/no-visible-label/vue.md
+++ b/static/usage/v8/input/no-visible-label/vue.md
@@ -7,12 +7,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```

From 5cf4e0b0bc6dc69bc77b53e339c2ba0370d2b600 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:34:34 -0500
Subject: [PATCH 09/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/start-end-slots/vue.md | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/static/usage/v8/input/start-end-slots/vue.md b/static/usage/v8/input/start-end-slots/vue.md
index 76380eb566a..77f2a5d472b 100644
--- a/static/usage/v8/input/start-end-slots/vue.md
+++ b/static/usage/v8/input/start-end-slots/vue.md
@@ -12,22 +12,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
   import { eye, lockClosed } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonInput,
-      IonItem,
-      IonList,
-    },
-    setup() {
-      return { eye, lockClosed };
-    },
-  });
 </script>
 ```

From 1721ecd57db79f00d182cd9f4f2b3237a8342f2b Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:35:10 -0500
Subject: [PATCH 10/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/item-divider/basic/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/item-divider/basic/vue.md b/static/usage/v8/item-divider/basic/vue.md
index 22c9565c278..6d182a324fe 100644
--- a/static/usage/v8/item-divider/basic/vue.md
+++ b/static/usage/v8/item-divider/basic/vue.md
@@ -35,12 +35,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
-  });
 </script>
 ```

From c1c9dee92977e5ec9b37c5ac7d0cd226dd1f4769 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:35:46 -0500
Subject: [PATCH 11/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/item-divider/theming/colors/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/item-divider/theming/colors/vue.md b/static/usage/v8/item-divider/theming/colors/vue.md
index 981f99a09da..60f964551f5 100644
--- a/static/usage/v8/item-divider/theming/colors/vue.md
+++ b/static/usage/v8/item-divider/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider, IonLabel },
-  });
 </script>
 ```

From 3edfdabfdf1d0bd358743c47fe5aa9689f573eb6 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:36:19 -0500
Subject: [PATCH 12/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/item-divider/theming/css-properties/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/item-divider/theming/css-properties/vue.md b/static/usage/v8/item-divider/theming/css-properties/vue.md
index 950e3775d83..2a6776fcb76 100644
--- a/static/usage/v8/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v8/item-divider/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider },
-  });
 </script>
 
 <style scoped>

From c5ef65406ba7a077912dc5776d69ca259c28a20e Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:37:10 -0500
Subject: [PATCH 13/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/theming/colors/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/theming/colors/vue.md b/static/usage/v8/input/theming/colors/vue.md
index e9d3a4e0ef4..60968a1cd27 100644
--- a/static/usage/v8/input/theming/colors/vue.md
+++ b/static/usage/v8/input/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```

From 8773c5f2059563340c2ac77fb01c29d79ff4d5af Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:37:42 -0500
Subject: [PATCH 14/14] docs(vue): streamline usage example with script setup
 syntax

---
 static/usage/v8/input/theming/css-properties/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v8/input/theming/css-properties/vue.md b/static/usage/v8/input/theming/css-properties/vue.md
index 77ab74eeeab..71f9ab13376 100644
--- a/static/usage/v8/input/theming/css-properties/vue.md
+++ b/static/usage/v8/input/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 
 <style>