@indielayer/ui/lib/components/textarea/Textarea.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as q, useAttrs as R, computed as A, ref as F, watch as H, openBlock as u, createBlock as p, normalizeStyle as K, unref as r, normalizeClass as L, withCtx as O, createElementVNode as $, mergeProps as D, toHandlers as W, withKeys as X, createCommentVNode as G } from "vue";
import { useResizeObserver as J, useEventListener as M } 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 Q } from "../../composables/useCSS.js";
import { useTheme as U } from "../../composables/useTheme.js";
import { useCommon as f } from "../../composables/useCommon.js";
import { useColors as Y } from "../../composables/useColors.js";
import { useInputtable as a } from "../../composables/useInputtable.js";
import { useInteractive as c } from "../../composables/useInteractive.js";
import Z from "../label/Label.vue.js";
import _ from "../inputFooter/InputFooter.vue.js";
const ee = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], re = {
  ...f.props(),
  ...c.props(),
  ...a.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
}, oe = {
  name: "XTextarea",
  validators: {
    ...f.validators()
  }
}, ce = /* @__PURE__ */ q({
  ...oe,
  props: re,
  emits: a.emits(),
  setup(h, { expose: b, emit: g }) {
    const t = h, y = g, i = R(), v = A(() => Object.keys(i).reduce((e, s) => (s.startsWith("data-") && (e[s] = i[s]), e), {})), o = F(null);
    J(o, n), typeof window < "u" && M(window, "resize", n), H([() => t.modelValue, () => t.size], () => {
      setTimeout(n);
    });
    const w = Q("textarea"), S = Y().getPalette("primary"), k = w.get("border", S[400]);
    function N() {
      n();
    }
    function T(e) {
      t.preventEnter && e.preventDefault(), e.stopPropagation();
    }
    function n() {
      t.adjustToText && o.value && (o.value.style.height = "1px", o.value.style.height = 2 + o.value.scrollHeight + "px");
    }
    const { focus: m, blur: z } = c(o), {
      errorInternal: l,
      hideFooterInternal: C,
      isInsideForm: B,
      inputListeners: E,
      reset: I,
      validate: V,
      setError: x
    } = a(t, { focus: m, emit: y }), { styles: P, classes: d, className: j } = U("Textarea", {}, t, { errorInternal: l });
    return b({ focus: m, blur: z, reset: I, validate: V, setError: x }), (e, s) => (u(), p(Z, {
      style: K(r(P)),
      block: e.block,
      disabled: e.disabled,
      required: e.required,
      "is-inside-form": r(B),
      label: e.label,
      class: L([
        r(j),
        r(d).wrapper
      ]),
      tooltip: e.tooltip
    }, {
      default: O(() => [
        $("textarea", D({
          id: e.id,
          ref_key: "elRef",
          ref: o,
          class: ["", [
            r(d).input,
            r(l) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
          ]],
          style: r(k),
          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: typeof e.modelValue < "u" ? String(e.modelValue) : ""
        }, v.value, W(r(E), !0), {
          onKeydown: X(T, ["enter"]),
          onInput: N
        }), null, 16, ee),
        r(C) ? G("", !0) : (u(), p(_, {
          key: 0,
          error: r(l),
          helper: e.helper
        }, null, 8, ["error", "helper"]))
      ]),
      _: 1
    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  ce as default
};