docs(vue): add revised overlay examples (#22173)

core/src/components/action-sheet/readme.md

@@ -286,6 +286,7 @@ export class ActionSheetExample {
 <script>
 import { IonButton, actionSheetController } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
 
 export default defineComponent({
   components: { IonButton },
@@ -299,35 +300,35 @@ export default defineComponent({
             {
               text: 'Delete',
               role: 'destructive',
-              icon: 'trash',
+              icon: trash,
               handler: () => {
                 console.log('Delete clicked')
               },
             },
             {
               text: 'Share',
-              icon: 'share',
+              icon: share,
               handler: () => {
                 console.log('Share clicked')
               },
             },
             {
               text: 'Play (open modal)',
-              icon: 'caret-forward-circle',
+              icon: caretForwardCircle,
               handler: () => {
                 console.log('Play clicked')
               },
             },
             {
               text: 'Favorite',
-              icon: 'heart',
+              icon: heart,
               handler: () => {
                 console.log('Favorite clicked')
               },
             },
             {
               text: 'Cancel',
-              icon: 'close',
+              icon: close,
               role: 'cancel',
               handler: () => {
                 console.log('Cancel clicked')
@@ -342,6 +343,77 @@ export default defineComponent({
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/action-sheet/usage/vue.md

@@ -6,6 +6,7 @@
 <script>
 import { IonButton, actionSheetController } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
 
 export default defineComponent({
   components: { IonButton },
@@ -19,35 +20,35 @@ export default defineComponent({
             {
               text: 'Delete',
               role: 'destructive',
-              icon: 'trash',
+              icon: trash,
               handler: () => {
                 console.log('Delete clicked')
               },
             },
             {
               text: 'Share',
-              icon: 'share',
+              icon: share,
               handler: () => {
                 console.log('Share clicked')
               },
             },
             {
               text: 'Play (open modal)',
-              icon: 'caret-forward-circle',
+              icon: caretForwardCircle,
               handler: () => {
                 console.log('Play clicked')
               },
             },
             {
               text: 'Favorite',
-              icon: 'heart',
+              icon: heart,
               handler: () => {
                 console.log('Favorite clicked')
               },
             },
             {
               text: 'Cancel',
-              icon: 'close',
+              icon: close,
               role: 'cancel',
               handler: () => {
                 console.log('Cancel clicked')
@@ -61,3 +62,74 @@ export default defineComponent({
 });
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```

core/src/components/alert/readme.md

@@ -1419,6 +1419,40 @@ export default defineComponent({
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Alert</ion-button>
+  <ion-alert
+    :is-open="isOpenRef"
+    header="Alert"
+    sub-header="Subtitle"
+    message="This is an alert message."
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-alert>
+</template>
+
+<script>
+import { IonAlert, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonAlert, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = ['Ok'];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/alert/usage/vue.md

@@ -263,3 +263,37 @@ export default defineComponent({
 });
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Alert</ion-button>
+  <ion-alert
+    :is-open="isOpenRef"
+    header="Alert"
+    sub-header="Subtitle"
+    message="This is an alert message."
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-alert>
+</template>
+
+<script>
+import { IonAlert, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonAlert, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = ['Ok'];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```

core/src/components/loading/readme.md

@@ -265,6 +265,40 @@ export default defineComponent({
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Loading</ion-button>
+  <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Please wait..."
+    :duration="timeout"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-loading>
+</template>
+
+<script>
+import { IonLoading, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  props: {
+    timeout: { type: Number, default: 1000 },
+  },
+  components: { IonLoading, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    
+    return { isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/loading/usage/vue.md

@@ -52,3 +52,37 @@ export default defineComponent({
 });
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Loading</ion-button>
+  <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Please wait..."
+    :duration="timeout"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-loading>
+</template>
+
+<script>
+import { IonLoading, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  props: {
+    timeout: { type: Number, default: 1000 },
+  },
+  components: { IonLoading, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    
+    return { isOpenRef, setOpen }
+  }
+});
+</script>
+```

core/src/components/modal/readme.md

@@ -646,6 +646,37 @@ export default {
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Modal</ion-button>
+  <ion-modal
+    :is-open="isOpenRef"
+    css-class="my-custom-class"
+    @onDidDismiss="setOpen(false)"
+  >
+    <Modal :data="data"></Modal>
+  </ion-modal>
+</template>
+
+<script>
+import { IonModal, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import Modal from './modal.vue'
+
+export default defineComponent({
+  components: { IonModal, IonButton, Modal },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const data = { content: 'New Content' };
+    return { isOpenRef, setOpen, data }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/modal/usage/vue.md

@@ -67,3 +67,34 @@ export default {
 }
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Modal</ion-button>
+  <ion-modal
+    :is-open="isOpenRef"
+    css-class="my-custom-class"
+    @onDidDismiss="setOpen(false)"
+  >
+    <Modal :data="data"></Modal>
+  </ion-modal>
+</template>
+
+<script>
+import { IonModal, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import Modal from './modal.vue'
+
+export default defineComponent({
+  components: { IonModal, IonButton, Modal },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const data = { content: 'New Content' };
+    return { isOpenRef, setOpen, data }
+  }
+});
+</script>
+```

core/src/components/popover/readme.md

@@ -224,6 +224,42 @@ export default {
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
+  <ion-popover
+    :is-open="isOpenRef"
+    css-class="my-custom-class"
+    :event="event"
+    :translucent="true"
+    @onDidDismiss="setOpen(false)"
+  >
+    <Popover></Popover>
+  </ion-popover>
+</template>
+
+<script>
+import { IonButton, IonPopover } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import Popver from './popover.vue'
+
+export default defineComponent({
+  components: { IonButton, IonPopover, Popover },
+  setup() {
+    const isOpenRef = ref(false);
+    const event = ref();
+    const setOpen = (state: boolean, event?: Event) => {
+      event.value = event; 
+      isOpenRef.value = state;
+    }
+    return { isOpenRef, setOpen, event }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/popover/usage/vue.md

@@ -46,3 +46,39 @@ export default {
 }
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
+  <ion-popover
+    :is-open="isOpenRef"
+    css-class="my-custom-class"
+    :event="event"
+    :translucent="true"
+    @onDidDismiss="setOpen(false)"
+  >
+    <Popover></Popover>
+  </ion-popover>
+</template>
+
+<script>
+import { IonButton, IonPopover } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import Popver from './popover.vue'
+
+export default defineComponent({
+  components: { IonButton, IonPopover, Popover },
+  setup() {
+    const isOpenRef = ref(false);
+    const event = ref();
+    const setOpen = (state: boolean, event?: Event) => {
+      event.value = event; 
+      isOpenRef.value = state;
+    }
+    return { isOpenRef, setOpen, event }
+  }
+});
+</script>
+```

core/src/components/toast/readme.md

@@ -271,6 +271,36 @@ export default {
 </script>
 ```
 
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Toast</ion-button>
+  <ion-toast
+    :is-open="isOpenRef"
+    message="Your settings have been saved."
+    :duration="2000"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-toast>
+</template>
+
+<script>
+import { IonToast, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonToast, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    
+    return { isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
 
 
 ## Properties

core/src/components/toast/usage/vue.md

@@ -51,3 +51,33 @@ export default {
 }
 </script>
 ```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Toast</ion-button>
+  <ion-toast
+    :is-open="isOpenRef"
+    message="Your settings have been saved."
+    :duration="2000"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-toast>
+</template>
+
+<script>
+import { IonToast, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonToast, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    
+    return { isOpenRef, setOpen }
+  }
+});
+</script>
+```