comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
110 lines (109 loc) • 4.06 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/input-number.css");
require("../../form-common.css");
const type = require("../../form/src/type.js");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const validate = require("../../../hooks/validate.js");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = { class: "cu-input-number__content" };
const _hoisted_2 = ["min", "max", "disabled", "value"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuInputNumber"
},
__name: "main",
props: main_props.inputNumberProps,
emits: main_props.inputNumberEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { itemValidate } = validate.useItemValidate();
const { globalSize } = config.useGlobal();
const form = vue.inject(type.FORM_PROVIDE, void 0);
const currentSize = vue.computed(() => {
return props.size ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
});
const currentValue = vue.ref(props.modelValue);
function change(e) {
currentValue.value = Number(e.target.value);
validateValue();
emit("update:modelValue", currentValue.value);
emit("change", currentValue.value);
itemValidate("change");
}
function validateValue() {
if (typescript.isNumber(props.min) && currentValue.value < props.min) {
currentValue.value = props.min;
}
if (typescript.isNumber(props.max) && currentValue.value > props.max) {
currentValue.value = props.max;
}
}
function valuePlus() {
if (props.disabled) return;
if (typescript.isNumber(props.max) && currentValue.value > props.max) return;
currentValue.value += props.step;
validateValue();
emit("update:modelValue", currentValue.value);
emit("change", currentValue.value);
itemValidate("change");
}
function valueMinus() {
if (props.disabled) return;
if (typescript.isNumber(props.min) && currentValue.value < props.min) return;
currentValue.value -= props.step;
validateValue();
emit("update:modelValue", currentValue.value);
emit("change", currentValue.value);
itemValidate("change");
}
function blur(e) {
emit("blur", e);
itemValidate("blur");
}
vue.watch(
() => props.modelValue,
(val) => {
currentValue.value = val;
}
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(["cu-input-number", [{ "is-disabled": _ctx.disabled }, currentSize.value]])
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(["cu-input-number__minus", { disabled: currentValue.value <= _ctx.min }]),
onClick: valueMinus
}, [
vue.createVNode(vue.unref(components.Minus))
], 2),
vue.createElementVNode("span", _hoisted_1, [
vue.createElementVNode("input", {
type: "number",
class: "cu-input__inner",
min: _ctx.min,
max: _ctx.max,
disabled: _ctx.disabled,
value: _ctx.modelValue,
onChange: change,
onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
onBlur: blur
}, null, 40, _hoisted_2)
]),
vue.createElementVNode("span", {
class: vue.normalizeClass(["cu-input-number__plus", { disabled: currentValue.value >= _ctx.max }]),
onClick: valuePlus
}, [
vue.createVNode(vue.unref(components.Plus))
], 2)
], 2);
};
}
});
exports.default = _sfc_main;