From aeda33d8ae579a47fd3dcb3b8293eb198b9a9a72 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 25 Sep 2020 10:27:27 -0400
Subject: [PATCH] docs(vue): add revised overlay examples (#22173)

---
 core/src/components/action-sheet/readme.md    | 82 +++++++++++++++++--
 core/src/components/action-sheet/usage/vue.md | 82 +++++++++++++++++--
 core/src/components/alert/readme.md           | 34 ++++++++
 core/src/components/alert/usage/vue.md        | 34 ++++++++
 core/src/components/loading/readme.md         | 34 ++++++++
 core/src/components/loading/usage/vue.md      | 34 ++++++++
 core/src/components/modal/readme.md           | 31 +++++++
 core/src/components/modal/usage/vue.md        | 31 +++++++
 core/src/components/popover/readme.md         | 36 ++++++++
 core/src/components/popover/usage/vue.md      | 36 ++++++++
 core/src/components/toast/readme.md           | 30 +++++++
 core/src/components/toast/usage/vue.md        | 30 +++++++
 12 files changed, 484 insertions(+), 10 deletions(-)

diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 4a70de38e3..83690632c5 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/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
diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md
index b2e3658ecf..8e9d4169e5 100644
--- a/core/src/components/action-sheet/usage/vue.md
+++ b/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>
+```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index 5ed7034655..ab7fa95b9b 100644
--- a/core/src/components/alert/readme.md
+++ b/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
diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md
index cf90273088..c1cb7990cf 100644
--- a/core/src/components/alert/usage/vue.md
+++ b/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>
+```
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 622ea29f6b..84f29b9a4d 100644
--- a/core/src/components/loading/readme.md
+++ b/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
diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md
index 266a3326b4..8d92512536 100644
--- a/core/src/components/loading/usage/vue.md
+++ b/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>
+```
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 6d3771b35a..c007e0bc42 100644
--- a/core/src/components/modal/readme.md
+++ b/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
diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md
index 8f9233315b..cc10f78bb7 100644
--- a/core/src/components/modal/usage/vue.md
+++ b/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>
+```
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index b4c493fede..9222a14629 100644
--- a/core/src/components/popover/readme.md
+++ b/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
diff --git a/core/src/components/popover/usage/vue.md b/core/src/components/popover/usage/vue.md
index a46dc65d37..c83f6b6d58 100644
--- a/core/src/components/popover/usage/vue.md
+++ b/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>
+```
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index e60e5cabea..f29b1c03d8 100644
--- a/core/src/components/toast/readme.md
+++ b/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
diff --git a/core/src/components/toast/usage/vue.md b/core/src/components/toast/usage/vue.md
index f0c5134151..9d8bea3ee2 100644
--- a/core/src/components/toast/usage/vue.md
+++ b/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>
+```