vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
119 lines (118 loc) • 4.53 kB
JavaScript
import { defineComponent as T, ref as r, computed as n, watch as _, nextTick as j, onMounted as H, createElementBlock as p, openBlock as g, normalizeStyle as x, normalizeClass as w, unref as c, 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__ */ T({
__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(C, { emit: z }) {
const t = C, s = r(null), i = r(!1), a = r(), u = r(32), { colorPalettes: d, shadowColor: S } = K("Textarea"), l = z, b = 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), $ = n(() => t.maxlength ? `${a.value ? a.value.length : 0} / ${t.maxlength}` : a.value ? a.value.length : 0), B = n(() => "lazy" in t.valueModifiers);
_(
() => t.value,
async (e) => {
a.value !== e && (a.value = e), JSON.stringify(f.value) !== "{}" && (u.value = 32, await j(), v());
},
{
immediate: !0,
flush: "post"
}
), H(() => {
v();
});
function v() {
u.value = s.value.scrollHeight + 2;
}
function E(e) {
i.value = !0, l("compositionstart", e);
}
function k(e) {
var m;
i.value = !1, l("compositionend", e);
const o = new Event("change");
(m = e.target) == null || m.dispatchEvent(o);
}
function R(e) {
if (!i.value) {
const o = e.target;
a.value = o.value, B.value || (l("update:value", o.value), l("change", e));
}
}
function L(e) {
const o = e.target;
o.value !== t.value && (l("update:value", o.value), l("change", e));
}
function M(e) {
i.value || l("enter", e);
}
function N() {
var e;
a.value = "", l("update:value", ""), (e = s.value) == null || e.focus();
}
return (e, o) => (g(), p("div", {
class: w(["m-textarea", { "show-count": e.showCount }]),
style: x(`
--textarea-width: ${b.value};
--textarea-primary-color-hover: ${c(d)[4]};
--textarea-primary-color-focus: ${c(d)[4]};
--textarea-primary-shadow-color: ${c(S)};
`),
"data-count": $.value
}, [
y("textarea", {
ref_key: "textareaRef",
ref: s,
type: "hidden",
class: w(["textarea-item", { "clear-class": h.value, "textarea-disabled": e.disabled }]),
style: x(f.value),
value: a.value,
placeholder: e.placeholder,
maxlength: e.maxlength,
disabled: e.disabled,
onCompositionstart: E,
onCompositionend: k,
onInput: R,
onChange: L,
onKeydown: I(M, ["enter"])
}, null, 46, A),
h.value ? (g(), p("svg", {
key: 0,
class: "clear-svg",
onClick: N,
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
};