naive-ui 2.21.5 → 2.23.2

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

@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed } from 'vue';
+import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed, renderSlot, Fragment } from 'vue';
 import { pxfy, repeat } from 'seemly';
-import { VirtualList } from 'vueuc';
+import { VirtualList, VResizeObserver } from 'vueuc';
+import { useMemo } from 'vooks';
+import { cssrAnchorMetaName } from '../../../_mixins/common';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
 import { formatLength } from '../../../_utils';
+import { NEmpty } from '../../../empty';
 import { dataTableInjectionKey } from '../interface';
 import { createRowClassName, getColKey, isColumnSorting } from '../utils';
 import Cell from './Cell';
@@ -70,14 +73,24 @@ export default 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
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
         const virtualListRef = ref(null);
+        const emptyElRef = ref(null);
+        const emptyRef = 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 = useMemo(() => props.showHeader || !emptyRef.value);
+        // If no body is shown, we shouldn't show scrollbar
+        const bodyShowHeaderOnlyRef = useMemo(() => {
+            return props.showHeader || emptyRef.value;
+        });
         let lastSelectedKey = '';
         const mergedExpandedRowKeySetRef = computed(() => {
             return new Set(mergedExpandedRowKeysRef.value);
@@ -114,6 +127,15 @@ export default 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();
             }
@@ -165,36 +187,48 @@ export default defineComponent({
         };
         // manually control shadow style to avoid rerender
         const style = c([
-            ({ props: cProps }) => c([
-                cProps.leftActiveFixedColKey === null
-                    ? null
-                    : c(`[data-n-id="${cProps.componentId}"] [data-col-key="${cProps.leftActiveFixedColKey}"]::after`, {
-                        boxShadow: 'var(--box-shadow-after)'
-                    }),
-                cProps.rightActiveFixedColKey === null
-                    ? null
-                    : 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 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 c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
+                };
+                return c([
+                    createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
+                    createActiveRightFixedStyle(cProps.rightActiveFixedColKey),
+                    cProps.leftActiveFixedChildrenColKeys.map((leftActiveFixedColKey) => createActiveLeftFixedStyle(leftActiveFixedColKey)),
+                    cProps.rightActiveFixedChildrenColKeys.map((rightActiveFixedColKey) => createActiveRightFixedStyle(rightActiveFixedColKey))
+                ]);
+            }
         ]);
         let fixedStyleMounted = false;
         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: cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });
@@ -203,9 +237,11 @@ export default 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: computed(() => {
+            virtualListRef,
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedData: computed(() => {
                 const { value: striped } = stripedRef;
                 return paginatedDataRef.value.map(striped
                     ? (tmNode, index) => {
@@ -247,13 +283,13 @@ export default defineComponent({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        return (h(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 = (h(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
@@ -338,6 +374,7 @@ export default 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) => {
@@ -436,10 +473,10 @@ export default defineComponent({
                             tableLayout: this.mergedTableLayout
                         } },
                         h("colgroup", null, cols.map((col) => (h("col", { key: col.key, style: col.style })))),
-                        showHeader ? h(TableHeader, { discrete: false }) : null,
-                        h("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
+                        this.showHeader ? h(TableHeader, { discrete: false }) : null,
+                        !this.empty ? (h("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
                             return renderRow(rowInfo, rowIndex, false);
-                        }))));
+                        }))) : null));
                 }
                 else {
                     return (h(VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
@@ -454,5 +491,22 @@ export default defineComponent({
                 }
             }
         }));
+        if (this.empty) {
+            const createEmptyNode = () => (h("div", { class: [
+                    `${mergedClsPrefix}-data-table-empty`,
+                    this.loading && `${mergedClsPrefix}-data-table-empty--hide`
+                ], style: this.bodyStyle, ref: "emptyElRef" }, renderSlot(this.dataTableSlots, 'empty', undefined, () => [
+                h(NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+            ])));
+            if (this.shouldDisplaySomeTablePart) {
+                return (h(Fragment, null,
+                    tableNode,
+                    createEmptyNode()));
+            }
+            else {
+                return (h(VResizeObserver, { onResize: this.onResize }, { default: createEmptyNode }));
+            }
+        }
+        return tableNode;
     }
 });

package/es/data-table/src/TableParts/Cell.js

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

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

@@ -26,7 +26,7 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         function handleCheckboxUpdateChecked() {
-            if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
+            if (allRowsCheckedRef.value) {
                 doUncheckAll();
             }
             else {
@@ -105,7 +105,7 @@ export default defineComponent({
                     column.type === 'selection' ? (h(Fragment, null,
                         h(NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
                         checkOptions ? (h(SelectionMenu, { clsPrefix: mergedClsPrefix })) : null)) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? (h("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                        : ellipsis && ellipsis.tooltip ? (h(NEllipsis, { tooltip: ellipsis.tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, {
+                        : ellipsis && typeof ellipsis === 'object' ? (h(NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
                             default: () => renderTitle(column)
                         })) : (renderTitle(column)),
                     isColumnSortable(column) ? (h(SortButton, { column: column })) : null,

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

@@ -1,5 +1,5 @@
 import { TreeNode } from 'treemate';
-import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes } from 'vue';
+import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import { NLocale } from '../../locales';
 import { MergedTheme } from '../../_mixins';
@@ -100,6 +100,7 @@ export declare type DataTableSelectionOptions = Array<DataTableSelectionOption |
     onSelect: () => void;
 }>;
 export interface DataTableInjection {
+    slots: Slots;
     indentRef: Ref<number>;
     hasChildrenRef: Ref<boolean>;
     firstContentfulColIndexRef: Ref<number>;
@@ -115,7 +116,9 @@ export interface DataTableInjection {
     leftFixedColumnsRef: Ref<TableColumns>;
     rightFixedColumnsRef: Ref<TableColumns>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    leftActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    rightActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     fixedColumnLeftMapRef: Ref<Record<ColumnKey, {
         start: number;
         end: number;