naive-ui 2.33.4 → 2.34.0

package/lib/checkbox/src/styles/index.cssr.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.cssr"); // vars:
+const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.cssr");
+// vars:
 // --n-label-line-height
 // --n-bezier
 // --n-size
@@ -30,8 +29,6 @@ const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.css
 // --n-border-radius
 // --n-font-size
 // --n-label-padding
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  line-height: var(--n-label-line-height);
  font-size: var(--n-font-size);
@@ -51,7 +48,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  background-color: var(--n-merged-color-table);
  `)]), (0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', `
  background-color: var(--n-color-checked);
- `, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
+ `, [(0, cssr_1.cB)('checkbox-icon', [
+// if not set width to 100%, safari & old chrome won't display the icon
 (0, cssr_1.c)('.check-icon', `
  opacity: 1;
  transform: scale(1);
@@ -147,10 +145,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  padding: var(--n-label-padding);
  `, [(0, cssr_1.c)('&:empty', {
   display: 'none'
-})])]), // modal table header checkbox
+})])]),
+// modal table header checkbox
 (0, cssr_1.insideModal)((0, cssr_1.cB)('checkbox', `
  --n-merged-color-table: var(--n-color-table-modal);
- `)), // popover table header checkbox
+ `)),
+// popover table header checkbox
 (0, cssr_1.insidePopover)((0, cssr_1.cB)('checkbox', `
  --n-merged-color-table: var(--n-color-table-popover);
  `))]);

package/lib/checkbox/src/styles/rtl.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('checkbox', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `)]);

package/lib/code/src/Code.d.ts

@@ -214,8 +214,8 @@ declare const _default: import("vue").DefineComponent<{
         lineNumberTextColor: string;
     }, any>>>;
 }>>, {
-    trim: boolean;
     inline: boolean;
+    trim: boolean;
     wordWrap: boolean;
     code: string;
     uri: boolean;

package/lib/code/src/styles/index.cssr.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-font-size
 // --n-font-family
 // --n-font-weight-strong
@@ -21,8 +21,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-hue-6-2
 // --n-line-number-color
 // --n-line-number-text-color
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
  font-size: var(--n-font-size);
  font-family: var(--n-font-family);

package/lib/collapse/src/styles/index.cssr.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr"); // vars:
+const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
+// vars:
 // --n-font-size
 // --n-bezier
 // --n-text-color
@@ -18,8 +17,6 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --n-arrow-color-disabled
 // --n-title-text-color-disabled
 // --n-item-margin
-
-
 exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('collapse-item', `
  font-size: var(--n-font-size);
  color: var(--n-text-color);

package/lib/collapse/src/styles/rtl.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('collapse', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cB)('collapse-item', [(0, cssr_1.cB)('collapse-item', {

package/lib/collapse-transition/src/styles/index.cssr.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
-
 exports.default = (0, cssr_1.cB)('collapse-transition', {
   width: '100%'
 }, [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)()]);

package/lib/collapse-transition/src/styles/rtl.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('collapse-transition', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  text-align: right;

package/lib/color-picker/src/ColorPicker.d.ts

@@ -2,7 +2,7 @@ import { PropType, VNode, Ref } from 'vue';
 import { RGBA, HSLA } from 'seemly';
 import { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { ColorPickerMode } from './utils';
+import type { ColorPickerMode, ActionType } from './utils';
 import { OnUpdateValue, RenderLabel } from './interface';
 export declare const colorPickerProps: {
     readonly value: PropType<string | null>;
@@ -35,7 +35,7 @@ export declare const colorPickerProps: {
         readonly default: undefined;
     };
     readonly actions: {
-        readonly type: PropType<"confirm"[]>;
+        readonly type: PropType<ActionType[]>;
         readonly default: null;
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
@@ -923,7 +923,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly actions: {
-        readonly type: PropType<"confirm"[]>;
+        readonly type: PropType<ActionType[]>;
         readonly default: null;
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
@@ -1837,7 +1837,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly actions: {
-        readonly type: PropType<"confirm"[]>;
+        readonly type: PropType<ActionType[]>;
         readonly default: null;
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
@@ -2698,7 +2698,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to: string | boolean | HTMLElement;
     readonly placement: FollowerPlacement;
     readonly defaultShow: boolean;
-    readonly actions: "confirm"[];
+    readonly actions: ActionType[];
     readonly showAlpha: boolean;
     readonly modes: ColorPickerMode[];
     readonly showPreview: boolean;

package/lib/color-picker/src/ColorPicker.js

@@ -311,6 +311,10 @@ exports.default = (0, vue_1.defineComponent)({
             handleComplete(false);
             valueIndexRef.value = valueIndex + 1;
         }
+        function handleClear() {
+            doUpdateValue(null, 'input');
+            doUpdateShow(false);
+        }
         function handleConfirm() {
             const { value } = mergedValueRef;
             const { onConfirm } = props;
@@ -390,7 +394,9 @@ exports.default = (0, vue_1.defineComponent)({
                         props.showPreview ? ((0, vue_1.h)(ColorPreview_1.default, { clsPrefix: mergedClsPrefix, mode: displayedModeRef.value, color: rgbaRef.value && (0, seemly_1.toHexString)(rgbaRef.value), onUpdateColor: (color) => doUpdateValue(color, 'input') })) : null),
                     (0, vue_1.h)(ColorInput_1.default, { clsPrefix: mergedClsPrefix, showAlpha: props.showAlpha, mode: displayedModeRef.value, modes: modes, onUpdateMode: handleUpdateDisplayedMode, value: mergedValueRef.value, valueArr: mergedValueArrRef.value, onUpdateValue: handleInputUpdateValue }),
                     ((_a = props.swatches) === null || _a === void 0 ? void 0 : _a.length) && ((0, vue_1.h)(ColorPickerSwatches_1.default, { clsPrefix: mergedClsPrefix, mode: displayedModeRef.value, swatches: props.swatches, onUpdateColor: (color) => doUpdateValue(color, 'input') }))),
-                (actions === null || actions === void 0 ? void 0 : actions.length) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` }, actions.includes('confirm') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: handleConfirm, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.confirm })))) : null,
+                (actions === null || actions === void 0 ? void 0 : actions.length) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` },
+                    actions.includes('confirm') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: handleConfirm, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.confirm })),
+                    actions.includes('clear') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: handleClear, disabled: !mergedValueRef.value, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.clear })))) : null,
                 slots.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` }, { default: slots.action })) : internalActions ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` },
                     internalActions.includes('undo') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: undo, disabled: !undoableRef.value, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.undo })),
                     internalActions.includes('redo') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: redo, disabled: !redoableRef.value, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.redo })))) : null));

package/lib/color-picker/src/styles/index.cssr.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr"); // vars:
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
+// vars:
 // --n-color
 // --n-text-color
 // --n-border-radius
@@ -16,8 +15,6 @@ const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-sc
 // --n-height
 // --n-box-shadow
 // --n-divider-color
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  display: inline-block;
  box-sizing: border-box;

package/lib/color-picker/src/utils.d.ts

@@ -1,5 +1,5 @@
 export declare type ColorPickerMode = 'rgb' | 'hsl' | 'hsv' | 'hex';
-export declare type ActionType = 'confirm';
+export declare type ActionType = 'confirm' | 'clear';
 export declare function deriveDefaultValue(modes: ColorPickerMode[], showAlpha: boolean): string;
 export declare function getModeFromValue(color: string | null): ColorPickerMode | null;
 export declare function floor(color: number[]): number[];

package/lib/components.d.ts

@@ -86,3 +86,4 @@ export * from './typography';
 export * from './upload';
 export * from './watermark';
 export * from './discrete';
+export * from './equation';

package/lib/components.js

@@ -102,3 +102,4 @@ __exportStar(require("./typography"), exports);
 __exportStar(require("./upload"), exports);
 __exportStar(require("./watermark"), exports);
 __exportStar(require("./discrete"), exports);
+__exportStar(require("./equation"), exports);

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -16,6 +16,7 @@ export declare const configProviderProps: {
             undo: string;
             redo: string;
             confirm: string;
+            clear: string;
         };
         Popconfirm: {
             positiveText: string;
@@ -136,6 +137,7 @@ export declare const configProviderProps: {
         readonly default: "div";
     };
     readonly hljs: PropType<Hljs>;
+    readonly katex: PropType<typeof import("katex").default>;
     readonly theme: PropType<GlobalTheme | null>;
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
@@ -166,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
             undo: string;
             redo: string;
             confirm: string;
+            clear: string;
         };
         Popconfirm: {
             positiveText: string;
@@ -286,6 +289,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "div";
     };
     readonly hljs: PropType<Hljs>;
+    readonly katex: PropType<typeof import("katex").default>;
     readonly theme: PropType<GlobalTheme | null>;
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
@@ -320,6 +324,7 @@ declare const _default: import("vue").DefineComponent<{
             undo: string;
             redo: string;
             confirm: string;
+            clear: string;
         };
         Popconfirm: {
             positiveText: string;
@@ -440,6 +445,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "div";
     };
     readonly hljs: PropType<Hljs>;
+    readonly katex: PropType<typeof import("katex").default>;
     readonly theme: PropType<GlobalTheme | null>;
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;

package/lib/config-provider/src/ConfigProvider.js

@@ -24,6 +24,7 @@ exports.configProviderProps = {
         default: 'div'
     },
     hljs: Object,
+    katex: Object,
     theme: Object,
     themeOverrides: Object,
     componentOptions: Object,
@@ -179,6 +180,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const { hljs } = props;
                 return hljs === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedHljsRef.value : hljs;
             }),
+            mergedKatexRef: (0, vue_1.computed)(() => {
+                const { katex } = props;
+                return katex === undefined
+                    ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedKatexRef.value
+                    : katex;
+            }),
             mergedThemeRef,
             mergedThemeOverridesRef,
             inlineThemeDisabled: inlineThemeDisabled || false,

package/lib/config-provider/src/internal-interface.d.ts

@@ -29,6 +29,7 @@ import type { DynamicTagsTheme } from '../../dynamic-tags/styles';
 import type { ElementTheme } from '../../element/styles';
 import type { EllipsisTheme } from '../../ellipsis/styles';
 import type { EmptyTheme } from '../../empty/styles';
+import type { EquationTheme } from '../../equation/styles';
 import type { FormTheme } from '../../form/styles';
 import type { GradientTextTheme } from '../../gradient-text/styles';
 import type { IconTheme } from '../../icon/styles';
@@ -92,6 +93,7 @@ import type { EmptyProps } from '../../empty';
 import type { CollapseTransitionTheme } from '../../collapse-transition/styles';
 import type { ButtonGroupTheme } from '../../button-group/styles/light';
 import type { RowTheme } from '../../legacy-grid/styles';
+import type { Katex } from './katex';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -124,6 +126,7 @@ export interface GlobalThemeWithoutCommon {
     Element?: ElementTheme;
     Ellipsis?: EllipsisTheme;
     Empty?: EmptyTheme;
+    Equation?: EquationTheme;
     Form?: FormTheme;
     GradientText?: GradientTextTheme;
     Icon?: IconTheme;
@@ -234,6 +237,7 @@ export interface ConfigProviderInjection {
     mergedLocaleRef: Ref<NLocale | undefined>;
     mergedDateLocaleRef: Ref<NDateLocale | undefined>;
     mergedHljsRef: Ref<Hljs | undefined>;
+    mergedKatexRef: Ref<Katex | undefined>;
     mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined>;
     mergedIconsRef: Ref<GlobalIconConfig | undefined>;
     mergedThemeRef: Ref<GlobalTheme | undefined>;

package/lib/data-table/src/DataTable.d.ts

@@ -83,8 +83,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn<import("./interface").InternalRowData>) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<() => import("vue").VNodeChild>;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
@@ -3815,8 +3820,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn<import("./interface").InternalRowData>) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<() => import("vue").VNodeChild>;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
@@ -6199,5 +6209,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly flexHeight: boolean;
     readonly summaryPlacement: "bottom" | "top";
     readonly paginationBehaviorOnFilter: "first" | "current";
+    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
 }>;
 export default _default;

package/lib/data-table/src/DataTable.js

@@ -91,6 +91,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         (0, vue_1.provide)(interface_1.dataTableInjectionKey, {
             props,
+            treeMateRef,
             renderExpandIconRef: (0, vue_1.toRef)(props, 'renderExpandIcon'),
             loadingKeySetRef: (0, vue_1.ref)(new Set()),
             slots,
@@ -155,6 +156,7 @@ exports.default = (0, vue_1.defineComponent)({
             headerCheckboxDisabledRef,
             paginationBehaviorOnFilterRef: (0, vue_1.toRef)(props, 'paginationBehaviorOnFilter'),
             summaryPlacementRef: (0, vue_1.toRef)(props, 'summaryPlacement'),
+            scrollbarPropsRef: (0, vue_1.toRef)(props, 'scrollbarProps'),
             syncScrollState,
             doUpdatePage,
             doUpdateFilters,
@@ -252,7 +254,7 @@ exports.default = (0, vue_1.defineComponent)({
         return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, mergedShowPagination: mergedShowPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, themeClass, onRender } = this;
+        const { mergedClsPrefix, themeClass, onRender, $slots, spinProps } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-data-table`,
@@ -272,7 +274,9 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)(pagination_1.NPagination, Object.assign({ theme: this.mergedTheme.peers.Pagination, themeOverrides: this.mergedTheme.peerOverrides.Pagination, disabled: this.loading }, this.mergedPagination)))) : null,
             (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
                 default: () => {
-                    return this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : null;
+                    return this.loading ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-loading-wrapper` }, (0, _utils_1.resolveSlot)($slots.loading, () => [
+                        (0, vue_1.h)(_internal_1.NBaseLoading, Object.assign({ clsPrefix: mergedClsPrefix, strokeWidth: 20 }, spinProps))
+                    ]))) : null;
                 }
             })));
     }

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1300,6 +1300,7 @@ declare const _default: import("vue").DefineComponent<{
     expandable: import("vue").Ref<import("../interface").Expandable<any> | undefined>;
     stickyExpandedRows: import("vue").Ref<boolean>;
     renderExpandIcon: import("vue").Ref<(() => import("vue").VNodeChild) | undefined>;
+    scrollbarProps: import("vue").Ref<import("../../..").ScrollbarProps | undefined>;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     handleMouseenterTable: () => void;
     handleVirtualListScroll: (e: Event) => void;

package/lib/data-table/src/TableParts/Body.js

@@ -85,7 +85,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -104,11 +104,15 @@ exports.default = (0, vue_1.defineComponent)({
             return new Set(mergedExpandedRowKeysRef.value);
         });
         function getRowInfo(key) {
-            const currentIndex = paginatedDataRef.value.findIndex((item) => item.key === key);
-            return paginatedDataRef.value[currentIndex].rawNode;
+            var _a;
+            return (_a = treeMateRef.value.getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
         }
         function handleCheckboxUpdateChecked(tmNode, checked, shiftKey) {
             const rowInfo = getRowInfo(tmNode.key);
+            if (!rowInfo) {
+                (0, _utils_1.warn)('data-table', `fail to get row data with key ${tmNode.key}`);
+                return;
+            }
             if (shiftKey) {
                 const lastIndex = paginatedDataRef.value.findIndex((item) => item.key === lastSelectedKey);
                 if (lastIndex !== -1) {
@@ -141,6 +145,10 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleRadioUpdateChecked(tmNode) {
             const rowInfo = getRowInfo(tmNode.key);
+            if (!rowInfo) {
+                (0, _utils_1.warn)('data-table', `fail to get row data with key ${tmNode.key}`);
+                return;
+            }
             doCheck(tmNode.key, true, rowInfo);
         }
         function getScrollContainer() {
@@ -318,7 +326,7 @@ exports.default = (0, vue_1.defineComponent)({
                     data,
                     hasChildren
                 };
-            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, setHeaderScrollLeft,
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
             handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
@@ -345,7 +353,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        const tableNode = ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
+        const tableNode = ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }), {
             default: () => {
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};

package/lib/data-table/src/TableParts/Header.js

@@ -118,11 +118,13 @@ exports.default = (0, vue_1.defineComponent)({
                             checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : null;
                     }
                     return ((0, vue_1.h)(vue_1.Fragment, null,
-                        ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                            : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
-                                default: () => renderTitle(column)
-                            })) : (renderTitle(column)),
-                        (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null,
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__title` },
+                            ellipsis === true ||
+                                (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+                                : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
+                                    default: () => renderTitle(column)
+                                })) : (renderTitle(column)),
+                            (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null),
                         (0, utils_1.isColumnFilterable)(column) ? ((0, vue_1.h)(FilterButton_1.default, { column: column, options: column.filterOptions })) : null,
                         (0, utils_1.isColumnResizable)(column) ? ((0, vue_1.h)(ResizeButton_1.default, { onResizeStart: () => handleColumnResizeStart(column), onResize: (displacementX) => handleColumnResize(column, displacementX) })) : null));
                 };

package/lib/data-table/src/interface.d.ts

@@ -1,6 +1,6 @@
-import { TreeNode } from 'treemate';
+import { TreeMate, TreeNode } from 'treemate';
 import { CSSProperties, Ref, HTMLAttributes, Slots, PropType, ExtractPropTypes, VNodeChild } from 'vue';
-import type { ScrollTo } from '../../scrollbar/src/Scrollbar';
+import type { ScrollbarProps, ScrollTo } from '../../scrollbar/src/Scrollbar';
 import type { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { NLocale } from '../../locales';
@@ -8,6 +8,7 @@ import type { MergedTheme } from '../../_mixins';
 import type { PaginationProps } from '../../pagination';
 import type { DataTableTheme } from '../styles';
 import type { RowItem, ColItem } from './use-group-header';
+import { BaseLoadingExposedProps } from '../../_internal';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -92,8 +93,13 @@ export declare const dataTableProps: {
         readonly type: PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly renderExpandIcon: PropType<() => VNodeChild>;
+    readonly spinProps: {
+        readonly type: PropType<BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
@@ -2619,6 +2625,8 @@ export interface DataTableInjection {
     stickyExpandedRowsRef: Ref<boolean>;
     renderExpandIconRef: Ref<undefined | (() => VNodeChild)>;
     summaryPlacementRef: Ref<'top' | 'bottom'>;
+    treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
+    scrollbarPropsRef: Ref<ScrollbarProps | undefined>;
     doUpdatePage: (page: number) => void;
     doUpdateExpandedRowKeys: (keys: RowKey[]) => void;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;

package/lib/data-table/src/interface.js

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, renderCell: Function, renderExpandIcon: Function, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('n-data-table');