naive-ui 2.30.7 → 2.32.0

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

@@ -18,24 +18,27 @@ const utils_1 = require("../utils");
 const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
+const BodyRadio_1 = __importDefault(require("./BodyRadio"));
 const Header_1 = __importDefault(require("./Header"));
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
-    function traverse(rs) {
+    function traverse(rs, rootIndex) {
         rs.forEach((r) => {
             if (r.children && expandedRowKeys.has(r.key)) {
                 fRows.push({
                     tmNode: r,
                     striped: false,
-                    key: r.key
+                    key: r.key,
+                    index: rootIndex
                 });
-                traverse(r.children);
+                traverse(r.children, rootIndex);
             }
             else {
                 fRows.push({
                     key: r.key,
                     tmNode: r,
-                    striped: false
+                    striped: false,
+                    index: rootIndex
                 });
             }
         });
@@ -44,7 +47,7 @@ function flatten(rowInfos, expandedRowKeys) {
         fRows.push(rowInfo);
         const { children } = rowInfo.tmNode;
         if (children && expandedRowKeys.has(rowInfo.key)) {
-            traverse(children);
+            traverse(children, rowInfo.index);
         }
     });
     return fRows;
@@ -114,7 +117,7 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     });
                     if (checked) {
-                        doCheck(rowKeysToCheck);
+                        doCheck(rowKeysToCheck, false);
                     }
                     else {
                         doUncheck(rowKeysToCheck);
@@ -124,13 +127,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             if (checked) {
-                doCheck(tmNode.key);
+                doCheck(tmNode.key, false);
             }
             else {
                 doUncheck(tmNode.key);
             }
             lastSelectedKey = tmNode.key;
         }
+        function handleRadioUpdateChecked(tmNode) {
+            doCheck(tmNode.key, true);
+        }
         function getScrollContainer() {
             if (!shouldDisplaySomeTablePartRef.value) {
                 const { value: emptyEl } = emptyElRef;
@@ -288,16 +294,18 @@ exports.default = (0, vue_1.defineComponent)({
                         return {
                             tmNode,
                             key: tmNode.key,
-                            striped: index % 2 === 1
+                            striped: index % 2 === 1,
+                            index
                         };
                     }
-                    : (tmNode) => {
+                    : (tmNode, index) => {
                         if (!tmNode.isLeaf)
                             hasChildren = true;
                         return {
                             tmNode,
                             key: tmNode.key,
-                            striped: false
+                            striped: false,
+                            index
                         };
                     });
                 return {
@@ -313,6 +321,7 @@ exports.default = (0, vue_1.defineComponent)({
             virtualListContent,
             handleTableBodyScroll,
             handleCheckboxUpdateChecked,
+            handleRadioUpdateChecked,
             handleUpdateExpanded,
             renderCell }, exposedMethods);
     },
@@ -336,7 +345,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordToPass = {};
                 // coordinate to related hover keys
                 const cordKey = {};
-                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, childTriggerColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, childTriggerColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -355,7 +364,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 tmNode: {
                                     rawNode: row,
                                     disabled: true
-                                }
+                                },
+                                index: -1
                             }))
                         ];
                     }
@@ -368,7 +378,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 tmNode: {
                                     rawNode: summaryRows,
                                     disabled: true
-                                }
+                                },
+                                index: -1
                             }
                         ];
                     }
@@ -386,7 +397,8 @@ exports.default = (0, vue_1.defineComponent)({
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
                             key: `${rowInfo.key}-expand`,
-                            tmNode: rowInfo.tmNode
+                            tmNode: rowInfo.tmNode,
+                            index: rowInfo.index
                         });
                     }
                     else {
@@ -398,26 +410,29 @@ exports.default = (0, vue_1.defineComponent)({
                 paginatedData.forEach(({ tmNode }, rowIndex) => {
                     rowIndexToKey[rowIndex] = tmNode.key;
                 });
-                const renderRow = (rowInfo, rowIndex, isVirtual) => {
+                const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
+                    const { index: actualRowIndex } = rowInfo;
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
                         return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr`, key: `${key}__expand` },
                             (0, vue_1.h)("td", { class: [
                                     `${mergedClsPrefix}-data-table-td`,
                                     `${mergedClsPrefix}-data-table-td--last-col`,
-                                    rowIndex + 1 === rowCount &&
+                                    displayedRowIndex + 1 === rowCount &&
                                         `${mergedClsPrefix}-data-table-td--last-row`
-                                ], colspan: colCount }, renderExpand(rawNode, rowIndex))));
+                                ], colspan: colCount }, renderExpand(rawNode, actualRowIndex))));
                     }
                     const isSummary = 'isSummaryRow' in rowInfo;
                     const striped = !isSummary && rowInfo.striped;
                     const { tmNode, key: rowKey } = rowInfo;
                     const { rawNode: rowData } = tmNode;
                     const expanded = mergedExpandedRowKeySet.has(rowKey);
-                    const props = rowProps ? rowProps(rowData, rowIndex) : undefined;
+                    const props = rowProps
+                        ? rowProps(rowData, actualRowIndex)
+                        : undefined;
                     const mergedRowClassName = typeof rowClassName === 'string'
                         ? rowClassName
-                        : (0, utils_1.createRowClassName)(rowData, rowIndex, rowClassName);
+                        : (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
                     const row = ((0, vue_1.h)("tr", Object.assign({ onMouseenter: () => {
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
@@ -427,8 +442,8 @@ exports.default = (0, vue_1.defineComponent)({
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
                         var _a, _b, _c, _d, _e;
-                        if (!isVirtual && rowIndex in cordToPass) {
-                            const cordOfRowToPass = cordToPass[rowIndex];
+                        if (displayedRowIndex in cordToPass) {
+                            const cordOfRowToPass = cordToPass[displayedRowIndex];
                             const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
                             if (~indexInCordOfRowToPass) {
                                 cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
@@ -442,29 +457,30 @@ exports.default = (0, vue_1.defineComponent)({
                         const mergedColSpan = isSummary
                             ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
                             : colSpan
-                                ? colSpan(rowData, rowIndex)
+                                ? colSpan(rowData, actualRowIndex)
                                 : 1;
                         const mergedRowSpan = isSummary
                             ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
                             : rowSpan
-                                ? rowSpan(rowData, rowIndex)
+                                ? rowSpan(rowData, actualRowIndex)
                                 : 1;
                         const isLastCol = colIndex + mergedColSpan === colCount;
-                        const isLastRow = rowIndex + mergedRowSpan === rowCount;
+                        const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
                         const isCrossRowTd = mergedRowSpan > 1;
                         if (isCrossRowTd) {
-                            cordKey[rowIndex] = {
+                            cordKey[displayedRowIndex] = {
                                 [colIndex]: []
                             };
                         }
                         if (mergedColSpan > 1 || isCrossRowTd) {
-                            for (let i = rowIndex; i < rowIndex + mergedRowSpan; ++i) {
+                            for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
                                 if (isCrossRowTd) {
-                                    cordKey[rowIndex][colIndex].push(rowIndexToKey[i]);
+                                    cordKey[displayedRowIndex][colIndex].push(rowIndexToKey[i]);
                                 }
                                 for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
-                                    if (i === rowIndex && j === colIndex)
+                                    if (i === displayedRowIndex && j === colIndex) {
                                         continue;
+                                    }
                                     if (!(i in cordToPass)) {
                                         cordToPass[i] = [j];
                                     }
@@ -476,7 +492,7 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                         const hoverKey = isCrossRowTd ? this.hoverKey : null;
                         const { cellProps } = column;
-                        const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, rowIndex);
+                        const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
                         return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, style: [
                                 {
                                     textAlign: column.align || undefined,
@@ -491,7 +507,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 isSummary &&
                                     `${mergedClsPrefix}-data-table-td--summary`,
                                 ((hoverKey !== null &&
-                                    cordKey[rowIndex][colIndex].includes(hoverKey)) ||
+                                    cordKey[displayedRowIndex][colIndex].includes(hoverKey)) ||
                                     (0, utils_1.isColumnSorting)(column, mergedSortState)) &&
                                     `${mergedClsPrefix}-data-table-td--hover`,
                                 column.fixed &&
@@ -513,8 +529,8 @@ exports.default = (0, vue_1.defineComponent)({
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
-                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => handleRadioUpdateChecked(rowInfo.tmNode) })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };
@@ -524,8 +540,8 @@ exports.default = (0, vue_1.defineComponent)({
                         } },
                         (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, rowIndex) => {
-                            return renderRow(rowInfo, rowIndex, false);
+                        !this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                            return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }
                 else {

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

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { RowKey } from '../interface';
+declare const _default: import("vue").DefineComponent<{
+    rowKey: {
+        type: PropType<RowKey>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    onUpdateChecked: {
+        type: PropType<(checked: boolean) => void>;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rowKey: {
+        type: PropType<RowKey>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    onUpdateChecked: {
+        type: PropType<(checked: boolean) => void>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const radio_1 = require("../../../radio");
+const interface_1 = require("../interface");
+// Extract the radio to avoid useless rendering in table body
+exports.default = (0, vue_1.defineComponent)({
+    name: 'DataTableBodyRadio',
+    props: {
+        rowKey: {
+            type: [String, Number],
+            required: true
+        },
+        disabled: {
+            type: Boolean,
+            required: true
+        },
+        onUpdateChecked: {
+            type: Function,
+            required: true
+        }
+    },
+    setup(props) {
+        const { mergedCheckedRowKeySetRef, componentId
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        return () => {
+            const { rowKey } = props;
+            return ((0, vue_1.h)(radio_1.NRadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));
+        };
+    }
+});

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

@@ -111,9 +111,9 @@ exports.default = (0, vue_1.defineComponent)({
                             handleColHeaderClick(e, column);
                         }
                         : undefined },
-                    column.type === 'selection' ? ((0, vue_1.h)(vue_1.Fragment, null,
+                    column.type === 'selection' ? (column.multiple !== false ? ((0, vue_1.h)(vue_1.Fragment, null,
                         (0, vue_1.h)(checkbox_1.NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
-                        checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+                        checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : null) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
                         : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
                             default: () => renderTitle(column)
                         })) : (renderTitle(column)),

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

@@ -82,6 +82,7 @@ export declare type TableBaseColumn<T = InternalRowData> = {
 } & CommonColumnInfo<T>;
 export declare type TableSelectionColumn<T = InternalRowData> = {
     type: 'selection';
+    multiple?: boolean;
     disabled?: (row: T) => boolean;
     options?: DataTableSelectionOptions;
     sorter?: never;
@@ -169,7 +170,7 @@ export interface DataTableInjection {
     deriveNextSorter: (sorter: SortState | null) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
-    doCheck: (rowKey: RowKey | RowKey[]) => void;
+    doCheck: (rowKey: RowKey | RowKey[], single: boolean) => void;
     doUncheck: (rowKey: RowKey | RowKey[]) => void;
     handleTableHeaderScroll: (e: Event) => void;
     handleTableBodyScroll: (e: Event) => void;

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

@@ -16,6 +16,6 @@ export declare function useCheck(props: DataTableSetupProps, data: {
     doUpdateCheckedRowKeys: (keys: RowKey[]) => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
-    doCheck: (rowKey: RowKey | RowKey[]) => void;
+    doCheck: (rowKey: RowKey | RowKey[], single?: boolean) => void;
     doUncheck: (rowKey: RowKey | RowKey[]) => void;
 };

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

@@ -8,10 +8,18 @@ function useCheck(props, data) {
     const { paginatedDataRef, treeMateRef, selectionColumnRef } = data;
     const uncontrolledCheckedRowKeysRef = (0, vue_1.ref)(props.defaultCheckedRowKeys);
     const mergedCheckState = (0, vue_1.computed)(() => {
+        var _a;
         const { checkedRowKeys } = props;
-        return treeMateRef.value.getCheckedKeys(checkedRowKeys === undefined
+        const sourceKeys = checkedRowKeys === undefined
             ? uncontrolledCheckedRowKeysRef.value
-            : checkedRowKeys, {
+            : checkedRowKeys;
+        if (((_a = selectionColumnRef.value) === null || _a === void 0 ? void 0 : _a.multiple) === false) {
+            return {
+                checkedKeys: sourceKeys.slice(0, 1),
+                indeterminateKeys: []
+            };
+        }
+        return treeMateRef.value.getCheckedKeys(sourceKeys, {
             cascade: props.cascade,
             allowNotLoaded: props.allowCheckingNotLoaded
         });
@@ -69,9 +77,13 @@ function useCheck(props, data) {
             (0, _utils_1.call)(onCheckedRowKeysChange, keys, rows);
         uncontrolledCheckedRowKeysRef.value = keys;
     }
-    function doCheck(rowKey) {
+    function doCheck(rowKey, single = false) {
         if (props.loading)
             return;
+        if (single) {
+            doUpdateCheckedRowKeys(Array.isArray(rowKey) ? rowKey.slice(0, 1) : [rowKey]);
+            return;
+        }
         doUpdateCheckedRowKeys(treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, {
             cascade: props.cascade,
             allowNotLoaded: props.allowCheckingNotLoaded

package/lib/date-picker/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NDatePicker } from './src/DatePicker';
+export { default as NDatePicker, datePickerProps } from './src/DatePicker';
 export type { DatePickerProps } from './src/DatePicker';
 export type { DatePickerInst } from './src/interface';

package/lib/date-picker/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NDatePicker = void 0;
+exports.datePickerProps = exports.NDatePicker = void 0;
 var DatePicker_1 = require("./src/DatePicker");
 Object.defineProperty(exports, "NDatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+Object.defineProperty(exports, "datePickerProps", { enumerable: true, get: function () { return DatePicker_1.datePickerProps; } });

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

@@ -5,7 +5,7 @@ import type { FormValidationStatus } from '../../form/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { DatePickerType } from './config';
 import type { OnUpdateValue, Value, IsDateDisabled, IsTimeDisabled, Shortcuts, FirstDayOfWeek, DefaultTime, FormattedValue, OnUpdateFormattedValue } from './interface';
-declare const datePickerProps: {
+export declare const datePickerProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -3956,6 +3956,7 @@ declare const _default: import("vue").DefineComponent<{
         select: () => void;
         activate: () => void;
         deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
     } | null>;
     isMounted: Readonly<Ref<boolean>>;
     displayTime: Ref<string>;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
@@ -25,7 +26,7 @@ const daterange_1 = __importDefault(require("./panel/daterange"));
 const month_1 = __importDefault(require("./panel/month"));
 const monthrange_1 = __importDefault(require("./panel/monthrange"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
+exports.datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
     }, clearable: Boolean, updateValueOnClose: Boolean, defaultValue: [Number, Array], defaultFormattedValue: [String, Array], defaultTime: [Number, String, Array], disabled: {
@@ -45,7 +46,7 @@ const datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DatePicker',
-    props: datePickerProps,
+    props: exports.datePickerProps,
     setup(props, { slots }) {
         var _a;
         if (process.env.NODE_ENV !== 'production') {
@@ -201,37 +202,46 @@ exports.default = (0, vue_1.defineComponent)({
             }
         });
         const mergedActionsRef = (0, vue_1.computed)(() => {
-            const { actions, type } = props;
+            const { actions, type, clearable } = props;
             if (actions === null)
                 return [];
             if (actions !== undefined)
                 return actions;
+            const result = clearable ? ['clear'] : [];
             switch (type) {
                 case 'date': {
-                    return ['clear', 'now'];
+                    result.push('now');
+                    return result;
                 }
                 case 'datetime': {
-                    return ['clear', 'now', 'confirm'];
+                    result.push('now', 'confirm');
+                    return result;
                 }
                 case 'daterange': {
-                    return ['clear', 'confirm'];
+                    result.push('confirm');
+                    return result;
                 }
                 case 'datetimerange': {
-                    return ['clear', 'confirm'];
+                    result.push('confirm');
+                    return result;
                 }
                 case 'month': {
-                    return ['clear', 'now', 'confirm'];
+                    result.push('now', 'confirm');
+                    return result;
                 }
                 case 'year': {
-                    return ['clear', 'now'];
+                    result.push('now');
+                    return result;
                 }
                 case 'quarter': {
-                    return ['clear', 'now', 'confirm'];
+                    result.push('now', 'confirm');
+                    return result;
                 }
                 case 'monthrange':
                 case 'yearrange':
                 case 'quarterrange': {
-                    return ['clear', 'confirm'];
+                    result.push('confirm');
+                    return result;
                 }
                 default: {
                     (0, _utils_1.warn)('data-picker', "The type is wrong, n-date-picker's type only supports `date`, `datetime`, `daterange` and `datetimerange`.");

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

@@ -1145,7 +1145,6 @@ declare const _default: import("vue").DefineComponent<{
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
-    resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
     handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;

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

@@ -33,7 +33,7 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-date-panel--daterange`,
                 !this.panel && `${mergedClsPrefix}-date-panel--shadow`,
                 this.themeClass
-            ], onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+            ], onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             (0, vue_1.h)("div", { ref: "startDatesElRef", class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month` },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-prev`, onClick: this.startCalendarPrevYear },
@@ -107,7 +107,7 @@ exports.default = (0, vue_1.defineComponent)({
                     })),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__suffix` },
                     ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('clear')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleClearClick }, { default: () => this.locale.clear })) : null,
-                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", type: "primary", disabled: this.isRangeInvalid, onClick: this.handleConfirmClick }, { default: () => this.locale.confirm })) : null))) : null,
+                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", type: "primary", disabled: this.isRangeInvalid || this.isSelecting, onClick: this.handleConfirmClick }, { default: () => this.locale.confirm })) : null))) : null,
             (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleFocusDetectorFocus })));
     }
 });

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

@@ -1145,7 +1145,6 @@ declare const _default: import("vue").DefineComponent<{
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
-    resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
     handleColItemClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;

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

@@ -35,7 +35,7 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-date-panel--datetimerange`,
                 !this.panel && `${mergedClsPrefix}-date-panel--shadow`,
                 this.themeClass
-            ], onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+            ], onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-header` },
                 (0, vue_1.h)(input_1.NInput, { value: this.startDateDisplayString, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, size: this.timePickerSize, stateful: false, class: `${mergedClsPrefix}-date-panel-date-input`, textDecoration: this.isStartValueInvalid ? 'line-through' : '', placeholder: this.locale.selectDate, onBlur: this.handleStartDateInputBlur, onUpdateValue: this.handleStartDateInput }),
                 (0, vue_1.h)(time_picker_1.NTimePicker, Object.assign({ placeholder: this.locale.selectTime, format: this.timeFormat, size: this.timePickerSize }, (Array.isArray(timePickerProps)
@@ -128,7 +128,7 @@ exports.default = (0, vue_1.defineComponent)({
                     })),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__suffix` },
                     ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('clear')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.handleClearClick }, { default: () => this.locale.clear })) : null,
-                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", type: "primary", disabled: this.isRangeInvalid, onClick: this.handleConfirmClick }, { default: () => this.locale.confirm })) : null))) : null,
+                    ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", type: "primary", disabled: this.isRangeInvalid || this.isSelecting, onClick: this.handleConfirmClick }, { default: () => this.locale.confirm })) : null))) : null,
             (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleFocusDetectorFocus })));
     }
 });

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

@@ -29,7 +29,7 @@ exports.default = (0, vue_1.defineComponent)({
                 case 'month':
                     return item.dateObject.month + 1;
                 case 'quarter':
-                    return `Q ${item.dateObject.quarter}`;
+                    return `Q${item.dateObject.quarter}`;
             }
         };
         const { useAsQuickJump } = props;

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

@@ -1152,7 +1152,6 @@ declare const _default: import("vue").DefineComponent<{
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
-    resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: import("../utils").DateItem) => void;
     handleColItemClick: (dateItem: MonthItem | YearItem | QuarterItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: import("../utils").DateItem) => void;

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

@@ -43,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
                     } }, item.type === 'month'
                 ? item.dateObject.month + 1
                 : item.type === 'quarter'
-                    ? item.dateObject.quarter
+                    ? `Q${item.dateObject.quarter}`
                     : item.dateObject.year));
         };
         (0, vue_1.onMounted)(() => {
@@ -58,7 +58,7 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-date-panel`,
                 `${mergedClsPrefix}-date-panel--daterange`,
                 !this.panel && `${mergedClsPrefix}-date-panel--shadow`
-            ], onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+            ], onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             (0, vue_1.h)("div", { ref: "startDatesElRef", class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` },
                     (0, vue_1.h)(_internal_1.NScrollbar, { ref: "startYearScrollbarRef", class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: () => this.virtualListContainer('start'), content: () => this.virtualListContent('start'), horizontalRailStyle: { zIndex: 1 }, verticalRailStyle: { zIndex: 1 } }, {

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -1151,7 +1151,6 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
-    resetSelectingStatus: (e: MouseEvent) => void;
     handleDateClick: (dateItem: DateItem) => void;
     handleColItemClick: (dateItem: MonthItem | QuarterItem | YearItem, clickType: 'start' | 'end') => void;
     handleDateMouseEnter: (dateItem: DateItem) => void;