vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
182 lines (181 loc) • 6.65 kB
JavaScript
import { defineComponent as W, ref as V, computed as m, watch as T, nextTick as j, createElementBlock as k, openBlock as C, normalizeStyle as O, normalizeClass as w, unref as v, createElementVNode as r, createCommentVNode as q, withDirectives as G, renderSlot as H, createTextVNode as J, toDisplayString as Q, withKeys as S, withModifiers as F, vModelText as X } from "vue";
import { useInject as Y, useSlotsExist as Z, add as M } from "../utils/index.js";
const _ = { class: "input-number-container" }, ee = {
key: 0,
class: "input-prefix"
}, te = ["disabled", "placeholder", "onKeydown"], ne = { class: "input-number-handler-wrap" }, ie = /* @__PURE__ */ W({
__name: "InputNumber",
props: {
width: { default: 90 },
min: { default: -1 / 0 },
max: { default: 1 / 0 },
step: { default: 1 },
precision: { default: 0 },
prefix: { default: void 0 },
formatter: { type: Function, default: void 0 },
parser: { type: Function, default: void 0 },
keyboard: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
placeholder: { default: void 0 },
value: { default: void 0 },
valueModifiers: { default: () => ({}) }
},
emits: ["update:value", "change", "enter"],
setup($, { emit: I }) {
const n = $, u = V(), i = V(), { colorPalettes: c, shadowColor: z } = Y("InputNumber"), h = I, B = Z(["prefix"]), E = m(() => typeof n.width == "number" ? `${n.width}px` : n.width), s = m(() => {
const e = String(n.step).split(".")[1]?.length || 0;
return Math.max(n.precision, e);
}), L = m(() => B.prefix || n.prefix), g = m(() => "lazy" in n.valueModifiers);
T(
() => [n.value, s.value, n.formatter],
async () => {
if (n.value !== void 0)
if (u.value) {
const { selectionStart: e, selectionEnd: t, value: a } = u.value, o = a.slice(0, e), l = a.slice(t);
i.value = f(), await j(), D(e, o, l);
} else
i.value = f();
},
{
immediate: !0,
flush: "post",
deep: !0
}
);
function D(e, t, a) {
const { value: o } = u.value;
let l = o.length;
if (o.endsWith(a))
l = o.length - a.length;
else if (o.startsWith(t))
l = t.length;
else {
const U = t[e - 1], N = o.indexOf(U, e - 1);
N !== -1 && (l = N + 1);
}
u.value.setSelectionRange(l, l);
}
function p(e) {
h("update:value", e), h("change", e);
}
function f() {
return n.formatter ? n.formatter(n.value?.toFixed(s.value)) : n.value?.toFixed(s.value);
}
function d(e) {
let t = parseFloat(e);
return t > n.max && (t = n.max), t < n.min && (t = n.min), t;
}
function b(e) {
if (Number.isNaN(parseFloat(e)))
n.value ? i.value = f() : n.formatter && (i.value = n.formatter(e));
else {
const t = d(e);
t !== n.value ? p(t) : i.value = f();
}
}
function K(e) {
if (!g.value) {
const t = e.target, a = n.parser ? String(n.parser(t.value)) : t.value;
a && !Number.isNaN(d(a)) && d(a) !== n.value && b(a), !a && n.value !== void 0 && p(void 0);
}
}
function P(e) {
const t = e.target, a = n.parser ? String(n.parser(t.value)) : t.value;
b(a);
}
function A(e) {
e.key === "ArrowUp" && y(), e.key === "ArrowDown" && x();
}
function R(e) {
if (h("enter", e), g.value) {
const t = e.target, a = n.parser ? String(n.parser(t.value)) : t.value;
b(a);
}
}
function y() {
const e = Math.min(n.max, M(n.value || 0, +n.step)).toFixed(s.value);
p(d(e));
}
function x() {
const e = Math.max(n.min, M(n.value || 0, -n.step)).toFixed(s.value);
p(d(e));
}
return (e, t) => (C(), k("div", {
tabindex: "1",
class: w(["input-number-wrap", { "input-number-disabled": e.disabled }]),
style: O(`
--input-number-width: ${E.value};
--input-number-primary-color: ${v(c)[5]};
--input-number-primary-color-hover: ${v(c)[4]};
--input-number-primary-color-focus: ${v(c)[4]};
--input-number-primary-shadow-color: ${v(z)};
`)
}, [
r("div", _, [
L.value ? (C(), k("span", ee, [
H(e.$slots, "prefix", {}, () => [
J(Q(e.prefix), 1)
], !0)
])) : q("", !0),
G(r("input", {
ref_key: "inputRef",
ref: u,
class: "input-number",
autocomplete: "off",
disabled: e.disabled,
placeholder: e.placeholder,
"onUpdate:modelValue": t[0] || (t[0] = (a) => i.value = a),
onInput: K,
onChange: P,
onKeydown: [
t[1] || (t[1] = S(F(() => {
}, ["prevent"]), ["up"])),
t[2] || (t[2] = (a) => e.keyboard ? A(a) : () => !1),
S(F(R, ["prevent"]), ["enter"])
]
}, null, 40, te), [
[X, i.value]
])
]),
r("div", ne, [
r("span", {
class: w(["input-number-arrow up-arrow", { "arrow-disabled": (e.value || 0) >= e.max }]),
onClick: t[3] || (t[3] = (a) => (e.value || 0) >= e.max ? () => !1 : y())
}, [...t[5] || (t[5] = [
r("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "up",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" })
], -1)
])], 2),
r("span", {
class: w(["input-number-arrow down-arrow", { "arrow-disabled": (e.value || 0) <= e.min }]),
onClick: t[4] || (t[4] = (a) => (e.value || 0) <= e.min ? () => !1 : x())
}, [...t[6] || (t[6] = [
r("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" })
], -1)
])], 2)
])
], 6));
}
});
export {
ie as default
};