vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
182 lines (181 loc) • 6.6 kB
JavaScript
import { defineComponent as W, ref as k, computed as v, watch as T, nextTick as j, createElementBlock as C, openBlock as S, normalizeStyle as O, normalizeClass as x, unref as p, createElementVNode as r, createCommentVNode as q, withDirectives as G, renderSlot as H, createTextVNode as J, toDisplayString as Q, withKeys as F, withModifiers as M, vModelText as X } from "vue";
import { useInject as Y, useSlotsExist as Z, add as $ } 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" }, re = /* @__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(i, { emit: I }) {
const t = i, s = k(), u = k(), { colorPalettes: h, shadowColor: z } = Y("InputNumber"), b = I, B = Z(["prefix"]), E = v(() => typeof t.width == "number" ? `${t.width}px` : t.width), d = v(() => {
const n = String(t.step).split(".")[1]?.length || 0;
return Math.max(t.precision, n);
}), L = v(() => B.prefix || t.prefix), g = v(() => "lazy" in t.valueModifiers);
T(
() => [t.value, d.value, t.formatter],
async () => {
if (t.value !== void 0)
if (s.value) {
const { selectionStart: n, selectionEnd: e, value: a } = s.value, l = a.slice(0, n), o = a.slice(e);
u.value = m(), await j(), D(n, l, o);
} else
u.value = m();
},
{
immediate: !0,
flush: "post",
deep: !0
}
);
function D(n, e, a) {
const { value: l } = s.value;
let o = l.length;
if (l.endsWith(a))
o = l.length - a.length;
else if (l.startsWith(e))
o = e.length;
else {
const U = e[n - 1], V = l.indexOf(U, n - 1);
V !== -1 && (o = V + 1);
}
s.value.setSelectionRange(o, o);
}
function c(n) {
b("update:value", n), b("change", n);
}
function m() {
return t.formatter ? t.formatter(t.value?.toFixed(d.value)) : t.value?.toFixed(d.value);
}
function f(n) {
let e = parseFloat(n);
return e > t.max && (e = t.max), e < t.min && (e = t.min), e;
}
function w(n) {
if (Number.isNaN(parseFloat(n)))
u.value = m();
else {
const e = f(n);
e !== t.value ? c(e) : u.value = m();
}
}
function K(n) {
if (!g.value) {
const e = n.target, a = t.parser ? String(t.parser(e.value)) : e.value;
a && !Number.isNaN(f(a)) && f(a) !== t.value && w(a), !a && t.value !== void 0 && c(void 0);
}
}
function P(n) {
const e = n.target, a = t.parser ? String(t.parser(e.value)) : e.value;
w(a);
}
function A(n) {
n.key === "ArrowUp" && y(), n.key === "ArrowDown" && N();
}
function R(n) {
if (b("enter", n), g.value) {
const e = n.target, a = t.parser ? String(t.parser(e.value)) : e.value;
w(a);
}
}
function y() {
const n = Math.min(t.max, $(t.value || 0, +t.step)).toFixed(d.value);
c(f(n));
}
function N() {
const n = Math.max(t.min, $(t.value || 0, -t.step)).toFixed(d.value);
c(f(n));
}
return (n, e) => (S(), C("div", {
tabindex: "1",
class: x(["input-number-wrap", { "input-number-disabled": i.disabled }]),
style: O(`
--input-number-width: ${E.value};
--input-number-primary-color: ${p(h)[5]};
--input-number-primary-color-hover: ${p(h)[4]};
--input-number-primary-color-focus: ${p(h)[4]};
--input-number-primary-shadow-color: ${p(z)};
`)
}, [
r("div", _, [
L.value ? (S(), C("span", ee, [
H(n.$slots, "prefix", {}, () => [
J(Q(i.prefix), 1)
], !0)
])) : q("", !0),
G(r("input", {
ref_key: "inputRef",
ref: s,
class: "input-number",
autocomplete: "off",
disabled: i.disabled,
placeholder: i.placeholder,
"onUpdate:modelValue": e[0] || (e[0] = (a) => u.value = a),
onInput: K,
onChange: P,
onKeydown: [
e[1] || (e[1] = F(M(() => {
}, ["prevent"]), ["up"])),
e[2] || (e[2] = (a) => i.keyboard ? A(a) : () => !1),
F(M(R, ["prevent"]), ["enter"])
]
}, null, 40, te), [
[X, u.value]
])
]),
r("div", ne, [
r("span", {
class: x(["input-number-arrow up-arrow", { "arrow-disabled": (i.value || 0) >= i.max }]),
onClick: e[3] || (e[3] = (a) => (i.value || 0) >= i.max ? () => !1 : y())
}, [...e[5] || (e[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: x(["input-number-arrow down-arrow", { "arrow-disabled": (i.value || 0) <= i.min }]),
onClick: e[4] || (e[4] = (a) => (i.value || 0) <= i.min ? () => !1 : N())
}, [...e[6] || (e[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 {
re as default
};