hongluan-ui
Version:
Hongluan Component Library for Vue 3
464 lines (459 loc) • 18.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
require('../../../directives/index.js');
var index$6 = require('../../input/index.js');
var index$3 = require('../../button/index.js');
var index$4 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
require('../../../utils/index.js');
require('../../../constants/index.js');
var inputNumber = require('./input-number.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var form = require('../../../tokens/form.js');
var types = require('../../../utils/types.js');
var error = require('../../../utils/error.js');
var index$2 = require('../../../hooks/use-consistent-prop/index.js');
var event = require('../../../constants/event.js');
var shared = require('@vue/shared');
var remove = require('../../system-icon/src/remove.js');
var index$5 = require('../../../directives/repeat-click/index.js');
var arrowUp = require('../../system-icon/src/arrow-up.js');
var arrowDown = require('../../system-icon/src/arrow-down.js');
var add = require('../../system-icon/src/add.js');
const __default__ = vue.defineComponent({
name: "InputNumber"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: inputNumber.inputNumberProps,
emits: inputNumber.inputNumberEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { t } = index.useLocale();
const { namespace } = index$1.useNamespace();
const input = vue.ref();
const data = vue.reactive({
currentValue: props.modelValue,
userInput: null
});
const formItem = vue.inject(form.formItemContextKey, {});
const minDisabled = vue.computed(() => types.isNumber(props.modelValue) && props.modelValue <= props.min);
const maxDisabled = vue.computed(() => types.isNumber(props.modelValue) && props.modelValue >= props.max);
const numPrecision = vue.computed(() => {
const stepPrecision = getPrecision(props.step);
if (!types.isUndefined(props.precision)) {
if (stepPrecision > props.precision) {
error.debugWarn("InputNumber", "precision should not be less than the decimal places of step");
}
return props.precision;
} else {
return Math.max(getPrecision(props.modelValue), stepPrecision);
}
});
const { size: inputNumberSize, disabled: inputNumberDisabled, fill: inputNumberFill } = index$2.useConsistentProp();
const displayValue = vue.computed(() => {
if (data.userInput !== null) {
return data.userInput;
}
let currentValue = data.currentValue;
if (lodashUnified.isNil(currentValue))
return "";
if (types.isNumber(currentValue)) {
if (Number.isNaN(currentValue))
return "";
if (!types.isUndefined(props.precision)) {
currentValue = currentValue.toFixed(props.precision);
}
}
return currentValue;
});
const toPrecision = (num, pre) => {
if (types.isUndefined(pre))
pre = numPrecision.value;
if (pre === 0)
return Math.round(num);
let snum = String(num);
const pointPos = snum.indexOf(".");
if (pointPos === -1)
return num;
const nums = snum.replace(".", "").split("");
const datum = nums[pointPos + pre];
if (!datum)
return num;
const length = snum.length;
if (snum.charAt(length - 1) === "5") {
snum = `${snum.slice(0, Math.max(0, length - 1))}6`;
}
return Number.parseFloat(Number(snum).toFixed(pre));
};
const getPrecision = (value) => {
if (lodashUnified.isNil(value))
return 0;
const valueString = value.toString();
const dotPosition = valueString.indexOf(".");
let precision = 0;
if (dotPosition !== -1) {
precision = valueString.length - dotPosition - 1;
}
return precision;
};
const ensurePrecision = (val, coefficient = 1) => {
if (!types.isNumber(val))
return data.currentValue;
return toPrecision(val + props.step * coefficient);
};
const increase = () => {
if (props.readonly || inputNumberDisabled.value || maxDisabled.value)
return;
const value = Number(displayValue.value) || 0;
const newVal = ensurePrecision(value);
setCurrentValue(newVal);
emit(event.INPUT_EVENT, data.currentValue);
setCurrentValueToModelValue();
};
const decrease = () => {
if (props.readonly || inputNumberDisabled.value || minDisabled.value)
return;
const value = Number(displayValue.value) || 0;
const newVal = ensurePrecision(value, -1);
setCurrentValue(newVal);
emit(event.INPUT_EVENT, data.currentValue);
setCurrentValueToModelValue();
};
const verifyValue = (value, update) => {
const { max, min, step, precision, stepStrictly, valueOnClear } = props;
if (max < min) {
error.throwError("InputNumber", "min should not be greater than max.");
}
let newVal = Number(value);
if (lodashUnified.isNil(value) || Number.isNaN(newVal)) {
return null;
}
if (value === "") {
if (valueOnClear === null) {
return null;
}
newVal = shared.isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
}
if (stepStrictly) {
newVal = toPrecision(Math.round(newVal / step) * step, precision);
}
if (!types.isUndefined(precision)) {
newVal = toPrecision(newVal, precision);
}
if (newVal > max || newVal < min) {
newVal = newVal > max ? max : min;
update && emit(event.UPDATE_MODEL_EVENT, newVal);
}
return newVal;
};
const setCurrentValue = (value, emitChange = true) => {
var _a;
const oldVal = data.currentValue;
const newVal = verifyValue(value);
if (!emitChange) {
emit(event.UPDATE_MODEL_EVENT, newVal);
return;
}
if (oldVal === newVal && value)
return;
data.userInput = null;
emit(event.UPDATE_MODEL_EVENT, newVal);
if (oldVal !== newVal) {
emit(event.CHANGE_EVENT, newVal, oldVal);
}
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
}
data.currentValue = newVal;
};
const handleInput = (value) => {
data.userInput = value;
const newVal = value === "" ? null : Number(value);
emit(event.INPUT_EVENT, newVal);
setCurrentValue(newVal, false);
};
const handleInputChange = (value) => {
const newVal = value !== "" ? Number(value) : "";
if (types.isNumber(newVal) && !Number.isNaN(newVal) || value === "") {
setCurrentValue(newVal);
}
setCurrentValueToModelValue();
data.userInput = null;
};
const focus = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
};
const blur = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
};
const handleFocus = (event) => {
emit("focus", event);
};
const handleBlur = (event) => {
var _a;
data.userInput = null;
emit("blur", event);
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.blur).catch((err) => error.debugWarn(err));
}
};
const setCurrentValueToModelValue = () => {
if (data.currentValue !== props.modelValue) {
data.currentValue = props.modelValue;
}
};
const handleWheel = (e) => {
if (document.activeElement === e.target)
e.preventDefault();
};
vue.watch(() => props.modelValue, (value, oldValue) => {
const newValue = verifyValue(value, true);
if (data.userInput === null && newValue !== oldValue) {
data.currentValue = newValue;
}
}, { immediate: true });
vue.onMounted(() => {
var _a;
const { min, max, modelValue } = props;
const innerInput = (_a = input.value) == null ? void 0 : _a.input;
innerInput.setAttribute("role", "spinbutton");
if (Number.isFinite(max)) {
innerInput.setAttribute("aria-valuemax", String(max));
} else {
innerInput.removeAttribute("aria-valuemax");
}
if (Number.isFinite(min)) {
innerInput.setAttribute("aria-valuemin", String(min));
} else {
innerInput.removeAttribute("aria-valuemin");
}
innerInput.setAttribute("aria-valuenow", data.currentValue || data.currentValue === 0 ? String(data.currentValue) : "");
innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value));
if (!types.isNumber(modelValue) && modelValue != null) {
let val = Number(modelValue);
if (Number.isNaN(val)) {
val = null;
}
emit(event.UPDATE_MODEL_EVENT, val);
}
innerInput.addEventListener("wheel", handleWheel, { passive: false });
});
vue.onUpdated(() => {
var _a, _b;
const innerInput = (_a = input.value) == null ? void 0 : _a.input;
innerInput == null ? void 0 : innerInput.setAttribute("aria-valuenow", `${(_b = data.currentValue) != null ? _b : ""}`);
});
expose({
increase,
decrease,
focus,
blur
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(namespace) + "-input-number",
vue.unref(namespace) + "-group",
_ctx.dir,
_ctx.merge ? "merge" : "",
_ctx.deepMerge ? "deep-merge" : "",
_ctx.indent ? "indent" : "",
_ctx.round ? "round" : "",
_ctx.block ? "block" : "",
vue.unref(inputNumberSize) ? vue.unref(inputNumberSize) : "",
_ctx.controlsPosition === "inner" ? "btn-inner" : "",
{ "btn-vertical": ["left", "right"].includes(_ctx.controlsPosition) },
{ "is-disabled": vue.unref(inputNumberDisabled) },
{ "is-without-controls": !_ctx.controls }
]),
style: vue.normalizeStyle([typeof _ctx.indent === "string" ? `--indent:${_ctx.indent}` : "", typeof _ctx.gap === "string" ? `gap: ${_ctx.gap}` : ""]),
onDragstart: vue.withModifiers(() => {
}, ["prevent"])
}, [
_ctx.controls && _ctx.controlsPosition === "initial" || _ctx.controlsPosition === "inner" ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
key: 0,
class: vue.normalizeClass(["group-item", "decrease", _ctx.round ? "round" : "", vue.unref(inputNumberFill) ? "light" : ""]),
size: vue.unref(inputNumberSize),
disabled: vue.unref(minDisabled) || vue.unref(inputNumberDisabled),
"aria-label": vue.unref(t)("hl.inputNumber.decrease")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-decrease", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(remove["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["class", "size", "disabled", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), decrease]
]) : vue.createCommentVNode("v-if", true),
_ctx.controls && _ctx.controlsPosition === "left" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([vue.unref(namespace) + "-group", "btn-group", "vertical", "left", "merge", "indent"])
}, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
class: "group-item increase",
disabled: vue.unref(maxDisabled) || vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
"aria-label": vue.unref(t)("hl.inputNumber.increase")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-increase", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowUp["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["disabled", "size", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), increase]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
class: "group-item decrease",
disabled: vue.unref(minDisabled) || vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
"aria-label": vue.unref(t)("hl.inputNumber.decrease")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-decrease", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowDown["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["disabled", "size", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), decrease]
])
], 2)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$6.HlInput), {
id: _ctx.id,
ref_key: "input",
ref: input,
"native-type": "number",
class: "group-item",
"validate-event": false,
"model-value": vue.unref(displayValue),
step: _ctx.step,
placeholder: _ctx.placeholder,
readonly: _ctx.readonly,
disabled: vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
max: _ctx.max,
min: _ctx.min,
name: _ctx.name,
"aria-label": _ctx.label || _ctx.ariaLabel,
fill: vue.unref(inputNumberFill),
round: _ctx.round,
onKeydown: [
vue.withKeys(vue.withModifiers(increase, ["prevent"]), ["up"]),
vue.withKeys(vue.withModifiers(decrease, ["prevent"]), ["down"])
],
onBlur: handleBlur,
onFocus: handleFocus,
onInput: handleInput,
onChange: handleInputChange
}, vue.createSlots({ _: 2 }, [
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix")
])
} : void 0,
_ctx.$slots.suffix ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix")
])
} : void 0
]), 1032, ["id", "model-value", "step", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "fill", "round", "onKeydown"]),
_ctx.controls && _ctx.controlsPosition === "right" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass([vue.unref(namespace) + "-group", "btn-group", "vertical", "right", "merge", "indent"])
}, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
class: "group-item increase",
disabled: vue.unref(maxDisabled) || vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
"aria-label": vue.unref(t)("hl.inputNumber.increase")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-increase", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowUp["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["disabled", "size", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), increase]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
class: "group-item decrease",
disabled: vue.unref(minDisabled) || vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
"aria-label": vue.unref(t)("hl.inputNumber.decrease")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-increase", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowDown["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["disabled", "size", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), decrease]
])
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.controls && _ctx.controlsPosition === "initial" || _ctx.controlsPosition === "inner" ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$3.HlButton), {
key: 3,
class: vue.normalizeClass(["group-item", "increase", _ctx.round ? "round" : "", vue.unref(inputNumberFill) ? "light" : ""]),
size: vue.unref(inputNumberSize),
disabled: vue.unref(maxDisabled) || vue.unref(inputNumberDisabled),
"aria-label": vue.unref(t)("hl.inputNumber.increase")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon-increase", {}, () => [
vue.createVNode(vue.unref(index$4.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(add["default"]))
]),
_: 1
})
])
]),
_: 3
}, 8, ["class", "size", "disabled", "aria-label"])), [
[vue.unref(index$5.vRepeatClick), increase]
]) : vue.createCommentVNode("v-if", true)
], 46, ["onDragstart"]);
};
}
});
exports["default"] = _sfc_main;
//# sourceMappingURL=input-number2.js.map