chore(): resolve merge conflicts

packages/vue/test-app/cypress.json

@@ -2,5 +2,6 @@
   "pluginsFile": "tests/e2e/plugins/index.js",
   "includeShadowDom": true,
   "video": false,
-  "screenshotOnRunFailure": false
+  "screenshotOnRunFailure": false,
+  "defaultCommandTimeout": 10000
 }

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>

packages/vue/test-app/tests/e2e/specs/nested.js

@@ -1,6 +1,7 @@
 describe('Nested', () => {
   beforeEach(() => {
     cy.visit('http://localhost:8080/nested');
+    cy.ionPageVisible('nestedchild');
   });
 
   it('should show first page', () => {

packages/vue/test-app/tests/e2e/specs/tabs.js

@@ -203,6 +203,71 @@ describe('Tabs', () => {
 
     cy.get('ion-tab-button#tab-button-tab1').should('not.have.class', 'tab-selected');
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23101
+  it('should return to previous tab instance when using the ion-back-button', () => {
+    cy.visit('http://localhost:8080/tabs/tab1');
+
+    cy.get('#tabs-secondary').click();
+    cy.ionPageHidden('tabs');
+    cy.ionPageVisible('tab1-secondary');
+
+    cy.get('ion-tab-button#tab-button-tab2-secondary').click();
+    cy.ionPageHidden('tab1-secondary');
+    cy.ionPageVisible('tab2-secondary');
+
+    cy.get('ion-tab-button#tab-button-tab1-secondary').click();
+    cy.ionPageHidden('tab2-secondary');
+    cy.ionPageVisible('tab1-secondary');
+
+    cy.ionBackClick('tab1-secondary');
+    cy.ionPageDoesNotExist('tabs-secondary');
+    cy.ionPageVisible('tab1');
+  });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23087
+  it('should return to correct view and url when going back from child page after switching tabs', () => {
+    cy.visit('http://localhost:8080/tabs/tab1');
+
+    cy.get('#child-one').click();
+    cy.ionPageHidden('tab1');
+    cy.ionPageVisible('tab1childone');
+
+    cy.get('ion-tab-button#tab-button-tab2').click();
+    cy.ionPageHidden('tab1childone');
+    cy.ionPageVisible('tab2');
+
+    cy.get('ion-tab-button#tab-button-tab1').click();
+    cy.ionPageHidden('tab2');
+    cy.ionPageVisible('tab1childone');
+
+    cy.ionBackClick('tab1childone');
+    cy.ionPageDoesNotExist('tab1childone');
+    cy.ionPageVisible('tab1');
+
+    cy.url().should('include', '/tabs/tab1');
+  });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22847
+  it('should support dynamic tabs', () => {
+    cy.visit('http://localhost:8080/tabs/tab1');
+
+    cy.ionPageVisible('tab1');
+
+    cy.get('ion-tab-button').its('length').should('equal', 3);
+    cy.get('ion-tab-button#tab-button-tab1').should('have.class', 'tab-selected');
+
+    cy.get('#add-tab').click();
+
+    cy.get('ion-tab-button').its('length').should('equal', 4);
+
+    cy.get('ion-tab-button#tab-button-tab4').click();
+    cy.ionPageVisible('tab4');
+    cy.ionPageHidden('tab1');
+
+    cy.get('ion-tab-button#tab-button-tab1').should('not.have.class', 'tab-selected');
+    cy.get('ion-tab-button#tab-button-tab4').should('have.class', 'tab-selected');
+  });
 })
 
 describe('Tabs - Swipe to Go Back', () => {
@@ -214,11 +279,15 @@ describe('Tabs - Swipe to Go Back', () => {
     cy.ionPageVisible('tab1')
   });
 
-  it('should swipe and abort', () => {
+  // TODO: Flaky if test runner is slow
+  // Delays between gesture movements
+  // cause swipe back gesture to think
+  // velocity is higher than it actually is
+  /*it('should swipe and abort', () => {
     cy.ionSwipeToGoBack();
     cy.ionPageHidden('home');
     cy.ionPageVisible('tab1');
-  });
+  });*/
 
   it('should swipe and go back to home', () => {
     cy.ionSwipeToGoBack(true);

packages/vue/test-app/tests/e2e/support/commands.js

@@ -47,12 +47,6 @@ Cypress.Commands.add('ionPageVisible', (pageId) => {
     .should('have.length', 1)
 })
 
-Cypress.Commands.add('ionPageInvisible', (pageId) => {
-  cy.get(`div.ion-page[data-pageid=${pageId}]`)
-    .should('have.class', 'ion-page-invisible')
-    .should('have.length', 1)
-})
-
 Cypress.Commands.add('ionPageHidden', (pageId) => {
   cy.get(`div.ion-page[data-pageid=${pageId}]`)
     .should('have.class', 'ion-page-hidden')

packages/vue/test-app/tests/unit/routing.spec.ts

@@ -358,4 +358,39 @@ describe('Routing', () => {
     const cmpAgain = wrapper.findComponent(Page1);
     expect(cmpAgain.props()).toEqual({ title: 'abc Title' });
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/pull/23189
+  it('should update props on a parameterized url', async () => {
+    const Page = {
+      props: {
+        id: { type: String, default: 'Default ID' }
+      },
+      components: { IonPage },
+      template: `<ion-page>{{ $props.id }}</ion-page>`
+    }
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/page/:id', component: Page, props: true },
+        { path: '/', redirect: '/page/1' }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    const page = wrapper.findComponent(Page);
+    expect(page.props()).toEqual({ id: '1' });
+
+    router.push('/page/2');
+    await waitForRouter();
+
+    expect(page.props()).toEqual({ id: '2' });
+  });
 });