naive-ui 2.22.0 → 2.24.0

package/lib/countdown/src/Countdown.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const countdownProps = {
+    label: String,
+    duration: {
+        type: Number,
+        default: 0
+    },
+    active: {
+        type: Boolean,
+        default: true
+    },
+    precision: {
+        type: Number,
+        default: 0
+    },
+    render: Function,
+    onFinish: Function
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Countdown',
+    props: countdownProps,
+    setup(props) {
+        let timerId = null;
+        let rafId = null;
+        let elapsed = 0;
+        let finished = false;
+        const timeInfo = (0, vue_1.reactive)({
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+            milliseconds: 0
+        });
+        deriveDisplayValue(props.duration);
+        let pnow = -1;
+        function getDistance(time) {
+            return props.duration - elapsed + pnow - time;
+        }
+        function deriveDisplayValue(distance) {
+            const hours = Math.floor(distance / 3600000);
+            const minutes = Math.floor((distance % 3600000) / 60000);
+            const seconds = Math.floor((distance % 60000) / 1000);
+            const milliseconds = Math.floor(distance % 1000);
+            timeInfo.hours = hours;
+            timeInfo.minutes = minutes;
+            timeInfo.seconds = seconds;
+            timeInfo.milliseconds = milliseconds;
+        }
+        function getDisplayValue(info) {
+            const { hours, minutes, seconds, milliseconds } = info;
+            const { precision } = props;
+            switch (precision) {
+                case 0:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                default:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(Math.floor(milliseconds / (precision === 1 ? 100 : precision === 2 ? 10 : 1))).padStart(precision, '0')}`;
+            }
+        }
+        const frame = () => {
+            var _a;
+            const { precision } = props;
+            const distance = getDistance(performance.now());
+            if (distance <= 0) {
+                deriveDisplayValue(0);
+                stopTimer();
+                if (!finished) {
+                    (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props);
+                    finished = true;
+                }
+                return;
+            }
+            let leftTime;
+            switch (precision) {
+                case 3:
+                case 2:
+                    leftTime = distance % 34; // about 30 fps
+                    break;
+                case 1:
+                    leftTime = distance % 100;
+                    break;
+                default:
+                    leftTime = distance % 1000;
+            }
+            deriveDisplayValue(distance);
+            timerId = window.setTimeout(() => {
+                frame();
+            }, leftTime);
+        };
+        const stopTimer = () => {
+            if (timerId !== null) {
+                window.clearTimeout(timerId);
+                timerId = null;
+            }
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        (0, vue_1.onMounted)(() => {
+            (0, vue_1.watchEffect)(() => {
+                if (props.active) {
+                    pnow = performance.now();
+                    frame();
+                }
+                else {
+                    const now = performance.now();
+                    if (pnow !== -1) {
+                        elapsed += now - pnow;
+                    }
+                    stopTimer();
+                }
+            });
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            stopTimer();
+        });
+        return () => {
+            const { render } = props;
+            if (render) {
+                return render(timeInfo);
+            }
+            else {
+                return getDisplayValue(timeInfo);
+            }
+        };
+    }
+});

package/lib/countdown/src/utils.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -82,31 +82,11 @@ export declare const dataTableProps: {
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -1990,31 +1970,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -3817,45 +3777,45 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--th-padding': string;
-        '--td-padding': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--line-height': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--th-color': string;
-        '--th-color-hover': string;
-        '--th-color-modal': string;
-        '--th-color-hover-modal': string;
-        '--th-color-popover': string;
-        '--th-color-hover-popover': string;
-        '--td-color': string;
-        '--td-color-hover': string;
-        '--td-color-modal': string;
-        '--td-color-hover-modal': string;
-        '--td-color-popover': string;
-        '--td-color-hover-popover': string;
-        '--th-text-color': string;
-        '--td-text-color': string;
-        '--th-font-weight': string;
-        '--th-button-color-hover': string;
-        '--th-icon-color': string;
-        '--th-icon-color-active': string;
-        '--filter-size': string;
-        '--pagination-margin': string;
-        '--empty-padding': string;
-        '--box-shadow-before': string;
-        '--box-shadow-after': string;
-        '--sorter-size': string;
-        '--loading-size': string;
-        '--loading-color': string;
-        '--opacity-loading': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-font-size': string;
+        '--n-th-padding': string;
+        '--n-td-padding': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-line-height': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-th-color': string;
+        '--n-th-color-hover': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-hover-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-color-hover-popover': string;
+        '--n-td-color': string;
+        '--n-td-color-hover': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-hover-modal': string;
+        '--n-n-td-color-popover': string;
+        '--n-td-color-hover-popover': string;
+        '--n-th-text-color': string;
+        '--n-td-text-color': string;
+        '--n-th-font-weight': string;
+        '--n-th-button-color-hover': string;
+        '--n-th-icon-color': string;
+        '--n-th-icon-color-active': string;
+        '--n-filter-size': string;
+        '--n-pagination-margin': string;
+        '--n-empty-padding': string;
+        '--n-box-shadow-before': string;
+        '--n-box-shadow-after': string;
+        '--n-sorter-size': string;
+        '--n-loading-size': string;
+        '--n-loading-color': string;
+        '--n-opacity-loading': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
     filter: (filters: import("./interface").FilterState | null) => void;
     filters: (filters: import("./interface").FilterState | null) => void;
@@ -6731,7 +6691,6 @@ declare const _default: import("vue").DefineComponent<{
     virtualScroll: boolean;
     remote: boolean;
     pagination: false | PaginationProps;
-    onPageSizeChange: MaybeArray<(pageSize: number) => void> | undefined;
     bottomBordered: boolean | undefined;
     striped: boolean;
     defaultCheckedRowKeys: RowKey[];
@@ -6742,9 +6701,5 @@ declare const _default: import("vue").DefineComponent<{
     childrenKey: string;
     indent: number;
     flexHeight: boolean;
-    onPageChange: MaybeArray<(page: number) => void> | undefined;
-    onSorterChange: MaybeArray<OnUpdateSorter> | undefined;
-    onFiltersChange: MaybeArray<OnUpdateFilters> | undefined;
-    onCheckedRowKeysChange: MaybeArray<OnUpdateCheckedRowKeys> | undefined;
 }>;
 export default _default;

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

@@ -16,9 +16,9 @@ const use_check_1 = require("./use-check");
 const use_table_data_1 = require("./use-table-data");
 const use_scroll_1 = require("./use-scroll");
 const interface_1 = require("./interface");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { pagination: {
         type: [Object, Boolean],
         default: false
@@ -62,57 +62,31 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
         default: 16
     }, flexHeight: Boolean, '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], 
     // deprecated
-    onPageChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onPageSizeChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onSorterChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onFiltersChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onCheckedRowKeysChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
     alias: ['AdvancedTable'],
     props: exports.dataTableProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onPageChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
+                }
+                if (props.onPageSizeChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onSorterChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
+                }
+                if (props.onFiltersChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
+                }
+                if (props.onCheckedRowKeysChange !== undefined) {
+                    (0, _utils_1.warnOnce)('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const mergedBottomBorderedRef = (0, vue_1.computed)(() => {
             const { bottomBordered } = props;
@@ -206,9 +180,9 @@ exports.default = (0, vue_1.defineComponent)({
                 const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return {
-                    '--action-padding': actionPadding,
-                    '--action-button-margin': actionButtonMargin,
-                    '--action-divider-color': actionDividerColor
+                    '--n-action-padding': actionPadding,
+                    '--n-action-button-margin': actionButtonMargin,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTableLayoutRef,
@@ -241,45 +215,45 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, 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, 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;
                 return {
-                    '--font-size': fontSize,
-                    '--th-padding': thPadding,
-                    '--td-padding': tdPadding,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--line-height': lineHeight,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--th-color': thColor,
-                    '--th-color-hover': thColorHover,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-hover-modal': thColorHoverModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-color-hover-popover': thColorHoverPopover,
-                    '--td-color': tdColor,
-                    '--td-color-hover': tdColorHover,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-hover-modal': tdColorHoverModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-color-hover-popover': tdColorHoverPopover,
-                    '--th-text-color': thTextColor,
-                    '--td-text-color': tdTextColor,
-                    '--th-font-weight': thFontWeight,
-                    '--th-button-color-hover': thButtonColorHover,
-                    '--th-icon-color': thIconColor,
-                    '--th-icon-color-active': thIconColorActive,
-                    '--filter-size': filterSize,
-                    '--pagination-margin': paginationMargin,
-                    '--empty-padding': emptyPadding,
-                    '--box-shadow-before': boxShadowBefore,
-                    '--box-shadow-after': boxShadowAfter,
-                    '--sorter-size': sorterSize,
-                    '--loading-size': loadingSize,
-                    '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-font-size': fontSize,
+                    '--n-th-padding': thPadding,
+                    '--n-td-padding': tdPadding,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-line-height': lineHeight,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-th-color': thColor,
+                    '--n-th-color-hover': thColorHover,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-hover-modal': thColorHoverModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-color-hover-popover': thColorHoverPopover,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-hover': tdColorHover,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-hover-modal': tdColorHoverModal,
+                    '--n-n-td-color-popover': tdColorPopover,
+                    '--n-td-color-hover-popover': tdColorHoverPopover,
+                    '--n-th-text-color': thTextColor,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-button-color-hover': thButtonColorHover,
+                    '--n-th-icon-color': thIconColor,
+                    '--n-th-icon-color-active': thIconColorActive,
+                    '--n-filter-size': filterSize,
+                    '--n-pagination-margin': paginationMargin,
+                    '--n-empty-padding': emptyPadding,
+                    '--n-box-shadow-before': boxShadowBefore,
+                    '--n-box-shadow-after': boxShadowAfter,
+                    '--n-sorter-size': sorterSize,
+                    '--n-loading-size': loadingSize,
+                    '--n-loading-color': loadingColor,
+                    '--n-opacity-loading': opacityLoading,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
+const vooks_1 = require("vooks");
+const common_1 = require("../../../_mixins/common");
 const cssr_1 = require("../../../_utils/cssr");
 const _internal_1 = require("../../../_internal");
 const _utils_1 = require("../../../_utils");
@@ -17,7 +19,6 @@ const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
 const Header_1 = __importDefault(require("./Header"));
-const vooks_1 = require("vooks");
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
@@ -195,12 +196,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
                     if (leftActiveFixedColKey === null)
                         return null;
-                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--box-shadow-after)' });
+                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--n-box-shadow-after)' });
                 };
                 const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
                     if (rightActiveFixedColKey === null)
                         return null;
-                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--box-shadow-before)' });
+                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
                 };
                 return (0, cssr_1.c)([
                     createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
@@ -231,7 +232,8 @@ exports.default = (0, vue_1.defineComponent)({
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: cProps
+                props: cProps,
+                anchorMetaName: common_1.cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });
@@ -286,7 +288,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, showScrollbar: !this.bodyShowHeaderOnly, 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, { 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/Cell.js

@@ -38,10 +38,9 @@ exports.default = (0, vue_1.defineComponent)({
                 cell = (0, lodash_1.get)(row, key);
             }
         }
-        const tooltip = typeof ellipsis === 'object' ? ellipsis.tooltip : undefined;
-        if (tooltip) {
+        if (ellipsis && typeof ellipsis === 'object') {
             const { mergedTheme } = this;
-            return ((0, vue_1.h)(ellipsis_1.NEllipsis, { tooltip: tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, { default: () => cell }));
+            return ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
         }
         return cell;
     }

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

@@ -110,7 +110,7 @@ exports.default = (0, vue_1.defineComponent)({
                     column.type === 'selection' ? ((0, vue_1.h)(vue_1.Fragment, null,
                         (0, vue_1.h)(checkbox_1.NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
                         checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : 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 && ellipsis.tooltip ? ((0, vue_1.h)(ellipsis_1.NEllipsis, { tooltip: ellipsis.tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, {
+                        : 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,

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

@@ -33,7 +33,7 @@ export declare type SortOrder = 'ascend' | 'descend' | false;
 export declare type Ellipsis = boolean | EllipsisProps;
 export interface CommonColumnInfo {
     fixed?: 'left' | 'right';
-    width?: number;
+    width?: number | string;
     className?: string;
     align?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;