naive-ui 2.34.4 → 2.36.0

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

@@ -85,7 +85,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -207,16 +207,13 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMouseleaveTable() {
             hoverKeyRef.value = null;
         }
-        function handleMouseenterTable() {
-            scrollPartRef.value = 'body';
-        }
         function virtualListContainer() {
             const { value } = virtualListRef;
-            return value === null || value === void 0 ? void 0 : value.listElRef;
+            return (value === null || value === void 0 ? void 0 : value.listElRef) || null;
         }
         function virtualListContent() {
             const { value } = virtualListRef;
-            return value === null || value === void 0 ? void 0 : value.itemsElRef;
+            return (value === null || value === void 0 ? void 0 : value.itemsElRef) || null;
         }
         function handleVirtualListScroll(e) {
             var _a;
@@ -235,9 +232,11 @@ exports.default = (0, vue_1.defineComponent)({
             scrollTo(arg0, arg1) {
                 var _a, _b;
                 if (virtualScrollRef.value) {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
                 }
                 else {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_b = scrollbarInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(arg0, arg1);
                 }
             }
@@ -327,7 +326,6 @@ exports.default = (0, vue_1.defineComponent)({
                     hasChildren
                 };
             }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
-            handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
             handleMouseleaveTable,
@@ -359,7 +357,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordToPass = {};
                 // coordinate to related hover keys
                 const cordKey = {};
-                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, rowProps, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -414,7 +412,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (!expandable || expandable(rowInfo.tmNode.rawNode))) {
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
-                            key: `${rowInfo.key}-expand`,
+                            key: `${rowInfo.key}-expand`, // solve key repeat of the expanded row
                             tmNode: rowInfo.tmNode,
                             index: rowInfo.index
                         });
@@ -434,7 +432,7 @@ exports.default = (0, vue_1.defineComponent)({
                     const { index: actualRowIndex } = rowInfo;
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
-                        return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr`, key: `${key}__expand` },
+                        return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`, key: `${key}__expand` },
                             (0, vue_1.h)("td", { class: [
                                     `${mergedClsPrefix}-data-table-td`,
                                     `${mergedClsPrefix}-data-table-td--last-col`,
@@ -461,6 +459,7 @@ exports.default = (0, vue_1.defineComponent)({
                             `${mergedClsPrefix}-data-table-tr`,
                             isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
                             striped && `${mergedClsPrefix}-data-table-tr--striped`,
+                            expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
                         var _a, _b, _c, _d, _e;
@@ -515,12 +514,16 @@ exports.default = (0, vue_1.defineComponent)({
                         const hoverKey = isCrossRowTd ? this.hoverKey : null;
                         const { cellProps } = column;
                         const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
+                        const indentOffsetStyle = {
+                            '--indent-offset': ''
+                        };
                         return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, style: [
                                 {
                                     textAlign: column.align || undefined,
                                     left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
                                     right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
                                 },
+                                indentOffsetStyle,
                                 (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''
                             ], colspan: mergedColSpan, rowspan: isVirtual ? undefined : mergedRowSpan, "data-col-key": colKey, class: [
                                 `${mergedClsPrefix}-data-table-td`,
@@ -547,21 +550,26 @@ exports.default = (0, vue_1.defineComponent)({
                             ] }),
                             hasChildren && colIndex === childTriggerColIndex
                                 ? [
-                                    (0, seemly_1.repeat)(isSummary ? 0 : rowInfo.tmNode.level, (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
+                                    (0, seemly_1.repeat)((indentOffsetStyle['--indent-offset'] =
+                                        isSummary ? 0 : rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
                                     isSummary || rowInfo.tmNode.isLeaf ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
                                             handleUpdateExpanded(rowKey, rowInfo.tmNode);
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => { handleRadioUpdateChecked(rowInfo.tmNode); } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => {
+                                    handleRadioUpdateChecked(rowInfo.tmNode);
+                                } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
                                     handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey);
                                 } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
-                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => { handleUpdateExpanded(rowKey, null); } })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
+                                    handleUpdateExpanded(rowKey, null);
+                                } })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };
                 if (!virtualScroll) {
-                    return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, onMouseenter: handleMouseenterTable, style: {
+                    return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                             tableLayout: this.mergedTableLayout
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
@@ -575,7 +583,6 @@ exports.default = (0, vue_1.defineComponent)({
                             clsPrefix: mergedClsPrefix,
                             id: componentId,
                             cols,
-                            onMouseenter: handleMouseenterTable,
                             onMouseleave: handleMouseleaveTable
                         }, showScrollbar: false, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemsStyle: contentStyle, itemResizable: true }, {
                         default: ({ item, index }) => renderRow(item, index, true)

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

@@ -26,5 +26,5 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean, e: MouseEvent | KeyboardEvent) => void>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

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

@@ -26,5 +26,5 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

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

@@ -2500,5 +2500,5 @@ declare const _default: import("vue").DefineComponent<{
     renderCell: PropType<(value: any, rowData: object, column: any) => VNodeChild>;
 }>>, {
     isSummary: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const lodash_1 = require("lodash");
-const ellipsis_1 = require("../../../ellipsis");
+const Ellipsis_1 = __importDefault(require("../../../ellipsis/src/Ellipsis"));
+const PerformantEllipsis_1 = require("../../../ellipsis/src/PerformantEllipsis");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTableCell',
     props: {
@@ -49,7 +53,10 @@ exports.default = (0, vue_1.defineComponent)({
         if (ellipsis) {
             if (typeof ellipsis === 'object') {
                 const { mergedTheme } = this;
-                return ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
+                if (column.ellipsisComponent === 'performant-ellipsis') {
+                    return ((0, vue_1.h)(PerformantEllipsis_1.NPerformantEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
+                }
+                return ((0, vue_1.h)(Ellipsis_1.default, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
             }
             else {
                 return ((0, vue_1.h)("span", { class: `${this.clsPrefix}-data-table-td__ellipsis` }, cell));

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

@@ -31,5 +31,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     expanded: boolean;
     loading: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -25,7 +25,9 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { class: [
                 `${clsPrefix}-data-table-expand-trigger`,
                 this.expanded && `${clsPrefix}-data-table-expand-trigger--expanded`
-            ], onClick: this.onClick },
+            ], onClick: this.onClick, onMousedown: (e) => {
+                e.preventDefault();
+            } },
             (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
                 default: () => {
                     return this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { key: "loading", clsPrefix: this.clsPrefix, radius: 85, strokeWidth: 15, scale: 0.88 })) : this.renderExpandIcon ? (this.renderExpandIcon({

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

@@ -1253,8 +1253,6 @@ declare const _default: import("vue").DefineComponent<{
     checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
     mergedTableLayout: import("vue").Ref<"fixed" | "auto">;
     headerCheckboxDisabled: import("vue").Ref<boolean>;
-    handleMouseenter: () => void;
-    handleMouseleave: () => void;
     handleCheckboxUpdateChecked: () => void;
     handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
@@ -1267,5 +1265,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     discrete: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -28,7 +28,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup() {
-        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, scrollPartRef, mergedTableLayoutRef, headerCheckboxDisabledRef, onUnstableColumnResize, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
+        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, mergedTableLayoutRef, headerCheckboxDisabledRef, onUnstableColumnResize, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const cellElsRef = (0, vue_1.ref)({});
@@ -55,12 +55,6 @@ exports.default = (0, vue_1.defineComponent)({
             const nextSorter = (0, utils_1.createNextSorter)(column, activeSorter);
             deriveNextSorter(nextSorter);
         }
-        function handleMouseenter() {
-            scrollPartRef.value = 'head';
-        }
-        function handleMouseleave() {
-            scrollPartRef.value = 'body';
-        }
         const resizeStartWidthMap = new Map();
         function handleColumnResizeStart(column) {
             resizeStartWidthMap.set(column.key, getCellActualWidth(column.key));
@@ -92,8 +86,6 @@ exports.default = (0, vue_1.defineComponent)({
             checkOptions: checkOptionsRef,
             mergedTableLayout: mergedTableLayoutRef,
             headerCheckboxDisabled: headerCheckboxDisabledRef,
-            handleMouseenter,
-            handleMouseleave,
             handleCheckboxUpdateChecked,
             handleColHeaderClick,
             handleTableHeaderScroll,
@@ -126,7 +118,9 @@ exports.default = (0, vue_1.defineComponent)({
                                 })) : (renderTitle(column))),
                             (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null),
                         (0, utils_1.isColumnFilterable)(column) ? ((0, vue_1.h)(FilterButton_1.default, { column: column, options: column.filterOptions })) : null,
-                        (0, utils_1.isColumnResizable)(column) ? ((0, vue_1.h)(ResizeButton_1.default, { onResizeStart: () => { handleColumnResizeStart(column); }, onResize: (displacementX) => {
+                        (0, utils_1.isColumnResizable)(column) ? ((0, vue_1.h)(ResizeButton_1.default, { onResizeStart: () => {
+                                handleColumnResizeStart(column);
+                            }, onResize: (displacementX) => {
                                 handleColumnResize(column, displacementX);
                             } })) : null));
                 };
@@ -160,8 +154,8 @@ exports.default = (0, vue_1.defineComponent)({
         if (!discrete) {
             return theadVNode;
         }
-        const { handleTableHeaderScroll, handleMouseenter, handleMouseleave, scrollX } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-base-table-header`, onScroll: handleTableHeaderScroll, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave },
+        const { handleTableHeaderScroll, scrollX } = this;
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-base-table-header`, onScroll: handleTableHeaderScroll },
             (0, vue_1.h)("table", { ref: "body", class: `${mergedClsPrefix}-data-table-table`, style: {
                     minWidth: (0, _utils_1.formatLength)(scrollX),
                     tableLayout: mergedTableLayout

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

@@ -8,5 +8,5 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

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

@@ -86,7 +86,7 @@ export declare const dataTableProps: {
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: PropType<"bottom" | "top">;
+        readonly type: PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -2486,9 +2486,7 @@ export interface FilterOption {
 }
 export type TmNode = TreeNode<InternalRowData>;
 export type SortOrder = 'ascend' | 'descend' | false;
-export type Ellipsis = boolean | (EllipsisProps & {
-    style?: CSSProperties;
-});
+export type Ellipsis = boolean | EllipsisProps;
 export interface CommonColumnInfo<T = InternalRowData> {
     fixed?: 'left' | 'right';
     width?: number | string;
@@ -2498,6 +2496,7 @@ export interface CommonColumnInfo<T = InternalRowData> {
     align?: 'left' | 'center' | 'right';
     titleAlign?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;
+    ellipsisComponent?: 'ellipsis' | 'performant-ellipsis';
     cellProps?: (rowData: T, rowIndex: number) => HTMLAttributes;
 }
 export type TableColumnTitle = string | ((column: TableBaseColumn) => VNodeChild);
@@ -2618,7 +2617,6 @@ export interface DataTableInjection {
     rawPaginatedDataRef: Ref<InternalRowData[]>;
     virtualScrollRef: Ref<boolean>;
     bodyWidthRef: Ref<number | null>;
-    scrollPartRef: Ref<'head' | 'body'>;
     mergedTableLayoutRef: Ref<'auto' | 'fixed'>;
     maxHeightRef: Ref<string | number | undefined>;
     minHeightRef: Ref<string | number | undefined>;

package/lib/data-table/src/styles/index.cssr.js

@@ -49,6 +49,7 @@ const fixedColumnStyle = createFixedColumnStyle();
 // --n-opacity-loading
 // --n-box-shadow-before used in Body.tsx
 // --n-box-shadow-after used in Body.tsx
+// --indent-offset for ellipsis & expand trigger
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  width: 100%;
  font-size: var(--n-font-size);
@@ -287,6 +288,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  white-space: nowrap;
  max-width: 100%;
  vertical-align: bottom;
+ max-width: calc(100% - var(--indent-offset, -1.5) * 16px - 24px);
  `), (0, cssr_1.cM)('selection, expand', `
  text-align: center;
  padding: 0;

package/lib/data-table/src/use-scroll.d.ts

@@ -1,7 +1,6 @@
 import { type ComputedRef, type Ref } from 'vue';
 import type { ColumnKey, MainTableRef, TableColumn, DataTableSetupProps } from './interface';
-export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }: {
-    scrollPartRef: Ref<'head' | 'body'>;
+export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }: {
     bodyWidthRef: Ref<null | number>;
     mainTableInstRef: Ref<MainTableRef | null>;
     mergedCurrentPageRef: ComputedRef<number>;

package/lib/data-table/src/use-scroll.js

@@ -6,8 +6,9 @@ const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }) {
-    let scrollLeft = 0;
+function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }) {
+    let lastScrollLeft = 0;
+    const scrollPartRef = (0, vue_1.ref)();
     const leftActiveFixedColKeyRef = (0, vue_1.ref)(null);
     const leftActiveFixedChildrenColKeysRef = (0, vue_1.ref)([]);
     const rightActiveFixedColKeyRef = (0, vue_1.ref)(null);
@@ -71,7 +72,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         let leftActiveFixedColKey = null;
         for (let i = 0; i < leftFixedColumns.length; ++i) {
             const key = (0, utils_1.getColKey)(leftFixedColumns[i]);
-            if (scrollLeft > (((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) - leftWidth) {
+            if (lastScrollLeft > (((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) - leftWidth) {
                 leftActiveFixedColKey = key;
                 leftWidth = ((_b = fixedColumnLeftMap[key]) === null || _b === void 0 ? void 0 : _b.end) || 0;
             }
@@ -106,7 +107,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         const { value: fixedColumnRightMap } = fixedColumnRightMapRef;
         for (let i = rightFixedColumns.length - 1; i >= 0; --i) {
             const key = (0, utils_1.getColKey)(rightFixedColumns[i]);
-            if (Math.round(scrollLeft +
+            if (Math.round(lastScrollLeft +
                 (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) +
                 tableWidth -
                 rightWidth) < scrollWidth) {
@@ -149,16 +150,22 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         }
     }
     function handleTableHeaderScroll() {
-        if (scrollPartRef.value === 'head') {
+        if (scrollPartRef.value !== 'body') {
             (0, seemly_1.beforeNextFrameOnce)(syncScrollState);
         }
+        else {
+            scrollPartRef.value = undefined;
+        }
     }
     function handleTableBodyScroll(e) {
         var _a;
         (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        if (scrollPartRef.value === 'body') {
+        if (scrollPartRef.value !== 'head') {
             (0, seemly_1.beforeNextFrameOnce)(syncScrollState);
         }
+        else {
+            scrollPartRef.value = undefined;
+        }
     }
     function syncScrollState() {
         // We can't simply use props.scrollX to determine whether the table has
@@ -170,22 +177,23 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         const { value: tableWidth } = bodyWidthRef;
         if (tableWidth === null)
             return;
-        const { value: scrollPart } = scrollPartRef;
         if (props.maxHeight || props.flexHeight) {
             if (!header)
                 return;
             // we need to deal with overscroll
-            if (scrollPart === 'head') {
-                scrollLeft = header.scrollLeft;
-                body.scrollLeft = scrollLeft;
+            const directionHead = lastScrollLeft - header.scrollLeft;
+            scrollPartRef.value = directionHead !== 0 ? 'head' : 'body';
+            if (scrollPartRef.value === 'head') {
+                lastScrollLeft = header.scrollLeft;
+                body.scrollLeft = lastScrollLeft;
             }
             else {
-                scrollLeft = body.scrollLeft;
-                header.scrollLeft = scrollLeft;
+                lastScrollLeft = body.scrollLeft;
+                header.scrollLeft = lastScrollLeft;
             }
         }
         else {
-            scrollLeft = body.scrollLeft;
+            lastScrollLeft = body.scrollLeft;
         }
         deriveActiveLeftFixedColumn();
         deriveActiveLeftFixedChildrenColumns();

package/lib/date-picker/src/DatePicker.d.ts

@@ -3862,7 +3862,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: Ref<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
     uncontrolledValue: Ref<Value | null>;
@@ -7015,5 +7015,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly updateValueOnClose: boolean;
     readonly closeOnSelect: boolean;
     readonly bindCalendarMonths: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/date-picker/src/panel/date.d.ts

@@ -38,13 +38,13 @@ declare const _default: import("vue").DefineComponent<{
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleVirtualListScroll: (e: Event) => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     handleQuickMonthClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, updatePanelValue: (value: number) => void) => void;
     justifyColumnsScrollState: (value?: number | undefined) => void;
@@ -1179,5 +1179,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly active: boolean;
     readonly actions: string[];
     readonly panel: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/date-picker/src/panel/date.js

@@ -56,7 +56,9 @@ exports.default = (0, vue_1.defineComponent)({
                             [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
                             [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
                         }
-                    ], onClick: () => { this.handleDateClick(dateItem); } },
+                    ], onClick: () => {
+                        this.handleDateClick(dateItem);
+                    } },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),

package/lib/date-picker/src/panel/daterange.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
     startCalendarDateTime: import("vue").Ref<number>;
@@ -54,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: "start" | "end") => HTMLElement;
-    virtualListContent: (type: "start" | "end") => HTMLElement;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;
@@ -1216,5 +1216,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly actions: unknown[];
     readonly panel: boolean;
     readonly bindCalendarMonths: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/date-picker/src/panel/daterange.js

@@ -54,7 +54,11 @@ exports.default = (0, vue_1.defineComponent)({
                             [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
                             [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
                         }
-                    ], onClick: () => { this.handleDateClick(dateItem); }, onMouseenter: () => { this.handleDateMouseEnter(dateItem); } },
+                    ], onClick: () => {
+                        this.handleDateClick(dateItem);
+                    }, onMouseenter: () => {
+                        this.handleDateMouseEnter(dateItem);
+                    } },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
@@ -79,7 +83,11 @@ exports.default = (0, vue_1.defineComponent)({
                             [`${mergedClsPrefix}-date-panel-date--end`]: dateItem.endOfSpan,
                             [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
                         }
-                    ], onClick: () => { this.handleDateClick(dateItem); }, onMouseenter: () => { this.handleDateMouseEnter(dateItem); } },
+                    ], onClick: () => {
+                        this.handleDateClick(dateItem);
+                    }, onMouseenter: () => {
+                        this.handleDateMouseEnter(dateItem);
+                    } },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),

package/lib/date-picker/src/panel/datetime.d.ts

@@ -38,13 +38,13 @@ declare const _default: import("vue").DefineComponent<{
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleVirtualListScroll: (e: Event) => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     handleQuickMonthClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, updatePanelValue: (value: number) => void) => void;
     justifyColumnsScrollState: (value?: number | undefined) => void;
@@ -1179,5 +1179,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly active: boolean;
     readonly actions: string[];
     readonly panel: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/date-picker/src/panel/datetime.js

@@ -53,7 +53,9 @@ exports.default = (0, vue_1.defineComponent)({
                             [`${mergedClsPrefix}-date-panel-date--excluded`]: !dateItem.inCurrentMonth,
                             [`${mergedClsPrefix}-date-panel-date--disabled`]: this.mergedIsDateDisabled(dateItem.ts)
                         }
-                    ], onClick: () => { this.handleDateClick(dateItem); } },
+                    ], onClick: () => {
+                        this.handleDateClick(dateItem);
+                    } },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__trigger` }),
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
     startCalendarDateTime: import("vue").Ref<number>;
@@ -54,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: "start" | "end") => HTMLElement;
-    virtualListContent: (type: "start" | "end") => HTMLElement;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;
@@ -1216,5 +1216,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly actions: unknown[];
     readonly panel: boolean;
     readonly bindCalendarMonths: boolean;
-}>;
+}, {}>;
 export default _default;