@v-c/input-number 1.0.7 → 1.1.0

package/dist/InputNumber.d.ts

@@ -1,7 +1,7 @@
 import { ValueType } from '@v-c/mini-decimal';
 import { InputFocusOptions } from '@v-c/util/dist/Dom/focus';
 export type { ValueType };
-type SemanticName = 'root' | 'actions' | 'input' | 'action' | 'prefix' | 'suffix';
+type SemanticName = 'root' | 'actions' | 'input' | 'action' | 'prefix' | 'suffix' | 'clear';
 export interface InputNumberProps<T extends ValueType = ValueType> {
     mode?: 'input' | 'spinner';
     prefixCls?: string;
@@ -19,6 +19,11 @@ export interface InputNumberProps<T extends ValueType = ValueType> {
     readOnly?: boolean;
     prefix?: any;
     suffix?: any;
+    allowClear?: boolean | {
+        clearIcon?: any;
+        disabled?: boolean;
+        label?: string;
+    };
     upHandler?: any;
     downHandler?: any;
     keyboard?: boolean;
@@ -33,6 +38,7 @@ export interface InputNumberProps<T extends ValueType = ValueType> {
     decimalSeparator?: string;
     onInput?: (text: string) => void;
     onChange?: (value: T | null) => void;
+    onClear?: () => void;
     onPressEnter?: (e: KeyboardEvent) => void;
     onStep?: (value: T, info: {
         offset: ValueType;

package/dist/InputNumber.js

@@ -4,7 +4,7 @@ import StepHandler_default from "./StepHandler.js";
 import { getDecupleSteps } from "./utils/numberUtil.js";
 import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watch, watchEffect } from "vue";
 import getMiniDecimal, { getNumberPrecision, num2str, toFixed, validateNumber } from "@v-c/mini-decimal";
-import { clsx } from "@v-c/util";
+import { clsx, isVueRenderable } from "@v-c/util";
 import { triggerFocus } from "@v-c/util/dist/Dom/focus";
 import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
 import omit from "@v-c/util/dist/omit";
@@ -77,6 +77,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 	};
 	const inputValue = shallowRef("");
 	const inputValueRef = shallowRef("");
+	let inputValueUpdateId = 0;
 	const mergedFormatter = (number, userTyping) => {
 		if (props.formatter) return props.formatter(number, {
 			userTyping,
@@ -159,6 +160,8 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 	};
 	const onNextPromise = useFrame_default();
 	const collectInputValue = (inputStr) => {
+		inputValueUpdateId += 1;
+		const currentUpdateId = inputValueUpdateId;
 		recordCursor();
 		inputValueRef.value = inputStr;
 		inputValue.value = inputStr;
@@ -168,6 +171,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		}
 		props.onInput?.(inputStr);
 		onNextPromise(() => {
+			if (currentUpdateId !== inputValueUpdateId) return;
 			let nextInputStr = inputStr;
 			if (!props.parser) nextInputStr = inputStr.replace(/。/g, ".");
 			if (nextInputStr !== inputStr) collectInputValue(nextInputStr);
@@ -274,6 +278,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		}
 	});
 	const onBlur = (e) => {
+		if (e.relatedTarget instanceof Node && rootRef.value?.contains(e.relatedTarget)) return;
 		if (props.changeOnBlur ?? true) flushInputValue(false);
 		focus.value = false;
 		userTypingRef.value = false;
@@ -291,6 +296,26 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		}
 		props.onMouseDown?.(event);
 	};
+	const onClearKeyDown = (event) => {
+		const isStepKey = [
+			"Up",
+			"ArrowUp",
+			"Down",
+			"ArrowDown"
+		].includes(event.key);
+		if (event.key === KeyCodeStr.Enter || props.keyboard !== false && isStepKey) event.stopPropagation();
+	};
+	const onClearClick = () => {
+		userTypingRef.value = false;
+		inputValueRef.value = "";
+		inputValueUpdateId += 1;
+		const emptyValue = getMiniDecimal(null);
+		if (props.value !== void 0) setInputValue(decimalValue.value, false);
+		else if (decimalValue.value.isEmpty()) setInputValue(emptyValue, false);
+		inputRef.value?.focus();
+		triggerValueUpdate(emptyValue, false);
+		props.onClear?.();
+	};
 	watch([
 		() => props.precision,
 		() => props.formatter,
@@ -308,7 +333,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		if (props.formatter) restoreCursor();
 	}, { flush: "post" });
 	return () => {
-		const { prefixCls = defaults.prefixCls, classNames, styles, step = defaults.step, disabled, readOnly, controls = defaults.controls, mode = defaults.mode, placeholder } = props;
+		const { prefixCls = defaults.prefixCls, classNames, styles, step = defaults.step, disabled, readOnly, controls = defaults.controls, mode = defaults.mode, placeholder, allowClear } = props;
 		const mergedPrefixCls = prefixCls || defaults.prefixCls;
 		const { class: className, style, ...restAttrs } = attrs;
 		const mergedClassName = props.className || className;
@@ -321,6 +346,23 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		const suffixNode = slots.suffix?.() ?? props.suffix;
 		const upNode = slots.upHandler?.() ?? props.upHandler;
 		const downNode = slots.downHandler?.() ?? props.downHandler;
+		const clearConfig = allowClear && typeof allowClear === "object" ? allowClear : { disabled: allowClear !== true };
+		const showClear = !disabled && !readOnly && clearConfig.disabled !== true && String(inputValue.value).length > 0;
+		const hasSuffix = isVueRenderable(suffixNode);
+		const clearIconCls = `${mergedPrefixCls}-clear-icon`;
+		const clearNode = allowClear && createVNode("button", {
+			"type": "button",
+			"aria-label": clearConfig.label ?? "Clear",
+			"disabled": !showClear,
+			"class": clsx(clearIconCls, {
+				[`${clearIconCls}-hidden`]: !showClear,
+				[`${clearIconCls}-has-suffix`]: hasSuffix
+			}, classNames?.clear),
+			"style": styles?.clear,
+			"onMousedown": (event) => event.preventDefault(),
+			"onKeydown": onClearKeyDown,
+			"onClick": onClearClick
+		}, [slots.clearIcon?.() ?? clearConfig.clearIcon ?? "✖"]);
 		const upHandlerNode = createVNode(StepHandler_default, {
 			"prefixCls": mergedPrefixCls,
 			"action": "up",
@@ -345,6 +387,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			"value",
 			"prefix",
 			"suffix",
+			"allowClear",
 			"upHandler",
 			"downHandler",
 			"keyboard",
@@ -356,6 +399,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			"precision",
 			"decimalSeparator",
 			"onChange",
+			"onClear",
 			"onInput",
 			"onPressEnter",
 			"onStep",
@@ -408,7 +452,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			}
 		}, [
 			mode === "spinner" && controls && downHandlerNode,
-			!!prefixNode && createVNode("div", {
+			isVueRenderable(prefixNode) && createVNode("div", {
 				"class": clsx(`${mergedPrefixCls}-prefix`, classNames?.prefix),
 				"style": styles?.prefix
 			}, [prefixNode]),
@@ -435,10 +479,10 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 				"onCompositionend": onCompositionEnd,
 				"onBeforeinput": onBeforeInput
 			}, inputAttrs), null),
-			!!suffixNode && createVNode("div", {
+			(allowClear || hasSuffix) && createVNode("div", {
 				"class": clsx(`${mergedPrefixCls}-suffix`, classNames?.suffix),
 				"style": styles?.suffix
-			}, [suffixNode]),
+			}, [clearNode, suffixNode]),
 			mode === "spinner" && controls && upHandlerNode,
 			mode === "input" && controls && createVNode("div", {
 				"class": clsx(`${mergedPrefixCls}-actions`, classNames?.actions),
@@ -519,6 +563,11 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			required: false,
 			default: void 0
 		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		upHandler: {
 			required: false,
 			default: void 0
@@ -572,6 +621,11 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			required: false,
 			default: void 0
 		},
+		onClear: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onPressEnter: {
 			type: Function,
 			required: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/input-number",
   "type": "module",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "",
   "license": "MIT",
   "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/input-number",
@@ -30,9 +30,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/input": "^1.1.1",
+    "@v-c/input": "^1.1.2",
     "@v-c/mini-decimal": "^1.0.1",
-    "@v-c/util": "^1.1.0"
+    "@v-c/util": "^1.2.0"
   },
   "scripts": {
     "build": "vite build",