element-plus 2.10.0 → 2.10.2

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

@@ -2,36 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var typescript = require('../../../utils/typescript.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: () => typescript.mutable([])
+  },
+  expandIconPosition: {
+    type: runtime.definePropType([String]),
+    default: "right"
+  },
+  beforeCollapse: {
+    type: runtime.definePropType(Function)
   }
 });
-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=collapse2.js.map

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;"}
+{"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  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable, Awaitable } 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: () => mutable([] as const),\n  },\n  /**\n   * @description set expand icon position\n   */\n  expandIconPosition: {\n    type: definePropType<CollapseIconPositionType>([String]),\n    default: 'right',\n  },\n  /**\n   * @description before-collapse hook before the collapse state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing\n   */\n  beforeCollapse: {\n    type: definePropType<(name: CollapseActiveName) => Awaitable<boolean>>(\n      Function\n    ),\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","mutable","UPDATE_MODEL_EVENT","CHANGE_EVENT"],"mappings":";;;;;;;;;;AASY,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,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAED,sBAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAACE,wBAAkB,GAAG,YAAY;AACpC,EAAE,CAACC,kBAAY,GAAG,YAAY;AAC9B;;;;;;"}

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

@@ -9,9 +9,10 @@ type UseRangePickerProps = {
     defaultTime?: Ref<DefaultValue>;
     leftDate: Ref<Dayjs>;
     rightDate: Ref<Dayjs>;
+    step?: number;
     unit: 'month' | 'year';
 };
-export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultValue, defaultTime, leftDate, rightDate, unit, onParsedValueChanged, }: UseRangePickerProps) => {
+export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultValue, defaultTime, leftDate, rightDate, step, unit, onParsedValueChanged, }: UseRangePickerProps) => {
     minDate: Ref<dayjs.Dayjs | undefined>;
     maxDate: Ref<dayjs.Dayjs | undefined>;
     rangeState: Ref<{

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

@@ -20,6 +20,7 @@ const useRangePicker = (props, {
   defaultTime,
   leftDate,
   rightDate,
+  step,
   unit,
   onParsedValueChanged
 }) => {
@@ -64,6 +65,7 @@ const useRangePicker = (props, {
   const restoreDefault = () => {
     let [start, end] = utils.getDefaultValue(vue.unref(defaultValue), {
       lang: vue.unref(lang),
+      step,
       unit,
       unlinkPanels: props.unlinkPanels
     });

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

@@ -1 +1 @@
-{"version":3,"file":"use-range-picker.js","sources":["../../../../../../../packages/components/date-picker/src/composables/use-range-picker.ts"],"sourcesContent":["import { getCurrentInstance, inject, ref, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { isArray } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getDefaultValue, isValidRange } from '../utils'\nimport { ROOT_PICKER_INJECTION_KEY } from '../constants'\nimport { useShortcut } from './use-shortcut'\n\nimport type { Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { PanelRangeSharedProps, RangeState } from '../props/shared'\nimport type { DefaultValue } from '../utils'\n\ntype UseRangePickerProps = {\n  onParsedValueChanged: (\n    minDate: Dayjs | undefined,\n    maxDate: Dayjs | undefined\n  ) => void\n  defaultValue: Ref<DefaultValue>\n  defaultTime?: Ref<DefaultValue>\n  leftDate: Ref<Dayjs>\n  rightDate: Ref<Dayjs>\n  unit: 'month' | 'year'\n}\n\nexport const useRangePicker = (\n  props: PanelRangeSharedProps,\n  {\n    defaultValue,\n    defaultTime,\n    leftDate,\n    rightDate,\n    unit,\n\n    onParsedValueChanged,\n  }: UseRangePickerProps\n) => {\n  const { emit } = getCurrentInstance()!\n\n  const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY)!\n  const drpNs = useNamespace('date-range-picker')\n  const { t, lang } = useLocale()\n  const handleShortcutClick = useShortcut(lang)\n  const minDate = ref<Dayjs>()\n  const maxDate = ref<Dayjs>()\n  const rangeState = ref<RangeState>({\n    endDate: null,\n    selecting: false,\n  })\n\n  const handleChangeRange = (val: RangeState) => {\n    rangeState.value = val\n  }\n\n  const handleRangeConfirm = (visible = false) => {\n    const _minDate = unref(minDate)\n    const _maxDate = unref(maxDate)\n\n    if (isValidRange([_minDate, _maxDate])) {\n      emit('pick', [_minDate, _maxDate], visible)\n    }\n  }\n\n  const onSelect = (selecting: boolean) => {\n    rangeState.value.selecting = selecting\n    if (!selecting) {\n      rangeState.value.endDate = null\n    }\n  }\n\n  const onReset = (parsedValue: PanelRangeSharedProps['parsedValue']) => {\n    if (isArray(parsedValue) && parsedValue.length === 2) {\n      const [start, end] = parsedValue\n      minDate.value = start\n      leftDate.value = start\n      maxDate.value = end\n      onParsedValueChanged(unref(minDate), unref(maxDate))\n    } else {\n      restoreDefault()\n    }\n  }\n\n  const restoreDefault = () => {\n    let [start, end] = getDefaultValue(unref(defaultValue), {\n      lang: unref(lang),\n      unit,\n      unlinkPanels: props.unlinkPanels,\n    })\n    const getShift = (day: Dayjs) => {\n      return day.diff(day.startOf('d'), 'ms')\n    }\n    const maybeTimes = unref(defaultTime)\n    if (maybeTimes) {\n      let leftShift = 0\n      let rightShift = 0\n      if (isArray(maybeTimes)) {\n        const [timeStart, timeEnd] = maybeTimes.map(dayjs)\n        leftShift = getShift(timeStart)\n        rightShift = getShift(timeEnd)\n      } else {\n        const shift = getShift(dayjs(maybeTimes))\n        leftShift = shift\n        rightShift = shift\n      }\n      start = start.startOf('d').add(leftShift, 'ms')\n      end = end.startOf('d').add(rightShift, 'ms')\n    }\n\n    minDate.value = undefined\n    maxDate.value = undefined\n    leftDate.value = start\n    rightDate.value = end\n  }\n\n  watch(\n    defaultValue,\n    (val) => {\n      if (val) {\n        restoreDefault()\n      }\n    },\n    { immediate: true }\n  )\n\n  watch(() => props.parsedValue, onReset, { immediate: true })\n\n  return {\n    minDate,\n    maxDate,\n    rangeState,\n    lang,\n    ppNs: pickerNs,\n    drpNs,\n\n    handleChangeRange,\n    handleRangeConfirm,\n    handleShortcutClick,\n    onSelect,\n    onReset,\n    t,\n  }\n}\n"],"names":["getCurrentInstance","inject","ROOT_PICKER_INJECTION_KEY","useNamespace","useLocale","useShortcut","ref","unref","isValidRange","isArray","getDefaultValue","dayjs","watch"],"mappings":"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"}
+{"version":3,"file":"use-range-picker.js","sources":["../../../../../../../packages/components/date-picker/src/composables/use-range-picker.ts"],"sourcesContent":["import { getCurrentInstance, inject, ref, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { isArray } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { getDefaultValue, isValidRange } from '../utils'\nimport { ROOT_PICKER_INJECTION_KEY } from '../constants'\nimport { useShortcut } from './use-shortcut'\n\nimport type { Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { PanelRangeSharedProps, RangeState } from '../props/shared'\nimport type { DefaultValue } from '../utils'\n\ntype UseRangePickerProps = {\n  onParsedValueChanged: (\n    minDate: Dayjs | undefined,\n    maxDate: Dayjs | undefined\n  ) => void\n  defaultValue: Ref<DefaultValue>\n  defaultTime?: Ref<DefaultValue>\n  leftDate: Ref<Dayjs>\n  rightDate: Ref<Dayjs>\n  step?: number\n  unit: 'month' | 'year'\n}\n\nexport const useRangePicker = (\n  props: PanelRangeSharedProps,\n  {\n    defaultValue,\n    defaultTime,\n    leftDate,\n    rightDate,\n    step,\n    unit,\n\n    onParsedValueChanged,\n  }: UseRangePickerProps\n) => {\n  const { emit } = getCurrentInstance()!\n\n  const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY)!\n  const drpNs = useNamespace('date-range-picker')\n  const { t, lang } = useLocale()\n  const handleShortcutClick = useShortcut(lang)\n  const minDate = ref<Dayjs>()\n  const maxDate = ref<Dayjs>()\n  const rangeState = ref<RangeState>({\n    endDate: null,\n    selecting: false,\n  })\n\n  const handleChangeRange = (val: RangeState) => {\n    rangeState.value = val\n  }\n\n  const handleRangeConfirm = (visible = false) => {\n    const _minDate = unref(minDate)\n    const _maxDate = unref(maxDate)\n\n    if (isValidRange([_minDate, _maxDate])) {\n      emit('pick', [_minDate, _maxDate], visible)\n    }\n  }\n\n  const onSelect = (selecting: boolean) => {\n    rangeState.value.selecting = selecting\n    if (!selecting) {\n      rangeState.value.endDate = null\n    }\n  }\n\n  const onReset = (parsedValue: PanelRangeSharedProps['parsedValue']) => {\n    if (isArray(parsedValue) && parsedValue.length === 2) {\n      const [start, end] = parsedValue\n      minDate.value = start\n      leftDate.value = start\n      maxDate.value = end\n      onParsedValueChanged(unref(minDate), unref(maxDate))\n    } else {\n      restoreDefault()\n    }\n  }\n\n  const restoreDefault = () => {\n    let [start, end] = getDefaultValue(unref(defaultValue), {\n      lang: unref(lang),\n      step,\n      unit,\n      unlinkPanels: props.unlinkPanels,\n    })\n    const getShift = (day: Dayjs) => {\n      return day.diff(day.startOf('d'), 'ms')\n    }\n    const maybeTimes = unref(defaultTime)\n    if (maybeTimes) {\n      let leftShift = 0\n      let rightShift = 0\n      if (isArray(maybeTimes)) {\n        const [timeStart, timeEnd] = maybeTimes.map(dayjs)\n        leftShift = getShift(timeStart)\n        rightShift = getShift(timeEnd)\n      } else {\n        const shift = getShift(dayjs(maybeTimes))\n        leftShift = shift\n        rightShift = shift\n      }\n      start = start.startOf('d').add(leftShift, 'ms')\n      end = end.startOf('d').add(rightShift, 'ms')\n    }\n\n    minDate.value = undefined\n    maxDate.value = undefined\n    leftDate.value = start\n    rightDate.value = end\n  }\n\n  watch(\n    defaultValue,\n    (val) => {\n      if (val) {\n        restoreDefault()\n      }\n    },\n    { immediate: true }\n  )\n\n  watch(() => props.parsedValue, onReset, { immediate: true })\n\n  return {\n    minDate,\n    maxDate,\n    rangeState,\n    lang,\n    ppNs: pickerNs,\n    drpNs,\n\n    handleChangeRange,\n    handleRangeConfirm,\n    handleShortcutClick,\n    onSelect,\n    onReset,\n    t,\n  }\n}\n"],"names":["getCurrentInstance","inject","ROOT_PICKER_INJECTION_KEY","useNamespace","useLocale","useShortcut","ref","unref","isValidRange","isArray","getDefaultValue","dayjs","watch"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/panel-date-range.vue.d.ts

@@ -13,8 +13,8 @@ declare function __VLS_template(): {
     "next-month"?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{
-    readonly visible: BooleanConstructor;
     readonly unlinkPanels: BooleanConstructor;
+    readonly visible: BooleanConstructor;
     readonly parsedValue: {
         readonly type: import("vue").PropType<dayjs.Dayjs[]>;
         readonly required: false;
@@ -36,8 +36,8 @@ declare const __VLS_component: import("vue").DefineComponent<{
     pick: (...args: any[]) => void;
     "set-picker-option": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly visible: BooleanConstructor;
     readonly unlinkPanels: BooleanConstructor;
+    readonly visible: BooleanConstructor;
     readonly parsedValue: {
         readonly type: import("vue").PropType<dayjs.Dayjs[]>;
         readonly required: false;

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

@@ -48,7 +48,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       handleChangeRange,
       handleRangeConfirm,
       handleShortcutClick,
-      onSelect
+      onSelect,
+      onReset
     } = useRangePicker.useRangePicker(props, {
       defaultValue,
       leftDate,
@@ -111,6 +112,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rightDate.value = leftDate.value.add(1, unit);
       }
     }
+    vue.watch(() => props.visible, (visible) => {
+      if (!visible && rangeState.value.selecting) {
+        onReset(props.parsedValue);
+        onSelect(false);
+      }
+    });
     emit("set-picker-option", ["isValidValue", utils.isValidRange]);
     emit("set-picker-option", ["formatToString", formatToString]);
     emit("set-picker-option", ["parseUserInput", parseUserInput]);

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

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\n      },\n    ]\"\n  >\n    <div :class=\"ppNs.e('body-wrapper')\">\n      <slot name=\"sidebar\" :class=\"ppNs.e('sidebar')\" />\n      <div v-if=\"hasShortcuts\" :class=\"ppNs.e('sidebar')\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          :class=\"ppNs.e('shortcut')\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-left\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                { [ppNs.is('disabled')]: !enableYearArrow },\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-right\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { isArray } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY\n) as any\nconst { shortcuts, disabledDate } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  onParsedValueChanged,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', null)\n}\n\nconst formatToString = (value: Dayjs | Dayjs[]) => {\n  return isArray(value)\n    ? value.map((_) => _.format(format.value))\n    : value.format(format.value)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction onParsedValueChanged(\n  minDate: Dayjs | undefined,\n  maxDate: Dayjs | undefined\n) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['formatToString', formatToString])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"names":["useLocale","inject","PICKER_BASE_INJECTION_KEY","ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY","toRef","ref","dayjs","useRangePicker","computed","useMonthRangeHeader","unref","isArray","correctlyParseUserInput","minDate","maxDate","isValidRange","_openBlock","_createElementBlock","_normalizeClass","_unref"],"mappings":"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"}
+{"version":3,"file":"panel-month-range.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\n      },\n    ]\"\n  >\n    <div :class=\"ppNs.e('body-wrapper')\">\n      <slot name=\"sidebar\" :class=\"ppNs.e('sidebar')\" />\n      <div v-if=\"hasShortcuts\" :class=\"ppNs.e('sidebar')\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          :class=\"ppNs.e('shortcut')\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-left\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                { [ppNs.is('disabled')]: !enableYearArrow },\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-right\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { isArray } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY\n) as any\nconst { shortcuts, disabledDate } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  onReset,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  onParsedValueChanged,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', null)\n}\n\nconst formatToString = (value: Dayjs | Dayjs[]) => {\n  return isArray(value)\n    ? value.map((_) => _.format(format.value))\n    : value.format(format.value)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction onParsedValueChanged(\n  minDate: Dayjs | undefined,\n  maxDate: Dayjs | undefined\n) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      onReset(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['formatToString', formatToString])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"names":["useLocale","inject","PICKER_BASE_INJECTION_KEY","ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY","toRef","ref","dayjs","useRangePicker","computed","useMonthRangeHeader","unref","isArray","correctlyParseUserInput","minDate","maxDate","watch","isValidRange","_openBlock","_createElementBlock","_normalizeClass","_unref"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/panel-month-range.vue.d.ts

@@ -10,6 +10,7 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import("vue").DefineComponent<{
     readonly unlinkPanels: BooleanConstructor;
+    readonly visible: BooleanConstructor;
     readonly parsedValue: {
         readonly type: import("vue").PropType<dayjs.Dayjs[]>;
         readonly required: false;
@@ -20,6 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     [x: string]: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly unlinkPanels: BooleanConstructor;
+    readonly visible: BooleanConstructor;
     readonly parsedValue: {
         readonly type: import("vue").PropType<dayjs.Dayjs[]>;
         readonly required: false;
@@ -27,6 +29,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
         __epPropKey: true;
     };
 }>>, {
+    readonly visible: boolean;
     readonly unlinkPanels: boolean;
 }>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -5,16 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var dayjs = require('dayjs');
 var iconsVue = require('@element-plus/icons-vue');
-var index$2 = require('../../../icon/index.js');
+var index$1 = require('../../../icon/index.js');
 var panelYearRange = require('../props/panel-year-range.js');
-var useShortcut = require('../composables/use-shortcut.js');
 var useYearRangeHeader = require('../composables/use-year-range-header.js');
+var useRangePicker = require('../composables/use-range-picker.js');
 var utils = require('../utils.js');
 var constants = require('../constants.js');
 var basicYearTable = require('./basic-year-table.js');
 var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
 var index = require('../../../../hooks/use-locale/index.js');
-var index$1 = require('../../../../hooks/use-namespace/index.js');
 var constants$1 = require('../../../time-picker/src/constants.js');
 var shared = require('@vue/shared');
 
@@ -22,6 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 
+const step = 10;
 const unit = "year";
 const __default__ = vue.defineComponent({
   name: "DatePickerYearRange"
@@ -34,10 +34,45 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const { lang } = index.useLocale();
     const leftDate = vue.ref(dayjs__default["default"]().locale(lang.value));
-    const rightDate = vue.ref(leftDate.value.add(10, "year"));
-    const { pickerNs: ppNs } = vue.inject(constants.ROOT_PICKER_INJECTION_KEY);
-    const drpNs = index$1.useNamespace("date-range-picker");
+    const rightDate = vue.ref(dayjs__default["default"]().locale(lang.value).add(step, unit));
     const isDefaultFormat = vue.inject(constants.ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY);
+    const pickerBase = vue.inject(constants$1.PICKER_BASE_INJECTION_KEY);
+    const { shortcuts, disabledDate } = pickerBase.props;
+    const format = vue.toRef(pickerBase.props, "format");
+    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+    const {
+      minDate,
+      maxDate,
+      rangeState,
+      ppNs,
+      drpNs,
+      handleChangeRange,
+      handleRangeConfirm,
+      handleShortcutClick,
+      onSelect,
+      onReset
+    } = useRangePicker.useRangePicker(props, {
+      defaultValue,
+      leftDate,
+      rightDate,
+      step,
+      unit,
+      onParsedValueChanged
+    });
+    const {
+      leftPrevYear,
+      rightNextYear,
+      leftNextYear,
+      rightPrevYear,
+      leftLabel,
+      rightLabel,
+      leftYear,
+      rightYear
+    } = useYearRangeHeader.useYearRangeHeader({
+      unlinkPanels: vue.toRef(props, "unlinkPanels"),
+      leftDate,
+      rightDate
+    });
     const hasShortcuts = vue.computed(() => !!shortcuts.length);
     const panelKls = vue.computed(() => [
       ppNs.b(),
@@ -68,33 +103,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         arrowRightBtn: [ppNs.e("icon-btn"), "d-arrow-right"]
       };
     });
-    const handleShortcutClick = useShortcut.useShortcut(lang);
-    const {
-      leftPrevYear,
-      rightNextYear,
-      leftNextYear,
-      rightPrevYear,
-      leftLabel,
-      rightLabel,
-      leftYear,
-      rightYear
-    } = useYearRangeHeader.useYearRangeHeader({
-      unlinkPanels: vue.toRef(props, "unlinkPanels"),
-      leftDate,
-      rightDate
-    });
     const enableYearArrow = vue.computed(() => {
       return props.unlinkPanels && rightYear.value > leftYear.value + 1;
     });
-    const minDate = vue.ref();
-    const maxDate = vue.ref();
-    const rangeState = vue.ref({
-      endDate: null,
-      selecting: false
-    });
-    const handleChangeRange = (val) => {
-      rangeState.value = val;
-    };
     const handleRangePick = (val, close = true) => {
       const minDate_ = val.minDate;
       const maxDate_ = val.maxDate;
@@ -106,67 +117,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       minDate.value = minDate_;
       if (!close)
         return;
-      handleConfirm();
-    };
-    const handleConfirm = (visible = false) => {
-      if (utils.isValidRange([minDate.value, maxDate.value])) {
-        emit("pick", [minDate.value, maxDate.value], visible);
-      }
+      handleRangeConfirm();
     };
-    const onSelect = (selecting) => {
-      rangeState.value.selecting = selecting;
-      if (!selecting) {
-        rangeState.value.endDate = null;
-      }
-    };
-    const pickerBase = vue.inject(constants$1.PICKER_BASE_INJECTION_KEY);
-    const { shortcuts, disabledDate } = pickerBase.props;
-    const format = vue.toRef(pickerBase.props, "format");
-    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
-    const getDefaultValue = () => {
-      let start;
-      if (shared.isArray(defaultValue.value)) {
-        const left = dayjs__default["default"](defaultValue.value[0]);
-        let right = dayjs__default["default"](defaultValue.value[1]);
-        if (!props.unlinkPanels) {
-          right = left.add(10, unit);
-        }
-        return [left, right];
-      } else if (defaultValue.value) {
-        start = dayjs__default["default"](defaultValue.value);
-      } else {
-        start = dayjs__default["default"]();
-      }
-      start = start.locale(lang.value);
-      return [start, start.add(10, unit)];
-    };
-    vue.watch(() => defaultValue.value, (val) => {
-      if (val) {
-        const defaultArr = getDefaultValue();
-        leftDate.value = defaultArr[0];
-        rightDate.value = defaultArr[1];
-      }
-    }, { immediate: true });
-    vue.watch(() => props.parsedValue, (newVal) => {
-      if (newVal && newVal.length === 2) {
-        minDate.value = newVal[0];
-        maxDate.value = newVal[1];
-        leftDate.value = minDate.value;
-        if (props.unlinkPanels && maxDate.value) {
-          const minDateYear = minDate.value.year();
-          const maxDateYear = maxDate.value.year();
-          rightDate.value = minDateYear === maxDateYear ? maxDate.value.add(10, "year") : maxDate.value;
-        } else {
-          rightDate.value = leftDate.value.add(10, "year");
-        }
-      } else {
-        const defaultArr = getDefaultValue();
-        minDate.value = void 0;
-        maxDate.value = void 0;
-        leftDate.value = defaultArr[0];
-        rightDate.value = defaultArr[1];
-      }
-    }, { immediate: true });
     const parseUserInput = (value) => {
       return utils.correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
     };
@@ -177,13 +129,31 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return utils.isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
     };
     const handleClear = () => {
-      const defaultArr = getDefaultValue();
+      const defaultArr = utils.getDefaultValue(vue.unref(defaultValue), {
+        lang: vue.unref(lang),
+        step,
+        unit,
+        unlinkPanels: props.unlinkPanels
+      });
       leftDate.value = defaultArr[0];
       rightDate.value = defaultArr[1];
-      maxDate.value = void 0;
-      minDate.value = void 0;
       emit("pick", null);
     };
+    function onParsedValueChanged(minDate2, maxDate2) {
+      if (props.unlinkPanels && maxDate2) {
+        const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
+        const maxDateYear = maxDate2.year();
+        rightDate.value = minDateYear + step > maxDateYear ? maxDate2.add(step, unit) : maxDate2;
+      } else {
+        rightDate.value = leftDate.value.add(step, unit);
+      }
+    }
+    vue.watch(() => props.visible, (visible) => {
+      if (!visible && rangeState.value.selecting) {
+        onReset(props.parsedValue);
+        onSelect(false);
+      }
+    });
     emit("set-picker-option", ["isValidValue", isValidValue]);
     emit("set-picker-option", ["parseUserInput", parseUserInput]);
     emit("set-picker-option", ["formatToString", formatToString]);
@@ -226,7 +196,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: vue.unref(leftPrevYear)
                 }, [
                   vue.renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    vue.createVNode(vue.unref(index$1.ElIcon), null, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(iconsVue.DArrowLeft))
                       ]),
@@ -242,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: vue.unref(leftNextYear)
                 }, [
                   vue.renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    vue.createVNode(vue.unref(index$1.ElIcon), null, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(iconsVue.DArrowRight))
                       ]),
@@ -255,14 +225,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(basicYearTable["default"], {
                 "selection-mode": "range",
                 date: leftDate.value,
-                "min-date": minDate.value,
-                "max-date": maxDate.value,
-                "range-state": rangeState.value,
+                "min-date": vue.unref(minDate),
+                "max-date": vue.unref(maxDate),
+                "range-state": vue.unref(rangeState),
                 "disabled-date": vue.unref(disabledDate),
-                onChangerange: handleChangeRange,
+                onChangerange: vue.unref(handleChangeRange),
                 onPick: handleRangePick,
-                onSelect
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                onSelect: vue.unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
             ], 2),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(vue.unref(rightPanelKls).content)
@@ -278,7 +248,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: vue.unref(rightPrevYear)
                 }, [
                   vue.renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    vue.createVNode(vue.unref(index$1.ElIcon), null, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(iconsVue.DArrowLeft))
                       ]),
@@ -292,7 +262,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: vue.unref(rightNextYear)
                 }, [
                   vue.renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    vue.createVNode(vue.unref(index$1.ElIcon), null, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(iconsVue.DArrowRight))
                       ]),
@@ -305,14 +275,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(basicYearTable["default"], {
                 "selection-mode": "range",
                 date: rightDate.value,
-                "min-date": minDate.value,
-                "max-date": maxDate.value,
-                "range-state": rangeState.value,
+                "min-date": vue.unref(minDate),
+                "max-date": vue.unref(maxDate),
+                "range-state": vue.unref(rangeState),
                 "disabled-date": vue.unref(disabledDate),
-                onChangerange: handleChangeRange,
+                onChangerange: vue.unref(handleChangeRange),
                 onPick: handleRangePick,
-                onSelect
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                onSelect: vue.unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
             ], 2)
           ], 2)
         ], 2)