vue3-tabor
Version:
Vue 3 routing tabs with keepAlive support, browser-like tab navigation for Vue applications
550 lines (548 loc) • 22.8 kB
TypeScript
import { OpenProps, Tab, TabGetter, TabId, ToOptions } from '../types';
import { VNode } from 'vue';
import { RouteLocationNormalizedLoaded, RouteLocationRaw, Router } from 'vue-router';
export declare const TABOR_STORE_KEY: symbol;
interface TabStoreOptions {
maxCache?: number;
}
/**
* create tab store
* @param router
* @param options
* @returns Tabor Store
*/
export declare const createTaborStore: (router: Router, options?: TabStoreOptions) => {
$router: Router;
state: {
tabs: {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
}[];
activeTab?: {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
shouldClose: boolean;
};
createTab: (router: import('vue-router').RouteLocationNormalized) => Tab | undefined;
indexOf: (tabId: TabId) => number;
find: (tabId: TabId) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
getTabByFullpath: (fullPath: string) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
getTabIdByRoute: (route: RouteLocationNormalizedLoaded) => string | undefined;
setActive: (tab?: Tab) => Tab | undefined;
addTab: (tab: Tab, options?: {
setActive?: boolean;
}) => number;
removeTabByIndex: (index: number) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
removeTabById: (tabId: TabId) => {
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
routerPush: (to: RouteLocationRaw) => Promise<void | import('vue-router').NavigationFailure | undefined>;
routerReplace: (to: RouteLocationRaw) => Promise<void | import('vue-router').NavigationFailure | undefined>;
openTabById: (tabId: TabId) => Promise<void | import('vue-router').NavigationFailure | undefined> | undefined;
openNearTab: (removedTab: {
index: number;
}) => Promise<void>;
remove: (item: {
id?: TabId;
fullPath?: string;
}) => {
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
refresh: (tabId?: TabId) => undefined;
clear: (this: any) => void;
getRemoveItem: (item?: TabGetter) => {
id?: TabId;
fullPath?: string;
} | undefined;
setShouldClose: (val: boolean) => void;
currentTab: import('vue').ComputedRef<{
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined>;
currentTabId: import('vue').ComputedRef<string | undefined>;
open: (to: RouteLocationRaw, options?: OpenProps) => Promise<void | import('vue-router').NavigationFailure>;
close: (item?: TabGetter, toOptions?: ToOptions) => Promise<{
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined>;
closeOthers: (tabId?: TabId) => void;
has: (tabId?: TabId) => boolean;
retrieveOrCacheComponent: (Component: VNode) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}> | undefined;
cache: {
state: {
keySet: Set<string> & Omit<Set<string>, keyof Set<any>>;
keyToWrapper: Map<string, {
vnode: VNode;
lastAccessed: number;
}> & Omit<Map<string, {
vnode: VNode;
lastAccessed: number;
}>, keyof Map<any, any>>;
componentMap: WeakMap<{
vnode: VNode;
lastAccessed: number;
}, VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}>> & Omit<WeakMap<{
vnode: VNode;
lastAccessed: number;
}, VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}>>, keyof WeakMap<any, any>>;
refreshing: boolean;
activeKey: string | undefined;
};
keys: import('vue').ComputedRef<string[]>;
setActiveKey: (key: string | undefined) => void;
add: (key: string) => void;
has: (key: string) => boolean;
hasComponent: (key: string) => boolean;
getComponent: (key: string) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}> | undefined;
addComponent: (key: string, vNode: VNode) => void;
remove: (key: string) => void;
reset: () => void;
refresh: (key: string) => Promise<void>;
cleanup: () => void;
};
iframeTabs: import('vue').ComputedRef<{
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
}[]>;
};
/**
* Tabor Store
*/
export type TaborStore = ReturnType<typeof createTaborStore>;
/**
* initialize tabor store
* @param router
* @param options
* @returns Tabor Store
*/
export declare const initTaborStore: (router: Router, options?: TabStoreOptions) => {
$router: Router;
state: {
tabs: {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
}[];
activeTab?: {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
shouldClose: boolean;
};
createTab: (router: import('vue-router').RouteLocationNormalized) => Tab | undefined;
indexOf: (tabId: TabId) => number;
find: (tabId: TabId) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
getTabByFullpath: (fullPath: string) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
getTabIdByRoute: (route: RouteLocationNormalizedLoaded) => string | undefined;
setActive: (tab?: Tab) => Tab | undefined;
addTab: (tab: Tab, options?: {
setActive?: boolean;
}) => number;
removeTabByIndex: (index: number) => {
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
removeTabById: (tabId: TabId) => {
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
routerPush: (to: RouteLocationRaw) => Promise<void | import('vue-router').NavigationFailure | undefined>;
routerReplace: (to: RouteLocationRaw) => Promise<void | import('vue-router').NavigationFailure | undefined>;
openTabById: (tabId: TabId) => Promise<void | import('vue-router').NavigationFailure | undefined> | undefined;
openNearTab: (removedTab: {
index: number;
}) => Promise<void>;
remove: (item: {
id?: TabId;
fullPath?: string;
}) => {
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined;
refresh: (tabId?: TabId) => undefined;
clear: (this: any) => void;
getRemoveItem: (item?: TabGetter) => {
id?: TabId;
fullPath?: string;
} | undefined;
setShouldClose: (val: boolean) => void;
currentTab: import('vue').ComputedRef<{
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined>;
currentTabId: import('vue').ComputedRef<string | undefined>;
open: (to: RouteLocationRaw, options?: OpenProps) => Promise<void | import('vue-router').NavigationFailure>;
close: (item?: TabGetter, toOptions?: ToOptions) => Promise<{
index: number;
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
} | undefined>;
closeOthers: (tabId?: TabId) => void;
has: (tabId?: TabId) => boolean;
retrieveOrCacheComponent: (Component: VNode) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}> | undefined;
cache: {
state: {
keySet: Set<string> & Omit<Set<string>, keyof Set<any>>;
keyToWrapper: Map<string, {
vnode: VNode;
lastAccessed: number;
}> & Omit<Map<string, {
vnode: VNode;
lastAccessed: number;
}>, keyof Map<any, any>>;
componentMap: WeakMap<{
vnode: VNode;
lastAccessed: number;
}, VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}>> & Omit<WeakMap<{
vnode: VNode;
lastAccessed: number;
}, VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}>>, keyof WeakMap<any, any>>;
refreshing: boolean;
activeKey: string | undefined;
};
keys: import('vue').ComputedRef<string[]>;
setActiveKey: (key: string | undefined) => void;
add: (key: string) => void;
has: (key: string) => boolean;
hasComponent: (key: string) => boolean;
getComponent: (key: string) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
[key: string]: any;
}> | undefined;
addComponent: (key: string, vNode: VNode) => void;
remove: (key: string) => void;
reset: () => void;
refresh: (key: string) => Promise<void>;
cleanup: () => void;
};
iframeTabs: import('vue').ComputedRef<{
id: string;
name: string | symbol | ((route: import('vue-router').RouteLocationNormalized) => string);
icon?: string | undefined;
keepAlive?: boolean | undefined;
fullPath: string;
allowClose?: boolean | undefined;
hideClose?: boolean | ((tab: Tab) => boolean) | undefined;
iframeAttributes?: {
name?: string | undefined;
src?: string | undefined;
width?: (string | number) | undefined;
height?: (string | number) | undefined;
loading?: "eager" | "lazy" | undefined;
marginheight?: (string | number) | undefined;
} | undefined;
routeName?: string | undefined;
}[]>;
};
/**
* provide tabor store in setup
* @param store
*/
export declare const provideTaborStore: (store: TaborStore) => void;
/**
* use tabor store in setup
* @returns Tabor Store
*/
export declare const useTabor: () => TaborStore;
export {};