Skip to content

Commit

Permalink
docs(vue): streamline usage examples with script setup syntax (#2956)
Browse files Browse the repository at this point in the history 
* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <[email protected]>
  • Loading branch information
@treighmawaka @mapsandapps
treighmawaka and mapsandapps authored Aug 7, 2023
1 parent 8ad4e0a commit 20981f3
Show file tree
Hide file tree
Showing 20 changed files with 210 additions and 453 deletions.
54 changes: 21 additions & 33 deletions static/usage/v7/alert/buttons/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
27 changes: 10 additions & 17 deletions static/usage/v7/alert/customization/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
43 changes: 18 additions & 25 deletions static/usage/v7/alert/inputs/radios/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
51 changes: 22 additions & 29 deletions static/usage/v7/alert/inputs/text-inputs/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
25 changes: 9 additions & 16 deletions static/usage/v7/alert/presenting/controller/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
17 changes: 5 additions & 12 deletions static/usage/v7/alert/presenting/isOpen/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
11 changes: 2 additions & 9 deletions static/usage/v7/alert/presenting/trigger/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
14 changes: 4 additions & 10 deletions static/usage/v7/input/counter/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
34 changes: 14 additions & 20 deletions static/usage/v7/modal/controller/vue/example_vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
19 changes: 5 additions & 14 deletions static/usage/v7/modal/controller/vue/modal_vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</ion-content>
</template>

<script lang="ts">
<script lang="ts" setup>
import {
IonContent,
IonHeader,
Expand All @@ -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>
```
Loading

1 comment on commit 20981f3

@vercel
Copy link

@vercel vercel bot commented on 20981f3 Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app
ionic-docs-gqykycf8t.vercel.app

Please sign in to comment.