naive-ui 2.43.2 → 2.44.1

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

@@ -48,12 +48,29 @@ 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 { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
+        const formItem = (0, _mixins_1.useFormItem)(props, {
+            mergedSize: (NFormItem) => {
+                var _a, _b;
+                const { size } = props;
+                if (size)
+                    return size;
+                const { mergedSize: formItemSize } = NFormItem || {};
+                if (formItemSize === null || formItemSize === void 0 ? void 0 : formItemSize.value)
+                    return formItemSize.value;
+                const configSize = (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.ColorPicker) === null || _b === void 0 ? void 0 : _b.size;
+                if (configSize)
+                    return configSize;
+                return 'medium';
+            }
+        });
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = (0, _mixins_1.useLocale)('global');
-        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('ColorPicker', '-color-picker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(context_1.colorPickerInjectionKey, {
             themeRef,
@@ -406,7 +423,6 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
-            selfRef,
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
@@ -415,12 +431,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 +459,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/public-types.d.ts

@@ -0,0 +1 @@
+export type ColorPickerSize = 'small' | 'medium' | 'large';

package/lib/color-picker/src/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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/internal-interface.d.ts

@@ -6,6 +6,7 @@ import type { InternalSelectionTheme } from '../../_internal/selection/styles';
 import type { Hljs } from '../../_mixins';
 import type { AlertTheme } from '../../alert/styles';
 import type { AnchorTheme } from '../../anchor/styles';
+import type { AutoCompleteSize } from '../../auto-complete/src/public-types';
 import type { AutoCompleteTheme } from '../../auto-complete/styles';
 import type { AvatarGroupTheme } from '../../avatar-group/styles';
 import type { AvatarTheme } from '../../avatar/styles';
@@ -13,27 +14,36 @@ 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 { CascaderSize } from '../../cascader/src/public-types';
 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 { ColorPickerSize } from '../../color-picker/src/public-types';
 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 { DatePickerSize } from '../../date-picker/src/public-types';
 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,15 +53,18 @@ 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';
 import type { IconWrapperTheme } from '../../icon-wrapper/styles';
 import type { IconTheme } from '../../icon/styles';
 import type { ImageTheme } from '../../image/styles';
+import type { InputNumberSize } from '../../input-number/src/public-types';
 import type { InputNumberTheme } from '../../input-number/styles';
+import type { InputOtpSize } from '../../input-otp/src/public-types';
 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';
@@ -61,40 +74,54 @@ import type { LoadingBarTheme } from '../../loading-bar/styles';
 import type { NDateLocale, NLocale } from '../../locales';
 import type { LogTheme } from '../../log/styles';
 import type { MarqueeTheme } from '../../marquee/styles';
+import type { MentionSize } from '../../mention/src/public-types';
 import type { MentionTheme } from '../../mention/styles';
 import type { MenuTheme } from '../../menu/styles';
 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';
+import type { TransferSize } from '../../transfer/src/public-types';
 import type { TransferTheme } from '../../transfer/styles';
+import type { TreeSelectSize } from '../../tree-select/src/public-types';
 import type { TreeSelectTheme } from '../../tree-select/styles';
 import type { TreeTheme } from '../../tree/styles';
 import type { TypographyTheme } from '../../typography/styles';
@@ -145,6 +172,7 @@ export interface GlobalThemeWithoutCommon {
     Image?: ImageTheme;
     Input?: InputTheme;
     InputNumber?: InputNumberTheme;
+    InputOtp?: InputOtpTheme;
     Layout?: LayoutTheme;
     LegacyTransfer?: LegacyTransferTheme;
     List?: ListTheme;
@@ -193,27 +221,121 @@ export interface GlobalThemeWithoutCommon {
     Heatmap?: HeatmapTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
-    InputOtp?: InputOtpTheme;
 }
 export interface GlobalComponentConfig {
+    AutoComplete?: {
+        size?: AutoCompleteSize;
+    };
+    Cascader?: {
+        size?: CascaderSize;
+        renderEmpty?: () => VNodeChild;
+    };
+    Button?: {
+        size?: ButtonSize;
+    };
+    Card?: {
+        size?: CardSize;
+    };
+    Checkbox?: {
+        size?: CheckboxSize;
+    };
     Pagination?: {
+        size?: PaginationSize;
         inputSize?: InputSize;
         selectSize?: SelectSize;
     };
+    ColorPicker?: {
+        size?: ColorPickerSize;
+    };
     DatePicker?: {
+        size?: DatePickerSize;
         timePickerSize?: TimePickerSize;
     };
     Dialog?: {
         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;
+    };
+    InputNumber?: {
+        size?: InputNumberSize;
+    };
+    InputOtp?: {
+        size?: InputOtpSize;
+    };
+    Mention?: {
+        size?: MentionSize;
+    };
+    Select?: {
+        size?: SelectSize;
+        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;
+    };
+    TimePicker?: {
+        size?: TimePickerSize;
+    };
+    Transfer?: {
+        size?: TransferSize;
+        renderEmpty?: () => VNodeChild;
+    };
+    Tree?: {
+        renderEmpty?: () => VNodeChild;
+    };
+    TreeSelect?: {
+        size?: TreeSelectSize;
+        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;
+    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

@@ -45,10 +45,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: true;
     };
     readonly singleColumn: BooleanConstructor;
-    readonly size: {
-        readonly type: import("vue").PropType<"small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+    readonly size: import("vue").PropType<import("./public-types").DataTableSize>;
     readonly remote: BooleanConstructor;
     readonly defaultExpandedRowKeys: {
         readonly type: import("vue").PropType<RowKey[]>;
@@ -99,12 +96,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"]>;
@@ -4314,10 +4308,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: true;
     };
     readonly singleColumn: BooleanConstructor;
-    readonly size: {
-        readonly type: import("vue").PropType<"small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+    readonly size: import("vue").PropType<import("./public-types").DataTableSize>;
     readonly remote: BooleanConstructor;
     readonly defaultExpandedRowKeys: {
         readonly type: import("vue").PropType<RowKey[]>;
@@ -4368,12 +4359,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,9 +7097,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
     }>>>;
 }>> & Readonly<{}>, {
-    readonly size: "small" | "medium" | "large";
     readonly data: import("./interface").RowData[];
-    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
     readonly bordered: boolean | undefined;
     readonly loading: boolean;
     readonly allowCheckingNotLoaded: boolean;

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)