chore(): resolve merge conflicts

packages/vue/test-app/src/router/index.ts

@@ -46,7 +46,8 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/routing/:id',
-    component: () => import('@/views/RoutingParameter.vue')
+    component: () => import('@/views/RoutingParameter.vue'),
+    props: true
   },
   {
     path: '/routing/:id/view',
@@ -71,7 +72,8 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: ':id',
-        component: () => import('@/views/Folder.vue')
+        component: () => import('@/views/Folder.vue'),
+        props: true
       }
     ]
   },

packages/vue/test-app/src/views/Folder.vue

@@ -5,19 +5,19 @@
         <ion-buttons slot="start">
           <ion-menu-button></ion-menu-button>
         </ion-buttons>
-        <ion-title>{{ folder }}</ion-title>
+        <ion-title>{{ $props.id }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">{{ folder }}</ion-title>
+          <ion-title size="large">{{ $props.id }}</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <div id="container">
-        <strong class="capitalize">{{ folder }}</strong>
+        <strong class="capitalize">{{ $props.id }}</strong>
         <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
       </div>
     </ion-content>
@@ -26,8 +26,6 @@
 
 <script lang="ts">
 import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-import { useRoute } from 'vue-router';
-import { ref, computed, watch } from 'vue';
 
 export default {
   name: 'Folder',
@@ -40,16 +38,8 @@ export default {
     IonTitle,
     IonToolbar,
   },
-  setup() {
-    const route = useRoute();
-    const folder = ref(route.params.id || 'Inbox');
-    const matchedFolder = computed(() => route.params.id);
-
-    watch(matchedFolder, () => {
-      folder.value = matchedFolder.value as string;
-    })
-
-    return { folder }
+  props: {
+    id: { type: String, default: 'Inbox' }
   }
 }
 </script>

packages/vue/test-app/src/views/Overlays.vue

@@ -76,7 +76,7 @@
       <ion-action-sheet
         :is-open="isActionSheetOpen"
         :buttons="actionSheetButtons"
-        @onDidDismiss="setActionSheetRef(false)"
+        @didDismiss="setActionSheetRef(false)"
       >
       </ion-action-sheet>
 
@@ -84,7 +84,7 @@
         :is-open="isAlertOpen"
         header="Alert!"
         :buttons="alertButtons"
-        @onDidDismiss="setAlertRef(false)"
+        @didDismiss="setAlertRef(false)"
       >
       </ion-alert>
 
@@ -93,17 +93,17 @@
         :duration="2000"
         message="Loading"
         :backdrop-dismiss="true"
-        @onDidDismiss="setLoadingRef(false)"
+        @didDismiss="setLoadingRef(false)"
       >
       </ion-loading>
 
       <ion-modal
         :is-open="isModalOpen"
         :componentProps="overlayProps"
-        @onWillPresent="onModalWillPresent"
-        @onDidPresent="onModalDidPresent"
-        @onWillDismiss="onModalWillDismiss"
-        @onDidDismiss="onModalDidDismiss"
+        @willPresent="onModalWillPresent"
+        @didPresent="onModalDidPresent"
+        @willDismiss="onModalWillDismiss"
+        @didDismiss="onModalDidDismiss"
       >
         <ModalContent></ModalContent>
       </ion-modal>
@@ -112,7 +112,7 @@
         :is-open="isPopoverOpen"
         :componentProps="overlayProps"
         :event="popoverEvent"
-        @onDidDismiss="setPopoverRef(false)"
+        @didDismiss="setPopoverRef(false)"
       >
         <PopoverContent></PopoverContent>
       </ion-popover>
@@ -122,7 +122,7 @@
         :duration="2000"
         message="Toast"
         :buttons="toastButtons"
-        @onDidDismiss="setToastRef(false)"
+        @didDismiss="setToastRef(false)"
       >
       </ion-toast>
     </ion-content>

packages/vue/test-app/src/views/RoutingParameter.vue

@@ -18,8 +18,11 @@
 
       <ion-button id="parameter-view" :router-link="'/routing/' + $route.params.id + '/view'">Go to Single View</ion-button>
 
+      <ion-button router-link="/routing/abc">Go to Parameter Page ABC</ion-button>
+      <ion-button router-link="/routing/xyz">Go to Parameter Page XYZ</ion-button>
+
       <div class="ion-padding" id="parameter-value">
-        {{ $route.params.id }}
+        {{ $props.id }}
       </div>
     </ion-content>
   </ion-page>
@@ -39,6 +42,9 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  props: {
+    id: { type: String, default: 'my default' }
+  },
   components: {
     IonButton,
     IonBackButton,

packages/vue/test-app/src/views/Tabs.vue

@@ -3,20 +3,17 @@
     <ion-content>
       <ion-tabs id="tabs">
         <ion-tab-bar slot="bottom">
-          <ion-tab-button tab="tab1" href="/tabs/tab1">
-            <ion-icon :icon="triangle" />
-            <ion-label>Tab 1</ion-label>
+          <ion-tab-button
+            v-for="tab in tabs"
+            :tab="'tab' + tab.id"
+            :href="'/tabs/tab' + tab.id"
+            :key="tab.id"
+          >
+            <ion-icon :icon="tab.icon" />
+            <ion-label>Tab {{ tab.id }}</ion-label>
           </ion-tab-button>
 
-          <ion-tab-button tab="tab2" href="/tabs/tab2">
-            <ion-icon :icon="ellipse" />
-            <ion-label>Tab 2</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="tab3" href="/tabs/tab3">
-            <ion-icon :icon="square" />
-            <ion-label>Tab 3</ion-label>
-          </ion-tab-button>
+          <ion-button id="add-tab" @click="addTab()">Add Tab</ion-button>
         </ion-tab-bar>
       </ion-tabs>
     </ion-content>
@@ -24,18 +21,33 @@
 </template>
 
 <script lang="ts">
-import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage } from '@ionic/vue';
-import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonButton, IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage } from '@ionic/vue';
+import { ellipse, square, triangle, shield } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
+import { ref, defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'Tabs',
-  components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
+  components: { IonButton, IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
   setup() {
-    return {
-      ellipse,
-      square,
-      triangle,
+    const tabs = ref([
+      { id: 1, icon: triangle },
+      { id: 2, icon: ellipse },
+      { id: 3, icon: square }
+    ])
+    const router = useRouter();
+    const addTab = () => {
+      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/Tab4.vue') });
+      tabs.value = [
+        ...tabs.value,
+        {
+          id: 4,
+          icon: shield
+        }
+      ]
     }
+
+    return { tabs, addTab }
   }
-}
+});
 </script>