vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
117 lines (116 loc) • 4.48 kB
JavaScript
import { defineComponent as N, ref as s, computed as i, watch as T, nextTick as j, onMounted as H, createElementBlock as p, openBlock as x, normalizeStyle as g, normalizeClass as w, unref as d, createElementVNode as y, createCommentVNode as V, withKeys as I } from "vue";
import { useInject as K } from "../utils/index.js";
const O = ["data-count"], A = ["value", "placeholder", "maxlength", "disabled"], W = /* @__PURE__ */ N({
__name: "Textarea",
props: {
width: { default: "100%" },
allowClear: { type: Boolean, default: !1 },
autoSize: { type: [Boolean, Object], default: !1 },
disabled: { type: Boolean, default: !1 },
placeholder: { default: void 0 },
maxlength: { default: void 0 },
showCount: { type: Boolean, default: !1 },
value: { default: "" },
valueModifiers: { default: () => ({}) }
},
emits: ["update:value", "compositionstart", "compositionend", "change", "enter"],
setup(n, { emit: C }) {
const t = n, c = s(null), u = s(!1), a = s(), r = s(32), { colorPalettes: f, shadowColor: z } = K("Textarea"), l = C, S = i(() => typeof t.width == "number" ? `${t.width}px` : t.width), h = i(() => {
if (typeof t.autoSize == "object") {
const e = {
height: `${r.value}px`,
resize: "none"
};
return "minRows" in t.autoSize && (e["min-height"] = `${t.autoSize.minRows * 22 + 10}px`), "maxRows" in t.autoSize && (e["max-height"] = `${t.autoSize.maxRows * 22 + 10}px`), e;
}
if (typeof t.autoSize == "boolean")
return t.autoSize ? {
height: `${r.value}px`,
resize: "none"
} : {};
}), v = i(() => !t.disabled && t.allowClear && a.value), b = i(() => t.maxlength ? `${a.value ? a.value.length : 0} / ${t.maxlength}` : a.value ? a.value.length : 0), $ = i(() => "lazy" in t.valueModifiers);
T(
() => t.value,
async (e) => {
a.value !== e && (a.value = e), JSON.stringify(h.value) !== "{}" && (r.value = 32, await j(), m());
},
{
immediate: !0,
flush: "post"
}
), H(() => {
m();
});
function m() {
r.value = c.value.scrollHeight + 2;
}
function B(e) {
u.value = !0, l("compositionstart", e);
}
function E(e) {
u.value = !1, l("compositionend", e);
const o = new Event("change");
e.target?.dispatchEvent(o);
}
function k(e) {
if (!u.value) {
const o = e.target;
a.value = o.value, $.value || (l("update:value", o.value), l("change", e));
}
}
function R(e) {
const o = e.target;
o.value !== t.value && (l("update:value", o.value), l("change", e));
}
function L(e) {
u.value || l("enter", e);
}
function M() {
a.value = "", l("update:value", ""), c.value?.focus();
}
return (e, o) => (x(), p("div", {
class: w(["textarea-wrap", { "show-count": n.showCount }]),
style: g(`
--textarea-width: ${S.value};
--textarea-primary-color-hover: ${d(f)[4]};
--textarea-primary-color-focus: ${d(f)[4]};
--textarea-primary-shadow-color: ${d(z)};
`),
"data-count": b.value
}, [
y("textarea", {
ref_key: "textareaRef",
ref: c,
type: "hidden",
class: w(["textarea-item", { "clear-class": v.value, "textarea-disabled": n.disabled }]),
style: g(h.value),
value: a.value,
placeholder: n.placeholder,
maxlength: n.maxlength,
disabled: n.disabled,
onCompositionstart: B,
onCompositionend: E,
onInput: k,
onChange: R,
onKeydown: I(L, ["enter"])
}, null, 46, A),
v.value ? (x(), p("svg", {
key: 0,
class: "clear-svg",
onClick: M,
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [...o[0] || (o[0] = [
y("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" }, null, -1)
])])) : V("", !0)
], 14, O));
}
});
export {
W as default
};