naive-ui 2.43.2 → 2.44.1

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

@@ -26,5 +26,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     flexHeight: import("vue").Ref<boolean, boolean>;
     handleBodyResize: (entry: ResizeObserverEntry) => void;
+    scrollX: import("vue").Ref<string | number | undefined, string | number | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -11,7 +11,7 @@ const Header_1 = __importDefault(require("./TableParts/Header"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'MainTable',
     setup() {
-        const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, virtualScrollHeaderRef, syncScrollState } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, virtualScrollHeaderRef, syncScrollState, scrollXRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const headerInstRef = (0, vue_1.ref)(null);
         const bodyInstRef = (0, vue_1.ref)(null);
         const selfElRef = (0, vue_1.ref)(null);
@@ -73,7 +73,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         return Object.assign({ maxHeight: maxHeightRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
             headerInstRef,
-            bodyInstRef, bodyStyle: bodyStyleRef, flexHeight: flexHeightRef, handleBodyResize }, exposedMethods);
+            bodyInstRef, bodyStyle: bodyStyleRef, flexHeight: flexHeightRef, handleBodyResize, scrollX: scrollXRef }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, maxHeight, flexHeight } = this;

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

@@ -2755,11 +2755,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } | undefined;
         };
     }>;
+    mergedRenderEmpty: import("vue").ComputedRef<(() => VNodeChild) | undefined>;
     scrollX: import("vue").Ref<string | number | undefined, string | number | undefined>;
     cols: import("vue").Ref<ColItem[], ColItem[]>;
     loading: import("vue").Ref<boolean, boolean>;
-    bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
-    shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
+    shouldDisplayVirtualList: import("vue").ComputedRef<boolean>;
     empty: import("vue").ComputedRef<boolean>;
     paginatedDataAndInfo: import("vue").ComputedRef<{
         data: {
@@ -2799,7 +2799,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     childTriggerColIndex: import("vue").Ref<number, number>;
     indent: import("vue").Ref<number, number>;
     rowProps: import("vue").Ref<import("../interface").CreateRowProps<import("../interface").InternalRowData> | undefined, import("../interface").CreateRowProps<import("../interface").InternalRowData> | undefined>;
-    maxHeight: import("vue").Ref<string | number | undefined, string | number | undefined>;
     loadingKeySet: import("vue").Ref<Set<RowKey>, Set<RowKey>>;
     expandable: import("vue").Ref<import("../interface").Expandable<any> | undefined, import("../interface").Expandable<any> | undefined>;
     stickyExpandedRows: import("vue").Ref<boolean, boolean>;
@@ -2820,6 +2819,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn) => VNodeChild) | undefined, ((value: any, rowData: object, column: import("../interface").TableBaseColumn) => VNodeChild) | undefined>;
+    explicitlyScrollable: import("vue").Ref<boolean, boolean>;
+    xScrollable: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     onResize: PropType<(e: ResizeObserverEntry) => void>;
     showHeader: BooleanConstructor;

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>;
@@ -57,10 +56,7 @@ export declare const dataTableProps: {
         readonly default: true;
     };
     readonly singleColumn: BooleanConstructor;
-    readonly size: {
-        readonly type: PropType<"small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<DataTableSize>;
     readonly remote: BooleanConstructor;
     readonly defaultExpandedRowKeys: {
         readonly type: PropType<RowKey[]>;
@@ -111,10 +107,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 +3016,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

@@ -29,10 +29,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, checkedRowKeys: Array, singleLine: {
         type: Boolean,
         default: true
-    }, singleColumn: Boolean, size: {
-        type: String,
-        default: 'medium'
-    }, remote: Boolean, defaultExpandedRowKeys: {
+    }, singleColumn: Boolean, size: String, remote: Boolean, defaultExpandedRowKeys: {
         type: Array,
         default: []
     }, defaultExpandAll: Boolean, expandedRowKeys: Array, stickyExpandedRows: Boolean, virtualScroll: Boolean, virtualScrollX: Boolean, virtualScrollHeader: Boolean, headerHeight: { type: Number, default: 28 }, heightForRow: Function, minRowHeight: { type: Number, default: 28 }, tableLayout: {
@@ -53,7 +50,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

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, Ref, SlotsType, VNode } from 'vue';
 import type { FormattedValue, PanelRef, Value } from './interface';
+import type { DatePickerSize } from './public-types';
 import { datePickerProps } from './props';
 export type DatePickerSetupProps = ExtractPropTypes<typeof datePickerProps>;
 export interface DatePickerSlots {
@@ -34,6 +35,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;
@@ -59,7 +62,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     readonly value: import("vue").PropType<Value | null>;
     readonly formattedValue: import("vue").PropType<FormattedValue | null>;
-    readonly size: import("vue").PropType<"small" | "medium" | "large">;
+    readonly size: import("vue").PropType<DatePickerSize>;
     readonly type: {
         readonly type: import("vue").PropType<import("./config").DatePickerType>;
         readonly default: "date";
@@ -2352,7 +2355,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     isRange: import("vue").ComputedRef<boolean>;
     localizedStartPlaceholder: import("vue").ComputedRef<string>;
     localizedEndPlaceholder: import("vue").ComputedRef<string>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
+    mergedSize: import("vue").ComputedRef<DatePickerSize>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     localizedPlacehoder: import("vue").ComputedRef<string>;
     isValueInvalid: import("vue").ComputedRef<boolean>;
@@ -3440,6 +3443,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;
@@ -3465,7 +3470,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     readonly value: import("vue").PropType<Value | null>;
     readonly formattedValue: import("vue").PropType<FormattedValue | null>;
-    readonly size: import("vue").PropType<"small" | "medium" | "large">;
+    readonly size: import("vue").PropType<DatePickerSize>;
     readonly type: {
         readonly type: import("vue").PropType<import("./config").DatePickerType>;
         readonly default: "date";
@@ -5534,6 +5539,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

@@ -40,9 +40,23 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
-        const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const { mergedComponentPropsRef, mergedClsPrefixRef, mergedBorderedRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const formItem = (0, _mixins_1.useFormItem)(props, {
+            mergedSize: (NFormItem) => {
+                var _a, _b;
+                const { size } = props;
+                if (size)
+                    return size;
+                const { mergedSize: formItemSize } = NFormItem || {};
+                if (formItemSize === null || formItemSize === void 0 ? void 0 : formItemSize.value)
+                    return formItemSize.value;
+                const configSize = (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.size;
+                if (configSize)
+                    return configSize;
+                return 'medium';
+            }
+        });
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const panelInstRef = (0, vue_1.ref)(null);
         const triggerElRef = (0, vue_1.ref)(null);
         const inputInstRef = (0, vue_1.ref)(null);
@@ -678,6 +692,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)
                     ])),