toast

Author: mapsandapps

docs/api/toast.md

@@ -79,7 +79,7 @@ Toasts can be swiped to dismiss by using the `swipeGesture` property. This featu
 import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
 
 <SwipeGesture />
-  
+
 ## Layout
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

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

@@ -10,41 +10,32 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonToast } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      const handlerMessage = ref('');
-      const roleMessage = ref('');
-      const toastButtons = [
-        {
-          text: 'More Info',
-          role: 'info',
-          handler: () => {
-            console.log('More Info clicked');
-          },
-        },
-        {
-          text: 'Dismiss',
-          role: 'cancel',
-          handler: () => {
-            console.log('Dismiss clicked');
-          },
-        },
-      ];
-      const handleDismiss = (ev: CustomEvent) => {
-        const { role } = ev.detail;
-        console.log(`Dismissed with role: ${role}`);
-      };
-
-      return {
-        toastButtons,
-        handleDismiss,
-      };
+  const handlerMessage = ref('');
+  const roleMessage = ref('');
+  const toastButtons = [
+    {
+      text: 'More Info',
+      role: 'info',
+      handler: () => {
+        console.log('More Info clicked');
+      },
+    },
+    {
+      text: 'Dismiss',
+      role: 'cancel',
+      handler: () => {
+        console.log('Dismiss clicked');
+      },
     },
-  });
+  ];
+
+  const handleDismiss = (ev: CustomEvent) => {
+    const { role } = ev.detail;
+    console.log(`Dismissed with role: ${role}`);
+  };
 </script>
 ```

static/usage/v7/toast/icon/vue.md

@@ -4,17 +4,8 @@
   <ion-toast trigger="open-toast" message="Hello World!" :duration="3000" :icon="globe"></ion-toast>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonToast } from '@ionic/vue';
   import { globe } from 'ionicons/icons';
-
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      return { globe };
-    },
-  });
 </script>
 ```

static/usage/v7/toast/inline/basic/vue.md

@@ -12,19 +12,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonToast } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonToast,
-    },
-  });
 </script>
 ```

static/usage/v7/toast/inline/is-open/vue.md

@@ -16,20 +16,13 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast },
-    setup() {
-      const isOpen = ref(false);
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return { isOpen, setOpen };
-    },
-  });
+  const isOpen = ref(false);
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
+  };
 </script>
 ```

static/usage/v7/toast/layout/vue.md

@@ -17,21 +17,13 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonToast } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      const toastButtons = [
-        {
-          text: 'Action With Long Text'
-        }
-      ]
-
-      return toastButtons }
-    }
-  });
+  const toastButtons = [
+    {
+      text: 'Action With Long Text',
+    },
+  ];
 </script>
 ```

static/usage/v7/toast/position-anchor/vue.md

@@ -33,20 +33,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonContent,
-      IonFooter,
-      IonHeader,
-      IonTitle,
-      IonToast,
-      IonToolbar,
-    },
-  });
 </script>
 ```

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

@@ -5,22 +5,17 @@
   <ion-button expand="block" @click="presentToast('bottom')">Present Toast At the Bottom</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, toastController } from '@ionic/vue';
 
-  export default {
-    components: { IonButton },
-    methods: {
-      async presentToast(position: 'top' | 'middle' | 'bottom') {
-        const toast = await toastController.create({
-          message: 'Hello World!',
-          duration: 1500,
-          position: position,
-        });
+  async function presentToast(position: 'top' | 'middle' | 'bottom') {
+    const toast = await toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position,
+    });
 
-        await toast.present();
-      },
-    },
-  };
+    await toast.present();
+  }
 </script>
 ```

static/usage/v7/toast/theming/vue.md

@@ -10,22 +10,15 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonToast } from '@ionic/vue';
 
-  export default {
-    components: { IonButton, IonToast },
-    setup() {
-      const toastButtons = [
-        {
-          text: 'Dismiss',
-          role: 'cancel',
-        },
-      ];
-
-      return { toastButtons };
+  const toastButtons = [
+    {
+      text: 'Dismiss',
+      role: 'cancel',
     },
-  };
+  ];
 </script>
 
 <style>