(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(`.ui-text-area{--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);width:100%;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.ui-text-area__envelope{font-family:var(--font-family-base)}.ui-text-area textarea{min-height:calc(var(--control-height) - 2px);width:100%;padding:10px 12px;border:none;font-size:inherit;background-color:transparent;color:var(--txt-01);caret-color:var(--border-color-focus);cursor:inherit;resize:none;--thumb-color: var(--ic-02);overflow-y:auto}.ui-text-area textarea::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.ui-text-area textarea::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.ui-text-area textarea::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.ui-text-area textarea:focus{outline:none}.ui-text-area textarea::placeholder{color:var(--color-placeholder)}.ui-text-area label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.ui-text-area label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.ui-text-area__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.ui-text-area__append{display:flex;flex-direction:row;align-items:center;gap:4px}.ui-text-area__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.ui-text-area:hover{--contour-color: var(--control-hover-color)}.ui-text-area:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.ui-text-area:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.ui-text-area.dashed .ui-text-area__contour{border-style:dashed}.ui-text-area.nonEmpty{--prefix-color: var(--txt-01)}.ui-text-area.error{--contour-color: var(--txt-error)}.ui-text-area.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.ui-text-area.disabled *{color:var(--contour-color)}
.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
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";

import j from "../PlTooltip/PlTooltip.vue.js";
import H from "../../utils/DoubleContour.vue.js";

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
