refactor(playgrounds): use Vue's script setup syntax

_templates/playground/new/vue.md.ejs.t

@@ -7,15 +7,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
   <<%= component %>></<%= component %>>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { <%= pascalComponent %> } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      <%= pascalComponent %>,
-    },
-  });
 </script>
 <% if (css){ -%>
 

docs/api/toast.md

@@ -79,7 +79,7 @@ Toasts can be swiped to dismiss by using the `swipeGesture` property. This featu
 import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
 
 <SwipeGesture />
-  
+
 ## Layout
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

static/usage/v7/accordion/accessibility/animations/vue.md

@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/basic/vue.md

@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md

@@ -22,18 +22,8 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 
 <style scoped>

static/usage/v7/accordion/customization/expansion-styles/vue.md

@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/customization/icons/vue.md

@@ -22,21 +22,8 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      return { caretDownCircle };
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/customization/theming/vue.md

@@ -22,22 +22,9 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      return { caretDownCircle };
-    },
-  });
 </script>
 
 <style>

static/usage/v7/accordion/disable-group/vue.md

@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/disable/group/vue.md

@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/disable/individual/vue.md

@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/listen-changes/vue.md

@@ -22,32 +22,17 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+  const values = ['first', 'second', 'third'];
+  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
 
-        console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
-            ', '
-          )}`
-        );
-      };
-
-      return { accordionGroupChange };
-    },
-  });
+    console.log(
+      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+    );
+  };
 </script>
 ```

static/usage/v7/accordion/multiple/vue.md

@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/readonly/group/vue.md

@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/readonly/individual/vue.md

@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```

static/usage/v7/accordion/toggle/vue.md

@@ -24,35 +24,22 @@
   <ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonButton,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      const accordionGroup = ref(null);
-      const toggleAccordion = () => {
-        if (!accordionGroup.value) {
-          return;
-        }
-        const nativeEl = accordionGroup.value.$el;
+  const accordionGroup = ref(null);
+  const toggleAccordion = () => {
+    if (!accordionGroup.value) {
+      return;
+    }
+    const nativeEl = accordionGroup.value.$el;
 
-        if (nativeEl.value === 'second') {
-          nativeEl.value = undefined;
-        } else {
-          nativeEl.value = 'second';
-        }
-      };
-
-      return { accordionGroup, toggleAccordion };
-    },
-  });
+    if (nativeEl.value === 'second') {
+      nativeEl.value = undefined;
+    } else {
+      nativeEl.value = 'second';
+    }
+  };
 </script>
 ```