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

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;
};