naive-ui 2.43.1 → 2.44.0

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

@@ -48,7 +48,10 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.colorPickerProps,
     slots: Object,
     setup(props, { slots }) {
-        const selfRef = (0, vue_1.ref)(null);
+        let triggerRef = null;
+        function setTriggerRef(el) {
+            triggerRef = el;
+        }
         let upcomingValue = null;
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -406,7 +409,6 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
-            selfRef,
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
@@ -415,12 +417,22 @@ exports.default = (0, vue_1.defineComponent)({
             adjustedTo: (0, _utils_1.useAdjustedTo)(props),
             mergedValue: mergedValueRef,
             handleTriggerClick() {
+                if (mergedDisabledRef.value) {
+                    return;
+                }
                 doUpdateShow(true);
             },
+            setTriggerRef,
             handleClickOutside(e) {
-                var _a;
-                if ((_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.contains((0, seemly_1.getPreciseEventTarget)(e))) {
-                    return;
+                if (triggerRef instanceof Element) {
+                    if (triggerRef.contains((0, seemly_1.getPreciseEventTarget)(e))) {
+                        return;
+                    }
+                }
+                else if (triggerRef) {
+                    if (triggerRef.$el.contains((0, seemly_1.getPreciseEventTarget)(e))) {
+                        return;
+                    }
                 }
                 doUpdateShow(false);
             },
@@ -433,27 +445,35 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { mergedClsPrefix, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        return ((0, vue_1.h)("div", { class: [this.themeClass, `${mergedClsPrefix}-color-picker`], ref: "selfRef", style: this.cssVars },
-            (0, vue_1.h)(vueuc_1.VBinder, null, {
-                default: () => [
-                    (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }))
-                    }),
-                    (0, vue_1.h)(vueuc_1.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
-                        default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
-                            default: () => this.mergedShow
-                                ? (0, vue_1.withDirectives)(this.renderPanel(), [
-                                    [
-                                        vdirs_1.clickoutside,
-                                        this.handleClickOutside,
-                                        undefined,
-                                        { capture: true }
-                                    ]
-                                ])
-                                : null
-                        }))
+        return ((0, vue_1.h)(vueuc_1.VBinder, null, {
+            default: () => [
+                (0, vue_1.h)(vueuc_1.VTarget, null, {
+                    default: () => (0, _utils_1.resolveWrappedSlotWithProps)(this.$slots.trigger, {
+                        value: this.mergedValue,
+                        onClick: this.handleTriggerClick,
+                        ref: this.setTriggerRef
+                    }, (children) => {
+                        const triggerNode = children || ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, style: this.cssVars, ref: this.setTriggerRef, disabled: this.mergedDisabled, class: this.themeClass, onClick: this.mergedDisabled
+                                ? undefined
+                                : this.handleTriggerClick }));
+                        return triggerNode;
                     })
-                ]
-            })));
+                }),
+                (0, vue_1.h)(vueuc_1.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
+                        default: () => this.mergedShow
+                            ? (0, vue_1.withDirectives)(this.renderPanel(), [
+                                [
+                                    vdirs_1.clickoutside,
+                                    this.handleClickOutside,
+                                    undefined,
+                                    { capture: true }
+                                ]
+                            ])
+                            : null
+                    }))
+                })
+            ]
+        }));
     }
 });

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

@@ -29,10 +29,10 @@ exports.default = (0, vue_1.defineComponent)({
             const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
             return ((0, vue_1.h)("div", { class: [
-                    `${clsPrefix}-color-picker-trigger`,
-                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                    `${clsPrefix}-color-picker`,
+                    disabled && `${clsPrefix}-color-picker--disabled`
                 ], onClick: disabled ? undefined : onClick },
-                (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker__fill` },
                     (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-checkboard` }),
                     (0, vue_1.h)("div", { style: {
                             position: 'absolute',
@@ -42,7 +42,7 @@ exports.default = (0, vue_1.defineComponent)({
                             bottom: 0,
                             backgroundColor: hsla ? (0, seemly_1.toHslaString)(hsla) : ''
                         } }),
-                    value && hsla ? ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {
+                    value && hsla ? ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker__value`, style: {
                             color: (0, utils_1.getWCAGContrast)(hsla) ? 'white' : 'black'
                         } }, renderLabel ? renderLabel(value) : value)) : null)));
         };

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

@@ -15,14 +15,7 @@ const cssr_1 = require("../../../_utils/cssr");
 // --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;
- height: var(--n-height);
- font-size: var(--n-font-size);
- width: 100%;
- position: relative;
- `), (0, cssr_1.cB)('color-picker-panel', `
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker-panel', `
  margin: 4px 0;
  width: 240px;
  font-size: var(--n-panel-font-size);
@@ -137,14 +130,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  border-top: 1px solid var(--n-divider-color);
  padding: 8px 12px;
  justify-content: flex-end;
- `, [(0, cssr_1.cB)('button', 'margin-left: 8px;')]), (0, cssr_1.cB)('color-picker-trigger', `
- border: var(--n-border);
- height: 100%;
+ `, [(0, cssr_1.cB)('button', 'margin-left: 8px;')]), (0, cssr_1.cB)('color-picker', `
+ display: inline-block;
  box-sizing: border-box;
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ width: 100%;
+ position: relative;
+ cursor: pointer;
+ border: var(--n-border);
  border-radius: var(--n-border-radius);
  transition: border-color .3s var(--n-bezier);
- cursor: pointer;
- `, [(0, cssr_1.cE)('value', `
+ `, [(0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cE)('value', `
  white-space: nowrap;
  position: relative;
  `), (0, cssr_1.cE)('fill', `
@@ -157,7 +154,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), (0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cB)('color-picker-checkboard', `
+ `), (0, cssr_1.cB)('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [(0, cssr_1.c)('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);

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

@@ -112,11 +112,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly default: undefined;
     };
 }>> & Readonly<{}>, {
-    readonly tag: string;
-    readonly abstract: boolean;
-    readonly as: string | undefined;
     readonly bordered: boolean | undefined;
     readonly inlineThemeDisabled: boolean;
+    readonly tag: string;
+    readonly abstract: boolean;
     readonly preflightStyleDisabled: boolean;
+    readonly as: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -13,27 +13,33 @@ import type { BackTopTheme } from '../../back-top/styles';
 import type { BadgeTheme } from '../../badge/styles';
 import type { BreadcrumbTheme } from '../../breadcrumb/styles';
 import type { ButtonGroupTheme } from '../../button-group/styles/light';
-import type { Size as ButtonSize } from '../../button/src/interface';
+import type { ButtonSize } from '../../button/src/public-types';
 import type { ButtonTheme } from '../../button/styles';
 import type { CalendarTheme } from '../../calendar/styles';
+import type { CardSize } from '../../card/src/public-types';
 import type { CardTheme } from '../../card/styles';
 import type { CarouselTheme } from '../../carousel/styles';
 import type { CascaderTheme } from '../../cascader/styles';
+import type { CheckboxSize } from '../../checkbox/src/public-types';
 import type { CheckboxTheme } from '../../checkbox/styles';
 import type { CodeTheme } from '../../code/styles';
 import type { CollapseTransitionTheme } from '../../collapse-transition/styles';
 import type { CollapseTheme } from '../../collapse/styles';
 import type { ColorPickerTheme } from '../../color-picker/styles';
 import type { DataTableRenderFilter, DataTableRenderSorter } from '../../data-table';
+import type { DataTableSize } from '../../data-table/src/public-types';
 import type { DataTableTheme } from '../../data-table/styles';
 import type { DatePickerTheme } from '../../date-picker/styles';
+import type { DescriptionsSize } from '../../descriptions/src/public-types';
 import type { DescriptionsTheme } from '../../descriptions/styles';
 import type { IconPlacement } from '../../dialog/src/interface';
 import type { DialogTheme } from '../../dialog/styles';
 import type { DividerTheme } from '../../divider/styles';
 import type { DrawerTheme } from '../../drawer/styles';
+import type { DropdownSize } from '../../dropdown/src/public-types';
 import type { DropdownTheme } from '../../dropdown/styles';
 import type { DynamicInputTheme } from '../../dynamic-input/styles';
+import type { DynamicTagsSize } from '../../dynamic-tags/src/public-types';
 import type { DynamicTagsTheme } from '../../dynamic-tags/styles';
 import type { ElementTheme } from '../../element/styles';
 import type { EllipsisTheme } from '../../ellipsis/styles';
@@ -43,6 +49,7 @@ import type { EquationTheme } from '../../equation/styles';
 import type { FlexTheme } from '../../flex/styles';
 import type { FloatButtonGroupTheme } from '../../float-button-group/styles';
 import type { FloatButtonTheme } from '../../float-button/styles';
+import type { FormSize } from '../../form/src/public-types';
 import type { FormTheme } from '../../form/styles';
 import type { GradientTextTheme } from '../../gradient-text/styles';
 import type { HeatmapTheme } from '../../heatmap/styles';
@@ -51,7 +58,7 @@ import type { IconTheme } from '../../icon/styles';
 import type { ImageTheme } from '../../image/styles';
 import type { InputNumberTheme } from '../../input-number/styles';
 import type { InputOtpTheme } from '../../input-otp/styles';
-import type { Size as InputSize } from '../../input/src/interface';
+import type { InputSize } from '../../input/src/public-types';
 import type { InputTheme } from '../../input/styles';
 import type { LayoutTheme } from '../../layout/styles';
 import type { RowTheme } from '../../legacy-grid/styles';
@@ -67,30 +74,41 @@ import type { MessageTheme } from '../../message/styles';
 import type { ModalTheme } from '../../modal/styles';
 import type { NotificationTheme } from '../../notification/styles';
 import type { PageHeaderTheme } from '../../page-header/styles';
+import type { PaginationSize } from '../../pagination/src/public-types';
 import type { PaginationTheme } from '../../pagination/styles';
 import type { PopconfirmTheme } from '../../popconfirm/styles';
 import type { PopoverTheme } from '../../popover/styles';
+import type { PopselectSize } from '../../popselect/src/public-types';
 import type { PopselectTheme } from '../../popselect/styles';
 import type { ProgressTheme } from '../../progress/styles';
 import type { QrCodeTheme } from '../../qr-code/styles';
+import type { RadioSize } from '../../radio/src/public-types';
 import type { RadioTheme } from '../../radio/styles';
+import type { RateSize } from '../../rate/src/public-types';
 import type { RateTheme } from '../../rate/styles';
+import type { ResultSize } from '../../result/src/public-types';
 import type { ResultTheme } from '../../result/styles';
-import type { Size as SelectSize } from '../../select/src/interface';
+import type { SelectSize } from '../../select/src/public-types';
 import type { SelectTheme } from '../../select/styles';
+import type { SkeletonSize } from '../../skeleton/src/public-types';
 import type { SkeletonTheme } from '../../skeleton/styles';
 import type { SliderTheme } from '../../slider/styles';
+import type { SpaceSize } from '../../space/src/public-types';
 import type { SpaceTheme } from '../../space/styles';
 import type { SpinTheme } from '../../spin/styles';
 import type { SplitTheme } from '../../split/styles';
 import type { StatisticTheme } from '../../statistic/styles';
 import type { StepsTheme } from '../../steps/styles';
+import type { SwitchSize } from '../../switch/src/public-types';
 import type { SwitchTheme } from '../../switch/styles';
+import type { TableSize } from '../../table/src/public-types';
 import type { TableTheme } from '../../table/styles';
+import type { TabsSize } from '../../tabs/src/public-types';
 import type { TabsTheme } from '../../tabs/styles';
+import type { TagSize } from '../../tag/src/public-types';
 import type { TagTheme } from '../../tag/styles';
 import type { ThingTheme } from '../../thing/styles';
-import type { Size as TimePickerSize } from '../../time-picker/src/interface';
+import type { TimePickerSize } from '../../time-picker/src/public-types';
 import type { TimePickerTheme } from '../../time-picker/styles';
 import type { TimelineTheme } from '../../timeline/styles';
 import type { TooltipTheme } from '../../tooltip/styles';
@@ -145,6 +163,7 @@ export interface GlobalThemeWithoutCommon {
     Image?: ImageTheme;
     Input?: InputTheme;
     InputNumber?: InputNumberTheme;
+    InputOtp?: InputOtpTheme;
     Layout?: LayoutTheme;
     LegacyTransfer?: LegacyTransferTheme;
     List?: ListTheme;
@@ -193,10 +212,22 @@ export interface GlobalThemeWithoutCommon {
     Heatmap?: HeatmapTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
-    InputOtp?: InputOtpTheme;
 }
 export interface GlobalComponentConfig {
+    Cascader?: {
+        renderEmpty?: () => VNodeChild;
+    };
+    Button?: {
+        size?: ButtonSize;
+    };
+    Card?: {
+        size?: CardSize;
+    };
+    Checkbox?: {
+        size?: CheckboxSize;
+    };
     Pagination?: {
+        size?: PaginationSize;
         inputSize?: InputSize;
         selectSize?: SelectSize;
     };
@@ -207,13 +238,72 @@ export interface GlobalComponentConfig {
         iconPlacement?: IconPlacement;
     };
     DataTable?: {
+        size?: DataTableSize;
         renderFilter?: DataTableRenderFilter;
         renderSorter?: DataTableRenderSorter;
+        renderEmpty?: () => VNodeChild;
+    };
+    Descriptions?: {
+        size?: DescriptionsSize;
+    };
+    Dropdown?: {
+        size?: DropdownSize;
     };
     DynamicInput?: {
         buttonSize?: ButtonSize;
     };
+    DynamicTags?: {
+        size?: DynamicTagsSize;
+    };
     Empty?: Pick<EmptyProps, 'description' | 'renderIcon'>;
+    Form?: {
+        size?: FormSize;
+    };
+    Input?: {
+        size?: InputSize;
+    };
+    Select?: {
+        renderEmpty?: () => VNodeChild;
+    };
+    Popselect?: {
+        size?: PopselectSize;
+    };
+    Radio?: {
+        size?: RadioSize;
+    };
+    Rate?: {
+        size?: RateSize;
+    };
+    Result?: {
+        size?: ResultSize;
+    };
+    Skeleton?: {
+        size?: SkeletonSize;
+    };
+    Space?: {
+        size?: SpaceSize;
+    };
+    Switch?: {
+        size?: SwitchSize;
+    };
+    Table?: {
+        size?: TableSize;
+    };
+    Tabs?: {
+        size?: TabsSize;
+    };
+    Tag?: {
+        size?: TagSize;
+    };
+    Transfer?: {
+        renderEmpty?: () => VNodeChild;
+    };
+    Tree?: {
+        renderEmpty?: () => VNodeChild;
+    };
+    TreeSelect?: {
+        renderEmpty?: () => VNodeChild;
+    };
 }
 export interface GlobalIconConfig {
     attach?: () => VNodeChild;

package/lib/countdown/src/Countdown.d.ts

@@ -61,8 +61,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     render: PropType<(props: CountdownTimeInfo) => VNodeChild>;
     onFinish: PropType<() => void>;
 }>> & Readonly<{}>, {
-    active: boolean;
     duration: number;
-    precision: 0 | 1 | 2 | 3;
+    active: boolean;
+    precision: 0 | 1 | 3 | 2;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/data-table/index.d.ts

@@ -1,4 +1,4 @@
 export { default as NDataTable } from './src/DataTable';
 export { dataTableProps } from './src/interface';
 export type { TableBaseColumn as DataTableBaseColumn, TableColumn as DataTableColumn, TableColumnGroup as DataTableColumnGroup, ColumnKey as DataTableColumnKey, TableColumns as DataTableColumns, CreateRowClassName as DataTableCreateRowClassName, CreateRowKey as DataTableCreateRowKey, CreateRowProps as DataTableCreateRowProps, CreateSummary as DataTableCreateSummary, TableExpandColumn as DataTableExpandColumn, FilterState as DataTableFilterState, DataTableInst, DataTableProps, RenderFilter as DataTableRenderFilter, RenderFilterIcon as DataTableRenderFilterIcon, RenderSorter as DataTableRenderSorter, RenderSorterIcon as DataTableRenderSorterIcon, RowData as DataTableRowData, RowKey as DataTableRowKey, TableSelectionColumn as DataTableSelectionColumn, DataTableSlots, SortOrder as DataTableSortOrder, SortState as DataTableSortState } from './src/interface';
-export * from './src/publicTypes';
+export type * from './src/public-types';

package/lib/data-table/index.js

@@ -1,18 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -22,4 +8,3 @@ var DataTable_1 = require("./src/DataTable");
 Object.defineProperty(exports, "NDataTable", { enumerable: true, get: function () { return __importDefault(DataTable_1).default; } });
 var interface_1 = require("./src/interface");
 Object.defineProperty(exports, "dataTableProps", { enumerable: true, get: function () { return interface_1.dataTableProps; } });
-__exportStar(require("./src/publicTypes"), exports);

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

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly singleColumn: BooleanConstructor;
     readonly size: {
-        readonly type: import("vue").PropType<"small" | "medium" | "large">;
+        readonly type: import("vue").PropType<import("./public-types").DataTableSize>;
         readonly default: "medium";
     };
     readonly remote: BooleanConstructor;
@@ -99,12 +99,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;
-    readonly spinProps: {
-        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
-        readonly default: {};
-    };
-    readonly getCsvCell: import("vue").PropType<import("./publicTypes").DataTableGetCsvCell>;
-    readonly getCsvHeader: import("vue").PropType<import("./publicTypes").DataTableGetCsvHeader>;
+    readonly spinProps: import("vue").PropType<import("./public-types").DataTableSpinProps>;
+    readonly getCsvCell: import("vue").PropType<import("./public-types").DataTableGetCsvCell>;
+    readonly getCsvHeader: import("vue").PropType<import("./public-types").DataTableGetCsvHeader>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
@@ -4315,7 +4312,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly singleColumn: BooleanConstructor;
     readonly size: {
-        readonly type: import("vue").PropType<"small" | "medium" | "large">;
+        readonly type: import("vue").PropType<import("./public-types").DataTableSize>;
         readonly default: "medium";
     };
     readonly remote: BooleanConstructor;
@@ -4368,12 +4365,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;
-    readonly spinProps: {
-        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
-        readonly default: {};
-    };
-    readonly getCsvCell: import("vue").PropType<import("./publicTypes").DataTableGetCsvCell>;
-    readonly getCsvHeader: import("vue").PropType<import("./publicTypes").DataTableGetCsvHeader>;
+    readonly spinProps: import("vue").PropType<import("./public-types").DataTableSpinProps>;
+    readonly getCsvCell: import("vue").PropType<import("./public-types").DataTableGetCsvCell>;
+    readonly getCsvHeader: import("vue").PropType<import("./public-types").DataTableGetCsvHeader>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
@@ -7109,19 +7103,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
     }>>>;
 }>> & Readonly<{}>, {
+    readonly size: import("./public-types").DataTableSize;
     readonly data: import("./interface").RowData[];
-    readonly size: "small" | "medium" | "large";
-    readonly tableLayout: "fixed" | "auto";
-    readonly columns: import("./interface").TableColumns<any>;
-    readonly loading: boolean;
-    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
     readonly bordered: boolean | undefined;
+    readonly loading: boolean;
     readonly allowCheckingNotLoaded: boolean;
     readonly remote: boolean;
     readonly cascade: boolean;
     readonly virtualScroll: boolean;
     readonly pagination: false | import("../../pagination").PaginationProps;
     readonly paginateSinglePage: boolean;
+    readonly columns: import("./interface").TableColumns<any>;
     readonly bottomBordered: boolean | undefined;
     readonly striped: boolean;
     readonly defaultCheckedRowKeys: RowKey[];
@@ -7134,10 +7126,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly virtualScrollHeader: boolean;
     readonly headerHeight: number;
     readonly minRowHeight: number;
+    readonly tableLayout: "fixed" | "auto";
     readonly childrenKey: string;
     readonly indent: number;
     readonly flexHeight: boolean;
     readonly summaryPlacement: "top" | "bottom";
-    readonly paginationBehaviorOnFilter: "first" | "current";
+    readonly paginationBehaviorOnFilter: "current" | "first";
 }, SlotsType<DataTableSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -45,8 +45,14 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
         const rtlEnabledRef = (0, _mixins_1.useRtl)('DataTable', mergedRtlRef, mergedClsPrefixRef);
+        const mergedSizeRef = (0, vue_1.computed)(() => {
+            var _a, _b;
+            return (props.size
+                || ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.size)
+                || 'medium');
+        });
         const mergedBottomBorderedRef = (0, vue_1.computed)(() => {
             const { bottomBordered } = props;
             // do not add bottom bordered class if bordered is true
@@ -78,12 +84,7 @@ exports.default = (0, vue_1.defineComponent)({
             paginatedDataRef
         });
         const { stickyExpandedRowsRef, mergedExpandedRowKeysRef, renderExpandRef, expandableRef, doUpdateExpandedRowKeys } = (0, use_expand_1.useExpand)(props, treeMateRef);
-        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = (0, use_scroll_1.useScroll)(props, {
-            bodyWidthRef,
-            mainTableInstRef,
-            mergedCurrentPageRef
-        });
-        const { localeRef } = (0, _mixins_1.useLocale)('DataTable');
+        const maxHeightRef = (0, vue_1.toRef)(props, 'maxHeight');
         const mergedTableLayoutRef = (0, vue_1.computed)(() => {
             // Layout
             // virtual |descrete header | ellpisis => fixed
@@ -96,7 +97,17 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return props.tableLayout;
         });
+        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, xScrollableRef, explicitlyScrollableRef } = (0, use_scroll_1.useScroll)(props, {
+            bodyWidthRef,
+            mainTableInstRef,
+            mergedCurrentPageRef,
+            maxHeightRef,
+            mergedTableLayoutRef
+        });
+        const { localeRef } = (0, _mixins_1.useLocale)('DataTable');
         (0, vue_1.provide)(interface_1.dataTableInjectionKey, {
+            xScrollableRef,
+            explicitlyScrollableRef,
             props,
             treeMateRef,
             renderExpandIconRef: (0, vue_1.toRef)(props, 'renderExpandIcon'),
@@ -160,7 +171,7 @@ exports.default = (0, vue_1.defineComponent)({
             }),
             onLoadRef: (0, vue_1.toRef)(props, 'onLoad'),
             mergedTableLayoutRef,
-            maxHeightRef: (0, vue_1.toRef)(props, 'maxHeight'),
+            maxHeightRef,
             minHeightRef: (0, vue_1.toRef)(props, 'minHeight'),
             flexHeightRef: (0, vue_1.toRef)(props, 'flexHeight'),
             headerCheckboxDisabledRef,
@@ -201,8 +212,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, tdColorSorting, tdColorSortingModal, tdColorSortingPopover, thColorSorting, thColorSortingModal, thColorSortingPopover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
+            const mergedSize = mergedSizeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, tdColorSorting, tdColorSortingModal, tdColorSortingPopover, thColorSorting, thColorSortingModal, thColorSortingPopover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('thPadding', mergedSize)]: thPadding, [(0, _utils_1.createKey)('tdPadding', mergedSize)]: tdPadding } } = themeRef.value;
             return {
                 '--n-font-size': fontSize,
                 '--n-th-padding': thPadding,
@@ -254,7 +265,7 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('data-table', (0, vue_1.computed)(() => props.size[0]), cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('data-table', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
             : undefined;
         const mergedShowPaginationRef = (0, vue_1.computed)(() => {
             if (!props.pagination)

package/lib/data-table/src/HeaderButton/RenderFilter.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    show: boolean;
     active: boolean;
+    show: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -26,5 +26,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     flexHeight: import("vue").Ref<boolean, boolean>;
     handleBodyResize: (entry: ResizeObserverEntry) => void;
+    scrollX: import("vue").Ref<string | number | undefined, string | number | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -11,7 +11,7 @@ const Header_1 = __importDefault(require("./TableParts/Header"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'MainTable',
     setup() {
-        const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, virtualScrollHeaderRef, syncScrollState } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, virtualScrollHeaderRef, syncScrollState, scrollXRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const headerInstRef = (0, vue_1.ref)(null);
         const bodyInstRef = (0, vue_1.ref)(null);
         const selfElRef = (0, vue_1.ref)(null);
@@ -73,7 +73,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         return Object.assign({ maxHeight: maxHeightRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
             headerInstRef,
-            bodyInstRef, bodyStyle: bodyStyleRef, flexHeight: flexHeightRef, handleBodyResize }, exposedMethods);
+            bodyInstRef, bodyStyle: bodyStyleRef, flexHeight: flexHeightRef, handleBodyResize, scrollX: scrollXRef }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, maxHeight, flexHeight } = this;