vue-app-sdk/dist/plugins/Tabs/Tabs.d.ts

Vue App SDK.

import { Awaitable, MaybeNullish } from '@rhao/types-base';
import { MaybeRefOrGetter } from 'vue';
import { AppSDKInternalInstance, Plugin, PluginID, StorageOptions } from '../..';
import { RouteLocationNormalized } from 'vue-router';
import { PageMetadata } from '../Page';
import { TabPage } from './interface';
export type TabsRawPage = PageMetadata;
export declare enum TabsReplaceResult {
    /**
     * 替换旧标签页为新标签页
     */
    replace = "replace",
    /**
     * 打开新标签页
     */
    open = "open",
    /**
     * 取消操作
     */
    cancel = "cancel"
}
export interface TabsOptions extends StorageOptions {
    /**
     * 相同路由不同参数时处理标签页的模式
     * - `normal`: 普通模式，会打开相同路由不同参数的标签页
     * - `replace`: 替换模式，会先替换旧标签页为新标签页并激活
     * @default 'normal'
     */
    mode?: 'normal' | 'replace';
    /**
     * 是否缓存标签页，可单独设置 `PageMetadata.isKeepAlive` 缓存指定页面
     *
     * ***注意：该功能依赖 `KeepAlive` 插件实现！***
     *
     * @default true
     */
    keepAlive?: boolean;
    /**
     * 是否在路由导航时自动收集标签页，设为 `true` 时将使用内置收集器进行收集
     * @default true
     */
    autoCollect?: MaybeRefOrGetter<boolean>;
    /**
     * 页面元数据转为标签页属性
     * @param data 页面元数据
     */
    rawPageToTabPage?: (data: TabsRawPage) => Omit<TabPage, 'id' | 'fullPath' | 'componentName'>;
    /**
     * 是否为有效的页面元数据，指可以被转为标签页的元数据
     * @param data 页面元数据
     * @example
     * ```ts
     * const page: PageMetadata = {
     *   // ...
     *   isFull: true, // 全屏页面，不应被添加到标签页列表
     * }
     *
     * createTabs({
     *   // 排除全屏页面元数据
     *   isValidRawPage: (data) => !data.isFull
     * })
     * ```
     */
    isValidRawPage?: (data: TabsRawPage) => boolean;
    /**
     * 根据页面元数据添加标签页前的回调处理，若返回假值则取消添加
     */
    beforeAdd?: (page: TabsRawPage) => Awaitable<void | boolean>;
    /**
     * `mode` 设为 `replace` 时，替换标签页前的回调处理，根据返回结果进行处理
     */
    beforeReplace?: (newTabPage: TabPage, oldTabPage: TabPage) => Awaitable<TabsReplaceResult>;
    /**
     * 移除标签页前的回调处理，若返回假值则取消移除
     */
    beforeRemove?: (tabPage: TabPage) => Awaitable<void | boolean>;
    /**
     * 处理激活标签页为空的情况
     */
    processEmptyActive?: () => void;
}
export type RouteForGenerableID = Pick<RouteLocationNormalized, 'fullPath' | 'meta'>;
export type TabPageForGenerableID = Pick<TabPage, 'pageId' | 'fullPath' | 'isUniq'>;
export type ResolvableIdType = MaybeNullish<string | number | TabPage | RouteForGenerableID>;
/**
 * 标签栏方向侧
 */
export type TabsSideType = 'left' | 'right';
/**
 * Tabs Plugin ID
 */
export declare const TABS_ID: PluginID<Tabs>;
declare const unsafeUpdatableTabPageProps: readonly ["isAffix", "isUniq", "isKeepAlive", "title", "icon", "fullPath", "fullPath"];
/**
 * 标签页管理插件，依赖于 `Page` 和 `KeepAlive` 插件
 *
 * ***注意：配合 `KeepAlive` 时会接管对缓存的处理并强制禁用自动模式！***
 */
export declare class Tabs implements Plugin {
    /**
     * 配置项
     */
    options: TabsOptions;
    constructor(
    /**
     * 配置项
     */
    options?: TabsOptions);
    id: PluginID<Tabs>;
    /**
     * AppSDK 实例
     */
    private _sdk;
    /**
     * 页面元数据转为标签页属性
     * @readonly
     */
    get rawPageToTabPage(): (data: TabsRawPage) => Omit<TabPage, "id" | "fullPath" | "componentName">;
    /**
     * 是否为有效的页面元数据
     * @readonly
     */
    get isValidRawPage(): (data: TabsRawPage) => boolean;
    /**
     * 持久化的状态
     */
    private _state;
    /**
     * 设置标签页列表
     */
    set pages(value: TabPage[]);
    /**
     * 标签页列表
     */
    get pages(): TabPage[];
    /**
     * 设置激活的标签页 ID
     */
    set active(value: string);
    /**
     * 激活的标签页 ID
     */
    get active(): string;
    /**
     * 激活的标签页
     * @readonly
     */
    get activeTabPage(): TabPage | undefined;
    /**
     * 是否自动模式
     */
    private _isAuto;
    /**
     * 是否自动模式
     * @readonly
     */
    get isAuto(): boolean;
    /**
     * KeepAlive 插件
     */
    private get _keepAlive();
    /**
     * 路由列表
     */
    private get _routes();
    /**
     * 判断是否需要缓存标签页
     */
    isKeepAlive(tagPage: {
        isKeepAlive?: boolean;
    }): boolean;
    /**
     * 生成标签页 ID
     */
    generateID(data: RouteForGenerableID | TabPageForGenerableID): string;
    /**
     * 切换自动模式
     * @param value 状态值
     */
    toggleAuto: (value?: boolean) => boolean;
    /**
     * 启用自动模式
     */
    enableAuto: () => boolean;
    /**
     * 禁用自动模式
     */
    disableAuto: () => boolean;
    /**
     * 更新 KeepAlive 缓存
     */
    updateKeepAlive: () => Promise<void>;
    /**
     * 设置标签页列表
     * @param pages 标签页列表
     */
    setTabPages: (pages: TabPage[]) => void;
    /**
     * 根据页面元数据获取 `fullPath`
     */
    private _resolveFullPath;
    /**
     * 根据页面元数据列表设置固定标签页列表
     * @param data 页面元数据列表
     */
    setAffixTabPagesByRawPages: (data: TabsRawPage[]) => void;
    /**
     * 更新标签页
     * @param target 可获取标签页 ID 的值
     * @param data 标签页属性
     */
    updateTabPage: (target: ResolvableIdType, data: Partial<Pick<TabPage, (typeof unsafeUpdatableTabPageProps)[number]>>) => void;
    /**
     * 更新标签页的 `fullPath` 属性
     * @param data 路由数据
     * @param data.query `route.query`
     * @param data.params `route.params`
     * @param source 可获取标签页 ID 的值
     */
    updateFullPath: (data?: {
        query?: Record<string, any>;
        params?: Record<string, any>;
    }, source?: ResolvableIdType) => void;
    /**
     * 根据页面元数据更新标签页列表
     * @param data 页面元数据列表或映射
     */
    updateTabPagesByRawPages: (data: TabsRawPage[] | Record<string, TabsRawPage | undefined>) => void;
    /**
     * 获取标签页 ID
     * @param value 可获取标签页 ID 的值
     * @returns 标签页 ID
     */
    resolveId: (value: ResolvableIdType) => string;
    /**
     * 仅设置当前激活的标签页 ID
     * @param value 可获取标签页 ID 的值
     */
    private _setActive;
    /**
     * 设置当前激活的标签页 ID
     * @param value 可获取标签页 ID 的值
     */
    setActive: (value: ResolvableIdType) => void;
    /**
     * 根据路由创建标签页
     * @param route 路由
     * @returns 标签页
     */
    createTabPage: (route: RouteForGenerableID) => TabPage;
    /**
     * 是否可以移除指定标签页
     * @param source 可获取标签页 ID 的值
     */
    canRemove: (source?: ResolvableIdType) => boolean;
    /**
     * 是否可以移除非指定的其他非固定标签页
     * @param source 可获取标签页 ID 的值
     */
    canRemoveOther: (source?: ResolvableIdType) => boolean;
    /**
     * 是否可以移除指定标签页的指定方向侧非固定标签页
     * @param side 方向侧
     * @param source 可获取标签页 ID 的值
     */
    canRemoveSide: (side: TabsSideType, source?: ResolvableIdType) => boolean;
    /**
     * 是否可以移除全部非固定标签页
     */
    canRemoveAll: () => boolean;
    /**
     * 尝试移除标签页列表
     * @param pages 标签页列表
     */
    tryRemoveTabPages: (pages: TabPage[]) => Promise<boolean>;
    /**
     * 移除激活的标签页
     */
    removeActive: () => Promise<boolean>;
    /**
     * 移除指定标签页
     * @param value 可获取标签页 ID 的值
     */
    removeOne: (value: ResolvableIdType) => Promise<boolean>;
    /**
     * 移除指定标签页的指定方向侧非固定标签页
     * @param side 指定方向侧
     * @param source 可获取标签页 ID 的值
     */
    removeSide: (side: TabsSideType, source?: ResolvableIdType) => Promise<void>;
    /**
     * 移除非指定的其他非固定标签页
     * @param source 可获取标签页 ID 的值
     */
    removeOther: (source?: ResolvableIdType) => Promise<void>;
    /**
     * 移除全部非固定标签页
     * @param force 是否强制移除，将不会触发 `beforeRemove` 回调
     */
    removeAll: (force?: boolean) => Promise<void>;
    /**
     * 匹配相同标签页
     * @param tabPage 标签页
     */
    matchSameTabPage: (tabPage: TabPage) => {
        /**
         * 模糊匹配结果（同 `pageId`）
         */
        fuzzy: TabPage[];
        /**
         * 精确匹配（同 `pageId`、`fullPath`）
         */
        exact: TabPage | undefined;
    };
    /**
     * 根据路由添加标签页
     * @param route 路由
     */
    addOne: (route: RouteForGenerableID & {
        matched?: RouteLocationNormalized["matched"];
    }) => Promise<void>;
    install: (sdk: AppSDKInternalInstance) => () => void;
}
export {};