@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
424 lines (423 loc) • 15.4 kB
JavaScript
import { defineComponent as Me, useSlots as Ue, toRef as _e, ref as w, computed as r, watch as fe, onMounted as je, openBlock as N, createElementBlock as k, unref as a, normalizeClass as y, normalizeStyle as pe, renderSlot as me, createVNode as p, withCtx as Z, createCommentVNode as R, createElementVNode as ee, mergeProps as T, withModifiers as h, Transition as Ge, Fragment as We } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../form/index.mjs";
import { useTimerRecord as qe, useHover as Je, useModifier as Qe } from "@vexip-ui/hooks";
import { useProps as Xe, createSizeProp as Ye, createStateProp as Ze, createIconProp as le, useNameHelper as el, useLocale as ll, useIcons as al, emitEvent as d } from "@vexip-ui/config";
import { isNull as tl, getGlobalCount as nl, toNumber as f, toFixed as z, debounce as ol, throttle as ul, boundRange as sl, isValidNumber as ve, plus as il, minus as rl } from "@vexip-ui/utils";
import { numberInputProps as cl } from "./props.mjs";
import { useFieldStore as dl } from "../form/helper.mjs";
import be from "../renderer/renderer.mjs";
import V from "../icon/icon.mjs";
const fl = ["id"], pl = ["id", "autofocus", "autocomplete", "spellcheck", "disabled", "readonly", "placeholder", "name", "title", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-labelledby"], ml = ["aria-label"], vl = ["aria-label", "aria-labelledby", "aria-controls"], bl = ["aria-label", "aria-labelledby", "aria-controls"], El = /* @__PURE__ */ Me({
name: "NumberInput",
__name: "number-input",
props: cl,
emits: ["update:value"],
setup(ge, { expose: ye, emit: he }) {
const O = (l) => !l && l !== 0, C = (l) => tl(l) || Number.isNaN(l), {
idFor: ae,
labelId: A,
state: xe,
disabled: Ne,
loading: ke,
size: Ce,
validateField: te,
clearField: Se,
getFieldValue: Ie,
setFieldValue: ne
} = dl(E), e = Xe("numberInput", ge, {
size: Ye(Ce),
state: Ze(xe),
locale: null,
prefix: le(),
prefixColor: "",
suffix: le(),
suffixColor: "",
// 格式化后显示
formatter: {
default: null,
isFunc: !0
},
value: {
default: () => Ie(),
static: !0
},
min: -1 / 0,
max: 1 / 0,
placeholder: null,
autofocus: !1,
spellcheck: !1,
autocomplete: !1,
precision: -1,
readonly: !1,
step: 1,
ctrlStep: 100,
shiftStep: 10,
altStep: 0.1,
disabled: () => Ne.value,
controlClass: null,
debounce: !1,
delay: null,
clearable: !1,
loading: () => ke.value,
loadingIcon: le(),
loadingLock: !1,
loadingEffect: null,
sync: !1,
syncStep: !1,
controlType: "right",
emptyType: "NaN",
controlAttrs: null,
name: {
default: "",
static: !0
},
slots: () => ({})
}), H = he, oe = Ue(), n = el("number-input"), K = ll("numberInput", _e(e, "locale")), m = al(), { timeout: $, interval: B } = qe(), S = w(!1), s = w(O(e.value) ? F() : e.value), c = w(!1), M = w(!1), U = w(!1), v = w(), { wrapper: ue, isHover: se } = Je();
Qe({
target: v,
passive: !1,
onKeyDown: (l, t) => {
if (d(e.onKeyDown, l), t.up || t.down) {
if (l.preventDefault(), l.stopPropagation(), t.up && G.value || t.down && W.value)
return;
J(
t.up ? "plus" : "minus",
l.ctrlKey ? "ctrl" : l.shiftKey ? "shift" : l.altKey ? "alt" : void 0
), t.resetAll();
} else t.enter && (l.preventDefault(), l.stopPropagation(), Y("change"), t.resetAll());
},
onKeyUp: (l) => {
d(e.onKeyUp, l), l.key === "Enter" && Ae();
}
});
const we = `${nl()}`;
let I;
const _ = r(() => `${n.bs(we)}__control`), j = r(() => !C(s.value) && (f(s.value) > e.max || f(s.value) < e.min)), b = r(() => e.loading && e.loadingLock || e.readonly), G = r(() => e.disabled || b.value || !C(s.value) && f(s.value) >= e.max), W = r(() => e.disabled || b.value || !C(s.value) && f(s.value) <= e.min), Ve = r(() => {
const [l, t] = (e.controlType || "right").split("-");
return [
n.b(),
n.bs("vars"),
n.ns("input-vars"),
{
[n.bm("inherit")]: e.inherit,
[n.bm("focused")]: c.value,
[n.bm("disabled")]: e.disabled,
[n.bm("readonly")]: b.value,
[n.bm("loading")]: e.loading,
[n.bm(e.size)]: e.size !== "default",
[n.bm(e.state)]: e.state !== "default",
[n.bm(`control-${l}`)]: l !== "right",
[n.bm("control-fade")]: t,
[n.bm("out-of-range")]: j.value
}
];
}), Ke = r(() => !!(oe.prefix || e.prefix || e.slots.prefix)), Ee = r(() => !!(oe.suffix || e.suffix || e.slots.suffix)), x = r(() => !c.value && typeof s.value == "number" && !Number.isNaN(s.value) && e.precision >= 0 ? z(s.value, e.precision) : s.value), L = r(() => C(x.value) || typeof x.value != "number" ? x.value ?? "" : !c.value && typeof e.formatter == "function" ? e.formatter(x.value) : x.value.toString()), Pe = r(() => !!(s.value || s.value === 0)), ie = r(() => !e.disabled && !b.value && e.clearable && se.value && Pe.value), Fe = r(() => typeof e.autocomplete == "boolean" ? e.autocomplete ? "on" : "off" : e.autocomplete), re = f(e.delay), ce = e.debounce ? ol(Q, re || 100) : ul(Q, re || 16);
fe(
() => e.value,
(l) => {
l !== I && Te();
},
{ immediate: !0 }
), fe(c, (l) => {
l || D(c.value ? s.value : L.value);
}), je(() => {
D(c.value ? s.value : L.value);
}), ye({
idFor: ae,
focused: S,
isHover: se,
outOfRange: j,
preciseNumber: x,
formattedValue: L,
isReadonly: b,
wrapper: ue,
input: v,
focus: E,
blur: () => {
var l;
return (l = v.value) == null ? void 0 : l.blur();
}
});
function D(l) {
v.value && (v.value.value = C(l) ? "" : l.toString());
}
function q(l) {
return sl(l, e.min, e.max);
}
function Te() {
let l = e.value;
l = c.value ? l : ve(l, !0) ? f(l) : F(), e.precision >= 0 && !C(l) && (l = z(q(l), e.precision)), s.value = l, I = l, D(c.value ? l : L.value);
}
function E(l) {
var t;
(t = v.value) == null || t.focus(l);
}
function Le(l) {
S.value = !0, c.value = !0, d(e.onFocus, l);
}
function De(l) {
S.value = !1, setTimeout(() => {
S.value || (c.value = !1, d(e.onBlur, l), Y("change"));
}, 120);
}
function de(l, t) {
const u = l === "plus" ? G : W, i = l === "plus" ? Re : ze;
t.button !== 0 || u.value || (i(t), document.addEventListener("pointerup", P), document.addEventListener("touchend", P), clearTimeout($.step), clearInterval(B.step), (l === "plus" ? M : U).value = !0, $.step = setTimeout(() => {
B.step = setInterval(() => {
u.value ? P() : i(t);
}, 32);
}, 500));
}
function P() {
document.removeEventListener("pointerup", P), document.removeEventListener("touchend", P), clearTimeout($.step), clearInterval(B.step), M.value = !1, U.value = !1;
}
function Re(l) {
!S.value && E(), J(
"plus",
l.ctrlKey ? "ctrl" : l.shiftKey ? "shift" : l.altKey ? "alt" : void 0
);
}
function ze(l) {
!S.value && E(), J(
"minus",
l.ctrlKey ? "ctrl" : l.shiftKey ? "shift" : l.altKey ? "alt" : void 0
);
}
function J(l, t) {
if (e.disabled || b.value) return;
let u = s.value || 0, i;
switch (t) {
case "ctrl":
i = e.ctrlStep;
break;
case "shift":
i = e.shiftStep;
break;
case "alt":
i = e.altStep;
break;
default:
i = e.step;
}
const o = u.toString().trim();
o.endsWith(".") && (u = f(o.slice(0, -1))), l === "plus" ? u = il(u, i) : u = rl(u, i), X(u, e.syncStep && !e.sync ? "change" : "input");
}
function Q(l) {
const t = l.type, u = l.target.value;
let i = u.trim();
if (t === "change" && u && !ve(u, !0)) {
const o = parseFloat(u);
Number.isNaN(o) ? i = "" : i = o.toString();
}
c.value = t === "input", X(i, t);
}
function X(l, t, u = e.sync) {
t !== "input" ? s.value = O(l) ? F() : f(l) : s.value = l, D(s.value), Y(t, u);
}
function F() {
switch (e.emptyType) {
case "undefined":
return;
case "null":
return null;
default:
return NaN;
}
}
function Y(l, t = e.sync) {
if (l = l === "input" ? "input" : "change", l === "change") {
const u = O(s.value), i = u ? F() : f(s.value);
let o = u ? i : q(f(i));
!u && e.precision >= 0 && (o = z(o, e.precision));
const g = !Object.is(o, i);
if (u || (s.value = o), !t && Object.is(I, o)) {
!Object.is(e.value, i) && H("update:value", o);
return;
}
I = o, (!t || g) && (H("update:value", o), ne(o)), d(e.onChange, o), (!t || g) && te();
} else {
const u = parseFloat(s.value), i = Number.isNaN(u);
let o = i ? F() : q(f(u));
!i && e.precision >= 0 && (o = z(o, e.precision));
const g = t && !Object.is(I, o);
g && (I = o, H("update:value", o), ne(o)), d(e.onInput, u), g && te();
}
}
function Oe() {
e.disabled || b.value || (X(NaN, "change", !1), d(e.onClear), Se(), E());
}
function Ae() {
d(e.onEnter);
}
function He(l) {
d(e.onPrefixClick, l);
}
function $e(l) {
d(e.onSuffixClick, l);
}
function Be(l) {
d(e.onKeyPress, l);
}
return (l, t) => {
var u, i;
return N(), k("div", {
id: a(ae),
ref_key: "wrapper",
ref: ue,
class: y(Ve.value),
role: "group",
onClick: t[8] || (t[8] = (o) => {
var g;
return (g = v.value) == null ? void 0 : g.focus();
})
}, [
Ke.value ? (N(), k("div", {
key: 0,
class: y([a(n).be("icon"), a(n).be("prefix")]),
style: pe({ color: a(e).prefixColor }),
onClick: He
}, [
me(l.$slots, "prefix", {}, () => [
p(a(be), {
renderer: a(e).slots.prefix
}, {
default: Z(() => [
p(a(V), {
icon: a(e).prefix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : R("", !0),
ee("input", T(a(e).controlAttrs, {
id: _.value,
ref_key: "control",
ref: v,
class: [a(n).be("control"), (u = a(e).controlAttrs) == null ? void 0 : u.class, a(e).controlClass],
type: "text",
autofocus: a(e).autofocus,
autocomplete: Fe.value,
spellcheck: a(e).spellcheck,
disabled: a(e).disabled,
readonly: b.value,
placeholder: a(e).placeholder ?? a(K).placeholder,
name: a(e).name || ((i = a(e).controlAttrs) == null ? void 0 : i.name),
role: "spinbutton",
title: j.value ? a(K).outOfRange : void 0,
"aria-valuenow": x.value,
"aria-valuemin": a(e).min !== -1 / 0 ? a(e).min : void 0,
"aria-valuemax": a(e).max !== 1 / 0 ? a(e).max : void 0,
"aria-labelledby": a(A),
onSubmit: t[0] || (t[0] = h(() => {
}, ["prevent"])),
onBlur: De,
onFocus: Le,
onKeypress: Be,
onInput: t[1] || (t[1] = //@ts-ignore
(...o) => a(ce) && a(ce)(...o)),
onChange: Q
}), null, 16, pl),
Ee.value ? (N(), k("div", {
key: 1,
class: y([a(n).be("icon"), a(n).be("suffix")]),
style: pe({
color: a(e).suffixColor,
opacity: ie.value || a(e).loading ? "0%" : ""
}),
onClick: $e
}, [
me(l.$slots, "suffix", {}, () => [
p(a(be), {
renderer: a(e).slots.suffix
}, {
default: Z(() => [
p(a(V), {
icon: a(e).suffix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : a(e).clearable || a(e).loading ? (N(), k("div", {
key: 2,
class: y([a(n).be("icon"), a(n).bem("icon", "placeholder"), a(n).be("suffix")])
}, null, 2)) : R("", !0),
p(Ge, {
name: a(n).ns("fade"),
appear: ""
}, {
default: Z(() => [
ie.value ? (N(), k("button", {
key: 0,
class: y([a(n).be("icon"), a(n).be("clear")]),
type: "button",
tabindex: "-1",
"aria-label": a(K).ariaLabel.clear,
onClick: h(Oe, ["stop"])
}, [
p(a(V), T(a(m).clear, { label: "clear" }), null, 16)
], 10, ml)) : a(e).loading ? (N(), k("div", {
key: 1,
class: y([a(n).be("icon"), a(n).be("loading")])
}, [
p(a(V), T(a(m).loading, {
effect: a(e).loadingEffect || a(m).loading.effect,
icon: a(e).loadingIcon || a(m).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
], 2)) : R("", !0)
]),
_: 1
}, 8, ["name"]),
a(e).controlType !== "none" ? (N(), k(We, { key: 3 }, [
ee("div", {
class: y({
[a(n).be("plus")]: !0,
[a(n).bem("plus", "disabled")]: G.value,
[a(n).bem("plus", "holding")]: M.value
}),
role: "button",
"aria-label": a(K).ariaLabel.increase,
"aria-labelledby": a(A),
"aria-controls": _.value,
onPointerdown: t[2] || (t[2] = h((o) => de("plus", o), ["prevent"])),
onMousedown: t[3] || (t[3] = h(() => {
}, ["prevent"])),
onTouchstart: t[4] || (t[4] = h(() => {
}, ["prevent"]))
}, [
p(a(V), T(a(m).angleUp, {
scale: +(a(m).angleUp.scale || 1) * 0.8
}), null, 16, ["scale"])
], 42, vl),
ee("div", {
class: y({
[a(n).be("minus")]: !0,
[a(n).bem("minus", "disabled")]: W.value,
[a(n).bem("minus", "holding")]: U.value
}),
"aria-label": a(K).ariaLabel.decrease,
"aria-labelledby": a(A),
"aria-controls": _.value,
onPointerdown: t[5] || (t[5] = h((o) => de("minus", o), ["prevent"])),
onMousedown: t[6] || (t[6] = h(() => {
}, ["prevent"])),
onTouchstart: t[7] || (t[7] = h(() => {
}, ["prevent"]))
}, [
p(a(V), T(a(m).angleDown, {
scale: +(a(m).angleDown.scale || 1) * 0.8
}), null, 16, ["scale"])
], 42, bl)
], 64)) : R("", !0)
], 10, fl);
};
}
});
export {
El as default
};
//# sourceMappingURL=number-input.vue2.mjs.map