@v-c/input-number 1.0.6 → 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";
@@ -12,6 +12,20 @@ import omit from "@v-c/util/dist/omit";
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
+/** Accumulated wheel distance that adds up to a single step. */
+var WHEEL_STEP_DISTANCE = 100;
+var WHEEL_LINE_HEIGHT = 40;
+var WHEEL_PAGE_HEIGHT = 800;
+/** Idle gap after which a new wheel gesture starts from scratch. */
+var WHEEL_DELTA_RESET_INTERVAL = 200;
+/** Normalize `deltaY` to pixels — browsers may report it in lines or pages. */
+function getWheelDeltaY(event) {
+	switch (event.deltaMode) {
+		case 1: return event.deltaY * WHEEL_LINE_HEIGHT;
+		case 2: return event.deltaY * WHEEL_PAGE_HEIGHT;
+		default: return event.deltaY;
+	}
+}
 var defaults = {
 	prefixCls: "vc-input-number",
 	step: 1,
@@ -63,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,
@@ -145,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;
@@ -154,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);
@@ -227,20 +245,44 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 		shiftKeyRef.value = false;
 		props.onKeyUp?.(event);
 	};
+	let wheelDelta = 0;
+	let wheelTimestamp = 0;
+	const resetWheel = () => {
+		wheelDelta = 0;
+		wheelTimestamp = 0;
+	};
+	const onInternalWheel = (event) => {
+		const delta = getWheelDeltaY(event);
+		if (!delta) return;
+		const eventTimestamp = event.timeStamp || Date.now();
+		if (eventTimestamp - wheelTimestamp > WHEEL_DELTA_RESET_INTERVAL) wheelDelta = 0;
+		wheelTimestamp = eventTimestamp;
+		if (wheelDelta && Math.sign(wheelDelta) !== Math.sign(delta)) wheelDelta = 0;
+		wheelDelta += delta;
+		if (Math.abs(wheelDelta) >= WHEEL_STEP_DISTANCE) {
+			onInternalStep(wheelDelta < 0, "wheel");
+			wheelDelta -= Math.sign(wheelDelta) * WHEEL_STEP_DISTANCE;
+		}
+	};
 	watchEffect((onCleanup) => {
 		if (props.changeOnWheel && focus.value && inputRef.value) {
 			const onWheel = (event) => {
-				onInternalStep(event.deltaY < 0, "wheel");
+				onInternalWheel(event);
 				event.preventDefault();
 			};
 			inputRef.value.addEventListener("wheel", onWheel, { passive: false });
-			onCleanup(() => inputRef.value?.removeEventListener("wheel", onWheel));
+			onCleanup(() => {
+				inputRef.value?.removeEventListener("wheel", onWheel);
+				resetWheel();
+			});
 		}
 	});
 	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;
+		resetWheel();
 		props.onBlur?.(e);
 	};
 	const onFocus = (e) => {
@@ -254,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,
@@ -271,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;
@@ -284,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",
@@ -308,6 +387,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			"value",
 			"prefix",
 			"suffix",
+			"allowClear",
 			"upHandler",
 			"downHandler",
 			"keyboard",
@@ -319,6 +399,7 @@ var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose
 			"precision",
 			"decimalSeparator",
 			"onChange",
+			"onClear",
 			"onInput",
 			"onPressEnter",
 			"onStep",
@@ -371,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]),
@@ -398,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),
@@ -482,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
@@ -535,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.6",
+  "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/util": "^1.0.21",
-    "@v-c/mini-decimal": "^1.0.1"
+    "@v-c/input": "^1.1.2",
+    "@v-c/mini-decimal": "^1.0.1",
+    "@v-c/util": "^1.2.0"
   },
   "scripts": {
     "build": "vite build",