tdesign-vue
Version:
329 lines (325 loc) • 11.4 kB
JavaScript
/**
* tdesign v1.12.1
* (c) 2025 tdesign
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { toRefs, ref, computed, watch } from '@vue/composition-api';
import useCommonClassName from '../hooks/useCommonClassName.js';
import { useVModel } from '../hooks/useVModel.js';
import { canReduceNumber, canAddNumber, formatUnCompleteNumber, getMaxOrMinValidateResult, getStepValue, formatThousandths, canInputNumber, canSetValue } from '../_common/js/input-number/number.js';
import { useFormDisabled } from '../hooks/useFormDisabled.js';
import { largeNumberToFixed } from '../_common/js/input-number/large-number.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import 'lodash-es';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-c44a474d.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-d639fbd7.js';
import 'dayjs';
import '../_chunks/dep-3c66615e.js';
import '../config-provider/type.js';
import '../_common/js/global-config/t.js';
import '../_common/js/log/index.js';
import '../_common/js/log/log.js';
function useInputNumber(props, context) {
var _useCommonClassName = useCommonClassName(),
classPrefix = _useCommonClassName.classPrefix,
sizeClassNames = _useCommonClassName.sizeClassNames,
statusClassNames = _useCommonClassName.statusClassNames;
var _toRefs = toRefs(props),
value = _toRefs.value,
max = _toRefs.max,
min = _toRefs.min;
var _useVModel = useVModel(value, props.defaultValue, props.onChange, "change"),
_useVModel2 = _slicedToArray(_useVModel, 2),
tValue = _useVModel2[0],
setTValue = _useVModel2[1];
var inputRef = ref();
var userInput = ref("");
var _useFormDisabled = useFormDisabled(),
formDisabled = _useFormDisabled.formDisabled;
var tDisabled = computed(function () {
return props.disabled || formDisabled.value;
});
var isError = ref();
var disabledReduce = computed(function () {
return tDisabled.value || !canReduceNumber(tValue.value, props.min, props.largeNumber);
});
var disabledAdd = computed(function () {
return tDisabled.value || !canAddNumber(tValue.value, props.max, props.largeNumber);
});
var wrapClasses = computed(function () {
return ["".concat(classPrefix.value, "-input-number"), sizeClassNames[props.size], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, statusClassNames.disabled, tDisabled.value), "".concat(classPrefix.value, "-is-controls-right"), props.theme === "column"), "".concat(classPrefix.value, "-input-number--").concat(props.theme), props.theme), "".concat(classPrefix.value, "-input-number--auto-width"), props.autoWidth)];
});
var reduceClasses = computed(function () {
return ["".concat(classPrefix.value, "-input-number__decrease"), _defineProperty({}, statusClassNames.disabled, disabledReduce.value)];
});
var addClasses = computed(function () {
return ["".concat(classPrefix.value, "-input-number__increase"), _defineProperty({}, statusClassNames.disabled, disabledAdd.value)];
});
var getUserInput = function getUserInput(value2) {
var _inputRef$value;
if (!value2 && value2 !== 0) return "";
var inputStr = value2 || value2 === 0 ? String(value2) : "";
if (!((_inputRef$value = inputRef.value) !== null && _inputRef$value !== void 0 && (_inputRef$value = _inputRef$value.$el) !== null && _inputRef$value !== void 0 && _inputRef$value.contains(document.activeElement))) {
var num = formatUnCompleteNumber(inputStr, {
decimalPlaces: props.decimalPlaces,
largeNumber: props.largeNumber,
isToFixed: true
});
inputStr = num || num === 0 ? String(num) : "";
if (props.format) {
inputStr = String(props.format(value2, {
fixedNumber: inputStr
}));
}
}
return inputStr;
};
watch(tValue, function (val) {
var largeNumber = props.largeNumber,
decimalPlaces = props.decimalPlaces;
var inputValue = [void 0, null].includes(val) ? "" : String(val);
if (!largeNumber && !Number.isNaN(userInput.value)) {
if (parseFloat(userInput.value) !== val) {
userInput.value = getUserInput(inputValue);
}
var fixedNumber = Number(largeNumberToFixed(inputValue, decimalPlaces, largeNumber));
if (decimalPlaces !== void 0 && ![void 0, null].includes(val) && Number(fixedNumber) !== Number(tValue.value)) {
setTValue(fixedNumber, {
type: "props",
e: void 0
});
}
}
if (largeNumber) {
userInput.value = getUserInput(inputValue);
if (decimalPlaces !== void 0 && largeNumberToFixed(inputValue, decimalPlaces, largeNumber) !== val) {
setTValue(userInput.value, {
type: "props",
e: void 0
});
}
}
}, {
immediate: true
});
watch([tValue, max, min], function () {
var _props$onValidate;
if ([void 0, "", null].includes(tValue.value)) return;
var max2 = props.max,
min2 = props.min,
largeNumber = props.largeNumber;
var error = getMaxOrMinValidateResult({
value: tValue.value,
largeNumber: largeNumber,
max: max2,
min: min2
});
isError.value = error;
(_props$onValidate = props.onValidate) === null || _props$onValidate === void 0 || _props$onValidate.call(props, {
error: error
});
context.emit("validate", {
error: error
});
}, {
immediate: true
});
var handleStepValue = function handleStepValue(op) {
var newValue = getStepValue({
op: op,
step: props.step,
max: props.max,
min: props.min,
lastValue: tValue.value,
largeNumber: props.largeNumber
});
var largeNumber = props.largeNumber,
max2 = props.max,
min2 = props.min;
var overLimit = getMaxOrMinValidateResult({
value: newValue,
largeNumber: largeNumber,
max: max2,
min: min2
});
return {
overLimit: overLimit,
newValue: newValue
};
};
var handleReduce = function handleReduce(e) {
if (disabledReduce.value || props.readonly) return;
var r = handleStepValue("reduce");
if (r.overLimit && !props.allowInputOverLimit) return;
setTValue(r.newValue, {
type: "reduce",
e: e
});
};
var handleAdd = function handleAdd(e) {
if (disabledAdd.value || props.readonly) return;
var r = handleStepValue("add");
if (r.overLimit && !props.allowInputOverLimit) return;
setTValue(r.newValue, {
type: "add",
e: e
});
};
var onInnerInputChange = function onInnerInputChange(inputValue, _ref4) {
var e = _ref4.e;
var val = formatThousandths(inputValue);
if (!canInputNumber(val, props.largeNumber)) return;
userInput.value = val;
if (props.largeNumber) {
setTValue(val, {
type: "input",
e: e
});
return;
}
if (canSetValue(String(val), Number(tValue.value))) {
var newVal = val === "" ? void 0 : Number(val);
setTValue(newVal, {
type: "input",
e: e
});
}
};
var emitBlur = function emitBlur(value2, ctx) {
var _props$onBlur;
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, value2, ctx);
context.emit("blur", value2, ctx);
};
var handleBlur = function handleBlur(value2, ctx) {
var largeNumber = props.largeNumber,
max2 = props.max,
min2 = props.min,
decimalPlaces = props.decimalPlaces;
if (!props.allowInputOverLimit && tValue.value !== void 0) {
var r = getMaxOrMinValidateResult({
value: tValue.value,
largeNumber: largeNumber,
max: max2,
min: min2
});
if (r === "below-minimum") {
setTValue(min2, {
type: "blur",
e: ctx.e
});
emitBlur(min2, ctx);
return;
}
if (r === "exceed-maximum") {
setTValue(max2, {
type: "blur",
e: ctx.e
});
emitBlur(max2, ctx);
return;
}
}
var newValue = formatUnCompleteNumber(String(value2), {
decimalPlaces: decimalPlaces,
largeNumber: largeNumber
});
userInput.value = getUserInput(newValue);
if (newValue !== tValue.value) {
setTValue(newValue, {
type: "blur",
e: ctx.e
});
}
emitBlur(newValue, ctx);
};
var handleFocus = function handleFocus(value2, ctx) {
var _props$onFocus;
userInput.value = tValue.value || tValue.value === 0 ? String(tValue.value) : "";
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, value2, ctx);
context.emit("focus", value2, ctx);
};
var handleKeydown = function handleKeydown(value2, ctx) {
var _props$onKeydown;
var e = ctx.e;
var keyEvent = {
ArrowUp: handleAdd,
ArrowDown: handleReduce
};
var code = e.code || e.key;
if (keyEvent[code] !== void 0) {
keyEvent[code](e);
}
(_props$onKeydown = props.onKeydown) === null || _props$onKeydown === void 0 || _props$onKeydown.call(props, value2, ctx);
context.emit("keydown", value2, ctx);
};
var handleKeyup = function handleKeyup(value2, ctx) {
var _props$onKeyup;
(_props$onKeyup = props.onKeyup) === null || _props$onKeyup === void 0 || _props$onKeyup.call(props, value2, ctx);
context.emit("keyup", value2, ctx);
};
var handleKeypress = function handleKeypress(value2, ctx) {
var _props$onKeypress;
(_props$onKeypress = props.onKeypress) === null || _props$onKeypress === void 0 || _props$onKeypress.call(props, value2, ctx);
context.emit("keypress", value2, ctx);
};
var handleEnter = function handleEnter(value2, ctx) {
var _props$onEnter;
userInput.value = getUserInput(value2);
var newValue = formatUnCompleteNumber(value2, {
decimalPlaces: props.decimalPlaces,
largeNumber: props.largeNumber
});
(_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props, newValue, ctx);
context.emit("enter", newValue, ctx);
};
var handleClear = function handleClear(_ref5) {
var e = _ref5.e;
setTValue(void 0, {
type: "clear",
e: e
});
userInput.value = "";
};
var focus = function focus() {
inputRef.value.focus();
};
var blur = function blur() {
inputRef.value.blur();
};
var listeners = {
blur: handleBlur,
focus: handleFocus,
keydown: handleKeydown,
keyup: handleKeyup,
keypress: handleKeypress,
enter: handleEnter,
click: focus,
clear: handleClear
};
return {
classPrefix: classPrefix,
wrapClasses: wrapClasses,
reduceClasses: reduceClasses,
addClasses: addClasses,
tDisabled: tDisabled,
isError: isError,
listeners: listeners,
userInput: userInput,
tValue: tValue,
inputRef: inputRef,
formDisabled: formDisabled,
focus: focus,
blur: blur,
handleReduce: handleReduce,
handleAdd: handleAdd,
onInnerInputChange: onInnerInputChange
};
}
export { useInputNumber as default };
//# sourceMappingURL=useInputNumber.js.map