docs(vue): streamline usage examples with script setup syntax (#2956)

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <[email protected]>

Author: treighmawaka

static/usage/v7/alert/buttons/vue.md

@@ -11,44 +11,32 @@
   <p>{{ roleMessage }}</p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const handlerMessage = ref('');
-      const roleMessage = ref('');
+  const handlerMessage = ref('');
+  const roleMessage = ref('');
 
-      const alertButtons = [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          handler: () => {
-            handlerMessage.value = 'Alert canceled';
-          },
-        },
-        {
-          text: 'OK',
-          role: 'confirm',
-          handler: () => {
-            handlerMessage.value = 'Alert confirmed';
-          },
-        },
-      ];
-
-      const setResult = (ev: CustomEvent) => {
-        roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
-      };
-
-      return {
-        handlerMessage,
-        roleMessage,
-        alertButtons,
-        setResult,
-      };
+  const alertButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      handler: () => {
+        handlerMessage.value = 'Alert canceled';
+      },
     },
+    {
+      text: 'OK',
+      role: 'confirm',
+      handler: () => {
+        handlerMessage.value = 'Alert confirmed';
+      },
+    },
+  ];
+
+  const setResult = (ev: CustomEvent) => {
+    roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
   };
 </script>
 ```

static/usage/v7/alert/customization/vue.md

@@ -4,26 +4,19 @@
   <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" :buttons="alertButtons"></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = [
-        {
-          text: 'No',
-          cssClass: 'alert-button-cancel',
-        },
-        {
-          text: 'Yes',
-          cssClass: 'alert-button-confirm',
-        },
-      ];
-
-      return { alertButtons };
+  const alertButtons = [
+    {
+      text: 'No',
+      cssClass: 'alert-button-cancel',
     },
-  };
+    {
+      text: 'Yes',
+      cssClass: 'alert-button-confirm',
+    },
+  ];
 </script>
 
 <style>

static/usage/v7/alert/inputs/radios/vue.md

@@ -9,33 +9,26 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          label: 'Red',
-          type: 'radio',
-          value: 'red',
-        },
-        {
-          label: 'Blue',
-          type: 'radio',
-          value: 'blue',
-        },
-        {
-          label: 'Green',
-          type: 'radio',
-          value: 'green',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      label: 'Red',
+      type: 'radio',
+      value: 'red',
+    },
+    {
+      label: 'Blue',
+      type: 'radio',
+      value: 'blue',
+    },
+    {
+      label: 'Green',
+      type: 'radio',
+      value: 'green',
     },
-  };
+  ];
 </script>
 ```

static/usage/v7/alert/inputs/text-inputs/vue.md

@@ -9,37 +9,30 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          placeholder: 'Name',
-        },
-        {
-          placeholder: 'Nickname (max 8 characters)',
-          attributes: {
-            maxlength: 8,
-          },
-        },
-        {
-          type: 'number',
-          placeholder: 'Age',
-          min: 1,
-          max: 100,
-        },
-        {
-          type: 'textarea',
-          placeholder: 'A little about yourself',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      placeholder: 'Name',
+    },
+    {
+      placeholder: 'Nickname (max 8 characters)',
+      attributes: {
+        maxlength: 8,
+      },
+    },
+    {
+      type: 'number',
+      placeholder: 'Age',
+      min: 1,
+      max: 100,
+    },
+    {
+      type: 'textarea',
+      placeholder: 'A little about yourself',
     },
-  };
+  ];
 </script>
 ```

static/usage/v7/alert/presenting/controller/vue.md

@@ -3,25 +3,18 @@
   <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, alertController } from '@ionic/vue';
 
-  export default {
-    components: { IonButton },
-    setup() {
-      const presentAlert = async () => {
-        const alert = await alertController.create({
-          header: 'Alert',
-          subHeader: 'Important message',
-          message: 'This is an alert!',
-          buttons: ['OK'],
-        });
+  const presentAlert = async () => {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Important message',
+      message: 'This is an alert!',
+      buttons: ['OK'],
+    });
 
-        await alert.present();
-      };
-
-      return { presentAlert };
-    },
+    await alert.present();
   };
 </script>
 ```

static/usage/v7/alert/presenting/isOpen/vue.md

@@ -11,22 +11,15 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const isOpen = ref(false);
-      const alertButtons = ['OK'];
+  const isOpen = ref(false);
+  const alertButtons = ['OK'];
 
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return { isOpen, alertButtons, setOpen };
-    },
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
   };
 </script>
 ```

static/usage/v7/alert/presenting/trigger/vue.md

@@ -10,16 +10,9 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-
-      return { alertButtons };
-    },
-  };
+  const alertButtons = ['OK'];
 </script>
 ```

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

@@ -12,17 +12,11 @@
   ></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: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+  const customFormatter = (inputLength, maxLength) => {
+    return `${maxLength - inputLength} characters remaining`;
+  };
 </script>
 ```

static/usage/v7/modal/controller/vue/example_vue.md

@@ -13,31 +13,25 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
+  import { ref } from 'vue';
 
-  export default {
-    components: { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle },
-    data() {
-      return {
-        message: 'This modal example uses the modalController to present and dismiss modals.',
-      };
-    },
-    methods: {
-      async openModal() {
-        const modal = await modalController.create({
-          component: Modal,
-        });
-        modal.present();
+  const message = ref('This modal example uses the modalController to present and dismiss modals.');
 
-        const { data, role } = await modal.onWillDismiss();
+  const openModal = async () => {
+    const modal = await modalController.create({
+      component: Modal,
+    });
 
-        if (role === 'confirm') {
-          this.message = `Hello, ${data}!`;
-        }
-      },
-    },
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === 'confirm') {
+      message.value = `Hello, ${data}!`;
+    }
   };
 </script>
 ```

static/usage/v7/modal/controller/vue/modal_vue.md

@@ -18,7 +18,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonContent,
     IonHeader,
@@ -30,19 +30,10 @@
     IonInput,
     modalController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
+  const name = ref();
 
-  export default defineComponent({
-    name: 'Modal',
-    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonInput },
-    methods: {
-      cancel() {
-        return modalController.dismiss(null, 'cancel');
-      },
-      confirm() {
-        return modalController.dismiss(this.name, 'confirm');
-      },
-    },
-  });
+  const cancel = () => modalController.dismiss(null, 'cancel');
+  const confirm = () => modalController.dismiss(name.value, 'confirm');
 </script>
 ```