From fa4baf3541a1792ef7b077ff3dc90fb985004ff1 Mon Sep 17 00:00:00 2001
From: Michael Tintiuc <michaeltintiuc@users.noreply.github.com>
Date: Thu, 28 Feb 2019 16:49:10 +0200
Subject: [PATCH] docs(usage): add alert and action-sheet vue docs (#17199)

---
 core/src/components/action-sheet/readme.md    |  64 +++++
 core/src/components/action-sheet/usage/vue.md |  60 +++++
 core/src/components/alert/readme.md           | 251 ++++++++++++++++++
 core/src/components/alert/usage/vue.md        | 247 +++++++++++++++++
 4 files changed, 622 insertions(+)
 create mode 100644 core/src/components/action-sheet/usage/vue.md
 create mode 100644 core/src/components/alert/usage/vue.md

diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 1be4437998..fd287cd570 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -190,6 +190,70 @@ export default class ActionSheetExample extends Component<Props, State> {
 ```
 
 
+### Vue
+
+```vue
+<template>
+  <IonVuePage :title="'Action Sheet'">
+    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
+  </IonVuePage>
+</template>
+
+<script>
+export default {
+  methods: {
+    presentActionSheet() {
+      return this.$ionic.actionSheetController
+        .create({
+          header: 'Albums',
+          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: 'arrow-dropright-circle',
+              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')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+  },
+}
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md
new file mode 100644
index 0000000000..65555c69d3
--- /dev/null
+++ b/core/src/components/action-sheet/usage/vue.md
@@ -0,0 +1,60 @@
+```vue
+<template>
+  <IonVuePage :title="'Action Sheet'">
+    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
+  </IonVuePage>
+</template>
+
+<script>
+export default {
+  methods: {
+    presentActionSheet() {
+      return this.$ionic.actionSheetController
+        .create({
+          header: 'Albums',
+          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: 'arrow-dropright-circle',
+              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')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+  },
+}
+</script>
+```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index 788a357318..ef15639751 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -801,6 +801,257 @@ export default class AlertExample extends Component<Props, State> {
 ```
 
 
+### Vue
+
+```vue
+<template>
+  <IonVuePage :title="'Alert'">
+    <ion-button @click="presentAlert">Show Alert</ion-button>
+    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
+  </IonVuePage>
+</template>
+
+<script>
+export default {
+  methods: {
+    presentAlert() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['OK'],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertMultipleButtons() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['Cancel', 'Open Modal', 'Delete'],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertConfirm() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Confirm!',
+          message: 'Message <strong>text</strong>!!!',
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: blah => {
+                console.log('Confirm Cancel:', blah)
+              },
+            },
+            {
+              text: 'Okay',
+              handler: () => {
+                console.log('Confirm Okay')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertPrompt() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Prompt!',
+          inputs: [
+            {
+              placeholder: 'Placeholder 1',
+            },
+            {
+              name: 'name2',
+              id: 'name2-id',
+              value: 'hello',
+              placeholder: 'Placeholder 2',
+            },
+            {
+              name: 'name3',
+              value: 'http://ionicframework.com',
+              type: 'url',
+              placeholder: 'Favorite site ever',
+            },
+            // input date with min & max
+            {
+              name: 'name4',
+              type: 'date',
+              min: '2017-03-01',
+              max: '2018-01-12',
+            },
+            // input date without min nor max
+            {
+              name: 'name5',
+              type: 'date',
+            },
+            {
+              name: 'name6',
+              type: 'number',
+              min: -5,
+              max: 10,
+            },
+            {
+              name: 'name7',
+              type: 'number',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertRadio() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Radio',
+          inputs: [
+            {
+              type: 'radio',
+              label: 'Radio 1',
+              value: 'value1',
+              checked: true,
+            },
+            {
+              type: 'radio',
+              label: 'Radio 2',
+              value: 'value2',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 3',
+              value: 'value3',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 4',
+              value: 'value4',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 5',
+              value: 'value5',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 6',
+              value: 'value6',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertCheckbox() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              checked: true,
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 2',
+              value: 'value2',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 3',
+              value: 'value3',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 4',
+              value: 'value4',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 5',
+              value: 'value5',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 6',
+              value: 'value6',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+  },
+}
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md
new file mode 100644
index 0000000000..b8283ec380
--- /dev/null
+++ b/core/src/components/alert/usage/vue.md
@@ -0,0 +1,247 @@
+```vue
+<template>
+  <IonVuePage :title="'Alert'">
+    <ion-button @click="presentAlert">Show Alert</ion-button>
+    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
+  </IonVuePage>
+</template>
+
+<script>
+export default {
+  methods: {
+    presentAlert() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['OK'],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertMultipleButtons() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['Cancel', 'Open Modal', 'Delete'],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertConfirm() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Confirm!',
+          message: 'Message <strong>text</strong>!!!',
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: blah => {
+                console.log('Confirm Cancel:', blah)
+              },
+            },
+            {
+              text: 'Okay',
+              handler: () => {
+                console.log('Confirm Okay')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertPrompt() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Prompt!',
+          inputs: [
+            {
+              placeholder: 'Placeholder 1',
+            },
+            {
+              name: 'name2',
+              id: 'name2-id',
+              value: 'hello',
+              placeholder: 'Placeholder 2',
+            },
+            {
+              name: 'name3',
+              value: 'http://ionicframework.com',
+              type: 'url',
+              placeholder: 'Favorite site ever',
+            },
+            // input date with min & max
+            {
+              name: 'name4',
+              type: 'date',
+              min: '2017-03-01',
+              max: '2018-01-12',
+            },
+            // input date without min nor max
+            {
+              name: 'name5',
+              type: 'date',
+            },
+            {
+              name: 'name6',
+              type: 'number',
+              min: -5,
+              max: 10,
+            },
+            {
+              name: 'name7',
+              type: 'number',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertRadio() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Radio',
+          inputs: [
+            {
+              type: 'radio',
+              label: 'Radio 1',
+              value: 'value1',
+              checked: true,
+            },
+            {
+              type: 'radio',
+              label: 'Radio 2',
+              value: 'value2',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 3',
+              value: 'value3',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 4',
+              value: 'value4',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 5',
+              value: 'value5',
+            },
+            {
+              type: 'radio',
+              label: 'Radio 6',
+              value: 'value6',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+
+    presentAlertCheckbox() {
+      return this.$ionic.alertController
+        .create({
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              checked: true,
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 2',
+              value: 'value2',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 3',
+              value: 'value3',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 4',
+              value: 'value4',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 5',
+              value: 'value5',
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 6',
+              value: 'value6',
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        })
+        .then(a => a.present())
+    },
+  },
+}
+</script>
+```