@v-c/picker 1.2.2 → 1.3.0

package/dist/PickerInput/Popup/index.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from '@v-c/util/dist/EventInterface';
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, Ref } from 'vue';
 import { RangeTimeProps, SharedPickerProps, SharedTimeProps, ValueDate } from '../../interface';
 import { FooterProps } from './Footer';
 import { PopupPanelProps } from './PopupPanel';
@@ -16,6 +16,12 @@ export type PopupProps<DateType extends object = any, PresetValue = DateType> =
     isInvalid: (date: DateType | DateType[]) => boolean;
     onOk: VoidFunction;
     onPanelMouseDown?: MouseEventHandler;
+    /**
+     * Expose the popup container element so the Picker can tell whether focus
+     * is still inside the popup.
+     * 暴露 popup 容器元素，供 Picker 判断焦点是否仍在 popup 内。
+     */
+    popupContainerRef?: Ref<HTMLDivElement | undefined>;
     classNames?: SharedPickerProps['classNames'];
     styles?: SharedPickerProps['styles'];
 };
@@ -31,6 +37,12 @@ declare const Popup: import('vue').DefineSetupFnComponent<PopupProps<any, any>,
     isInvalid: (date: any) => boolean;
     onOk: VoidFunction;
     onPanelMouseDown?: MouseEventHandler;
+    /**
+     * Expose the popup container element so the Picker can tell whether focus
+     * is still inside the popup.
+     * 暴露 popup 容器元素，供 Picker 判断焦点是否仍在 popup 内。
+     */
+    popupContainerRef?: Ref<HTMLDivElement | undefined>;
     classNames?: SharedPickerProps["classNames"];
     styles?: SharedPickerProps["styles"];
 } & {}, import('vue').PublicProps>;

package/dist/PickerInput/Popup/index.js

@@ -109,7 +109,11 @@ var Popup = /* @__PURE__ */ defineComponent((props) => {
 		const marginLeft = "marginLeft";
 		const marginRight = "marginRight";
 		let renderNode = createVNode("div", {
-			"ref": range ? containerRef : void 0,
+			"ref": (el) => {
+				const node = el ?? void 0;
+				if (range) containerRef.value = node;
+				if (props.popupContainerRef) props.popupContainerRef.value = node;
+			},
 			"onMousedown": onPanelMouseDown,
 			"tabindex": -1,
 			"class": clsx(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
@@ -502,6 +506,11 @@ var Popup = /* @__PURE__ */ defineComponent((props) => {
 			type: Function,
 			required: false,
 			default: void 0
+		},
+		popupContainerRef: {
+			type: Object,
+			required: false,
+			default: void 0
 		}
 	},
 	name: "Popup",

package/dist/PickerInput/RangePicker.js

@@ -7,12 +7,14 @@ import { formatValues } from "../utils/valueUtil.js";
 import useCellRender from "./hooks/useCellRender.js";
 import useFieldsInvalidate from "./hooks/useFieldsInvalidate.js";
 import useFilledProps from "./hooks/useFilledProps.js";
+import useFocusEvents, { isTargetInContainers } from "./hooks/useFocusEvents.js";
+import useFocusLock from "./hooks/useFocusLock.js";
 import useOpen from "./hooks/useOpen.js";
 import usePresets from "./hooks/usePresets.js";
-import useRangeActive from "./hooks/useRangeActive.js";
 import useRangeDisabledDate from "./hooks/useRangeDisabledDate.js";
 import useRangePickerValue from "./hooks/useRangePickerValue.js";
 import useRangeValue, { useInnerValue } from "./hooks/useRangeValue.js";
+import useRangeValueChange from "./hooks/useRangeValueChange.js";
 import useShowNow from "./hooks/useShowNow.js";
 import Popup from "./Popup/index.js";
 import RangeSelector from "./Selector/RangeSelector.js";
@@ -114,22 +116,44 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	};
 	const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, triggerOk] = useInnerValue(generateConfig, locale, formatList, ref(true), ref(false), defaultValue, value, onInternalCalendarChange, onInternalOk);
 	const calendarValue = computed(() => getCalendarValue.value);
-	const [focused, triggerFocus, lastOperation, activeIndex, setActiveIndex, nextActiveIndex, activeIndexList, updateSubmitIndex, hasActiveSubmitValue] = useRangeActive(disabled, allowEmpty, mergedOpen);
-	const onSharedFocus = (event, index) => {
-		triggerFocus(true);
-		onFocus.value?.(event, { range: getActiveRange(index ?? activeIndex.value) });
+	const popupRef = ref();
+	const isInternalPickerElement = (element) => isTargetInContainers(element, [selectorRef.value?.nativeElement, popupRef.value]);
+	const [focused, onFieldFocus, onFieldBlur] = useFocusEvents(isInternalPickerElement, (index, event) => {
+		onFocus.value?.(event, { range: getActiveRange(index) });
+	}, (index, event) => {
+		onBlur.value?.(event, { range: getActiveRange(index) });
+	}, () => {
+		triggerOpen(false);
+	});
+	const [flushSubmit, triggerSubmitChange, resetValue] = useRangeValue(computed(() => ({
+		...fp.value,
+		onChange: (dates, dateStrings) => {
+			fp.value.onChange?.(formatValues(dates, {
+				generateConfig: generateConfig.value,
+				locale: locale.value,
+				valueFormat: valueFormat.value
+			}), dateStrings);
+		}
+	})), mergedValue, setInnerValue, () => getCalendarValue.value, triggerCalendarChange, disabled, formatList, isInvalidateDate);
+	const triggerFieldCalendarChange = (index, date) => {
+		triggerCalendarChange(fillIndex(getCalendarValue.value, index, date));
 	};
-	const onSharedBlur = (event, index) => {
-		triggerFocus(false);
-		onBlur.value?.(event, { range: getActiveRange(index ?? activeIndex.value) });
+	const flushFieldSubmit = (index, needTriggerChange) => {
+		flushSubmit(index, needTriggerChange);
+		if (needTriggerChange) triggerOpen(false, { force: true });
 	};
+	const [rangeValueIndex, activeIndex, forceFocus, triggeredFields, triggerRangeValueChange, resetRangeValueChange] = useRangeValueChange(computed(() => disabled.value.filter((fieldDisabled) => !fieldDisabled).length), needConfirm, allowEmpty, () => getCalendarValue.value, triggerFieldCalendarChange, flushFieldSubmit, resetValue);
+	useFocusLock(rangeValueIndex, forceFocus, selectorRef, popupRef, triggerOpen);
+	watch(mergedOpen, (open) => {
+		if (!open) triggerRangeValueChange(rangeValueIndex.value ?? activeIndex.value, "popupClose");
+	});
 	/** Used for Popup panel */
 	const mergedShowTime = computed(() => {
 		if (!showTime.value) return null;
 		const { disabledTime } = showTime.value;
 		const proxyDisabledTime = disabledTime ? (date) => {
 			const range = getActiveRange(activeIndex.value);
-			const fromDate = getFromDate(calendarValue.value, activeIndexList.value, activeIndex.value);
+			const fromDate = getFromDate(calendarValue.value, triggeredFields.value, activeIndex.value);
 			return disabledTime(date, range, { from: fromDate });
 		} : void 0;
 		return {
@@ -147,19 +171,9 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	const internalMode = computed(() => mergedMode.value === "date" && mergedShowTime.value ? "datetime" : mergedMode.value);
 	const multiplePanel = computed(() => internalMode.value === picker.value && internalMode.value !== "time");
 	const mergedShowNow = useShowNow(picker, mergedMode, showNow, showToday, ref(true));
-	const [flushSubmit, triggerSubmitChange] = useRangeValue(computed(() => ({
-		...fp.value,
-		onChange: (dates, dateStrings) => {
-			fp.value.onChange?.(formatValues(dates, {
-				generateConfig: generateConfig.value,
-				locale: locale.value,
-				valueFormat: valueFormat.value
-			}), dateStrings);
-		}
-	})), mergedValue, setInnerValue, () => getCalendarValue.value, triggerCalendarChange, disabled, formatList, focused, mergedOpen, isInvalidateDate);
-	const mergedDisabledDate = useRangeDisabledDate(calendarValue, disabled, activeIndexList, generateConfig, locale, disabledDate);
+	const mergedDisabledDate = useRangeDisabledDate(calendarValue, disabled, activeIndex, triggeredFields, generateConfig, locale, disabledDate);
 	const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate(calendarValue, isInvalidateDate, allowEmpty);
-	const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(generateConfig, locale, calendarValue, modes, mergedOpen, activeIndex, internalPicker, multiplePanel, defaultPickerValue, pickerValue, computed(() => mergedShowTime.value?.defaultOpenValue), onPickerValueChange, minDate, maxDate);
+	const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(generateConfig, locale, calendarValue, modes, mergedOpen, focused, activeIndex, internalPicker, multiplePanel, defaultPickerValue, pickerValue, computed(() => mergedShowTime.value?.defaultOpenValue), onPickerValueChange, minDate, maxDate);
 	const triggerModeChange = (nextPickerValue, nextMode, triggerEvent) => {
 		const clone = fillIndex(modes.value, activeIndex.value, nextMode);
 		if (clone[0] !== modes.value[0] || clone[1] !== modes.value[1]) setModes(clone);
@@ -176,15 +190,8 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	* - Selector: enter key
 	* - Panel: OK button
 	*/
-	const triggerPartConfirm = (date, skipFocus) => {
-		let nextValue = calendarValue.value;
-		if (date) nextValue = fillCalendarValue(date, activeIndex.value);
-		updateSubmitIndex(activeIndex.value);
-		const nextIndex = nextActiveIndex(nextValue);
-		triggerCalendarChange(nextValue);
-		flushSubmit(activeIndex.value, nextIndex === null);
-		if (nextIndex === null) triggerOpen(false, { force: true });
-		else if (!skipFocus) selectorRef.value?.focus({ index: nextIndex });
+	const triggerPartConfirm = (date, source = "confirm") => {
+		triggerRangeValueChange(activeIndex.value, source, date ?? void 0);
 	};
 	const onSelectorClick = (event) => {
 		const rootNode = event.target.getRootNode();
@@ -198,6 +205,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 		});
 	};
 	const onSelectorClear = () => {
+		resetRangeValueChange();
 		triggerSubmitChange(null);
 		triggerOpen(false, { force: true });
 		fp.value.onClear?.();
@@ -235,34 +243,28 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	};
 	const onPanelFocus = (event) => {
 		triggerOpen(true);
-		onSharedFocus(event);
-	};
-	const onPanelMouseDown = () => {
-		lastOperation("panel");
+		onFieldFocus(activeIndex.value, "panel", event);
 	};
 	const onSelectorChange = (date, index) => {
-		const clone = fillCalendarValue(date, index);
-		triggerCalendarChange(clone);
+		triggerRangeValueChange(index, "input", date);
 	};
 	const onSelectorInputChange = () => {
-		lastOperation("input");
+		triggerRangeValueChange(activeIndex.value, "input");
 	};
 	const onSelectorBlur = (event, index) => {
-		triggerOpen(false);
-		if (!needConfirm.value && lastOperation() === "input") {
-			const nextIndex = nextActiveIndex(calendarValue.value);
-			flushSubmit(activeIndex.value, nextIndex === null);
-		}
-		onSharedBlur(event, index);
+		onFieldBlur(index, "input", event);
 	};
 	const onSelectorKeyDown = (event, preventDefault) => {
-		if (event.key === "Tab") triggerPartConfirm(null, true);
+		if (event.key === "Tab") triggerPartConfirm(null, "keyboard-submit-weak");
+		else if (event.key === "Escape") {
+			triggerRangeValueChange(activeIndex.value, "esc");
+			triggerOpen(false);
+		}
 		onKeyDown.value?.(event, preventDefault);
 	};
 	const onPanelSelect = (date) => {
-		const clone = fillIndex(calendarValue.value, activeIndex.value, date);
-		triggerCalendarChange(clone);
-		if (!needConfirm.value && !complexPicker.value && internalPicker.value === internalMode.value) triggerPartConfirm(date);
+		const panelFinished = !complexPicker.value && internalPicker.value === internalMode.value;
+		triggerRangeValueChange(activeIndex.value, panelFinished ? "panel-final" : "panel-intermediate", date);
 	};
 	const onPopupClose = () => {
 		triggerOpen(false);
@@ -306,29 +308,10 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	], () => {
 		if (mergedOpen.value && activeIndex.value !== void 0) triggerModeChange(null, picker.value, false);
 	}, { flush: "post" });
-	watch(mergedOpen, () => {
-		const lastOp = lastOperation();
-		if (!mergedOpen.value && lastOp === "input") {
-			triggerOpen(false);
-			triggerPartConfirm(null, true);
-		}
-		if (!mergedOpen.value && complexPicker.value && !needConfirm.value && lastOp === "panel") {
-			triggerOpen(true);
-			triggerPartConfirm();
-		}
-	}, { flush: "post" });
 	const onSelectorFocus = (event, index) => {
-		const activeListLen = activeIndexList.value.length;
-		const lastActiveIndex = activeIndexList.value[activeListLen - 1];
-		if (activeListLen && lastActiveIndex !== index && needConfirm.value && !allowEmpty.value[lastActiveIndex] && !hasActiveSubmitValue(lastActiveIndex) && calendarValue.value[lastActiveIndex]) {
-			selectorRef.value?.focus({ index: lastActiveIndex });
-			return;
-		}
-		lastOperation("input");
+		triggerRangeValueChange(index, "field-switch");
 		triggerOpen(true, { inherit: true });
-		if (activeIndex.value !== index && mergedOpen.value && !needConfirm.value && complexPicker.value) triggerPartConfirm(null, true);
-		setActiveIndex(index);
-		onSharedFocus(event, index);
+		onFieldFocus(index, "input", event);
 	};
 	if (process.env.NODE_ENV !== "production") {
 		const isIndexEmpty = (index) => {
@@ -353,7 +336,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 			onFocus: onSelectorFocus,
 			onBlur: onSelectorBlur,
 			onKeyDown: onSelectorKeyDown,
-			onSubmit: triggerPartConfirm,
+			onSubmit: () => triggerPartConfirm(null, "keyboard-submit"),
 			value: hoverValues.value,
 			maskFormat: maskFormat.value,
 			onChange: onSelectorChange,
@@ -373,6 +356,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 		};
 		const panel = createVNode(Popup, {
 			...panelProps.value,
+			popupContainerRef: popupRef,
 			showNow: mergedShowNow.value,
 			showTime: mergedShowTime.value,
 			range: true,
@@ -380,8 +364,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 			activeInfo: activeInfo.value,
 			disabledDate: mergedDisabledDate,
 			onFocus: onPanelFocus,
-			onBlur: onSharedBlur,
-			onPanelMouseDown,
+			onBlur: (event) => onFieldBlur(activeIndex.value, "panel", event),
 			picker: picker.value,
 			mode: mergedMode.value,
 			internalMode: internalMode.value,
@@ -397,7 +380,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
 			hoverValue: hoverValues.value,
 			onHover: onPanelHover,
 			needConfirm: needConfirm.value,
-			onSubmit: triggerPartConfirm,
+			onSubmit: (date) => triggerPartConfirm(date, "confirm"),
 			onOk: triggerOk,
 			presets: presetList.value,
 			onPresetHover,

package/dist/PickerInput/Selector/ClearIcon.d.ts

@@ -0,0 +1,11 @@
+import { VueNode } from '@v-c/util/dist/type';
+export interface ClearIconProps {
+    icon?: VueNode;
+    onClear: VoidFunction;
+}
+/**
+ * Rendered as a real `<button>` rather than a `<span role="button">` so it is
+ * focusable and activatable by keyboard, and announced with a label.
+ */
+declare const ClearIcon: import('vue').DefineSetupFnComponent<ClearIconProps, {}, {}, ClearIconProps & {}, import('vue').PublicProps>;
+export default ClearIcon;

package/dist/PickerInput/Selector/ClearIcon.js

@@ -0,0 +1,53 @@
+import { usePickerContext } from "../context.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+//#region src/PickerInput/Selector/ClearIcon.tsx
+/**
+* Rendered as a real `<button>` rather than a `<span role="button">` so it is
+* focusable and activatable by keyboard, and announced with a label.
+*/
+var ClearIcon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const ctx = usePickerContext();
+	return () => {
+		const { prefixCls, classNames, styles, locale } = ctx.value;
+		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+		const mergedAttrStyle = attrStyle && typeof attrStyle === "object" ? attrStyle : {};
+		return createVNode("button", mergeProps(restAttrs, {
+			"type": "button",
+			"aria-label": locale.clear,
+			"class": clsx(`${prefixCls}-clear`, classNames.suffix, attrClass),
+			"style": {
+				...styles.suffix || {},
+				...mergedAttrStyle
+			},
+			"onMousedown": (e) => {
+				e.preventDefault();
+			},
+			"onClick": (e) => {
+				e.stopPropagation();
+				props.onClear();
+			}
+		}), [props.icon]);
+	};
+}, {
+	props: {
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onClear: { required: true }
+	},
+	name: "ClearIcon",
+	inheritAttrs: false
+});
+//#endregion
+export { ClearIcon as default };

package/dist/PickerInput/Selector/Icon.d.ts

@@ -1,11 +1,6 @@
 import { VueNode } from '@v-c/util/dist/type';
 export interface IconProps {
     icon?: VueNode;
-    type: 'suffix' | 'clear';
 }
 declare const Icon: import('vue').DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, import('vue').PublicProps>;
 export default Icon;
-export interface ClearIconProps extends Omit<IconProps, 'type'> {
-    onClear: VoidFunction;
-}
-export declare const ClearIcon: import('vue').DefineSetupFnComponent<ClearIconProps, {}, {}, ClearIconProps & {}, import('vue').PublicProps>;

package/dist/PickerInput/Selector/Icon.js

@@ -5,13 +5,13 @@ import { clsx } from "@v-c/util";
 var Icon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	const ctx = usePickerContext();
 	return () => {
-		const { icon, type } = props;
+		const { icon } = props;
 		if (!icon) return null;
 		const { prefixCls, classNames, styles } = ctx.value;
 		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
 		const mergedAttrStyle = attrStyle && typeof attrStyle === "object" ? attrStyle : {};
 		return createVNode("span", mergeProps(restAttrs, {
-			"class": clsx(`${prefixCls}-${type}`, classNames.suffix, attrClass),
+			"class": clsx(`${prefixCls}-suffix`, classNames.suffix, attrClass),
 			"style": {
 				...styles.suffix || {},
 				...mergedAttrStyle
@@ -19,62 +19,21 @@ var Icon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		}), [icon]);
 	};
 }, {
-	props: {
-		icon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		type: {
-			type: String,
-			required: true
-		}
-	},
+	props: { icon: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	} },
 	name: "Icon",
 	inheritAttrs: false
 });
-var ClearIcon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
-	return () => {
-		return createVNode(Icon, mergeProps(attrs, {
-			"icon": props.icon,
-			"type": "clear",
-			"role": "button",
-			"onMousedown": (e) => {
-				e.preventDefault();
-			},
-			"onClick": (e) => {
-				e.stopPropagation();
-				props.onClear();
-			}
-		}), null);
-	};
-}, {
-	props: {
-		onClear: { required: true },
-		icon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		}
-	},
-	name: "ClearIcon",
-	inheritAttrs: false
-});
 //#endregion
-export { ClearIcon, Icon as default };
+export { Icon as default };

package/dist/PickerInput/Selector/Input.js

@@ -1,8 +1,8 @@
 import { usePickerContext } from "../context.js";
 import { leftPad } from "../../utils/miscUtil.js";
+import Icon from "./Icon.js";
 import { getMaskRange, raf } from "./util.js";
 import useLockEffect from "../hooks/useLockEffect.js";
-import Icon from "./Icon.js";
 import MaskFormat from "./MaskFormat.js";
 import { computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, toRef, watch } from "vue";
 import { clsx } from "@v-c/util";
@@ -221,10 +221,7 @@ var Input = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
 				"class": classNames.value.input,
 				"style": styles.value.input
 			}), null),
-			createVNode(Icon, {
-				"type": "suffix",
-				"icon": props.suffixIcon
-			}, null),
+			createVNode(Icon, { "icon": props.suffixIcon }, null),
 			props.clearIcon
 		]);
 	};

package/dist/PickerInput/Selector/RangeSelector.js

@@ -1,7 +1,8 @@
 import { usePickerContext } from "../context.js";
+import ClearIcon from "./ClearIcon.js";
 import useInputProps from "./hooks/useInputHooks.js";
 import useRootProps from "./hooks/useRootProps.js";
-import Icon, { ClearIcon } from "./Icon.js";
+import Icon from "./Icon.js";
 import Input from "./Input.js";
 import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
 import { clsx } from "@v-c/util";
@@ -24,6 +25,12 @@ var RangeSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose }) =
 	const getInput = (index) => [inputStartRef, inputEndRef][index]?.value;
 	expose({
 		nativeElement: rootRef,
+		get startInput() {
+			return inputStartRef.value?.inputElement;
+		},
+		get endInput() {
+			return inputEndRef.value?.inputElement;
+		},
 		focus: (options) => {
 			if (typeof options === "object") {
 				const { index = 0, ...rest } = options || {};
@@ -118,10 +125,7 @@ var RangeSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose }) =
 				"class": `${prefixCls.value}-active-bar`,
 				"style": activeBarStyle.value
 			}, null),
-			createVNode(Icon, {
-				"type": "suffix",
-				"icon": suffixIcon
-			}, null),
+			createVNode(Icon, { "icon": suffixIcon }, null),
 			showClear.value && createVNode(ClearIcon, {
 				"icon": clearIcon,
 				"onClear": onClear

package/dist/PickerInput/Selector/SingleSelector/index.d.ts

@@ -2,7 +2,7 @@ import { InternalMode, SelectorProps } from '../../../interface';
 export interface SingleSelectorProps<DateType extends object = any> extends SelectorProps<DateType> {
     id?: string;
     value?: DateType[];
-    onChange: (date: DateType[]) => void;
+    onChange: (date: DateType[], source?: 'input' | 'remove') => void;
     internalPicker: InternalMode;
     disabled?: boolean;
     /** All the field show as `placeholder` */

package/dist/PickerInput/Selector/SingleSelector/index.js

@@ -1,8 +1,9 @@
 import { usePickerContext } from "../../context.js";
 import { isSame } from "../../../utils/dateUtil.js";
+import ClearIcon from "../ClearIcon.js";
 import useInputProps from "../hooks/useInputHooks.js";
 import useRootProps from "../hooks/useRootProps.js";
-import Icon, { ClearIcon } from "../Icon.js";
+import Icon from "../Icon.js";
 import Input from "../Input.js";
 import MultipleDates from "./MultipleDates.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, ref } from "vue";
@@ -27,12 +28,11 @@ var SingleSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose })
 	});
 	const rootProps = useRootProps(props);
 	const onSingleChange = (date) => {
-		props.onChange?.([date]);
+		props.onChange?.([date], "input");
 	};
 	const onMultipleRemove = (date) => {
 		const nextValues = (props.value || []).filter((oriDate) => oriDate && !isSame(props.generateConfig, props.locale, oriDate, date, props.internalPicker));
-		props.onChange?.(nextValues);
-		if (!props.open) props.onSubmit?.();
+		props.onChange?.(nextValues, props.open ? "input" : "remove");
 	};
 	const [getInputProps, getText] = useInputProps(computed(() => ({
 		...props,
@@ -65,10 +65,7 @@ var SingleSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose })
 				"autofocus": autoFocus,
 				"tabindex": tabIndex
 			}, null),
-			createVNode(Icon, {
-				"type": "suffix",
-				"icon": suffixIcon
-			}, null),
+			createVNode(Icon, { "icon": suffixIcon }, null),
 			showClear && createVNode(ClearIcon, {
 				"icon": clearIcon,
 				"onClear": onClear