@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
212 lines (211 loc) • 7.14 kB
JavaScript
import { defineComponent as te, toRef as ae, ref as i, computed as g, watch as oe, openBlock as y, createElementBlock as b, unref as a, normalizeClass as d, createElementVNode as N, mergeProps as S, withKeys as le, createVNode as P, Transition as ne, withCtx as ue, createCommentVNode as A, renderSlot as se, createTextVNode as re, toDisplayString as ce } from "vue";
import "../icon/index.mjs";
import "../form/index.mjs";
import { useProps as ie, createStateProp as de, createIconProp as fe, useNameHelper as me, useLocale as pe, useIcons as ve, emitEvent as u } from "@vexip-ui/config";
import { isNull as he, toNumber as ge, debounce as ye, throttle as be } from "@vexip-ui/utils";
import { textareaProps as xe } from "./props.mjs";
import { useFieldStore as Ce } from "../form/helper.mjs";
import Le from "../icon/icon.mjs";
const ke = ["id"], we = ["value", "rows", "autofocus", "autocomplete", "spellcheck", "disabled", "readonly", "placeholder", "maxlength", "name", "aria-labelledby"], Ae = /* @__PURE__ */ te({
name: "Textarea",
__name: "textarea",
props: xe,
emits: ["update:value"],
setup(B, { expose: z, emit: R }) {
const { idFor: x, state: $, labelId: D, disabled: T, loading: U, validateField: C, getFieldValue: H, setFieldValue: L } = Ce(() => {
var t;
return (t = s.value) == null ? void 0 : t.focus();
}), e = ie("textarea", B, {
state: de($),
locale: null,
value: {
default: () => H(),
static: !0
},
placeholder: null,
rows: 2,
noResize: !1,
autofocus: !1,
spellcheck: !1,
autocomplete: !1,
readonly: !1,
disabled: () => T.value,
debounce: !1,
delay: null,
maxLength: 0,
loading: () => U.value,
loadingIcon: fe(),
loadingLock: !1,
loadingEffect: null,
sync: !1,
controlClass: null,
controlAttrs: null,
name: {
default: "",
static: !0
}
}), k = R, n = me("textarea"), j = pe("input", ae(e, "locale")), f = ve(), m = i(!1), o = i(e.value), c = i(e.value ? e.value.length : 0), r = i(!1), s = i();
let p = e.value;
const v = g(() => e.loading && e.loadingLock || e.readonly), q = g(() => ({
[n.b()]: !0,
[n.ns("input-vars")]: !0,
[n.bs("vars")]: !0,
[n.bm("inherit")]: e.inherit,
[n.bm("focused")]: m.value,
[n.bm("disabled")]: e.disabled,
[n.bm("readonly")]: v.value,
[n.bm("loading")]: e.loading,
[n.bm("no-resize")]: e.noResize,
[n.bm(e.state)]: e.state !== "default"
})), G = g(() => typeof e.autocomplete == "boolean" ? e.autocomplete ? "on" : "off" : e.autocomplete);
oe(
() => e.value,
(t) => {
o.value = t, p = t, w();
}
), z({
idFor: x,
currentValue: o,
currentLength: c,
composing: r,
isReadonly: v,
textarea: s,
copyValue: Y,
focus: (t) => {
var l;
return (l = s.value) == null ? void 0 : l.focus(t);
},
blur: () => {
var t;
return (t = s.value) == null ? void 0 : t.blur();
}
});
function J(t) {
m.value = !0, u(e.onFocus, t);
}
function M(t) {
m.value = !1, u(e.onBlur, t);
}
function h(t) {
const l = t.type;
if (r.value) {
if (l === "input") return;
r.value = !1;
}
if (o.value = t.target.value, w(), l === "change") {
if (p === o.value) return;
p = o.value, e.sync || (k("update:value", o.value), L(o.value)), u(e.onChange, o.value), e.sync || C();
} else
e.sync && (k("update:value", o.value), L(o.value)), u(e.onInput, o.value), e.sync && C();
}
function O() {
u(e.onEnter);
}
function Q(t) {
u(e.onKeyDown, t);
}
function W(t) {
u(e.onKeyPress, t);
}
function X(t) {
u(e.onKeyUp, t);
}
function w() {
let t = o.value;
if (he(t)) {
c.value = 0;
return;
}
const l = e.maxLength;
l && t.length > l && (t = t.slice(0, l)), c.value = t.length, o.value = t;
}
function Y() {
const t = document.createElement("textarea");
t.style.height = "0", t.setAttribute("readonly", "readonly"), t.value = o.value, document.body.appendChild(t), t.select();
const l = document.execCommand("copy");
return document.body.removeChild(t), l;
}
const E = ge(e.delay), I = e.debounce ? ye(h, E || 100) : be(h, E || 16);
function Z(t) {
r.value = !0, u(e.onCompositionStart, t);
}
function ee(t) {
r.value && (r.value = !1, s.value && s.value.dispatchEvent(new Event("input"))), u(e.onCompositionStart, t);
}
return (t, l) => {
var K, V;
return y(), b("div", {
id: a(x),
class: d(q.value),
onClick: l[1] || (l[1] = (_) => {
var F;
return (F = s.value) == null ? void 0 : F.focus();
})
}, [
N("textarea", S(a(e).controlAttrs, {
ref_key: "textarea",
ref: s,
class: [a(n).be("control"), (K = a(e).controlAttrs) == null ? void 0 : K.class, a(e).controlClass],
value: o.value,
rows: a(e).rows,
autofocus: a(e).autofocus,
autocomplete: G.value,
spellcheck: a(e).spellcheck,
disabled: a(e).disabled,
readonly: v.value,
placeholder: a(e).placeholder ?? a(j).placeholder,
maxlength: a(e).maxLength > 0 ? a(e).maxLength : void 0,
name: a(e).name || ((V = a(e).controlAttrs) == null ? void 0 : V.name),
"aria-labelledby": a(D),
onBlur: M,
onFocus: J,
onKeyup: [
le(O, ["enter"]),
X
],
onKeypress: W,
onKeydown: Q,
onInput: l[0] || (l[0] = //@ts-ignore
(..._) => a(I) && a(I)(..._)),
onChange: h,
onCompositionstart: Z,
onCompositionend: ee
}), null, 16, we),
N("div", {
class: d(a(n).be("extra"))
}, [
P(ne, {
name: a(n).ns("fade"),
appear: ""
}, {
default: ue(() => [
a(e).loading ? (y(), b("div", {
key: 0,
class: d(a(n).be("loading"))
}, [
P(a(Le), S(a(f).loading, {
effect: a(e).loadingEffect || a(f).loading.effect,
icon: a(e).loadingIcon || a(f).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
], 2)) : A("", !0)
]),
_: 1
}, 8, ["name"]),
a(e).maxLength > 0 ? (y(), b("div", {
key: 0,
class: d(a(n).be("count"))
}, [
se(t.$slots, "count", { value: o.value }, () => [
re(ce(a(e).maxLength === 1 / 0 ? c.value : `${c.value}/${a(e).maxLength}`), 1)
])
], 2)) : A("", !0)
], 2)
], 10, ke);
};
}
});
export {
Ae as default
};
//# sourceMappingURL=textarea.vue2.mjs.map