naive-ui 2.43.2 → 2.44.0

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

@@ -85,19 +85,17 @@ 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, virtualScrollXRef, heightForRowRef, minRowHeightRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, virtualScrollXRef, heightForRowRef, minRowHeightRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, xScrollableRef, explicitlyScrollableRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey);
         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;
+        const mergedRenderEmptyRef = (0, vue_1.computed)(() => {
+            var _a, _b;
+            return (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.renderEmpty;
         });
+        const emptyRef = (0, vooks_1.useMemo)(() => paginatedDataRef.value.length === 0);
+        const shouldDisplayVirtualListRef = (0, vooks_1.useMemo)(() => virtualScrollRef.value && !emptyRef.value);
         let lastSelectedKey = '';
         const mergedExpandedRowKeySetRef = (0, vue_1.computed)(() => {
             return new Set(mergedExpandedRowKeysRef.value);
@@ -151,16 +149,7 @@ exports.default = (0, vue_1.defineComponent)({
             doCheck(tmNode.key, true, rowInfo);
         }
         function getScrollContainer() {
-            if (!shouldDisplaySomeTablePartRef.value) {
-                const { value: emptyEl } = emptyElRef;
-                if (emptyEl) {
-                    return emptyEl;
-                }
-                else {
-                    return null;
-                }
-            }
-            if (virtualScrollRef.value) {
+            if (shouldDisplayVirtualListRef.value) {
                 return virtualListContainer();
             }
             const { value } = scrollbarInstRef;
@@ -296,7 +285,7 @@ exports.default = (0, vue_1.defineComponent)({
             componentId,
             scrollbarInstRef,
             virtualListRef,
-            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, mergedRenderEmpty: mergedRenderEmptyRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, shouldDisplayVirtualList: shouldDisplayVirtualListRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
                 const { value: striped } = stripedRef;
                 let hasChildren = false;
                 const data = paginatedDataRef.value.map(striped
@@ -324,7 +313,7 @@ exports.default = (0, vue_1.defineComponent)({
                     data,
                     hasChildren
                 };
-            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, virtualScrollX: virtualScrollXRef, heightForRow: heightForRowRef, minRowHeight: minRowHeightRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, virtualScrollX: virtualScrollXRef, heightForRow: heightForRowRef, minRowHeight: minRowHeightRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
             handleVirtualListScroll,
             handleVirtualListResize,
             handleMouseleaveTable,
@@ -334,24 +323,37 @@ exports.default = (0, vue_1.defineComponent)({
             handleCheckboxUpdateChecked,
             handleRadioUpdateChecked,
             handleUpdateExpanded,
-            renderCell }, exposedMethods);
+            renderCell, explicitlyScrollable: explicitlyScrollableRef, xScrollable: xScrollableRef }, exposedMethods);
     },
     render() {
-        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
-        const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
-        // For a basic table with auto layout whose content may overflow we will
-        // make it scrollable, which differs from browser's native behavior.
-        // For native behavior, see
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
-        const isBasicAutoLayout = !scrollable && mergedTableLayout === 'auto';
-        const xScrollable = scrollX !== undefined || isBasicAutoLayout;
+        const { mergedTheme, scrollX, mergedClsPrefix, explicitlyScrollable, xScrollable, loadingKeySet, onResize, setHeaderScrollLeft, empty, shouldDisplayVirtualList } = this;
         const contentStyle = {
             minWidth: (0, _utils_1.formatLength)(scrollX) || '100%'
         };
         if (scrollX)
             contentStyle.width = '100%';
-        const tableNode = ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: !this.empty ? this.bodyStyle : undefined, 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 createEmptyNode = () => ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-data-table-empty`,
+                this.loading && `${mergedClsPrefix}-data-table-empty--hide`
+            ], style: [
+                this.bodyStyle,
+                xScrollable
+                    ? 'position: sticky; left: 0; width: var(--n-scrollbar-current-width);'
+                    : undefined
+            ], ref: "emptyElRef" }, (0, _utils_1.resolveSlot)(this.dataTableSlots.empty, () => {
+            var _a;
+            return [
+                ((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || ((0, vue_1.h)(empty_1.NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }))
+            ];
+        })));
+        const tableNode = ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", scrollable: explicitlyScrollable || xScrollable, class: `${mergedClsPrefix}-data-table-base-table-body`, style: !empty ? this.bodyStyle : 'height: initial;', theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: shouldDisplayVirtualList ? this.virtualListContainer : undefined, content: shouldDisplayVirtualList ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, internalExposeWidthCssVar: xScrollable && empty, xScrollable: xScrollable, onScroll: shouldDisplayVirtualList ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }), {
             default: () => {
+                if (this.empty
+                    && !this.showHeader
+                    && (this.explicitlyScrollable || this.xScrollable)) {
+                    // Placeholder for outer header to sync scroll state
+                    return createEmptyNode();
+                }
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};
                 // coordinate to related hover keys
@@ -626,25 +628,27 @@ exports.default = (0, vue_1.defineComponent)({
                         ] }), cells));
                     return row;
                 };
-                if (!virtualScroll) {
-                    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 })))),
-                        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, displayedRowIndex) => {
-                            return renderRow({
-                                rowInfo,
-                                displayedRowIndex,
-                                isVirtual: false,
-                                isVirtualX: false,
-                                startColIndex: -1,
-                                endColIndex: -1,
-                                getLeft(_index) {
-                                    return -1;
-                                }
-                            });
-                        }))) : null));
+                if (!this.shouldDisplayVirtualList) {
+                    return ((0, vue_1.h)(vue_1.Fragment, null,
+                        (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 })))),
+                            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, displayedRowIndex) => {
+                                return renderRow({
+                                    rowInfo,
+                                    displayedRowIndex,
+                                    isVirtual: false,
+                                    isVirtualX: false,
+                                    startColIndex: -1,
+                                    endColIndex: -1,
+                                    getLeft(_index) {
+                                        return -1;
+                                    }
+                                });
+                            }))) : null),
+                        this.empty && this.xScrollable ? createEmptyNode() : null));
                 }
                 else {
                     return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: this.minRowHeight, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
@@ -685,16 +689,9 @@ 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, _utils_1.resolveSlot)(this.dataTableSlots.empty, () => [
-                (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()));
+            if (this.explicitlyScrollable || this.xScrollable) {
+                // empty node is integrated into table node
+                return tableNode;
             }
             else {
                 return ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.onResize }, { default: createEmptyNode }));

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

@@ -1,7 +1,6 @@
 import type { TreeMate, TreeNode } from 'treemate';
 import type { CSSProperties, ExtractPropTypes, HTMLAttributes, PropType, Ref, VNode, VNodeChild } from 'vue';
 import type { VirtualListInst } from 'vueuc';
-import type { BaseLoadingExposedProps } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { EllipsisProps } from '../../ellipsis/src/Ellipsis';
@@ -10,7 +9,7 @@ import type { PaginationProps } from '../../pagination';
 import type { PopoverProps } from '../../popover';
 import type { ScrollbarProps, ScrollTo } from '../../scrollbar/src/Scrollbar';
 import type { DataTableTheme } from '../styles';
-import type { DataTableGetCsvCell, DataTableGetCsvHeader } from './publicTypes';
+import type { DataTableGetCsvCell, DataTableGetCsvHeader, DataTableSize, DataTableSpinProps } from './public-types';
 import type { ColItem, RowItem } from './use-group-header';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
@@ -58,7 +57,7 @@ export declare const dataTableProps: {
     };
     readonly singleColumn: BooleanConstructor;
     readonly size: {
-        readonly type: PropType<"small" | "medium" | "large">;
+        readonly type: PropType<DataTableSize>;
         readonly default: "medium";
     };
     readonly remote: BooleanConstructor;
@@ -111,10 +110,7 @@ export declare const dataTableProps: {
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly renderExpandIcon: PropType<RenderExpandIcon>;
-    readonly spinProps: {
-        readonly type: PropType<BaseLoadingExposedProps>;
-        readonly default: {};
-    };
+    readonly spinProps: PropType<DataTableSpinProps>;
     readonly getCsvCell: PropType<DataTableGetCsvCell>;
     readonly getCsvHeader: PropType<DataTableGetCsvHeader>;
     readonly onLoad: PropType<DataTableOnLoad>;
@@ -3023,6 +3019,8 @@ export interface DataTableInjection {
     mergedTableLayoutRef: Ref<'auto' | 'fixed'>;
     maxHeightRef: Ref<string | number | undefined>;
     minHeightRef: Ref<string | number | undefined>;
+    xScrollableRef: Ref<boolean>;
+    explicitlyScrollableRef: Ref<boolean>;
     rowPropsRef: Ref<CreateRowProps | undefined>;
     flexHeightRef: Ref<boolean>;
     headerCheckboxDisabledRef: Ref<boolean>;

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

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, filterIconPopoverProps: Object, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, getCsvCell: Function, getCsvHeader: Function, onLoad: Function, '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], onScroll: Function, 
+    }, filterIconPopoverProps: Object, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: Object, getCsvCell: Function, getCsvHeader: Function, onLoad: Function, '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], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('n-data-table');

package/{es/data-table/src/publicTypes.d.ts → lib/data-table/src/public-types.d.ts}

@@ -1,3 +1,6 @@
+import type { SharedSpinProps } from '../../_internal';
 import type { TableBaseColumn } from './interface';
 export type DataTableGetCsvCell = (value: any, rowData: object, column: TableBaseColumn) => string;
 export type DataTableGetCsvHeader = (column: TableBaseColumn) => string;
+export type DataTableSize = 'small' | 'medium' | 'large';
+export type DataTableSpinProps = SharedSpinProps;

package/lib/data-table/src/public-types.js

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

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

@@ -1,9 +1,11 @@
 import type { ComputedRef, Ref } from 'vue';
 import type { ColumnKey, DataTableSetupProps, MainTableRef, TableColumn } from './interface';
-export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }: {
+export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, maxHeightRef, mergedTableLayoutRef }: {
+    maxHeightRef: Ref<string | number | undefined>;
     bodyWidthRef: Ref<null | number>;
     mainTableInstRef: Ref<MainTableRef | null>;
     mergedCurrentPageRef: ComputedRef<number>;
+    mergedTableLayoutRef: Ref<'auto' | 'fixed'>;
 }): {
     styleScrollXRef: ComputedRef<string | undefined>;
     fixedColumnLeftMapRef: ComputedRef<Record<ColumnKey, {
@@ -24,4 +26,6 @@ export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef
     handleTableBodyScroll: (e: Event) => void;
     handleTableHeaderScroll: () => void;
     setHeaderScrollLeft: (left: number) => void;
+    explicitlyScrollableRef: ComputedRef<boolean>;
+    xScrollableRef: ComputedRef<boolean>;
 };

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

@@ -5,7 +5,18 @@ const seemly_1 = require("seemly");
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
-function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }) {
+function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, maxHeightRef, mergedTableLayoutRef }) {
+    const explicitlyScrollableRef = (0, vue_1.computed)(() => props.scrollX !== undefined
+        || maxHeightRef.value !== undefined
+        || props.flexHeight);
+    const xScrollableRef = (0, vue_1.computed)(() => {
+        // For a basic table with auto layout whose content may overflow we will
+        // make it scrollable, which differs from browser's native behavior.
+        // For native behavior, see
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
+        const isBasicAutoLayout = !explicitlyScrollableRef.value && mergedTableLayoutRef.value === 'auto';
+        return props.scrollX !== undefined || isBasicAutoLayout;
+    });
     let lastScrollLeft = 0;
     const scrollPartRef = (0, vue_1.ref)();
     const leftActiveFixedColKeyRef = (0, vue_1.ref)(null);
@@ -176,9 +187,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         const { value: tableWidth } = bodyWidthRef;
         if (tableWidth === null)
             return;
-        if (props.maxHeight || props.flexHeight) {
-            if (!header)
-                return;
+        if (header) {
             // we need to deal with overscroll
             const directionHead = lastScrollLeft - header.scrollLeft;
             scrollPartRef.value = directionHead !== 0 ? 'head' : 'body';
@@ -222,6 +231,8 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         syncScrollState,
         handleTableBodyScroll,
         handleTableHeaderScroll,
-        setHeaderScrollLeft
+        setHeaderScrollLeft,
+        explicitlyScrollableRef,
+        xScrollableRef
     };
 }

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'vue';
 import type { CreateRowClassName, InternalRowData, RowData, SortOrder, SortOrderFlag, SortState, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from './interface';
-import type { DataTableGetCsvCell, DataTableGetCsvHeader } from './publicTypes';
+import type { DataTableGetCsvCell, DataTableGetCsvHeader } from './public-types';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
 export declare function getNumberColWidth(col: TableColumn): number | undefined;

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

@@ -34,6 +34,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly default: undefined;
     };
     readonly clearable: BooleanConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly updateValueOnClose: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
@@ -3440,6 +3442,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly default: undefined;
     };
     readonly clearable: BooleanConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly updateValueOnClose: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
@@ -5534,6 +5538,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly placement: import("vueuc").FollowerPlacement;
     readonly show: boolean | undefined;
     readonly inputReadonly: boolean;
+    readonly fastYearSelect: boolean;
+    readonly fastMonthSelect: boolean;
     readonly updateValueOnClose: boolean;
     readonly calendarHeaderMonthYearSeparator: string;
     readonly calendarHeaderMonthBeforeYear: boolean;

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

@@ -678,6 +678,8 @@ exports.default = (0, vue_1.defineComponent)({
             onPrevYear: this.onPrevYear,
             timePickerFormat: this.timePickerFormat,
             dateFormat: this.dateFormat,
+            fastYearSelect: this.fastYearSelect,
+            fastMonthSelect: this.fastMonthSelect,
             calendarDayFormat: this.calendarDayFormat,
             calendarHeaderYearFormat: this.calendarHeaderYearFormat,
             calendarHeaderMonthFormat: this.calendarHeaderMonthFormat,

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

@@ -17,6 +17,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    fastYearSelect: BooleanConstructor;
+    fastMonthSelect: BooleanConstructor;
     calendarDayFormat: StringConstructor;
     calendarHeaderYearFormat: StringConstructor;
     calendarHeaderMonthFormat: StringConstructor;
@@ -44,6 +46,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose: PropType<import("../interface").OnClose>;
     onTabOut: FunctionConstructor;
     onKeydown: FunctionConstructor;
+    onSelectYear: FunctionConstructor;
+    onSelectMonth: FunctionConstructor;
     onUpdateValue: {
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2181,6 +2185,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     active: BooleanConstructor;
     dateFormat: StringConstructor;
+    fastYearSelect: BooleanConstructor;
+    fastMonthSelect: BooleanConstructor;
     calendarDayFormat: StringConstructor;
     calendarHeaderYearFormat: StringConstructor;
     calendarHeaderMonthFormat: StringConstructor;
@@ -2208,6 +2214,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose: PropType<import("../interface").OnClose>;
     onTabOut: FunctionConstructor;
     onKeydown: FunctionConstructor;
+    onSelectYear: FunctionConstructor;
+    onSelectMonth: FunctionConstructor;
     onUpdateValue: {
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2224,6 +2232,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     active: boolean;
     actions: string[];
     inputReadonly: boolean;
+    fastYearSelect: boolean;
+    fastMonthSelect: boolean;
     calendarHeaderMonthBeforeYear: boolean;
     panel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -51,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),

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

@@ -8,6 +8,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -35,6 +37,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2204,6 +2208,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -2231,6 +2237,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2247,6 +2255,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly active: boolean;
     readonly actions: string[];
     readonly inputReadonly: boolean;
+    readonly fastYearSelect: boolean;
+    readonly fastMonthSelect: boolean;
     readonly calendarHeaderMonthBeforeYear: boolean;
     readonly panel: boolean;
     readonly bindCalendarMonths: boolean;

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

@@ -42,7 +42,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),
@@ -79,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),

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

@@ -12,6 +12,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -39,6 +41,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2172,6 +2176,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -2199,6 +2205,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2215,6 +2223,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly active: boolean;
     readonly actions: string[];
     readonly inputReadonly: boolean;
+    readonly fastYearSelect: boolean;
+    readonly fastMonthSelect: boolean;
     readonly calendarHeaderMonthBeforeYear: boolean;
     readonly panel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -45,7 +45,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),

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

@@ -8,6 +8,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -35,6 +37,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2204,6 +2208,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly active: BooleanConstructor;
     readonly dateFormat: StringConstructor;
+    readonly fastYearSelect: BooleanConstructor;
+    readonly fastMonthSelect: BooleanConstructor;
     readonly calendarDayFormat: StringConstructor;
     readonly calendarHeaderYearFormat: StringConstructor;
     readonly calendarHeaderMonthFormat: StringConstructor;
@@ -2231,6 +2237,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
     readonly onTabOut: FunctionConstructor;
     readonly onKeydown: FunctionConstructor;
+    readonly onSelectYear: FunctionConstructor;
+    readonly onSelectMonth: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
@@ -2247,6 +2255,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly active: boolean;
     readonly actions: string[];
     readonly inputReadonly: boolean;
+    readonly fastYearSelect: boolean;
+    readonly fastMonthSelect: boolean;
     readonly calendarHeaderMonthBeforeYear: boolean;
     readonly panel: boolean;
     readonly bindCalendarMonths: boolean;

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

@@ -53,7 +53,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthYearSeparator: this.calendarHeaderMonthYearSeparator, monthBeforeYear: this.calendarMonthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),
@@ -97,7 +97,7 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['prev-month'], () => [
                         (0, vue_1.h)(icons_1.BackwardIcon, null)
                     ])),
-                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.calendarMonthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, monthYearSeparator: this.calendarHeaderMonthYearSeparator, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
+                    (0, vue_1.h)(panelHeader_1.default, { fastYearSelect: this.fastYearSelect, fastMonthSelect: this.fastMonthSelect, monthBeforeYear: this.calendarMonthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, monthYearSeparator: this.calendarHeaderMonthYearSeparator, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth }, (0, _utils_1.resolveSlot)(datePickerSlots['next-month'], () => [
                         (0, vue_1.h)(icons_1.ForwardIcon, null)
                     ])),