uv-ui
Version:
基于vue3的移动端组件库
110 lines (109 loc) • 3.4 kB
JavaScript
import { inject as N, ref as z, watch as c, openBlock as k, createElementBlock as C, createElementVNode as n, normalizeClass as r, normalizeStyle as d, withModifiers as o, createVNode as m, unref as v } from "vue";
import f from "../icon/index.js";
import { formatNumber as B } from "../../utils/form.js";
import "./stepper.vue_vue_type_style_index_0_lang.js";
const V = { class: "uv-stepper" }, I = ["onClick"], w = ["disabled", "value"], S = ["onClick"], j = {
name: "UvStepper"
}, M = /* @__PURE__ */ Object.assign(j, {
props: {
modelValue: {
type: Number
},
max: {
type: Number
},
min: {
type: Number,
default: 1
},
step: {
type: Number,
default: 1
},
integer: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
disableInput: {
type: Boolean,
default: !1
},
inputWidth: {
type: String,
default: "28px"
},
size: {
type: Number,
default: 28
}
},
emits: ["update:modelValue", "add", "sub", "change"],
setup(a, { emit: i }) {
const t = a, { props: p, validateBlurOrChange: b } = N("form-item", {}), e = z(t.modelValue || 1);
c(() => t.modelValue, (l) => {
e.value = l;
}), c(e, (l) => {
i("update:modelValue", l), i("change", l), p && b("change");
});
function h() {
t.min && e.value <= t.min || t.disabled || (e.value = e.value - t.step, i("add", e.value));
}
function g() {
t.max && e.value >= t.max || t.disabled || (e.value = Number(e.value + t.step), i("add", e.value));
}
function x(l) {
const { value: u } = l.target, s = B(String(u), !t.integer);
console.log(s), l.target.value = s, e.value = Number(s);
}
function y(l) {
t.min && e.value <= t.min ? (l.target.value = t.min, e.value = Number(t.min)) : t.max && e.value >= t.max && (l.target.value = t.max, e.value = Number(t.max));
}
return (l, u) => (k(), C("div", V, [
n("div", {
class: r(["uv-stepper-minus", a.min === e.value || a.disabled ? "uv-stepper-disabled" : ""]),
style: d({ width: a.size + "px", height: a.size + "px" }),
onClick: o(h, ["stop"])
}, [
m(v(f), {
class: "uv-stepper-icon",
size: "20",
name: "minus",
color: a.min === e.value || a.disabled ? "#c8c9cc" : "#323233"
}, null, 8, ["color"])
], 14, I),
n("div", {
onClick: u[0] || (u[0] = o(() => {
}, ["stop"])),
class: "uv-stepper-input",
style: d({ width: a.inputWidth, height: a.size + "px" })
}, [
n("input", {
style: d({ color: a.disabled ? "#d0c9cc" : "#323233" }),
disabled: a.disableInput || a.disabled,
onInput: x,
onBlur: y,
value: e.value
}, null, 44, w)
], 4),
n("div", {
class: r(["uv-stepper-add", a.max === e.value || a.disabled ? "uv-stepper-disabled" : ""]),
style: d({ width: a.size + "px", height: a.size + "px" }),
onClick: o(g, ["stop"])
}, [
m(v(f), {
class: "uv-stepper-icon",
size: "20",
name: "add",
color: a.max === e.value || a.disabled ? "#c8c9cc" : "#323233"
}, null, 8, ["color"])
], 14, S)
]));
}
});
export {
M as default
};