easy-component-ui 3.0.13 → 3.0.14

package/dist/components/ea-input.js

@@ -1,588 +0,0 @@
-var B = Object.defineProperty;
-var $ = (n) => {
-  throw TypeError(n);
-};
-var F = (n, o, t) => o in n ? B(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
-var T = (n, o, t) => F(n, typeof o != "symbol" ? o + "" : o, t), k = (n, o, t) => o.has(n) || $("Cannot " + t);
-var e = (n, o, t) => (k(n, o, "read from private field"), t ? t.call(n) : o.get(n)), a = (n, o, t) => o.has(n) ? $("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(n) : o.set(n, t), h = (n, o, t, s) => (k(n, o, "write to private field"), s ? s.call(n, t) : o.set(n, t), t);
-import { F as I } from "../core/FormBase.js";
-import { E as M } from "../utils/Utils.js";
-import { s as V } from "../css/ea-input.style.js";
-class U extends Event {
-  constructor(o) {
-    super("ea-clear", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = o;
-  }
-}
-var g, C, _, w, y, i, R, b, m, p, x, S, v, u, l, d, r, P, O, E, A, q, z, L, H, f;
-class G extends I {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, g);
-    /** @type {HTMLElement} */
-    a(this, C);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, w);
-    /** @type {HTMLElement} */
-    a(this, y);
-    /** @type {HTMLInputElement | HTMLTextAreaElement} */
-    a(this, i);
-    /** @type {HTMLElement} */
-    a(this, R);
-    /** @type {HTMLElement} */
-    a(this, b);
-    /** @type {HTMLElement} */
-    a(this, m);
-    /** @type {HTMLElement} */
-    a(this, p);
-    /** @type {HTMLElement} */
-    a(this, x);
-    /** @type {HTMLElement} */
-    a(this, S);
-    /** @type {HTMLElement} */
-    a(this, v);
-    /** @type {AbortController} */
-    a(this, u);
-    a(this, l, {
-      /** @type {AbortController} */
-      clearableController: null,
-      /** @type {AbortController} */
-      showPasswordController: null,
-      /** @type {AbortController} */
-      autosizeController: null,
-      /** @type {AbortController} */
-      wordCountController: null
-    });
-    a(this, d, {
-      isFocus: !1,
-      isMouseenter: !1,
-      originTextareaHeight: 0,
-      isOriginalRendered: !1
-    });
-    a(this, r, {
-      isOriginalRenderedPromise: new Promise((t) => {
-        h(this, d, new Proxy(e(this, d), {
-          set: (s, c, N) => (c === "isOriginalRendered" && N && t(!0), Reflect.set(s, c, N))
-        }));
-      })
-    });
-    T(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, v).textContent = t;
-        }
-      },
-      type: {
-        type: [
-          "textarea",
-          "text",
-          "button",
-          "checkbox",
-          "color",
-          "date",
-          "datetime-local",
-          "email",
-          "file",
-          "hidden",
-          "image",
-          "month",
-          "number",
-          "password",
-          "radio",
-          "range",
-          "reset",
-          "search",
-          "submit",
-          "tel",
-          "time",
-          "url",
-          "week"
-        ],
-        default: "text",
-        observer: async (t) => {
-          e(this, P).call(this, t), this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: ["large", "default", "small"],
-        default: "default",
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, t = typeof t == "string" && t === "" ? null : t, e(this, i).value = t, this.setValue(t), this.resetCustomValidity(), (this.clearable || this["show-password"]) && this.updateContainerClasslist();
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).required = t;
-        }
-      },
-      placeholder: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).placeholder = t;
-        }
-      },
-      maxlength: {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).maxLength = t;
-        }
-      },
-      minlength: {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).minLength = t;
-        }
-      },
-      clearable: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var s;
-          (s = e(this, l).clearableController) == null || s.abort(), this.updateContainerClasslist(), t && (e(this, l).clearableController = new AbortController(), e(this, m).addEventListener(
-            "click",
-            e(this, z),
-            {
-              signal: e(this, l).clearableController.signal
-            }
-          ));
-        }
-      },
-      "clear-icon": {
-        type: String,
-        default: "xmark",
-        observer: (t) => {
-          this.clearable && e(this, m).setAttribute("name", t);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).disabled = t, this.updateContainerClasslist();
-        }
-      },
-      "show-password": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var s;
-          this.type !== "textarea" && ((s = e(this, l).showPasswordController) == null || s.abort(), this.type === "text" ? e(this, p).name = "eye" : this.type === "password" && (e(this, p).name = "eye-slash"), t && (this.type === "password" || this.type === "text") && (e(this, l).showPasswordController = new AbortController(), e(this, p).addEventListener(
-            "click",
-            e(this, L),
-            {
-              signal: e(this, l).showPasswordController.signal
-            }
-          )), this.updateContainerClasslist());
-        }
-      },
-      "prefix-icon": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t && (e(this, w).innerHTML = `<ea-icon class="ea-input__prefix-icon" part="prefix-icon" name="${t}"></ea-icon>`);
-        }
-      },
-      "suffix-icon": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t && (e(this, b).innerHTML = `<ea-icon class="ea-input__suffix-icon" part="suffix-icon" name="${t}"></ea-icon>`);
-        }
-      },
-      "show-word-limit": {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var s;
-          this.type !== "textarea" && this.type !== "text" || (await e(this, r).isOriginalRenderedPromise, (s = e(this, l).wordCountController) == null || s.abort(), t && this.hasAttribute("maxlength") && (e(this, l).wordCountController = new AbortController(), e(this, f).call(this), e(this, i).addEventListener(
-            "input",
-            e(this, f),
-            {
-              signal: e(this, l).wordCountController.signal
-            }
-          )), this.updateContainerClasslist());
-        }
-      },
-      rows: {
-        type: Number,
-        default: 2,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).rows = t);
-        }
-      },
-      autosize: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var s;
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, (s = e(this, l).autosizeController) == null || s.abort(), e(this, i).clientHeight, e(this, d).originTextareaHeight = e(this, i).scrollHeight, t && (e(this, l).autosizeController = new AbortController(), e(this, i).addEventListener("input", e(this, H), {
-            signal: e(this, l).autosizeController.signal
-          })));
-        }
-      },
-      "min-rows": {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).minRows = t);
-        }
-      },
-      "max-rows": {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).maxRows = t);
-        }
-      },
-      autocomplete: {
-        type: String,
-        default: "off",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).autocomplete = t;
-        }
-      },
-      name: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).name = t;
-        }
-      },
-      readonly: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).readOnly = t;
-        }
-      },
-      max: {
-        type: Number,
-        default: Number.MAX_SAFE_INTEGER,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).max = t;
-        }
-      },
-      min: {
-        type: Number,
-        default: Number.MIN_SAFE_INTEGER,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).min = t;
-        }
-      },
-      step: {
-        type: Number,
-        default: 1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).step = t;
-        }
-      },
-      pattern: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).pattern = t;
-        }
-      },
-      resize: {
-        type: ["none", "both", "horizontal", "vertical"],
-        default: "vertical",
-        observer: (t) => {
-          this.style.setProperty("--ea-input-resize", t);
-        }
-      },
-      autofocus: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).autofocus = t;
-        }
-      },
-      form: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).form = t;
-        }
-      },
-      "aria-label": {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).setAttribute("aria-label", t);
-        }
-      },
-      tabindex: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).tabIndex = t;
-        }
-      },
-      inputmode: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).inputMode = t;
-        }
-      }
-    }));
-    /**
-     * 渲染函数，因为在 vue 环境下 constructor 中，有概率获取不到 type，所以渲染会出问题。
-     * 所以最后的办法就是 将与 original 相关的 js 逻辑，需要等待 original 渲染完成之后再执行。
-     * @param {String} type
-     */
-    a(this, P, (t) => {
-      const s = this.id || Math.random().toString(36).substring(2, 7), c = t === "textarea" ? `<textarea id="${s}" class="ea-input__original" part="original"></textarea>` : `<input id="${s}" class="ea-input__original" type="${t}" part="original" />`;
-      e(this, y).innerHTML = c, h(this, i, e(this, y).querySelector(".ea-input__original")), e(this, i).value = this.value, e(this, d).isOriginalRendered = !0;
-    });
-    /**
-     * 输入框内容发生改变时触发
-     * @param {FocusEvent} e 事件对象
-     */
-    a(this, O, (t) => {
-      e(this, d).isFocus = !0, this.updateContainerClasslist();
-    });
-    /**
-     * 输入框失去焦点时触发
-     * @param {FocusEvent} e 事件对象
-     */
-    a(this, E, (t) => {
-      e(this, d).isFocus = !1, this.updateContainerClasslist();
-    });
-    /**
-     * 输入框内容发生改变时触发
-     * @param {InputEvent} e 事件对象
-     */
-    a(this, A, (t) => {
-      const { value: s } = t.target;
-      this.value = s;
-    });
-    /**
-     * 初始化基本事件
-     */
-    a(this, q, () => {
-      e(this, i).addEventListener("focus", e(this, O), {
-        signal: e(this, u).signal
-      }), e(this, i).addEventListener("blur", e(this, E), {
-        signal: e(this, u).signal
-      }), e(this, i).addEventListener("input", e(this, A), {
-        signal: e(this, u).signal
-      });
-    });
-    /**
-     * 清空按钮点击时触发
-     */
-    a(this, z, () => {
-      const t = this.value;
-      this.clear(), this["show-word-limit"] && (this.type === "textarea" || this.type === "text") && e(this, f).call(this), this.focus(), this.dispatchEvent(new U({ oldValue: t }));
-    });
-    /**
-     * 显示密码按钮点击时触发
-     */
-    a(this, L, () => {
-      this.type === "password" ? (this.type = "text", e(this, p).name = "eye") : this.type === "text" && (this.type = "password", e(this, p).name = "eye-slash"), this.focus();
-    });
-    /**
-     * 自动调整高度
-     * @param {InputEvent} e
-     */
-    a(this, H, (t) => {
-      const s = e(this, d).originTextareaHeight / this.rows;
-      this["min-rows"] > 0 && e(this, i).scrollHeight < this["min-rows"] * s || this["max-rows"] > 0 && e(this, i).scrollHeight > this["max-rows"] * s || (e(this, i).style.height = `${e(this, d).originTextareaHeight}px`, e(this, i).scrollHeight, e(this, i).style.height = `${t.target.scrollHeight + 2}px`);
-    });
-    /**
-     * 当包含 show-word-limit 属性时，更新字数统计
-     */
-    a(this, f, () => {
-      e(this, x).textContent = `${e(this, i).value.length} / ${this.maxlength}`;
-    });
-    this.stylesheet = V, this.$render();
-  }
-  static get observedAttributes() {
-    return M.Array.toLowerCamelCase([
-      ...super.observedAttributes,
-      "label",
-      "type",
-      "disabled",
-      "value",
-      "size",
-      "placeholder",
-      "maxlength",
-      "minlength",
-      "clearable",
-      "clear-icon",
-      "show-password",
-      "disabled",
-      "prefix-icon",
-      "suffix-icon",
-      "show-word-limit",
-      "rows",
-      "autosize",
-      "min-rows",
-      "max-rows",
-      "autocomplete",
-      "name",
-      "readonly",
-      "max",
-      "min",
-      "step",
-      "resize",
-      "autofocus",
-      "form",
-      "aria-label",
-      "tabindex",
-      "inputmode"
-    ]);
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
-  get validationTarget() {
-    return e(this, i);
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-input",
-      {
-        ["--size-" + this.size]: this.type !== "textarea" && this.size !== "default",
-        "--has-prepend": this.type !== "textarea" && this.querySelector("[slot=prepend]"),
-        "--has-append": this.type !== "textarea" && this.querySelector("[slot=append]"),
-        "--textarea": this.type === "textarea",
-        "--show-password": this["show-password"] && this.value && this.type !== "textarea",
-        "--show-word-limit": this["show-word-limit"] && (this.type === "textarea" || this.type === "text")
-      },
-      {
-        focus: e(this, d).isFocus,
-        disabled: this.disabled,
-        clearable: this.clearable && this.value && this.type !== "textarea"
-      }
-    );
-    return e(this, g).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <label class="ea-input" part="container">
-        <span class="ea-input__form-label" part="label"></span>
-        <section class="ea-input__region" part="region">
-          <div class="ea-input__prepend" part="prepend">
-            <slot name="prepend"></slot>
-          </div>
-          <div class="ea-input__inner" part="inner">
-            <span class="ea-input__prefix" part="prefix">
-              <slot name="prefix"></slot>
-            </span>
-            <span class="ea-input__original-wrapper" part="original-wrapper">
-            </span>
-            <span class="ea-input__suffix" part="suffix">
-              <ea-icon class="ea-input__clear-icon" name="xmark" part="clear-icon"></ea-icon>
-              <ea-icon class="ea-input__show-password-icon" name="eye-slash" part="show-password-icon"></ea-icon>
-              <span class="ea-input__suffix-icon" part="suffix-icon">
-                <slot name="suffix"></slot>
-              </span>
-              <span class="ea-input__word-count" part="count"></span>
-            </span>
-          </div>
-          <div class="ea-input__append" part="append">
-            <slot name="append"></slot>
-          </div>
-        </section>
-      </div>
-    `, h(this, g, this.shadowRoot.querySelector(".ea-input")), h(this, v, this.shadowRoot.querySelector(".ea-input__form-label")), h(this, C, this.shadowRoot.querySelector(".ea-input__prepend")), h(this, _, this.shadowRoot.querySelector(".ea-input__inner")), h(this, w, this.shadowRoot.querySelector(
-      ".ea-input__prefix slot[name='prefix']"
-    )), h(this, y, this.shadowRoot.querySelector(
-      ".ea-input__original-wrapper"
-    )), h(this, R, this.shadowRoot.querySelector(".ea-input__suffix")), h(this, b, this.shadowRoot.querySelector(".ea-input__suffix-icon")), h(this, m, this.shadowRoot.querySelector(".ea-input__clear-icon")), h(this, p, this.shadowRoot.querySelector(
-      ".ea-input__show-password-icon"
-    )), h(this, x, this.shadowRoot.querySelector(".ea-input__word-count")), h(this, S, this.shadowRoot.querySelector(".ea-input__append"));
-  }
-  /**
-   * 获取焦点
-   */
-  focus() {
-    e(this, d).isFocus = !0, e(this, i).focus();
-  }
-  /**
-   * 失去焦点
-   */
-  blur() {
-    e(this, d).isFocus = !1, e(this, i).blur();
-  }
-  /**
-   * 清空输入框内容
-   */
-  clear() {
-    this.value = "", e(this, i).value = "", this["show-word-limit"] && this.maxlength && e(this, f).call(this);
-  }
-  /**
-   * 选中输入框内容
-   */
-  select() {
-    e(this, i).select();
-  }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, u)) == null || t.abort(), h(this, u, new AbortController()), this.hasAttribute("type") || (this.type = this.type), this.updateContainerClasslist(), e(this, q).call(this);
-  }
-  $beforeUnmounted() {
-    var t, s;
-    (t = e(this, u)) == null || t.abort(), h(this, u, null);
-    for (const c in e(this, l))
-      (s = e(this, l)[c]) == null || s.abort(), e(this, l)[c] = null;
-  }
-  /**
-   * 更新表单验证状态
-   */
-  updateValidity() {
-    super.updateValidity();
-    const t = this.value || "";
-    this.minlength > 0 && t.length > 0 && t.length < this.minlength && (this.internals.setValidity(
-      { tooShort: !0 },
-      `请至少输入 ${this.minlength} 个字符`,
-      e(this, i)
-    ), this.internals.reportValidity()), this.maxlength > 0 && t.length > this.maxlength && (this.internals.setValidity(
-      { tooLong: !0 },
-      `请最多输入 ${this.maxlength} 个字符`,
-      e(this, i)
-    ), this.internals.reportValidity());
-  }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
-  checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
-  }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
-  reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
-  }
-}
-g = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), w = new WeakMap(), y = new WeakMap(), i = new WeakMap(), R = new WeakMap(), b = new WeakMap(), m = new WeakMap(), p = new WeakMap(), x = new WeakMap(), S = new WeakMap(), v = new WeakMap(), u = new WeakMap(), l = new WeakMap(), d = new WeakMap(), r = new WeakMap(), P = new WeakMap(), O = new WeakMap(), E = new WeakMap(), A = new WeakMap(), q = new WeakMap(), z = new WeakMap(), L = new WeakMap(), H = new WeakMap(), f = new WeakMap();
-window.customElements.get("ea-input") || window.customElements.define("ea-input", G);
-export {
-  G as EaInput
-};