fix(vue): all ionic vue components can now use router link (#22743)

core/package-lock.json

@@ -17,7 +17,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/core": "2.1.2",
         "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.2.2",
+        "@stencil/vue-output-target": "0.2.3",
         "@types/jest": "^26.0.10",
         "@types/node": "^14.6.0",
         "@types/puppeteer": "3.0.1",
@@ -1657,10 +1657,13 @@
       "dev": true
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.2.2",
+      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz",
-      "integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==",
+      "integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==",
-      "dev": true
+      "dev": true,
+      "peerDependencies": {
+        "@stencil/core": ">=1.8.0"
+      }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
       "version": "0.37.2",
@@ -16387,9 +16390,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.2.2",
+      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz",
-      "integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==",
+      "integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {

core/package.json

@@ -38,7 +38,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/core": "2.1.2",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.2.2",
+    "@stencil/vue-output-target": "0.2.3",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",

core/stencil.config.ts

@@ -87,13 +87,6 @@ export const config: Config = {
         'ion-app',
         'ion-icon'
       ],
-      routerLinkComponents: [
-        'ion-card',
-        'ion-item',
-        'ion-button',
-        'ion-fab-button',
-
-      ],
       componentModels: [
         {
           elements: ['ion-checkbox', 'ion-toggle'],

packages/vue/src/proxies.ts

@@ -42,10 +42,7 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
   'type',
   'ionFocus',
   'ionBlur'
-],
+]);
-{
-  "routerLinkComponent": true
-});
 
 
 export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', [
@@ -64,10 +61,7 @@ export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', [
   'routerDirection',
   'routerAnimation',
   'target'
-],
+]);
-{
-  "routerLinkComponent": true
-});
 
 
 export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content');
@@ -195,10 +189,7 @@ export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', [
   'vertical',
   'edge',
   'activated'
-],
+]);
-{
-  "routerLinkComponent": true
-});
 
 
 export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', [
@@ -218,10 +209,7 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
   'closeIcon',
   'ionFocus',
   'ionBlur'
-],
+]);
-{
-  "routerLinkComponent": true
-});
 
 
 export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', [
@@ -324,10 +312,7 @@ export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', [
   'routerDirection',
   'target',
   'type'
-],
+]);
-{
-  "routerLinkComponent": true
-});
 
 
 export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', [

packages/vue/src/vue-component-lib/utils.ts

@@ -17,7 +17,6 @@ interface NavManager<T = any> {
 interface ComponentOptions {
   modelProp?: string;
   modelUpdateEvent?: string;
-  routerLinkComponent?: boolean;
 }
 
 const getComponentClasses = (classes: unknown) => {
@@ -41,7 +40,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 * integrations.
 */
 export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
-  const { modelProp, modelUpdateEvent, routerLinkComponent } = componentOptions;
+  const { modelProp, modelUpdateEvent } = componentOptions;
 
   /**
   * Create a Vue component wrapper around a Web Component.
@@ -60,24 +59,23 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
       }
     };
 
-    let handleClick: (ev: Event) => void;
+    const currentInstance = getCurrentInstance();
-    if (routerLinkComponent) {
+    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
-      const currentInstance = getCurrentInstance();
+    const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
-      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+    const handleRouterLink = (ev: Event) => {
-      const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
+      const { routerLink } = props as any;
-      handleClick = (ev: Event) => {
+      if (!routerLink) return;
-        const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
-        if (routerProps.length === 0) return;
 
-        if (navManager !== undefined) {
+      const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
-          let navigationPayload: any = { event: ev };
+
-          routerProps.forEach(prop => {
+      if (navManager !== undefined) {
-            navigationPayload[prop] = (props as any)[prop];
+        let navigationPayload: any = { event: ev };
-          });
+        routerProps.forEach(prop => {
-          navManager.navigate(navigationPayload);
+          navigationPayload[prop] = (props as any)[prop];
-        } else {
+        });
-          console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+        navManager.navigate(navigationPayload);
-        }
+      } else {
+        console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
       }
     }
 
@@ -86,24 +84,24 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
         classes.add(value);
       });
 
+      const oldClick = (props as any).onClick;
+      const handleClick = (ev: Event) => {
+        if (oldClick !== undefined) {
+          oldClick(ev);
+        }
+        if (!ev.defaultPrevented) {
+          handleRouterLink(ev);
+        }
+      }
+
       let propsToAdd = {
         ...props,
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
-        onClick: (routerLinkComponent) ? handleClick : (props as any).onClick,
+        onClick: handleClick,
         onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
       };
 
-      if ((props as any).onClick) {
-        const oldClick = (props as any).onClick;
-        propsToAdd.onClick = (ev: Event) => {
-            oldClick(ev);
-            if (!ev.defaultPrevented) {
-                handleClick(ev);
-            }
-        };
-      }
-
       if (modelProp) {
         propsToAdd = {
           ...propsToAdd,
@@ -116,14 +114,11 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
   });
 
   Container.displayName = name;
-  Container.props = componentProps;
+  Container.props = [...componentProps, ROUTER_LINK_VALUE];
   if (modelProp) {
     Container.props.push(MODEL_VALUE);
     Container.emits = [UPDATE_VALUE_EVENT];
   }
-  if (routerLinkComponent) {
-    Container.props.push(ROUTER_LINK_VALUE);
-  }
 
   return Container;
 };