@iris-ui-kit/vue 0.1.0

package/dist/admin.d.cts

@@ -0,0 +1,376 @@
+import * as vue from 'vue';
+import { PropType, VNode, ComputedRef, MaybeRefOrGetter } from 'vue';
+import { NavNode, TabsNav, TabItem } from '@iris-ui-kit/core';
+export { NavNode, TabItem, TabsNav, TabsNavConfig, TabsNavState, createTabsNav, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, visibleNav } from '@iris-ui-kit/core';
+
+type IrisAdminLayoutMode = 'sidebar' | 'full-content';
+/**
+ * The CMS / admin shell — a Vben-style, router-agnostic, data-driven layout that
+ * composes IrisSidebarLayout + IrisHeaderLayout with the admin nav pieces. One
+ * `menus` tree drives the collapsible sidebar nav, the header breadcrumb, and
+ * (when a `tabs` store is passed) the multi-tab bar; `activeKey` is the current
+ * page (v-model). The host owns routing: react to `@select` / `update:activeKey`
+ * and render the page in the default slot (wrap it in `<KeepAlive>` keyed by
+ * `tabs.cacheKey` for Vben-style tab caching).
+ *
+ * Slots: `logo({ collapsed })`, `toolbar` (header end), default `({ activeKey })`,
+ * `footer`. Modes: `sidebar` (default) and `full-content` (chrome hidden).
+ */
+declare const IrisAdminLayout: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Normalized nav tree driving menu + breadcrumb. */
+    menus: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Active page key (v-model:activeKey). */
+    activeKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Sidebar collapsed (v-model:collapsed); undefined = uncontrolled. */
+    collapsed: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<IrisAdminLayoutMode>;
+        default: string;
+    };
+    /** Brand text shown next to the logo when expanded. */
+    appTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Optional shared tabs store; when present the tab bar is rendered. */
+    tabs: {
+        type: PropType<TabsNav>;
+        default: undefined;
+    };
+    showBreadcrumb: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sidebarWidth: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    collapsedWidth: {
+        type: PropType<number | string>;
+        default: number;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:activeKey': (_key: string) => true;
+    'update:collapsed': (_value: boolean) => true;
+    select: (_key: string, _node: NavNode) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Normalized nav tree driving menu + breadcrumb. */
+    menus: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Active page key (v-model:activeKey). */
+    activeKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Sidebar collapsed (v-model:collapsed); undefined = uncontrolled. */
+    collapsed: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<IrisAdminLayoutMode>;
+        default: string;
+    };
+    /** Brand text shown next to the logo when expanded. */
+    appTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Optional shared tabs store; when present the tab bar is rendered. */
+    tabs: {
+        type: PropType<TabsNav>;
+        default: undefined;
+    };
+    showBreadcrumb: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sidebarWidth: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    collapsedWidth: {
+        type: PropType<number | string>;
+        default: number;
+    };
+}>> & Readonly<{
+    onSelect?: ((_key: string, _node: NavNode) => any) | undefined;
+    "onUpdate:collapsed"?: ((_value: boolean) => any) | undefined;
+    "onUpdate:activeKey"?: ((_key: string) => any) | undefined;
+}>, {
+    mode: IrisAdminLayoutMode;
+    collapsed: boolean | undefined;
+    defaultCollapsed: boolean;
+    collapsedWidth: string | number;
+    activeKey: string;
+    tabs: TabsNav;
+    appTitle: string;
+    showBreadcrumb: boolean;
+    sidebarWidth: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Data-driven nested navigation menu — the sidebar nav of the admin shell.
+ * Renders a normalized `NavNode[]` tree as an accordion of expandable branches
+ * and selectable leaves; the active leaf and its ancestor branches are
+ * highlighted, and the active branch trail auto-expands. Router-agnostic: it
+ * takes `activeKey` + emits `select(key, node)`; the host owns navigation.
+ *
+ * `collapsed` switches to an icon-only rail (top-level items only); a branch
+ * click then jumps to its first leaf.
+ */
+declare const IrisNavMenu: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Normalized nav tree. */
+    items: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Key of the active leaf. */
+    activeKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Controlled expanded branch keys (v-model:expandedKeys). */
+    expandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Initial expanded keys when uncontrolled (else the active trail expands). */
+    defaultExpandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Icon-only rail (top-level items only). */
+    collapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    select: (_key: string, _node: NavNode) => true;
+    'update:expandedKeys': (_keys: string[]) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Normalized nav tree. */
+    items: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Key of the active leaf. */
+    activeKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Controlled expanded branch keys (v-model:expandedKeys). */
+    expandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Initial expanded keys when uncontrolled (else the active trail expands). */
+    defaultExpandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Icon-only rail (top-level items only). */
+    collapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSelect?: ((_key: string, _node: NavNode) => any) | undefined;
+    "onUpdate:expandedKeys"?: ((_keys: string[]) => any) | undefined;
+}>, {
+    collapsed: boolean;
+    activeKey: string;
+    expandedKeys: string[];
+    defaultExpandedKeys: string[];
+    ariaLabel: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Breadcrumb trail for the admin header, driven by a `NavNode[]` ancestor chain
+ * (typically `findNavPath(menus, activeKey)`). The last crumb is the current
+ * page (auto-marked `aria-current` by IrisBreadcrumb); earlier crumbs are
+ * clickable and emit `select(key, node)` so the host can navigate.
+ */
+declare const IrisAdminBreadcrumb: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Root→current ancestor chain. */
+    trail: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Show each node's icon before its title. */
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Hide the breadcrumb when the trail has a single crumb. */
+    hideSingle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    select: (_key: string, _node: NavNode) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Root→current ancestor chain. */
+    trail: {
+        type: PropType<NavNode[]>;
+        required: true;
+    };
+    /** Show each node's icon before its title. */
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Hide the breadcrumb when the trail has a single crumb. */
+    hideSingle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onSelect?: ((_key: string, _node: NavNode) => any) | undefined;
+}>, {
+    separator: string;
+    showIcon: boolean;
+    hideSingle: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Vben-style multi-tab bar over a shared {@link TabsNav} store. Each open page
+ * is a closable chip; clicking activates (`@change`), the × closes, and a
+ * trailing actions dropdown runs Refresh / Close / Close-others / Close-all on
+ * the active tab. The store owns the tab list + active key; the host watches it
+ * to sync routing + keep-alive.
+ *
+ * Keyboard (WAI-ARIA tablist, automatic activation): ←/→ move + activate the
+ * adjacent tab, Home/End jump to the first/last, Delete/Backspace closes the
+ * focused tab. Roving tabindex keeps a single tab stop.
+ */
+declare const IrisAdminTabs: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Shared tabs store (from `createTabsNav`). */
+    nav: {
+        type: PropType<TabsNav>;
+        required: true;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    change: (_key: string) => true;
+    close: (_key: string) => true;
+    refresh: (_key: string) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Shared tabs store (from `createTabsNav`). */
+    nav: {
+        type: PropType<TabsNav>;
+        required: true;
+    };
+}>> & Readonly<{
+    onChange?: ((_key: string) => any) | undefined;
+    onClose?: ((_key: string) => any) | undefined;
+    onRefresh?: ((_key: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface UseTabsNavReturn {
+    tabs: ComputedRef<TabItem[]>;
+    activeKey: ComputedRef<string | undefined>;
+    /** Keep-alive include-set (composite cache keys of all open tabs). */
+    cacheKeys: ComputedRef<string[]>;
+    open: TabsNav['open'];
+    activate: TabsNav['activate'];
+    close: TabsNav['close'];
+    closeOthers: TabsNav['closeOthers'];
+    closeAll: TabsNav['closeAll'];
+    closeLeft: TabsNav['closeLeft'];
+    closeRight: TabsNav['closeRight'];
+    refresh: TabsNav['refresh'];
+    setPinned: TabsNav['setPinned'];
+    cacheKey: TabsNav['cacheKey'];
+}
+/**
+ * Vue binding for a framework-agnostic {@link TabsNav} store. Pass a shared
+ * `createTabsNav()` instance (the host owns it so the tab bar and the keep-alive
+ * content can read the same state) and get reactive `tabs` / `activeKey` /
+ * `cacheKeys` plus the store's mutators.
+ *
+ * ```ts
+ * const nav = createTabsNav({ tabs: [{ key: 'home', title: 'Home', pinned: true }] })
+ * const { tabs, activeKey, open, close } = useTabsNav(nav)
+ * ```
+ */
+declare function useTabsNav(nav: TabsNav): UseTabsNavReturn;
+
+interface UseAdminShellConfig {
+    /** Normalized nav tree driving menu + breadcrumb. */
+    menus: MaybeRefOrGetter<NavNode[]>;
+    /** Active page key (controlled); undefined = uncontrolled. */
+    activeKey?: MaybeRefOrGetter<string | undefined>;
+    defaultActiveKey?: string;
+    onActiveKeyChange?: (key: string) => void;
+    /** Fired whenever a nav node / tab becomes active, with the resolved leaf node. */
+    onSelect?: (key: string, node: NavNode) => void;
+    /** Optional shared tabs store; the shell opens/reconciles tabs through it. */
+    tabs?: TabsNav;
+}
+interface UseAdminShellReturn {
+    /** Current active leaf key ('' when none). */
+    activeKey: ComputedRef<string>;
+    /** Select a nav node: a branch redirects to its first leaf, opens its tab. */
+    navigate: (node: NavNode) => void;
+    /** Reconcile when the active TAB changed (e.g. a close picked a neighbor). */
+    syncFromTab: (key: string) => void;
+    /** Ancestor→node breadcrumb trail of the active key. */
+    breadcrumb: ComputedRef<NavNode[]>;
+}
+/**
+ * Vue binding for the framework-agnostic {@link createAdminShell} controller —
+ * the menu→tab→active-key wiring that every AdminLayout used to re-implement
+ * byte-for-byte. The composable owns the controlled/uncontrolled `activeKey`
+ * reconciliation (idiomatic to Vue) and delegates navigate / syncFromTab /
+ * branch-resolution / breadcrumb to the shared core shell.
+ *
+ * Controlled mode renders from the prop directly (no flicker); a watcher keeps
+ * the shell's guard-base synced to the prop so the active-change callback fires
+ * with the same semantics as before.
+ */
+declare function useAdminShell(config: UseAdminShellConfig): UseAdminShellReturn;
+
+export { IrisAdminBreadcrumb, IrisAdminLayout, type IrisAdminLayoutMode, IrisAdminTabs, IrisNavMenu, type UseAdminShellConfig, type UseAdminShellReturn, type UseTabsNavReturn, useAdminShell, useTabsNav };