@element-plus/nightly 0.0.20250512 → 0.0.20250514

package/lib/components/collapse/src/collapse.js

@@ -2,36 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var collapse = require('./collapse2.js');
-var useCollapse = require('./use-collapse.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var types = require('../../../utils/types.js');
+var shared = require('@vue/shared');
+var event = require('../../../constants/event.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElCollapse"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: collapse.collapseProps,
-  emits: collapse.collapseEmits,
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    const { activeNames, setActiveNames } = useCollapse.useCollapse(props, emit);
-    const { rootKls } = useCollapse.useCollapseDOM(props);
-    expose({
-      activeNames,
-      setActiveNames
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(vue.unref(rootKls))
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
+const emitChangeFn = (value) => types.isNumber(value) || shared.isString(value) || shared.isArray(value);
+const collapseProps = runtime.buildProps({
+  accordion: Boolean,
+  modelValue: {
+    type: runtime.definePropType([Array, String, Number]),
+    default: () => void 0
+  },
+  expandIconPosition: {
+    type: runtime.definePropType([String]),
+    default: "right"
   }
 });
-var Collapse = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "collapse.vue"]]);
+const collapseEmits = {
+  [event.UPDATE_MODEL_EVENT]: emitChangeFn,
+  [event.CHANGE_EVENT]: emitChangeFn
+};
 
-exports["default"] = Collapse;
+exports.collapseEmits = collapseEmits;
+exports.collapseProps = collapseProps;
+exports.emitChangeFn = emitChangeFn;
 //# sourceMappingURL=collapse.js.map

package/lib/components/collapse/src/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sources":["../../../../../../packages/components/collapse/src/collapse.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { collapseEmits, collapseProps } from './collapse'\nimport { useCollapse, useCollapseDOM } from './use-collapse'\n\ndefineOptions({\n  name: 'ElCollapse',\n})\nconst props = defineProps(collapseProps)\nconst emit = defineEmits(collapseEmits)\n\nconst { activeNames, setActiveNames } = useCollapse(props, emit)\n\nconst { rootKls } = useCollapseDOM(props)\n\ndefineExpose({\n  /** @description active names */\n  activeNames,\n  /** @description set active names */\n  setActiveNames,\n})\n</script>\n"],"names":["useCollapse","useCollapseDOM","_openBlock","_createElementBlock"],"mappings":";;;;;;;;;uCAUc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAmB,GAAAA,uBAAA,CAAY,OAAO,IAAI,CAAA,CAAA;AAE/D,IAAA,MAAM,EAAE,OAAA,EAAY,GAAAC,0BAAA,CAAe,KAAK,CAAA,CAAA;AAExC,IAAa,MAAA,CAAA;AAAA,MAAA,WAAA;AAAA,MAEX,cAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAEA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACD,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;"}
+{"version":3,"file":"collapse.js","sources":["../../../../../../packages/components/collapse/src/collapse.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isArray,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\n\nexport type CollapseIconPositionType = 'left' | 'right'\n\nexport const emitChangeFn = (value: CollapseModelValue) =>\n  isNumber(value) || isString(value) || isArray(value)\n\nexport const collapseProps = buildProps({\n  /**\n   * @description whether to activate accordion mode\n   */\n  accordion: Boolean,\n  /**\n   * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`\n   */\n  modelValue: {\n    type: definePropType<CollapseModelValue>([Array, String, Number]),\n    default: () => undefined,\n  },\n  /**\n   * @description set expand icon position\n   */\n  expandIconPosition: {\n    type: definePropType<CollapseIconPositionType>([String]),\n    default: 'right',\n  },\n} as const)\nexport type CollapseProps = ExtractPropTypes<typeof collapseProps>\n\nexport const collapseEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n}\nexport type CollapseEmits = typeof collapseEmits\n"],"names":["isNumber","isString","isArray","buildProps","definePropType","UPDATE_MODEL_EVENT","CHANGE_EVENT"],"mappings":";;;;;;;;;AAQY,MAAC,YAAY,GAAG,CAAC,KAAK,KAAKA,cAAQ,CAAC,KAAK,CAAC,IAAIC,eAAQ,CAAC,KAAK,CAAC,IAAIC,cAAO,CAAC,KAAK,EAAE;AAChF,MAAC,aAAa,GAAGC,kBAAU,CAAC;AACxC,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC;AACzB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAEA,sBAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAACC,wBAAkB,GAAG,YAAY;AACpC,EAAE,CAACC,kBAAY,GAAG,YAAY;AAC9B;;;;;;"}

package/lib/components/collapse/src/collapse2.js

@@ -2,29 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var runtime = require('../../../utils/vue/props/runtime.js');
-var types = require('../../../utils/types.js');
-var shared = require('@vue/shared');
-var event = require('../../../constants/event.js');
+var vue = require('vue');
+var collapse = require('./collapse.js');
+var useCollapse = require('./use-collapse.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-const emitChangeFn = (value) => types.isNumber(value) || shared.isString(value) || shared.isArray(value);
-const collapseProps = runtime.buildProps({
-  accordion: Boolean,
-  modelValue: {
-    type: runtime.definePropType([Array, String, Number]),
-    default: () => void 0
-  },
-  expandIconPosition: {
-    type: runtime.definePropType([String]),
-    default: "right"
+const __default__ = vue.defineComponent({
+  name: "ElCollapse"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: collapse.collapseProps,
+  emits: collapse.collapseEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const { activeNames, setActiveNames } = useCollapse.useCollapse(props, emit);
+    const { rootKls } = useCollapse.useCollapseDOM(props);
+    expose({
+      activeNames,
+      setActiveNames
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(rootKls))
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
   }
 });
-const collapseEmits = {
-  [event.UPDATE_MODEL_EVENT]: emitChangeFn,
-  [event.CHANGE_EVENT]: emitChangeFn
-};
+var Collapse = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "collapse.vue"]]);
 
-exports.collapseEmits = collapseEmits;
-exports.collapseProps = collapseProps;
-exports.emitChangeFn = emitChangeFn;
+exports["default"] = Collapse;
 //# sourceMappingURL=collapse2.js.map

package/lib/components/collapse/src/collapse2.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse2.js","sources":["../../../../../../packages/components/collapse/src/collapse.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isArray,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\n\nexport type CollapseIconPositionType = 'left' | 'right'\n\nexport const emitChangeFn = (value: CollapseModelValue) =>\n  isNumber(value) || isString(value) || isArray(value)\n\nexport const collapseProps = buildProps({\n  /**\n   * @description whether to activate accordion mode\n   */\n  accordion: Boolean,\n  /**\n   * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`\n   */\n  modelValue: {\n    type: definePropType<CollapseModelValue>([Array, String, Number]),\n    default: () => undefined,\n  },\n  /**\n   * @description set expand icon position\n   */\n  expandIconPosition: {\n    type: definePropType<CollapseIconPositionType>([String]),\n    default: 'right',\n  },\n} as const)\nexport type CollapseProps = ExtractPropTypes<typeof collapseProps>\n\nexport const collapseEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n}\nexport type CollapseEmits = typeof collapseEmits\n"],"names":["isNumber","isString","isArray","buildProps","definePropType","UPDATE_MODEL_EVENT","CHANGE_EVENT"],"mappings":";;;;;;;;;AAQY,MAAC,YAAY,GAAG,CAAC,KAAK,KAAKA,cAAQ,CAAC,KAAK,CAAC,IAAIC,eAAQ,CAAC,KAAK,CAAC,IAAIC,cAAO,CAAC,KAAK,EAAE;AAChF,MAAC,aAAa,GAAGC,kBAAU,CAAC;AACxC,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC;AACzB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAEA,sBAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAACC,wBAAkB,GAAG,YAAY;AACpC,EAAE,CAACC,kBAAY,GAAG,YAAY;AAC9B;;;;;;"}
+{"version":3,"file":"collapse2.js","sources":["../../../../../../packages/components/collapse/src/collapse.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { collapseEmits, collapseProps } from './collapse'\nimport { useCollapse, useCollapseDOM } from './use-collapse'\n\ndefineOptions({\n  name: 'ElCollapse',\n})\nconst props = defineProps(collapseProps)\nconst emit = defineEmits(collapseEmits)\n\nconst { activeNames, setActiveNames } = useCollapse(props, emit)\n\nconst { rootKls } = useCollapseDOM(props)\n\ndefineExpose({\n  /** @description active names */\n  activeNames,\n  /** @description set active names */\n  setActiveNames,\n})\n</script>\n"],"names":["useCollapse","useCollapseDOM","_openBlock","_createElementBlock"],"mappings":";;;;;;;;;uCAUc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAmB,GAAAA,uBAAA,CAAY,OAAO,IAAI,CAAA,CAAA;AAE/D,IAAA,MAAM,EAAE,OAAA,EAAY,GAAAC,0BAAA,CAAe,KAAK,CAAA,CAAA;AAExC,IAAa,MAAA,CAAA;AAAA,MAAA,WAAA;AAAA,MAEX,cAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAEA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACD,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;"}

package/lib/components/date-picker/src/composables/use-panel-date-range.d.ts

@@ -0,0 +1,29 @@
+import type { PanelDateRangeProps } from '../props/panel-date-range';
+import type { Dayjs } from 'dayjs';
+import type { ComputedRef, Ref } from 'vue';
+type CurrentView = 'date' | 'year' | 'month';
+type CurrentViewRef = {
+    focus: () => void;
+};
+export type Emits = (event: 'pick' | 'set-picker-option' | 'calendar-change' | 'panel-change', ...args: any[]) => void;
+export declare const usePanelDateRange: (props: PanelDateRangeProps, emit: Emits, leftDate: Ref<Dayjs>, rightDate: Ref<Dayjs>) => {
+    leftCurrentView: Ref<CurrentView>;
+    rightCurrentView: Ref<CurrentView>;
+    leftCurrentViewRef: Ref<CurrentViewRef | undefined>;
+    rightCurrentViewRef: Ref<CurrentViewRef | undefined>;
+    leftYear: ComputedRef<number>;
+    rightYear: ComputedRef<number>;
+    leftMonth: ComputedRef<number>;
+    rightMonth: ComputedRef<number>;
+    leftYearLabel: ComputedRef<string>;
+    rightYearLabel: ComputedRef<string>;
+    showLeftPicker: (view: "month" | "year") => Promise<void>;
+    showRightPicker: (view: "month" | "year") => Promise<void>;
+    handleLeftYearPick: (year: number) => Promise<void>;
+    handleRightYearPick: (year: number) => Promise<void>;
+    handleLeftMonthPick: (month: number) => Promise<void>;
+    handleRightMonthPick: (month: number) => Promise<void>;
+    handlePanelChange: (mode: "month" | "year") => void;
+    adjustDateByView: (currentView: CurrentView, date: Dayjs, forward: boolean) => Dayjs;
+};
+export {};

package/lib/components/date-picker/src/composables/use-panel-date-range.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var utils = require('../utils.js');
+var index = require('../../../../hooks/use-locale/index.js');
+
+const usePanelDateRange = (props, emit, leftDate, rightDate) => {
+  const leftCurrentView = vue.ref("date");
+  const leftCurrentViewRef = vue.ref();
+  const rightCurrentView = vue.ref("date");
+  const rightCurrentViewRef = vue.ref();
+  const pickerBase = vue.inject("EP_PICKER_BASE");
+  const { disabledDate } = pickerBase.props;
+  const { t, lang } = index.useLocale();
+  const leftYear = vue.computed(() => {
+    return leftDate.value.year();
+  });
+  const leftMonth = vue.computed(() => {
+    return leftDate.value.month();
+  });
+  const rightYear = vue.computed(() => {
+    return rightDate.value.year();
+  });
+  const rightMonth = vue.computed(() => {
+    return rightDate.value.month();
+  });
+  function computedYearLabel(currentView, yearValue) {
+    const yearTranslation = t("el.datepicker.year");
+    if (currentView.value === "year") {
+      const startYear = Math.floor(yearValue.value / 10) * 10;
+      return yearTranslation ? `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}` : `${startYear} - ${startYear + 9}`;
+    }
+    return `${yearValue.value} ${yearTranslation}`;
+  }
+  function focusPicker(currentViewRef) {
+    currentViewRef == null ? void 0 : currentViewRef.focus();
+  }
+  async function showPicker(pickerType, view) {
+    const currentView = pickerType === "left" ? leftCurrentView : rightCurrentView;
+    const currentViewRef = pickerType === "left" ? leftCurrentViewRef : rightCurrentViewRef;
+    currentView.value = view;
+    await vue.nextTick();
+    focusPicker(currentViewRef.value);
+  }
+  async function handlePick(mode, pickerType, value) {
+    const isLeftPicker = pickerType === "left";
+    const startDate = isLeftPicker ? leftDate : rightDate;
+    const endDate = isLeftPicker ? rightDate : leftDate;
+    const currentView = isLeftPicker ? leftCurrentView : rightCurrentView;
+    const currentViewRef = isLeftPicker ? leftCurrentViewRef : rightCurrentViewRef;
+    if (mode === "year") {
+      const data = startDate.value.year(value);
+      startDate.value = utils.getValidDateOfYear(data, lang.value, disabledDate);
+    }
+    if (mode === "month") {
+      startDate.value = utils.getValidDateOfMonth(startDate.value.year(), value, lang.value, disabledDate);
+    }
+    if (!props.unlinkPanels) {
+      endDate.value = pickerType === "left" ? startDate.value.add(1, "month") : startDate.value.subtract(1, "month");
+    }
+    currentView.value = mode === "year" ? "month" : "date";
+    await vue.nextTick();
+    focusPicker(currentViewRef.value);
+    handlePanelChange(mode);
+  }
+  function handlePanelChange(mode) {
+    emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+  }
+  function adjustDateByView(currentView, date, forward) {
+    const action = forward ? "add" : "subtract";
+    return currentView === "year" ? date[action](10, "year") : date[action](1, "year");
+  }
+  return {
+    leftCurrentView,
+    rightCurrentView,
+    leftCurrentViewRef,
+    rightCurrentViewRef,
+    leftYear,
+    rightYear,
+    leftMonth,
+    rightMonth,
+    leftYearLabel: vue.computed(() => computedYearLabel(leftCurrentView, leftYear)),
+    rightYearLabel: vue.computed(() => computedYearLabel(rightCurrentView, rightYear)),
+    showLeftPicker: (view) => showPicker("left", view),
+    showRightPicker: (view) => showPicker("right", view),
+    handleLeftYearPick: (year) => handlePick("year", "left", year),
+    handleRightYearPick: (year) => handlePick("year", "right", year),
+    handleLeftMonthPick: (month) => handlePick("month", "left", month),
+    handleRightMonthPick: (month) => handlePick("month", "right", month),
+    handlePanelChange,
+    adjustDateByView
+  };
+};
+
+exports.usePanelDateRange = usePanelDateRange;
+//# sourceMappingURL=use-panel-date-range.js.map

package/lib/components/date-picker/src/composables/use-panel-date-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-panel-date-range.js","sources":["../../../../../../../packages/components/date-picker/src/composables/use-panel-date-range.ts"],"sourcesContent":["import { computed, inject, nextTick, ref } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { getValidDateOfMonth, getValidDateOfYear } from '../utils'\n\nimport type { PanelDateRangeProps } from '../props/panel-date-range'\nimport type { Dayjs } from 'dayjs'\nimport type { ComputedRef, Ref } from 'vue'\n\ntype CurrentView = 'date' | 'year' | 'month'\ntype CurrentViewRef = { focus: () => void }\n\nexport type Emits = (\n  event: 'pick' | 'set-picker-option' | 'calendar-change' | 'panel-change',\n  ...args: any[]\n) => void\n\nexport const usePanelDateRange = (\n  props: PanelDateRangeProps,\n  emit: Emits,\n  leftDate: Ref<Dayjs>,\n  rightDate: Ref<Dayjs>\n) => {\n  const leftCurrentView = ref<CurrentView>('date')\n  const leftCurrentViewRef = ref<CurrentViewRef>()\n  const rightCurrentView = ref<CurrentView>('date')\n  const rightCurrentViewRef = ref<CurrentViewRef>()\n  const pickerBase = inject('EP_PICKER_BASE') as any\n  const { disabledDate } = pickerBase.props\n  const { t, lang } = useLocale()\n\n  const leftYear = computed(() => {\n    return leftDate.value.year()\n  })\n  const leftMonth = computed(() => {\n    return leftDate.value.month()\n  })\n\n  const rightYear = computed(() => {\n    return rightDate.value.year()\n  })\n  const rightMonth = computed(() => {\n    return rightDate.value.month()\n  })\n\n  function computedYearLabel(\n    currentView: Ref<CurrentView>,\n    yearValue: ComputedRef<number>\n  ) {\n    const yearTranslation = t('el.datepicker.year')\n    if (currentView.value === 'year') {\n      const startYear = Math.floor(yearValue.value! / 10) * 10\n      return yearTranslation\n        ? `${startYear} ${yearTranslation} - ${\n            startYear + 9\n          } ${yearTranslation}`\n        : `${startYear} - ${startYear + 9}`\n    }\n    return `${yearValue.value} ${yearTranslation}`\n  }\n\n  function focusPicker(currentViewRef?: CurrentViewRef) {\n    currentViewRef?.focus()\n  }\n\n  async function showPicker(\n    pickerType: 'left' | 'right',\n    view: 'month' | 'year'\n  ) {\n    const currentView =\n      pickerType === 'left' ? leftCurrentView : rightCurrentView\n    const currentViewRef =\n      pickerType === 'left' ? leftCurrentViewRef : rightCurrentViewRef\n    currentView.value = view\n    await nextTick()\n    focusPicker(currentViewRef.value)\n  }\n\n  async function handlePick(\n    mode: 'month' | 'year',\n    pickerType: 'left' | 'right',\n    value: number\n  ) {\n    const isLeftPicker = pickerType === 'left'\n    const startDate = isLeftPicker ? leftDate : rightDate\n    const endDate = isLeftPicker ? rightDate : leftDate\n    const currentView = isLeftPicker ? leftCurrentView : rightCurrentView\n    const currentViewRef = isLeftPicker\n      ? leftCurrentViewRef\n      : rightCurrentViewRef\n\n    if (mode === 'year') {\n      const data = startDate.value.year(value)\n      startDate.value = getValidDateOfYear(data, lang.value, disabledDate)\n    }\n\n    if (mode === 'month') {\n      startDate.value = getValidDateOfMonth(\n        startDate.value.year(),\n        value,\n        lang.value,\n        disabledDate\n      )\n    }\n\n    if (!props.unlinkPanels) {\n      endDate.value =\n        pickerType === 'left'\n          ? startDate.value.add(1, 'month')\n          : startDate.value.subtract(1, 'month')\n    }\n\n    currentView.value = mode === 'year' ? 'month' : 'date'\n    await nextTick()\n    focusPicker(currentViewRef.value)\n    handlePanelChange(mode)\n  }\n\n  function handlePanelChange(mode: 'month' | 'year') {\n    emit(\n      'panel-change',\n      [leftDate.value.toDate(), rightDate.value.toDate()],\n      mode\n    )\n  }\n\n  function adjustDateByView(\n    currentView: CurrentView,\n    date: Dayjs,\n    forward: boolean\n  ) {\n    const action = forward ? 'add' : 'subtract'\n    return currentView === 'year'\n      ? date[action](10, 'year')\n      : date[action](1, 'year')\n  }\n\n  return {\n    leftCurrentView,\n    rightCurrentView,\n    leftCurrentViewRef,\n    rightCurrentViewRef,\n    leftYear,\n    rightYear,\n    leftMonth,\n    rightMonth,\n    leftYearLabel: computed(() => computedYearLabel(leftCurrentView, leftYear)),\n    rightYearLabel: computed(() =>\n      computedYearLabel(rightCurrentView, rightYear)\n    ),\n    showLeftPicker: (view: 'month' | 'year') => showPicker('left', view),\n    showRightPicker: (view: 'month' | 'year') => showPicker('right', view),\n    handleLeftYearPick: (year: number) => handlePick('year', 'left', year),\n    handleRightYearPick: (year: number) => handlePick('year', 'right', year),\n    handleLeftMonthPick: (month: number) => handlePick('month', 'left', month),\n    handleRightMonthPick: (month: number) =>\n      handlePick('month', 'right', month),\n    handlePanelChange,\n    adjustDateByView,\n  }\n}\n"],"names":["ref","inject","useLocale","computed","nextTick","getValidDateOfYear","getValidDateOfMonth"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/panel-date-range.js

@@ -12,6 +12,9 @@ var iconsVue = require('@element-plus/icons-vue');
 var panelDateRange = require('../props/panel-date-range.js');
 var useRangePicker = require('../composables/use-range-picker.js');
 var utils$1 = require('../utils.js');
+var usePanelDateRange = require('../composables/use-panel-date-range.js');
+var basicYearTable = require('./basic-year-table.js');
+var basicMonthTable = require('./basic-month-table.js');
 var basicDateTable = require('./basic-date-table.js');
 var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
 var panelTimePick = require('../../../time-picker/src/time-picker-com/panel-time-pick.js');
@@ -79,24 +82,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       min: null,
       max: null
     });
-    const leftLabel = vue.computed(() => {
-      return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
-    });
-    const rightLabel = vue.computed(() => {
-      return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
-    });
-    const leftYear = vue.computed(() => {
-      return leftDate.value.year();
-    });
-    const leftMonth = vue.computed(() => {
-      return leftDate.value.month();
-    });
-    const rightYear = vue.computed(() => {
-      return rightDate.value.year();
-    });
-    const rightMonth = vue.computed(() => {
-      return rightDate.value.month();
-    });
+    const {
+      leftCurrentView,
+      rightCurrentView,
+      leftCurrentViewRef,
+      rightCurrentViewRef,
+      leftYear,
+      rightYear,
+      leftMonth,
+      rightMonth,
+      leftYearLabel,
+      rightYearLabel,
+      showLeftPicker,
+      showRightPicker,
+      handleLeftYearPick,
+      handleRightYearPick,
+      handleLeftMonthPick,
+      handleRightMonthPick,
+      handlePanelChange,
+      adjustDateByView
+    } = usePanelDateRange.usePanelDateRange(props, emit, leftDate, rightDate);
     const hasShortcuts = vue.computed(() => !!shortcuts.value.length);
     const minVisibleDate = vue.computed(() => {
       if (dateUserInput.value.min !== null)
@@ -136,7 +141,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return utils$1.isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
     };
     const leftPrevYear = () => {
-      leftDate.value = leftDate.value.subtract(1, "year");
+      leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, false);
       if (!props.unlinkPanels) {
         rightDate.value = leftDate.value.add(1, "month");
       }
@@ -151,10 +156,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const rightNextYear = () => {
       if (!props.unlinkPanels) {
-        leftDate.value = leftDate.value.add(1, "year");
+        leftDate.value = adjustDateByView(rightCurrentView.value, leftDate.value, true);
         rightDate.value = leftDate.value.add(1, "month");
       } else {
-        rightDate.value = rightDate.value.add(1, "year");
+        rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, true);
       }
       handlePanelChange("year");
     };
@@ -168,7 +173,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       handlePanelChange("month");
     };
     const leftNextYear = () => {
-      leftDate.value = leftDate.value.add(1, "year");
+      leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, true);
       handlePanelChange("year");
     };
     const leftNextMonth = () => {
@@ -176,16 +181,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       handlePanelChange("month");
     };
     const rightPrevYear = () => {
-      rightDate.value = rightDate.value.subtract(1, "year");
+      rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, false);
       handlePanelChange("year");
     };
     const rightPrevMonth = () => {
       rightDate.value = rightDate.value.subtract(1, "month");
       handlePanelChange("month");
     };
-    const handlePanelChange = (mode) => {
-      emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
-    };
     const enableMonthArrow = vue.computed(() => {
       const nextMonth = (leftMonth.value + 1) % 12;
       const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
@@ -271,7 +273,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
-    const handleTimeChange = (value, type) => {
+    const handleTimeChange = (_value, type) => {
       timeUserInput.value[type] = null;
       if (type === "min") {
         leftDate.value = minDate.value;
@@ -504,7 +506,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ], 10, ["aria-label"]),
-                vue.createElementVNode("button", {
+                vue.withDirectives(vue.createElementVNode("button", {
                   type: "button",
                   class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
                   "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
@@ -518,7 +520,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       _: 1
                     })
                   ])
-                ], 10, ["aria-label"]),
+                ], 10, ["aria-label"]), [
+                  [vue.vShow, vue.unref(leftCurrentView) === "date"]
+                ]),
                 _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
                   type: "button",
@@ -536,7 +540,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                _ctx.unlinkPanels && vue.unref(leftCurrentView) === "date" ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 1,
                   type: "button",
                   disabled: !vue.unref(enableMonthArrow),
@@ -556,9 +560,34 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
+                vue.createElementVNode("div", null, [
+                  vue.createElementVNode("span", {
+                    role: "button",
+                    class: vue.normalizeClass(vue.unref(drpNs).e("header-label")),
+                    "aria-live": "polite",
+                    tabindex: "0",
+                    onKeydown: vue.withKeys(($event) => vue.unref(showLeftPicker)("year"), ["enter"]),
+                    onClick: ($event) => vue.unref(showLeftPicker)("year")
+                  }, vue.toDisplayString(vue.unref(leftYearLabel)), 43, ["onKeydown", "onClick"]),
+                  vue.withDirectives(vue.createElementVNode("span", {
+                    role: "button",
+                    "aria-live": "polite",
+                    tabindex: "0",
+                    class: vue.normalizeClass([
+                      vue.unref(drpNs).e("header-label"),
+                      { active: vue.unref(leftCurrentView) === "month" }
+                    ]),
+                    onKeydown: vue.withKeys(($event) => vue.unref(showLeftPicker)("month"), ["enter"]),
+                    onClick: ($event) => vue.unref(showLeftPicker)("month")
+                  }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, ["onKeydown", "onClick"]), [
+                    [vue.vShow, vue.unref(leftCurrentView) === "date"]
+                  ])
+                ])
               ], 2),
-              vue.createVNode(basicDateTable["default"], {
+              vue.unref(leftCurrentView) === "date" ? (vue.openBlock(), vue.createBlock(basicDateTable["default"], {
+                key: 0,
+                ref_key: "leftCurrentViewRef",
+                ref: leftCurrentViewRef,
                 "selection-mode": "range",
                 date: leftDate.value,
                 "min-date": vue.unref(minDate),
@@ -569,7 +598,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 onChangerange: vue.unref(handleChangeRange),
                 onPick: handleRangePick,
                 onSelect: vue.unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])) : vue.createCommentVNode("v-if", true),
+              vue.unref(leftCurrentView) === "year" ? (vue.openBlock(), vue.createBlock(basicYearTable["default"], {
+                key: 1,
+                ref_key: "leftCurrentViewRef",
+                ref: leftCurrentViewRef,
+                "selection-mode": "year",
+                date: leftDate.value,
+                "disabled-date": vue.unref(disabledDate),
+                "parsed-value": _ctx.parsedValue,
+                onPick: vue.unref(handleLeftYearPick)
+              }, null, 8, ["date", "disabled-date", "parsed-value", "onPick"])) : vue.createCommentVNode("v-if", true),
+              vue.unref(leftCurrentView) === "month" ? (vue.openBlock(), vue.createBlock(basicMonthTable["default"], {
+                key: 2,
+                ref_key: "leftCurrentViewRef",
+                ref: leftCurrentViewRef,
+                "selection-mode": "month",
+                date: leftDate.value,
+                "parsed-value": _ctx.parsedValue,
+                "disabled-date": vue.unref(disabledDate),
+                onPick: vue.unref(handleLeftMonthPick)
+              }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
             ], 2),
             vue.createElementVNode("div", {
               class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
@@ -594,7 +643,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                _ctx.unlinkPanels && vue.unref(rightCurrentView) === "date" ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 1,
                   type: "button",
                   disabled: !vue.unref(enableMonthArrow),
@@ -629,7 +678,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ], 10, ["aria-label"]),
-                vue.createElementVNode("button", {
+                vue.withDirectives(vue.createElementVNode("button", {
                   type: "button",
                   class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
                   "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
@@ -643,10 +692,37 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       _: 1
                     })
                   ])
-                ], 10, ["aria-label"]),
-                vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
+                ], 10, ["aria-label"]), [
+                  [vue.vShow, vue.unref(rightCurrentView) === "date"]
+                ]),
+                vue.createElementVNode("div", null, [
+                  vue.createElementVNode("span", {
+                    role: "button",
+                    class: vue.normalizeClass(vue.unref(drpNs).e("header-label")),
+                    "aria-live": "polite",
+                    tabindex: "0",
+                    onKeydown: vue.withKeys(($event) => vue.unref(showRightPicker)("year"), ["enter"]),
+                    onClick: ($event) => vue.unref(showRightPicker)("year")
+                  }, vue.toDisplayString(vue.unref(rightYearLabel)), 43, ["onKeydown", "onClick"]),
+                  vue.withDirectives(vue.createElementVNode("span", {
+                    role: "button",
+                    "aria-live": "polite",
+                    tabindex: "0",
+                    class: vue.normalizeClass([
+                      vue.unref(drpNs).e("header-label"),
+                      { active: vue.unref(rightCurrentView) === "month" }
+                    ]),
+                    onKeydown: vue.withKeys(($event) => vue.unref(showRightPicker)("month"), ["enter"]),
+                    onClick: ($event) => vue.unref(showRightPicker)("month")
+                  }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, ["onKeydown", "onClick"]), [
+                    [vue.vShow, vue.unref(rightCurrentView) === "date"]
+                  ])
+                ])
               ], 2),
-              vue.createVNode(basicDateTable["default"], {
+              vue.unref(rightCurrentView) === "date" ? (vue.openBlock(), vue.createBlock(basicDateTable["default"], {
+                key: 0,
+                ref_key: "rightCurrentViewRef",
+                ref: rightCurrentViewRef,
                 "selection-mode": "range",
                 date: rightDate.value,
                 "min-date": vue.unref(minDate),
@@ -657,7 +733,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 onChangerange: vue.unref(handleChangeRange),
                 onPick: handleRangePick,
                 onSelect: vue.unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])) : vue.createCommentVNode("v-if", true),
+              vue.unref(rightCurrentView) === "year" ? (vue.openBlock(), vue.createBlock(basicYearTable["default"], {
+                key: 1,
+                ref_key: "rightCurrentViewRef",
+                ref: rightCurrentViewRef,
+                "selection-mode": "year",
+                date: rightDate.value,
+                "disabled-date": vue.unref(disabledDate),
+                "parsed-value": _ctx.parsedValue,
+                onPick: vue.unref(handleRightYearPick)
+              }, null, 8, ["date", "disabled-date", "parsed-value", "onPick"])) : vue.createCommentVNode("v-if", true),
+              vue.unref(rightCurrentView) === "month" ? (vue.openBlock(), vue.createBlock(basicMonthTable["default"], {
+                key: 2,
+                ref_key: "rightCurrentViewRef",
+                ref: rightCurrentViewRef,
+                "selection-mode": "month",
+                date: rightDate.value,
+                "parsed-value": _ctx.parsedValue,
+                "disabled-date": vue.unref(disabledDate),
+                onPick: vue.unref(handleRightMonthPick)
+              }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
             ], 2)
           ], 2)
         ], 2),