x-next 1.9.0 → 1.10.0

package/AI_USAGE.md

@@ -1,11 +1,11 @@
 <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/manifest.js. -->
 # x-next AI 使用手册
 
-适用版本：**x-next@1.9.0**。Vue：`^3.5.0`；Node：`>=20.19.0`。
+适用版本：**x-next@1.10.0**。Vue：`^3.5.0`；Node：`>=20.19.0`。
 
-来源指纹（精选示例、映射、版本与公开类型声明）：`151adc8affe9aa22cdd6adad1e92c2091f9d33a67f34de49fb767ec647df2a92`。
+来源指纹（精选示例、映射、版本与公开类型声明）：`c176a3e6388bb70f3e2b34f65c43da412a3a9166c20d276ddfbda3576370c40d`。
 
-本手册覆盖 26 个常用组件与服务；包内还有更多导出可用，只是未在此逐个展开。按业务需要选择即可，不必全部使用。
+本手册覆盖 27 个常用组件与服务；包内还有更多导出可用，只是未在此逐个展开。按业务需要选择即可，不必全部使用。
 
 读取入口：`node_modules/x-next/AI_USAGE.md`；可用 `require.resolve('x-next/AI_USAGE.md')` 定位。这个文件名不会自动让所有 AI 工具加载，消费项目应在自己的指令中明确引用。
 
@@ -13,6 +13,7 @@
 
 | 组件/服务 | 公共导出 | 全局标签/形式 | 受控模型 | 详细文档 |
 | --- | --- | --- | --- | --- |
+| ConfigProvider | `ConfigProvider` | `<x-config-provider>` | 无 | [组件文档](https://x-next.yjmf.com/components/config-provider) |
 | Button | `Button` | `<x-button>` | 无 | [组件文档](https://x-next.yjmf.com/components/button) |
 | Checkbox | `Checkbox` | `<x-checkbox>` | `v-model` | [组件文档](https://x-next.yjmf.com/components/checkbox) |
 | Radio | `Radio` | `<x-radio>` | `v-model` | [组件文档](https://x-next.yjmf.com/components/radio) |
@@ -49,18 +50,17 @@
 npm install x-next
 ```
 
-应用需已有 Vue 3、TypeScript 和 Vue SFC 构建支持。在 `main.ts` 全局安装插件：
+应用需已有 Vue 3、TypeScript 和 Vue SFC 构建支持。按需具名导入无需安装全局插件；在 `main.ts` 引入一次样式：
 
 ```ts
 import { createApp } from 'vue';
-import XNext from 'x-next';
 import App from './App.vue';
 import 'x-next/dist/style.css';
 
-createApp(App).use(XNext).mount('#app');
+createApp(App).mount('#app');
 ```
 
-`app.use(XNext)` 注册全部全局组件；下方各节的局部具名导入也可独立使用。根入口的 `Dialog` 是命令式服务，模板组件是 `DialogComponent`；MessageBox 使用服务函数。
+下方各节使用局部具名导入。需要全局注册时可另用 `app.use(XNext)`（默认导出），它会注册全部组件。根入口的 `Dialog` 是命令式服务，模板组件是 `DialogComponent`；MessageBox 使用服务函数。
 
 接入时遵循这些约定：
 
@@ -71,6 +71,66 @@ createApp(App).use(XNext).mount('#app');
 - **约束业务全局 CSS**：reset 用 `:where(...)` 降低优先级并限定作用域；宽泛的原生元素选择器可能覆盖组件样式。自定义内容用插槽和公开属性，不依赖内部结构类名。
 - **清理页面创建的服务**：保留句柄，在路由页面卸载时调用 `close()`；KeepAlive 页面可在停用时清理。Dialog / MessageBox 的命令式关闭不触发确认、取消回调，业务取消逻辑需自行调用；Message / Notification 的关闭会触发各自的 `onClose`。
 
+## ConfigProvider
+
+局部品牌色用 `themeColor`，它一次生成色阶并重绑定组件别名；不必逐个覆盖 Button、Switch 的颜色。将弹层宿主放在同一主题子树内，Teleport 后仍能继承。Select 默认跟随祖先滚动；要滚动关闭可传 `triggerProps.scrollToClose`。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, ConfigProvider, Select, Switch } from 'x-next';
+
+const brand = ref('#2f6feb');
+const dark = ref(false);
+const value = ref('day');
+const overlayHost = ref<HTMLElement>();
+const switchAttrs = { 'aria-label': '局部暗色' };
+const selectAttrs = { 'aria-label': '统计粒度' };
+const options = [
+  { label: '按天', value: 'day' },
+  { label: '按周', value: 'week' },
+];
+</script>
+
+<template>
+  <ConfigProvider :theme-color="brand" :dark="dark" class="brand-scope">
+    <Button type="primary" @click="brand = brand === '#2f6feb' ? '#0f766e' : '#2f6feb'">
+      切换品牌色
+    </Button>
+    <Switch v-model="dark" v-bind="switchAttrs" />
+    <Select
+      v-if="overlayHost"
+      v-model="value"
+      :options="options"
+      :popup-container="overlayHost"
+      v-bind="selectAttrs"
+      style="width: 160px"
+    />
+    <div ref="overlayHost" class="brand-overlay" />
+  </ConfigProvider>
+</template>
+
+<style scoped>
+.brand-scope {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  color: var(--x-color-text-primary);
+  background: var(--x-color-bg-surface);
+}
+.brand-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2000;
+}
+</style>
+```
+
+已有主题容器时，也可调用公开 `applyThemeColor(seed, { target, dark })`；切换暗色后需重新调用。只改后代的几条 semantic CSS 变量不会重算祖先 alias；`:tag="null"` 的 ConfigProvider 没有承载局部主题的 DOM。
+
 ## Button
 
 [组件文档与 live demo](https://x-next.yjmf.com/components/button)。`type` 默认 `'default'`，视觉主按钮用 `'primary'`；`htmlType` 默认 `'button'`，原生提交用 `'submit'`。独立使用时尺寸回退为 `'medium'`，`disabled` / `loading` 默认关闭。

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [未发布]
+
+## [1.10.0] - 2026-10-05
+
+### 新增
+
+- 公共图标补齐四向箭头、双向翻页、问号帮助、纵向更多与顺时针旋转，共 9 种新图形；图标墙展示 59 种推荐图形，保留旧名称与 22 个兼容别名，搜索旧名可定位推荐名称。
+- 新增 `check:icons` 门禁，检查图标生成结果与源码、文档中的静态名称和导入引用，接入完整检查流程。
+
+### 修复
+
+- 公共线性图标统一描边风格，`strokeWidth` 实际生效；内部图标工厂不再覆盖已经注册的公共图标。减少动效模式下，加载图标的外层旋转与内部圆弧动画均停止。
+- 修复图标墙加载圆环被裁切、默认颜色不随暗色主题切换，以及 Clipboard API 不可用时误报复制成功的问题。
+- Select 默认跟随滚动祖先，仍可通过 `triggerProps.updateAtScroll=false` 关闭；Trigger 的滚动关闭支持局部与嵌套容器，按打开时的位置计算阈值，并在关闭/卸载时清理监听。
+- Select 虚拟列表恢复 `dropdown-scroll` / `dropdown-reach-bottom` 事件，复用 `scrollbar` 配置；搜索过滤复位虚拟窗口，尾部追加保持位置，兼容 Table 滚动节点引用。
+- Button 非加载时不再运行隐藏加载动画，保留加载禁用状态和宽度过渡，尊重减少动画偏好。
+- BarChart、LineChart 的末位标签按实际间距避让，首末标签收边；超长文字省略并保留完整提示，避免窄画布叠字或越界。
+
+### 文档
+
+- 图标页新增别名搜索、推荐名称复制和可交互描边示例。
+- AI 使用手册新增 ConfigProvider 局部品牌色与浮层宿主配方，以具名导入作为默认接入方式。
+- 增加 Select 局部滚动、图表完整日期与窄容器的可交互示例。
+
 ## [1.9.0] - 2026-10-05
 
 ### 新增

package/dist/_utils/chart/scale.d.ts

@@ -50,6 +50,6 @@ export declare const formatPercent: (value: number, total: number, digits?: numb
 export declare const estimateTextWidth: (text: string, fontSize: number) => number;
 /**
  * 类目标签抽稀：按柱间距与标签宽度算出步长，保证相邻标签间留有 gap。
- * 末位标签总是保留（趋势图需要看到最新时间点），与倒数第二个太近时挤掉前一个。
+ * 优先保留末位（最新时间点），空间不足时移除冲突项，包括首位。
  */
 export declare const pickLabelIndices: (count: number, band: number, maxLabelWidth: number, gap?: number) => number[];

package/dist/components/_components/chart/axis-labels.d.ts

@@ -0,0 +1,8 @@
+import { ChartAxisXLabel } from './interface';
+export interface PositionedAxisLabel extends ChartAxisXLabel {
+    width: number;
+    /** 完整文案，仅在省略时提供原生 SVG 提示。 */
+    title?: string;
+}
+/** 收边后再次检查文字区间，优先保留最新类目；单个超长标签省略。 */
+export declare const layoutAxisLabels: (labels: ChartAxisXLabel[], left: number, right: number, gap: number, measure: (text: string) => number) => PositionedAxisLabel[];

package/dist/components/link/Link.vue.d.ts

@@ -121,8 +121,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     strong: boolean;
     disabled: boolean;
-    icon: boolean;
     loading: boolean;
+    icon: boolean;
     status: "normal" | "success" | "warning" | "strong" | "danger";
     hoverable: boolean;
 }, {}, {

package/dist/components/link/index.d.ts

@@ -37,8 +37,8 @@ export declare const Link: {
     }, import('vue').PublicProps, {
         strong: boolean;
         disabled: boolean;
-        icon: boolean;
         loading: boolean;
+        icon: boolean;
         status: "normal" | "success" | "warning" | "strong" | "danger";
         hoverable: boolean;
     }, true, {}, {}, {
@@ -255,8 +255,8 @@ export declare const Link: {
     }, {}, {}, {}, {
         strong: boolean;
         disabled: boolean;
-        icon: boolean;
         loading: boolean;
+        icon: boolean;
         status: "normal" | "success" | "warning" | "strong" | "danger";
         hoverable: boolean;
     }>;
@@ -301,8 +301,8 @@ export declare const Link: {
 }, string, {
     strong: boolean;
     disabled: boolean;
-    icon: boolean;
     loading: boolean;
+    icon: boolean;
     status: "normal" | "success" | "warning" | "strong" | "danger";
     hoverable: boolean;
 }, {}, string, {}, {

package/dist/components/virtual-list-v2/interface.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from 'vue';
+import { ScrollbarProps } from '../scrollbar-v2';
 export type VirtualItemKey = string | number;
 export interface InternalDataItem {
     key: VirtualItemKey;
@@ -52,6 +53,8 @@ export interface VirtualListProps {
     data?: unknown[];
     itemKey?: string;
     component?: keyof HTMLElementTagNameMap;
+    /** 使用库内滚动条；独立 VirtualList 默认 false，Select 会传入自己的配置。 */
+    scrollbar?: boolean | ScrollbarProps;
 }
 export type ScrollOptions = number | {
     index?: number;

package/dist/components/virtual-list-v2/virtual-list.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import { ScrollOptions } from './interface';
+import { ScrollbarProps } from '../scrollbar-v2';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     height: {
         type: (StringConstructor | NumberConstructor)[];
@@ -43,6 +44,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>, {
     className: {
         block: string;
@@ -50,7 +55,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         modifier: (className: string) => string;
         is: (className: string) => string;
     };
-    containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    containerRef: import('vue').Ref<any, any>;
+    wrapperComRef: import('vue').Ref<HTMLElement | import('vue').ComponentPublicInstance | undefined, HTMLElement | import('vue').ComponentPublicInstance | undefined>;
+    displayScrollbar: import('vue').ComputedRef<boolean>;
+    scrollbarProps: import('vue').ComputedRef<ScrollbarProps | undefined>;
     contentRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
     frontPadding: import('vue').ComputedRef<number>;
     currentList: import('vue').ComputedRef<Record<string, any>[]>;
@@ -115,6 +123,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>> & Readonly<{
     onScroll?: ((ev: Event) => any) | undefined;
     onReachBottom?: ((ev: Event) => any) | undefined;
@@ -122,6 +134,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     data: Record<string, any>[];
     component: string | Record<string, any>;
     height: string | number;
+    scrollbar: boolean | ScrollbarProps;
     fixedSize: boolean;
     estimatedSize: number;
     buffer: number;
@@ -150,5 +163,327 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             required: true;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    ScrollbarComponent: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            type: {
+                type: PropType<"track" | "embed">;
+                default: string;
+            };
+            outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+            outerStyle: {
+                type: PropType<import('vue').StyleValue>;
+            };
+            hide: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableHorizontal: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableVertical: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            horizontalWheel: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onScroll?: ((ev: Event) => any) | undefined;
+        }>, {
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            cls: import('vue').ComputedRef<unknown[]>;
+            style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+            rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            getContainerAttrs: () => {
+                [x: string]: unknown;
+            };
+            getContainerStyle: () => import('vue').StyleValue;
+            containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            horizontalThumbRef: import('vue').Ref<any, any>;
+            verticalThumbRef: import('vue').Ref<any, any>;
+            horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            isBoth: import('vue').Ref<boolean, boolean>;
+            hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+            hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+            handleResize: () => void;
+            handleScroll: (ev: Event) => void;
+            handleWheel: (ev: WheelEvent) => void;
+            handleHorizontalScroll: (offset: number) => void;
+            handleVerticalScroll: (offset: number) => void;
+        }, {}, {}, {
+            scrollTo(options?: number | {
+                left?: number;
+                top?: number;
+            }, y?: number): void;
+            scrollTop(top: number): void;
+            scrollLeft(left: number): void;
+        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            scroll: (ev: Event) => true;
+        }, import('vue').PublicProps, {
+            type: "embed" | "track";
+            hide: boolean;
+            disableHorizontal: boolean;
+            disableVertical: boolean;
+            horizontalWheel: boolean;
+        }, true, {}, {}, {
+            ResizeObserver: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                watchOnUpdated: BooleanConstructor;
+            }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "resize"[], "resize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                watchOnUpdated: BooleanConstructor;
+            }>> & Readonly<{
+                onResize?: ((...args: any[]) => any) | undefined;
+            }>, {
+                watchOnUpdated: boolean;
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+            Thumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                data: {
+                    type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+                };
+                direction: {
+                    type: PropType<import('../../_utils/constant').Direction>;
+                    default: string;
+                };
+            }>, {
+                trackRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+                thumbRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+                className: {
+                    block: string;
+                    element: (className: string) => string;
+                    modifier: (className: string) => string;
+                    is: (className: string) => string;
+                };
+                thumbCls: import('vue').ComputedRef<(string | {
+                    [x: string]: boolean;
+                })[]>;
+                thumbStyle: import('vue').ComputedRef<{
+                    [x: string]: string;
+                }>;
+                handleThumbMouseDown: (ev: MouseEvent) => void;
+                handleTrackClick: (ev: MouseEvent) => void;
+                setOffset: (_offset: number) => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "scroll"[], "scroll", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                data: {
+                    type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+                };
+                direction: {
+                    type: PropType<import('../../_utils/constant').Direction>;
+                    default: string;
+                };
+            }>> & Readonly<{
+                onScroll?: ((...args: any[]) => any) | undefined;
+            }>, {
+                direction: "horizontal" | "vertical";
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            type: {
+                type: PropType<"track" | "embed">;
+                default: string;
+            };
+            outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+            outerStyle: {
+                type: PropType<import('vue').StyleValue>;
+            };
+            hide: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableHorizontal: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableVertical: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            horizontalWheel: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onScroll?: ((ev: Event) => any) | undefined;
+        }>, {
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            cls: import('vue').ComputedRef<unknown[]>;
+            style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+            rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            getContainerAttrs: () => {
+                [x: string]: unknown;
+            };
+            getContainerStyle: () => import('vue').StyleValue;
+            containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            horizontalThumbRef: import('vue').Ref<any, any>;
+            verticalThumbRef: import('vue').Ref<any, any>;
+            horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            isBoth: import('vue').Ref<boolean, boolean>;
+            hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+            hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+            handleResize: () => void;
+            handleScroll: (ev: Event) => void;
+            handleWheel: (ev: WheelEvent) => void;
+            handleHorizontalScroll: (offset: number) => void;
+            handleVerticalScroll: (offset: number) => void;
+        }, {}, {}, {
+            scrollTo(options?: number | {
+                left?: number;
+                top?: number;
+            }, y?: number): void;
+            scrollTop(top: number): void;
+            scrollLeft(left: number): void;
+        }, {
+            type: "embed" | "track";
+            hide: boolean;
+            disableHorizontal: boolean;
+            disableVertical: boolean;
+            horizontalWheel: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        type: {
+            type: PropType<"track" | "embed">;
+            default: string;
+        };
+        outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        outerStyle: {
+            type: PropType<import('vue').StyleValue>;
+        };
+        hide: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disableHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disableVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        horizontalWheel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onScroll?: ((ev: Event) => any) | undefined;
+    }>, {
+        className: {
+            block: string;
+            element: (className: string) => string;
+            modifier: (className: string) => string;
+            is: (className: string) => string;
+        };
+        cls: import('vue').ComputedRef<unknown[]>;
+        style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+        rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        getContainerAttrs: () => {
+            [x: string]: unknown;
+        };
+        getContainerStyle: () => import('vue').StyleValue;
+        containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        horizontalThumbRef: import('vue').Ref<any, any>;
+        verticalThumbRef: import('vue').Ref<any, any>;
+        horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+        verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+        isBoth: import('vue').Ref<boolean, boolean>;
+        hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+        hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+        handleResize: () => void;
+        handleScroll: (ev: Event) => void;
+        handleWheel: (ev: WheelEvent) => void;
+        handleHorizontalScroll: (offset: number) => void;
+        handleVerticalScroll: (offset: number) => void;
+    }, {}, {}, {
+        scrollTo(options?: number | {
+            left?: number;
+            top?: number;
+        }, y?: number): void;
+        scrollTop(top: number): void;
+        scrollLeft(left: number): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        scroll: (ev: Event) => true;
+    }, string, {
+        type: "embed" | "track";
+        hide: boolean;
+        disableHorizontal: boolean;
+        disableVertical: boolean;
+        horizontalWheel: boolean;
+    }, {}, string, {}, {
+        ResizeObserver: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            watchOnUpdated: BooleanConstructor;
+        }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+            [key: string]: any;
+        }>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "resize"[], "resize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            watchOnUpdated: BooleanConstructor;
+        }>> & Readonly<{
+            onResize?: ((...args: any[]) => any) | undefined;
+        }>, {
+            watchOnUpdated: boolean;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        Thumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            data: {
+                type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+            };
+            direction: {
+                type: PropType<import('../../_utils/constant').Direction>;
+                default: string;
+            };
+        }>, {
+            trackRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            thumbRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            thumbCls: import('vue').ComputedRef<(string | {
+                [x: string]: boolean;
+            })[]>;
+            thumbStyle: import('vue').ComputedRef<{
+                [x: string]: string;
+            }>;
+            handleThumbMouseDown: (ev: MouseEvent) => void;
+            handleTrackClick: (ev: MouseEvent) => void;
+            setOffset: (_offset: number) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "scroll"[], "scroll", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            data: {
+                type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+            };
+            direction: {
+                type: PropType<import('../../_utils/constant').Direction>;
+                default: string;
+            };
+        }>> & Readonly<{
+            onScroll?: ((...args: any[]) => any) | undefined;
+        }>, {
+            direction: "horizontal" | "vertical";
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+        install(app: import('vue').App): void;
+    };
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/es/_hooks/use-component-ref.js

@@ -1,16 +1,16 @@
-import { ref as o, onMounted as u, watch as m } from "vue";
-import { isComponentInstance as f } from "../_utils/is.js";
-const c = (r) => {
-  const e = o(), t = () => f(e.value) ? e.value.$refs[r] : e.value, n = o();
+import { ref as r, onMounted as u, watch as f } from "vue";
+import { isComponentInstance as l } from "../_utils/is.js";
+const s = (n) => {
+  const e = r(), o = () => l(e.value) ? e.value.$refs[n] ?? Reflect.get(e.value, n) : e.value, t = r();
   return u(() => {
-    n.value = t();
-  }), m([e], () => {
-    n.value = t();
+    t.value = o();
+  }), f([e], () => {
+    t.value = o();
   }), {
     componentRef: e,
-    elementRef: n
+    elementRef: t
   };
 };
 export {
-  c as useComponentRef
+  s as useComponentRef
 };