@v-c/picker 0.0.1

package/dist/PickerInput/hooks/useLockEffect.cjs

@@ -0,0 +1,16 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_util = require("../Selector/util.cjs");
+let vue = require("vue");
+function useLockEffect(condition, callback) {
+	(0, vue.watch)(condition, (val) => {
+		if (val) callback(val);
+		else require_util.raf(() => {
+			callback(!!val);
+		});
+	}, { flush: "post" });
+}
+exports.default = useLockEffect;

package/dist/PickerInput/hooks/useLockEffect.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+/**
+ * Trigger `callback` immediately when `condition` is `true`.
+ * But trigger `callback` in next frame when `condition` is `false`.
+ */
+export default function useLockEffect(condition: Ref<boolean | undefined>, callback: (next: boolean) => void): void;

package/dist/PickerInput/hooks/useLockEffect.js

@@ -0,0 +1,11 @@
+import { raf } from "../Selector/util.js";
+import { watch } from "vue";
+function useLockEffect(condition, callback) {
+	watch(condition, (val) => {
+		if (val) callback(val);
+		else raf(() => {
+			callback(!!val);
+		});
+	}, { flush: "post" });
+}
+export { useLockEffect as default };

package/dist/PickerInput/hooks/useOpen.cjs

@@ -0,0 +1,15 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useDelayState = require("./useDelayState.cjs");
+let vue = require("vue");
+function useOpen(open, defaultOpen, disabledList, onOpenChange) {
+	const [rafOpen, setRafOpen] = require_useDelayState.default((0, vue.computed)(() => disabledList.value?.every((disabled) => disabled) ? false : open.value), defaultOpen.value || false, onOpenChange);
+	function setOpen(next, config = {}) {
+		if (!config.inherit || rafOpen.value) setRafOpen(next, config.force);
+	}
+	return [rafOpen, setOpen];
+}
+exports.default = useOpen;

package/dist/PickerInput/hooks/useOpen.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, Ref } from 'vue';
+import { OpenConfig } from '../../interface';
+/**
+ * Control the open state.
+ * Will not close if activeElement is on the popup.
+ */
+export default function useOpen(open: Ref<boolean | undefined>, defaultOpen: Ref<boolean | undefined>, disabledList: Ref<Array<boolean | undefined>> | ComputedRef<Array<boolean | undefined>>, onOpenChange?: (open: boolean) => void): readonly [ComputedRef<any>, (next: boolean, config?: OpenConfig) => void];

package/dist/PickerInput/hooks/useOpen.js

@@ -0,0 +1,10 @@
+import useDelayState from "./useDelayState.js";
+import { computed } from "vue";
+function useOpen(open, defaultOpen, disabledList, onOpenChange) {
+	const [rafOpen, setRafOpen] = useDelayState(computed(() => disabledList.value?.every((disabled) => disabled) ? false : open.value), defaultOpen.value || false, onOpenChange);
+	function setOpen(next, config = {}) {
+		if (!config.inherit || rafOpen.value) setRafOpen(next, config.force);
+	}
+	return [rafOpen, setOpen];
+}
+export { useOpen as default };

package/dist/PickerInput/hooks/usePresets.cjs

@@ -0,0 +1,21 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+function usePresets(presets, legacyRanges) {
+	return (0, vue.computed)(() => {
+		if (presets.value) return presets.value;
+		if (legacyRanges?.value) {
+			(0, _v_c_util.warning)(false, "`ranges` is deprecated. Please use `presets` instead.");
+			return Object.entries(legacyRanges.value).map(([label, value]) => ({
+				label,
+				value
+			}));
+		}
+		return [];
+	});
+}
+exports.default = usePresets;

package/dist/PickerInput/hooks/usePresets.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { ValueDate } from '../../interface';
+export default function usePresets<DateType = any>(presets: Ref<ValueDate<DateType>[] | undefined>, legacyRanges?: Ref<Record<string, DateType | (() => DateType)> | undefined>): import('vue').ComputedRef<ValueDate<DateType>[]>;

package/dist/PickerInput/hooks/usePresets.js

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+import { warning } from "@v-c/util";
+function usePresets(presets, legacyRanges) {
+	return computed(() => {
+		if (presets.value) return presets.value;
+		if (legacyRanges?.value) {
+			warning(false, "`ranges` is deprecated. Please use `presets` instead.");
+			return Object.entries(legacyRanges.value).map(([label, value]) => ({
+				label,
+				value
+			}));
+		}
+		return [];
+	});
+}
+export { usePresets as default };

package/dist/PickerInput/hooks/useRangeActive.cjs

@@ -0,0 +1,57 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useLockEffect = require("./useLockEffect.cjs");
+let vue = require("vue");
+function useRangeActive(disabled, empty = (0, vue.ref)([]), mergedOpen = (0, vue.ref)(false)) {
+	const activeIndex = (0, vue.ref)(0);
+	const focused = (0, vue.ref)(false);
+	const activeListRef = (0, vue.ref)([]);
+	const submitIndexRef = (0, vue.ref)(null);
+	const lastOperationRef = (0, vue.ref)(null);
+	const updateSubmitIndex = (index) => {
+		submitIndexRef.value = index;
+	};
+	const hasActiveSubmitValue = (index) => {
+		return submitIndexRef.value === index;
+	};
+	const triggerFocus = (nextFocus) => {
+		focused.value = nextFocus;
+	};
+	const lastOperation = (type) => {
+		if (type) lastOperationRef.value = type;
+		return lastOperationRef.value;
+	};
+	const nextActiveIndex = (nextValue) => {
+		const list = activeListRef.value;
+		const filledActiveSet = new Set(list.filter((index) => nextValue?.[index] || empty.value[index]));
+		const nextIndex = list[list.length - 1] === 0 ? 1 : 0;
+		if (filledActiveSet.size >= 2 || disabled.value[nextIndex]) return null;
+		return nextIndex;
+	};
+	require_useLockEffect.default((0, vue.computed)(() => focused.value || mergedOpen.value), () => {
+		if (!focused.value) {
+			activeListRef.value = [];
+			updateSubmitIndex(null);
+		}
+	});
+	(0, vue.watch)([focused, activeIndex], () => {
+		if (focused.value) activeListRef.value.push(activeIndex.value);
+	});
+	return [
+		focused,
+		triggerFocus,
+		lastOperation,
+		activeIndex,
+		(index) => {
+			activeIndex.value = index;
+		},
+		nextActiveIndex,
+		activeListRef,
+		updateSubmitIndex,
+		hasActiveSubmitValue
+	];
+}
+exports.default = useRangeActive;

package/dist/PickerInput/hooks/useRangeActive.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, Ref } from 'vue';
+export type OperationType = 'input' | 'panel';
+export type NextActive<DateType> = (nextValue: [DateType | null | undefined, DateType | null | undefined]) => number | null;
+/**
+ * When user first focus one input, any submit will trigger focus another one.
+ * When second time focus one input, submit will not trigger focus again.
+ * When click outside to close the panel, trigger event if it can trigger onChange.
+ */
+export default function useRangeActive<DateType>(disabled: Ref<(boolean | undefined)[]> | ComputedRef<(boolean | undefined)[]>, empty?: Ref<boolean[]>, mergedOpen?: Ref<boolean | undefined>): readonly [Ref<boolean, boolean>, (nextFocus: boolean) => void, (type?: OperationType) => OperationType, Ref<number, number>, (index: number) => void, NextActive<DateType>, Ref<number[], number[]>, (index: number | null) => void, (index: number) => boolean];

package/dist/PickerInput/hooks/useRangeActive.js

@@ -0,0 +1,52 @@
+import useLockEffect from "./useLockEffect.js";
+import { computed, ref, watch } from "vue";
+function useRangeActive(disabled, empty = ref([]), mergedOpen = ref(false)) {
+	const activeIndex = ref(0);
+	const focused = ref(false);
+	const activeListRef = ref([]);
+	const submitIndexRef = ref(null);
+	const lastOperationRef = ref(null);
+	const updateSubmitIndex = (index) => {
+		submitIndexRef.value = index;
+	};
+	const hasActiveSubmitValue = (index) => {
+		return submitIndexRef.value === index;
+	};
+	const triggerFocus = (nextFocus) => {
+		focused.value = nextFocus;
+	};
+	const lastOperation = (type) => {
+		if (type) lastOperationRef.value = type;
+		return lastOperationRef.value;
+	};
+	const nextActiveIndex = (nextValue) => {
+		const list = activeListRef.value;
+		const filledActiveSet = new Set(list.filter((index) => nextValue?.[index] || empty.value[index]));
+		const nextIndex = list[list.length - 1] === 0 ? 1 : 0;
+		if (filledActiveSet.size >= 2 || disabled.value[nextIndex]) return null;
+		return nextIndex;
+	};
+	useLockEffect(computed(() => focused.value || mergedOpen.value), () => {
+		if (!focused.value) {
+			activeListRef.value = [];
+			updateSubmitIndex(null);
+		}
+	});
+	watch([focused, activeIndex], () => {
+		if (focused.value) activeListRef.value.push(activeIndex.value);
+	});
+	return [
+		focused,
+		triggerFocus,
+		lastOperation,
+		activeIndex,
+		(index) => {
+			activeIndex.value = index;
+		},
+		nextActiveIndex,
+		activeListRef,
+		updateSubmitIndex,
+		hasActiveSubmitValue
+	];
+}
+export { useRangeActive as default };

package/dist/PickerInput/hooks/useRangeDisabledDate.cjs

@@ -0,0 +1,21 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_miscUtil = require("../../utils/miscUtil.cjs");
+const require_dateUtil = require("../../utils/dateUtil.cjs");
+function useRangeDisabledDate(values, disabled, activeIndexList, generateConfig, locale, disabledDate) {
+	const rangeDisabledDate = (date, info) => {
+		const activeIndex = activeIndexList.value[activeIndexList.value.length - 1];
+		const [start, end] = values.value;
+		const mergedInfo = {
+			...info,
+			from: require_miscUtil.getFromDate(values.value, activeIndexList.value)
+		};
+		if (activeIndex === 1 && disabled.value[0] && start && !require_dateUtil.isSame(generateConfig.value, locale.value, start, date, mergedInfo.type) && generateConfig.value.isAfter(start, date)) return true;
+		if (activeIndex === 0 && disabled.value[1] && end && !require_dateUtil.isSame(generateConfig.value, locale.value, end, date, mergedInfo.type) && generateConfig.value.isAfter(date, end)) return true;
+		return disabledDate.value?.(date, mergedInfo) || false;
+	};
+	return rangeDisabledDate;
+}
+exports.default = useRangeDisabledDate;

package/dist/PickerInput/hooks/useRangeDisabledDate.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+import { GenerateConfig } from '../../generate';
+import { DisabledDate, Locale } from '../../interface';
+import { RangeValueType } from '../RangePicker';
+/**
+ * RangePicker need additional logic to handle the `disabled` case. e.g.
+ * [disabled, enabled] should end date not before start date
+ */
+export default function useRangeDisabledDate<DateType extends object = any>(values: Ref<RangeValueType<DateType>>, disabled: Ref<[boolean, boolean]>, activeIndexList: Ref<number[]>, generateConfig: Ref<GenerateConfig<DateType>>, locale: Ref<Locale>, disabledDate: Ref<DisabledDate<DateType> | undefined>): DisabledDate<DateType>;

package/dist/PickerInput/hooks/useRangeDisabledDate.js

@@ -0,0 +1,17 @@
+import { getFromDate } from "../../utils/miscUtil.js";
+import { isSame } from "../../utils/dateUtil.js";
+function useRangeDisabledDate(values, disabled, activeIndexList, generateConfig, locale, disabledDate) {
+	const rangeDisabledDate = (date, info) => {
+		const activeIndex = activeIndexList.value[activeIndexList.value.length - 1];
+		const [start, end] = values.value;
+		const mergedInfo = {
+			...info,
+			from: getFromDate(values.value, activeIndexList.value)
+		};
+		if (activeIndex === 1 && disabled.value[0] && start && !isSame(generateConfig.value, locale.value, start, date, mergedInfo.type) && generateConfig.value.isAfter(start, date)) return true;
+		if (activeIndex === 0 && disabled.value[1] && end && !isSame(generateConfig.value, locale.value, end, date, mergedInfo.type) && generateConfig.value.isAfter(date, end)) return true;
+		return disabledDate.value?.(date, mergedInfo) || false;
+	};
+	return rangeDisabledDate;
+}
+export { useRangeDisabledDate as default };

package/dist/PickerInput/hooks/useRangePickerValue.cjs

@@ -0,0 +1,100 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_dateUtil = require("../../utils/dateUtil.cjs");
+const require_useSyncState = require("../../hooks/useSyncState.cjs");
+let vue = require("vue");
+function offsetPanelDate(generateConfig, picker, date, offset) {
+	switch (picker) {
+		case "date":
+		case "datetime":
+		case "week": return generateConfig.addMonth(date, offset);
+		case "month":
+		case "quarter": return generateConfig.addYear(date, offset);
+		case "year": return generateConfig.addYear(date, offset * 10);
+		case "decade": return generateConfig.addYear(date, offset * 100);
+		default: return date;
+	}
+}
+var EMPTY_LIST = [];
+function useRangePickerValue(generateConfig, locale, calendarValue, modes, open, activeIndex, pickerMode, multiplePanel, defaultPickerValue = (0, vue.ref)(EMPTY_LIST), pickerValue = (0, vue.ref)(EMPTY_LIST), timeDefaultValue = (0, vue.ref)(EMPTY_LIST), onPickerValueChange, minDate, maxDate) {
+	const isTimePicker = (0, vue.computed)(() => pickerMode.value === "time");
+	const mergedActiveIndex = (0, vue.computed)(() => activeIndex.value || 0);
+	const getDefaultPickerValue = (index) => {
+		let now = generateConfig.value?.getNow?.();
+		if (!now) return;
+		if (isTimePicker.value) now = require_dateUtil.fillTime(generateConfig.value, now);
+		return defaultPickerValue.value?.[index] || calendarValue.value?.[index] || now;
+	};
+	const [getStartPickerValue, setStartPickerValue] = require_useSyncState.default(getDefaultPickerValue(0), () => pickerValue.value?.[0]);
+	const [getEndPickerValue, setEndPickerValue] = require_useSyncState.default(getDefaultPickerValue(1), () => pickerValue.value?.[1]);
+	const currentPickerValue = (0, vue.computed)(() => {
+		const current = [getStartPickerValue(true), getEndPickerValue(true)][mergedActiveIndex.value];
+		if (!current) return current;
+		return isTimePicker.value ? current : require_dateUtil.fillTime(generateConfig.value, current, timeDefaultValue.value?.[mergedActiveIndex.value]);
+	});
+	const setCurrentPickerValue = (nextPickerValue, source = "panel") => {
+		const prevStartPickerValue = getStartPickerValue(true);
+		const prevEndPickerValue = getEndPickerValue(true);
+		const updater = [setStartPickerValue, setEndPickerValue][mergedActiveIndex.value];
+		updater(nextPickerValue);
+		const clone = [prevStartPickerValue, prevEndPickerValue];
+		clone[mergedActiveIndex.value] = nextPickerValue;
+		const mergedCallback = typeof onPickerValueChange === "function" ? onPickerValueChange : onPickerValueChange?.value;
+		if (mergedCallback && (!require_dateUtil.isSame(generateConfig.value, locale.value, prevStartPickerValue, clone[0], pickerMode.value) || !require_dateUtil.isSame(generateConfig.value, locale.value, prevEndPickerValue, clone[1], pickerMode.value))) mergedCallback(clone, {
+			source,
+			range: mergedActiveIndex.value === 1 ? "end" : "start",
+			mode: modes.value
+		});
+	};
+	const getEndDatePickerValue = (startDate, endDate) => {
+		if (multiplePanel.value) {
+			const mode = {
+				date: "month",
+				datetime: "month",
+				week: "month",
+				month: "year",
+				quarter: "year"
+			}[pickerMode.value];
+			if (mode && !require_dateUtil.isSame(generateConfig.value, locale.value, startDate, endDate, mode)) return offsetPanelDate(generateConfig.value, pickerMode.value, endDate, -1);
+			if (pickerMode.value === "year" && startDate && endDate) {
+				if (Math.floor(generateConfig.value.getYear(startDate) / 10) !== Math.floor(generateConfig.value.getYear(endDate) / 10)) return offsetPanelDate(generateConfig.value, pickerMode.value, endDate, -1);
+			}
+		}
+		return endDate;
+	};
+	const prevActiveIndexRef = (0, vue.ref)(null);
+	(0, vue.watch)(() => [
+		open.value,
+		mergedActiveIndex.value,
+		calendarValue.value?.[mergedActiveIndex.value]
+	], () => {
+		if (!open.value) return;
+		if (defaultPickerValue.value?.[mergedActiveIndex.value]) return;
+		let nextPickerValue = isTimePicker.value ? null : generateConfig.value.getNow();
+		if (prevActiveIndexRef.value !== null && prevActiveIndexRef.value !== mergedActiveIndex.value) nextPickerValue = [getStartPickerValue(true), getEndPickerValue(true)][mergedActiveIndex.value ^ 1];
+		else if (calendarValue.value?.[mergedActiveIndex.value]) nextPickerValue = mergedActiveIndex.value === 0 ? calendarValue.value[0] : getEndDatePickerValue(calendarValue.value[0], calendarValue.value[1]);
+		else if (calendarValue.value?.[mergedActiveIndex.value ^ 1]) nextPickerValue = calendarValue.value[mergedActiveIndex.value ^ 1];
+		if (!nextPickerValue) return;
+		if (minDate?.value && generateConfig.value.isAfter(minDate.value, nextPickerValue)) nextPickerValue = minDate.value;
+		const offsetPickerValue = multiplePanel.value ? offsetPanelDate(generateConfig.value, pickerMode.value, nextPickerValue, 1) : nextPickerValue;
+		if (maxDate?.value && generateConfig.value.isAfter(offsetPickerValue, maxDate.value)) nextPickerValue = multiplePanel.value ? offsetPanelDate(generateConfig.value, pickerMode.value, maxDate.value, -1) : maxDate.value;
+		setCurrentPickerValue(nextPickerValue, "reset");
+	}, { flush: "post" });
+	(0, vue.watch)(() => [open.value, mergedActiveIndex.value], () => {
+		if (open.value) prevActiveIndexRef.value = mergedActiveIndex.value;
+		else prevActiveIndexRef.value = null;
+	}, { flush: "post" });
+	(0, vue.watch)(() => [
+		open.value,
+		mergedActiveIndex.value,
+		defaultPickerValue.value?.[mergedActiveIndex.value]
+	], () => {
+		if (open.value && defaultPickerValue.value?.[mergedActiveIndex.value]) setCurrentPickerValue(defaultPickerValue.value[mergedActiveIndex.value], "reset");
+	}, { flush: "post" });
+	return [currentPickerValue, setCurrentPickerValue];
+}
+exports.default = useRangePickerValue;
+exports.offsetPanelDate = offsetPanelDate;

package/dist/PickerInput/hooks/useRangePickerValue.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+import { GenerateConfig } from '../../generate';
+import { InternalMode, Locale, PanelMode } from '../../interface';
+export declare function offsetPanelDate<DateType = any>(generateConfig: GenerateConfig<DateType>, picker: InternalMode, date: DateType, offset: number): DateType;
+export default function useRangePickerValue<DateType extends object, ValueType extends DateType[]>(generateConfig: Ref<GenerateConfig<DateType>>, locale: Ref<Locale>, calendarValue: Ref<ValueType>, modes: Ref<PanelMode[]>, open: Ref<boolean>, activeIndex: Ref<number>, pickerMode: Ref<InternalMode>, multiplePanel: Ref<boolean>, defaultPickerValue?: Ref<any>, pickerValue?: Ref<any>, timeDefaultValue?: Ref<any>, onPickerValueChange?: ((dates: ValueType, info: any) => void) | Ref<((dates: ValueType, info: any) => void) | undefined>, minDate?: Ref<DateType | undefined>, maxDate?: Ref<DateType | undefined>): [currentIndexPickerValue: Ref<DateType>, setCurrentIndexPickerValue: (value: DateType, source?: 'reset' | 'panel') => void];

package/dist/PickerInput/hooks/useRangePickerValue.js

@@ -0,0 +1,94 @@
+import { fillTime, isSame } from "../../utils/dateUtil.js";
+import useSyncState from "../../hooks/useSyncState.js";
+import { computed, ref, watch } from "vue";
+function offsetPanelDate(generateConfig, picker, date, offset) {
+	switch (picker) {
+		case "date":
+		case "datetime":
+		case "week": return generateConfig.addMonth(date, offset);
+		case "month":
+		case "quarter": return generateConfig.addYear(date, offset);
+		case "year": return generateConfig.addYear(date, offset * 10);
+		case "decade": return generateConfig.addYear(date, offset * 100);
+		default: return date;
+	}
+}
+var EMPTY_LIST = [];
+function useRangePickerValue(generateConfig, locale, calendarValue, modes, open, activeIndex, pickerMode, multiplePanel, defaultPickerValue = ref(EMPTY_LIST), pickerValue = ref(EMPTY_LIST), timeDefaultValue = ref(EMPTY_LIST), onPickerValueChange, minDate, maxDate) {
+	const isTimePicker = computed(() => pickerMode.value === "time");
+	const mergedActiveIndex = computed(() => activeIndex.value || 0);
+	const getDefaultPickerValue = (index) => {
+		let now = generateConfig.value?.getNow?.();
+		if (!now) return;
+		if (isTimePicker.value) now = fillTime(generateConfig.value, now);
+		return defaultPickerValue.value?.[index] || calendarValue.value?.[index] || now;
+	};
+	const [getStartPickerValue, setStartPickerValue] = useSyncState(getDefaultPickerValue(0), () => pickerValue.value?.[0]);
+	const [getEndPickerValue, setEndPickerValue] = useSyncState(getDefaultPickerValue(1), () => pickerValue.value?.[1]);
+	const currentPickerValue = computed(() => {
+		const current = [getStartPickerValue(true), getEndPickerValue(true)][mergedActiveIndex.value];
+		if (!current) return current;
+		return isTimePicker.value ? current : fillTime(generateConfig.value, current, timeDefaultValue.value?.[mergedActiveIndex.value]);
+	});
+	const setCurrentPickerValue = (nextPickerValue, source = "panel") => {
+		const prevStartPickerValue = getStartPickerValue(true);
+		const prevEndPickerValue = getEndPickerValue(true);
+		const updater = [setStartPickerValue, setEndPickerValue][mergedActiveIndex.value];
+		updater(nextPickerValue);
+		const clone = [prevStartPickerValue, prevEndPickerValue];
+		clone[mergedActiveIndex.value] = nextPickerValue;
+		const mergedCallback = typeof onPickerValueChange === "function" ? onPickerValueChange : onPickerValueChange?.value;
+		if (mergedCallback && (!isSame(generateConfig.value, locale.value, prevStartPickerValue, clone[0], pickerMode.value) || !isSame(generateConfig.value, locale.value, prevEndPickerValue, clone[1], pickerMode.value))) mergedCallback(clone, {
+			source,
+			range: mergedActiveIndex.value === 1 ? "end" : "start",
+			mode: modes.value
+		});
+	};
+	const getEndDatePickerValue = (startDate, endDate) => {
+		if (multiplePanel.value) {
+			const mode = {
+				date: "month",
+				datetime: "month",
+				week: "month",
+				month: "year",
+				quarter: "year"
+			}[pickerMode.value];
+			if (mode && !isSame(generateConfig.value, locale.value, startDate, endDate, mode)) return offsetPanelDate(generateConfig.value, pickerMode.value, endDate, -1);
+			if (pickerMode.value === "year" && startDate && endDate) {
+				if (Math.floor(generateConfig.value.getYear(startDate) / 10) !== Math.floor(generateConfig.value.getYear(endDate) / 10)) return offsetPanelDate(generateConfig.value, pickerMode.value, endDate, -1);
+			}
+		}
+		return endDate;
+	};
+	const prevActiveIndexRef = ref(null);
+	watch(() => [
+		open.value,
+		mergedActiveIndex.value,
+		calendarValue.value?.[mergedActiveIndex.value]
+	], () => {
+		if (!open.value) return;
+		if (defaultPickerValue.value?.[mergedActiveIndex.value]) return;
+		let nextPickerValue = isTimePicker.value ? null : generateConfig.value.getNow();
+		if (prevActiveIndexRef.value !== null && prevActiveIndexRef.value !== mergedActiveIndex.value) nextPickerValue = [getStartPickerValue(true), getEndPickerValue(true)][mergedActiveIndex.value ^ 1];
+		else if (calendarValue.value?.[mergedActiveIndex.value]) nextPickerValue = mergedActiveIndex.value === 0 ? calendarValue.value[0] : getEndDatePickerValue(calendarValue.value[0], calendarValue.value[1]);
+		else if (calendarValue.value?.[mergedActiveIndex.value ^ 1]) nextPickerValue = calendarValue.value[mergedActiveIndex.value ^ 1];
+		if (!nextPickerValue) return;
+		if (minDate?.value && generateConfig.value.isAfter(minDate.value, nextPickerValue)) nextPickerValue = minDate.value;
+		const offsetPickerValue = multiplePanel.value ? offsetPanelDate(generateConfig.value, pickerMode.value, nextPickerValue, 1) : nextPickerValue;
+		if (maxDate?.value && generateConfig.value.isAfter(offsetPickerValue, maxDate.value)) nextPickerValue = multiplePanel.value ? offsetPanelDate(generateConfig.value, pickerMode.value, maxDate.value, -1) : maxDate.value;
+		setCurrentPickerValue(nextPickerValue, "reset");
+	}, { flush: "post" });
+	watch(() => [open.value, mergedActiveIndex.value], () => {
+		if (open.value) prevActiveIndexRef.value = mergedActiveIndex.value;
+		else prevActiveIndexRef.value = null;
+	}, { flush: "post" });
+	watch(() => [
+		open.value,
+		mergedActiveIndex.value,
+		defaultPickerValue.value?.[mergedActiveIndex.value]
+	], () => {
+		if (open.value && defaultPickerValue.value?.[mergedActiveIndex.value]) setCurrentPickerValue(defaultPickerValue.value[mergedActiveIndex.value], "reset");
+	}, { flush: "post" });
+	return [currentPickerValue, setCurrentPickerValue];
+}
+export { useRangePickerValue as default, offsetPanelDate };

package/dist/PickerInput/hooks/useRangeValue.cjs

@@ -0,0 +1,134 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_miscUtil = require("../../utils/miscUtil.cjs");
+const require_dateUtil = require("../../utils/dateUtil.cjs");
+const require_useLockEffect = require("./useLockEffect.cjs");
+let vue = require("vue");
+var EMPTY_VALUE = [];
+function useUtil(generateConfig, locale, formatList) {
+	const getDateTexts = (dates) => {
+		return dates.map((date) => require_dateUtil.formatValue(date, {
+			generateConfig: generateConfig.value,
+			locale: locale.value,
+			format: formatList.value[0]
+		}));
+	};
+	const isSameDates = (source, target) => {
+		const maxLen = Math.max(source.length, target.length);
+		let diffIndex = -1;
+		for (let i = 0; i < maxLen; i += 1) {
+			const prev = source[i] || null;
+			const next = target[i] || null;
+			if (prev !== next && !require_dateUtil.isSameTimestamp(generateConfig.value, prev, next)) {
+				diffIndex = i;
+				break;
+			}
+		}
+		return [diffIndex < 0, diffIndex !== 0];
+	};
+	return [getDateTexts, isSameDates];
+}
+function orderDates(dates, generateConfig) {
+	return [...dates].sort((a, b) => generateConfig.isAfter(a, b) ? 1 : -1);
+}
+function useInnerValue(generateConfig, locale, formatList, rangeValue, order, defaultValue, value, onCalendarChange, onOk) {
+	const internalValue = (0, vue.ref)(defaultValue.value);
+	const mergedValue = (0, vue.computed)(() => {
+		return (value.value !== void 0 ? value.value : internalValue.value) || EMPTY_VALUE;
+	});
+	const setInnerValue = (val) => {
+		if (value.value === void 0) internalValue.value = val;
+	};
+	const calendarValue = (0, vue.ref)(mergedValue.value);
+	(0, vue.watch)(mergedValue, (val) => {
+		calendarValue.value = val;
+	});
+	const setCalendarValue = (val) => {
+		calendarValue.value = val;
+	};
+	const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList);
+	const triggerCalendarChange = (nextCalendarValues) => {
+		let clone = [...nextCalendarValues];
+		if (rangeValue.value) for (let i = 0; i < 2; i += 1) clone[i] = clone[i] || null;
+		else if (order.value) clone = orderDates(clone.filter((date) => date), generateConfig.value);
+		const [isSameMergedDates, isSameStart] = isSameDates(calendarValue.value, clone);
+		if (!isSameMergedDates) {
+			setCalendarValue(clone);
+			if (onCalendarChange) {
+				const cellTexts = getDateTexts(clone);
+				onCalendarChange(clone, cellTexts, { range: isSameStart ? "end" : "start" });
+			}
+		}
+	};
+	const triggerOk = () => {
+		if (onOk) onOk(calendarValue.value);
+	};
+	return [
+		mergedValue,
+		setInnerValue,
+		calendarValue,
+		triggerCalendarChange,
+		triggerOk
+	];
+}
+function useRangeValue(info, mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, disabled, formatList, focused, open, isInvalidateDate) {
+	const orderOnChange = (0, vue.computed)(() => disabled.value.some((d) => d) ? false : info.value.order);
+	const [getDateTexts, isSameDates] = useUtil((0, vue.computed)(() => info.value.generateConfig), (0, vue.computed)(() => info.value.locale), formatList);
+	const submitValue = (0, vue.ref)(mergedValue.value);
+	(0, vue.watch)(mergedValue, (val) => {
+		submitValue.value = val;
+	});
+	const setSubmitValue = (val) => {
+		submitValue.value = val;
+	};
+	const triggerSubmit = (nextValue) => {
+		const { generateConfig, locale, picker, onChange, allowEmpty, order } = info.value;
+		const isNullValue = nextValue === null;
+		let clone = [...nextValue || submitValue.value];
+		if (isNullValue) {
+			const maxLen = Math.max(disabled.value.length, clone.length);
+			for (let i = 0; i < maxLen; i += 1) if (!disabled.value[i]) clone[i] = null;
+		}
+		if (orderOnChange.value && clone[0] && clone[1]) clone = orderDates(clone, generateConfig);
+		triggerCalendarChange(clone);
+		const [start, end] = clone;
+		const startEmpty = !start;
+		const endEmpty = !end;
+		const validateEmptyDateRange = allowEmpty ? (!startEmpty || allowEmpty[0]) && (!endEmpty || allowEmpty[1]) : true;
+		const validateOrder = !order || startEmpty || endEmpty || require_dateUtil.isSame(generateConfig, locale, start, end, picker) || generateConfig.isAfter(end, start);
+		const validateDates = (disabled.value[0] || !start || !isInvalidateDate(start, { activeIndex: 0 })) && (disabled.value[1] || !end || !isInvalidateDate(end, {
+			from: start,
+			activeIndex: 1
+		}));
+		const allPassed = isNullValue || validateEmptyDateRange && validateOrder && validateDates;
+		if (allPassed) {
+			setInnerValue(clone);
+			const [isSameMergedDates] = isSameDates(clone, mergedValue.value);
+			if (onChange && !isSameMergedDates) {
+				const everyEmpty = clone.every((val) => !val);
+				onChange(isNullValue && everyEmpty ? null : clone, everyEmpty ? null : getDateTexts(clone));
+			}
+		}
+		return allPassed;
+	};
+	const flushSubmit = (index, needTriggerChange) => {
+		setSubmitValue(require_miscUtil.fillIndex(submitValue.value, index, getCalendarValue()[index]));
+		if (needTriggerChange) triggerSubmit();
+	};
+	const interactiveFinished = (0, vue.computed)(() => !focused.value && !open.value);
+	require_useLockEffect.default((0, vue.computed)(() => !interactiveFinished.value), (next) => {
+		if (next === false) {
+			if (!next) {
+				triggerSubmit();
+				triggerCalendarChange(mergedValue.value);
+				submitValue.value = mergedValue.value;
+			}
+		}
+	});
+	return [flushSubmit, triggerSubmit];
+}
+exports.default = useRangeValue;
+exports.useInnerValue = useInnerValue;

package/dist/PickerInput/hooks/useRangeValue.d.ts

@@ -0,0 +1,21 @@
+import { ComputedRef, Ref } from 'vue';
+import { GenerateConfig } from '../../generate';
+import { BaseInfo, FormatType, Locale } from '../../interface';
+type TriggerCalendarChange<ValueType extends object[]> = (calendarValues: ValueType) => void;
+/**
+ * Control the internal `value` align with prop `value` and provide a temp `calendarValue` for ui.
+ * `calendarValue` will be reset when blur & focus & open.
+ */
+export declare function useInnerValue<ValueType extends DateType[], DateType extends object = any>(generateConfig: Ref<GenerateConfig<DateType>>, locale: Ref<Locale>, formatList: Ref<FormatType[]>, rangeValue: Ref<boolean | undefined>, order: Ref<boolean | undefined>, defaultValue: Ref<ValueType | undefined>, value: Ref<ValueType | undefined>, onCalendarChange?: (dates: ValueType, dateStrings: [string, string], info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ComputedRef<ValueType>, (val: ValueType) => void, Ref<ValueType, ValueType>, TriggerCalendarChange<ValueType>, () => void];
+export default function useRangeValue<ValueType extends DateType[], DateType extends object = any>(info: ComputedRef<{
+    generateConfig: GenerateConfig<DateType>;
+    locale: Locale;
+    picker: string;
+    allowEmpty: boolean[];
+    order: boolean;
+    onChange?: (dates: ValueType | null, dateStrings: [string, string] | null) => void;
+}>, mergedValue: Ref<ValueType> | ComputedRef<ValueType>, setInnerValue: (nextValue: ValueType) => void, getCalendarValue: () => ValueType, triggerCalendarChange: TriggerCalendarChange<ValueType>, disabled: Ref<boolean[]>, formatList: Ref<FormatType[]>, focused: Ref<boolean>, open: Ref<boolean>, isInvalidateDate: (date: DateType, info?: {
+    from?: DateType;
+    activeIndex: number;
+}) => boolean): readonly [(index: number, needTriggerChange: boolean) => void, (nextValue?: ValueType) => boolean];
+export {};