easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-select.js

@@ -1,609 +0,0 @@
-var P = Object.defineProperty;
-var I = (r) => {
-  throw TypeError(r);
-};
-var W = (r, a, t) => a in r ? P(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var y = (r, a, t) => W(r, typeof a != "symbol" ? a + "" : a, t), O = (r, a, t) => a.has(r) || I("Cannot " + t);
-var e = (r, a, t) => (O(r, a, "read from private field"), t ? t.call(r) : a.get(r)), l = (r, a, t) => a.has(r) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), v = (r, a, t, s) => (O(r, a, "write to private field"), s ? s.call(r, t) : a.set(r, t), t);
-import { F as G } from "../core/FormBase.js";
-import "./ea-input.js";
-import { s as K } from "../css/ea-select.style.js";
-import { E as N } from "../utils/Utils.js";
-import { E as Z } from "../utils/Variables.js";
-import { B as H } from "./Base.js";
-import { s as j } from "../css/ea-option.style.js";
-import { s as J } from "../css/ea-option-gropu.style.js";
-class z extends Event {
-  constructor(a) {
-    super("ea-visible-change", { bubbles: !0, composed: !0 }), this.detail = a;
-  }
-}
-class Q extends Event {
-  constructor(a) {
-    super("ea-remove-tag", { bubbles: !0, composed: !0 }), this.detail = a;
-  }
-}
-class X extends Event {
-  constructor() {
-    super("ea-clear", { bubbles: !0, composed: !0 });
-  }
-}
-var E, o, w, k, q, S, f, n, m, L, B, T, F, M, D;
-class Y extends G {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    l(this, E);
-    /** @type {HTMLElement} */
-    l(this, o);
-    /** @type {HTMLElement} */
-    l(this, w);
-    /** @type {HTMLElement} */
-    l(this, k);
-    /** @type {HTMLElement} */
-    l(this, q);
-    /** @type {HTMLElement} */
-    l(this, S);
-    /** @type {AbortController} */
-    l(this, f, new AbortController());
-    l(this, n, {
-      /** @type {AbortController|null} */
-      closeAbortController: null,
-      /** @type {AbortController|null} */
-      tagRemoveAbortController: null,
-      /** @type {AbortController|null} */
-      inputClearAbortController: null,
-      /** @type {AbortController|null} */
-      inputFilterAbortController: null
-    });
-    l(this, m, {
-      isFocus: !1,
-      isTagImport: !1
-    });
-    y(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await customElements.whenDefined("ea-input"), e(this, o).setAttribute("label", t);
-        }
-      },
-      name: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, o).setAttribute("name", t);
-        }
-      },
-      placeholder: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await customElements.whenDefined("ea-input"), e(this, o).placeholder = t;
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          e(this, o).toggleAttribute("disabled", t), this.updateContainerClasslist();
-        }
-      },
-      clearable: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var s;
-          if ((s = e(this, n).inputClearAbortController) == null || s.abort(), this.updateContainerClasslist(), t) {
-            const i = () => {
-              const u = this.multiple ? [] : "";
-              this.value = u, this.emit("change", {
-                detail: { value: u },
-                bubbles: !0,
-                composed: !0
-              }), this.dispatchEvent(new X());
-            };
-            e(this, n).inputClearAbortController = new AbortController(), e(this, S).addEventListener("click", i, {
-              signal: e(this, n).inputClearAbortController.signal
-            });
-          }
-        }
-      },
-      size: {
-        type: Z,
-        default: "",
-        observer: (t) => {
-          e(this, o).setAttribute("size", t), this.updateContainerClasslist();
-        }
-      },
-      multiple: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var h;
-          (h = e(this, n).tagRemoveAbortController) == null || h.abort(), await customElements.whenDefined("ea-input");
-          const s = e(this, o).shadowRoot.querySelector(".ea-input__inner"), i = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), u = e(this, o).shadowRoot.querySelector(
-            ".ea-input__original-wrapper"
-          );
-          t ? i.appendChild(u) : s.insertBefore(u, i.nextSibling), this.updateContainerClasslist(), t && (e(this, n).tagRemoveAbortController = new AbortController(), e(this, w).addEventListener(
-            "ea-remove",
-            e(this, D),
-            {
-              signal: e(this, n).tagRemoveAbortController.signal
-            }
-          ), e(this, m).isTagImport || (await import("./ea-tag.js"), await customElements.whenDefined("ea-tag"), e(this, m).isTagImport = !0));
-        }
-      },
-      "collapse-tags": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      "max-collapse-tags": {
-        type: Number,
-        default: 1,
-        observer: () => {
-        }
-      },
-      filterable: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var g;
-          const s = (c) => {
-            const { value: d } = c.detail;
-            typeof d == "string" && this.querySelectorAll("ea-option").forEach((p) => {
-              p.style.display = p.innerText.includes(d) ? "block" : "none";
-            });
-          }, i = (c) => {
-            var p;
-            const { key: d } = c;
-            d === "Backspace" && e(this, o).value === "" && (this.value = (p = this.value) == null ? void 0 : p.slice(0, this.value.length - 1));
-          };
-          (g = e(this, n).inputFilterAbortController) == null || g.abort(), e(this, o).toggleAttribute("readonly", !t), this.updateContainerClasslist(), await customElements.whenDefined("ea-input");
-          const u = e(this, o).shadowRoot.querySelector(".ea-input__inner"), h = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), b = e(this, o).shadowRoot.querySelector(
-            ".ea-input__original-wrapper"
-          );
-          t && (e(this, n).inputFilterAbortController = new AbortController(), e(this, o).addEventListener("input", s, {
-            signal: e(this, n).inputFilterAbortController.signal
-          })), this.multiple && t ? (h.appendChild(b), e(this, o).addEventListener("keydown", i, {
-            signal: e(this, n).inputFilterAbortController.signal
-          })) : u.insertBefore(b, h.nextSibling);
-        }
-      }
-    }));
-    y(this, "propStates", this.properties({
-      value: {
-        props: !0,
-        type: {
-          Array: () => {
-            var t;
-            return this.multiple && Array.isArray((t = this.props) == null ? void 0 : t.value);
-          },
-          Number: () => {
-            var t;
-            return typeof ((t = this.props) == null ? void 0 : t.value) == "number";
-          },
-          Boolean: () => {
-            var t;
-            return typeof ((t = this.props) == null ? void 0 : t.value) == "boolean";
-          },
-          String: () => {
-            var t;
-            return typeof ((t = this.props) == null ? void 0 : t.value) == "string";
-          }
-        },
-        default: "",
-        observer: async (t) => {
-          this.setValue(t), this.multiple ? (this.filterable ? e(this, o).focus() : e(this, o).value = (t == null ? void 0 : t.length) > 0 ? " " : "", e(this, T).call(this, t || [])) : this.filterable ? (e(this, o).value = "", e(this, o).setAttribute(
-            "placeholder",
-            (t == null ? void 0 : t.length) > 0 ? t : this.placeholder
-          ), e(this, F).call(this, "")) : e(this, o).value = e(this, L).call(this, t), e(this, B).call(this, t), this.updateContainerClasslist(), t || this.querySelectorAll("ea-option").forEach((s) => {
-            s.toggleAttribute("selected", !1);
-          });
-        }
-      }
-    }));
-    /**
-     * 获取当前选中值对应的标签
-     * @param {string} value
-     */
-    l(this, L, (t) => {
-      const s = [...this.querySelectorAll("ea-option")].find(
-        (i) => i.value === t
-      );
-      return s ? s.textContent.trim() : t;
-    });
-    /**
-     * 设置已选项样式
-     * @param {string | number | boolean | string[] | number[] | boolean[]} selectedValue
-     */
-    l(this, B, (t) => {
-      const s = this.querySelectorAll("ea-option");
-      typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? s.forEach((i) => {
-        i.toggleAttribute("selected", i.value === t);
-      }) : Array.isArray(t) && s.forEach((i) => {
-        i.toggleAttribute(
-          "selected",
-          t.includes(i.value)
-        );
-      });
-    });
-    /**
-     * 渲染已选项
-     * @param {string[] | number[]} selectValue
-     */
-    l(this, T, (t) => {
-      let s = "";
-      const i = (h, b, g) => N.EaElement.h(
-        "ea-tag",
-        "ea-select__tag",
-        {
-          closable: h,
-          "disable-transitions": !0,
-          type: "info",
-          "data-value": h ? g : null
-        },
-        b
-      ), u = (h) => {
-        let b = "";
-        return h.forEach((g) => {
-          const c = this.querySelector(`ea-option[value="${g}"]`);
-          c && (c.toggleAttribute("selected", !0), b += i(!0, c.innerText, c.value));
-        }), b;
-      };
-      if (e(this, w).innerHTML = "", this["collapse-tags"] && Array.isArray(t)) {
-        const h = Math.max(0, Number(this["max-collapse-tags"]) || 1), b = Math.max(0, t.length - h);
-        h > 0 && (s += u(t.slice(0, h))), b > 0 && (s += i(!1, `+${b}`, null));
-      } else
-        s += u(t);
-      e(this, w).innerHTML = s;
-    });
-    /**
-     * 处理过滤选项样式
-     * @param {string} filterValue
-     */
-    l(this, F, (t) => {
-      this.querySelectorAll("ea-option").forEach((s) => {
-        this.filterMethod(s, t);
-      });
-    });
-    /**
-     * 下拉框折叠事件
-     * @param {Event} e
-     */
-    l(this, M, async (t) => {
-      var b, g;
-      const s = t.target === e(this, o).shadowRoot ? e(this, o) : t.target;
-      if ((b = e(this, n).closeAbortController) == null || b.abort(), (g = s.classList) != null && g.contains("ea-select__clear-icon") || s.closest("ea-tag"))
-        return;
-      const i = (c) => {
-        c.stopImmediatePropagation();
-        const d = c.target.closest("ea-option");
-        if (!d || d.disabled) return;
-        let p;
-        this.multiple ? (Array.isArray(this.value) || (this.value = []), this.value.includes(d.value) ? p = this.value.filter((U) => U !== d.value) : p = [...this.value, d.value], this.value = p) : (p = d.value, this.value = p, this.hide()), this.emit("change", {
-          detail: { value: p },
-          bubbles: !0,
-          composed: !0
-        });
-      }, u = (c) => {
-        var d;
-        this.contains(c.target) || (this.hide(), (d = e(this, n).closeAbortController) == null || d.abort());
-      }, h = (c) => {
-        var p;
-        (/* @__PURE__ */ new Set(["Escape", "ArrowUp", "ArrowDown"])).has(c.key) && (c.preventDefault(), c.key === "Escape" && (this.hide(), (p = e(this, n).closeAbortController) == null || p.abort()));
-      };
-      e(this, m).isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !0 })), await N.sleep(100), e(this, n).closeAbortController = new AbortController(), this.addEventListener("ea-option-click", i, {
-        signal: e(this, n).closeAbortController.signal
-      }), document.addEventListener("click", u, {
-        signal: e(this, n).closeAbortController.signal
-      }), this.addEventListener("keydown", h, {
-        signal: e(this, n).closeAbortController.signal
-      });
-    });
-    /**
-     * 移除选中标签事件
-     * @param {Event} e
-     */
-    l(this, D, (t) => {
-      const s = t.target, i = s.getAttribute("data-value"), u = this.value.filter((h) => h !== i);
-      this.value = u, this.emit("change", {
-        detail: { value: u },
-        bubbles: !0,
-        composed: !0
-      }), this.dispatchEvent(
-        new Q({ tag: s, tagValue: i })
-      );
-    });
-    /**
-     * 过滤选项
-     * @param {import("../ea-option/index.js").EaOption} option
-     * @param {string} query
-     */
-    y(this, "filterMethod", (t, s) => {
-      var i;
-      t.style.display = (i = t.innerText) != null && i.includes(s) ? "block" : "none";
-    });
-    /**
-     * 显示下拉框
-     */
-    y(this, "show", () => {
-      e(this, o).shadowRoot.dispatchEvent(new CustomEvent("click"));
-    });
-    /**
-     * 隐藏下拉框
-     */
-    y(this, "hide", () => {
-      e(this, m).isFocus = !1, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !1 }));
-    });
-    this.stylesheet = K, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "name",
-      "label",
-      "value",
-      "placeholder",
-      "disabled",
-      "clearable",
-      "size",
-      "multiple",
-      "collapse-tags",
-      "max-collapse-tags",
-      "filterable"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    var i, u, h;
-    const t = e(this, o).shadowRoot.querySelector(".ea-input"), s = this.computedClasslist(
-      "ea-select",
-      {
-        ["--" + this.size]: this.size
-      },
-      {
-        focus: e(this, m).isFocus,
-        disabled: this.disabled,
-        clearable: this.clearable && ((i = this.value) == null ? void 0 : i.length) > 0,
-        multiple: this.multiple && ((u = this.value) == null ? void 0 : u.length) > 0 && Array.isArray(this.value),
-        filterable: this.filterable,
-        "has-value": ((h = this.value) == null ? void 0 : h.toString().length) > 0
-      }
-    );
-    return t.classList.toggle("is-focus", e(this, m).isFocus), e(this, E).className = s, s;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-select' part='container' tabindex='-1'>
-        <ea-input class="ea-select__input" part="input" readonly>
-          <section slot="prefix" class="ea-select__tag-wrap" part="tag-wrap"></section>
-          <ea-icon slot="suffix" class="ea-select__clear-icon" part="clear-icon" icon='icon-cancel'></ea-icon>
-          <ea-icon slot="suffix" class="ea-select__dropdown-icon" part="dropdown-icon" icon='icon-angle-down'></ea-icon>
-        </ea-input>
-        <section class="ea-select__dropdown" part="dropdown">
-          <slot></slot>
-        </section>
-      </div>
-    `, v(this, E, this.shadowRoot.querySelector(".ea-select")), v(this, o, this.shadowRoot.querySelector(".ea-select__input")), v(this, w, this.shadowRoot.querySelector(".ea-select__tag-wrap")), v(this, k, this.shadowRoot.querySelector(".ea-select__dropdown")), v(this, q, this.shadowRoot.querySelector(
-      ".ea-select__dropdown-icon"
-    )), v(this, S, this.shadowRoot.querySelector(".ea-select__clear-icon"));
-  }
-  async connectedCallback() {
-    var t;
-    super.connectedCallback(), await customElements.whenDefined("ea-input"), await customElements.whenDefined("ea-option"), (t = e(this, f)) == null || t.abort(), v(this, f, new AbortController()), this.name || (this.name = Math.random().toString(36).substring(2, 15)), this.hasAttribute("value") && (this.value = this.getAttrString("value")), e(this, o).shadowRoot.addEventListener(
-      "click",
-      e(this, M),
-      {
-        signal: e(this, f).signal
-      }
-    ), e(this, o).addEventListener(
-      "change",
-      (s) => {
-        s.stopImmediatePropagation(), this.show();
-      },
-      { signal: e(this, f).signal }
-    ), this.addEventListener(
-      "keydown",
-      (s) => {
-        s.key === "Enter" && e(this, o).shadowRoot.dispatchEvent(new CustomEvent("click"));
-      },
-      { signal: e(this, f).signal }
-    );
-  }
-  $beforeUnmounted() {
-    var t, s;
-    (t = e(this, f)) == null || t.abort();
-    for (const i in e(this, n))
-      (s = e(this, n)[i]) == null || s.abort();
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
-  get validationTarget() {
-    return e(this, o);
-  }
-  /**
-   * 更新表单验证状态
-   * 根据 ea-select 的实际 value 进行验证，而不是内部 input 的显示值
-   */
-  updateValidity() {
-    const t = this.multiple ? Array.isArray(this.value) && this.value.length > 0 : this.value !== "" && this.value != null;
-    this.required && !t ? this.internals.setValidity(
-      { valueMissing: !0 },
-      "请选择一个选项",
-      this
-    ) : this.internals.setValidity({}, "", this);
-  }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
-  checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
-  }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
-  reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
-  }
-}
-E = new WeakMap(), o = new WeakMap(), w = new WeakMap(), k = new WeakMap(), q = new WeakMap(), S = new WeakMap(), f = new WeakMap(), n = new WeakMap(), m = new WeakMap(), L = new WeakMap(), B = new WeakMap(), T = new WeakMap(), F = new WeakMap(), M = new WeakMap(), D = new WeakMap();
-window.customElements.get("ea-select") || window.customElements.define("ea-select", Y);
-class V extends Event {
-  constructor(a) {
-    super("ea-option-click", { bubbles: !0, composed: !0 }), this.detail = a;
-  }
-}
-var _, C, R;
-class tt extends H {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    l(this, _);
-    /** @type {AbortController} */
-    l(this, C, new AbortController());
-    y(this, "state", this.properties({
-      value: {
-        type: {
-          Number: () => this.getAttrNumber("value", null),
-          Boolean: () => N.Boolean.isBoolean(this.getAttrBoolean("value", null)),
-          String: () => this.getAttrString("value", "") || !0
-        },
-        default: null,
-        observer: () => {
-        }
-      },
-      selected: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 选项选择事件
-     * @param {MouseEvent | KeyboardEvent} e
-     */
-    l(this, R, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation(), !this.disabled && this.dispatchEvent(
-        new V({
-          value: this.value,
-          target: t.target
-        })
-      );
-    });
-    this.stylesheet = j, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "value", "selected", "disabled"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-option",
-      {},
-      {
-        selected: this.selected,
-        disabled: this.disabled
-      }
-    );
-    return e(this, _).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-option' part='container'>
-        <slot></slot>
-      </div>
-    `, v(this, _, this.shadowRoot.querySelector(".ea-option"));
-  }
-  connectedCallback() {
-    var s;
-    super.connectedCallback(), this.removeAttribute("tabindex"), (s = e(this, C)) == null || s.abort(), v(this, C, new AbortController());
-    const t = (i) => {
-      i.key === "Enter" && e(this, R).call(this, i);
-    };
-    this.addEventListener("click", e(this, R), {
-      signal: e(this, C).signal
-    }), this.addEventListener("keydown", t, {
-      signal: e(this, C).signal
-    });
-  }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, C)) == null || t.abort();
-  }
-}
-_ = new WeakMap(), C = new WeakMap(), R = new WeakMap();
-window.customElements.get("ea-option") || window.customElements.define("ea-option", tt);
-var $, x, A;
-class et extends H {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    l(this, $);
-    /** @type {HTMLSlotElement} */
-    l(this, x);
-    /** @type {AbortController} */
-    l(this, A, new AbortController());
-    y(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, x).textContent = t;
-        }
-      }
-    }));
-    this.stylesheet = J, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "label"];
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-option-group' part='container'>
-        <header class='ea-option-group__header' part='header'>
-          <slot name='header'></slot>
-        </header>
-        <section class='ea-option-group__content' part='content'>
-          <slot></slot>
-        </section>
-      </div>
-    `, v(this, $, this.shadowRoot.querySelector(".ea-option-group")), v(this, x, this.shadowRoot.querySelector("slot[name='header']"));
-  }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, A)) == null || t.abort(), v(this, A, new AbortController());
-  }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, A)) == null || t.abort();
-  }
-}
-$ = new WeakMap(), x = new WeakMap(), A = new WeakMap();
-window.customElements.get("ea-option-group") || window.customElements.define("ea-option-group", et);
-export {
-  tt as EaOption,
-  et as EaOptionGroup,
-  Y as EaSelect
-};