| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420 |
- import { defineComponent, ref, reactive, computed, watch, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, withModifiers, withDirectives, withKeys, renderSlot, createVNode, withCtx, createBlock, createCommentVNode, createSlots } from 'vue';
- import { isNil } from 'lodash-unified';
- import { ElInput } from '../../input/index.mjs';
- import { ElIcon } from '../../icon/index.mjs';
- import { ArrowDown, Minus, ArrowUp, Plus } from '@element-plus/icons-vue';
- import { inputNumberProps, inputNumberEmits } from './input-number.mjs';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { vRepeatClick } from '../../../directives/repeat-click/index.mjs';
- import { getEventCode, getEventKey } from '../../../utils/dom/event.mjs';
- import { useLocale } from '../../../hooks/use-locale/index.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { useFormItem } from '../../form/src/hooks/use-form-item.mjs';
- import { isNumber, isUndefined } from '../../../utils/types.mjs';
- import { debugWarn, throwError } from '../../../utils/error.mjs';
- import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
- import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
- import { EVENT_CODE } from '../../../constants/aria.mjs';
- import { isString } from '@vue/shared';
- const _hoisted_1 = ["aria-label"];
- const _hoisted_2 = ["aria-label"];
- const _sfc_main = defineComponent({
- ...{
- name: "ElInputNumber"
- },
- __name: "input-number",
- props: inputNumberProps,
- emits: inputNumberEmits,
- setup(__props, { expose: __expose, emit: __emit }) {
- const props = __props;
- const emit = __emit;
- const { t } = useLocale();
- const ns = useNamespace("input-number");
- const input = ref();
- const data = reactive({
- currentValue: props.modelValue,
- userInput: null
- });
- const { formItem } = useFormItem();
- const minDisabled = computed(
- () => isNumber(props.modelValue) && props.modelValue <= props.min
- );
- const maxDisabled = computed(
- () => isNumber(props.modelValue) && props.modelValue >= props.max
- );
- const numPrecision = computed(() => {
- const stepPrecision = getPrecision(props.step);
- if (!isUndefined(props.precision)) {
- if (stepPrecision > props.precision) {
- 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 controlsAtRight = computed(() => {
- return props.controls && props.controlsPosition === "right";
- });
- const inputNumberSize = useFormSize();
- const inputNumberDisabled = useFormDisabled();
- const displayValue = computed(() => {
- if (data.userInput !== null) {
- return data.userInput;
- }
- let currentValue = data.currentValue;
- if (isNil(currentValue))
- return "";
- if (isNumber(currentValue)) {
- if (Number.isNaN(currentValue))
- return "";
- if (!isUndefined(props.precision)) {
- currentValue = currentValue.toFixed(props.precision);
- }
- }
- return currentValue;
- });
- const toPrecision = (num, pre) => {
- if (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 (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 (!isNumber(val))
- return data.currentValue;
- if (val >= Number.MAX_SAFE_INTEGER && coefficient === 1) {
- debugWarn(
- "InputNumber",
- "The value has reached the maximum safe integer limit."
- );
- return val;
- } else if (val <= Number.MIN_SAFE_INTEGER && coefficient === -1) {
- debugWarn(
- "InputNumber",
- "The value has reached the minimum safe integer limit."
- );
- return val;
- }
- return toPrecision(val + props.step * coefficient);
- };
- const handleKeydown = (event) => {
- const code = getEventCode(event);
- const key = getEventKey(event);
- if (props.disabledScientific && ["e", "E"].includes(key)) {
- event.preventDefault();
- return;
- }
- switch (code) {
- case EVENT_CODE.up: {
- event.preventDefault();
- increase();
- break;
- }
- case EVENT_CODE.down: {
- event.preventDefault();
- decrease();
- break;
- }
- }
- };
- const increase = () => {
- if (props.readonly || inputNumberDisabled.value || maxDisabled.value)
- return;
- const value = Number(displayValue.value) || 0;
- const newVal = ensurePrecision(value);
- setCurrentValue(newVal);
- emit(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(INPUT_EVENT, data.currentValue);
- setCurrentValueToModelValue();
- };
- const verifyValue = (value, update) => {
- const { max, min, step, precision, stepStrictly, valueOnClear } = props;
- if (max < min) {
- throwError("InputNumber", "min should not be greater than max.");
- }
- let newVal = Number(value);
- if (isNil(value) || Number.isNaN(newVal)) {
- return null;
- }
- if (value === "") {
- if (valueOnClear === null) {
- return null;
- }
- newVal = isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
- }
- if (stepStrictly) {
- newVal = toPrecision(
- Math.round(toPrecision(newVal / step)) * step,
- precision
- );
- if (newVal !== value) {
- update && emit(UPDATE_MODEL_EVENT, newVal);
- }
- }
- if (!isUndefined(precision)) {
- newVal = toPrecision(newVal, precision);
- }
- if (newVal > max || newVal < min) {
- newVal = newVal > max ? max : min;
- update && emit(UPDATE_MODEL_EVENT, newVal);
- }
- return newVal;
- };
- const setCurrentValue = (value, emitChange = true) => {
- var _a;
- const oldVal = data.currentValue;
- const newVal = verifyValue(value);
- if (!emitChange) {
- emit(UPDATE_MODEL_EVENT, newVal);
- return;
- }
- data.userInput = null;
- if (oldVal === newVal && value)
- return;
- emit(UPDATE_MODEL_EVENT, newVal);
- if (oldVal !== newVal) {
- emit(CHANGE_EVENT, newVal, oldVal);
- }
- if (props.validateEvent) {
- (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn(err));
- }
- data.currentValue = newVal;
- };
- const handleInput = (value) => {
- data.userInput = value;
- const newVal = value === "" ? null : Number(value);
- emit(INPUT_EVENT, newVal);
- setCurrentValue(newVal, false);
- };
- const handleInputChange = (value) => {
- const newVal = value !== "" ? Number(value) : "";
- if (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, _b;
- data.userInput = null;
- if (data.currentValue === null && ((_a = input.value) == null ? void 0 : _a.input)) {
- input.value.input.value = "";
- }
- emit("blur", event);
- if (props.validateEvent) {
- (_b = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _b.call(formItem, "blur").catch((err) => debugWarn(err));
- }
- };
- const setCurrentValueToModelValue = () => {
- if (data.currentValue !== props.modelValue) {
- data.currentValue = props.modelValue;
- }
- };
- const handleWheel = (e) => {
- if (document.activeElement === e.target)
- e.preventDefault();
- };
- watch(
- () => props.modelValue,
- (value, oldValue) => {
- const newValue = verifyValue(value, true);
- if (data.userInput === null && newValue !== oldValue) {
- data.currentValue = newValue;
- }
- },
- { immediate: true }
- );
- watch(
- () => props.precision,
- () => {
- data.currentValue = verifyValue(props.modelValue);
- }
- );
- 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 (!isNumber(modelValue) && modelValue != null) {
- let val = Number(modelValue);
- if (Number.isNaN(val)) {
- val = null;
- }
- emit(UPDATE_MODEL_EVENT, val);
- }
- innerInput.addEventListener("wheel", handleWheel, { passive: false });
- });
- 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({
- focus,
- blur
- });
- return (_ctx, _cache) => {
- return openBlock(), createElementBlock(
- "div",
- {
- class: normalizeClass([
- unref(ns).b(),
- unref(ns).m(unref(inputNumberSize)),
- unref(ns).is("disabled", unref(inputNumberDisabled)),
- unref(ns).is("without-controls", !_ctx.controls),
- unref(ns).is("controls-right", controlsAtRight.value),
- unref(ns).is(_ctx.align, !!_ctx.align)
- ]),
- onDragstart: _cache[0] || (_cache[0] = withModifiers(() => {
- }, ["prevent"]))
- },
- [
- _ctx.controls ? withDirectives((openBlock(), createElementBlock("span", {
- key: 0,
- role: "button",
- "aria-label": unref(t)("el.inputNumber.decrease"),
- class: normalizeClass([unref(ns).e("decrease"), unref(ns).is("disabled", minDisabled.value)]),
- onKeydown: withKeys(decrease, ["enter"])
- }, [
- renderSlot(_ctx.$slots, "decrease-icon", {}, () => [
- createVNode(unref(ElIcon), null, {
- default: withCtx(() => [
- controlsAtRight.value ? (openBlock(), createBlock(unref(ArrowDown), { key: 0 })) : (openBlock(), createBlock(unref(Minus), { key: 1 }))
- ]),
- _: 1
- })
- ])
- ], 42, _hoisted_1)), [
- [unref(vRepeatClick), decrease]
- ]) : createCommentVNode("v-if", true),
- _ctx.controls ? withDirectives((openBlock(), createElementBlock("span", {
- key: 1,
- role: "button",
- "aria-label": unref(t)("el.inputNumber.increase"),
- class: normalizeClass([unref(ns).e("increase"), unref(ns).is("disabled", maxDisabled.value)]),
- onKeydown: withKeys(increase, ["enter"])
- }, [
- renderSlot(_ctx.$slots, "increase-icon", {}, () => [
- createVNode(unref(ElIcon), null, {
- default: withCtx(() => [
- controlsAtRight.value ? (openBlock(), createBlock(unref(ArrowUp), { key: 0 })) : (openBlock(), createBlock(unref(Plus), { key: 1 }))
- ]),
- _: 1
- })
- ])
- ], 42, _hoisted_2)), [
- [unref(vRepeatClick), increase]
- ]) : createCommentVNode("v-if", true),
- createVNode(unref(ElInput), {
- id: _ctx.id,
- ref_key: "input",
- ref: input,
- type: "number",
- step: _ctx.step,
- "model-value": displayValue.value,
- placeholder: _ctx.placeholder,
- readonly: _ctx.readonly,
- disabled: unref(inputNumberDisabled),
- size: unref(inputNumberSize),
- max: _ctx.max,
- min: _ctx.min,
- name: _ctx.name,
- "aria-label": _ctx.ariaLabel,
- "validate-event": false,
- inputmode: _ctx.inputmode,
- onKeydown: handleKeydown,
- onBlur: handleBlur,
- onFocus: handleFocus,
- onInput: handleInput,
- onChange: handleInputChange
- }, createSlots({
- _: 2
- }, [
- _ctx.$slots.prefix ? {
- name: "prefix",
- fn: withCtx(() => [
- renderSlot(_ctx.$slots, "prefix")
- ]),
- key: "0"
- } : void 0,
- _ctx.$slots.suffix ? {
- name: "suffix",
- fn: withCtx(() => [
- renderSlot(_ctx.$slots, "suffix")
- ]),
- key: "1"
- } : void 0
- ]), 1032, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "inputmode"])
- ],
- 34
- );
- };
- }
- });
- var InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/input-number/src/input-number.vue"]]);
- export { InputNumber as default };
- //# sourceMappingURL=input-number2.mjs.map
|