x-next 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -4,6 +4,27 @@
 
 ## [Unreleased]
 
+## [1.15.0] - 2026-10-12
+
+### 新增
+
+- 新增 `TreeSelect` 树选择器：单选 / `multiple` 多选 / `treeCheckable` 勾选模式，父子联动与半选、`checkedStrategy`（`all` / `parent` / `child`，默认 `parent`）、`treeCheckStrictly` 严格模式、`labelInValue` 对象值与缺失值回显（`fallbackOption`）。
+- 搜索按标题过滤并保留命中祖先、内置命中高亮，`filterTreeNode` 支持自定义方法或关闭；`search` 事件按 `searchDelay` 去抖。
+- `loadMore` 异步加载子节点、`defaultExpandAll` / `v-model:expanded-keys` 展开控制、`showLine` 连接线、`blockNode` 整行节点、`virtualListProps` 虚拟滚动。
+- 完整键盘导航（`↑` / `↓` / `←` / `→` / `Home` / `End` / `Enter` / `空格` / `Escape` / `Tab`）与 `role="tree"` / `treeitem` 无障碍属性；实例方法 `focus()` / `blur()` / `expandAll()` / `checkAll()`。
+- 新增 `src/docs/components/tree-select.md`（19 个 live demo 与完整 API 表），并接入文档侧边栏、组件总览、AI 手册与按需样式入口 `x-next/style/tree-select`。
+- 新增 tree-select 单元测试 48 个（联动 / 策略 / 过滤 / 高亮 / 键盘 / 异步 / 缺失值 / 插槽 / 实例方法 / 搜索词清空）。
+
+### 修复
+
+- Table 建立局部层叠上下文，避免固定列、吸顶表头与滚动条覆盖页面导航；固定列与表头层级支持 CSS token 配置，并补充组合 live demo。
+- Drawer 内层 Scrollbar 约束到正文可用高度，固定标题与 footer，修复长内容及正文 padding 导致外层滚动；补充四方向与 footer 切换 live demo。
+- 共享 `CSSColor` 类型支持 CSS 变量及 fallback，LineChart 系列与轴标签可在严格模板中使用变量颜色；补充主题切换示例与类型正负契约验证。
+
+### 工程与验证
+
+- `vitest.config.ts` 覆盖率集合纳入 `tree-select`；`script/check-style-tokens.js` 登记运行时插值 token；`script/check-bundle-size.js` 单文件预算按实测基线上调（含 TreeSelect 后 1.429 MB，Boxicons 泄漏检查独立保留）。
+
 ## [1.14.0] - 2026-10-08
 
 ### 新增

package/dist/_props/css.d.ts

@@ -4,7 +4,8 @@ type RgbColor = `rgb(${number}, ${number}, ${number})`;
 type RgbaColor = `rgba(${number}, ${number}, ${number}, ${number})`;
 type HslColor = `hsl(${number}, ${number}%, ${number}%)`;
 type HslaColor = `hsla(${number}, ${number}%, ${number}%, ${number})`;
-export type CSSColor = NamedColor | HexColor | RgbColor | RgbaColor | HslColor | HslaColor;
+type CSSVariableColor = `var(--${string})`;
+export type CSSColor = NamedColor | HexColor | RgbColor | RgbaColor | HslColor | HslaColor | CSSVariableColor;
 type CSSUnit = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%' | 'pt' | 'cm' | 'mm' | 'in' | 'pc' | 'ex' | 'ch';
 export type LengthValue = `${number}${CSSUnit}`;
 type GlobalValues = 'auto' | 'inherit' | 'initial' | 'unset';

package/dist/components/bar-chart/BarChart.d.ts

@@ -107,7 +107,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     }>;
     t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
     fontSize: import('vue').ComputedRef<number>;
-    labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+    labelColor: import('vue').ComputedRef<import('./props').CSSColor>;
     yVisible: import('vue').ComputedRef<boolean>;
     xVisible: import('vue').ComputedRef<boolean>;
     showHorizontalLines: import('vue').ComputedRef<boolean>;

package/dist/components/bar-chart/index.d.ts

@@ -108,7 +108,7 @@ export declare const BarChart: {
         }>;
         t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
         fontSize: import('vue').ComputedRef<number>;
-        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+        labelColor: import('vue').ComputedRef<import('./props').CSSColor>;
         yVisible: import('vue').ComputedRef<boolean>;
         xVisible: import('vue').ComputedRef<boolean>;
         showHorizontalLines: import('vue').ComputedRef<boolean>;
@@ -316,7 +316,7 @@ export declare const BarChart: {
         }>;
         t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
         fontSize: import('vue').ComputedRef<number>;
-        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+        labelColor: import('vue').ComputedRef<import('./props').CSSColor>;
         yVisible: import('vue').ComputedRef<boolean>;
         xVisible: import('vue').ComputedRef<boolean>;
         showHorizontalLines: import('vue').ComputedRef<boolean>;
@@ -501,7 +501,7 @@ export declare const BarChart: {
     }>;
     t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
     fontSize: import('vue').ComputedRef<number>;
-    labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+    labelColor: import('vue').ComputedRef<import('./props').CSSColor>;
     yVisible: import('vue').ComputedRef<boolean>;
     xVisible: import('vue').ComputedRef<boolean>;
     showHorizontalLines: import('vue').ComputedRef<boolean>;

package/dist/components/index.d.ts

@@ -50,6 +50,7 @@ export * from './time-range-selector';
 export * from './timeline';
 export * from './timeline-item';
 export * from './tooltip';
+export * from './tree-select';
 export * from './trend-chart';
 export * from './trigger';
 export * from './upload';

package/dist/components/line-chart/LineChart.d.ts

@@ -118,7 +118,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     }>;
     t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
     fontSize: import('vue').ComputedRef<number>;
-    labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('../bar-chart/props').CSSColor>;
+    labelColor: import('vue').ComputedRef<import('../bar-chart/props').CSSColor>;
     yVisible: import('vue').ComputedRef<boolean>;
     xVisible: import('vue').ComputedRef<boolean>;
     showHorizontalLines: import('vue').ComputedRef<boolean>;

package/dist/components/line-chart/index.d.ts

@@ -119,7 +119,7 @@ export declare const LineChart: {
         }>;
         t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
         fontSize: import('vue').ComputedRef<number>;
-        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('../bar-chart/props').CSSColor>;
+        labelColor: import('vue').ComputedRef<import('../bar-chart/props').CSSColor>;
         yVisible: import('vue').ComputedRef<boolean>;
         xVisible: import('vue').ComputedRef<boolean>;
         showHorizontalLines: import('vue').ComputedRef<boolean>;
@@ -331,7 +331,7 @@ export declare const LineChart: {
         }>;
         t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
         fontSize: import('vue').ComputedRef<number>;
-        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('../bar-chart/props').CSSColor>;
+        labelColor: import('vue').ComputedRef<import('../bar-chart/props').CSSColor>;
         yVisible: import('vue').ComputedRef<boolean>;
         xVisible: import('vue').ComputedRef<boolean>;
         showHorizontalLines: import('vue').ComputedRef<boolean>;
@@ -522,7 +522,7 @@ export declare const LineChart: {
     }>;
     t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
     fontSize: import('vue').ComputedRef<number>;
-    labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('../bar-chart/props').CSSColor>;
+    labelColor: import('vue').ComputedRef<import('../bar-chart/props').CSSColor>;
     yVisible: import('vue').ComputedRef<boolean>;
     xVisible: import('vue').ComputedRef<boolean>;
     showHorizontalLines: import('vue').ComputedRef<boolean>;

package/dist/components/line-chart/interface.d.ts

@@ -10,7 +10,7 @@ export interface LineChartSeries {
     name?: string;
     /** 该系列按 categories 顺序排列的值 */
     data: Array<number | null | undefined>;
-    /** 该系列的颜色，默认取内置分类色板（按系列下标循环） */
+    /** 该系列的颜色，支持 CSS 变量及 fallback；默认取内置分类色板（按系列下标循环） */
     color?: CSSColor;
 }
 /** 横向网格线配置 */
@@ -32,7 +32,7 @@ export interface LineChartLabelsOptions {
     yFormatter?: (value: number) => string;
     /** 轴标签字号，默认 12 */
     fontSize?: number;
-    /** 轴标签颜色，默认取组件文字 token */
+    /** 轴标签颜色，支持 CSS 变量及 fallback；默认取组件文字 token */
     color?: CSSColor;
 }
 /** 悬浮提示中的一行（一个系列） */

package/dist/components/tree-select/TreeNode.vue.d.ts

@@ -0,0 +1,478 @@
+import { PropType } from 'vue';
+import { Size } from '../../_utils/constant';
+import { TreeSelectFlatNode } from './utils';
+import { TreeSelectNodeSlotProps } from './interface';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<TreeSelectFlatNode>;
+        required: true;
+    };
+    nodeId: StringConstructor;
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    halfChecked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    blockNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    highlight: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    className: {
+        block: string;
+        element: (className: string) => string;
+        modifier: (className: string) => string;
+        is: (className: string) => string;
+    };
+    cls: import('vue').ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+    contentCls: import('vue').ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+    indentStyle: import('vue').ComputedRef<{
+        paddingLeft: string;
+        '--x-tree-select-node-line-left': string;
+    }>;
+    showCheckbox: import('vue').ComputedRef<boolean>;
+    showSwitcher: import('vue').ComputedRef<boolean>;
+    hasChildren: import('vue').ComputedRef<boolean>;
+    mergedDisabled: import('vue').ComputedRef<boolean>;
+    checkboxDisabled: import('vue').ComputedRef<boolean>;
+    siblingCount: import('vue').ComputedRef<number>;
+    siblingIndex: import('vue').ComputedRef<number>;
+    nodeIcon: import('vue').ComputedRef<import('vue').RenderFunction | undefined>;
+    titleSegments: import('vue').ComputedRef<{
+        text: string;
+        match: boolean;
+    }[]>;
+    slotProps: import('vue').ComputedRef<TreeSelectNodeSlotProps>;
+    handleClick: () => void;
+    handleCheckboxChange: () => void;
+    handleToggleExpand: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => true;
+    check: () => true;
+    'toggle-expand': (expanded: boolean) => true;
+    hover: () => true;
+    leave: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<TreeSelectFlatNode>;
+        required: true;
+    };
+    nodeId: StringConstructor;
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    halfChecked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    blockNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    highlight: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onHover?: (() => any) | undefined;
+    onCheck?: (() => any) | undefined;
+    onSelect?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
+    "onToggle-expand"?: ((expanded: boolean) => any) | undefined;
+}>, {
+    size: "mini" | "small" | "medium" | "large";
+    disabled: boolean;
+    loading: boolean;
+    expanded: boolean;
+    multiple: boolean;
+    active: boolean;
+    selected: boolean;
+    checked: boolean;
+    showLine: boolean;
+    checkable: boolean;
+    halfChecked: boolean;
+    blockNode: boolean;
+    highlight: string;
+}, {}, {
+    Checkbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: PropType<boolean | import('../form-checkbox/interface.ts').CheckboxValueList>;
+            default: undefined;
+        };
+        defaultChecked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        value: {
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<Size>;
+        };
+        uninjectGroupContext: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        'update:modelValue': (value: boolean | import('../form-checkbox/interface.ts').CheckboxValueList) => true;
+        change: (value: boolean | import('../form-checkbox/interface.ts').CheckboxValueList, ev: Event) => true;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: PropType<boolean | import('../form-checkbox/interface.ts').CheckboxValueList>;
+            default: undefined;
+        };
+        defaultChecked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        value: {
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<Size>;
+        };
+        uninjectGroupContext: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onChange?: ((value: boolean | import('../form-checkbox/interface.ts').CheckboxValueList, ev: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean | import('../form-checkbox/interface.ts').CheckboxValueList) => any) | undefined;
+    }>, {
+        disabled: boolean;
+        modelValue: boolean | import('../form-checkbox/interface.ts').CheckboxValueList;
+        defaultChecked: boolean;
+        indeterminate: boolean;
+        uninjectGroupContext: boolean;
+    }, {}, {
+        IconCheck: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        IconHover: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            as: {
+                type: PropType<"span" | "button">;
+                default: string;
+            };
+            prefix: {
+                type: StringConstructor;
+            };
+            size: {
+                type: PropType<"mini" | "small" | "medium" | "large" | "huge">;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>, {
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            handleClick: (ev: MouseEvent) => void;
+            handleMousedown: (ev: MouseEvent) => void;
+            handleKeydown: (ev: KeyboardEvent) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (ev: MouseEvent) => true;
+            mousedown: (ev: MouseEvent) => true;
+            keydown: (ev: KeyboardEvent) => true;
+        }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            as: {
+                type: PropType<"span" | "button">;
+                default: string;
+            };
+            prefix: {
+                type: StringConstructor;
+            };
+            size: {
+                type: PropType<"mini" | "small" | "medium" | "large" | "huge">;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onClick?: ((ev: MouseEvent) => any) | undefined;
+            onMousedown?: ((ev: MouseEvent) => any) | undefined;
+            onKeydown?: ((ev: KeyboardEvent) => any) | undefined;
+        }>, {
+            as: "span" | "button";
+            size: "mini" | "small" | "medium" | "large" | "huge";
+            disabled: boolean;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    IconRight: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        strokeWidth: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        strokeWidth: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        name: string;
+        title: string;
+        size: string | number;
+        rotate: number;
+        spin: boolean;
+        color: string;
+        ariaLabel: string;
+        strokeWidth: string | number;
+        fillColor: unknown[];
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    IconLoading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        strokeWidth: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        strokeWidth: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        name: string;
+        title: string;
+        size: string | number;
+        rotate: number;
+        spin: boolean;
+        color: string;
+        ariaLabel: string;
+        strokeWidth: string | number;
+        fillColor: unknown[];
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;