xdesign-vue-next
Version:
XDesign Component for vue-next
320 lines (312 loc) • 11.8 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var hooks_useCommonClassName = require('../hooks/useCommonClassName.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var _common_js_inputNumber_number = require('../_common/js/input-number/number.js');
var form_hooks = require('../form/hooks.js');
var _common_js_inputNumber_largeNumber = require('../_common/js/input-number/large-number.js');
require('../config-provider/useConfig.js');
require('lodash/isFunction');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('lodash/kebabCase');
require('lodash/isUndefined');
require('lodash/isNumber');
require('../_common/js/log/log.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
function useInputNumber(props) {
var _useCommonClassName = hooks_useCommonClassName["default"](),
classPrefix = _useCommonClassName.classPrefix,
sizeClassNames = _useCommonClassName.sizeClassNames,
statusClassNames = _useCommonClassName.statusClassNames;
var _toRefs = vue.toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue,
max = _toRefs.max,
min = _toRefs.min;
var _useVModel = hooks_useVModel["default"](value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
tValue = _useVModel2[0],
setTValue = _useVModel2[1];
var inputRef = vue.ref();
var userInput = vue.ref("");
var tDisabled = form_hooks.useFormDisabled();
var isError = vue.ref();
var disabledReduce = vue.computed(function () {
return tDisabled.value || !_common_js_inputNumber_number.canReduceNumber(tValue.value, props.min, props.largeNumber);
});
var disabledAdd = vue.computed(function () {
return tDisabled.value || !_common_js_inputNumber_number.canAddNumber(tValue.value, props.max, props.largeNumber);
});
var wrapClasses = vue.computed(function () {
var _ref;
return ["".concat(classPrefix.value, "-input-number"), sizeClassNames[props.size], (_ref = {}, _defineProperty__default["default"](_ref, statusClassNames.disabled, tDisabled.value), _defineProperty__default["default"](_ref, "".concat(classPrefix.value, "-is-controls-right"), props.theme === "column"), _defineProperty__default["default"](_ref, "".concat(classPrefix.value, "-input-number--").concat(props.theme), props.theme), _defineProperty__default["default"](_ref, "".concat(classPrefix.value, "-input-number--auto-width"), props.autoWidth), _ref)];
});
var reduceClasses = vue.computed(function () {
return ["".concat(classPrefix.value, "-input-number__decrease"), _defineProperty__default["default"]({}, statusClassNames.disabled, disabledReduce.value)];
});
var addClasses = vue.computed(function () {
return ["".concat(classPrefix.value, "-input-number__increase"), _defineProperty__default["default"]({}, 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.inputRef) !== null && _inputRef$value !== void 0 && _inputRef$value.contains(document.activeElement))) {
var num = _common_js_inputNumber_number.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;
};
vue.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(_common_js_inputNumber_largeNumber.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 && _common_js_inputNumber_largeNumber.largeNumberToFixed(inputValue, decimalPlaces, largeNumber) !== val) {
setTValue(userInput.value, {
type: "props",
e: void 0
});
}
}
}, {
immediate: true
});
vue.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 = _common_js_inputNumber_number.getMaxOrMinValidateResult({
value: tValue.value,
largeNumber: largeNumber,
max: max2,
min: min2
});
isError.value = error;
(_props$onValidate = props.onValidate) === null || _props$onValidate === void 0 ? void 0 : _props$onValidate.call(props, {
error: error
});
}, {
immediate: true
});
var handleStepValue = function handleStepValue(op) {
var newValue = _common_js_inputNumber_number.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 = _common_js_inputNumber_number.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 = _common_js_inputNumber_number.formatThousandths(inputValue);
if (!_common_js_inputNumber_number.canInputNumber(val, props.largeNumber)) return;
userInput.value = val;
if (props.largeNumber) {
setTValue(val, {
type: "input",
e: e
});
return;
}
if (_common_js_inputNumber_number.canSetValue(String(val), Number(tValue.value))) {
var newVal = val === "" ? void 0 : Number(val);
setTValue(newVal, {
type: "input",
e: e
});
}
};
var handleBlur = function handleBlur(value2, ctx) {
var _props$onBlur;
var largeNumber = props.largeNumber,
max2 = props.max,
min2 = props.min,
decimalPlaces = props.decimalPlaces;
if (!props.allowInputOverLimit && tValue.value !== void 0) {
var r = _common_js_inputNumber_number.getMaxOrMinValidateResult({
value: tValue.value,
largeNumber: largeNumber,
max: max2,
min: min2
});
if (r === "below-minimum") {
setTValue(min2, {
type: "blur",
e: ctx.e
});
return;
}
if (r === "exceed-maximum") {
setTValue(max2, {
type: "blur",
e: ctx.e
});
return;
}
}
var newValue = _common_js_inputNumber_number.formatUnCompleteNumber(value2, {
decimalPlaces: decimalPlaces,
largeNumber: largeNumber
});
userInput.value = getUserInput(newValue);
if (newValue !== tValue.value) {
setTValue(newValue, {
type: "blur",
e: ctx.e
});
}
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, 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 ? void 0 : _props$onFocus.call(props, value2, ctx);
};
var handleKeydown = function handleKeydown(value2, ctx) {
var _props$onKeydown;
if (tDisabled.value) return;
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 ? void 0 : _props$onKeydown.call(props, value2, ctx);
};
var handleKeyup = function handleKeyup(value2, ctx) {
var _props$onKeyup;
(_props$onKeyup = props.onKeyup) === null || _props$onKeyup === void 0 ? void 0 : _props$onKeyup.call(props, value2, ctx);
};
var handleKeypress = function handleKeypress(value2, ctx) {
var _props$onKeypress;
(_props$onKeypress = props.onKeypress) === null || _props$onKeypress === void 0 ? void 0 : _props$onKeypress.call(props, value2, ctx);
};
var handleEnter = function handleEnter(value2, ctx) {
var _props$onEnter;
userInput.value = getUserInput(value2);
var newValue = _common_js_inputNumber_number.formatUnCompleteNumber(value2, {
decimalPlaces: props.decimalPlaces,
largeNumber: props.largeNumber
});
if (newValue !== value2 && String(newValue) !== value2) {
setTValue(newValue, {
type: "enter",
e: ctx.e
});
}
(_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 ? void 0 : _props$onEnter.call(props, newValue, ctx);
};
var focus = function focus() {
inputRef.value.focus();
};
var blur = function blur() {
inputRef.value.blur();
};
var listeners = {
onBlur: handleBlur,
onFocus: handleFocus,
onKeydown: handleKeydown,
onKeyup: handleKeyup,
onKeypress: handleKeypress,
onEnter: handleEnter,
onClick: focus
};
return {
classPrefix: classPrefix,
wrapClasses: wrapClasses,
reduceClasses: reduceClasses,
addClasses: addClasses,
tDisabled: tDisabled,
isError: isError,
listeners: listeners,
userInput: userInput,
tValue: tValue,
inputRef: inputRef,
focus: focus,
blur: blur,
handleReduce: handleReduce,
handleAdd: handleAdd,
onInnerInputChange: onInnerInputChange
};
}
exports["default"] = useInputNumber;
//# sourceMappingURL=useInputNumber.js.map