input

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

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

static/usage/v7/input/clear/vue.md

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

static/usage/v7/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 lang="ts" setup>
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```

static/usage/v7/input/filtering/vue.md

@@ -12,35 +12,28 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-    setup() {
-      const ionInputEl = ref();
-      const inputModel = ref('');
-      const onInput = (ev) => {
-        const value = ev.target!.value;
+  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>
 ```

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

@@ -13,36 +13,31 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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');
-      },
-    },
-  });
+  import { ref } from 'vue';
+
+  const input = ref(null);
+
+  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/input/label-placement/vue.md

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

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

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

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

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

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

@@ -12,22 +12,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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>
 ```

static/usage/v7/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 lang="ts" setup>
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```

static/usage/v7/input/theming/css-properties/vue.md

@@ -10,13 +10,8 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 
 <style>

static/usage/v7/input/types/vue.md

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