naive-ui 2.21.5 → 2.23.2

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

@@ -3817,45 +3817,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;

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

@@ -8,7 +8,6 @@ const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
-const empty_1 = require("../../empty");
 const pagination_1 = require("../../pagination");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
@@ -113,7 +112,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
     alias: ['AdvancedTable'],
     props: exports.dataTableProps,
-    setup(props) {
+    setup(props, { slots }) {
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const mergedBottomBorderedRef = (0, vue_1.computed)(() => {
             const { bottomBordered } = props;
@@ -137,7 +136,7 @@ exports.default = (0, vue_1.defineComponent)({
             paginatedDataRef
         });
         const { mergedExpandedRowKeysRef, renderExpandRef, doUpdateExpandedRowKeys } = (0, use_expand_1.useExpand)(props);
-        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = (0, use_scroll_1.useScroll)(props, {
+        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = (0, use_scroll_1.useScroll)(props, {
             scrollPartRef,
             bodyWidthRef,
             mainTableInstRef,
@@ -157,6 +156,7 @@ exports.default = (0, vue_1.defineComponent)({
             return props.tableLayout;
         });
         (0, vue_1.provide)(interface_1.dataTableInjectionKey, {
+            slots,
             indentRef: (0, vue_1.toRef)(props, 'indent'),
             firstContentfulColIndexRef,
             bodyWidthRef,
@@ -169,7 +169,9 @@ exports.default = (0, vue_1.defineComponent)({
             colsRef,
             paginatedDataRef,
             leftActiveFixedColKeyRef,
+            leftActiveFixedChildrenColKeysRef,
             rightActiveFixedColKeyRef,
+            rightActiveFixedChildrenColKeysRef,
             leftFixedColumnsRef,
             rightFixedColumnsRef,
             fixedColumnLeftMapRef,
@@ -204,9 +206,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,
@@ -239,45 +241,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
                 };
             }) });
     },
@@ -295,15 +297,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             ], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-wrapper` },
-                (0, vue_1.h)(MainTable_1.default, { ref: "mainTableInstRef" }, {
-                    default: () => this.paginatedData.length === 0 ? ((0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefix}-data-table-empty`,
-                            this.loading &&
-                                `${mergedClsPrefix}-data-table-empty--hide`
-                        ] }, (0, vue_1.renderSlot)(this.$slots, 'empty', undefined, () => [
-                        (0, vue_1.h)(empty_1.NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
-                    ]))) : null
-                })),
+                (0, vue_1.h)(MainTable_1.default, { ref: "mainTableInstRef" })),
             this.pagination ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table__pagination` },
                 (0, vue_1.h)(pagination_1.NPagination, Object.assign({ theme: this.mergedTheme.peers.Pagination, themeOverrides: this.mergedTheme.peerOverrides.Pagination, disabled: this.loading }, this.mergedPagination)))) : null,
             (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {

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

@@ -72,7 +72,6 @@ exports.default = (0, vue_1.defineComponent)({
         const headerInBody = maxHeight === undefined && !flexHeight;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-base-table`, ref: "selfElRef" },
             headerInBody ? null : (0, vue_1.h)(Header_1.default, { ref: "headerInstRef" }),
-            (0, vue_1.h)(Body_1.default, { ref: "bodyInstRef", style: this.bodyStyle, showHeader: headerInBody, flexHeight: flexHeight, onResize: this.handleBodyResize }),
-            (0, vue_1.renderSlot)(this.$slots, 'default')));
+            (0, vue_1.h)(Body_1.default, { ref: "bodyInstRef", bodyStyle: this.bodyStyle, showHeader: headerInBody, flexHeight: flexHeight, onResize: this.handleBodyResize })));
     }
 });

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

@@ -1,12 +1,16 @@
-import { PropType } from 'vue';
-import { RowKey, TmNode } from '../interface';
+import { PropType, CSSProperties } from 'vue';
+import { RowKey, ColumnKey, TmNode } from '../interface';
 import type { ColItem } from '../use-group-header';
 declare const _default: import("vue").DefineComponent<{
     onResize: PropType<(e: ResizeObserverEntry) => void>;
     showHeader: BooleanConstructor;
     flexHeight: BooleanConstructor;
+    bodyStyle: PropType<CSSProperties>;
 }, {
     getScrollContainer: () => HTMLElement | null;
+    dataTableSlots: Readonly<{
+        [name: string]: import("vue").Slot | undefined;
+    }>;
     componentId: string;
     scrollbarInstRef: import("vue").Ref<{
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
@@ -20,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         itemsElRef: HTMLElement | null;
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
+    emptyElRef: import("vue").Ref<HTMLElement | null>;
     summary: import("vue").Ref<import("../interface").CreateSummary<import("../interface").InternalRowData> | undefined>;
     mergedClsPrefix: import("vue").Ref<string>;
     mergedTheme: import("vue").Ref<{
@@ -976,17 +981,21 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
+    loading: import("vue").Ref<boolean>;
+    bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
+    shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
+    empty: import("vue").ComputedRef<boolean>;
     paginatedData: import("vue").ComputedRef<{
         tmNode: TmNode;
         key: import("treemate").Key;
         striped: boolean;
     }[]>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[]>;
-    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnLeftMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
-    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnRightMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
@@ -1019,11 +1028,13 @@ declare const _default: import("vue").DefineComponent<{
     onResize?: unknown;
     showHeader?: unknown;
     flexHeight?: unknown;
+    bodyStyle?: unknown;
 } & {
     flexHeight: boolean;
     showHeader: boolean;
 } & {
     onResize?: ((e: ResizeObserverEntry) => void) | undefined;
+    bodyStyle?: CSSProperties | undefined;
 }>, {
     flexHeight: boolean;
     showHeader: boolean;

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

@@ -7,9 +7,12 @@ 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");
+const empty_1 = require("../../../empty");
 const interface_1 = require("../interface");
 const utils_1 = require("../utils");
 const Cell_1 = __importDefault(require("./Cell"));
@@ -75,14 +78,24 @@ exports.default = (0, vue_1.defineComponent)({
     props: {
         onResize: Function,
         showHeader: Boolean,
-        flexHeight: Boolean
+        flexHeight: Boolean,
+        bodyStyle: Object
     },
     setup(props) {
-        const { mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
+        const { slots: dataTableSlots, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
         const virtualListRef = (0, vue_1.ref)(null);
+        const emptyElRef = (0, vue_1.ref)(null);
+        const emptyRef = (0, vooks_1.useMemo)(() => paginatedDataRef.value.length === 0);
+        // If header is not inside & empty is displayed, no table part would be
+        // shown. So to collect a body width, we need to put a ref on empty element
+        const shouldDisplaySomeTablePartRef = (0, vooks_1.useMemo)(() => props.showHeader || !emptyRef.value);
+        // If no body is shown, we shouldn't show scrollbar
+        const bodyShowHeaderOnlyRef = (0, vooks_1.useMemo)(() => {
+            return props.showHeader || emptyRef.value;
+        });
         let lastSelectedKey = '';
         const mergedExpandedRowKeySetRef = (0, vue_1.computed)(() => {
             return new Set(mergedExpandedRowKeysRef.value);
@@ -119,6 +132,15 @@ exports.default = (0, vue_1.defineComponent)({
             lastSelectedKey = tmNode.key;
         }
         function getScrollContainer() {
+            if (!shouldDisplaySomeTablePartRef.value) {
+                const { value: emptyEl } = emptyElRef;
+                if (emptyEl) {
+                    return emptyEl;
+                }
+                else {
+                    return null;
+                }
+            }
             if (virtualScrollRef.value) {
                 return virtualListContainer();
             }
@@ -170,36 +192,48 @@ exports.default = (0, vue_1.defineComponent)({
         };
         // manually control shadow style to avoid rerender
         const style = (0, cssr_1.c)([
-            ({ props: cProps }) => (0, cssr_1.c)([
-                cProps.leftActiveFixedColKey === null
-                    ? null
-                    : (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${cProps.leftActiveFixedColKey}"]::after`, {
-                        boxShadow: 'var(--box-shadow-after)'
-                    }),
-                cProps.rightActiveFixedColKey === null
-                    ? null
-                    : (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${cProps.rightActiveFixedColKey}"]::before`, {
-                        boxShadow: 'var(--box-shadow-before)'
-                    })
-            ])
+            ({ props: cProps }) => {
+                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(--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(--n-box-shadow-before)' });
+                };
+                return (0, cssr_1.c)([
+                    createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
+                    createActiveRightFixedStyle(cProps.rightActiveFixedColKey),
+                    cProps.leftActiveFixedChildrenColKeys.map((leftActiveFixedColKey) => createActiveLeftFixedStyle(leftActiveFixedColKey)),
+                    cProps.rightActiveFixedChildrenColKeys.map((rightActiveFixedColKey) => createActiveRightFixedStyle(rightActiveFixedColKey))
+                ]);
+            }
         ]);
         let fixedStyleMounted = false;
         (0, vue_1.watchEffect)(() => {
             const { value: leftActiveFixedColKey } = leftActiveFixedColKeyRef;
+            const { value: leftActiveFixedChildrenColKeys } = leftActiveFixedChildrenColKeysRef;
             const { value: rightActiveFixedColKey } = rightActiveFixedColKeyRef;
+            const { value: rightActiveFixedChildrenColKeys } = rightActiveFixedChildrenColKeysRef;
             if (!fixedStyleMounted &&
                 leftActiveFixedColKey === null &&
                 rightActiveFixedColKey === null) {
                 return;
             }
+            const cProps = {
+                leftActiveFixedColKey,
+                leftActiveFixedChildrenColKeys,
+                rightActiveFixedColKey,
+                rightActiveFixedChildrenColKeys,
+                componentId
+            };
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: {
-                    leftActiveFixedColKey,
-                    rightActiveFixedColKey,
-                    componentId
-                }
+                props: cProps,
+                anchorMetaName: common_1.cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });
@@ -208,9 +242,11 @@ exports.default = (0, vue_1.defineComponent)({
                 id: `n-${componentId}`
             });
         });
-        return Object.assign({ componentId,
+        return Object.assign({ dataTableSlots,
+            componentId,
             scrollbarInstRef,
-            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: (0, vue_1.computed)(() => {
+            virtualListRef,
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedData: (0, vue_1.computed)(() => {
                 const { value: striped } = stripedRef;
                 return paginatedDataRef.value.map(striped
                     ? (tmNode, index) => {
@@ -252,13 +288,13 @@ exports.default = (0, vue_1.defineComponent)({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        return ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, 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 = {};
                 // coordinate to related hover keys
                 const cordKey = {};
-                const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, showHeader, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -343,6 +379,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
                             `${mergedClsPrefix}-data-table-tr`,
+                            isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
                             striped && `${mergedClsPrefix}-data-table-tr--striped`,
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
@@ -441,10 +478,10 @@ exports.default = (0, vue_1.defineComponent)({
                             tableLayout: this.mergedTableLayout
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
-                        showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
-                        (0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
+                        this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
+                        !this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
                             return renderRow(rowInfo, rowIndex, false);
-                        }))));
+                        }))) : null));
                 }
                 else {
                     return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
@@ -459,5 +496,22 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }));
+        if (this.empty) {
+            const createEmptyNode = () => ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-data-table-empty`,
+                    this.loading && `${mergedClsPrefix}-data-table-empty--hide`
+                ], style: this.bodyStyle, ref: "emptyElRef" }, (0, vue_1.renderSlot)(this.dataTableSlots, 'empty', undefined, () => [
+                (0, vue_1.h)(empty_1.NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+            ])));
+            if (this.shouldDisplaySomeTablePart) {
+                return ((0, vue_1.h)(vue_1.Fragment, null,
+                    tableNode,
+                    createEmptyNode()));
+            }
+            else {
+                return ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.onResize }, { default: createEmptyNode }));
+            }
+        }
+        return tableNode;
     }
 });