diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cb51fe181..cb3f266c13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [5.5.5](https://github.com/ionic-team/ionic/compare/v5.5.4...v5.5.5) (2021-02-26) + + +### Bug Fixes + +* **vue:** account for event name changes in vue 3.0.6+ ([#22980](https://github.com/ionic-team/ionic/issues/22980)) ([7dd2e6d](https://github.com/ionic-team/ionic/commit/7dd2e6d287b47cca758e1d4a71928dd3dc9ac24d)), closes [#22977](https://github.com/ionic-team/ionic/issues/22977) + + + ## [5.5.4](https://github.com/ionic-team/ionic/compare/v5.5.3...v5.5.4) (2021-02-04) diff --git a/angular/package-lock.json b/angular/package-lock.json index 3a27f20ddb..99181eb548 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "5.5.4", + "version": "5.5.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "5.5.4", + "version": "5.5.5", "license": "MIT", "dependencies": { - "@ionic/core": "file:../core", + "@ionic/core": "5.5.4", "tslib": "^1.9.3" }, "devDependencies": { @@ -42,43 +42,6 @@ "zone.js": ">=0.8.26" } }, - "../core": { - "version": "5.5.3", - "license": "MIT", - "dependencies": { - "ionicons": "^5.1.2", - "tslib": "^1.10.0" - }, - "devDependencies": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" - } - }, "node_modules/@angular-devkit/core": { "version": "8.3.17", "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.17.tgz", @@ -241,8 +204,13 @@ } }, "node_modules/@ionic/core": { - "resolved": "../core", - "link": true + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", + "dependencies": { + "ionicons": "^5.1.2", + "tslib": "^1.10.0" + } }, "node_modules/@rollup/plugin-commonjs": { "version": "11.1.0", @@ -322,6 +290,18 @@ "node": ">=6" } }, + "node_modules/@stencil/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz", + "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=12.10.0", + "npm": ">=6.0.0" + } + }, "node_modules/@szmarczak/http-timer": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", @@ -945,7 +925,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -2047,6 +2026,14 @@ "node": ">=4" } }, + "node_modules/ionicons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz", + "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==", + "dependencies": { + "@stencil/core": "^2.4.0" + } + }, "node_modules/is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", @@ -2429,13 +2416,7 @@ "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==", "dev": true, "dependencies": { - "errno": "^0.1.1", "graceful-fs": "^4.1.2", - "image-size": "~0.5.0", - "make-dir": "^2.1.0", - "mime": "^1.4.1", - "native-request": "^1.0.5", - "source-map": "~0.6.0", "tslib": "^1.10.0" }, "bin": { @@ -2818,7 +2799,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -2959,9 +2939,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.7.5.tgz", "integrity": "sha512-xQSM8uzhgtF6tTnTVEvOQThrcG3LPUP3T/4l4EukzDp0kbTY1QRDuXjiwtYzs9odKj9Bj/PccRG6viFfS7DmCQ==", "dev": true, - "dependencies": { - "fsevents": "~2.1.2" - }, "bin": { "rollup": "dist/bin/rollup" }, @@ -5173,37 +5150,12 @@ } }, "@ionic/core": { - "version": "file:../core", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", "requires": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", "ionicons": "^5.1.2", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslib": "^1.10.0", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" + "tslib": "^1.10.0" } }, "@rollup/plugin-commonjs": { @@ -5276,6 +5228,11 @@ "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", "dev": true }, + "@stencil/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz", + "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==" + }, "@szmarczak/http-timer": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", @@ -6690,6 +6647,14 @@ "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==", "dev": true }, + "ionicons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz", + "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==", + "requires": { + "@stencil/core": "^2.4.0" + } + }, "is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", diff --git a/angular/package.json b/angular/package.json index c7a610b779..2cef7e5356 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "5.5.4", + "version": "5.5.5", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -42,7 +42,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "dependencies": { - "@ionic/core": "5.5.4", + "@ionic/core": "5.5.5", "tslib": "^1.9.3" }, "peerDependencies": { diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 62888e0592..00a615791f 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -643,8 +643,8 @@ export class IonRow { } export declare interface IonSearchbar extends Components.IonSearchbar { } -@ProxyCmp({ inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "spellcheck", "type", "value"], "methods": ["setFocus", "getInputElement"] }) -@Component({ selector: "ion-searchbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "spellcheck", "type", "value"] }) +@ProxyCmp({ inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"], "methods": ["setFocus", "getInputElement"] }) +@Component({ selector: "ion-searchbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }) export class IonSearchbar { ionInput!: EventEmitter; ionChange!: EventEmitter; diff --git a/core/api.txt b/core/api.txt index a85f22fe4d..64adb53dd2 100644 --- a/core/api.txt +++ b/core/api.txt @@ -987,6 +987,7 @@ ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false +ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'focus',false,false ion-searchbar,prop,spellcheck,boolean,false,false,false ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,value,null | string | undefined,'',false,false diff --git a/core/package-lock.json b/core/package-lock.json index f1bcd8603c..af09a28e5f 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "5.5.4", + "version": "5.5.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "5.5.4", + "version": "5.5.5", "license": "MIT", "dependencies": { "@stencil/core": "^2.4.0", @@ -18,7 +18,7 @@ "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.20", "@types/node": "^14.6.0", "@types/puppeteer": "5.4.3", @@ -906,7 +906,6 @@ "jest-resolve": "^26.6.2", "jest-util": "^26.6.2", "jest-worker": "^26.6.2", - "node-notifier": "^8.0.0", "slash": "^3.0.0", "source-map": "^0.6.0", "string-length": "^4.0.1", @@ -1014,10 +1013,31 @@ "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==", "dev": true, "dependencies": { + "@bcoe/v8-coverage": "^0.2.3", "@jest/console": "^26.6.2", + "@jest/test-result": "^26.3.0", + "@jest/transform": "^26.3.0", "@jest/types": "^26.6.2", "@types/istanbul-lib-coverage": "^2.0.0", - "collect-v8-coverage": "^1.0.0" + "chalk": "^4.0.0", + "collect-v8-coverage": "^1.0.0", + "exit": "^0.1.2", + "glob": "^7.1.2", + "graceful-fs": "^4.2.4", + "istanbul-lib-coverage": "^3.0.0", + "istanbul-lib-instrument": "^4.0.3", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.0", + "istanbul-reports": "^3.0.2", + "jest-haste-map": "^26.3.0", + "jest-resolve": "^26.4.0", + "jest-util": "^26.3.0", + "jest-worker": "^26.3.0", + "slash": "^3.0.0", + "source-map": "^0.6.0", + "string-length": "^4.0.1", + "terminal-link": "^2.0.0", + "v8-to-istanbul": "^5.0.1" }, "engines": { "node": ">= 10.14.2" @@ -1337,9 +1357,9 @@ "dev": true }, "node_modules/@stencil/vue-output-target": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz", - "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz", + "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==", "dev": true, "peerDependencies": { "@stencil/core": ">=1.8.0" @@ -2582,7 +2602,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -4227,7 +4246,6 @@ "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==", "dev": true, "dependencies": { - "@types/yauzl": "^2.9.1", "debug": "^4.1.1", "get-stream": "^5.1.0", "yauzl": "^2.10.0" @@ -6724,7 +6742,6 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-regex-util": "^26.0.0", "jest-serializer": "^26.6.2", @@ -10977,9 +10994,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz", "integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==", "dev": true, - "dependencies": { - "fsevents": "~2.1.2" - }, "bin": { "rollup": "dist/bin/rollup" }, @@ -14596,10 +14610,31 @@ "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==", "dev": true, "requires": { + "@bcoe/v8-coverage": "^0.2.3", "@jest/console": "^26.6.2", + "@jest/test-result": "^26.3.0", + "@jest/transform": "^26.3.0", "@jest/types": "^26.6.2", "@types/istanbul-lib-coverage": "^2.0.0", - "collect-v8-coverage": "^1.0.0" + "chalk": "^4.0.0", + "collect-v8-coverage": "^1.0.0", + "exit": "^0.1.2", + "glob": "^7.1.2", + "graceful-fs": "^4.2.4", + "istanbul-lib-coverage": "^3.0.0", + "istanbul-lib-instrument": "^4.0.3", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.0", + "istanbul-reports": "^3.0.2", + "jest-haste-map": "^26.3.0", + "jest-resolve": "^26.4.0", + "jest-util": "^26.3.0", + "jest-worker": "^26.3.0", + "slash": "^3.0.0", + "source-map": "^0.6.0", + "string-length": "^4.0.1", + "terminal-link": "^2.0.0", + "v8-to-istanbul": "^5.0.1" }, "dependencies": { "@jest/types": { @@ -14852,9 +14887,9 @@ "dev": true }, "@stencil/vue-output-target": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz", - "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz", + "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==", "dev": true }, "@stylelint/postcss-css-in-js": { diff --git a/core/package.json b/core/package.json index 85bd531dd0..d25db533e8 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "5.5.4", + "version": "5.5.5", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -40,7 +40,7 @@ "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.20", "@types/node": "^14.6.0", "@types/puppeteer": "5.4.3", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index c1459603ce..a91597b370 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2034,6 +2034,10 @@ export namespace Components { * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ "showCancelButton": 'never' | 'focus' | 'always'; + /** + * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. + */ + "showClearButton": 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ @@ -5336,6 +5340,10 @@ declare namespace LocalJSX { * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ "showCancelButton"?: 'never' | 'focus' | 'always'; + /** + * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. + */ + "showClearButton"?: 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index eaee37f9ea..93f0e0c512 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -120,7 +120,7 @@ export class Header implements ComponentInterface { * as well as progressively showing/hiding the main header * border as the top-most toolbar collapses or expands. */ - const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); }; + const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl!); }; this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] }); this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el); diff --git a/core/src/components/header/header.utils.ts b/core/src/components/header/header.utils.ts index dd6a66d208..2df31003b8 100644 --- a/core/src/components/header/header.utils.ts +++ b/core/src/components/header/header.utils.ts @@ -72,7 +72,7 @@ export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: num } }; -const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => { +const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollTop: number) => { if (!ev[0].isIntersecting) { return; } /** @@ -80,8 +80,13 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) * does not always reset the scrollTop position to 0 when letting go. It will * set to 1 once the rubber band effect has ended. This causes the background to * appear slightly on certain app setups. + * + * Additionally, we check if user is rubber banding (scrolling is negative) + * as this can mean they are using pull to refresh. Once the refresher starts, + * the content is transformed which can cause the intersection observer to erroneously + * fire here as well. */ - const scale = (ev[0].intersectionRatio > 0.9) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75; + const scale = (ev[0].intersectionRatio > 0.9 || scrollTop <= 0) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75; mainHeaderIndex.toolbars.forEach(toolbar => { setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale); @@ -93,9 +98,10 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) * and show the primary toolbar content. If the toolbars are not intersecting, * hide the primary toolbar content and show the scrollable toolbar content */ -export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex) => { +export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => { writeTask(() => { - handleToolbarBorderIntersection(ev, mainHeaderIndex); + const scrollTop = scrollEl.scrollTop; + handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop); const event = ev[0]; @@ -127,7 +133,7 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0); - if (hasValidIntersection) { + if (hasValidIntersection && scrollTop > 0) { setHeaderActive(mainHeaderIndex); setHeaderActive(scrollHeaderIndex, false); setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]); diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss index 2f70b8d665..e9904e1d23 100644 --- a/core/src/components/progress-bar/progress-bar.scss +++ b/core/src/components/progress-bar/progress-bar.scss @@ -10,7 +10,7 @@ * @prop --progress-background: Color of the progress bar * @prop --buffer-background: Color of the buffer bar */ - --background: #{ion-color(primary, base, 0.2)}; + --background: #{ion-color(primary, base, 0.3)}; --progress-background: #{ion-color(primary, base)}; --buffer-background: var(--background); display: block; @@ -27,7 +27,7 @@ :host(.ion-color) { --progress-background: #{current-color(base)}; - --buffer-background: #{current-color(base, 0.2)}; + --buffer-background: #{current-color(base, 0.3)}; } // indeterminate has no progress-buffer-bar, so it will be added to the host @@ -39,22 +39,34 @@ .progress-indeterminate, .indeterminate-bar-primary, .indeterminate-bar-secondary, -.progress-buffer-bar, -.progress-buffer-bar:before, -.buffer-circles { +.progress-buffer-bar { @include position(0, 0, 0, 0); - position: absolute; width: 100%; height: 100%; } +.buffer-circles-container, +.buffer-circles { + @include position(0, 0, 0, 0); + position: absolute; +} + +// Extend a bit to overflow. The size of animated distance. +.buffer-circles { + /* stylelint-disable property-blacklist */ + right: -10px; + left: -10px; + /* stylelint-enable property-blacklist */ +} + // Determinate progress bar // -------------------------------------------------- .progress, -.progress-buffer-bar { +.progress-buffer-bar, +.buffer-circles-container { /* stylelint-disable-next-line property-blacklist */ transform-origin: left top; @@ -72,17 +84,13 @@ } .progress-buffer-bar { - // It's currently here because --buffer-background has an alpha - // Otherwise the buffer circles would be seen through - background: #fff; + background: var(--buffer-background); - z-index: 1; // Make it behind the progress + z-index: 1; +} - &:before { - background: var(--buffer-background); - - content: ""; - } +.buffer-circles-container { + overflow: hidden; } // MD based animation on indeterminate type @@ -109,7 +117,7 @@ top: 0; right: 0; bottom: 0; - left: -54.888891%; + left: -54.888891%; /* stylelint-enable property-blacklist */ animation: secondary-indeterminate-translate 2s infinite linear; @@ -136,18 +144,7 @@ // -------------------------------------------------- :host(.progress-bar-reversed) { - .progress, - .progress-buffer-bar { - /* stylelint-disable-next-line property-blacklist */ - transform-origin: right top; - } - - .buffer-circles, - .indeterminate-bar-primary, - .indeterminate-bar-secondary, - .progress-indeterminate { - animation-direction: reverse; - } + transform: scaleX(-1); } // Progress paused diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx index ee952e64ab..20d05d0e66 100644 --- a/core/src/components/progress-bar/progress-bar.tsx +++ b/core/src/components/progress-bar/progress-bar.tsx @@ -89,7 +89,18 @@ const renderProgress = (value: number, buffer: number) => { return [
, - finalBuffer !== 1 &&
, + /** + * Buffer circles with two container to move + * the circles behind the buffer progress + * with respecting the animation. + * When finalBuffer === 1, we use display: none + * instead of removing the element to avoid flickering. + */ +
+
+
+
+
,
, ]; }; diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html index 688296cf98..b428a315c6 100644 --- a/core/src/components/progress-bar/test/basic/index.html +++ b/core/src/components/progress-bar/test/basic/index.html @@ -9,7 +9,9 @@ - @@ -619,10 +622,6 @@

- - Default - - @@ -759,6 +758,18 @@ Dark

+ +

+ + + + + + + + + +

@@ -924,6 +935,9 @@ Super Modal + + Close + @@ -932,10 +946,21 @@ Super Modal -
-

Content of doom

-
Here's some more content
- Dismiss Modal + +
+ +
+ + + Item A + + + Item B + + + Item C + +
`; diff --git a/core/stencil.config.ts b/core/stencil.config.ts index d0b5159a70..c44e94a3b9 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -91,13 +91,15 @@ export const config: Config = { { elements: ['ion-checkbox', 'ion-toggle'], targetAttr: 'checked', - event: 'v-ionChange', + // TODO Ionic v6 remove in favor of v-ion-change + event: ['v-ionChange', 'v-ion-change'], externalEvent: 'ionChange' }, { elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'], targetAttr: 'value', - event: 'v-ionChange', + // TODO Ionic v6 remove in favor of v-ion-change + event: ['v-ionChange', 'v-ion-change'], externalEvent: 'ionChange' } ], diff --git a/docs/package.json b/docs/package.json index a8c22e1875..f936084359 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "5.5.4", + "version": "5.5.5", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index 6dcf1059af..609733b7cd 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/angular-server", - "version": "5.5.4", + "version": "5.5.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "5.5.4", + "version": "5.5.5", "license": "MIT", "devDependencies": { "@angular/animations": "8.2.13", @@ -16,7 +16,7 @@ "@angular/core": "8.2.13", "@angular/platform-browser": "8.2.13", "@angular/platform-server": "8.2.13", - "@ionic/core": "file:../../core", + "@ionic/core": "5.5.4", "ng-packagr": "5.7.1", "tslint": "^5.12.1", "tslint-ionic-rules": "0.0.21", @@ -31,44 +31,6 @@ "zone.js": ">=0.8.26" } }, - "../../core": { - "version": "5.5.3", - "dev": true, - "license": "MIT", - "dependencies": { - "ionicons": "^5.1.2", - "tslib": "^1.10.0" - }, - "devDependencies": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" - } - }, "node_modules/@angular/animations": { "version": "8.2.13", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.2.13.tgz", @@ -175,8 +137,14 @@ } }, "node_modules/@ionic/core": { - "resolved": "../../core", - "link": true + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", + "dev": true, + "dependencies": { + "ionicons": "^5.1.2", + "tslib": "^1.10.0" + } }, "node_modules/@sindresorhus/is": { "version": "0.14.0", @@ -187,6 +155,19 @@ "node": ">=6" } }, + "node_modules/@stencil/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz", + "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==", + "dev": true, + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=12.10.0", + "npm": ">=6.0.0" + } + }, "node_modules/@szmarczak/http-timer": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", @@ -697,7 +678,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -2423,6 +2403,15 @@ "node": ">=4" } }, + "node_modules/ionicons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz", + "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==", + "dev": true, + "dependencies": { + "@stencil/core": "^2.4.0" + } + }, "node_modules/is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", @@ -2808,12 +2797,7 @@ "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==", "dev": true, "dependencies": { - "errno": "^0.1.1", "graceful-fs": "^4.1.2", - "image-size": "~0.5.0", - "make-dir": "^2.1.0", - "mime": "^1.4.1", - "native-request": "^1.0.5", "source-map": "~0.6.0", "tslib": "^1.10.0" }, @@ -3246,7 +3230,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5434,37 +5417,13 @@ } }, "@ionic/core": { - "version": "file:../../core", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", + "dev": true, "requires": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", "ionicons": "^5.1.2", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslib": "^1.10.0", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" + "tslib": "^1.10.0" } }, "@sindresorhus/is": { @@ -5473,6 +5432,12 @@ "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", "dev": true }, + "@stencil/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz", + "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==", + "dev": true + }, "@szmarczak/http-timer": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", @@ -7357,6 +7322,15 @@ "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==", "dev": true }, + "ionicons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz", + "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==", + "dev": true, + "requires": { + "@stencil/core": "^2.4.0" + } + }, "is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index 0134282494..874bb39bf4 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "5.5.4", + "version": "5.5.5", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -49,7 +49,7 @@ "@angular/core": "8.2.13", "@angular/platform-browser": "8.2.13", "@angular/platform-server": "8.2.13", - "@ionic/core": "5.5.4", + "@ionic/core": "5.5.5", "ng-packagr": "5.7.1", "tslint": "^5.12.1", "tslint-ionic-rules": "0.0.21", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index df46804d85..e8cb352827 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "5.5.4", + "version": "5.5.5", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -39,16 +39,16 @@ "tslib": "*" }, "peerDependencies": { - "@ionic/core": "5.5.4", - "@ionic/react": "5.5.4", + "@ionic/core": "5.5.5", + "@ionic/react": "5.5.5", "react": ">=16.8.6", "react-dom": ">=16.8.6", "react-router": "^5.0.1", "react-router-dom": "^5.0.1" }, "devDependencies": { - "@ionic/core": "5.5.4", - "@ionic/react": "5.5.4", + "@ionic/core": "5.5.5", + "@ionic/react": "5.5.5", "@rollup/plugin-node-resolve": "^8.1.0", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx index 8be9490061..50794eafcc 100644 --- a/packages/react-router/src/ReactRouter/IonRouter.tsx +++ b/packages/react-router/src/ReactRouter/IonRouter.tsx @@ -241,7 +241,7 @@ class IonRouterInner extends React.PureComponent { routeDirection: 'back', routeAnimation: routeAnimation || routeInfo.routeAnimation, }; - if (routeInfo.lastPathname === routeInfo.pushedByRoute) { + if (routeInfo.lastPathname === routeInfo.pushedByRoute || prevInfo.pathname === routeInfo.pushedByRoute) { this.props.history.goBack(); } else { this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back'); diff --git a/packages/react/package.json b/packages/react/package.json index b495b19eb4..8848fd6698 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "5.5.4", + "version": "5.5.5", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "5.5.4", + "@ionic/core": "5.5.5", "ionicons": "^5.1.2", "tslib": "*" }, diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index d4377c0248..121a42168c 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,16 +1,13 @@ { "name": "@ionic/vue-router", - "version": "5.5.4", + "version": "5.5.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "5.5.4", + "version": "5.5.5", "license": "MIT", - "dependencies": { - "@ionic/core": "file:../../core" - }, "devDependencies": { "@ionic/vue": "5.4.1", "@types/jest": "^26.0.13", @@ -25,7 +22,9 @@ } }, "../../core": { - "version": "5.4.1", + "name": "@ionic/core", + "version": "5.5.4", + "dev": true, "license": "MIT", "dependencies": { "ionicons": "^5.1.2", @@ -36,7 +35,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.1.8", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", @@ -908,7 +907,6 @@ "jest-resolve": "^26.6.2", "jest-util": "^26.6.2", "jest-worker": "^26.6.2", - "node-notifier": "^8.0.0", "slash": "^3.0.0", "source-map": "^0.6.0", "string-length": "^4.0.1", @@ -2324,8 +2322,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -3924,7 +3921,6 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-regex-util": "^26.0.0", "jest-serializer": "^26.6.2", @@ -6235,9 +6231,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz", "integrity": "sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w==", "dev": true, - "dependencies": { - "fsevents": "~2.1.2" - }, "bin": { "rollup": "dist/bin/rollup" }, @@ -8251,7 +8244,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.1.8", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index d8443ee54e..1874cbe846 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "5.5.4", + "version": "5.5.5", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts index a84ae558fe..76aea4c57a 100644 --- a/packages/vue-router/src/router.ts +++ b/packages/vue-router/src/router.ts @@ -88,7 +88,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) => const prevInfo = locationHistory.findLastLocation(routeInfo); if (prevInfo) { incomingRouteParams = { ...prevInfo, routerAction: 'pop', routerDirection: 'back', routerAnimation: routerAnimation || routeInfo.routerAnimation }; - if (routeInfo.lastPathname === routeInfo.pushedByRoute) { + if (routeInfo.lastPathname === routeInfo.pushedByRoute || prevInfo.pathname === routeInfo.pushedByRoute) { router.back(); } else { router.replace({ path: prevInfo.pathname, query: parseQuery(prevInfo.search) }); diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 17b7ef4d4b..d2187be7a7 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,20 +1,21 @@ { "name": "@ionic/vue", - "version": "5.5.4", + "version": "5.5.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "5.5.4", + "version": "5.5.5", "license": "MIT", "dependencies": { - "@ionic/core": "file:../../core", + "@ionic/core": "5.5.4", "ionicons": "^5.1.2" }, "devDependencies": { "@stencil/core": "^1.17.0", "change-case": "^4.1.1", + "fs-extra": "^9.1.0", "rimraf": "^3.0.2", "rollup": "^2.32.1", "typescript": "^4.0.5", @@ -22,43 +23,6 @@ "vue-router": "^4.0.0-rc.4" } }, - "../../core": { - "version": "5.5.3", - "license": "MIT", - "dependencies": { - "ionicons": "^5.1.2", - "tslib": "^1.10.0" - }, - "devDependencies": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" - } - }, "node_modules/@babel/helper-validator-identifier": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", @@ -89,8 +53,13 @@ } }, "node_modules/@ionic/core": { - "resolved": "../../core", - "link": true + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", + "dependencies": { + "ionicons": "^5.1.2", + "tslib": "^1.10.0" + } }, "node_modules/@stencil/core": { "version": "1.17.3", @@ -180,6 +149,15 @@ "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==", "dev": true }, + "node_modules/at-least-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -276,6 +254,21 @@ "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", "dev": true }, + "node_modules/fs-extra": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", + "dev": true, + "dependencies": { + "at-least-node": "^1.0.0", + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -312,6 +305,12 @@ "node": "*" } }, + "node_modules/graceful-fs": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", + "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", + "dev": true + }, "node_modules/header-case": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz", @@ -343,6 +342,18 @@ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz", "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA==" }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/lodash": { "version": "4.17.20", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", @@ -445,9 +456,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.1.tgz", "integrity": "sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w==", "dev": true, - "dependencies": { - "fsevents": "~2.1.2" - }, "bin": { "rollup": "dist/bin/rollup" }, @@ -500,8 +508,7 @@ "node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/typescript": { "version": "4.0.5", @@ -516,6 +523,15 @@ "node": ">=4.2.0" } }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/upper-case": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz", @@ -583,37 +599,12 @@ } }, "@ionic/core": { - "version": "file:../../core", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", "requires": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", "ionicons": "^5.1.2", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslib": "^1.10.0", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" + "tslib": "^1.10.0" } }, "@stencil/core": { @@ -692,6 +683,12 @@ "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==", "dev": true }, + "at-least-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "dev": true + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -788,6 +785,18 @@ "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", "dev": true }, + "fs-extra": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", + "dev": true, + "requires": { + "at-least-node": "^1.0.0", + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -815,6 +824,12 @@ "path-is-absolute": "^1.0.0" } }, + "graceful-fs": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", + "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", + "dev": true + }, "header-case": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz", @@ -846,6 +861,16 @@ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz", "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA==" }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + } + }, "lodash": { "version": "4.17.20", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", @@ -979,8 +1004,7 @@ "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "typescript": { "version": "4.0.5", @@ -988,6 +1012,12 @@ "integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==", "dev": true }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true + }, "upper-case": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz", diff --git a/packages/vue/package.json b/packages/vue/package.json index a5e61748e5..be7a987320 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "5.5.4", + "version": "5.5.5", "description": "Vue specific wrapper for @ionic/core", "scripts": { "lint": "echo add linter", @@ -49,6 +49,7 @@ "devDependencies": { "@stencil/core": "^1.17.0", "change-case": "^4.1.1", + "fs-extra": "^9.1.0", "rimraf": "^3.0.2", "rollup": "^2.32.1", "typescript": "^4.0.5", @@ -56,7 +57,7 @@ "vue-router": "^4.0.0-rc.4" }, "dependencies": { - "@ionic/core": "5.5.4", + "@ionic/core": "5.5.5", "ionicons": "^5.1.2" }, "vetur": { diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts index 0e166d86fe..fd3d196d45 100644 --- a/packages/vue/src/ionic-vue.ts +++ b/packages/vue/src/ionic-vue.ts @@ -2,22 +2,39 @@ import { App, Plugin } from 'vue'; import { IonicConfig, setupConfig } from '@ionic/core'; import { applyPolyfills, defineCustomElements } from '@ionic/core/loader'; +const needsKebabCase = (version: string) => !['3.0.0', '3.0.1', '3.0.2', '3.0.3', '3.0.4', '3.0.5'].includes(version); + /** - * We need to make sure that the web component fires an event - * that will not conflict with the user's @ionChange binding, - * otherwise the binding's callback will fire before any - * v-model values have been updated. +* We need to make sure that the web component fires an event +* that will not conflict with the user's @ionChange binding, +* otherwise the binding's callback will fire before any +* v-model values have been updated. +*/ +const toLowerCase = (eventName: string) => eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase(); +const toKebabCase = (eventName: string) => eventName === 'ionChange' ? 'v-ion-change' : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); + +/** + * Vue 3.0.6 fixed a bug where events on custom elements + * were always converted to lower case, so "ionRefresh" + * became "ionRefresh". We need to account for the old + * issue as well as the new behavior where "ionRefresh" + * is converted to "ion-refresh". + * See https://github.com/vuejs/vue-next/pull/2847 */ -const transformEventName = (eventName: string) => { - return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase(); -} -const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(transformEventName(eventName), cb, opts); -const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(transformEventName(eventName), cb, opts); +const getHelperFunctions = (needsKebabCase: boolean = true) => { + const conversionFn = (needsKebabCase) ? toKebabCase : toLowerCase; + return { + ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(conversionFn(eventName), cb, opts), + rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(conversionFn(eventName), cb, opts), + ce: (eventName: string, opts: any) => new CustomEvent(conversionFn(eventName), opts) + }; +}; export const IonicVue: Plugin = { - async install(_app: App, config: IonicConfig = {}) { + async install(app: App, config: IonicConfig = {}) { if (typeof (window as any) !== 'undefined') { + const { ael, rel, ce } = getHelperFunctions(needsKebabCase(app.version)); setupConfig({ ...config, _ael: ael, @@ -26,7 +43,7 @@ export const IonicVue: Plugin = { await applyPolyfills(); await defineCustomElements(window, { exclude: ['ion-tabs'], - ce: (eventName: string, opts: any) => new CustomEvent(transformEventName(eventName), opts), + ce, ael, rel } as any); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index e8bda1f50a..bdcd674465 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -97,7 +97,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-c ], { "modelProp": "checked", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -181,7 +184,10 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -296,7 +302,10 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -448,7 +457,10 @@ export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -461,7 +473,10 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer('i ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -486,7 +501,10 @@ export const IonRange = /*@__PURE__*/ defineContainer('ion-range', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -544,6 +562,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion 'placeholder', 'searchIcon', 'showCancelButton', + 'showClearButton', 'spellcheck', 'type', 'value', @@ -557,7 +576,10 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -574,7 +596,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer('ion-seg ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -587,7 +612,10 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-selec ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -705,7 +736,10 @@ export const IonTextarea = /*@__PURE__*/ defineContainer('ion-t ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -733,7 +767,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggl ], { "modelProp": "checked", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts index 12c661c9cf..c058edb06e 100644 --- a/packages/vue/src/vue-component-lib/overlays.ts +++ b/packages/vue/src/vue-component-lib/overlays.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, ref } from 'vue'; +import { defineComponent, h, ref, VNode } from 'vue'; export interface OverlayProps { isOpen?: boolean; @@ -21,28 +21,61 @@ export const defineOverlayContainer = (name: string, compo isOpen && (await present(props)) } - const onVnodeUpdated = async () => { - const isOpen = props.isOpen; + const onVnodeUpdated = async (node: VNode, prevNode: VNode) => { + const isOpen = node.props!.isOpen; + const prevIsOpen = prevNode.props!.isOpen; + + /** + * Do not do anything if this prop + * did not change. + */ + if (isOpen === prevIsOpen) return; + if (isOpen) { - await overlay.value?.present() || present(props); + await present(props); } else { - await overlay.value?.dismiss(); - overlay.value = undefined; + await dismiss(); } } const onVnodeBeforeUnmount = async () => { - await overlay.value?.dismiss(); + await dismiss(); + } + + const dismiss = async () => { + if (!overlay.value) return; + + await overlay.value; + + overlay.value = overlay.value.dismiss(); + + await overlay.value; + overlay.value = undefined; } const present = async (props: Readonly) => { + /** + * Do not open another instance + * if one is already opened. + */ + if (overlay.value) { + await overlay.value; + } + + if (overlay.value?.present) { + await overlay.value.present(); + return; + } + const component = slots.default && slots.default()[0]; - overlay.value = await controller.create({ + overlay.value = controller.create({ ...props, component }); + overlay.value = await overlay.value; + eventListeners.forEach(eventListener => { overlay.value.addEventListener(eventListener.componentEv, () => { emit(eventListener.frameworkEv); @@ -59,7 +92,8 @@ export const defineOverlayContainer = (name: string, compo style: { display: 'none' }, onVnodeMounted, onVnodeUpdated, - onVnodeBeforeUnmount + onVnodeBeforeUnmount, + isOpen: props.isOpen } ); } diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index e9a994c9a4..cdd75367ab 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -16,7 +16,7 @@ interface NavManager { interface ComponentOptions { modelProp?: string; - modelUpdateEvent?: string; + modelUpdateEvent?: string | string[]; externalModelUpdateEvent?: string; } @@ -55,19 +55,22 @@ export const defineContainer = (name: string, componentProps: string[] = const onVnodeBeforeMount = (vnode: VNode) => { // Add a listener to tell Vue to update the v-model if (vnode.el) { - vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => { - modelPropValue = (e?.target as any)[modelProp]; - emit(UPDATE_VALUE_EVENT, modelPropValue); + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); - /** - * We need to emit the change event here - * rather than on the web component to ensure - * that any v-model bindings have been updated. - * Otherwise, the developer will listen on the - * native web component, but the v-model will - * not have been updated yet. - */ - emit(externalModelUpdateEvent, e); + /** + * We need to emit the change event here + * rather than on the web component to ensure + * that any v-model bindings have been updated. + * Otherwise, the developer will listen on the + * native web component, but the v-model will + * not have been updated yet. + */ + emit(externalModelUpdateEvent, e); + }); }); } }; diff --git a/packages/vue/test-app/src/views/Overlays.vue b/packages/vue/test-app/src/views/Overlays.vue index b79df4df88..cdf5c0a445 100644 --- a/packages/vue/test-app/src/views/Overlays.vue +++ b/packages/vue/test-app/src/views/Overlays.vue @@ -62,7 +62,9 @@
- Present Overlay + Present Overlay + + Quickly Change Loading Props { + setLoadingRef(true); + setTimeout(() => { + setLoadingRef(false); + setTimeout(() => { + setLoadingRef(true); + }, 10); + }, 10); + } + return { + changeLoadingProps, overlayProps, present, componentType, diff --git a/packages/vue/test-app/tests/e2e/specs/overlays.js b/packages/vue/test-app/tests/e2e/specs/overlays.js index c0e7f0a058..e23186fd48 100644 --- a/packages/vue/test-app/tests/e2e/specs/overlays.js +++ b/packages/vue/test-app/tests/e2e/specs/overlays.js @@ -59,7 +59,7 @@ describe('Overlays', () => { cy.get('ion-toast').should('not.exist'); }); - it('it should pass props to modal via controller', () => { + it('should pass props to modal via controller', () => { cy.get('ion-radio#ion-modal').click(); cy.get('ion-radio#controller').click(); @@ -69,7 +69,7 @@ describe('Overlays', () => { cy.get('ion-modal ion-content').should('have.text', 'Custom Title'); }); - it('it should pass props to modal via component', () => { + it('should pass props to modal via component', () => { cy.get('ion-radio#ion-modal').click(); cy.get('ion-radio#component').click(); @@ -79,7 +79,7 @@ describe('Overlays', () => { cy.get('ion-modal ion-content').should('have.text', 'Custom Title'); }); - it('it should pass props to popover via controller', () => { + it('should pass props to popover via controller', () => { cy.get('ion-radio#ion-popover').click(); cy.get('ion-radio#controller').click(); @@ -89,7 +89,7 @@ describe('Overlays', () => { cy.get('ion-popover ion-content').should('have.text', 'Custom Title'); }); - it('it should pass props to popover via component', () => { + it('should pass props to popover via component', () => { cy.get('ion-radio#ion-popover').click(); cy.get('ion-radio#component').click(); @@ -98,4 +98,10 @@ describe('Overlays', () => { cy.get('ion-popover ion-content').should('have.text', 'Custom Title'); }); + + it('should only open one instance at a time when props change quickly on component', () => { + cy.get('#change-loading-props').click(); + + cy.get('ion-loading').should('have.length', 1); + }); })