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 r, computed as n, watch as T, nextTick as _, onMounted as j, createElementBlock as m, openBlock as p, normalizeStyle as g, normalizeClass as x, unref as c, createElementVNode as w, createCommentVNode as H, withKeys as V } from "vue";
import { useInject as I } from "../utils/index.js";
const K = ["data-count"], O = ["value", "placeholder", "maxlength", "disabled"], P = /* @__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(y, { emit: C }) {
const t = y, s = r(null), i = r(!1), a = r(), u = r(32), { colorPalettes: d, shadowColor: z } = I("Textarea"), l = C, S = n(() => typeof t.width == "number" ? `${t.width}px` : t.width), f = n(() => {
if (typeof t.autoSize == "object") {
const e = {
height: `${u.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: `${u.value}px`,
resize: "none"
} : {};
}), h = n(() => !t.disabled && t.allowClear && a.value), b = n(() => t.maxlength ? `${a.value ? a.value.length : 0} / ${t.maxlength}` : a.value ? a.value.length : 0), $ = n(() => "lazy" in t.valueModifiers);
T(
() => t.value,
async (e) => {
a.value !== e && (a.value = e), JSON.stringify(f.value) !== "{}" && (u.value = 32, await _(), v());
},
{
immediate: !0,
flush: "post"
}
), j(() => {
v();
});
function v() {
u.value = s.value.scrollHeight + 2;
}
function B(e) {
i.value = !0, l("compositionstart", e);
}
function E(e) {
i.value = !1, l("compositionend", e);
const o = new Event("change");
e.target?.dispatchEvent(o);
}
function k(e) {
if (!i.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) {
i.value || l("enter", e);
}
function M() {
a.value = "", l("update:value", ""), s.value?.focus();
}
return (e, o) => (p(), m("div", {
class: x(["textarea-wrap", { "show-count": e.showCount }]),
style: g(`
--textarea-width: ${S.value};
--textarea-primary-color-hover: ${c(d)[4]};
--textarea-primary-color-focus: ${c(d)[4]};
--textarea-primary-shadow-color: ${c(z)};
`),
"data-count": b.value
}, [
w("textarea", {
ref_key: "textareaRef",
ref: s,
type: "hidden",
class: x(["textarea-item", { "clear-class": h.value, "textarea-disabled": e.disabled }]),
style: g(f.value),
value: a.value,
placeholder: e.placeholder,
maxlength: e.maxlength,
disabled: e.disabled,
onCompositionstart: B,
onCompositionend: E,
onInput: k,
onChange: R,
onKeydown: V(L, ["enter"])
}, null, 46, O),
h.value ? (p(), m("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] = [
w("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)
])])) : H("", !0)
], 14, K));
}
});
export {
P as default
};