naive-ui 2.43.2 → 2.44.1

package/es/data-table/src/TableParts/Body.mjs

@@ -129,7 +129,6 @@ export default defineComponent({
       childTriggerColIndexRef,
       indentRef,
       rowPropsRef,
-      maxHeightRef,
       stripedRef,
       loadingRef,
       onLoadRef,
@@ -145,20 +144,20 @@ export default defineComponent({
       handleTableBodyScroll,
       doCheck,
       doUncheck,
-      renderCell
+      renderCell,
+      xScrollableRef,
+      explicitlyScrollableRef
     } = inject(dataTableInjectionKey);
     const NConfigProvider = inject(configProviderInjectionKey);
     const scrollbarInstRef = ref(null);
     const virtualListRef = ref(null);
     const emptyElRef = ref(null);
-    const emptyRef = 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 = useMemo(() => props.showHeader || !emptyRef.value);
-    // If no body is shown, we shouldn't show scrollbar
-    const bodyShowHeaderOnlyRef = useMemo(() => {
-      return props.showHeader || emptyRef.value;
+    const mergedRenderEmptyRef = 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 = useMemo(() => paginatedDataRef.value.length === 0);
+    const shouldDisplayVirtualListRef = useMemo(() => virtualScrollRef.value && !emptyRef.value);
     let lastSelectedKey = '';
     const mergedExpandedRowKeySetRef = computed(() => {
       return new Set(mergedExpandedRowKeysRef.value);
@@ -210,17 +209,7 @@ export default 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 {
@@ -371,11 +360,11 @@ export default defineComponent({
       summary: summaryRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: mergedThemeRef,
+      mergedRenderEmpty: mergedRenderEmptyRef,
       scrollX: scrollXRef,
       cols: colsRef,
       loading: loadingRef,
-      bodyShowHeaderOnly: bodyShowHeaderOnlyRef,
-      shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef,
+      shouldDisplayVirtualList: shouldDisplayVirtualListRef,
       empty: emptyRef,
       paginatedDataAndInfo: computed(() => {
         const {
@@ -421,7 +410,6 @@ export default defineComponent({
       childTriggerColIndex: childTriggerColIndexRef,
       indent: indentRef,
       rowProps: rowPropsRef,
-      maxHeight: maxHeightRef,
       loadingKeySet: loadingKeySetRef,
       expandable: expandableRef,
       stickyExpandedRows: stickyExpandedRowsRef,
@@ -437,7 +425,9 @@ export default defineComponent({
       handleCheckboxUpdateChecked,
       handleRadioUpdateChecked,
       handleUpdateExpanded,
-      renderCell
+      renderCell,
+      explicitlyScrollable: explicitlyScrollableRef,
+      xScrollable: xScrollableRef
     }, exposedMethods);
   },
   render() {
@@ -445,47 +435,56 @@ export default defineComponent({
       mergedTheme,
       scrollX,
       mergedClsPrefix,
-      virtualScroll,
-      maxHeight,
-      mergedTableLayout,
-      flexHeight,
+      explicitlyScrollable,
+      xScrollable,
       loadingKeySet,
       onResize,
-      setHeaderScrollLeft
+      setHeaderScrollLeft,
+      empty,
+      shouldDisplayVirtualList
     } = 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 contentStyle = {
       minWidth: formatLength(scrollX) || '100%'
     };
     if (scrollX) contentStyle.width = '100%';
+    const createEmptyNode = () => 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"
+    }, resolveSlot(this.dataTableSlots.empty, () => {
+      var _a;
+      return [((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || h(NEmpty, {
+        theme: this.mergedTheme.peers.Empty,
+        themeOverrides: this.mergedTheme.peerOverrides.Empty
+      })];
+    }));
     const tableNode = h(NScrollbar, Object.assign({}, this.scrollbarProps, {
       ref: "scrollbarInstRef",
-      scrollable: scrollable || isBasicAutoLayout,
+      scrollable: explicitlyScrollable || xScrollable,
       class: `${mergedClsPrefix}-data-table-base-table-body`,
-      style: !this.empty ? this.bodyStyle : undefined,
+      style: !empty ? this.bodyStyle : 'height: initial;',
       theme: mergedTheme.peers.Scrollbar,
       themeOverrides: mergedTheme.peerOverrides.Scrollbar,
       contentStyle: contentStyle,
-      container: virtualScroll ? this.virtualListContainer : undefined,
-      content: virtualScroll ? this.virtualListContent : undefined,
+      container: shouldDisplayVirtualList ? this.virtualListContainer : undefined,
+      content: shouldDisplayVirtualList ? this.virtualListContent : undefined,
       horizontalRailStyle: {
         zIndex: 3
       },
       verticalRailStyle: {
         zIndex: 3
       },
+      internalExposeWidthCssVar: xScrollable && empty,
       xScrollable: xScrollable,
-      onScroll: virtualScroll ? undefined : this.handleTableBodyScroll,
+      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
@@ -799,8 +798,8 @@ export default defineComponent({
           }), cells);
           return row;
         };
-        if (!virtualScroll) {
-          return h("table", {
+        if (!this.shouldDisplayVirtualList) {
+          return h(Fragment, null, h("table", {
             class: `${mergedClsPrefix}-data-table-table`,
             onMouseleave: handleMouseleaveTable,
             style: {
@@ -826,7 +825,7 @@ export default defineComponent({
                 return -1;
               }
             });
-          })) : null);
+          })) : null), this.empty && this.xScrollable ? createEmptyNode() : null);
         } else {
           return h(VirtualList, {
             ref: "virtualListRef",
@@ -886,16 +885,9 @@ export default defineComponent({
       }
     });
     if (this.empty) {
-      const createEmptyNode = () => h("div", {
-        class: [`${mergedClsPrefix}-data-table-empty`, this.loading && `${mergedClsPrefix}-data-table-empty--hide`],
-        style: this.bodyStyle,
-        ref: "emptyElRef"
-      }, resolveSlot(this.dataTableSlots.empty, () => [h(NEmpty, {
-        theme: this.mergedTheme.peers.Empty,
-        themeOverrides: this.mergedTheme.peerOverrides.Empty
-      })]));
-      if (this.shouldDisplaySomeTablePart) {
-        return h(Fragment, null, tableNode, createEmptyNode());
+      if (this.explicitlyScrollable || this.xScrollable) {
+        // empty node is integrated into table node
+        return tableNode;
       } else {
         return h(VResizeObserver, {
           onResize: this.onResize

package/es/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/es/data-table/src/interface.mjs

@@ -46,10 +46,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     default: true
   },
   singleColumn: Boolean,
-  size: {
-    type: String,
-    default: 'medium'
-  },
+  size: String,
   remote: Boolean,
   defaultExpandedRowKeys: {
     type: Array,
@@ -100,10 +97,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
   scrollbarProps: Object,
   renderCell: Function,
   renderExpandIcon: Function,
-  spinProps: {
-    type: Object,
-    default: {}
-  },
+  spinProps: Object,
   getCsvCell: Function,
   getCsvHeader: Function,
   onLoad: Function,

package/{lib/data-table/src/publicTypes.d.ts → es/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/es/data-table/src/public-types.mjs

@@ -0,0 +1 @@
+export {};

package/es/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/es/data-table/src/use-scroll.mjs

@@ -5,8 +5,19 @@ import { getColKey, getNumberColWidth } from "./utils.mjs";
 export function useScroll(props, {
   mainTableInstRef,
   mergedCurrentPageRef,
-  bodyWidthRef
+  bodyWidthRef,
+  maxHeightRef,
+  mergedTableLayoutRef
 }) {
+  const explicitlyScrollableRef = computed(() => props.scrollX !== undefined || maxHeightRef.value !== undefined || props.flexHeight);
+  const xScrollableRef = 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 = ref();
   const leftActiveFixedColKeyRef = ref(null);
@@ -181,8 +192,7 @@ export function useScroll(props, {
       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';
@@ -225,6 +235,8 @@ export function useScroll(props, {
     syncScrollState,
     handleTableBodyScroll,
     handleTableHeaderScroll,
-    setHeaderScrollLeft
+    setHeaderScrollLeft,
+    explicitlyScrollableRef,
+    xScrollableRef
   };
 }

package/es/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/es/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/es/date-picker/src/DatePicker.mjs

@@ -40,12 +40,6 @@ export default defineComponent({
       localeRef,
       dateLocaleRef
     } = useLocale('DatePicker');
-    const formItem = useFormItem(props);
-    const {
-      mergedSizeRef,
-      mergedDisabledRef,
-      mergedStatusRef
-    } = formItem;
     const {
       mergedComponentPropsRef,
       mergedClsPrefixRef,
@@ -53,6 +47,27 @@ export default defineComponent({
       namespaceRef,
       inlineThemeDisabled
     } = useConfig(props);
+    const formItem = 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 = ref(null);
     const triggerElRef = ref(null);
     const inputInstRef = ref(null);
@@ -823,6 +838,8 @@ export default 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/es/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/es/date-picker/src/panel/date.mjs

@@ -58,6 +58,8 @@ export default defineComponent({
       class: `${mergedClsPrefix}-date-panel-month__prev`,
       onClick: this.prevMonth
     }, resolveSlot(datePickerSlots['prev-month'], () => [h(BackwardIcon, null)])), h(PanelHeader, {
+      fastYearSelect: this.fastYearSelect,
+      fastMonthSelect: this.fastMonthSelect,
       monthYearSeparator: this.calendarHeaderMonthYearSeparator,
       monthBeforeYear: this.calendarMonthBeforeYear,
       value: this.calendarValue,

package/es/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/es/date-picker/src/panel/daterange.mjs

@@ -47,6 +47,8 @@ export default defineComponent({
       class: `${mergedClsPrefix}-date-panel-month__prev`,
       onClick: this.startCalendarPrevMonth
     }, resolveSlot(datePickerSlots['prev-month'], () => [h(BackwardIcon, null)])), h(PanelHeader, {
+      fastYearSelect: this.fastYearSelect,
+      fastMonthSelect: this.fastMonthSelect,
       monthYearSeparator: this.calendarHeaderMonthYearSeparator,
       monthBeforeYear: this.calendarMonthBeforeYear,
       value: this.startCalendarDateTime,
@@ -105,6 +107,8 @@ export default defineComponent({
       class: `${mergedClsPrefix}-date-panel-month__prev`,
       onClick: this.endCalendarPrevMonth
     }, resolveSlot(datePickerSlots['prev-month'], () => [h(BackwardIcon, null)])), h(PanelHeader, {
+      fastYearSelect: this.fastYearSelect,
+      fastMonthSelect: this.fastMonthSelect,
       monthYearSeparator: this.calendarHeaderMonthYearSeparator,
       monthBeforeYear: this.calendarMonthBeforeYear,
       value: this.endCalendarDateTime,

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

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

package/es/date-picker/src/panel/datetime.mjs

@@ -76,6 +76,8 @@ export default defineComponent({
       class: `${mergedClsPrefix}-date-panel-month__prev`,
       onClick: this.prevMonth
     }, resolveSlot(datePickerSlots['prev-month'], () => [h(BackwardIcon, null)])), h(PanelHeader, {
+      fastYearSelect: this.fastYearSelect,
+      fastMonthSelect: this.fastMonthSelect,
       monthYearSeparator: this.calendarHeaderMonthYearSeparator,
       monthBeforeYear: this.calendarMonthBeforeYear,
       value: this.calendarValue,