From 366f46849d3a5e9400d450442e34faee66e0940e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 1 Aug 2024 14:46:54 -0400 Subject: [PATCH 1/6] fix(vue): pass router-link value to href to properly render clickable elements --- packages/vue/src/vue-component-lib/utils.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 136041073e8..93803fd9f0c 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -176,6 +176,17 @@ export const defineContainer = ( } } + // If router link is defined, add href to props + // in order to properly render an anchor tag inside + // of components that should become activatable and + // focusable with router link. + if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + href: props[ROUTER_LINK_VALUE], + }; + } + /** * vModelDirective is only needed on components that support v-model. * As a result, we conditionally call withDirectives with v-model components. From 21c5b4a056ef0588189b69b3881d434e68e1d16f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 1 Aug 2024 15:34:29 -0400 Subject: [PATCH 2/6] chore(deps): update vue output target --- core/package-lock.json | 18 +++++++++--------- core/package.json | 2 +- packages/vue/src/vue-component-lib/utils.ts | 13 +++++++++++-- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 475b1a503bf..d8e5ff80996 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -28,7 +28,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.8.7", + "@stencil/vue-output-target": "^0.0.1-dev.11722540458.1506f4d7", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2", @@ -723,7 +723,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -1858,9 +1858,9 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz", - "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==", + "version": "0.0.1-dev.11722540458.1506f4d7", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722540458.1506f4d7.tgz", + "integrity": "sha512-PQCduPvhBOkTyU5oMTYDq+hRQAx38U1y0GfTRzMu8MxdQjHiWIma7h67+CRDCN+kCIiwetvzGYLPZfRkJYtwXQ==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" @@ -10795,7 +10795,7 @@ "is-unicode-supported": { "version": "1.3.0", "bundled": true, - "dev": true + "extraneous": true } } }, @@ -11602,9 +11602,9 @@ "requires": {} }, "@stencil/vue-output-target": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz", - "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==", + "version": "0.0.1-dev.11722540458.1506f4d7", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722540458.1506f4d7.tgz", + "integrity": "sha512-PQCduPvhBOkTyU5oMTYDq+hRQAx38U1y0GfTRzMu8MxdQjHiWIma7h67+CRDCN+kCIiwetvzGYLPZfRkJYtwXQ==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index 914016d9a96..f9962444254 100644 --- a/core/package.json +++ b/core/package.json @@ -50,7 +50,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.8.7", + "@stencil/vue-output-target": "^0.0.1-dev.11722540458.1506f4d7", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2", diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 93803fd9f0c..31d862d7a44 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -91,8 +91,17 @@ export const defineContainer = ( const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; eventsNames.forEach((eventName: string) => { el.addEventListener(eventName.toLowerCase(), (e: Event) => { - modelPropValue = (e?.target as any)[modelProp]; - emit(UPDATE_VALUE_EVENT, modelPropValue); + /** + * Only update the v-model binding if the event's target is the element we are + * listening on. For example, Component A could emit ionChange, but it could also + * have a descendant Component B that also emits ionChange. We only want to update + * the v-model for Component A when ionChange originates from that element and not + * when ionChange bubbles up from Component B. + */ + if (e.target.tagName === el.tagName) { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + } }); }); }, From 8e679451dfb7e4c76f7940062bcef22211966235 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 1 Aug 2024 15:46:28 -0400 Subject: [PATCH 3/6] test(vue): remove button property from router-link items --- .../vue/test/base/src/views/Components.vue | 6 ++--- packages/vue/test/base/src/views/Home.vue | 26 +++++++++---------- packages/vue/test/base/src/views/Routing.vue | 14 +++++----- packages/vue/test/base/src/views/Tab1.vue | 8 +++--- packages/vue/test/base/src/views/Tab2.vue | 2 +- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue index cad54df3631..01b11821ad2 100644 --- a/packages/vue/test/base/src/views/Components.vue +++ b/packages/vue/test/base/src/views/Components.vue @@ -2,13 +2,13 @@ - + Breadcrumbs - + Select - + Range diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue index a0652a93b03..0f04f228904 100644 --- a/packages/vue/test/base/src/views/Home.vue +++ b/packages/vue/test/base/src/views/Home.vue @@ -17,43 +17,43 @@ - + Overlays - + Icons - + Inputs - + Navigation - + Routing - + Default Href - + Nested Router Outlet - + Tabs - + Tabs Secondary - + Lifecycle - + Lifecycle (Setup) - + Delayed Redirect - + Components diff --git a/packages/vue/test/base/src/views/Routing.vue b/packages/vue/test/base/src/views/Routing.vue index f4f3c671643..f7977dde788 100644 --- a/packages/vue/test/base/src/views/Routing.vue +++ b/packages/vue/test/base/src/views/Routing.vue @@ -16,31 +16,31 @@ - + Set Route Parameters - + Go to Child Page - + Go to Parameter Page ABC - + Go to Parameter Page XYZ - + Go to Parameterized Page View - + Replace to Navigation page - + Go to /tabs/tab1 diff --git a/packages/vue/test/base/src/views/Tab1.vue b/packages/vue/test/base/src/views/Tab1.vue index e9ad7eb19f4..40e15a4ad44 100644 --- a/packages/vue/test/base/src/views/Tab1.vue +++ b/packages/vue/test/base/src/views/Tab1.vue @@ -17,18 +17,18 @@ - + Go to Tab 1 Child 1 - + Go to Nested Outlet - + Go to Secondary Tabs - + Go to Primary Tabs diff --git a/packages/vue/test/base/src/views/Tab2.vue b/packages/vue/test/base/src/views/Tab2.vue index 755e8e26ba3..25bfbcac4df 100644 --- a/packages/vue/test/base/src/views/Tab2.vue +++ b/packages/vue/test/base/src/views/Tab2.vue @@ -15,7 +15,7 @@ - + Go to /routing From f47b01be41ed7b1b2ffcdf2fe575575190076b43 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Aug 2024 15:35:36 -0400 Subject: [PATCH 4/6] test(vue): add test for making item activatable with router-link --- packages/vue/scripts/sync.sh | 3 +++ packages/vue/test/base/tests/e2e/specs/routing.cy.js | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/packages/vue/scripts/sync.sh b/packages/vue/scripts/sync.sh index 1bc4944ded7..4d26d15f2ba 100644 --- a/packages/vue/scripts/sync.sh +++ b/packages/vue/scripts/sync.sh @@ -5,6 +5,9 @@ set -e # Delete old packages rm -f *.tgz +# Delete vite cache +rm -rf node_modules/.vite + # Pack @ionic/core npm pack ../../core diff --git a/packages/vue/test/base/tests/e2e/specs/routing.cy.js b/packages/vue/test/base/tests/e2e/specs/routing.cy.js index d3498bca7d8..289df4c55a9 100644 --- a/packages/vue/test/base/tests/e2e/specs/routing.cy.js +++ b/packages/vue/test/base/tests/e2e/specs/routing.cy.js @@ -584,4 +584,10 @@ describe('Routing - Swipe to Go Back', () => { cy.ionPageDoesNotExist('routingparameter-abc'); cy.ionPageVisible('routing'); }) + + it('should be activatable when router-link is used on an item without the button property', () => { + cy.visit('/'); + + cy.get('ion-item[routerlink="/overlays"]').should('have.class', 'ion-activatable'); + }); }) From bd957bf30fd2c7e01f7994659060b1288d159d65 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Aug 2024 15:50:19 -0400 Subject: [PATCH 5/6] fix(vue): prevent page reload when navigating with router-link --- core/package-lock.json | 18 +++++++++--------- core/package.json | 2 +- packages/vue/src/vue-component-lib/utils.ts | 10 ++++++++++ 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index d8e5ff80996..91e95fa429f 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -28,7 +28,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.0.1-dev.11722540458.1506f4d7", + "@stencil/vue-output-target": "^0.0.1-dev.11722627707.1cc8aa9d", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2", @@ -723,7 +723,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -1858,9 +1858,9 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.0.1-dev.11722540458.1506f4d7", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722540458.1506f4d7.tgz", - "integrity": "sha512-PQCduPvhBOkTyU5oMTYDq+hRQAx38U1y0GfTRzMu8MxdQjHiWIma7h67+CRDCN+kCIiwetvzGYLPZfRkJYtwXQ==", + "version": "0.0.1-dev.11722627707.1cc8aa9d", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722627707.1cc8aa9d.tgz", + "integrity": "sha512-GC5ONcejQ1fSJGLNmnhGkK94INd8Ia4sC2MIbw/1wo/fMnv606JPFl+tnqv/rQWX92xNZ5+8i38XcuL6eQjjgQ==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" @@ -10795,7 +10795,7 @@ "is-unicode-supported": { "version": "1.3.0", "bundled": true, - "extraneous": true + "dev": true } } }, @@ -11602,9 +11602,9 @@ "requires": {} }, "@stencil/vue-output-target": { - "version": "0.0.1-dev.11722540458.1506f4d7", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722540458.1506f4d7.tgz", - "integrity": "sha512-PQCduPvhBOkTyU5oMTYDq+hRQAx38U1y0GfTRzMu8MxdQjHiWIma7h67+CRDCN+kCIiwetvzGYLPZfRkJYtwXQ==", + "version": "0.0.1-dev.11722627707.1cc8aa9d", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722627707.1cc8aa9d.tgz", + "integrity": "sha512-GC5ONcejQ1fSJGLNmnhGkK94INd8Ia4sC2MIbw/1wo/fMnv606JPFl+tnqv/rQWX92xNZ5+8i38XcuL6eQjjgQ==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index f9962444254..91f52719ed1 100644 --- a/core/package.json +++ b/core/package.json @@ -50,7 +50,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.0.1-dev.11722540458.1506f4d7", + "@stencil/vue-output-target": "^0.0.1-dev.11722627707.1cc8aa9d", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2", diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 31d862d7a44..0d99b6696d7 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -115,6 +115,16 @@ export const defineContainer = ( if (routerLink === EMPTY_PROP) return; if (navManager !== undefined) { + /** + * This prevents the browser from + * performing a page reload when pressing + * an Ionic component with routerLink. + * The page reload interferes with routing + * and causes ion-back-button to disappear + * since the local history is wiped on reload. + */ + ev.preventDefault(); + let navigationPayload: any = { event: ev }; for (const key in props) { const value = props[key]; From ac136c409dc3afd124456eac09a93e5a238c7491 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Aug 2024 16:04:02 -0400 Subject: [PATCH 6/6] chore(vue): bump @stencil/vue-output-target --- core/package-lock.json | 14 +++++++------- core/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 91e95fa429f..3ae99d0b632 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -28,7 +28,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.0.1-dev.11722627707.1cc8aa9d", + "@stencil/vue-output-target": "^0.8.9", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2", @@ -1858,9 +1858,9 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.0.1-dev.11722627707.1cc8aa9d", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722627707.1cc8aa9d.tgz", - "integrity": "sha512-GC5ONcejQ1fSJGLNmnhGkK94INd8Ia4sC2MIbw/1wo/fMnv606JPFl+tnqv/rQWX92xNZ5+8i38XcuL6eQjjgQ==", + "version": "0.8.9", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz", + "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" @@ -11602,9 +11602,9 @@ "requires": {} }, "@stencil/vue-output-target": { - "version": "0.0.1-dev.11722627707.1cc8aa9d", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11722627707.1cc8aa9d.tgz", - "integrity": "sha512-GC5ONcejQ1fSJGLNmnhGkK94INd8Ia4sC2MIbw/1wo/fMnv606JPFl+tnqv/rQWX92xNZ5+8i38XcuL6eQjjgQ==", + "version": "0.8.9", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz", + "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index 91f52719ed1..548f5bb0045 100644 --- a/core/package.json +++ b/core/package.json @@ -50,7 +50,7 @@ "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", "@stencil/sass": "^3.0.9", - "@stencil/vue-output-target": "^0.0.1-dev.11722627707.1cc8aa9d", + "@stencil/vue-output-target": "^0.8.9", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^6.7.2",