@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
142 lines (141 loc) • 5.13 kB
JavaScript
import { defineComponent as O, useAttrs as D, computed as i, ref as W, watch as X, openBlock as u, createBlock as m, normalizeStyle as G, unref as r, normalizeClass as h, withCtx as J, createElementVNode as b, renderSlot as g, mergeProps as M, toHandlers as Q, withKeys as U, createCommentVNode as v } from "vue";
import { useResizeObserver as Y, useEventListener as Z } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useCSS as _ } from "../../composables/useCSS.js";
import { useTheme as ee } from "../../composables/useTheme.js";
import { useCommon as y } from "../../composables/useCommon.js";
import { useColors as re } from "../../composables/useColors.js";
import { useInputtable as d } from "../../composables/useInputtable.js";
import { useInteractive as w } from "../../composables/useInteractive.js";
import oe from "../label/Label.vue.js";
import te from "../inputFooter/InputFooter.vue.js";
import ne from "../icon/Icon.vue.js";
import { closeIcon as se } from "../../common/icons.js";
const le = { class: "relative" }, ae = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], ie = {
...y.props(),
...w.props(),
...d.props(),
dir: {
type: String,
default: "ltr"
},
rows: {
type: [Number, String],
default: 2
},
max: [Number, String],
maxlength: [Number, String],
min: [Number, String],
minlength: [Number, String],
placeholder: String,
adjustToText: Boolean,
preventEnter: Boolean,
block: Boolean,
resizable: Boolean,
showCounter: Boolean,
clearable: Boolean
}, ue = {
name: "XTextarea",
validators: {
...y.validators()
}
}, ze = /* @__PURE__ */ O({
...ue,
props: ie,
emits: d.emits(),
setup(S, { expose: C, emit: k }) {
const o = S, z = k, p = D(), B = i(() => Object.keys(p).reduce((e, n) => (n.startsWith("data-") && (e[n] = p[n]), e), {})), t = W(null);
Y(t, s), typeof window < "u" && Z(window, "resize", s), X([() => o.modelValue, () => o.size], () => {
setTimeout(s);
});
const I = _("textarea"), N = re().getPalette("primary"), T = I.get("border", N[400]);
function E() {
s();
}
function V(e) {
o.preventEnter && e.preventDefault(), e.stopPropagation();
}
function s() {
o.adjustToText && t.value && (t.value.style.height = "1px", t.value.style.height = 2 + t.value.scrollHeight + "px");
}
const { focus: c, blur: $ } = w(t), {
errorInternal: l,
hideFooterInternal: x,
isInsideForm: P,
inputListeners: j,
reset: f,
validate: q,
setError: L
} = d(o, { focus: c, emit: z }), R = i(() => {
const e = o.modelValue;
return e ? String(e).length : 0;
}), A = i(() => o.clearable && o.modelValue !== "");
function F(e) {
return typeof e > "u" || e === null;
}
const { styles: H, classes: a, className: K } = ee("Textarea", {}, o, { errorInternal: l });
return C({ focus: c, blur: $, reset: f, validate: q, setError: L }), (e, n) => (u(), m(oe, {
style: G(r(H)),
block: e.block,
disabled: e.disabled,
required: e.required,
"is-inside-form": r(P),
label: e.label,
class: h([
r(K),
r(a).wrapper
]),
tooltip: e.tooltip
}, {
default: J(() => [
b("div", le, [
g(e.$slots, "prefix"),
b("textarea", M({
id: e.id,
ref_key: "elRef",
ref: t,
class: ["", [
r(a).input,
r(l) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
]],
style: r(T),
disabled: e.disabled,
max: e.max,
maxlength: e.maxlength,
min: e.min,
dir: e.dir,
rows: e.rows,
minlength: e.minlength,
name: e.name,
placeholder: e.placeholder,
readonly: e.readonly,
value: F(e.modelValue) ? "" : String(e.modelValue)
}, B.value, Q(r(j), !0), {
onKeydown: U(V, ["enter"]),
onInput: E
}), null, 16, ae),
g(e.$slots, "suffix", {}, () => [
A.value ? (u(), m(ne, {
key: 0,
size: e.size,
icon: r(se),
class: h(["right-2 cursor-pointer", r(a).icon]),
onClick: n[0] || (n[0] = (de) => r(f)())
}, null, 8, ["size", "icon", "class"])) : v("", !0)
])
]),
r(x) ? v("", !0) : (u(), m(te, {
key: 0,
error: r(l),
helper: e.helper,
"character-count": R.value,
"max-characters": e.maxlength,
"show-counter": e.showCounter
}, null, 8, ["error", "helper", "character-count", "max-characters", "show-counter"]))
]),
_: 3
}, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
}
});
export {
ze as default
};