vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
387 lines (386 loc) • 12.1 kB
JavaScript
import { isVNode as $e, defineComponent as He, ref as d, toRef as je, computed as i, watch as Q, nextTick as W, createVNode as l, renderSlot as k, mergeProps as A, Transition as Be } from "vue";
import "../icon/index.mjs";
import "../form/index.mjs";
import "../renderer/index.mjs";
import { useHover as De } from "@vexip-ui/hooks";
import { useProps as Oe, createIconProp as L, createStateProp as Me, createSizeProp as Re, useNameHelper as Ue, useIcons as _e, useLocale as qe, emitEvent as c } from "@vexip-ui/config";
import { isNull as V, noop as X, toNumber as Ge, debounce as Je, throttle as Qe } from "@vexip-ui/utils";
import { inputProps as We } from "./props.mjs";
import { useFieldStore as Xe } from "../form/helper.mjs";
import C from "../renderer/renderer.mjs";
import y from "../icon/icon.mjs";
function Ye(f) {
return typeof f == "function" || Object.prototype.toString.call(f) === "[object Object]" && !$e(f);
}
const Ze = Object.freeze(["text", "password", "date", "datetime", "time"]);
function I(f) {
return V(f) ? "" : String(f);
}
const dn = /* @__PURE__ */ He({
name: "Input",
props: We,
emits: ["update:value"],
setup(f, {
slots: o,
emit: E,
expose: Y
}) {
const {
idFor: F,
labelId: K,
state: Z,
disabled: ee,
loading: ne,
size: ae,
validateField: z,
clearField: te,
getFieldValue: le,
setFieldValue: N
} = Xe(() => {
var n;
return (n = s.value) == null ? void 0 : n.focus();
}), e = Oe("input", f, {
size: Re(ae),
state: Me(Z),
locale: null,
type: {
default: "text",
validator: (n) => Ze.includes(n)
},
prefix: L(),
prefixColor: "",
suffix: L(),
suffixColor: "",
formatter: {
default: null,
isFunc: !0
},
value: {
default: () => le(),
static: !0
},
placeholder: null,
autofocus: !1,
spellcheck: !1,
autocomplete: !1,
readonly: !1,
disabled: () => ee.value,
controlClass: null,
debounce: !1,
delay: null,
maxLength: 0,
hideCount: !1,
before: "",
after: "",
plainPassword: !1,
clearable: !1,
loading: () => ne.value,
loadingIcon: L(),
loadingLock: !1,
loadingEffect: null,
transparent: !1,
sync: !1,
controlAttrs: null,
name: {
default: "",
static: !0
},
slots: () => ({})
}), T = I(e.value), a = Ue("input"), m = _e(), p = d(!1), r = d(T), v = d(!1), b = d(T.length), $ = d(!1), H = d(!1), h = d(!1), s = d(), {
wrapper: oe,
isHover: re
} = De(), j = qe("input", je(e, "locale"));
let P = e.value;
const g = i(() => !!(o.before || o.beforeAction || o["before-action"] || e.before || e.slots.before || e.slots.beforeAction)), x = i(() => !!(o.after || o.afterAction || o["after-action"] || e.after || e.slots.after || e.slots.afterAction)), B = i(() => ({
[a.bs("wrapper")]: !0,
[a.bs("vars")]: !0,
[a.bm("inherit")]: e.inherit,
[a.bm(e.size)]: e.size !== "default"
})), w = i(() => e.loading && e.loadingLock || e.readonly), ue = i(() => [a.b(), a.bm(e.type), !g.value && !x.value && B.value, {
[a.bm("focused")]: p.value,
[a.bm("disabled")]: e.disabled,
[a.bm("readonly")]: w.value,
[a.bm("loading")]: e.loading,
[a.bm(e.state)]: e.state !== "default",
[a.bm("before")]: o.beforeAction || o["before-action"] || e.slots.before,
[a.bm("after")]: o.afterAction || o["after-action"] || e.slots.after,
[a.bm("transparent")]: e.transparent,
[a.bm("plain-password")]: e.plainPassword
}]), ie = i(() => ({
...B.value,
[a.bm(`wrapper--${e.size}`)]: e.size !== "default",
[a.bs("wrapper--before-only")]: g.value && !x.value,
[a.bs("wrapper--after-only")]: !g.value && x.value,
[a.bm("transparent")]: e.transparent
})), se = i(() => !!(o.prefix || e.prefix || e.slots.prefix)), ce = i(() => !!(o.suffix || e.suffix || e.slots.suffix)), fe = i(() => {
const n = e.type;
return n === "password" ? v.value ? "text" : "password" : n === "datetime" ? "datetime-local" : n;
}), D = i(() => typeof e.formatter == "function" ? I(e.formatter(r.value)) : r.value), de = i(() => v.value ? m.value.plainText : m.value.cipherText), pe = i(() => !(V(r.value) || r.value === "")), O = i(() => !e.disabled && !w.value && e.clearable && pe.value && re.value), ve = i(() => typeof e.autocomplete == "boolean" ? e.autocomplete ? "on" : "off" : e.autocomplete);
Q(() => e.value, (n) => {
r.value = I(n), P = r.value, _();
}), Q([D, s], () => {
s.value && (s.value.value = D.value);
}, {
immediate: !0,
flush: "post"
}), Y({
idFor: F,
labelId: K,
focused: p,
currentValue: r,
showPassword: v,
currentLength: b,
composing: h,
input: s,
copyValue: Le,
focus: (n) => {
var t;
(t = s.value) == null || t.focus(n);
},
blur: () => {
var n;
(n = s.value) == null || n.blur();
}
});
function M() {
return typeof e.value == "number" ? parseFloat(r.value) : r.value;
}
function me(n) {
p.value || (p.value = !0, c(e.onFocus, n));
}
function be(n) {
p.value && (p.value = !1, setTimeout(() => {
p.value || (c(e.onBlur, n), P !== M() && U("change"));
}, 120));
}
function S(n) {
const t = n.type;
if (h.value) {
if (t === "input") return;
h.value = !1;
}
r.value = n.target.value, _();
const u = r.value;
R(u, t);
}
function R(n, t, u = e.sync) {
r.value = n, U(t, u);
}
function U(n, t = e.sync) {
n = n === "input" ? "input" : "change";
const u = M();
n === "change" ? (P = u, t || (E("update:value", u), N(u)), c(e.onChange, u), t || z()) : (t && (E("update:value", u), N(u)), c(e.onInput, u), t && z());
}
function _() {
let n = r.value;
if (V(n)) {
b.value = 0;
return;
}
const t = e.maxLength;
t && n.length > t && (n = n.slice(0, t)), b.value = n.length, r.value = n;
}
function he() {
e.disabled || (v.value = !v.value, W(() => {
var n;
(n = s.value) == null || n.focus();
}));
}
function ge(n) {
var t;
e.disabled || w.value || (n.stopPropagation(), R("", "change", !1), c(e.onClear), W(() => te("")), b.value = 0, (t = s.value) == null || t.focus());
}
function xe() {
c(e.onEnter);
}
function Ce(n) {
c(e.onPrefixClick, n);
}
function ye(n) {
c(e.onSuffixClick, n);
}
function we(n) {
c(e.onKeyDown, n);
}
function ke(n) {
c(e.onKeyPress, n);
}
function Pe(n) {
n.key === "Enter" && xe(), c(e.onKeyUp, n);
}
function Se(n) {
h.value = !0, c(e.onCompositionStart, n);
}
function Ae(n) {
h.value && (h.value = !1, s.value && s.value.dispatchEvent(new Event("input"))), c(e.onCompositionEnd, n);
}
function Le() {
const n = document.createElement("input");
n.style.height = "0", n.setAttribute("readonly", "readonly"), n.value = r.value, document.body.appendChild(n), n.select();
const t = document.execCommand("copy");
return document.body.removeChild(n), t;
}
function Ie(n) {
n.preventDefault();
}
const q = Ge(e.delay), Ve = e.debounce ? Je(S, q || 100) : Qe(S, q || 16);
function Ee() {
return l("div", {
class: [a.be("icon"), a.be("prefix")],
style: {
color: e.prefixColor
},
onClick: Ce
}, [k(o, "prefix", void 0, () => [l(C, {
renderer: e.slots.prefix
}, {
default: () => [l(y, {
icon: e.prefix
}, null)]
})])]);
}
function Fe() {
return ce.value ? l("div", {
key: "suffix",
class: [a.be("icon"), a.be("suffix")],
style: {
color: e.suffixColor,
opacity: O.value || e.loading ? "0%" : ""
},
onClick: ye
}, [k(o, "suffix", void 0, () => [l(C, {
renderer: e.slots.suffix
}, {
default: () => [l(y, {
icon: e.suffix
}, null)]
})])]) : e.clearable || e.loading ? l("div", {
key: "placeholder",
class: [a.be("icon"), a.bem("icon", "placeholder")]
}, null) : null;
}
function Ke() {
return O.value ? l("button", {
key: "clear",
class: [a.be("icon"), a.be("clear")],
type: "button",
tabindex: -1,
"aria-label": j.value.ariaLabel.clear,
onClick: ge
}, [l(y, A(m.value.clear, {
label: "clear"
}), null)]) : e.loading ? l("div", {
key: "loading",
class: [a.be("icon"), a.be("loading")]
}, [l(y, A(m.value.loading, {
effect: e.loadingEffect || m.value.loading.effect,
icon: e.loadingIcon || m.value.loading.icon,
label: "loading"
}), null)]) : null;
}
function ze() {
let n;
return l("div", {
class: a.be("suffix-wrapper")
}, [Fe(), l(Be, {
name: a.ns("fade"),
appear: !0
}, Ye(n = Ke()) ? n : {
default: () => [n]
})]);
}
function Ne() {
return l("div", {
class: a.be("count")
}, [k(o, "count", {
value: r.value
}, () => [l(C, {
renderer: e.slots.count,
data: {
value: r.value
}
}, {
default: () => [e.maxLength === 1 / 0 ? b.value : `${b.value}/${e.maxLength}`]
})])]);
}
function Te() {
return e.type === "password" && e.plainPassword ? l("div", {
key: "password",
class: [a.be("icon"), a.be("password")],
style: {
color: e.suffixColor
},
onClick: he
}, [k(o, "password", {
plain: v.value
}, () => [l(C, {
renderer: e.slots.password,
data: {
plain: v.value
}
}, {
default: () => [l(y, de.value, null)]
})])]) : null;
}
function G() {
var n, t;
return l("div", {
id: F.value,
ref: oe,
class: ue.value,
onClick: () => {
var u;
return (u = s.value) == null ? void 0 : u.focus();
}
}, [se.value && Ee(), l("input", A(e.controlAttrs, {
ref: s,
class: [a.be("control"), (n = e.controlAttrs) == null ? void 0 : n.class, e.controlClass],
type: fe.value,
autofocus: e.autofocus,
autocomplete: ve.value,
spellcheck: e.spellcheck,
disabled: e.disabled,
readonly: w.value || void 0,
placeholder: e.placeholder ?? j.value.placeholder,
maxlength: e.maxLength > 0 ? e.maxLength : void 0,
name: e.name || ((t = e.controlAttrs) == null ? void 0 : t.name),
"aria-labelledby": K.value,
onBlur: be,
onFocus: me,
onInput: Ve,
onChange: S,
onKeypress: ke,
onKeydown: we,
onKeyup: Pe,
onSubmit: Ie,
onCompositionstart: Se,
onCompositionend: Ae
}), null), ze(), e.maxLength > 0 && !e.hideCount ? Ne() : null, Te()]);
}
function J(n) {
const t = o[`${n}Action`] || o[`${n}-action`] || e.slots[`${n}Action`];
return t ? l("div", {
class: [a.be(n), a.bem(n, "action")],
onMouseenter: () => (n === "before" ? $ : H).value = !0,
onMouseleave: () => (n === "before" ? $ : H).value = !1
}, [t()]) : l("div", {
class: a.be(n)
}, [o[n] ? o[n]() : l(C, {
renderer: e.slots[n]
}, {
default: () => [e[n]]
})]);
}
return () => g.value || x.value ? l("div", {
class: ie.value
}, [g.value && J("before"), G(), x.value && J("after")]) : G();
},
methods: {
focus: X,
blur: X
}
});
export {
dn as default
};
//# sourceMappingURL=input.mjs.map