easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-input.js

@@ -0,0 +1,588 @@
+var F = Object.defineProperty;
+var $ = (n) => {
+  throw TypeError(n);
+};
+var I = (n, o, t) => o in n ? F(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
+var T = (n, o, t) => I(n, typeof o != "symbol" ? o + "" : o, t), B = (n, o, t) => o.has(n) || $("Cannot " + t);
+var e = (n, o, t) => (B(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) => (B(n, o, "write to private field"), s ? s.call(n, t) : o.set(n, t), t);
+import { F as k } 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 k {
+  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: "icon-cancel",
+        observer: (t) => {
+          this.clearable && e(this, m).setAttribute("icon", 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).icon = "icon-eye" : this.type === "password" && (e(this, p).icon = "icon-eye-off"), 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" icon="${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" icon="${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, 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).icon = "icon-eye") : this.type === "text" && (this.type = "password", e(this, p).icon = "icon-eye-off"), 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" icon="icon-cancel" part="clear-icon"></ea-icon>
+              <ea-icon class="ea-input__show-password-icon" icon="icon-eye-off" 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
+};