@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/navigation/Tabs.d.ts

@@ -0,0 +1,208 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 标签的排列方向 */
+export interface TabsOrientations {
+    /** 横排（默认），左右键切换 */
+    horizontal: unknown;
+    /** 竖排（标签在左侧），上下键切换 */
+    vertical: unknown;
+}
+/** 焦点移动时是否同时切换 */
+export interface TabsActivations {
+    /** 焦点移到哪个标签就显示哪个面板（默认）：面板内容轻量时用 */
+    automatic: unknown;
+    /** 方向键只移动焦点，按 Enter / 空格才切换：切换面板代价大（要请求数据）时用 */
+    manual: unknown;
+}
+/** 标签的样式 */
+export interface TabsVariants {
+    /** 下划线（默认）：当前标签下方一条品牌色的线 */
+    line: unknown;
+    /** 浅色底：当前标签有浅色底，像分段控件 */
+    soft: unknown;
+}
+/** Tabs 的外观选项；可以用 createUi / Provider 的 defaults.Tabs 统一改默认值 */
+export interface TabsOptions {
+    /** 样式，默认 line */
+    variant?: keyof TabsVariants;
+    /** 字号档位，不写时继承 */
+    size?: TextSize;
+}
+/** Tabs 交给 TabList、Tab、TabPanel 的状态 */
+export interface TabsState {
+    /** 当前标签的值 */
+    readonly value: string | undefined;
+    /** 横排或竖排 */
+    readonly orientation: keyof TabsOrientations;
+    /** 方向键移动焦点时是否同时切换 */
+    readonly activation: keyof TabsActivations;
+    /** 样式 */
+    readonly variant: keyof TabsVariants;
+    /** 面板第一次显示时才渲染 */
+    readonly lazy: boolean;
+    /** 波纹；不写时沿用配置 */
+    readonly ripple: boolean | undefined;
+    /** 切换到某个标签 */
+    select(value: string): void;
+    /** 标签与面板的 id，互相引用 */
+    id(part: 'tab' | 'panel', value: string): string;
+    /**
+     * 登记标签（按渲染顺序）与它的文字，没有选中值时选第一个；返回注销函数
+     * （参数是注销时各标签显示的顺序，关掉当前标签时按它选旁边的）
+     */
+    register(value: string, label: () => string): (order?: readonly string[]) => void;
+    /** 标签的文字（“全部标签页”菜单用） */
+    label(value: string): string;
+    /** 登记面板；返回注销函数 */
+    registerPanel(value: string): () => void;
+    /** 这个标签有没有对应的面板：只当导航用的标签（没有 TabPanel）不写 aria-controls */
+    hasPanel(value: string): boolean;
+    /** 登记了的标签，按渲染顺序 */
+    readonly values: readonly string[];
+    /** 正在拖动的标签 */
+    readonly dragging: string | undefined;
+    /** 开始、结束拖动 */
+    setDragging(value: string | undefined): void;
+    /** 关闭了有焦点的标签：等选中的标签换好之后，把焦点交给它 */
+    refocus(): void;
+}
+/** Tabs 的上下文：自定义的标签或面板可以 inject 它 */
+export declare const TabsContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<TabsState>;
+/** 未声明的属性落到外层 div 上 */
+export interface TabsProps extends PartProps<'div'>, TabsOptions {
+    /** 当前标签的 value：父级写 _value={x}；不写时默认第一个标签 */
+    _value?: string;
+    /** 方向，默认 horizontal */
+    orientation?: keyof TabsOrientations;
+    /** 焦点移动时是否同时切换，默认 automatic */
+    activation?: keyof TabsActivations;
+    /** 面板第一次显示时才渲染，之后切走也保留（面板内容重时用） */
+    lazy?: boolean;
+    /** 标签按下时的波纹；不写时沿用全局配置 */
+    ripple?: boolean;
+    children?: VNodeChild;
+}
+/** Tabs 的样式：root、vertical */
+export declare const tabsStyles: Readonly<{
+    root: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** 标签页的状态容器：管理当前值，并把它交给 TabList、Tab、TabPanel */
+export declare const Tabs: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabsProps>;
+/** 角色、方向由组件管理 */
+export type TabListManaged = 'role' | 'aria-orientation';
+/** 未声明的属性落到 role="tablist" 的 div 上；aria-label 是这组标签的名称 */
+export interface TabListProps extends PartProps<'div', TabListManaged> {
+    /** 到两端后是否从另一端继续，默认 true */
+    loop?: boolean;
+    /** 列表末尾的“新建标签页”按钮：点了调用 */
+    onAdd?: () => void;
+    /**
+     * 拖动标签（或在标签上按 Alt + ←→）改变顺序：参数是新的顺序（各标签的 value），使用方按它重排；
+     * 不写时不能拖
+     */
+    onReorder?: (values: string[]) => void;
+    /** 标签栏右边“全部标签页”的菜单（标签多、放不下时一眼找到并切过去） */
+    showAllMenu?: boolean;
+    /** line 样式的下划线指示条的部件属性 */
+    propsIndicator?: PartProps<'span'>;
+    /** 横排时包着标签列表与右边按钮的那一层的部件属性 */
+    propsBar?: PartProps<'div'>;
+    /** “新建标签页”按钮的部件属性 */
+    propsAdd?: Partial<IconButtonProps>;
+    children?: VNodeChild;
+}
+/** TabList 的样式：bar、barLine、root、scrollable、line、lineVertical、soft、softVertical、indicator、indicatorVertical */
+export declare const tabListStyles: Readonly<{
+    bar: css.CompiledStyles;
+    barLine: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+    indicatorVertical: css.CompiledStyles;
+    line: css.CompiledStyles;
+    lineVertical: css.CompiledStyles;
+    root: css.CompiledStyles;
+    scrollable: css.CompiledStyles;
+    soft: css.CompiledStyles;
+    softVertical: css.CompiledStyles;
+}>;
+/** 标签列表（role="tablist"）：方向键在标签之间移动；横排放不下时有滚动按钮，可以拖动排序、新建 */
+export declare const TabList: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabListProps>;
+/** 角色、选中、关联与可聚焦由组件管理 */
+export type TabManaged = 'role' | 'aria-selected' | 'aria-controls' | 'id' | 'tabindex' | 'disabled';
+/** 未声明的属性落到 role="tab" 的 button 上 */
+export interface TabProps extends PartProps<'button', TabManaged> {
+    /** 这个标签的值，与对应 TabPanel 的 value 相同 */
+    value: string;
+    /** 不可用：方向键跳过它 */
+    disabled?: boolean;
+    /**
+     * 可以关闭：标签末尾有关闭按钮，标签上按 Delete、鼠标中键点也关闭。使用方移除这个标签；
+     * 关掉的是当前标签时 Tabs 选它后面（没有时前面）的一个，焦点也跟过去
+     */
+    onClose?: () => void;
+    /** 关闭按钮的部件属性 */
+    propsClose?: Partial<IconButtonProps>;
+    children?: VNodeChild;
+}
+/** Tabs 的样式：root、hover、line、lineVertical、lineActive、soft 等 */
+/**
+ * 标签的配方：状态（选中、禁用、拖动中）由 DOM 上的 aria-selected、disabled、data-dragging 决定，
+ * 样式、方向、可关闭是档位
+ */
+export declare const tabRecipe: css.Recipe<"close" | "closeWrapper" | "root", {
+    readonly variant: {
+        readonly line: {
+            readonly root: {
+                readonly marginBottom: `calc(-1 * ${string})`;
+                readonly borderBottomWidth: "_sm";
+                readonly borderBottomStyle: "solid";
+                readonly borderBottomColor: "transparent";
+            };
+        };
+        readonly soft: {
+            readonly root: {
+                readonly backgroundColor: {
+                    readonly default: "transparent";
+                    readonly _selected: "_surface";
+                };
+                readonly boxShadow: {
+                    readonly default: null;
+                    readonly _selected: "_xs";
+                };
+            };
+        };
+    };
+    readonly orientation: {
+        horizontal: {};
+        vertical: {};
+    };
+    readonly closable: {
+        readonly true: {
+            readonly root: {
+                readonly gridArea: "1 / 1";
+                readonly paddingInlineEnd: `calc(${string} + 1.25em)`;
+            };
+        };
+    };
+}>;
+/** 标签的部件（createUi / Provider 的 styles.Tab 按它定制） */
+export type TabPart = (typeof tabRecipe.parts)[number];
+/** 标签（role="tab" 的 button） */
+export declare const Tab: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabProps>;
+/** 角色、关联与显示由组件管理 */
+export type TabPanelManaged = 'role' | 'id' | 'aria-labelledby' | 'hidden';
+/** 未声明的属性落到 role="tabpanel" 的 div 上 */
+export interface TabPanelProps extends PartProps<'div', TabPanelManaged> {
+    /** 对应标签的 value */
+    value: string;
+    children?: VNodeChild;
+}
+/** Tabs 的样式：root */
+export declare const tabPanelStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 标签面板（role="tabpanel"）：只显示当前标签的那一个 */
+export declare const TabPanel: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabPanelProps>;