@element-plus/nightly 0.0.20250609 → 0.0.20250611

package/es/components/countdown/src/countdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\n\nexport const countdownProps = buildProps({\n  /**\n   * @description Formatting the countdown display\n   */\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  /**\n   * @description Sets the prefix of a countdown\n   */\n  prefix: String,\n  /**\n   * @description Sets the suffix of a countdown\n   */\n  suffix: String,\n  /**\n   * @description countdown titles\n   */\n  title: String,\n  /**\n   * @description target time\n   */\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n    default: 0,\n  },\n  /**\n   * @description Styles countdown values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n} as const)\nexport type CountdownProps = ExtractPropTypes<typeof countdownProps>\n\nexport const countdownEmits = {\n  finish: () => true,\n  [CHANGE_EVENT]: (value: number) => isNumber(value),\n}\nexport type CountdownEmits = typeof countdownEmits\n\nexport type CountdownInstance = InstanceType<typeof Countdown> & unknown\n"],"names":[],"mappings":";;;;AAEY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AAC5C;;;;"}
+{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.vue"],"sourcesContent":["<template>\n  <el-statistic\n    :value=\"rawValue\"\n    :title=\"title\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n    :formatter=\"formatter\"\n  >\n    <template v-for=\"(_, name) in $slots\" #[name]>\n      <slot :name=\"name\" />\n    </template>\n  </el-statistic>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { ElStatistic } from '@element-plus/components/statistic'\nimport { cAF, rAF } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { countdownEmits, countdownProps } from './countdown'\nimport { formatTime, getTime } from './utils'\n\ndefineOptions({\n  name: 'ElCountdown',\n})\n\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\n\nlet timer: ReturnType<typeof rAF> | undefined\nconst rawValue = ref<number>(0)\nconst displayValue = computed(() => formatTime(rawValue.value, props.format))\n\nconst formatter = (val: number) => formatTime(val, props.format)\n\nconst stopTimer = () => {\n  if (timer) {\n    cAF(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const timestamp = getTime(props.value)\n  const frameFunc = () => {\n    let diff = timestamp - Date.now()\n    emit(CHANGE_EVENT, diff)\n    if (diff <= 0) {\n      diff = 0\n      stopTimer()\n      emit('finish')\n    } else {\n      timer = rAF(frameFunc)\n    }\n    rawValue.value = diff\n  }\n  timer = rAF(frameFunc)\n}\n\nonMounted(() => {\n  rawValue.value = getTime(props.value) - Date.now()\n\n  watch(\n    () => [props.value, props.format],\n    () => {\n      stopTimer()\n      startTimer()\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nonBeforeUnmount(() => {\n  stopTimer()\n})\n\ndefineExpose({\n  /**\n   * @description current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;;mCAuBc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAI,IAAA,KAAA,CAAA;AACJ,IAAM,MAAA,QAAA,GAAW,IAAY,CAAC,CAAA,CAAA;AAC9B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM,UAAA,CAAW,SAAS,KAAO,EAAA,KAAA,CAAM,MAAM,CAAC,CAAA,CAAA;AAE5E,IAAA,MAAM,YAAY,CAAC,GAAA,KAAgB,UAAW,CAAA,GAAA,EAAK,MAAM,MAAM,CAAA,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AACT,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACrC,MAAA,MAAM,YAAY,MAAM;AACtB,QAAI,IAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAChC,QAAA,IAAA,CAAK,cAAc,IAAI,CAAA,CAAA;AACvB,QAAA,IAAI,QAAQ,CAAG,EAAA;AACb,UAAO,IAAA,GAAA,CAAA,CAAA;AACP,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACR,MAAA;AACL,UAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,SACvB;AACA,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAA;AAAA,OACnB,CAAA;AACA,MAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,QAAQ,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,KAAK,GAAI,EAAA,CAAA;AAEjD,MAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,QACE,SAAa,EAAA,CAAA;AAAmB,QAChC,UAAM,EAAA,CAAA;AACJ,OAAU,EAAA;AACV,QAAW,SAAA,EAAA,IAAA;AAAA,OACb,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAAA,IAAA,eACa,CAAA,MAAA;AAAA,MACb,SAAA,EAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,IACF,MAAC,CAAA;AAED,MAAA,YAAA;AACE,KAAU,CAAA,CAAA;AAAA,IACZ,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;AAED,MAAa,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,QAAA,KAAA,EAAA,QAAA,CAAA,KAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QAIX,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QACD,aAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/countdown/src/countdown2.mjs

@@ -1,85 +1,27 @@
-import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, openBlock, createBlock, unref, createSlots, renderList, withCtx, renderSlot } from 'vue';
-import { ElStatistic } from '../../statistic/index.mjs';
-import { countdownProps, countdownEmits } from './countdown.mjs';
-import { formatTime, getTime } from './utils.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { rAF, cAF } from '../../../utils/raf.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 import { CHANGE_EVENT } from '../../../constants/event.mjs';
+import { isNumber } from '../../../utils/types.mjs';
 
-const __default__ = defineComponent({
-  name: "ElCountdown"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: countdownProps,
-  emits: countdownEmits,
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    let timer;
-    const rawValue = ref(0);
-    const displayValue = computed(() => formatTime(rawValue.value, props.format));
-    const formatter = (val) => formatTime(val, props.format);
-    const stopTimer = () => {
-      if (timer) {
-        cAF(timer);
-        timer = void 0;
-      }
-    };
-    const startTimer = () => {
-      const timestamp = getTime(props.value);
-      const frameFunc = () => {
-        let diff = timestamp - Date.now();
-        emit(CHANGE_EVENT, diff);
-        if (diff <= 0) {
-          diff = 0;
-          stopTimer();
-          emit("finish");
-        } else {
-          timer = rAF(frameFunc);
-        }
-        rawValue.value = diff;
-      };
-      timer = rAF(frameFunc);
-    };
-    onMounted(() => {
-      rawValue.value = getTime(props.value) - Date.now();
-      watch(() => [props.value, props.format], () => {
-        stopTimer();
-        startTimer();
-      }, {
-        immediate: true
-      });
-    });
-    onBeforeUnmount(() => {
-      stopTimer();
-    });
-    expose({
-      displayValue
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElStatistic), {
-        value: rawValue.value,
-        title: _ctx.title,
-        prefix: _ctx.prefix,
-        suffix: _ctx.suffix,
-        "value-style": _ctx.valueStyle,
-        formatter
-      }, createSlots({
-        _: 2
-      }, [
-        renderList(_ctx.$slots, (_, name) => {
-          return {
-            name,
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, name)
-            ])
-          };
-        })
-      ]), 1032, ["value", "title", "prefix", "suffix", "value-style"]);
-    };
+const countdownProps = buildProps({
+  format: {
+    type: String,
+    default: "HH:mm:ss"
+  },
+  prefix: String,
+  suffix: String,
+  title: String,
+  value: {
+    type: definePropType([Number, Object]),
+    default: 0
+  },
+  valueStyle: {
+    type: definePropType([String, Object, Array])
   }
 });
-var Countdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "countdown.vue"]]);
+const countdownEmits = {
+  finish: () => true,
+  [CHANGE_EVENT]: (value) => isNumber(value)
+};
 
-export { Countdown as default };
+export { countdownEmits, countdownProps };
 //# sourceMappingURL=countdown2.mjs.map

package/es/components/countdown/src/countdown2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.vue"],"sourcesContent":["<template>\n  <el-statistic\n    :value=\"rawValue\"\n    :title=\"title\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n    :formatter=\"formatter\"\n  >\n    <template v-for=\"(_, name) in $slots\" #[name]>\n      <slot :name=\"name\" />\n    </template>\n  </el-statistic>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { ElStatistic } from '@element-plus/components/statistic'\nimport { cAF, rAF } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { countdownEmits, countdownProps } from './countdown'\nimport { formatTime, getTime } from './utils'\n\ndefineOptions({\n  name: 'ElCountdown',\n})\n\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\n\nlet timer: ReturnType<typeof rAF> | undefined\nconst rawValue = ref<number>(0)\nconst displayValue = computed(() => formatTime(rawValue.value, props.format))\n\nconst formatter = (val: number) => formatTime(val, props.format)\n\nconst stopTimer = () => {\n  if (timer) {\n    cAF(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const timestamp = getTime(props.value)\n  const frameFunc = () => {\n    let diff = timestamp - Date.now()\n    emit(CHANGE_EVENT, diff)\n    if (diff <= 0) {\n      diff = 0\n      stopTimer()\n      emit('finish')\n    } else {\n      timer = rAF(frameFunc)\n    }\n    rawValue.value = diff\n  }\n  timer = rAF(frameFunc)\n}\n\nonMounted(() => {\n  rawValue.value = getTime(props.value) - Date.now()\n\n  watch(\n    () => [props.value, props.format],\n    () => {\n      stopTimer()\n      startTimer()\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nonBeforeUnmount(() => {\n  stopTimer()\n})\n\ndefineExpose({\n  /**\n   * @description current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;;mCAuBc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAI,IAAA,KAAA,CAAA;AACJ,IAAM,MAAA,QAAA,GAAW,IAAY,CAAC,CAAA,CAAA;AAC9B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM,UAAA,CAAW,SAAS,KAAO,EAAA,KAAA,CAAM,MAAM,CAAC,CAAA,CAAA;AAE5E,IAAA,MAAM,YAAY,CAAC,GAAA,KAAgB,UAAW,CAAA,GAAA,EAAK,MAAM,MAAM,CAAA,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AACT,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACrC,MAAA,MAAM,YAAY,MAAM;AACtB,QAAI,IAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAChC,QAAA,IAAA,CAAK,cAAc,IAAI,CAAA,CAAA;AACvB,QAAA,IAAI,QAAQ,CAAG,EAAA;AACb,UAAO,IAAA,GAAA,CAAA,CAAA;AACP,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACR,MAAA;AACL,UAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,SACvB;AACA,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAA;AAAA,OACnB,CAAA;AACA,MAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,QAAQ,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,KAAK,GAAI,EAAA,CAAA;AAEjD,MAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,QACE,SAAa,EAAA,CAAA;AAAmB,QAChC,UAAM,EAAA,CAAA;AACJ,OAAU,EAAA;AACV,QAAW,SAAA,EAAA,IAAA;AAAA,OACb,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAAA,IAAA,eACa,CAAA,MAAA;AAAA,MACb,SAAA,EAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,IACF,MAAC,CAAA;AAED,MAAA,YAAA;AACE,KAAU,CAAA,CAAA;AAAA,IACZ,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;AAED,MAAa,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,QAAA,KAAA,EAAA,QAAA,CAAA,KAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QAIX,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QACD,aAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\n\nexport const countdownProps = buildProps({\n  /**\n   * @description Formatting the countdown display\n   */\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  /**\n   * @description Sets the prefix of a countdown\n   */\n  prefix: String,\n  /**\n   * @description Sets the suffix of a countdown\n   */\n  suffix: String,\n  /**\n   * @description countdown titles\n   */\n  title: String,\n  /**\n   * @description target time\n   */\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n    default: 0,\n  },\n  /**\n   * @description Styles countdown values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n} as const)\nexport type CountdownProps = ExtractPropTypes<typeof countdownProps>\n\nexport const countdownEmits = {\n  finish: () => true,\n  [CHANGE_EVENT]: (value: number) => isNumber(value),\n}\nexport type CountdownEmits = typeof countdownEmits\n\nexport type CountdownInstance = InstanceType<typeof Countdown> & unknown\n"],"names":[],"mappings":";;;;AAEY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AAC5C;;;;"}

package/es/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/es/components/date-picker/src/composables/use-range-picker.mjs

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

package/es/components/date-picker/src/composables/use-range-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-range-picker.mjs","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":[],"mappings":"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"}
+{"version":3,"file":"use-range-picker.mjs","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":[],"mappings":"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"}

package/es/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/es/components/date-picker/src/date-picker-com/panel-month-range.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, inject, toRef, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
+import { defineComponent, inject, toRef, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
 import dayjs from 'dayjs';
 import { ElIcon } from '../../../icon/index.mjs';
 import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
@@ -40,7 +40,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleChangeRange,
       handleRangeConfirm,
       handleShortcutClick,
-      onSelect
+      onSelect,
+      onReset
     } = useRangePicker(props, {
       defaultValue,
       leftDate,
@@ -103,6 +104,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rightDate.value = leftDate.value.add(1, unit);
       }
     }
+    watch(() => props.visible, (visible) => {
+      if (!visible && rangeState.value.selecting) {
+        onReset(props.parsedValue);
+        onSelect(false);
+      }
+    });
     emit("set-picker-option", ["isValidValue", isValidRange]);
     emit("set-picker-option", ["formatToString", formatToString]);
     emit("set-picker-option", ["parseUserInput", parseUserInput]);

package/es/components/date-picker/src/date-picker-com/panel-month-range.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.mjs","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":["minDate","maxDate","_openBlock","_createElementBlock","_normalizeClass","_unref"],"mappings":";;;;;;;;;;;;;;;;mCAoIc,CAAA;AAAA,EACZ,IAAM,EAAA,sBAAA;AACR;;;;;;;AAMA,IAAM,MAAA,EAAE,IAAK,EAAA,GAAI,SAAU,EAAA,CAAA;AAC3B,IAAM,MAAA,UAAA,GAAa,OAAO,yBAAyB,CAAA,CAAA;AACnD,IAAA,MAAM,eAAkB,GAAA,MAAA,CAAA,2CAAA,CAAA,CAAA;AAAA,IACtB,MAAA,EAAA,SAAA,EAAA,YAAA,EAAA,GAAA,UAAA,CAAA,KAAA,CAAA;AAAA,IACF,MAAA,MAAA,GAAA,KAAA,CAAA,UAAA,CAAA,KAAA,EAAA,QAAA,CAAA,CAAA;AACA,IAAA,MAAM,YAAE,GAAwB,KAAA,CAAA,UAAe,CAAA,KAAA,EAAA,cAAA,CAAA,CAAA;AAC/C,IAAA,MAAM,QAAS,GAAA,GAAA,CAAM,KAAW,EAAA,CAAA,MAAA,CAAA,IAAe,CAAA,KAAA,CAAA,CAAA,CAAA;AAC/C,IAAA,MAAM,SAAe,GAAA,GAAA,CAAA,KAAM,EAAW,CAAA,MAAA,CAAA,IAAA,CAAA,KAAqB,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAC3D,IAAA,MAAM;AACN,MAAM,OAAA;AAEN,MAAM,OAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA;AAAA,MAEA,mBAAA;AAAA,MACA,QAAA;AAAA,KACA,GAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MACA,YAAA;AAAA,MACF;AAA0B,MACxB,SAAA;AAAA,MACA,IAAA;AAAA,MACA,oBAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACA,MAAA,YAAA,GAAA,QAAA,CAAA,MAAA,CAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,IACF,MAAC;AAED,MAAA;AAEA,MAAM,aAAA;AAAA,MACJ,YAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,KACA,GAAA,mBAAA,CAAA;AAAA,MACA,YAAA,EAAA,KAAA,CAAA,KAAA,EAAA,cAAA,CAAA;AAAA,cACsB;AAAA,MACtB,SAAA;AAAyC,KACzC,CAAA,CAAA;AAAA,IACA,MAAA,eAAA,GAAA,QAAA,CAAA,MAAA;AAAA,MACD,OAAA,KAAA,CAAA,YAAA,IAAA,SAAA,CAAA,KAAA,GAAA,QAAA,CAAA,KAAA,GAAA,CAAA,CAAA;AAED,KAAM,CAAA,CAAA;AACJ,IAAA,MAAA,eAAa,GAAA,CAAA,GAAA,EAAA,KAA0B,GAAA,IAAA,KAAA;AAAyB,MACjE,MAAA,QAAA,GAAA,GAAA,CAAA,OAAA,CAAA;AAOD,MAAA,MAAwB,QAAA,GAAA,GAAA,CAAA,OAAsB,CAAA;AAK5C,MAAA,IAAA,aAAiB,KAAI,QAAA,IAAA,OAAA,CAAA,KAAA,KAAA,QAAA,EAAA;AACrB,QAAA;AACA,OAAA;AACE,MAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,QAAA,CAAA,MAAA,EAAA,EAAA,QAAA,IAAA,QAAA,CAAA,MAAA,EAAA,CAAA,CAAA,CAAA;AAAA,MACF,OAAA,CAAA,KAAA,GAAA,QAAA,CAAA;AACA,MAAK,OAAA,CAAA,KAAA,GAAA,QAAmB,CAAC;AACzB,MAAA,IAAA,CAAA,KAAgB;AAChB,QAAA,OAAgB;AAEhB,MAAA,kBAAY,EAAA,CAAA;AACZ,KAAmB,CAAA;AAAA,IACrB,MAAA,WAAA,GAAA,MAAA;AAEA,MAAA,gCAA0B,CAAA,KAAA,CAAA,YAAA,CAAA,EAAA;AACxB,QAAA,IAAA,EAAA,KAAiB,CAAA,IAAA,CAAA;AAAqC,QACpD,IAAA,EAAM,MAAM;AAAI,QAChB,YAAM,EAAA,KAAA,CAAA,YAAA;AAAA,OAAA,CACN;AAAoB,MACtB,SAAI,CAAA,KAAA,GAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,EAAA,MAAA,CAAA,CAAA;AACJ,MAAA,IAAA,CAAA,MAAkB,EAAA,IAAA,CAAA,CAAA;AAClB,KAAA,CAAA;AAAiB,IACnB,MAAA,cAAA,GAAA,CAAA,KAAA,KAAA;AAEA,MAAM,OAAA,OAAA,CAAA,KAAA,CAAiB,GAA4B,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAA,CAAA,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACjD,KAAA,CAAA;AAE6B,IAC/B,MAAA,cAAA,GAAA,CAAA,KAAA,KAAA;AAEA,MAAM,OAAA,uBAA6C,CAAA,KAAA,EAAA,MAAA,CAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,eAAA,CAAA,CAAA;AACjD,KAAO,CAAA;AAAA,IACL,SAAA,oBAAA,CAAA,QAAA,EAAA,QAAA,EAAA;AAAA,MAAA,IACO,KAAA,CAAA,YAAA,IAAA,QAAA,EAAA;AAAA,QACP,MAAK,WAAA,GAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;AAAA,QACL,MAAA,WAAA,GAAA,QAAA,CAAA,IAAA,EAAA,CAAA;AAAA,QACF,SAAA,CAAA,KAAA,GAAA,WAAA,KAAA,WAAA,GAAA,QAAA,CAAA,GAAA,CAAA,CAAA,EAAA,IAAA,CAAA,GAAA,QAAA,CAAA;AAAA,OACF,MAAA;AAEA,QAAS,SAAA,CAAA,KAAA,GAAA,QACPA,UACAC,CACA,CAAA,EAAA,IAAA,CAAA,CAAA;AACA,OAAI;AACF,KAAM;AACN,IAAM,IAAA,CAAA,mBAAcA,iBAAa,EAAA,YAAA,CAAA,CAAA,CAAA;AACjC,IAAA,IAAA,CAAA,mBACkB,EAAA,CAAA,gBAAA,EAAA,gBAAsB,CAAI;AAAW,IAAA,IAClD,CAAA,mBAAA,EAAA,CAAA,gBAAA,EAAA,cAAA,CAAA,CAAA,CAAA;AACL,IAAA,IAAA,CAAA,mBAAkB,EAAA,CAAA,aAAe,aAAW,CAAA,CAAA,CAAA;AAAA,IAC9C,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACF,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAEA,QAAA,KAA0B,EAAAC,cAAA,CAAC;AAC3B,UAA0BC,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAA;AAC1B,UAA0BA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA,EAAA;AAC1B,UAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"panel-month-range.mjs","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":["minDate","maxDate","_openBlock","_createElementBlock","_normalizeClass","_unref"],"mappings":"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"}

package/es/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/es/components/date-picker/src/date-picker-com/panel-year-range.mjs

@@ -1,19 +1,19 @@
-import { defineComponent, ref, inject, computed, useSlots, toRef, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
+import { defineComponent, ref, inject, toRef, computed, useSlots, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
 import dayjs from 'dayjs';
 import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
 import { ElIcon } from '../../../icon/index.mjs';
 import { panelYearRangeProps, panelYearRangeEmits } from '../props/panel-year-range.mjs';
-import { useShortcut } from '../composables/use-shortcut.mjs';
 import { useYearRangeHeader } from '../composables/use-year-range-header.mjs';
-import { isValidRange, correctlyParseUserInput } from '../utils.mjs';
-import { ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants.mjs';
+import { useRangePicker } from '../composables/use-range-picker.mjs';
+import { correctlyParseUserInput, isValidRange, getDefaultValue } from '../utils.mjs';
+import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants.mjs';
 import YearTable from './basic-year-table.mjs';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
-import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
 import { PICKER_BASE_INJECTION_KEY } from '../../../time-picker/src/constants.mjs';
 import { isArray } from '@vue/shared';
 
+const step = 10;
 const unit = "year";
 const __default__ = defineComponent({
   name: "DatePickerYearRange"
@@ -26,10 +26,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { lang } = useLocale();
     const leftDate = ref(dayjs().locale(lang.value));
-    const rightDate = ref(leftDate.value.add(10, "year"));
-    const { pickerNs: ppNs } = inject(ROOT_PICKER_INJECTION_KEY);
-    const drpNs = useNamespace("date-range-picker");
+    const rightDate = ref(dayjs().locale(lang.value).add(step, unit));
     const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY);
+    const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
+    const { shortcuts, disabledDate } = pickerBase.props;
+    const format = toRef(pickerBase.props, "format");
+    const defaultValue = toRef(pickerBase.props, "defaultValue");
+    const {
+      minDate,
+      maxDate,
+      rangeState,
+      ppNs,
+      drpNs,
+      handleChangeRange,
+      handleRangeConfirm,
+      handleShortcutClick,
+      onSelect,
+      onReset
+    } = useRangePicker(props, {
+      defaultValue,
+      leftDate,
+      rightDate,
+      step,
+      unit,
+      onParsedValueChanged
+    });
+    const {
+      leftPrevYear,
+      rightNextYear,
+      leftNextYear,
+      rightPrevYear,
+      leftLabel,
+      rightLabel,
+      leftYear,
+      rightYear
+    } = useYearRangeHeader({
+      unlinkPanels: toRef(props, "unlinkPanels"),
+      leftDate,
+      rightDate
+    });
     const hasShortcuts = computed(() => !!shortcuts.length);
     const panelKls = computed(() => [
       ppNs.b(),
@@ -60,33 +95,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         arrowRightBtn: [ppNs.e("icon-btn"), "d-arrow-right"]
       };
     });
-    const handleShortcutClick = useShortcut(lang);
-    const {
-      leftPrevYear,
-      rightNextYear,
-      leftNextYear,
-      rightPrevYear,
-      leftLabel,
-      rightLabel,
-      leftYear,
-      rightYear
-    } = useYearRangeHeader({
-      unlinkPanels: toRef(props, "unlinkPanels"),
-      leftDate,
-      rightDate
-    });
     const enableYearArrow = computed(() => {
       return props.unlinkPanels && rightYear.value > leftYear.value + 1;
     });
-    const minDate = ref();
-    const maxDate = ref();
-    const rangeState = ref({
-      endDate: null,
-      selecting: false
-    });
-    const handleChangeRange = (val) => {
-      rangeState.value = val;
-    };
     const handleRangePick = (val, close = true) => {
       const minDate_ = val.minDate;
       const maxDate_ = val.maxDate;
@@ -98,67 +109,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       minDate.value = minDate_;
       if (!close)
         return;
-      handleConfirm();
-    };
-    const handleConfirm = (visible = false) => {
-      if (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 = inject(PICKER_BASE_INJECTION_KEY);
-    const { shortcuts, disabledDate } = pickerBase.props;
-    const format = toRef(pickerBase.props, "format");
-    const defaultValue = toRef(pickerBase.props, "defaultValue");
-    const getDefaultValue = () => {
-      let start;
-      if (isArray(defaultValue.value)) {
-        const left = dayjs(defaultValue.value[0]);
-        let right = dayjs(defaultValue.value[1]);
-        if (!props.unlinkPanels) {
-          right = left.add(10, unit);
-        }
-        return [left, right];
-      } else if (defaultValue.value) {
-        start = dayjs(defaultValue.value);
-      } else {
-        start = dayjs();
-      }
-      start = start.locale(lang.value);
-      return [start, start.add(10, unit)];
-    };
-    watch(() => defaultValue.value, (val) => {
-      if (val) {
-        const defaultArr = getDefaultValue();
-        leftDate.value = defaultArr[0];
-        rightDate.value = defaultArr[1];
-      }
-    }, { immediate: true });
-    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 correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
     };
@@ -169,13 +121,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
     };
     const handleClear = () => {
-      const defaultArr = getDefaultValue();
+      const defaultArr = getDefaultValue(unref(defaultValue), {
+        lang: 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);
+      }
+    }
+    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]);
@@ -247,14 +217,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(YearTable, {
                 "selection-mode": "range",
                 date: leftDate.value,
-                "min-date": minDate.value,
-                "max-date": maxDate.value,
-                "range-state": rangeState.value,
+                "min-date": unref(minDate),
+                "max-date": unref(maxDate),
+                "range-state": unref(rangeState),
                 "disabled-date": unref(disabledDate),
-                onChangerange: handleChangeRange,
+                onChangerange: unref(handleChangeRange),
                 onPick: handleRangePick,
-                onSelect
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                onSelect: unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
             ], 2),
             createElementVNode("div", {
               class: normalizeClass(unref(rightPanelKls).content)
@@ -297,14 +267,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(YearTable, {
                 "selection-mode": "range",
                 date: rightDate.value,
-                "min-date": minDate.value,
-                "max-date": maxDate.value,
-                "range-state": rangeState.value,
+                "min-date": unref(minDate),
+                "max-date": unref(maxDate),
+                "range-state": unref(rangeState),
                 "disabled-date": unref(disabledDate),
-                onChangerange: handleChangeRange,
+                onChangerange: unref(handleChangeRange),
                 onPick: handleRangePick,
-                onSelect
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+                onSelect: unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
             ], 2)
           ], 2)
         ], 2)