maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
202 lines (201 loc) • 6.73 kB
JavaScript
import './assets/MazTextarea.BYPQCeL_.css';var I = Object.defineProperty;
var M = (r, o, t) => o in r ? I(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
var z = (r, o, t) => M(r, typeof o != "symbol" ? o + "" : o, t);
import { computed as n, useId as R, defineComponent as N, ref as w, onMounted as U, onBeforeUnmount as C, useSlots as H, openBlock as l, createElementBlock as i, normalizeClass as B, unref as p, normalizeStyle as A, renderSlot as k, createTextVNode as D, toDisplayString as T, createCommentVNode as m, withDirectives as J, createElementVNode as O, mergeProps as _, toHandlers as j, vModelText as P } from "vue";
function G({
componentName: r,
providedId: o
}) {
return n(() => o ?? `${r}-${R().replace(/:/g, "")}`);
}
function K(r, o) {
let t;
return function(...a) {
clearTimeout(t), t = setTimeout(() => {
r.apply(this, a);
}, o);
};
}
class Q {
constructor(o) {
z(this, "element");
this.element = o, this.onFocus = this.onFocus.bind(this), this.autogrow = this.autogrow.bind(this), this.onResize = K(this.onResize.bind(this), 200), this.connect();
}
connect() {
this.element.addEventListener("focus", this.onFocus), this.element.style.resize = "none", this.element.style.boxSizing = "border-box";
}
disconnect() {
window.removeEventListener("resize", this.onResize), this.element.removeEventListener("input", this.autogrow);
}
onFocus() {
this.autogrow(), this.element.addEventListener("input", this.autogrow), window.addEventListener("resize", this.onResize), this.element.removeEventListener("focus", this.onFocus);
}
onResize() {
this.autogrow();
}
autogrow() {
this.element.style.height = "auto", this.element.style.overflow = "hidden", this.element.style.height = `${this.element.scrollHeight}px`;
}
}
const W = ["for"], X = ["for"], Y = { key: 1 }, Z = { key: 2 }, x = ["id", "placeholder", "name", "disabled", "required"], ee = {
key: 1,
class: "m-textarea__append"
}, te = /* @__PURE__ */ N({
inheritAttrs: !1,
__name: "MazTextarea",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
id: { default: void 0 },
name: { default: "MazTextarea" },
label: { default: void 0 },
placeholder: { default: void 0 },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
color: { default: "primary" },
roundedSize: {},
padding: { type: Boolean, default: !0 },
transparent: { type: Boolean, default: !1 },
border: { type: Boolean, default: !0 },
appendJustify: { default: "end" }
},
emits: ["update:model-value", "input", "focus", "blur", "change"],
setup(r, { emit: o }) {
const t = r, a = o;
let s;
const u = G({
componentName: "MazTextarea",
providedId: t.id
}), c = w(), d = w(!1), E = n(() => t.modelValue !== void 0 && t.modelValue !== "");
U(() => {
c.value && (s = new Q(c.value));
}), C(() => {
s == null || s.disconnect();
});
const h = n({
get: () => t.modelValue,
set: (e) => {
a("update:model-value", e), a("input", e);
}
});
function S(e) {
a("focus", e), d.value = !0;
}
function V(e) {
a("blur", e), d.value = !1;
}
function $(e) {
a("change", e);
}
const b = H(), f = n(() => t.label || t.hint || !!b.label), L = n(
() => f.value && (d.value || E.value || !!t.placeholder)
), v = n(() => !!b.append), y = n(() => {
if (t.error)
return "maz-border-danger";
if (t.success)
return "maz-border-success";
if (t.warning)
return "maz-border-warning";
if (d.value) {
if (t.color === "black")
return "maz-border-black";
if (t.color === "danger")
return "maz-border-danger";
if (t.color === "info")
return "maz-border-info";
if (t.color === "primary")
return "maz-border-primary";
if (t.color === "secondary")
return "maz-border-secondary";
if (t.color === "success")
return "maz-border-success";
if (t.color === "warning")
return "maz-border-warning";
if (t.color === "white")
return "maz-border-white";
}
return "--default-border";
}), q = n(() => y.value !== "--default-border");
return (e, g) => (l(), i("label", {
class: B(["m-textarea m-reset-css", [
{
"--is-disabled": e.disabled,
"--has-label": f.value,
"--background-transparent": e.transparent,
"--padding": e.padding,
"--border": e.border,
"--has-border-style": q.value
},
y.value,
e.roundedSize ? `--rounded-${e.roundedSize}` : "--rounded",
t.class
]]),
for: p(u),
style: A([e.style, `--append-justify: ${e.appendJustify}`])
}, [
f.value ? (l(), i("label", {
key: 0,
for: p(u),
class: B(["m-textarea__label", [
{
"maz-text-danger-600": e.error,
"maz-text-success-600": e.success,
"maz-text-warning-600": e.warning,
"--has-state": e.error || e.warning || e.success,
"--should-up": L.value
}
]])
}, [
e.hint ? (l(), i(
"span",
Y,
T(e.hint),
1
/* TEXT */
)) : k(e.$slots, "label", { key: 0 }, () => [
D(
T(e.label),
1
/* TEXT */
)
], !0),
e.required ? (l(), i("sup", Z, "*")) : m("v-if", !0)
], 10, X)) : m("v-if", !0),
J(O("textarea", _({
id: p(u),
ref_key: "TextareaElement",
ref: c
}, e.$attrs, {
"onUpdate:modelValue": g[0] || (g[0] = (F) => h.value = F),
placeholder: e.placeholder,
name: e.name,
disabled: e.disabled,
required: e.required,
class: { "--has-append": v.value }
}, j({
blur: V,
focus: S,
change: $
}, !0)), null, 16, x), [
[P, h.value]
]),
v.value ? (l(), i("div", ee, [
k(e.$slots, "append", {}, void 0, !0)
])) : m("v-if", !0)
], 14, W));
}
}), oe = (r, o) => {
const t = r.__vccOpts || r;
for (const [a, s] of o)
t[a] = s;
return t;
}, ne = /* @__PURE__ */ oe(te, [["__scopeId", "data-v-cc98bc3c"]]);
export {
ne as default
};