@qin_sunrise/tab/dist/index.d.ts

A lightweight tab management package based on zustand state management for React applications

import * as zustand_middleware from 'zustand/middleware';
import * as zustand from 'zustand';
import * as react from 'react';

interface Tab {
    /** The tab fixed index */
    fixedIndex?: number | null;
    /** The tab route full path */
    fullPath: string;
    /** I18n key */
    i18nKey?: string | null;
    /**
     * Tab icon
     *
     * Iconify icon
     */
    icon?: string;
    /** The tab id */
    id: string;
    /** is keepAlive */
    keepAlive: boolean;
    /** The tab label */
    label: string;
    /**
     * Tab local icon
     *
     * Local icon
     */
    localIcon?: string;
    /**
     * The new tab label
     *
     * If set, the tab label will be replaced by this value
     */
    newLabel?: string;
    /**
     * The old tab label
     *
     * when reset the tab label, the tab label will be replaced by this value
     */
    oldLabel?: string | null;
    /** The tab route key */
    routeKey: string;
    /** The tab route path */
    routePath: string;
}
interface TabState {
    /** Current active tab id */
    activeTabId: string;
    /** Current active first level menu key */
    activeFirstLevelMenuKey: string;
    /** Tabs array */
    tabs: Tab[];
    /** Remove cache key */
    removeCacheKey: string[] | null;
}
interface TabActions {
    /** Add a new tab */
    addTab: (tab: Tab) => void;
    /** Update tab at specific index */
    updateTab: (index: number, tab: Tab) => void;
    /** Set active tab id */
    setActiveTabId: (tabId: string) => void;
    /** Set active first level menu key */
    setActiveFirstLevelMenuKey: (key: string) => void;
    /** Set tabs array */
    setTabs: (tabs: Tab[]) => void;
    /** Change tab label */
    changeTabLabel: (index: number, label?: string) => void;
    /** Remove tab by id */
    removeTabById: (tabId: string) => void;
    /** Clear all tabs except fixed ones */
    clearAllTabs: () => void;
    /** Clear left tabs */
    clearLeftTabs: (tabId: string) => void;
    /** Clear right tabs */
    clearRightTabs: (tabId: string) => void;
    /** Clear other tabs */
    clearOtherTabs: (tabId: string) => void;
    /** Set remove cache key */
    setRemoveCacheKey: (keys: string[] | null) => void;
}
interface TabStore extends TabState, TabActions {
}
interface Route {
    fullPath: string;
    pathname: string;
    id: string;
    handle?: {
        title?: string;
        i18nKey?: string;
        icon?: string;
        localIcon?: string;
        keepAlive?: boolean;
        multiTab?: boolean;
        fixedIndexInTab?: number;
    };
}
interface TabConfig {
    /** Whether to cache tabs */
    cache?: boolean;
    /** Storage key for caching */
    storageKey?: string;
    /** Home route path */
    homePath?: string;
}

declare function createTabStore(config?: TabConfig): zustand.UseBoundStore<Omit<Omit<zustand.StoreApi<TabStore>, "setState"> & {
    setState<A extends string | {
        type: string;
    }>(partial: TabStore | Partial<TabStore> | ((state: TabStore) => TabStore | Partial<TabStore>), replace?: boolean | undefined, action?: A | undefined): void;
}, "persist"> & {
    persist: {
        setOptions: (options: Partial<zustand_middleware.PersistOptions<TabStore, any>>) => void;
        clearStorage: () => void;
        rehydrate: () => Promise<void> | void;
        hasHydrated: () => boolean;
        onHydrate: (fn: (state: TabStore) => void) => () => void;
        onFinishHydration: (fn: (state: TabStore) => void) => () => void;
        getOptions: () => Partial<zustand_middleware.PersistOptions<TabStore, any>>;
    };
}>;

/**
 * Get route icons from route
 */
declare function getRouteIcons(route: Route): {
    icon: string | undefined;
    localIcon: string | undefined;
};
/**
 * Get tab by route
 */
declare function getTabByRoute(route: Route, homePath?: string): Tab;
/**
 * Check if tab is in tabs array
 */
declare function isTabInTabs(tabId: string, tabs: Tab[]): boolean;
/**
 * Get fixed tabs
 */
declare function getFixedTabs(tabs: Tab[]): Tab[];
/**
 * Get tab by id
 */
declare function getTabById(tabId: string, tabs: Tab[]): Tab | undefined;
/**
 * Get tab index by id
 */
declare function getTabIndexById(tabId: string, tabs: Tab[]): number;
/**
 * Check if tab is retain (fixed)
 */
declare function isTabRetain(tabId: string, tabs: Tab[]): boolean;
/**
 * Get active first level menu key from route
 */
declare function getActiveFirstLevelMenuKey(route: Route): string;
/**
 * Storage utilities
 */
declare const storage: {
    get: (key: string) => any;
    set: (key: string, value: any) => void;
    remove: (key: string) => void;
};

/**
 * Get or create the global tab store
 */
declare function getTabStore(config?: TabConfig): ReturnType<typeof createTabStore>;
/**
 * Hook to use tab store
 */
declare function useTabStore(config?: TabConfig): zustand.UseBoundStore<Omit<Omit<zustand.StoreApi<TabStore>, "setState"> & {
    setState<A extends string | {
        type: string;
    }>(partial: TabStore | Partial<TabStore> | ((state: TabStore) => TabStore | Partial<TabStore>), replace?: boolean | undefined, action?: A | undefined): void;
}, "persist"> & {
    persist: {
        setOptions: (options: Partial<zustand_middleware.PersistOptions<TabStore, any>>) => void;
        clearStorage: () => void;
        rehydrate: () => Promise<void> | void;
        hasHydrated: () => boolean;
        onHydrate: (fn: (state: TabStore) => void) => () => void;
        onFinishHydration: (fn: (state: TabStore) => void) => () => void;
        getOptions: () => Partial<zustand_middleware.PersistOptions<TabStore, any>>;
    };
}>;
/**
 * Hook to get tabs from store
 */
declare function useTabs(): Tab[];
/**
 * Hook to get active tab id
 */
declare function useActiveTabId(): string;
/**
 * Hook to get active first level menu key
 */
declare function useActiveFirstLevelMenuKey(): string;
/**
 * Hook to get remove cache key
 */
declare function useRemoveCacheKey(): string[] | null;
/**
 * Hook to get tab actions
 */
declare function useTabActions(): {
    addTab: (tab: Tab) => void;
    updateTab: (index: number, tab: Tab) => void;
    setActiveTabId: (tabId: string) => void;
    setActiveFirstLevelMenuKey: (key: string) => void;
    setTabs: (tabs: Tab[]) => void;
    changeTabLabel: (index: number, label?: string) => void;
    removeTabById: (tabId: string) => void;
    clearAllTabs: () => void;
    clearLeftTabs: (tabId: string) => void;
    clearRightTabs: (tabId: string) => void;
    clearOtherTabs: (tabId: string) => void;
    setRemoveCacheKey: (keys: string[] | null) => void;
};
/**
 * Hook to manage tab operations with navigation
 */
declare function useTabManager(navigate?: (path: string) => void): {
    addTab: (route: Route) => void;
    switchRouteByTab: (tab: Route) => void;
    removeTabById: (tabId: string) => void;
    clearTabs: (excludes?: string[]) => void;
    clearLeftTabs: (tabId: string) => void;
    clearRightTabs: (tabId: string) => void;
    clearOtherTabs: (tabId: string) => void;
    clearAllTabs: () => void;
    isTabRetain: (tabId: string) => boolean;
    tabs: Tab[];
    activeTabId: string;
    navigate: ((path: string) => void) | undefined;
};
/**
 * Hook to cache tabs on beforeunload
 */
declare function useCacheTabs(): () => void;
/**
 * Hook to get tab scroll utilities
 */
declare function useTabScroll(): {
    tabRef: react.RefObject<HTMLDivElement | null>;
    bsWrapper: react.RefObject<HTMLDivElement | null>;
    setBsScroll: (scrollLeft: number) => void;
};

export { type Route, type Tab, type TabActions, type TabConfig, type TabState, type TabStore, createTabStore, createTabStore as default, getActiveFirstLevelMenuKey, getFixedTabs, getRouteIcons, getTabById, getTabByRoute, getTabIndexById, getTabStore, isTabInTabs, isTabRetain, storage, useActiveFirstLevelMenuKey, useActiveTabId, useCacheTabs, useRemoveCacheKey, useTabActions, useTabManager, useTabScroll, useTabStore, useTabs };