@v-c/input-number 1.0.5 → 1.0.7

package/dist/InputNumber.d.ts

@@ -1,5 +1,5 @@
-import { ValueType } from '../../mini-decimal/src';
-import { InputFocusOptions } from '../../util/src/Dom/focus';
+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';
 export interface InputNumberProps<T extends ValueType = ValueType> {

package/dist/InputNumber.js

@@ -8,9 +8,24 @@ import { clsx } 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";
+//#region src/InputNumber.tsx
 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,
@@ -27,7 +42,7 @@ function getDecimalIfValidate(value) {
 	const decimal = getMiniDecimal(value);
 	return decimal.isInvalidate() ? null : decimal;
 }
-var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose, emit }) => {
+var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose, emit }) => {
 	const focus = shallowRef(false);
 	const userTypingRef = shallowRef(false);
 	const compositionRef = shallowRef(false);
@@ -175,7 +190,8 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 		userTypingRef.value = false;
 		let stepDecimal = getMiniDecimal(shiftKeyRef.value ? getDecupleSteps(props.step ?? 1) : props.step ?? 1);
 		if (!up) stepDecimal = stepDecimal.negate();
-		const updatedValue = triggerValueUpdate((decimalValue.value || getMiniDecimal(0)).add(stepDecimal.toString()), false);
+		const target = (decimalValue.value || getMiniDecimal(0)).add(stepDecimal.toString());
+		const updatedValue = triggerValueUpdate(target, false);
 		const outValue = getDecimalValue(props.stringMode, updatedValue);
 		props.onStep?.(outValue, {
 			offset: shiftKeyRef.value ? getDecupleSteps(props.step ?? 1) : props.step ?? 1,
@@ -225,20 +241,43 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 		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 (props.changeOnBlur ?? true) flushInputValue(false);
 		focus.value = false;
 		userTypingRef.value = false;
+		resetWheel();
 		props.onBlur?.(e);
 	};
 	const onFocus = (e) => {
@@ -269,7 +308,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 		if (props.formatter) restoreCursor();
 	}, { flush: "post" });
 	return () => {
-		const { prefixCls = defaults.prefixCls, classNames: classNames$1, 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 } = props;
 		const mergedPrefixCls = prefixCls || defaults.prefixCls;
 		const { class: className, style, ...restAttrs } = attrs;
 		const mergedClassName = props.className || className;
@@ -287,7 +326,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 			"action": "up",
 			"disabled": upDisabled.value,
 			"onStep": onInternalStep,
-			"className": classNames$1?.action,
+			"className": classNames?.action,
 			"style": styles?.action
 		}, _isSlot(upNode) ? upNode : { default: () => [upNode] });
 		const downHandlerNode = createVNode(StepHandler_default, {
@@ -295,7 +334,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 			"action": "down",
 			"disabled": downDisabled.value,
 			"onStep": onInternalStep,
-			"className": classNames$1?.action,
+			"className": classNames?.action,
 			"style": styles?.action
 		}, _isSlot(downNode) ? downNode : { default: () => [downNode] });
 		const inputAttrs = omit({ ...restAttrs }, [
@@ -340,7 +379,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 		]);
 		return createVNode("div", {
 			"ref": rootRef,
-			"class": clsx(mergedPrefixCls, `${mergedPrefixCls}-mode-${mode}`, mergedClassName, classNames$1?.root, {
+			"class": clsx(mergedPrefixCls, `${mergedPrefixCls}-mode-${mode}`, mergedClassName, classNames?.root, {
 				[`${mergedPrefixCls}-focused`]: focus.value,
 				[`${mergedPrefixCls}-disabled`]: disabled,
 				[`${mergedPrefixCls}-readonly`]: readOnly,
@@ -370,7 +409,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 		}, [
 			mode === "spinner" && controls && downHandlerNode,
 			!!prefixNode && createVNode("div", {
-				"class": clsx(`${mergedPrefixCls}-prefix`, classNames$1?.prefix),
+				"class": clsx(`${mergedPrefixCls}-prefix`, classNames?.prefix),
 				"style": styles?.prefix
 			}, [prefixNode]),
 			createVNode("input", mergeProps({
@@ -381,7 +420,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 				"aria-valuenow": decimalValue.value.isInvalidate() ? null : decimalValue.value.toString(),
 				"step": step,
 				"ref": inputRef,
-				"class": clsx(`${mergedPrefixCls}-input`, classNames$1?.input),
+				"class": clsx(`${mergedPrefixCls}-input`, classNames?.input),
 				"style": styles?.input,
 				"value": inputValue.value,
 				"onInput": onInternalInput,
@@ -397,18 +436,18 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 				"onBeforeinput": onBeforeInput
 			}, inputAttrs), null),
 			!!suffixNode && createVNode("div", {
-				"class": clsx(`${mergedPrefixCls}-suffix`, classNames$1?.suffix),
+				"class": clsx(`${mergedPrefixCls}-suffix`, classNames?.suffix),
 				"style": styles?.suffix
 			}, [suffixNode]),
 			mode === "spinner" && controls && upHandlerNode,
 			mode === "input" && controls && createVNode("div", {
-				"class": clsx(`${mergedPrefixCls}-actions`, classNames$1?.actions),
+				"class": clsx(`${mergedPrefixCls}-actions`, classNames?.actions),
 				"style": styles?.actions
 			}, [upHandlerNode, downHandlerNode])
 		]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		mode: {
 			type: String,
 			required: false,
@@ -638,4 +677,5 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
 	inheritAttrs: false,
 	emits: ["update:value"]
 });
-export { InputNumber_default as default };
+//#endregion
+export { InputNumber as default };

package/dist/StepHandler.js

@@ -2,7 +2,14 @@ import { createVNode, defineComponent, onUnmounted, ref } from "vue";
 import { classNames } from "@v-c/util";
 import raf from "@v-c/util/dist/raf";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/StepHandler.tsx
+/**
+* When click and hold on a button - the speed of auto changing the value.
+*/
 var STEP_INTERVAL = 200;
+/**
+* When click and hold on a button - the delay before auto changing the value.
+*/
 var STEP_DELAY = 600;
 var StepHandler_default = /* @__PURE__ */ defineComponent({
 	name: "StepHandler",
@@ -72,4 +79,5 @@ var StepHandler_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+//#endregion
 export { StepHandler_default as default };

package/dist/hooks/useCursor.js

@@ -1,19 +1,31 @@
 import { ref } from "vue";
 import warning from "@v-c/util/dist/warning";
+//#region src/hooks/useCursor.ts
+/**
+* Keep input cursor in the correct position if possible.
+* Is this necessary since we have `formatter` which may mass the content?
+*/
 function useCursor(input, focused) {
 	const selectionRef = ref(null);
 	function recordCursor() {
 		try {
 			const { selectionStart: start, selectionEnd: end, value } = input;
+			const beforeTxt = value.substring(0, start);
+			const afterTxt = value.substring(end);
 			selectionRef.value = {
 				start,
 				end,
 				value,
-				beforeTxt: value.substring(0, start),
-				afterTxt: value.substring(end)
+				beforeTxt,
+				afterTxt
 			};
 		} catch (e) {}
 	}
+	/**
+	* Restore logic:
+	*  1. back string same
+	*  2. start string same
+	*/
 	function restoreCursor() {
 		if (input && selectionRef.value && focused) try {
 			const { value } = input;
@@ -33,4 +45,5 @@ function useCursor(input, focused) {
 	}
 	return [recordCursor, restoreCursor];
 }
+//#endregion
 export { useCursor as default };

package/dist/hooks/useFrame.js

@@ -1,5 +1,9 @@
 import { onUnmounted, ref } from "vue";
 import raf from "@v-c/util/dist/raf";
+//#region src/hooks/useFrame.ts
+/**
+* Always trigger latest once when call multiple time
+*/
 var useFrame_default = () => {
 	const idRef = ref(0);
 	const cleanUp = () => {
@@ -13,4 +17,5 @@ var useFrame_default = () => {
 		});
 	};
 };
+//#endregion
 export { useFrame_default as default };

package/dist/index.js

@@ -1,3 +1,5 @@
-import InputNumber_default from "./InputNumber.js";
-var src_default = InputNumber_default;
+import InputNumber from "./InputNumber.js";
+//#region src/index.ts
+var src_default = InputNumber;
+//#endregion
 export { src_default as default };

package/dist/utils/numberUtil.js

@@ -1,7 +1,9 @@
 import { num2str, trimNumber } from "@v-c/mini-decimal";
+//#region src/utils/numberUtil.ts
 function getDecupleSteps(step) {
 	const stepStr = typeof step === "number" ? num2str(step) : trimNumber(step).fullStr;
 	if (!stepStr.includes(".")) return `${step}0`;
 	return trimNumber(stepStr.replace(/(\d)\.(\d)/g, "$1$2.")).fullStr;
 }
+//#endregion
 export { getDecupleSteps };

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@v-c/input-number",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
+  "license": "MIT",
+  "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/input-number",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antdv-next/vue-components.git"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -24,9 +30,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
+    "@v-c/input": "^1.1.1",
     "@v-c/mini-decimal": "^1.0.1",
-    "@v-c/input": "^1.0.2",
-    "@v-c/util": "^1.0.18"
+    "@v-c/util": "^1.1.0"
   },
   "scripts": {
     "build": "vite build",