Skip to content

Commit 512ae4a

Browse files
brandyscarneybrandyscarney
committed
docs(usage): setup migration for complex examples
1 parent 4f9895f commit 512ae4a

File tree

94 files changed

+1657
-2624
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+1657
-2624
lines changed

‎static/usage/v8/accordion/listen-changes/vue.md

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,17 @@
2222
</ion-accordion-group>
2323
</template>
2424

25-
<script lang="ts">
25+
<script setup lang="ts">
2626
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
27-
import { defineComponent } from 'vue';
2827
29-
export default defineComponent({
30-
components: {
31-
IonAccordion,
32-
IonAccordionGroup,
33-
IonItem,
34-
IonLabel,
35-
},
36-
setup() {
37-
const values = ['first', 'second', 'third'];
38-
const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
39-
const collapsedItems = values.filter((value) => value !== event.detail.value);
40-
const selectedValue = event.detail.value;
28+
const values = ['first', 'second', 'third'];
29+
const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
30+
const collapsedItems = values.filter((value) => value !== event.detail.value);
31+
const selectedValue = event.detail.value;
4132
42-
console.log(
43-
`Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
44-
', '
45-
)}`
46-
);
47-
};
48-
49-
return { accordionGroupChange };
50-
},
51-
});
33+
console.log(
34+
`Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
35+
);
36+
};
5237
</script>
5338
```

‎static/usage/v8/accordion/toggle/vue.md

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,23 @@
2424
<ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
2525
</template>
2626

27-
<script lang="ts">
27+
<script setup lang="ts">
2828
import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
29-
import { defineComponent, ref } from 'vue';
29+
import { ref } from 'vue';
3030
31-
export default defineComponent({
32-
components: {
33-
IonAccordion,
34-
IonAccordionGroup,
35-
IonButton,
36-
IonItem,
37-
IonLabel,
38-
},
39-
setup() {
40-
const accordionGroup = ref(null);
41-
const toggleAccordion = () => {
42-
if (!accordionGroup.value) {
43-
return;
44-
}
45-
const nativeEl = accordionGroup.value.$el;
31+
const accordionGroup = ref(null);
4632
47-
if (nativeEl.value === 'second') {
48-
nativeEl.value = undefined;
49-
} else {
50-
nativeEl.value = 'second';
51-
}
52-
};
33+
const toggleAccordion = () => {
34+
if (!accordionGroup.value) {
35+
return;
36+
}
37+
const nativeEl = accordionGroup.value.$el;
5338
54-
return { accordionGroup, toggleAccordion };
55-
},
56-
});
39+
if (nativeEl.value === 'second') {
40+
nativeEl.value = undefined;
41+
} else {
42+
nativeEl.value = 'second';
43+
}
44+
};
5745
</script>
5846
```

‎static/usage/v8/action-sheet/controller/vue.md

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,37 @@
33
<ion-button @click="presentActionSheet">Open</ion-button>
44
</template>
55

6-
<script lang="ts">
6+
<script setup lang="ts">
77
import { IonButton, actionSheetController } from '@ionic/vue';
88
9-
export default {
10-
components: { IonButton },
11-
setup() {
12-
const presentActionSheet = async () => {
13-
const actionSheet = await actionSheetController.create({
14-
header: 'Actions',
15-
buttons: [
16-
{
17-
text: 'Delete',
18-
role: 'destructive',
19-
data: {
20-
action: 'delete',
21-
},
22-
},
23-
{
24-
text: 'Share',
25-
data: {
26-
action: 'share',
27-
},
28-
},
29-
{
30-
text: 'Cancel',
31-
role: 'cancel',
32-
data: {
33-
action: 'cancel',
34-
},
35-
},
36-
],
37-
});
9+
const presentActionSheet = async () => {
10+
const actionSheet = await actionSheetController.create({
11+
header: 'Actions',
12+
buttons: [
13+
{
14+
text: 'Delete',
15+
role: 'destructive',
16+
data: {
17+
action: 'delete',
18+
},
19+
},
20+
{
21+
text: 'Share',
22+
data: {
23+
action: 'share',
24+
},
25+
},
26+
{
27+
text: 'Cancel',
28+
role: 'cancel',
29+
data: {
30+
action: 'cancel',
31+
},
32+
},
33+
],
34+
});
3835
39-
await actionSheet.present();
40-
};
41-
42-
return { presentActionSheet };
43-
},
36+
await actionSheet.present();
4437
};
4538
</script>
4639
```

‎static/usage/v8/action-sheet/inline/isOpen/vue.md

Lines changed: 26 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,36 @@
99
></ion-action-sheet>
1010
</template>
1111

12-
<script lang="ts">
12+
<script setup lang="ts">
1313
import { ref } from 'vue';
1414
import { IonActionSheet, IonButton } from '@ionic/vue';
1515
16-
export default {
17-
components: { IonActionSheet, IonButton },
18-
setup() {
19-
const isOpen = ref(false);
20-
const actionSheetButtons = [
21-
{
22-
text: 'Delete',
23-
role: 'destructive',
24-
data: {
25-
action: 'delete',
26-
},
27-
},
28-
{
29-
text: 'Share',
30-
data: {
31-
action: 'share',
32-
},
33-
},
34-
{
35-
text: 'Cancel',
36-
role: 'cancel',
37-
data: {
38-
action: 'cancel',
39-
},
40-
},
41-
];
42-
43-
const setOpen = (state: boolean) => {
44-
isOpen.value = state;
45-
};
46-
47-
return {
48-
actionSheetButtons,
49-
isOpen,
50-
setOpen,
51-
};
16+
const isOpen = ref(false);
17+
const actionSheetButtons = [
18+
{
19+
text: 'Delete',
20+
role: 'destructive',
21+
data: {
22+
action: 'delete',
23+
},
24+
},
25+
{
26+
text: 'Share',
27+
data: {
28+
action: 'share',
29+
},
5230
},
31+
{
32+
text: 'Cancel',
33+
role: 'cancel',
34+
data: {
35+
action: 'cancel',
36+
},
37+
},
38+
];
39+
40+
const setOpen = (state: boolean) => {
41+
isOpen.value = state;
5342
};
5443
</script>
5544
```

‎static/usage/v8/action-sheet/inline/trigger/vue.md

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,30 @@
44
<ion-action-sheet trigger="open-action-sheet" header="Actions" :buttons="actionSheetButtons"></ion-action-sheet>
55
</template>
66

7-
<script lang="ts">
7+
<script setup lang="ts">
88
import { IonActionSheet, IonButton } from '@ionic/vue';
99
10-
export default {
11-
components: { IonActionSheet, IonButton },
12-
setup() {
13-
const actionSheetButtons = [
14-
{
15-
text: 'Delete',
16-
role: 'destructive',
17-
data: {
18-
action: 'delete',
19-
},
20-
},
21-
{
22-
text: 'Share',
23-
data: {
24-
action: 'share',
25-
},
26-
},
27-
{
28-
text: 'Cancel',
29-
role: 'cancel',
30-
data: {
31-
action: 'cancel',
32-
},
33-
},
34-
];
35-
36-
return { actionSheetButtons };
10+
const actionSheetButtons = [
11+
{
12+
text: 'Delete',
13+
role: 'destructive',
14+
data: {
15+
action: 'delete',
16+
},
17+
},
18+
{
19+
text: 'Share',
20+
data: {
21+
action: 'share',
22+
},
23+
},
24+
{
25+
text: 'Cancel',
26+
role: 'cancel',
27+
data: {
28+
action: 'cancel',
29+
},
3730
},
38-
};
31+
];
3932
</script>
4033
```

‎static/usage/v8/action-sheet/role-info-on-dismiss/vue.md

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,44 +22,34 @@
2222
</div>
2323
</template>
2424

25-
<script lang="ts">
25+
<script setup lang="ts">
2626
import { IonActionSheet, IonButton } from '@ionic/vue';
2727
28-
export default {
29-
components: { IonActionSheet, IonButton },
30-
setup() {
31-
const actionSheetButtons = [
32-
{
33-
text: 'Delete',
34-
role: 'destructive',
35-
data: {
36-
action: 'delete',
37-
},
38-
},
39-
{
40-
text: 'Share',
41-
data: {
42-
action: 'share',
43-
},
44-
},
45-
{
46-
text: 'Cancel',
47-
role: 'cancel',
48-
data: {
49-
action: 'cancel',
50-
},
51-
},
52-
];
53-
54-
const logResult = (event: CustomEvent) => {
55-
console.log(JSON.stringify(event.detail, null, 2));
56-
};
57-
58-
return {
59-
actionSheetButtons,
60-
logResult,
61-
};
28+
const actionSheetButtons = [
29+
{
30+
text: 'Delete',
31+
role: 'destructive',
32+
data: {
33+
action: 'delete',
34+
},
35+
},
36+
{
37+
text: 'Share',
38+
data: {
39+
action: 'share',
40+
},
6241
},
42+
{
43+
text: 'Cancel',
44+
role: 'cancel',
45+
data: {
46+
action: 'cancel',
47+
},
48+
},
49+
];
50+
51+
const logResult = (event: CustomEvent) => {
52+
console.log(JSON.stringify(event.detail, null, 2));
6353
};
6454
</script>
6555
```

0 commit comments

Comments
 (0)