@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
229 lines (228 loc) • 8.36 kB
JavaScript
;
const vue = require("vue");
const global = require("../_utils/global.js");
const index = require("../input/index.js");
const inputNumber = require("./input-number.js");
const is = require("../_utils/is.js");
const types = require("./types.js");
const NumberControl_vue_vue_type_script_setup_true_lang = require("./NumberControl.vue.js");
const provide = require("../form/provide.js");
const provide$1 = require("../_components/provide.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OInputNumber",
props: types.inputNumberProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "pressEnter", "plus", "minus"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const inputValue = vue.ref(inputNumber.number2string(props.modelValue ?? props.defaultValue));
const realValue = vue.ref(props.modelValue ?? props.defaultValue ?? NaN);
let lastValue = realValue.value;
const formItemInjection = vue.inject(provide.formItemInjectKey, null);
const color = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
} else {
return props.color;
}
});
vue.watch(
() => props.modelValue,
(val) => {
if (realValue.value !== val) {
inputValue.value = inputNumber.number2string(val);
realValue.value = val ?? 0;
lastValue = realValue.value;
}
}
);
const validate = (value) => {
const val = inputNumber.string2number(value);
let valid = inputNumber.isValidNumber(val, props.min, props.max);
if (valid) {
valid = is.isFunction(props.validate) ? props.validate(val) : true;
}
return valid;
};
const valueOnInvalidChange = (_, last) => {
return last;
};
const emitChange = () => {
var _a, _b;
if (realValue.value !== lastValue) {
emits("change", realValue.value);
lastValue = realValue.value;
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
}
};
const emitUpdateValue = () => {
emits("update:modelValue", realValue.value);
};
const onInput = (evt) => {
var _a, _b;
emits("input", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const onFocus = (evt) => {
var _a, _b;
emits("focus", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (evt) => {
var _a, _b;
emits("blur", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onPressEnter = (evt) => {
emits("pressEnter", evt);
};
const onChange = (value) => {
realValue.value = inputNumber.string2number(value);
if (isNaN(realValue.value) && is.isNumber(props.clearValue)) {
realValue.value = props.clearValue;
emitUpdateValue();
}
inputValue.value = inputNumber.number2string(realValue.value);
emitChange();
};
const onUpdateModelValue = (value) => {
inputValue.value = value;
realValue.value = inputNumber.string2number(value);
emitUpdateValue();
};
const addable = vue.computed(() => {
if (props.disabled) {
return false;
}
if (!is.isUndefined(props.max) && props.max <= realValue.value) {
return false;
}
return true;
});
const reducible = vue.computed(() => {
if (props.disabled) {
return false;
}
if (!is.isUndefined(props.min) && props.min >= realValue.value) {
return false;
}
return true;
});
const onControlEvent = (type, e) => {
if (props.disabled) {
return;
}
let v = Number.isNaN(realValue.value) ? 0 : realValue.value;
if (type === "plus") {
v += props.step;
} else if (type === "minus") {
v -= props.step;
}
v = inputNumber.correctValue(v, lastValue, props.min, props.max);
realValue.value = v;
inputValue.value = inputNumber.number2string(v);
emitUpdateValue();
emitChange();
if (type === "plus") {
emits("plus", v, e);
} else if (type === "minus") {
emits("minus", v, e);
}
};
vue.provide(provide$1.innerComponentInjectKey, {
isInnerInput: true
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index.OInput), {
"model-value": inputValue.value,
class: vue.normalizeClass(["o-input-number", [props.autoWidth ? "" : `o-input-number-size-${props.size || vue.unref(global.defaultSize)}`]]),
validate,
valueOnInvalidChange,
size: props.size,
placeholder: props.placeholder,
color: color.value,
variant: props.variant,
round: props.round,
disabled: props.disabled,
readonly: props.readonly,
clearable: props.clearable,
"auto-width": props.autoWidth,
format: props.format,
"input-id": props.inputId,
type: "text",
onInput,
onBlur,
onFocus,
onPressEnter,
onChange,
"onUpdate:modelValue": onUpdateModelValue
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
["both", "left"].includes(props.controls) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.createVNode(NumberControl_vue_vue_type_script_setup_true_lang, {
class: vue.normalizeClass({ "o-input-control-left": props.controls === "both" }),
type: props.controls === "left" ? "both" : "minus",
addable: addable.value,
reducible: reducible.value,
onMinus: _cache[0] || (_cache[0] = (e) => onControlEvent("minus", e)),
onPlus: _cache[1] || (_cache[1] = (e) => onControlEvent("plus", e))
}, {
plus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "plus")
]),
minus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "minus")
]),
_: 3
/* FORWARDED */
}, 8, ["class", "type", "addable", "reducible"])
]),
key: "0"
} : void 0,
["both", "right"].includes(props.controls) ? {
name: "append",
fn: vue.withCtx(() => [
vue.createVNode(NumberControl_vue_vue_type_script_setup_true_lang, {
class: vue.normalizeClass({ "o-input-control-right": props.controls === "both" }),
type: props.controls === "right" ? "both" : "plus",
addable: addable.value,
reducible: reducible.value,
onMinus: _cache[2] || (_cache[2] = (e) => onControlEvent("minus", e)),
onPlus: _cache[3] || (_cache[3] = (e) => onControlEvent("plus", e))
}, {
plus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "plus")
]),
minus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "minus")
]),
_: 3
/* FORWARDED */
}, 8, ["class", "type", "addable", "reducible"])
]),
key: "1"
} : void 0,
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix")
]),
key: "2"
} : void 0,
_ctx.$slots.suffix ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix")
]),
key: "3"
} : void 0
]), 1032, ["model-value", "class", "size", "placeholder", "color", "variant", "round", "disabled", "readonly", "clearable", "auto-width", "format", "input-id"]);
};
}
});
module.exports = _sfc_main;