naive-ui 2.35.0 → 2.37.0

package/lib/carousel/src/utils/duplicatedLogic.js

@@ -24,6 +24,8 @@ function duplicateSlide(child, index, position) {
     });
 }
 function getDisplayIndex(current, length, duplicatedable) {
+    if (length === 1)
+        return 0;
     return !duplicatedable
         ? current
         : current === 0

package/lib/cascader/src/Cascader.d.ts

@@ -5,6 +5,7 @@ import type { FormValidationStatus } from '../../form/src/interface';
 import type { SelectBaseOption } from '../../select/src/interface';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { CascaderOption, ExpandTrigger, Filter, OnLoad, OnUpdateValue, Value } from './interface';
+import { type PopoverProps } from '../../popover';
 export declare const cascaderProps: {
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly to: {
@@ -70,6 +71,7 @@ export declare const cascaderProps: {
         readonly default: undefined;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly menuProps: PropType<HTMLAttributes>;
     readonly filterMenuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
@@ -729,6 +731,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly menuProps: PropType<HTMLAttributes>;
     readonly filterMenuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
@@ -1830,6 +1833,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly menuProps: PropType<HTMLAttributes>;
     readonly filterMenuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
@@ -2430,11 +2434,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean | undefined;
     readonly to: string | boolean | HTMLElement;
     readonly bordered: boolean | undefined;
+    readonly filterable: boolean;
     readonly placement: FollowerPlacement;
     readonly labelField: string;
     readonly virtualScroll: boolean;
     readonly valueField: string;
-    readonly filterable: boolean;
     readonly clearable: boolean;
     readonly clearFilterAfterSelect: boolean;
     readonly defaultValue: Value | null;

package/lib/cascader/src/Cascader.js

@@ -54,7 +54,7 @@ exports.cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, show: {
         type: Boolean,
         default: undefined
-    }, maxTagCount: [String, Number], menuProps: Object, filterMenuProps: Object, virtualScroll: {
+    }, maxTagCount: [String, Number], ellipsisTagPopoverProps: Object, menuProps: Object, filterMenuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
     }, checkStrategy: {
@@ -832,7 +832,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { onResize: this.handleTriggerResize, ref: "triggerInstRef", status: this.mergedStatus, clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeydown }, {
+                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { onResize: this.handleTriggerResize, ref: "triggerInstRef", status: this.mergedStatus, clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, ellipsisTagPopoverProps: this.ellipsisTagPopoverProps, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeydown }, {
                             arrow: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
                         }))
                     }),

package/lib/cascader/src/CascaderSubmenu.d.ts

@@ -378,7 +378,7 @@ declare const _default: import("vue").DefineComponent<{
     vlInstRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
-        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+        scrollTo: import("vueuc").VirtualListScrollTo;
     } | null>;
     virtualScroll: import("vue").Ref<boolean>;
     itemSize: import("vue").ComputedRef<number>;

package/lib/checkbox/src/Checkbox.d.ts

@@ -23,11 +23,11 @@ export declare const checkboxProps: {
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -148,11 +148,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -451,11 +451,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;

package/lib/collapse/src/styles/index.cssr.js

@@ -40,7 +40,6 @@ exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('co
  position: relative;
  padding: var(--n-title-padding);
  color: var(--n-title-text-color);
- cursor: pointer;
  `, [(0, cssr_1.cE)('header-main', `
  display: flex;
  flex-wrap: nowrap;
@@ -49,6 +48,7 @@ exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('co
  transition: color .3s var(--n-bezier);
  flex: 1;
  color: var(--n-title-text-color);
+ cursor: pointer;
  `), (0, cssr_1.cE)('header-extra', `
  display: flex;
  align-items: center;

package/lib/color-picker/src/ColorPickerSwatches.js

@@ -16,9 +16,10 @@ function normalizeColor(color, mode) {
     return color;
 }
 function getHexFromName(color) {
-    const ctx = document
-        .createElement('canvas')
-        .getContext('2d');
+    const ctx = document.createElement('canvas').getContext('2d');
+    if (!ctx) {
+        return '#000000';
+    }
     ctx.fillStyle = color;
     return ctx.fillStyle;
 }

package/lib/components.d.ts

@@ -33,6 +33,7 @@ export * from './dynamic-tags';
 export * from './element';
 export * from './ellipsis';
 export * from './empty';
+export * from './flex';
 export * from './form';
 export * from './global-style';
 export * from './gradient-text';
@@ -59,6 +60,7 @@ export * from './popconfirm';
 export * from './popover';
 export * from './popselect';
 export * from './progress';
+export * from './qr-code';
 export * from './radio';
 export * from './rate';
 export * from './result';
@@ -68,6 +70,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './space';
 export * from './spin';
+export * from './split';
 export * from './statistic';
 export * from './steps';
 export * from './switch';
@@ -84,6 +87,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './virtual-list';
 export * from './watermark';
 export * from './discrete';
 export * from './equation';

package/lib/components.js

@@ -49,6 +49,7 @@ __exportStar(require("./dynamic-tags"), exports);
 __exportStar(require("./element"), exports);
 __exportStar(require("./ellipsis"), exports);
 __exportStar(require("./empty"), exports);
+__exportStar(require("./flex"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./global-style"), exports);
 __exportStar(require("./gradient-text"), exports);
@@ -75,6 +76,7 @@ __exportStar(require("./popconfirm"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./popselect"), exports);
 __exportStar(require("./progress"), exports);
+__exportStar(require("./qr-code"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./rate"), exports);
 __exportStar(require("./result"), exports);
@@ -84,6 +86,7 @@ __exportStar(require("./skeleton"), exports);
 __exportStar(require("./slider"), exports);
 __exportStar(require("./space"), exports);
 __exportStar(require("./spin"), exports);
+__exportStar(require("./split"), exports);
 __exportStar(require("./statistic"), exports);
 __exportStar(require("./steps"), exports);
 __exportStar(require("./switch"), exports);
@@ -100,6 +103,7 @@ __exportStar(require("./tree"), exports);
 __exportStar(require("./tree-select"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./upload"), exports);
+__exportStar(require("./virtual-list"), exports);
 __exportStar(require("./watermark"), exports);
 __exportStar(require("./discrete"), exports);
 __exportStar(require("./equation"), exports);

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -43,6 +43,7 @@ export declare const configProviderProps: {
             dateFormat: string;
             dateTimeFormat: string;
             quarterFormat: string;
+            weekFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -53,6 +54,7 @@ export declare const configProviderProps: {
             monthPlaceholder: string;
             yearPlaceholder: string;
             quarterPlaceholder: string;
+            weekPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -91,6 +93,7 @@ export declare const configProviderProps: {
             positiveText: string;
             negativeText: string;
             now: string;
+            clear: string;
         };
         Pagination: {
             goto: string;
@@ -199,6 +202,7 @@ declare const _default: import("vue").DefineComponent<{
             dateFormat: string;
             dateTimeFormat: string;
             quarterFormat: string;
+            weekFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -209,6 +213,7 @@ declare const _default: import("vue").DefineComponent<{
             monthPlaceholder: string;
             yearPlaceholder: string;
             quarterPlaceholder: string;
+            weekPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -247,6 +252,7 @@ declare const _default: import("vue").DefineComponent<{
             positiveText: string;
             negativeText: string;
             now: string;
+            clear: string;
         };
         Pagination: {
             goto: string;
@@ -359,6 +365,7 @@ declare const _default: import("vue").DefineComponent<{
             dateFormat: string;
             dateTimeFormat: string;
             quarterFormat: string;
+            weekFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -369,6 +376,7 @@ declare const _default: import("vue").DefineComponent<{
             monthPlaceholder: string;
             yearPlaceholder: string;
             quarterPlaceholder: string;
+            weekPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -407,6 +415,7 @@ declare const _default: import("vue").DefineComponent<{
             positiveText: string;
             negativeText: string;
             now: string;
+            clear: string;
         };
         Pagination: {
             goto: string;

package/lib/config-provider/src/config.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultBreakpoints = void 0;
 exports.defaultBreakpoints = {
-    xs: 0,
-    s: 640,
-    m: 1024,
-    l: 1280,
-    xl: 1536,
+    xs: 0, // mobile
+    s: 640, // tablet
+    m: 1024, // laptop s
+    l: 1280, // laptop
+    xl: 1536, // laptop l
     xxl: 1920 // normal desktop display
 };

package/lib/config-provider/src/internal-interface.d.ts

@@ -53,6 +53,7 @@ import type { PopconfirmTheme } from '../../popconfirm/styles';
 import type { PopoverTheme } from '../../popover/styles';
 import type { PopselectTheme } from '../../popselect/styles';
 import type { ProgressTheme } from '../../progress/styles';
+import type { QrCodeTheme } from '../../qr-code/styles';
 import type { RadioTheme } from '../../radio/styles';
 import type { RateTheme } from '../../rate/styles';
 import type { ResultTheme } from '../../result/styles';
@@ -94,6 +95,8 @@ import type { CollapseTransitionTheme } from '../../collapse-transition/styles';
 import type { ButtonGroupTheme } from '../../button-group/styles/light';
 import type { RowTheme } from '../../legacy-grid/styles';
 import type { Katex } from './katex';
+import type { SplitTheme } from '../../split/styles';
+import type { FlexTheme } from '../../flex/styles';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -127,6 +130,7 @@ export interface GlobalThemeWithoutCommon {
     Ellipsis?: EllipsisTheme;
     Empty?: EmptyTheme;
     Equation?: EquationTheme;
+    Flex?: FlexTheme;
     Form?: FormTheme;
     GradientText?: GradientTextTheme;
     Icon?: IconTheme;
@@ -150,6 +154,7 @@ export interface GlobalThemeWithoutCommon {
     Popover?: PopoverTheme;
     Popselect?: PopselectTheme;
     Progress?: ProgressTheme;
+    QrCode?: QrCodeTheme;
     Radio?: RadioTheme;
     Rate?: RateTheme;
     Result?: ResultTheme;
@@ -175,6 +180,7 @@ export interface GlobalThemeWithoutCommon {
     Typography?: TypographyTheme;
     Upload?: UploadTheme;
     Watermark?: WatermarkTheme;
+    Split?: SplitTheme;
     Row?: RowTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;

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

@@ -1,4 +1,4 @@
-import type { RowKey } from './interface';
+import type { RowKey, CsvOptionsType } from './interface';
 declare const _default: import("vue").DefineComponent<{
     readonly onUnstableColumnResize: import("vue").PropType<(resizedWidth: number, limitedWidth: number, column: import("./interface").TableBaseColumn<import("./interface").InternalRowData>, getColumnWidth: (key: import("./interface").ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -76,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: import("vue").PropType<"bottom" | "top">;
+        readonly type: import("vue").PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -2460,6 +2460,7 @@ declare const _default: import("vue").DefineComponent<{
     page: (page: number) => void;
     sort: (columnKey: import("./interface").ColumnKey, order: import("./interface").SortOrder) => void;
     scrollTo: import("../../scrollbar/src/Scrollbar").ScrollTo;
+    downloadCsv: (options?: CsvOptionsType | undefined) => void;
     clearFilter: () => void;
     mainTableInstRef: import("vue").Ref<{
         getHeaderElement: () => HTMLElement | null;
@@ -2467,6 +2468,7 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("../../scrollbar/src/Scrollbar").ScrollTo;
     } | null>;
     mergedClsPrefix: import("vue").Ref<string>;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -3821,7 +3823,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: import("vue").PropType<"bottom" | "top">;
+        readonly type: import("vue").PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -6221,7 +6223,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly childrenKey: string;
     readonly indent: number;
     readonly flexHeight: boolean;
-    readonly summaryPlacement: "bottom" | "top";
+    readonly summaryPlacement: "top" | "bottom";
     readonly paginationBehaviorOnFilter: "first" | "current";
     readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
 }, {}>;

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

@@ -19,6 +19,7 @@ const interface_1 = require("./interface");
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const utils_1 = require("./utils");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
     alias: ['AdvancedTable'],
@@ -43,7 +44,8 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('DataTable', mergedRtlRef, mergedClsPrefixRef);
         const mergedBottomBorderedRef = (0, vue_1.computed)(() => {
             const { bottomBordered } = props;
             // do not add bottom bordered class if bordered is true
@@ -59,6 +61,15 @@ exports.default = (0, vue_1.defineComponent)({
         const mainTableInstRef = (0, vue_1.ref)(null);
         const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth } = (0, use_resizable_1.useResizable)();
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = (0, use_group_header_1.useGroupHeader)(props, getResizableWidth);
+        const downloadCsv = (options) => {
+            const { fileName = 'data.csv', keepOriginalData = false } = options || {};
+            const data = keepOriginalData ? props.data : rawPaginatedDataRef.value;
+            const csvData = (0, utils_1.generateCsv)(props.columns, data);
+            const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' });
+            const downloadUrl = URL.createObjectURL(blob);
+            (0, _utils_1.download)(downloadUrl, fileName.endsWith('.csv') ? fileName : `${fileName}.csv`);
+            URL.revokeObjectURL(downloadUrl);
+        };
         const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
         const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
             selectionColumnRef,
@@ -135,7 +146,6 @@ exports.default = (0, vue_1.defineComponent)({
             rawPaginatedDataRef,
             filterMenuCssVarsRef: (0, vue_1.computed)(() => {
                 const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return {
                     '--n-action-padding': actionPadding,
                     '--n-action-button-margin': actionButtonMargin,
@@ -177,8 +187,10 @@ exports.default = (0, vue_1.defineComponent)({
             page,
             sort,
             clearFilter,
+            downloadCsv,
             scrollTo: (arg0, arg1) => {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
             }
         };
@@ -245,13 +257,14 @@ exports.default = (0, vue_1.defineComponent)({
                 mergedPagination.pageSize &&
                 mergedPagination.itemCount > mergedPagination.pageSize);
         });
-        return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, mergedShowPagination: mergedShowPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+        return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, mergedShowPagination: mergedShowPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, themeClass, onRender, $slots, spinProps } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-data-table`,
+                this.rtlEnabled && `${mergedClsPrefix}-data-table--rtl`,
                 themeClass,
                 {
                     [`${mergedClsPrefix}-data-table--bordered`]: this.mergedBordered,

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -35,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
+    rtlEnabled: import("vue").Ref<import("../../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").Ref<{
         common: {
             baseColor: string;
@@ -54,7 +55,6 @@ declare const _default: import("vue").DefineComponent<{
             warningColorHover: string;
             warningColorPressed: string;
             warningColorSuppl: string;
-            /** this branch is for compatibility */
             errorColor: string;
             errorColorHover: string;
             errorColorPressed: string;

package/lib/data-table/src/HeaderButton/FilterMenu.js

@@ -7,6 +7,7 @@ const button_1 = require("../../../button");
 const _internal_1 = require("../../../_internal");
 const utils_1 = require("../utils");
 const interface_1 = require("../interface");
+const _mixins_1 = require("../../../_mixins");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTableFilterMenu',
     props: {
@@ -44,6 +45,8 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
+        const { mergedClsPrefixRef: mergedClsPrefixRefRtl, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('DataTable', mergedRtlRef, mergedClsPrefixRefRtl);
         const { mergedClsPrefixRef, mergedThemeRef, localeRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
@@ -101,6 +104,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef,
             mergedTheme: mergedThemeRef,
             locale: localeRef,
             checkboxGroupValue: checkboxGroupValueRef,
@@ -112,7 +116,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedTheme, locale, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-filter-menu` },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-data-table-filter-menu`,
+                this.rtlEnabled && `${mergedClsPrefix}-data-table-filter-menu--rtl`
+            ] },
             (0, vue_1.h)(_internal_1.NScrollbar, null, {
                 default: () => {
                     const { checkboxGroupValue, handleChange } = this;

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

@@ -10,6 +10,7 @@ const Header_1 = __importDefault(require("./TableParts/Header"));
 const Body_1 = __importDefault(require("./TableParts/Body"));
 const interface_1 = require("./interface");
 exports.default = (0, vue_1.defineComponent)({
+    name: 'MainTable',
     setup() {
         const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, syncScrollState
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -50,6 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
             getHeaderElement,
             scrollTo(arg0, arg1) {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 (_a = bodyInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
             }
         };

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

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     getScrollContainer: () => HTMLElement | null;
     scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
     bodyWidth: import("vue").Ref<number | null>;
-    summaryPlacement: import("vue").Ref<"bottom" | "top">;
+    summaryPlacement: import("vue").Ref<"top" | "bottom">;
     dataTableSlots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualListRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
-        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+        scrollTo: import("vueuc").VirtualListScrollTo;
     } | null>;
     emptyElRef: import("vue").Ref<HTMLElement | null>;
     summary: import("vue").Ref<import("../interface").CreateSummary<import("../interface").InternalRowData> | undefined>;
@@ -1307,8 +1307,8 @@ declare const _default: import("vue").DefineComponent<{
     handleVirtualListScroll: (e: Event) => void;
     handleVirtualListResize: (e: ResizeObserverEntry) => void;
     handleMouseleaveTable: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleTableBodyScroll: (e: Event) => void;
     handleCheckboxUpdateChecked: (tmNode: {
         key: RowKey;

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

@@ -209,11 +209,11 @@ exports.default = (0, vue_1.defineComponent)({
         }
         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;
@@ -232,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);
                 }
             }
@@ -349,7 +351,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
         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.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }), {
+        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 }), {
             default: () => {
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};
@@ -410,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
                         });

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

@@ -34,6 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
         renderCell: Function
     },
     render() {
+        var _a;
         const { isSummary, column, row, renderCell } = this;
         let cell;
         const { render, key, ellipsis } = column;
@@ -42,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         else {
             if (isSummary) {
-                cell = row[key].value;
+                cell = (_a = row[key]) === null || _a === void 0 ? void 0 : _a.value;
             }
             else {
                 cell = renderCell