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