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

fix(vue): all ionic vue components can now use router link (#22743)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-01-07 15:52:06 -05:00
committed by GitHub
parent 9a02ec8402
commit 3d6ac1382e
5 changed files with 46 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/package-lock.json generated
View File

@ -17,7 +17,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "2.1.2",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "0.2.2",
"@stencil/vue-output-target": "0.2.3",
"@types/jest": "^26.0.10",
"@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1",
@ -1657,10 +1657,13 @@
"dev": true
},
"node_modules/@stencil/vue-output-target": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz",
"integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==",
"dev": true
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz",
"integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==",
"dev": true,
"peerDependencies": {
"@stencil/core": ">=1.8.0"
}
},
"node_modules/@stylelint/postcss-css-in-js": {
"version": "0.37.2",
@ -16387,9 +16390,9 @@
"dev": true
},
"@stencil/vue-output-target": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.2.tgz",
"integrity": "sha512-WBnN/8ggIVYgKbJOML1DVzjFnKv7RaQpTa+XNeY0r/EG6MbXlUjUC/4Cpkg5wQ94WNuPpphAR4oRWGsmiQDxPQ==",
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz",
"integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==",
"dev": true
},
"@stylelint/postcss-css-in-js": {

2
core/package.json
View File

@ -38,7 +38,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "2.1.2",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "0.2.2",
"@stencil/vue-output-target": "0.2.3",
"@types/jest": "^26.0.10",
"@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1",

7
core/stencil.config.ts
View File

@ -87,13 +87,6 @@ export const config: Config = {
'ion-app',
'ion-icon'
],
routerLinkComponents: [
'ion-card',
'ion-item',
'ion-button',
'ion-fab-button',
],
componentModels: [
{
elements: ['ion-checkbox', 'ion-toggle'],

25
packages/vue/src/proxies.ts
View File

@ -42,10 +42,7 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
'type',
'ionFocus',
'ionBlur'
],
{
"routerLinkComponent": true
});
]);
export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', [
@ -64,10 +61,7 @@ export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', [
'routerDirection',
'routerAnimation',
'target'
],
{
"routerLinkComponent": true
});
]);
export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content');
@ -195,10 +189,7 @@ export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', [
'vertical',
'edge',
'activated'
],
{
"routerLinkComponent": true
});
]);
export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', [
@ -218,10 +209,7 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
'closeIcon',
'ionFocus',
'ionBlur'
],
{
"routerLinkComponent": true
});
]);
export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', [
@ -324,10 +312,7 @@ export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', [
'routerDirection',
'target',
'type'
],
{
"routerLinkComponent": true
});
]);
export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', [

63
packages/vue/src/vue-component-lib/utils.ts
View File

@ -17,7 +17,6 @@ interface NavManager<T = any> {
interface ComponentOptions {
modelProp?: string;
modelUpdateEvent?: string;
routerLinkComponent?: boolean;
}
const getComponentClasses = (classes: unknown) => {
@ -41,7 +40,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
* integrations.
*/
export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
const { modelProp, modelUpdateEvent, routerLinkComponent } = componentOptions;
const { modelProp, modelUpdateEvent } = componentOptions;
/**
* Create a Vue component wrapper around a Web Component.
@ -60,24 +59,23 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
}
};
let handleClick: (ev: Event) => void;
if (routerLinkComponent) {
const currentInstance = getCurrentInstance();
const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
handleClick = (ev: Event) => {
const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
if (routerProps.length === 0) return;
const currentInstance = getCurrentInstance();
const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
const handleRouterLink = (ev: Event) => {
const { routerLink } = props as any;
if (!routerLink) return;
if (navManager !== undefined) {
let navigationPayload: any = { event: ev };
routerProps.forEach(prop => {
navigationPayload[prop] = (props as any)[prop];
});
navManager.navigate(navigationPayload);
} else {
console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
}
const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));
if (navManager !== undefined) {
let navigationPayload: any = { event: ev };
routerProps.forEach(prop => {
navigationPayload[prop] = (props as any)[prop];
});
navManager.navigate(navigationPayload);
} else {
console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
}
}
@ -86,24 +84,24 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
classes.add(value);
});
const oldClick = (props as any).onClick;
const handleClick = (ev: Event) => {
if (oldClick !== undefined) {
oldClick(ev);
}
if (!ev.defaultPrevented) {
handleRouterLink(ev);
}
}
let propsToAdd = {
...props,
ref: containerRef,
class: getElementClasses(containerRef, classes),
onClick: (routerLinkComponent) ? handleClick : (props as any).onClick,
onClick: handleClick,
onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
};
if ((props as any).onClick) {
const oldClick = (props as any).onClick;
propsToAdd.onClick = (ev: Event) => {
oldClick(ev);
if (!ev.defaultPrevented) {
handleClick(ev);
}
};
}
if (modelProp) {
propsToAdd = {
...propsToAdd,
@ -116,14 +114,11 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
});
Container.displayName = name;
Container.props = componentProps;
Container.props = [...componentProps, ROUTER_LINK_VALUE];
if (modelProp) {
Container.props.push(MODEL_VALUE);
Container.emits = [UPDATE_VALUE_EVENT];
}
if (routerLinkComponent) {
Container.props.push(ROUTER_LINK_VALUE);
}
return Container;
};