From 3d6ac1382e23663a3d010fd253d3c6017d3923e4 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Jan 2021 15:52:06 -0500 Subject: [PATCH] fix(vue): all ionic vue components can now use router link (#22743) --- core/package-lock.json | 19 ++++--- core/package.json | 2 +- core/stencil.config.ts | 7 --- packages/vue/src/proxies.ts | 25 ++------ packages/vue/src/vue-component-lib/utils.ts | 63 ++++++++++----------- 5 files changed, 46 insertions(+), 70 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 88e9f6a13b..30acf9ecaf 100644 --- a/core/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz", - "integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==", - "dev": true + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz", + "integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==", + "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", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz", - "integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==", + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz", + "integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==", "dev": true }, "@stylelint/postcss-css-in-js": { diff --git a/core/package.json b/core/package.json index 7d925aa3f7..f5f1ed8e1e 100644 --- a/core/package.json +++ b/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", diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 26c92213d8..bd1db3cddd 100644 --- a/core/stencil.config.ts +++ b/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'], diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 42eaaa52d9..2b1e03b932 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -42,10 +42,7 @@ export const IonButton = /*@__PURE__*/ defineContainer('ion-butto 'type', 'ionFocus', 'ionBlur' -], -{ - "routerLinkComponent": true -}); +]); export const IonButtons = /*@__PURE__*/ defineContainer('ion-buttons', [ @@ -64,10 +61,7 @@ export const IonCard = /*@__PURE__*/ defineContainer('ion-card', [ 'routerDirection', 'routerAnimation', 'target' -], -{ - "routerLinkComponent": true -}); +]); export const IonCardContent = /*@__PURE__*/ defineContainer('ion-card-content'); @@ -195,10 +189,7 @@ export const IonFab = /*@__PURE__*/ defineContainer('ion-fab', [ 'vertical', 'edge', 'activated' -], -{ - "routerLinkComponent": true -}); +]); export const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', [ @@ -218,10 +209,7 @@ export const IonFabButton = /*@__PURE__*/ defineContainer('ion 'closeIcon', 'ionFocus', 'ionBlur' -], -{ - "routerLinkComponent": true -}); +]); export const IonFabList = /*@__PURE__*/ defineContainer('ion-fab-list', [ @@ -324,10 +312,7 @@ export const IonItem = /*@__PURE__*/ defineContainer('ion-item', [ 'routerDirection', 'target', 'type' -], -{ - "routerLinkComponent": true -}); +]); export const IonItemDivider = /*@__PURE__*/ defineContainer('ion-item-divider', [ diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 5a8687251b..2a8e74b3b0 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -17,7 +17,6 @@ interface NavManager { interface ComponentOptions { modelProp?: string; modelUpdateEvent?: string; - routerLinkComponent?: boolean; } const getComponentClasses = (classes: unknown) => { @@ -41,7 +40,7 @@ const getElementClasses = (ref: Ref, componentClasses: * integrations. */ export const defineContainer = (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 = (name: string, componentProps: string[] = } }; - let handleClick: (ev: Event) => void; - if (routerLinkComponent) { - const currentInstance = getCurrentInstance(); - const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER]; - const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined; - handleClick = (ev: Event) => { - const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX)); - if (routerProps.length === 0) return; + const currentInstance = getCurrentInstance(); + const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER]; + const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined; + const handleRouterLink = (ev: Event) => { + const { routerLink } = props as any; + if (!routerLink) return; - if (navManager !== undefined) { - let navigationPayload: any = { event: ev }; - routerProps.forEach(prop => { - navigationPayload[prop] = (props as any)[prop]; - }); - navManager.navigate(navigationPayload); - } else { - console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.'); - } + const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX)); + + if (navManager !== undefined) { + let navigationPayload: any = { event: ev }; + routerProps.forEach(prop => { + navigationPayload[prop] = (props as any)[prop]; + }); + 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 = (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 = (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; };