@element-plus/nightly 0.0.20250609 → 0.0.20250610

package/es/components/collection/src/collection.mjs

@@ -1,13 +1,65 @@
-import { defineComponent, renderSlot } from 'vue';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { ref, provide, inject, onMounted, unref, onBeforeUnmount } from 'vue';
+import Collection from './collection2.mjs';
+import CollectionItem from './collection-item.mjs';
 
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  inheritAttrs: false
-});
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return renderSlot(_ctx.$slots, "default");
-}
-var Collection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "collection.vue"]]);
+const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
+const createCollectionWithScope = (name) => {
+  const COLLECTION_NAME = `El${name}Collection`;
+  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
+  const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
+  const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
+  const ElCollection = {
+    ...Collection,
+    name: COLLECTION_NAME,
+    setup() {
+      const collectionRef = ref();
+      const itemMap = /* @__PURE__ */ new Map();
+      const getItems = () => {
+        const collectionEl = unref(collectionRef);
+        if (!collectionEl)
+          return [];
+        const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
+        const items = [...itemMap.values()];
+        return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
+      };
+      provide(COLLECTION_INJECTION_KEY, {
+        itemMap,
+        getItems,
+        collectionRef
+      });
+    }
+  };
+  const ElCollectionItem = {
+    ...CollectionItem,
+    name: COLLECTION_ITEM_NAME,
+    setup(_, { attrs }) {
+      const collectionItemRef = ref();
+      const collectionInjection = inject(COLLECTION_INJECTION_KEY, void 0);
+      provide(COLLECTION_ITEM_INJECTION_KEY, {
+        collectionItemRef
+      });
+      onMounted(() => {
+        const collectionItemEl = unref(collectionItemRef);
+        if (collectionItemEl) {
+          collectionInjection.itemMap.set(collectionItemEl, {
+            ref: collectionItemEl,
+            ...attrs
+          });
+        }
+      });
+      onBeforeUnmount(() => {
+        const collectionItemEl = unref(collectionItemRef);
+        collectionInjection.itemMap.delete(collectionItemEl);
+      });
+    }
+  };
+  return {
+    COLLECTION_INJECTION_KEY,
+    COLLECTION_ITEM_INJECTION_KEY,
+    ElCollection,
+    ElCollectionItem
+  };
+};
 
-export { Collection as default };
+export { COLLECTION_ITEM_SIGN, createCollectionWithScope };
 //# sourceMappingURL=collection.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"collection.mjs","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({\n  inheritAttrs: false,\n})\n</script>\n"],"names":["DO_defineComponent","_renderSlot"],"mappings":";;;kCAKcA,eAAA,CAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;SANEC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collection.mjs","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { inject, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey, SetupContext } from 'vue'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement>()\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        return items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_: unknown, { attrs }: SetupContext) {\n      const collectionItemRef = ref<HTMLElement>()\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":[],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,CAAC,uBAAuB,EAAE;AAClD,MAAC,yBAAyB,GAAG,CAAC,IAAI,KAAK;AACnD,EAAE,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,EAAE,MAAM,oBAAoB,GAAG,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;AACxD,EAAE,MAAM,wBAAwB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAC3D,EAAE,MAAM,6BAA6B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AACrE,EAAE,MAAM,YAAY,GAAG;AACvB,IAAI,GAAG,UAAU;AACjB,IAAI,IAAI,EAAE,eAAe;AACzB,IAAI,KAAK,GAAG;AACZ,MAAM,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;AAClC,MAAM,MAAM,OAAO,mBAAmB,IAAI,GAAG,EAAE,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM;AAC7B,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAClD,QAAQ,IAAI,CAAC,YAAY;AACzB,UAAU,OAAO,EAAE,CAAC;AACpB,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpG,QAAQ,MAAM,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAC5C,QAAQ,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/F,OAAO,CAAC;AACR,MAAM,OAAO,CAAC,wBAAwB,EAAE;AACxC,QAAQ,OAAO;AACf,QAAQ,QAAQ;AAChB,QAAQ,aAAa;AACrB,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG;AAC3B,IAAI,GAAG,cAAc;AACrB,IAAI,IAAI,EAAE,oBAAoB;AAC9B,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;AACxB,MAAM,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC;AACtC,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3E,MAAM,OAAO,CAAC,6BAA6B,EAAE;AAC7C,QAAQ,iBAAiB;AACzB,OAAO,CAAC,CAAC;AACT,MAAM,SAAS,CAAC,MAAM;AACtB,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,IAAI,gBAAgB,EAAE;AAC9B,UAAU,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE;AAC5D,YAAY,GAAG,EAAE,gBAAgB;AACjC,YAAY,GAAG,KAAK;AACpB,WAAW,CAAC,CAAC;AACb,SAAS;AACT,OAAO,CAAC,CAAC;AACT,MAAM,eAAe,CAAC,MAAM;AAC5B,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,mBAAmB,CAAC,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC7D,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,wBAAwB;AAC5B,IAAI,6BAA6B;AACjC,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,GAAG,CAAC;AACJ;;;;"}

package/es/components/collection/src/collection2.mjs

@@ -1,65 +1,13 @@
-import { ref, provide, inject, onMounted, unref, onBeforeUnmount } from 'vue';
-import Collection from './collection.mjs';
-import CollectionItem from './collection-item.mjs';
+import { defineComponent, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
-const createCollectionWithScope = (name) => {
-  const COLLECTION_NAME = `El${name}Collection`;
-  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
-  const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
-  const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
-  const ElCollection = {
-    ...Collection,
-    name: COLLECTION_NAME,
-    setup() {
-      const collectionRef = ref();
-      const itemMap = /* @__PURE__ */ new Map();
-      const getItems = () => {
-        const collectionEl = unref(collectionRef);
-        if (!collectionEl)
-          return [];
-        const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
-        const items = [...itemMap.values()];
-        return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
-      };
-      provide(COLLECTION_INJECTION_KEY, {
-        itemMap,
-        getItems,
-        collectionRef
-      });
-    }
-  };
-  const ElCollectionItem = {
-    ...CollectionItem,
-    name: COLLECTION_ITEM_NAME,
-    setup(_, { attrs }) {
-      const collectionItemRef = ref();
-      const collectionInjection = inject(COLLECTION_INJECTION_KEY, void 0);
-      provide(COLLECTION_ITEM_INJECTION_KEY, {
-        collectionItemRef
-      });
-      onMounted(() => {
-        const collectionItemEl = unref(collectionItemRef);
-        if (collectionItemEl) {
-          collectionInjection.itemMap.set(collectionItemEl, {
-            ref: collectionItemEl,
-            ...attrs
-          });
-        }
-      });
-      onBeforeUnmount(() => {
-        const collectionItemEl = unref(collectionItemRef);
-        collectionInjection.itemMap.delete(collectionItemEl);
-      });
-    }
-  };
-  return {
-    COLLECTION_INJECTION_KEY,
-    COLLECTION_ITEM_INJECTION_KEY,
-    ElCollection,
-    ElCollectionItem
-  };
-};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var Collection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "collection.vue"]]);
 
-export { COLLECTION_ITEM_SIGN, createCollectionWithScope };
+export { Collection as default };
 //# sourceMappingURL=collection2.mjs.map

package/es/components/collection/src/collection2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection2.mjs","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { inject, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey, SetupContext } from 'vue'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement>()\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        return items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_: unknown, { attrs }: SetupContext) {\n      const collectionItemRef = ref<HTMLElement>()\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":[],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,CAAC,uBAAuB,EAAE;AAClD,MAAC,yBAAyB,GAAG,CAAC,IAAI,KAAK;AACnD,EAAE,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,EAAE,MAAM,oBAAoB,GAAG,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;AACxD,EAAE,MAAM,wBAAwB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAC3D,EAAE,MAAM,6BAA6B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AACrE,EAAE,MAAM,YAAY,GAAG;AACvB,IAAI,GAAG,UAAU;AACjB,IAAI,IAAI,EAAE,eAAe;AACzB,IAAI,KAAK,GAAG;AACZ,MAAM,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;AAClC,MAAM,MAAM,OAAO,mBAAmB,IAAI,GAAG,EAAE,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM;AAC7B,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAClD,QAAQ,IAAI,CAAC,YAAY;AACzB,UAAU,OAAO,EAAE,CAAC;AACpB,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpG,QAAQ,MAAM,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAC5C,QAAQ,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/F,OAAO,CAAC;AACR,MAAM,OAAO,CAAC,wBAAwB,EAAE;AACxC,QAAQ,OAAO;AACf,QAAQ,QAAQ;AAChB,QAAQ,aAAa;AACrB,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG;AAC3B,IAAI,GAAG,cAAc;AACrB,IAAI,IAAI,EAAE,oBAAoB;AAC9B,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;AACxB,MAAM,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC;AACtC,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3E,MAAM,OAAO,CAAC,6BAA6B,EAAE;AAC7C,QAAQ,iBAAiB;AACzB,OAAO,CAAC,CAAC;AACT,MAAM,SAAS,CAAC,MAAM;AACtB,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,IAAI,gBAAgB,EAAE;AAC9B,UAAU,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE;AAC5D,YAAY,GAAG,EAAE,gBAAgB;AACjC,YAAY,GAAG,KAAK;AACpB,WAAW,CAAC,CAAC;AACb,SAAS;AACT,OAAO,CAAC,CAAC;AACT,MAAM,eAAe,CAAC,MAAM;AAC5B,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,mBAAmB,CAAC,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC7D,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,wBAAwB;AAC5B,IAAI,6BAA6B;AACjC,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"collection2.mjs","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({\n  inheritAttrs: false,\n})\n</script>\n"],"names":["DO_defineComponent","_renderSlot"],"mappings":";;;kCAKcA,eAAA,CAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;SANEC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA,CAAA;;;;;;"}

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":"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"}
+{"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)