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

refactor(vue): drop support for "on" prefixed overlay events and bump minimum required version of vue to 3.0.6 (#23229)

Browse Source 
refactor(vue): drop support for "on" prefixed overlay events and bump minimum required version of vue to 3.0.6

BREAKING CHANGE:

- Dropped support for prefixed overlay events in favor of non prefixed events (I.e. `@onDidDismiss` becomes `@didDismiss`).
- Minimum required version of Vue is now Vue v3.0.6 or newer.
This commit is contained in:
Liam DeBeasi
2021-04-23 13:06:22 -04:00
committed by GitHub
parent 51c62fafe5
commit 6fcb3a62b1
6 changed files with 221 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/vue/src/ionic-vue.ts
View File

@ -1,7 +1,6 @@
import { App, Plugin } from 'vue';
import { IonicConfig, setupConfig } from '@ionic/core';
import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
import { needsKebabCase } from './utils';
/**
* We need to make sure that the web component fires an event
@ -9,31 +8,22 @@ import { needsKebabCase } from './utils';
* 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 getHelperFunctions = (needsKebabCase: boolean = true) => {
const conversionFn = (needsKebabCase) ? toKebabCase : toLowerCase;
const getHelperFunctions = () => {
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)
ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(toKebabCase(eventName), cb, opts),
rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(toKebabCase(eventName), cb, opts),
ce: (eventName: string, opts: any) => new CustomEvent(toKebabCase(eventName), opts)
};
};
export const IonicVue: Plugin = {
async install(app: App, config: IonicConfig = {}) {
async install(_: App, config: IonicConfig = {}) {
if (typeof (window as any) !== 'undefined') {
const { ael, rel, ce } = getHelperFunctions(needsKebabCase(app.version));
const { ael, rel, ce } = getHelperFunctions();
setupConfig({
...config,
_ael: ael,