javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): correctly show ion-back-button when going back (#22260)

Browse Source 
resolves #22217
This commit is contained in:
Liam DeBeasi
2020-10-07 14:58:41 -04:00
committed by GitHub
parent d746561ea2
commit 39d2530427
17 changed files with 497 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -164,8 +164,6 @@ export const IonRouterOutlet = defineComponent({
if (enteringViewItem === leavingViewItem) return;
if (enteringViewItem === leavingViewItem) return;
fireLifecycle(enteringViewItem.vueComponent, LIFECYCLE_WILL_ENTER);
if (leavingViewItem) {
@ -174,8 +172,6 @@ export const IonRouterOutlet = defineComponent({
fireLifecycle(leavingViewItem.vueComponent, LIFECYCLE_WILL_LEAVE);
enteringEl.classList.remove('ion-page-hidden');
/**
* If we are going back from a page that
* was presented using a custom animation
@ -199,7 +195,7 @@ export const IonRouterOutlet = defineComponent({
enteringEl,
leavingEl,
routerDirection,
routerDirection === 'forward',
!!routeInfo.pushedByRoute,
false,
animationBuilder
);

352
packages/vue/test-app/package-lock.json generated
View File

@ -1306,27 +1306,27 @@
}
},
"@ionic/core": {
"version": "0.6.0-dev.202010051957.440e9e7",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.6.0-dev.202010051957.440e9e7.tgz",
"integrity": "sha512-WeMzpVFwNSK0M6tMAfYKr63OSB80x3JJbusF0bieT3Owh4c+zt25S0pfm6Tu8a11iYTn4vteBEYuKeu67Qv+rg==",
"version": "0.6.0-dev.202010061731.4c58b2f",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.6.0-dev.202010061731.4c58b2f.tgz",
"integrity": "sha512-+eR99HmJiYLDPXORCVoAGxQlbQ97JJ4EdP9Uo6/pHwsUw2Drf+NLBaGEwZMrB2AFpINY+uySzd6pjnRPUVFNwQ==",
"requires": {
"ionicons": "^5.1.2",
"tslib": "^1.10.0"
}
},
"@ionic/vue": {
"version": "0.6.0-dev.202010051957.440e9e7",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-0.6.0-dev.202010051957.440e9e7.tgz",
"integrity": "sha512-+tCCF1IC1dyz5mmItMtWo8z6UWbRwoS8UsPCX6dAdIGkALGYY1bjqcOrkj+GK4n8Cu8slpwSoesow/No2jCXog==",
"version": "0.6.0-dev.202010061731.4c58b2f",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-0.6.0-dev.202010061731.4c58b2f.tgz",
"integrity": "sha512-68d0cFHR0/7wI7MXSmVtRYA8iySM9aE9wmeVvgE7v447VDoe9zwhW8sPVCqRy6ibWQpZWRF2tLS4kPPSQKn/HQ==",
"requires": {
"@ionic/core": "0.6.0-dev.202010051957.440e9e7",
"@ionic/core": "0.6.0-dev.202010061731.4c58b2f",
"ionicons": "^5.1.2"
}
},
"@ionic/vue-router": {
"version": "0.6.0-dev.202010051957.440e9e7",
"resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-0.6.0-dev.202010051957.440e9e7.tgz",
"integrity": "sha512-4bRlHoLZdwsU4VwEP8WPudHkZy4uX/rqUvXg5Hn4YMxEGR/AfYm0TAyeQgh2I18GIcnu2Vjff3B46UkZj/5OjA=="
"version": "0.6.0-dev.202010061731.4c58b2f",
"resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-0.6.0-dev.202010061731.4c58b2f.tgz",
"integrity": "sha512-HyvdJYjppGa2bke6E8TO26RHczxA8LizOB8bL+ZOBfGtpeLnALmajhaHx6CthvPUHLDrcUQZ80LkS+zfM/sBew=="
},
"@jest/console": {
"version": "24.9.0",
@ -2852,127 +2852,6 @@
"tslint": "^5.20.1",
"webpack": "^4.0.0",
"yorkie": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.0",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.0.tgz",
"integrity": "sha512-NEKcI0+osT5bBFZ1SFGzJMQETjQWZrSvMO1g0nAR/w0t328Z41eN8BJEIZyFCl2HsuiJpa9AN474Nh2qLVwGLQ==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
}
},
"fs-extra": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
"dev": true,
"optional": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^1.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"jsonfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^1.0.0"
}
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"universalify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
"dev": true,
"optional": true
}
}
},
"@vue/cli-plugin-unit-jest": {
@ -3143,17 +3022,6 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -3234,18 +3102,6 @@
"supports-color": "^7.0.0"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -3350,18 +3206,6 @@
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
},
"wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@ -8315,6 +8159,95 @@
}
}
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.0",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.0.tgz",
"integrity": "sha512-NEKcI0+osT5bBFZ1SFGzJMQETjQWZrSvMO1g0nAR/w0t328Z41eN8BJEIZyFCl2HsuiJpa9AN474Nh2qLVwGLQ==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"form-data": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@ -9321,9 +9254,9 @@
}
},
"ionicons": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz",
"integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA=="
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.1.tgz",
"integrity": "sha512-dtw4rR7Sr2ssGHRrkTMESQ/p4gwovmHgafKvZsEeMjb712xjBOD3YSycy5kofS5RusU/IFVog8693BZiJ0ELzA=="
},
"ip": {
"version": "1.1.5",
@ -15892,6 +15825,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "4.0.0-beta.11",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-beta.11.tgz",

4
packages/vue/test-app/package.json
View File

@ -11,8 +11,8 @@
"cypress": "node_modules/.bin/cypress run --headless --browser chrome"
},
"dependencies": {
"@ionic/vue": "0.6.0-dev.202010051957.440e9e7",
"@ionic/vue-router": "0.6.0-dev.202010051957.440e9e7",
"@ionic/vue": "0.6.0-dev.202010061731.4c58b2f",
"@ionic/vue-router": "0.6.0-dev.202010061731.4c58b2f",
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"

25
packages/vue/test-app/src/router/index.ts
View File

@ -5,11 +5,6 @@ import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home
},
{
@ -27,11 +22,19 @@ const routes: Array<RouteRecordRaw> = [
name: 'Slides',
component: () => import('@/views/Slides.vue')
},
{
path: '/default-href',
component: () => import('@/views/DefaultHref.vue')
},
{
path: '/navigation',
name: 'Navigation',
component: () => import('@/views/Navigation.vue')
},
{
path: '/navigation/child',
component: () => import('@/views/NavigationChild.vue')
},
{
path: '/nested',
name: 'RouterOutlet',
@ -57,7 +60,17 @@ const routes: Array<RouteRecordRaw> = [
},
{
path: 'tab1',
component: () => import('@/views/Tab1.vue')
component: () => import('@/views/Tab1.vue'),
children: [
{
path: 'child-one',
component: () => import('@/views/Tab1ChildOne.vue')
},
{
path: 'child-two',
component: () => import('@/views/Tab1ChildTwo.vue')
}
]
},
{
path: 'tab2',

45
packages/vue/test-app/src/views/DefaultHref.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<ion-page data-pageid="defaulthref">
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons>
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>DefaultHref</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">DefaultHref</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</script>

3
packages/vue/test-app/src/views/Home.vue
View File

@ -26,6 +26,9 @@
<ion-item router-link="/navigation" id="navigation">
<ion-label>Navigation</ion-label>
</ion-item>
<ion-item router-link="/default-href" id="default-href">
<ion-label>Default Href</ion-label>
</ion-item>
<ion-item router-link="/nested" id="nested">
<ion-label>Nested Router Outlet</ion-label>
</ion-item>

6
packages/vue/test-app/src/views/Navigation.vue
View File

@ -3,7 +3,7 @@
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons>
<ion-back-button default-href="/"></ion-back-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Navigation</ion-title>
</ion-toolbar>
@ -19,6 +19,10 @@
<ion-item button @click="setRouteParams" id="route-params">
<ion-label>Set Route Parameters</ion-label>
</ion-item>
<ion-item button router-link="/navigation/child" id="child">
<ion-label>Go to Child Page</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>

63
packages/vue/test-app/src/views/NavigationChild.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<ion-page data-pageid="navigationchild">
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Navigation Child</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Navigation Child</ion-title>
</ion-toolbar>
</ion-header>
<div class="ion-padding">
Navigation Child Page
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'NavigationChild',
components: {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
},
setup() {
const router = useRouter();
const setRouteParams = () => {
router.push({
query: {
search: 'liamwashere'
}
});
}
return { setRouteParams }
}
});
</script>

8
packages/vue/test-app/src/views/Tab1.vue
View File

@ -16,16 +16,20 @@
</ion-header>
<ExploreContainer name="Tab 1 page" />
<ion-item router-link="tab1/child-one" id="child-one">
<ion-label>Go to Tab 1 Child 1</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script>
import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { IonButtons, IonBackButton, IonPage, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
export default {
name: 'Tab1',
components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

52
packages/vue/test-app/src/views/Tab1ChildOne.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<ion-page data-pageid="tab1childone">
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Tab 1 Child 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1 Child 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-item router-link="child-two" id="child-two">
<ion-label>Tab 1 Child 2</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script>
import {
IonButtons,
IonBackButton,
IonPage,
IonHeader,
IonItem,
IonLabel,
IonToolbar,
IonTitle,
IonContent
} from '@ionic/vue';
export default {
components: {
IonButtons,
IonBackButton,
IonPage,
IonHeader,
IonItem,
IonLabel,
IonToolbar,
IonTitle,
IonContent
}
}
</script>

44
packages/vue/test-app/src/views/Tab1ChildTwo.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<ion-page data-pageid="tab1childtwo">
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Tab 1 Child 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1 Child 2</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
</ion-page>
</template>
<script>
import {
IonButtons,
IonBackButton,
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent
} from '@ionic/vue';
export default {
components: {
IonButtons,
IonBackButton,
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent
}
}
</script>

6
packages/vue/test-app/src/views/Tab2.vue
View File

@ -1,5 +1,5 @@
<template>
<ion-page>
<ion-page data-pageid="tab2">
<ion-header>
<ion-toolbar>
<ion-title>Tab 2</ion-title>
@ -11,7 +11,7 @@
<ion-title size="large">Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 2 page" />
</ion-content>
</ion-page>
@ -25,4 +25,4 @@ export default {
name: 'Tab2',
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>
</script>

20
packages/vue/test-app/tests/e2e/specs/navigation.js
View File

@ -1,4 +1,4 @@
describe.only('Navigation', () => {
describe('Navigation', () => {
/*
// TODO move these to separate describe block
@ -42,11 +42,25 @@ describe.only('Navigation', () => {
});
it('should go back home with default href', () => {
cy.visit('http://localhost:8080/navigation');
cy.visit('http://localhost:8080/default-href');
cy.ionBackClick('defaulthref');
cy.ionPageVisible('home');
cy.ionPageDoesNotExist('defaulthref');
});
it('should show back button', () => {
cy.visit('http://localhost:8080');
cy.get('#navigation').click();
cy.get('#child').click();
cy.ionBackClick('navigationchild');
cy.ionBackClick('navigation');
cy.ionPageVisible('home');
cy.ionPageDoesNotExist('navigation');
});
cy.ionPageDoesNotExist('navigationchild')
})
});

2
packages/vue/test-app/tests/e2e/specs/nested.js
View File

@ -1,4 +1,4 @@
describe('Inputs', () => {
describe('Nested', () => {
beforeEach(() => {
cy.visit('http://localhost:8080/nested');
});

2
packages/vue/test-app/tests/e2e/specs/overlays.js
View File

@ -1,4 +1,4 @@
describe('Inputs', () => {
describe('Overlays', () => {
beforeEach(() => {
cy.visit('http://localhost:8080/overlays')
})

53
packages/vue/test-app/tests/e2e/specs/tabs.js
View File

@ -1,9 +1,58 @@
describe('Tabs', () => {
beforeEach(() => {
cy.visit('http://localhost:8080')
it('should go back from child pages', () => {
cy.visit('http://localhost:8080/tabs')
cy.get('#child-one').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab1childone');
cy.get('#child-two').click();
cy.ionPageHidden('tab1childone');
cy.ionPageVisible('tab1childtwo');
cy.ionBackClick('tab1childtwo');
cy.ionBackClick('tab1childone');
cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageDoesNotExist('tab1childtwo');
});
it('should go back to child page when switching tabs', () => {
cy.visit('http://localhost:8080/tabs')
cy.get('#child-one').click();
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageVisible('tab2');
cy.ionPageHidden('tab1childone');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab1childone');
cy.get('ion-tab-button#tab-button-tab1').click();
});
// TODO this does not work
it.skip('should return to tab root when clicking tab button', () => {
cy.visit('http://localhost:8080/tabs')
cy.get('#child-one').click();
cy.get('#child-two').click();
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageDoesNotExist('tab1childtwo');
})
it('should be able to create and destroy tabs', () => {
cy.visit('http://localhost:8080')
cy.get('#tabs').click();
cy.ionPageVisible('tab1');