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