fix(vue): nav component accepts kebab-case component properties (#28615)

Issue number: resolves #28611

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
It's not possible to pass props that are not camelCase to the `IonNav`
component.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- It is now possible to set a props with kebab-case instead of camelCase
(for example, `root-params` instead of `rootParams`)

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ This is my first PR for ionic so I hope I didn't miss important steps
into the process. I also checked on my project that the fix is working
well. Thank you! 🙂

---------

Co-authored-by: Sean Perkins <sean@ionic.io>

packages/vue/src/components/IonNav.ts

@@ -4,7 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent(() => {
+export const IonNav = /*@__PURE__*/ defineComponent((props) => {
   defineCustomElement();
   const views = shallowRef([]);
 
@@ -19,8 +19,39 @@ export const IonNav = /*@__PURE__*/ defineComponent(() => {
 
   const delegate = VueDelegate(addView, removeView);
   return () => {
-    return h("ion-nav", { delegate }, views.value);
+    return h("ion-nav", { ...props, delegate }, views.value);
   };
 });
 
 IonNav.name = "IonNav";
+
+/**
+ * The default values follow what is defined at
+ * https://ionicframework.com/docs/api/nav#properties
+ * otherwise the default values on the Web Component
+ * may be overridden. For example, if the default animated value
+ * is not `true` below, then Vue would default the prop to `false`
+ * which would override the Web Component default of `true`.
+ */
+IonNav.props = {
+  animated: {
+    type: Boolean,
+    default: true,
+  },
+  animation: {
+    type: Function,
+    default: undefined,
+  },
+  root: {
+    type: [Function, Object, String],
+    default: undefined,
+  },
+  rootParams: {
+    type: Object,
+    default: undefined,
+  },
+  swipeGesture: {
+    type: Boolean,
+    default: undefined,
+  },
+};

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() {
+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!');
+  });
 });