import { defineComponent as E, useSlots as S, ref as v, computed as a, onMounted as $, createElementBlock as s, openBlock as o, createElementVNode as n, createCommentVNode as i, normalizeClass as C, withDirectives as N, createVNode as q, createBlock as g, unref as d, toDisplayString as c, withCtx as D, renderSlot as b, vModelText as M } from "vue";
/* empty css                 */
import j from "../PlTooltip/PlTooltip.vue.js";
import H from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import { useLabelNotch as P } from "../../utils/useLabelNotch.js";
import { useValidation as T } from "../../utils/useValidation.js";
import { getErrorMessage as z } from "../../helpers/error.js";
import A from "../PlSvg/PlSvg.vue.js";
import I from "../../assets/images/required.svg.js";
const L = { class: "ui-text-area__envelope" }, R = {
  key: 0,
  ref: "label"
}, U = ["readonly", "rows", "disabled", "placeholder"], F = { class: "ui-text-area__append" }, G = {
  key: 0,
  class: "ui-text-area__error"
}, J = {
  key: 1,
  class: "ui-text-area__helper"
}, K = {
  name: "PlTextArea"
}, le = /* @__PURE__ */ E({
  ...K,
  props: {
    modelValue: {},
    label: {},
    required: { type: Boolean },
    error: {},
    helper: {},
    placeholder: {},
    disabled: { type: Boolean },
    readonly: { type: Boolean },
    dashed: { type: Boolean },
    rows: {},
    autogrow: { type: Boolean },
    rules: {}
  },
  emits: ["update:modelValue"],
  setup(t, { emit: k }) {
    const x = S(), _ = k, r = t, m = v(), p = v(), u = a({
      get() {
        return r.modelValue ?? "";
      },
      set(e) {
        _("update:modelValue", e);
      }
    }), V = a(() => !!r.modelValue), w = T(u, r.rules || []);
    P(m);
    const h = a(() => {
      const e = [], l = z(r.error);
      return l && e.push(l), e.push(...w.value.errors), e;
    }), f = a(() => h.value.length > 0), y = () => {
      if (!r.autogrow)
        return;
      const e = p.value;
      e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
    };
    return $(() => {
      y();
    }), (e, l) => (o(), s("div", L, [
      n("div", {
        ref_key: "root",
        ref: m,
        class: C(["ui-text-area", { error: f.value, disabled: t.disabled, dashed: t.dashed, nonEmpty: V.value }])
      }, [
        t.label ? (o(), s("label", R, [
          t.required ? (o(), g(d(A), {
            key: 0,
            uri: d(I)
          }, null, 8, ["uri"])) : i("", !0),
          n("span", null, c(t.label), 1),
          d(x).tooltip ? (o(), g(d(j), {
            key: 1,
            class: "info",
            position: "top"
          }, {
            tooltip: D(() => [
              b(e.$slots, "tooltip")
            ]),
            _: 3
          })) : i("", !0)
        ], 512)) : i("", !0),
        N(n("textarea", {
          ref_key: "input",
          ref: p,
          "onUpdate:modelValue": l[0] || (l[0] = (B) => u.value = B),
          readonly: t.readonly,
          rows: t.rows,
          disabled: t.disabled,
          placeholder: t.placeholder ?? "...",
          spellcheck: "false",
          onInput: y
        }, null, 40, U), [
          [M, u.value]
        ]),
        n("div", F, [
          b(e.$slots, "append")
        ]),
        q(H, { class: "ui-text-area__contour" })
      ], 2),
      f.value ? (o(), s("div", G, c(h.value.join(" ")), 1)) : t.helper ? (o(), s("div", J, c(t.helper), 1)) : i("", !0)
    ]));
  }
});
export {
  le as default
};
//# sourceMappingURL=PlTextArea.vue.js.map
