@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
213 lines (212 loc) • 7.18 kB
JavaScript
import { defineComponent as te, ref as i, toRef as oe, computed as g, watch as ae, createElementBlock as y, openBlock as b, normalizeClass as d, unref as o, createElementVNode as N, mergeProps as S, withKeys as le, createVNode as P, createCommentVNode as A, Transition as ne, withCtx as ue, renderSlot as se, createTextVNode as re, toDisplayString as ce } from "vue";
import "../icon/index.mjs";
import "../form/index.mjs";
import { useProps as ie, createIconProp as de, createStateProp 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: fe($),
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,
hideCount: !1,
loading: () => U.value,
loadingIcon: de(),
loadingLock: !1,
loadingEffect: null,
sync: !1,
controlClass: null,
controlAttrs: null,
name: {
default: "",
static: !0
}
}), k = R, n = me("textarea"), j = pe("input", oe(e, "locale")), f = ve(), m = i(!1), a = 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);
ae(
() => e.value,
(t) => {
a.value = t, p = t, w();
}
), z({
idFor: x,
currentValue: a,
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 (a.value = t.target.value, w(), l === "change") {
if (p === a.value) return;
p = a.value, e.sync || (k("update:value", a.value), L(a.value)), u(e.onChange, a.value), e.sync || C();
} else
e.sync && (k("update:value", a.value), L(a.value)), u(e.onInput, a.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 = a.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, a.value = t;
}
function Y() {
const t = document.createElement("textarea");
t.style.height = "0", t.setAttribute("readonly", "readonly"), t.value = a.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 b(), y("div", {
id: o(x),
class: d(q.value),
onClick: l[1] || (l[1] = (_) => {
var F;
return (F = s.value) == null ? void 0 : F.focus();
})
}, [
N("textarea", S(o(e).controlAttrs, {
ref_key: "textarea",
ref: s,
class: [o(n).be("control"), (K = o(e).controlAttrs) == null ? void 0 : K.class, o(e).controlClass],
value: a.value,
rows: o(e).rows,
autofocus: o(e).autofocus,
autocomplete: G.value,
spellcheck: o(e).spellcheck,
disabled: o(e).disabled,
readonly: v.value,
placeholder: o(e).placeholder ?? o(j).placeholder,
maxlength: o(e).maxLength > 0 ? o(e).maxLength : void 0,
name: o(e).name || ((V = o(e).controlAttrs) == null ? void 0 : V.name),
"aria-labelledby": o(D),
onBlur: M,
onFocus: J,
onKeyup: [
le(O, ["enter"]),
X
],
onKeypress: W,
onKeydown: Q,
onInput: l[0] || (l[0] = //@ts-ignore
(..._) => o(I) && o(I)(..._)),
onChange: h,
onCompositionstart: Z,
onCompositionend: ee
}), null, 16, we),
N("div", {
class: d(o(n).be("extra"))
}, [
P(ne, {
name: o(n).ns("fade"),
appear: ""
}, {
default: ue(() => [
o(e).loading ? (b(), y("div", {
key: 0,
class: d(o(n).be("loading"))
}, [
P(o(Le), S(o(f).loading, {
effect: o(e).loadingEffect || o(f).loading.effect,
icon: o(e).loadingIcon || o(f).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
], 2)) : A("", !0)
]),
_: 1
}, 8, ["name"]),
o(e).maxLength > 0 && !o(e).hideCount ? (b(), y("div", {
key: 0,
class: d(o(n).be("count"))
}, [
se(t.$slots, "count", { value: a.value }, () => [
re(ce(o(e).maxLength === 1 / 0 ? c.value : `${c.value}/${o(e).maxLength}`), 1)
])
], 2)) : A("", !0)
], 2)
], 10, ke);
};
}
});
export {
Ae as default
};
//# sourceMappingURL=textarea.vue2.mjs.map