sd-component-library/dist/input-BiwN2QGc.js

A Vue3 + Element Plus components library

import { computed as p, getCurrentInstance as We, defineComponent as Pe, useAttrs as Ye, useSlots as Xe, shallowRef as q, ref as J, watch as Q, nextTick as R, onMounted as _e, toRef as Ge, createElementBlock as b, openBlock as c, normalizeStyle as be, normalizeClass as v, unref as t, createCommentVNode as f, Fragment as ee, createElementVNode as V, renderSlot as D, createBlock as S, withCtx as L, resolveDynamicComponent as K, mergeProps as xe, withModifiers as Ze, createVNode as qe, toDisplayString as j } from "vue";
import { g as Je, u as Qe } from "./index-ran13ZnV.js";
import { i as we, f as et, l as tt, n as ot, o as nt, p as at, V as st, v as lt, w as rt, E as O, x as it } from "./use-form-common-props-OaJxnfm7.js";
import { c as Ve, j as Se, l as te, b as ut, d as U, k as W, y as dt, _ as ct, u as Ce, z as pt, N as ft, s as Ee, w as mt } from "./base-B4QkiMzD.js";
import { m as vt } from "./typescript-BpuhIBuJ.js";
import { U as oe, C as Ie, I as ze } from "./event-DTJXlN9S.js";
import { u as ht, b as yt } from "./option-DIvRGxKz.js";
const gt = () => Ve && /firefox/i.test(window.navigator.userAgent);
let g;
const bt = {
  height: "0",
  visibility: "hidden",
  overflow: gt() ? "" : "hidden",
  position: "absolute",
  "z-index": "-1000",
  top: "0",
  right: "0"
}, xt = [
  "letter-spacing",
  "line-height",
  "padding-top",
  "padding-bottom",
  "font-family",
  "font-weight",
  "font-size",
  "text-rendering",
  "text-transform",
  "width",
  "text-indent",
  "padding-left",
  "padding-right",
  "border-width",
  "box-sizing"
];
function wt(n) {
  const m = window.getComputedStyle(n), i = m.getPropertyValue("box-sizing"), o = Number.parseFloat(m.getPropertyValue("padding-bottom")) + Number.parseFloat(m.getPropertyValue("padding-top")), r = Number.parseFloat(m.getPropertyValue("border-bottom-width")) + Number.parseFloat(m.getPropertyValue("border-top-width"));
  return { contextStyle: xt.map((l) => [
    l,
    m.getPropertyValue(l)
  ]), paddingSize: o, borderSize: r, boxSizing: i };
}
function Ne(n, m = 1, i) {
  var o;
  g || (g = document.createElement("textarea"), document.body.appendChild(g));
  const { paddingSize: r, borderSize: u, boxSizing: l, contextStyle: x } = wt(n);
  x.forEach(([y, k]) => g == null ? void 0 : g.style.setProperty(y, k)), Object.entries(bt).forEach(([y, k]) => g == null ? void 0 : g.style.setProperty(y, k, "important")), g.value = n.value || n.placeholder || "";
  let d = g.scrollHeight;
  const C = {};
  l === "border-box" ? d = d + u : l === "content-box" && (d = d - r), g.value = "";
  const h = g.scrollHeight - r;
  if (Se(m)) {
    let y = h * m;
    l === "border-box" && (y = y + r + u), d = Math.max(y, d), C.minHeight = `${y}px`;
  }
  if (Se(i)) {
    let y = h * i;
    l === "border-box" && (y = y + r + u), d = Math.min(y, d);
  }
  return C.height = `${d}px`, (o = g.parentNode) == null || o.removeChild(g), g = void 0, C;
}
const St = ut({
  id: {
    type: String,
    default: void 0
  },
  size: et,
  disabled: Boolean,
  modelValue: {
    type: U([
      String,
      Number,
      Object
    ]),
    default: ""
  },
  maxlength: {
    type: [String, Number]
  },
  minlength: {
    type: [String, Number]
  },
  type: {
    type: String,
    default: "text"
  },
  resize: {
    type: String,
    values: ["none", "both", "horizontal", "vertical"]
  },
  autosize: {
    type: U([Boolean, Object]),
    default: !1
  },
  autocomplete: {
    type: String,
    default: "off"
  },
  formatter: {
    type: Function
  },
  parser: {
    type: Function
  },
  placeholder: {
    type: String
  },
  form: {
    type: String
  },
  readonly: Boolean,
  clearable: Boolean,
  showPassword: Boolean,
  showWordLimit: Boolean,
  suffixIcon: {
    type: we
  },
  prefixIcon: {
    type: we
  },
  containerRole: {
    type: String,
    default: void 0
  },
  tabindex: {
    type: [String, Number],
    default: 0
  },
  validateEvent: {
    type: Boolean,
    default: !0
  },
  inputStyle: {
    type: U([Object, Array, String]),
    default: () => vt({})
  },
  autofocus: Boolean,
  rows: {
    type: Number,
    default: 2
  },
  ...Je(["ariaLabel"]),
  inputmode: {
    type: U(String),
    default: void 0
  },
  name: String
}), Ct = {
  [oe]: (n) => te(n),
  input: (n) => te(n),
  change: (n) => te(n),
  focus: (n) => n instanceof FocusEvent,
  blur: (n) => n instanceof FocusEvent,
  clear: () => !0,
  mouseleave: (n) => n instanceof MouseEvent,
  mouseenter: (n) => n instanceof MouseEvent,
  keydown: (n) => n instanceof Event,
  compositionstart: (n) => n instanceof CompositionEvent,
  compositionupdate: (n) => n instanceof CompositionEvent,
  compositionend: (n) => n instanceof CompositionEvent
}, Et = ["class", "style"], It = /^on[A-Z]/, zt = (n = {}) => {
  const { excludeListeners: m = !1, excludeKeys: i } = n, o = p(() => ((i == null ? void 0 : i.value) || []).concat(Et)), r = We();
  return r ? p(() => {
    var u;
    return dt(Object.entries((u = r.proxy) == null ? void 0 : u.$attrs).filter(([l]) => !o.value.includes(l) && !(m && It.test(l))));
  }) : (W("use-attrs", "getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function"), p(() => ({})));
};
function Nt(n) {
  let m;
  function i() {
    if (n.value == null)
      return;
    const { selectionStart: r, selectionEnd: u, value: l } = n.value;
    if (r == null || u == null)
      return;
    const x = l.slice(0, Math.max(0, r)), d = l.slice(Math.max(0, u));
    m = {
      selectionStart: r,
      selectionEnd: u,
      value: l,
      beforeTxt: x,
      afterTxt: d
    };
  }
  function o() {
    if (n.value == null || m == null)
      return;
    const { value: r } = n.value, { beforeTxt: u, afterTxt: l, selectionStart: x } = m;
    if (u == null || l == null || x == null)
      return;
    let d = r.length;
    if (r.endsWith(l))
      d = r.length - l.length;
    else if (r.startsWith(u))
      d = u.length;
    else {
      const C = u[x - 1], h = r.indexOf(C, x - 1);
      h !== -1 && (d = h + 1);
    }
    n.value.setSelectionRange(d, d);
  }
  return [i, o];
}
const ke = "ElInput", Pt = Pe({
  name: ke,
  inheritAttrs: !1
}), Vt = /* @__PURE__ */ Pe({
  ...Pt,
  props: St,
  emits: Ct,
  setup(n, { expose: m, emit: i }) {
    const o = n, r = Ye(), u = zt(), l = Xe(), x = p(() => [
      o.type === "textarea" ? ne.b() : a.b(),
      a.m(k.value),
      a.is("disabled", E.value),
      a.is("exceed", Oe.value),
      {
        [a.b("group")]: l.prepend || l.append,
        [a.m("prefix")]: l.prefix || o.prefixIcon,
        [a.m("suffix")]: l.suffix || o.suffixIcon || o.clearable || o.showPassword,
        [a.bm("suffix", "password-clear")]: $.value && _.value,
        [a.b("hidden")]: o.type === "hidden"
      },
      r.class
    ]), d = p(() => [
      a.e("wrapper"),
      a.is("focus", X.value)
    ]), { form: C, formItem: h } = nt(), { inputId: y } = at(o, {
      formItemContext: h
    }), k = tt(), E = ot(), a = Ce("input"), ne = Ce("textarea"), B = q(), w = q(), Y = J(!1), A = J(!1), ae = J(), H = q(o.inputStyle), z = p(() => B.value || w.value), { wrapperRef: Te, isFocused: X, handleFocus: Fe, handleBlur: Me } = ht(z, {
      disabled: E,
      afterBlur() {
        var e;
        o.validateEvent && ((e = h == null ? void 0 : h.validate) == null || e.call(h, "blur").catch((s) => W(s)));
      }
    }), se = p(() => {
      var e;
      return (e = C == null ? void 0 : C.statusIcon) != null ? e : !1;
    }), T = p(() => (h == null ? void 0 : h.validateState) || ""), le = p(() => T.value && st[T.value]), Re = p(() => A.value ? lt : rt), Le = p(() => [
      r.style
    ]), re = p(() => [
      o.inputStyle,
      H.value,
      { resize: o.resize }
    ]), I = p(() => pt(o.modelValue) ? "" : String(o.modelValue)), $ = p(() => o.clearable && !E.value && !o.readonly && !!I.value && (X.value || Y.value)), _ = p(() => o.showPassword && !E.value && !!I.value), N = p(() => o.showWordLimit && !!o.maxlength && (o.type === "text" || o.type === "textarea") && !E.value && !o.readonly && !o.showPassword), G = p(() => I.value.length), Oe = p(() => !!N.value && G.value > Number(o.maxlength)), Be = p(() => !!l.suffix || !!o.suffixIcon || $.value || o.showPassword || N.value || !!T.value && se.value), [ie, ue] = Nt(B);
    Qe(w, (e) => {
      if (Ae(), !N.value || o.resize !== "both")
        return;
      const s = e[0], { width: P } = s.contentRect;
      ae.value = {
        right: `calc(100% - ${P + 15 + 6}px)`
      };
    });
    const F = () => {
      const { type: e, autosize: s } = o;
      if (!(!Ve || e !== "textarea" || !w.value))
        if (s) {
          const P = Ee(s) ? s.minRows : void 0, ye = Ee(s) ? s.maxRows : void 0, ge = Ne(w.value, P, ye);
          H.value = {
            overflowY: "hidden",
            ...ge
          }, R(() => {
            w.value.offsetHeight, H.value = ge;
          });
        } else
          H.value = {
            minHeight: Ne(w.value).minHeight
          };
    }, Ae = ((e) => {
      let s = !1;
      return () => {
        var P;
        if (s || !o.autosize)
          return;
        ((P = w.value) == null ? void 0 : P.offsetParent) === null || (e(), s = !0);
      };
    })(F), M = () => {
      const e = z.value, s = o.formatter ? o.formatter(I.value) : I.value;
      !e || e.value === s || (e.value = s);
    }, Z = async (e) => {
      ie();
      let { value: s } = e.target;
      if (o.formatter && o.parser && (s = o.parser(s)), !ce.value) {
        if (s === I.value) {
          M();
          return;
        }
        i(oe, s), i(ze, s), await R(), M(), ue();
      }
    }, de = (e) => {
      let { value: s } = e.target;
      o.formatter && o.parser && (s = o.parser(s)), i(Ie, s);
    }, {
      isComposing: ce,
      handleCompositionStart: pe,
      handleCompositionUpdate: fe,
      handleCompositionEnd: me
    } = yt({ emit: i, afterComposition: Z }), He = () => {
      ie(), A.value = !A.value, setTimeout(ue);
    }, $e = () => {
      var e;
      return (e = z.value) == null ? void 0 : e.focus();
    }, De = () => {
      var e;
      return (e = z.value) == null ? void 0 : e.blur();
    }, Ke = (e) => {
      Y.value = !1, i("mouseleave", e);
    }, je = (e) => {
      Y.value = !0, i("mouseenter", e);
    }, ve = (e) => {
      i("keydown", e);
    }, Ue = () => {
      var e;
      (e = z.value) == null || e.select();
    }, he = () => {
      i(oe, ""), i(Ie, ""), i("clear"), i(ze, "");
    };
    return Q(() => o.modelValue, () => {
      var e;
      R(() => F()), o.validateEvent && ((e = h == null ? void 0 : h.validate) == null || e.call(h, "change").catch((s) => W(s)));
    }), Q(I, () => M()), Q(() => o.type, async () => {
      await R(), M(), F();
    }), _e(() => {
      !o.formatter && o.parser && W(ke, "If you set the parser, you also need to set the formatter."), M(), R(F);
    }), m({
      input: B,
      textarea: w,
      ref: z,
      textareaStyle: re,
      autosize: Ge(o, "autosize"),
      isComposing: ce,
      focus: $e,
      blur: De,
      select: Ue,
      clear: he,
      resizeTextarea: F
    }), (e, s) => (c(), b("div", {
      class: v([
        t(x),
        {
          [t(a).bm("group", "append")]: e.$slots.append,
          [t(a).bm("group", "prepend")]: e.$slots.prepend
        }
      ]),
      style: be(t(Le)),
      onMouseenter: je,
      onMouseleave: Ke
    }, [
      f(" input "),
      e.type !== "textarea" ? (c(), b(ee, { key: 0 }, [
        f(" prepend slot "),
        e.$slots.prepend ? (c(), b("div", {
          key: 0,
          class: v(t(a).be("group", "prepend"))
        }, [
          D(e.$slots, "prepend")
        ], 2)) : f("v-if", !0),
        V("div", {
          ref_key: "wrapperRef",
          ref: Te,
          class: v(t(d))
        }, [
          f(" prefix slot "),
          e.$slots.prefix || e.prefixIcon ? (c(), b("span", {
            key: 0,
            class: v(t(a).e("prefix"))
          }, [
            V("span", {
              class: v(t(a).e("prefix-inner"))
            }, [
              D(e.$slots, "prefix"),
              e.prefixIcon ? (c(), S(t(O), {
                key: 0,
                class: v(t(a).e("icon"))
              }, {
                default: L(() => [
                  (c(), S(K(e.prefixIcon)))
                ]),
                _: 1
              }, 8, ["class"])) : f("v-if", !0)
            ], 2)
          ], 2)) : f("v-if", !0),
          V("input", xe({
            id: t(y),
            ref_key: "input",
            ref: B,
            class: t(a).e("inner")
          }, t(u), {
            name: e.name,
            minlength: e.minlength,
            maxlength: e.maxlength,
            type: e.showPassword ? A.value ? "text" : "password" : e.type,
            disabled: t(E),
            readonly: e.readonly,
            autocomplete: e.autocomplete,
            tabindex: e.tabindex,
            "aria-label": e.ariaLabel,
            placeholder: e.placeholder,
            style: e.inputStyle,
            form: e.form,
            autofocus: e.autofocus,
            role: e.containerRole,
            inputmode: e.inputmode,
            onCompositionstart: t(pe),
            onCompositionupdate: t(fe),
            onCompositionend: t(me),
            onInput: Z,
            onChange: de,
            onKeydown: ve
          }), null, 16, ["id", "name", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "role", "inputmode", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
          f(" suffix slot "),
          t(Be) ? (c(), b("span", {
            key: 1,
            class: v(t(a).e("suffix"))
          }, [
            V("span", {
              class: v(t(a).e("suffix-inner"))
            }, [
              !t($) || !t(_) || !t(N) ? (c(), b(ee, { key: 0 }, [
                D(e.$slots, "suffix"),
                e.suffixIcon ? (c(), S(t(O), {
                  key: 0,
                  class: v(t(a).e("icon"))
                }, {
                  default: L(() => [
                    (c(), S(K(e.suffixIcon)))
                  ]),
                  _: 1
                }, 8, ["class"])) : f("v-if", !0)
              ], 64)) : f("v-if", !0),
              t($) ? (c(), S(t(O), {
                key: 1,
                class: v([t(a).e("icon"), t(a).e("clear")]),
                onMousedown: Ze(t(ft), ["prevent"]),
                onClick: he
              }, {
                default: L(() => [
                  qe(t(it))
                ]),
                _: 1
              }, 8, ["class", "onMousedown"])) : f("v-if", !0),
              t(_) ? (c(), S(t(O), {
                key: 2,
                class: v([t(a).e("icon"), t(a).e("password")]),
                onClick: He
              }, {
                default: L(() => [
                  (c(), S(K(t(Re))))
                ]),
                _: 1
              }, 8, ["class"])) : f("v-if", !0),
              t(N) ? (c(), b("span", {
                key: 3,
                class: v(t(a).e("count"))
              }, [
                V("span", {
                  class: v(t(a).e("count-inner"))
                }, j(t(G)) + " / " + j(e.maxlength), 3)
              ], 2)) : f("v-if", !0),
              t(T) && t(le) && t(se) ? (c(), S(t(O), {
                key: 4,
                class: v([
                  t(a).e("icon"),
                  t(a).e("validateIcon"),
                  t(a).is("loading", t(T) === "validating")
                ])
              }, {
                default: L(() => [
                  (c(), S(K(t(le))))
                ]),
                _: 1
              }, 8, ["class"])) : f("v-if", !0)
            ], 2)
          ], 2)) : f("v-if", !0)
        ], 2),
        f(" append slot "),
        e.$slots.append ? (c(), b("div", {
          key: 1,
          class: v(t(a).be("group", "append"))
        }, [
          D(e.$slots, "append")
        ], 2)) : f("v-if", !0)
      ], 64)) : (c(), b(ee, { key: 1 }, [
        f(" textarea "),
        V("textarea", xe({
          id: t(y),
          ref_key: "textarea",
          ref: w,
          class: [t(ne).e("inner"), t(a).is("focus", t(X))]
        }, t(u), {
          minlength: e.minlength,
          maxlength: e.maxlength,
          tabindex: e.tabindex,
          disabled: t(E),
          readonly: e.readonly,
          autocomplete: e.autocomplete,
          style: t(re),
          "aria-label": e.ariaLabel,
          placeholder: e.placeholder,
          form: e.form,
          autofocus: e.autofocus,
          rows: e.rows,
          role: e.containerRole,
          onCompositionstart: t(pe),
          onCompositionupdate: t(fe),
          onCompositionend: t(me),
          onInput: Z,
          onFocus: t(Fe),
          onBlur: t(Me),
          onChange: de,
          onKeydown: ve
        }), null, 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows", "role", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onFocus", "onBlur"]),
        t(N) ? (c(), b("span", {
          key: 0,
          style: be(ae.value),
          class: v(t(a).e("count"))
        }, j(t(G)) + " / " + j(e.maxlength), 7)) : f("v-if", !0)
      ], 64))
    ], 38));
  }
});
var kt = /* @__PURE__ */ ct(Vt, [["__file", "input.vue"]]);
const Ht = mt(kt);
export {
  Ht as E
};