Merge remote-tracking branch 'origin/main' into sync-76-125

packages/vue/test/base/src/components/Nav.vue

@@ -1,16 +1,12 @@
 <template>
-  <ion-nav :root="NavRoot"></ion-nav>
+  <ion-nav :root="NavRoot" :root-params="rootParams"></ion-nav>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { IonNav } from '@ionic/vue';
-import NavRoot from '@/components/NavRoot.vue';
+<script setup lang="ts">
+import { IonNav } from "@ionic/vue";
+import NavRoot from "@/components/NavRoot.vue";
 
-export default defineComponent({
-  components: { IonNav },
-  setup() {
-    return { NavRoot }
-  }
-});
+const rootParams = {
+  message: "Hello World!",
+};
 </script>

packages/vue/test/base/src/components/NavRoot.vue

@@ -8,11 +8,14 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
+    <div id="nav-root-params">Message: {{ message }}</div>
+    <ion-button expand="block" @click="pushPage" id="push-nav-child"
+      >Go to Nav Child</ion-button
+    >
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   IonButtons,
   IonButton,
@@ -20,28 +23,20 @@ import {
   IonHeader,
   IonTitle,
   IonToolbar,
-  modalController
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-import NavChild from '@/components/NavChild.vue';
+  modalController,
+} from "@ionic/vue";
+import NavChild from "@/components/NavChild.vue";
 
-export default defineComponent({
-  components: {
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonTitle,
-    IonToolbar
-  },
-  methods: {
-    pushPage: function() {
-      const ionNav = document.querySelector('ion-nav') as any;
-      ionNav.push(NavChild, { title: 'Custom Title' });
-    },
-    dismiss: async function() {
-      await modalController.dismiss();
-    }
-  }
-})
+defineProps<{
+  message: string;
+}>();
+
+function pushPage() {
+  const ionNav = document.querySelector("ion-nav") as any;
+  ionNav.push(NavChild, { title: "Custom Title" });
+}
+
+async function dismiss() {
+  await modalController.dismiss();
+}
 </script>

packages/vue/test/base/tests/e2e/specs/navigation.cy.js

@@ -10,4 +10,10 @@ describe('Navigation', () => {
 
     cy.get('#nav-child-content').should('have.text', 'Custom Title');
   });
+
+  it('nav should support kebab-case root-params', () => {
+    cy.get('#open-nav-modal').click();
+
+    cy.get('#nav-root-params').should('have.text', 'Message: Hello World!');
+  });
 });