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