mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
chore(): sync next with master
chore(): sync next with master
This commit is contained in:
Liam DeBeasi
186
packages/vue/package-lock.json
generated
186
packages/vue/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -97,7 +97,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
|
||||
],
|
||||
{
|
||||
"modelProp": "checked",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -181,7 +184,10 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -296,7 +302,10 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -448,7 +457,10 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio',
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -461,7 +473,10 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('i
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -486,7 +501,10 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -544,6 +562,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
|
||||
'placeholder',
|
||||
'searchIcon',
|
||||
'showCancelButton',
|
||||
'showClearButton',
|
||||
'spellcheck',
|
||||
'type',
|
||||
'value',
|
||||
@ -557,7 +576,10 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -574,7 +596,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -587,7 +612,10 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -612,7 +640,10 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -705,7 +736,10 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
|
||||
],
|
||||
{
|
||||
"modelProp": "value",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
@ -733,7 +767,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
|
||||
],
|
||||
{
|
||||
"modelProp": "checked",
|
||||
"modelUpdateEvent": "v-ionChange",
|
||||
"modelUpdateEvent": [
|
||||
"v-ionChange",
|
||||
"v-ion-change"
|
||||
],
|
||||
"externalModelUpdateEvent": "ionChange"
|
||||
});
|
||||
|
||||
|
||||
@ -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 = <Props extends object>(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<Props>) => {
|
||||
/**
|
||||
* 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 = <Props extends object>(name: string, compo
|
||||
style: { display: 'none' },
|
||||
onVnodeMounted,
|
||||
onVnodeUpdated,
|
||||
onVnodeBeforeUnmount
|
||||
onVnodeBeforeUnmount,
|
||||
isOpen: props.isOpen
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ interface NavManager<T = any> {
|
||||
|
||||
interface ComponentOptions {
|
||||
modelProp?: string;
|
||||
modelUpdateEvent?: string;
|
||||
modelUpdateEvent?: string | string[];
|
||||
externalModelUpdateEvent?: string;
|
||||
}
|
||||
|
||||
@ -55,19 +55,22 @@ export const defineContainer = <Props>(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);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -62,7 +62,9 @@
|
||||
|
||||
<br />
|
||||
|
||||
<ion-button expand="block" @click="present($event)" id="present-overlay">Present Overlay</ion-button>
|
||||
<ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
|
||||
|
||||
<ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
|
||||
|
||||
<ion-action-sheet
|
||||
:is-open="isActionSheetOpen"
|
||||
@ -314,7 +316,18 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
const changeLoadingProps = () => {
|
||||
setLoadingRef(true);
|
||||
setTimeout(() => {
|
||||
setLoadingRef(false);
|
||||
setTimeout(() => {
|
||||
setLoadingRef(true);
|
||||
}, 10);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
return {
|
||||
changeLoadingProps,
|
||||
overlayProps,
|
||||
present,
|
||||
componentType,
|
||||
|
||||
@ -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);
|
||||
});
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user