vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
219 lines (218 loc) • 8.69 kB
JavaScript
import { defineComponent as O, ref as d, computed as s, watch as U, createElementBlock as o, openBlock as n, normalizeStyle as X, unref as b, createCommentVNode as r, createElementVNode as u, normalizeClass as p, renderSlot as m, createTextVNode as w, toDisplayString as c, withKeys as Y, withModifiers as Z, withDirectives as $, vShow as L } from "vue";
import { useInject as _, useSlotsExist as ee } from "../utils/index.js";
const te = {
key: 0,
class: "input-prefix"
}, ae = ["type", "value", "placeholder", "maxlength", "disabled", "onKeydown"], oe = {
key: 1,
class: "input-suffix"
}, ne = {
class: "eye-svg",
focusable: "false",
"data-icon": "eye",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, le = {
class: "eye-svg",
focusable: "false",
"data-icon": "eye-invisible",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, se = {
key: 2,
class: "input-count"
}, ue = {
key: 3,
class: "suffix-item"
}, de = /* @__PURE__ */ O({
__name: "Input",
props: {
width: { default: "100%" },
size: { default: "middle" },
addonBefore: { default: void 0 },
addonAfter: { default: void 0 },
prefix: { default: void 0 },
suffix: { default: void 0 },
allowClear: { type: Boolean, default: !1 },
password: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
placeholder: { default: void 0 },
maxlength: { default: void 0 },
showCount: { type: Boolean, default: !1 },
value: { default: void 0 },
valueModifiers: { default: () => ({}) }
},
emits: ["update:value", "compositionstart", "compositionend", "change", "enter"],
setup(S, { emit: A }) {
const a = S, z = d(null), g = d(!1), y = d(!1), v = d(!1), l = d(), f = d(!1), { colorPalettes: B, shadowColor: I } = _("Input"), i = A, h = ee(["prefix", "suffix", "addonBefore", "addonAfter"]), q = s(() => typeof a.width == "number" ? `${a.width}px` : a.width), k = s(() => !a.disabled && a.allowClear), N = s(() => a.maxlength ? `${l.value ? l.value.length : 0} / ${a.maxlength}` : l.value ? l.value.length : 0), P = s(() => h.prefix || a.prefix), E = s(() => h.suffix || a.suffix), V = s(() => k.value || a.password || a.showCount || E.value), C = s(() => h.addonBefore || a.addonBefore), x = s(() => h.addonAfter || a.addonAfter), M = s(() => "lazy" in a.valueModifiers);
U(
() => a.value,
(e) => {
l.value !== e && (l.value = e);
},
{
immediate: !0
}
);
function K() {
g.value = !0;
}
function Q() {
g.value = !1;
}
function D() {
y.value = !0;
}
function F() {
y.value = !1;
}
function R(e) {
v.value = !0, i("compositionstart", e);
}
function W(e) {
v.value = !1, i("compositionend", e);
const t = new Event("change");
e.target?.dispatchEvent(t);
}
function j(e) {
if (!v.value) {
const t = e.target;
l.value = t.value, M.value || (i("update:value", t.value), i("change", e));
}
}
function H(e) {
const t = e.target;
t.value !== a.value && (i("update:value", t.value), i("change", e));
}
function T(e) {
if (!v.value && (i("enter", e), M.value)) {
const t = new Event("change");
e.target?.dispatchEvent(t);
}
}
function G() {
l.value = "", i("update:value", ""), z.value?.focus();
}
function J() {
f.value = !f.value;
}
return (e, t) => (n(), o("div", {
class: "input-wrap",
style: X(`
--input-width: ${q.value};
--input-primary-color-hover: ${b(B)[4]};
--input-primary-color-focus: ${b(B)[4]};
--input-primary-shadow-color: ${b(I)};
`)
}, [
C.value ? (n(), o("span", {
key: 0,
class: p(["input-addon", { "addon-before": C.value }])
}, [
m(e.$slots, "addonBefore", {}, () => [
w(c(e.addonBefore), 1)
], !0)
], 2)) : r("", !0),
u("div", {
tabindex: "1",
class: p(["input-container", [
`input-${e.size}`,
{
"input-before": C.value,
"input-after": x.value,
"input-disabled": e.disabled
}
]]),
onMouseenter: K,
onMouseleave: Q
}, [
t[3] || (t[3] = u("div", { class: "input-border" }, null, -1)),
u("div", {
class: p(["input-border-state", { "input-hover": g.value, "input-focus": y.value }])
}, null, 2),
P.value ? (n(), o("span", te, [
m(e.$slots, "prefix", {}, () => [
w(c(e.prefix), 1)
], !0)
])) : r("", !0),
u("input", {
ref_key: "inputRef",
ref: z,
class: "input-item",
type: e.password && !f.value ? "password" : "text",
value: l.value,
placeholder: e.placeholder,
maxlength: e.maxlength,
disabled: e.disabled,
onFocus: D,
onBlur: F,
onCompositionstart: R,
onCompositionend: W,
onInput: j,
onChange: H,
onKeydown: Y(Z(T, ["prevent"]), ["enter"])
}, null, 40, ae),
V.value ? (n(), o("span", oe, [
k.value ? (n(), o("span", {
key: 0,
class: p(["input-actions", { "clear-hidden": !l.value }]),
onClick: G
}, [...t[0] || (t[0] = [
u("svg", {
class: "clear-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
u("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })
], -1)
])], 2)) : r("", !0),
e.password ? (n(), o("span", {
key: 1,
class: "input-actions",
onClick: J
}, [
$((n(), o("svg", ne, [...t[1] || (t[1] = [
u("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }, null, -1)
])], 512)), [
[L, f.value]
]),
$((n(), o("svg", le, [...t[2] || (t[2] = [
u("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }, null, -1),
u("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" }, null, -1)
])], 512)), [
[L, !f.value]
])
])) : r("", !0),
e.showCount ? (n(), o("span", se, c(N.value), 1)) : r("", !0),
E.value ? (n(), o("span", ue, [
m(e.$slots, "suffix", {}, () => [
w(c(e.suffix), 1)
], !0)
])) : r("", !0)
])) : r("", !0)
], 34),
x.value ? (n(), o("span", {
key: 1,
class: p(["input-addon", { "addon-after": x.value }])
}, [
m(e.$slots, "addonAfter", {}, () => [
w(c(e.addonAfter), 1)
], !0)
], 2)) : r("", !0)
], 4));
}
});
export {
de as default
};