(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.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}
.pl-text-field{--pl-text-field-text-color: var(--txt-01);--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);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field 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)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__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}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__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}.pl-text-field__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}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field: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)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
import { defineComponent as I, mergeModels as N, useSlots as $, useModel as O, ref as h, reactive as T, computed as i, createElementBlock as d, openBlock as a, createElementVNode as p, createCommentVNode as n, normalizeClass as j, withDirectives as z, createVNode as L, createBlock as f, unref as c, toDisplayString as m, withCtx as U, renderSlot as E, vModelDynamic as A, withModifiers as V } from "vue";
import G from "../../assets/images/required.svg.js";
import { getErrorMessage as H } from "../../helpers/error.js";
import J from "../../utils/DoubleContour.vue.js";

import { useLabelNotch as K } from "../../utils/useLabelNotch.js";
import { useValidation as Q } from "../../utils/useValidation.js";
import W from "../PlIcon16/PlIcon16.vue.js";
import X from "../PlIcon24/PlIcon24.vue.js";
import Y from "../PlSvg/PlSvg.vue.js";
import Z from "../PlTooltip/PlTooltip.vue.js";

const ee = { class: "pl-text-field__envelope" }, le = {
  key: 0,
  ref: "label"
}, te = {
  key: 1,
  class: "pl-text-field__prefix"
}, oe = ["disabled", "placeholder", "type"], re = {
  key: 0,
  class: "pl-text-field__error"
}, ae = {
  key: 1,
  class: "pl-text-field__helper"
}, se = {
  name: "PlTextField"
}, ke = /* @__PURE__ */ I({
  ...se,
  props: /* @__PURE__ */ N({
    label: {},
    clearable: { type: [Boolean, Function] },
    parse: { type: Function },
    required: { type: Boolean },
    error: {},
    helper: {},
    placeholder: {},
    disabled: { type: Boolean },
    dashed: { type: Boolean },
    prefix: {},
    rules: {},
    type: {},
    groupPosition: {}
  }, {
    modelValue: {
      required: !0
    },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(l) {
    const _ = $(), o = O(l, "modelValue"), e = l, y = h(void 0), b = h(), u = h(!1), s = T({
      cached: void 0
    }), v = i({
      get() {
        return s.cached ? s.cached.value : o.value === void 0 || o.value === null ? "" : String(o.value);
      },
      set(t) {
        if (s.cached = void 0, e.parse)
          try {
            o.value = e.parse(t);
          } catch (r) {
            s.cached = {
              error: r instanceof Error ? r.message : String(r),
              value: t
            };
          }
        else
          o.value = t;
      }
    }), C = i(() => e.type && e.type === "password" ? u.value ? "text" : e.type : "text"), M = i(() => u.value ? "view-show" : "view-hide"), P = () => {
      e.clearable && (s.cached = void 0, o.value = e.clearable === !0 ? "" : e.clearable());
    }, k = Q(v, e.rules || []), S = i(() => e.clearable ? e.clearable === !0 ? o.value === "" : o.value === e.clearable() : o.value === ""), g = i(() => !S.value), x = i(() => {
      const t = [], r = H(e.error);
      return r && t.push(r), s.cached && t.push(s.cached.error), k.value.isValid || t.push(...k.value.errors), t;
    }), w = i(() => x.value.length > 0), B = i(() => e.clearable && g.value && e.type !== "password" && !e.disabled), F = () => u.value = !u.value, R = () => {
      s.cached = void 0;
    }, q = () => {
      var t;
      return (t = b.value) == null ? void 0 : t.focus();
    };
    return K(y), (t, r) => (a(), d("div", ee, [
      p("div", {
        ref_key: "rootRef",
        ref: y,
        class: j(["pl-text-field", {
          error: w.value,
          disabled: l.disabled,
          dashed: l.dashed,
          nonEmpty: g.value
        }])
      }, [
        l.label ? (a(), d("label", le, [
          l.required ? (a(), f(c(Y), {
            key: 0,
            uri: c(G)
          }, null, 8, ["uri"])) : n("", !0),
          p("span", null, m(l.label), 1),
          c(_).tooltip ? (a(), f(c(Z), {
            key: 1,
            class: "info",
            position: "top"
          }, {
            tooltip: U(() => [
              E(t.$slots, "tooltip")
            ]),
            _: 3
          })) : n("", !0)
        ], 512)) : n("", !0),
        l.prefix ? (a(), d("div", te, m(l.prefix), 1)) : n("", !0),
        z(p("input", {
          ref_key: "inputRef",
          ref: b,
          "onUpdate:modelValue": r[0] || (r[0] = (D) => v.value = D),
          disabled: l.disabled,
          placeholder: l.placeholder || "...",
          type: C.value,
          spellcheck: "false",
          onFocusout: R
        }, null, 40, oe), [
          [A, v.value]
        ]),
        p("div", {
          class: "pl-text-field__append",
          onClick: q
        }, [
          B.value ? (a(), f(c(W), {
            key: 0,
            class: "pl-text-field__clearable",
            name: "delete-clear",
            onClick: V(P, ["stop"])
          })) : n("", !0),
          l.type === "password" ? (a(), f(c(X), {
            key: 1,
            name: M.value,
            style: { cursor: "pointer" },
            onClick: V(F, ["stop"])
          }, null, 8, ["name"])) : n("", !0),
          E(t.$slots, "append")
        ]),
        L(J, {
          class: "pl-text-field__contour",
          "group-position": l.groupPosition
        }, null, 8, ["group-position"])
      ], 2),
      w.value ? (a(), d("div", re, m(x.value.join(" ")), 1)) : l.helper ? (a(), d("div", ae, m(l.helper), 1)) : n("", !0)
    ]));
  }
});
export {
  ke as default
};
//# sourceMappingURL=PlTextField.vue.js.map
