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
};
