@v-c/input-number 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/InputNumber.d.ts +2 -2
- package/dist/InputNumber.js +15 -12
- package/dist/StepHandler.js +8 -0
- package/dist/hooks/useCursor.js +15 -2
- package/dist/hooks/useFrame.js +5 -0
- package/dist/index.js +4 -2
- package/dist/utils/numberUtil.js +2 -0
- package/package.json +10 -4
package/dist/InputNumber.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ValueType } from '
|
|
2
|
-
import { InputFocusOptions } from '
|
|
1
|
+
import { ValueType } from '@v-c/mini-decimal';
|
|
2
|
+
import { InputFocusOptions } from '@v-c/util/dist/Dom/focus';
|
|
3
3
|
export type { ValueType };
|
|
4
4
|
type SemanticName = 'root' | 'actions' | 'input' | 'action' | 'prefix' | 'suffix';
|
|
5
5
|
export interface InputNumberProps<T extends ValueType = ValueType> {
|
package/dist/InputNumber.js
CHANGED
|
@@ -8,6 +8,7 @@ import { clsx } from "@v-c/util";
|
|
|
8
8
|
import { triggerFocus } from "@v-c/util/dist/Dom/focus";
|
|
9
9
|
import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
|
|
10
10
|
import omit from "@v-c/util/dist/omit";
|
|
11
|
+
//#region src/InputNumber.tsx
|
|
11
12
|
function _isSlot(s) {
|
|
12
13
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
13
14
|
}
|
|
@@ -27,7 +28,7 @@ function getDecimalIfValidate(value) {
|
|
|
27
28
|
const decimal = getMiniDecimal(value);
|
|
28
29
|
return decimal.isInvalidate() ? null : decimal;
|
|
29
30
|
}
|
|
30
|
-
var
|
|
31
|
+
var InputNumber = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose, emit }) => {
|
|
31
32
|
const focus = shallowRef(false);
|
|
32
33
|
const userTypingRef = shallowRef(false);
|
|
33
34
|
const compositionRef = shallowRef(false);
|
|
@@ -175,7 +176,8 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
175
176
|
userTypingRef.value = false;
|
|
176
177
|
let stepDecimal = getMiniDecimal(shiftKeyRef.value ? getDecupleSteps(props.step ?? 1) : props.step ?? 1);
|
|
177
178
|
if (!up) stepDecimal = stepDecimal.negate();
|
|
178
|
-
const
|
|
179
|
+
const target = (decimalValue.value || getMiniDecimal(0)).add(stepDecimal.toString());
|
|
180
|
+
const updatedValue = triggerValueUpdate(target, false);
|
|
179
181
|
const outValue = getDecimalValue(props.stringMode, updatedValue);
|
|
180
182
|
props.onStep?.(outValue, {
|
|
181
183
|
offset: shiftKeyRef.value ? getDecupleSteps(props.step ?? 1) : props.step ?? 1,
|
|
@@ -269,7 +271,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
269
271
|
if (props.formatter) restoreCursor();
|
|
270
272
|
}, { flush: "post" });
|
|
271
273
|
return () => {
|
|
272
|
-
const { prefixCls = defaults.prefixCls, classNames
|
|
274
|
+
const { prefixCls = defaults.prefixCls, classNames, styles, step = defaults.step, disabled, readOnly, controls = defaults.controls, mode = defaults.mode, placeholder } = props;
|
|
273
275
|
const mergedPrefixCls = prefixCls || defaults.prefixCls;
|
|
274
276
|
const { class: className, style, ...restAttrs } = attrs;
|
|
275
277
|
const mergedClassName = props.className || className;
|
|
@@ -287,7 +289,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
287
289
|
"action": "up",
|
|
288
290
|
"disabled": upDisabled.value,
|
|
289
291
|
"onStep": onInternalStep,
|
|
290
|
-
"className": classNames
|
|
292
|
+
"className": classNames?.action,
|
|
291
293
|
"style": styles?.action
|
|
292
294
|
}, _isSlot(upNode) ? upNode : { default: () => [upNode] });
|
|
293
295
|
const downHandlerNode = createVNode(StepHandler_default, {
|
|
@@ -295,7 +297,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
295
297
|
"action": "down",
|
|
296
298
|
"disabled": downDisabled.value,
|
|
297
299
|
"onStep": onInternalStep,
|
|
298
|
-
"className": classNames
|
|
300
|
+
"className": classNames?.action,
|
|
299
301
|
"style": styles?.action
|
|
300
302
|
}, _isSlot(downNode) ? downNode : { default: () => [downNode] });
|
|
301
303
|
const inputAttrs = omit({ ...restAttrs }, [
|
|
@@ -340,7 +342,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
340
342
|
]);
|
|
341
343
|
return createVNode("div", {
|
|
342
344
|
"ref": rootRef,
|
|
343
|
-
"class": clsx(mergedPrefixCls, `${mergedPrefixCls}-mode-${mode}`, mergedClassName, classNames
|
|
345
|
+
"class": clsx(mergedPrefixCls, `${mergedPrefixCls}-mode-${mode}`, mergedClassName, classNames?.root, {
|
|
344
346
|
[`${mergedPrefixCls}-focused`]: focus.value,
|
|
345
347
|
[`${mergedPrefixCls}-disabled`]: disabled,
|
|
346
348
|
[`${mergedPrefixCls}-readonly`]: readOnly,
|
|
@@ -370,7 +372,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
370
372
|
}, [
|
|
371
373
|
mode === "spinner" && controls && downHandlerNode,
|
|
372
374
|
!!prefixNode && createVNode("div", {
|
|
373
|
-
"class": clsx(`${mergedPrefixCls}-prefix`, classNames
|
|
375
|
+
"class": clsx(`${mergedPrefixCls}-prefix`, classNames?.prefix),
|
|
374
376
|
"style": styles?.prefix
|
|
375
377
|
}, [prefixNode]),
|
|
376
378
|
createVNode("input", mergeProps({
|
|
@@ -381,7 +383,7 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
381
383
|
"aria-valuenow": decimalValue.value.isInvalidate() ? null : decimalValue.value.toString(),
|
|
382
384
|
"step": step,
|
|
383
385
|
"ref": inputRef,
|
|
384
|
-
"class": clsx(`${mergedPrefixCls}-input`, classNames
|
|
386
|
+
"class": clsx(`${mergedPrefixCls}-input`, classNames?.input),
|
|
385
387
|
"style": styles?.input,
|
|
386
388
|
"value": inputValue.value,
|
|
387
389
|
"onInput": onInternalInput,
|
|
@@ -397,18 +399,18 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
397
399
|
"onBeforeinput": onBeforeInput
|
|
398
400
|
}, inputAttrs), null),
|
|
399
401
|
!!suffixNode && createVNode("div", {
|
|
400
|
-
"class": clsx(`${mergedPrefixCls}-suffix`, classNames
|
|
402
|
+
"class": clsx(`${mergedPrefixCls}-suffix`, classNames?.suffix),
|
|
401
403
|
"style": styles?.suffix
|
|
402
404
|
}, [suffixNode]),
|
|
403
405
|
mode === "spinner" && controls && upHandlerNode,
|
|
404
406
|
mode === "input" && controls && createVNode("div", {
|
|
405
|
-
"class": clsx(`${mergedPrefixCls}-actions`, classNames
|
|
407
|
+
"class": clsx(`${mergedPrefixCls}-actions`, classNames?.actions),
|
|
406
408
|
"style": styles?.actions
|
|
407
409
|
}, [upHandlerNode, downHandlerNode])
|
|
408
410
|
]);
|
|
409
411
|
};
|
|
410
412
|
}, {
|
|
411
|
-
props:
|
|
413
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
412
414
|
mode: {
|
|
413
415
|
type: String,
|
|
414
416
|
required: false,
|
|
@@ -638,4 +640,5 @@ var InputNumber_default = /* @__PURE__ */ defineComponent((props, { attrs, slots
|
|
|
638
640
|
inheritAttrs: false,
|
|
639
641
|
emits: ["update:value"]
|
|
640
642
|
});
|
|
641
|
-
|
|
643
|
+
//#endregion
|
|
644
|
+
export { InputNumber as default };
|
package/dist/StepHandler.js
CHANGED
|
@@ -2,7 +2,14 @@ import { createVNode, defineComponent, onUnmounted, ref } from "vue";
|
|
|
2
2
|
import { classNames } from "@v-c/util";
|
|
3
3
|
import raf from "@v-c/util/dist/raf";
|
|
4
4
|
import { filterEmpty } from "@v-c/util/dist/props-util";
|
|
5
|
+
//#region src/StepHandler.tsx
|
|
6
|
+
/**
|
|
7
|
+
* When click and hold on a button - the speed of auto changing the value.
|
|
8
|
+
*/
|
|
5
9
|
var STEP_INTERVAL = 200;
|
|
10
|
+
/**
|
|
11
|
+
* When click and hold on a button - the delay before auto changing the value.
|
|
12
|
+
*/
|
|
6
13
|
var STEP_DELAY = 600;
|
|
7
14
|
var StepHandler_default = /* @__PURE__ */ defineComponent({
|
|
8
15
|
name: "StepHandler",
|
|
@@ -72,4 +79,5 @@ var StepHandler_default = /* @__PURE__ */ defineComponent({
|
|
|
72
79
|
};
|
|
73
80
|
}
|
|
74
81
|
});
|
|
82
|
+
//#endregion
|
|
75
83
|
export { StepHandler_default as default };
|
package/dist/hooks/useCursor.js
CHANGED
|
@@ -1,19 +1,31 @@
|
|
|
1
1
|
import { ref } from "vue";
|
|
2
2
|
import warning from "@v-c/util/dist/warning";
|
|
3
|
+
//#region src/hooks/useCursor.ts
|
|
4
|
+
/**
|
|
5
|
+
* Keep input cursor in the correct position if possible.
|
|
6
|
+
* Is this necessary since we have `formatter` which may mass the content?
|
|
7
|
+
*/
|
|
3
8
|
function useCursor(input, focused) {
|
|
4
9
|
const selectionRef = ref(null);
|
|
5
10
|
function recordCursor() {
|
|
6
11
|
try {
|
|
7
12
|
const { selectionStart: start, selectionEnd: end, value } = input;
|
|
13
|
+
const beforeTxt = value.substring(0, start);
|
|
14
|
+
const afterTxt = value.substring(end);
|
|
8
15
|
selectionRef.value = {
|
|
9
16
|
start,
|
|
10
17
|
end,
|
|
11
18
|
value,
|
|
12
|
-
beforeTxt
|
|
13
|
-
afterTxt
|
|
19
|
+
beforeTxt,
|
|
20
|
+
afterTxt
|
|
14
21
|
};
|
|
15
22
|
} catch (e) {}
|
|
16
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* Restore logic:
|
|
26
|
+
* 1. back string same
|
|
27
|
+
* 2. start string same
|
|
28
|
+
*/
|
|
17
29
|
function restoreCursor() {
|
|
18
30
|
if (input && selectionRef.value && focused) try {
|
|
19
31
|
const { value } = input;
|
|
@@ -33,4 +45,5 @@ function useCursor(input, focused) {
|
|
|
33
45
|
}
|
|
34
46
|
return [recordCursor, restoreCursor];
|
|
35
47
|
}
|
|
48
|
+
//#endregion
|
|
36
49
|
export { useCursor as default };
|
package/dist/hooks/useFrame.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { onUnmounted, ref } from "vue";
|
|
2
2
|
import raf from "@v-c/util/dist/raf";
|
|
3
|
+
//#region src/hooks/useFrame.ts
|
|
4
|
+
/**
|
|
5
|
+
* Always trigger latest once when call multiple time
|
|
6
|
+
*/
|
|
3
7
|
var useFrame_default = () => {
|
|
4
8
|
const idRef = ref(0);
|
|
5
9
|
const cleanUp = () => {
|
|
@@ -13,4 +17,5 @@ var useFrame_default = () => {
|
|
|
13
17
|
});
|
|
14
18
|
};
|
|
15
19
|
};
|
|
20
|
+
//#endregion
|
|
16
21
|
export { useFrame_default as default };
|
package/dist/index.js
CHANGED
package/dist/utils/numberUtil.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { num2str, trimNumber } from "@v-c/mini-decimal";
|
|
2
|
+
//#region src/utils/numberUtil.ts
|
|
2
3
|
function getDecupleSteps(step) {
|
|
3
4
|
const stepStr = typeof step === "number" ? num2str(step) : trimNumber(step).fullStr;
|
|
4
5
|
if (!stepStr.includes(".")) return `${step}0`;
|
|
5
6
|
return trimNumber(stepStr.replace(/(\d)\.(\d)/g, "$1$2.")).fullStr;
|
|
6
7
|
}
|
|
8
|
+
//#endregion
|
|
7
9
|
export { getDecupleSteps };
|
package/package.json
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/input-number",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.6",
|
|
5
5
|
"description": "",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/input-number",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/antdv-next/vue-components.git"
|
|
11
|
+
},
|
|
6
12
|
"publishConfig": {
|
|
7
13
|
"access": "public"
|
|
8
14
|
},
|
|
@@ -24,9 +30,9 @@
|
|
|
24
30
|
"vue": "^3.0.0"
|
|
25
31
|
},
|
|
26
32
|
"dependencies": {
|
|
27
|
-
"@v-c/
|
|
28
|
-
"@v-c/
|
|
29
|
-
"@v-c/
|
|
33
|
+
"@v-c/input": "^1.1.1",
|
|
34
|
+
"@v-c/util": "^1.0.21",
|
|
35
|
+
"@v-c/mini-decimal": "^1.0.1"
|
|
30
36
|
},
|
|
31
37
|
"scripts": {
|
|
32
38
|
"build": "vite build",
|