easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-select.js

@@ -0,0 +1,598 @@
+var U = Object.defineProperty;
+var O = (a) => {
+  throw TypeError(a);
+};
+var W = (a, r, t) => r in a ? U(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
+var y = (a, r, t) => W(a, typeof r != "symbol" ? r + "" : r, t), I = (a, r, t) => r.has(a) || O("Cannot " + t);
+var e = (a, r, t) => (I(a, r, "read from private field"), t ? t.call(a) : r.get(a)), l = (a, r, t) => r.has(a) ? O("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), b = (a, r, t, s) => (I(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t);
+import { F as P } from "../core/FormBase.js";
+import "./ea-input.js";
+import { s as G } from "../css/ea-select.style.js";
+import { E as N } from "../utils/Utils.js";
+import { E as K } from "../utils/Variables.js";
+import { B as H } from "./Base.js";
+import { s as Z } from "../css/ea-option.style.js";
+import { s as j } from "../css/ea-option-gropu.style.js";
+class z extends Event {
+  constructor(r) {
+    super("ea-visible-change", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+class J extends Event {
+  constructor(r) {
+    super("ea-remove-tag", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+class Q extends Event {
+  constructor() {
+    super("ea-clear", { bubbles: !0, composed: !0 });
+  }
+}
+var E, o, A, k, q, S, f, n, m, L, B, T, F, M, D;
+class X extends P {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    l(this, E);
+    /** @type {HTMLElement} */
+    l(this, o);
+    /** @type {HTMLElement} */
+    l(this, A);
+    /** @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 = () => {
+              this.value = this.multiple ? [] : "", this.dispatchEvent(new Q());
+            };
+            e(this, n).inputClearAbortController = new AbortController(), e(this, S).addEventListener("click", i, {
+              signal: e(this, n).inputClearAbortController.signal
+            });
+          }
+        }
+      },
+      size: {
+        type: K,
+        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"), d = e(this, o).shadowRoot.querySelector(
+            ".ea-input__original-wrapper"
+          );
+          t ? i.appendChild(d) : s.insertBefore(d, i.nextSibling), this.updateContainerClasslist(), t && (e(this, n).tagRemoveAbortController = new AbortController(), e(this, A).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 = (u) => {
+            const { value: c } = u.detail;
+            typeof c == "string" && this.querySelectorAll("ea-option").forEach((v) => {
+              v.style.display = v.innerText.includes(c) ? "block" : "none";
+            });
+          }, i = (u) => {
+            var v;
+            const { key: c } = u;
+            c === "Backspace" && e(this, o).value === "" && (this.value = (v = this.value) == null ? void 0 : v.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 d = e(this, o).shadowRoot.querySelector(".ea-input__inner"), h = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), p = 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(p), e(this, o).addEventListener("keydown", i, {
+            signal: e(this, n).inputFilterAbortController.signal
+          })) : d.insertBefore(p, 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.emit("change", {
+            detail: { value: t },
+            bubbles: !0,
+            composed: !0
+          }), 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, p, g) => N.EaElement.h(
+        "ea-tag",
+        "ea-select__tag",
+        {
+          closable: h,
+          "disable-transitions": !0,
+          type: "info",
+          "data-value": h ? g : null
+        },
+        p
+      ), d = (h) => {
+        let p = "";
+        return h.forEach((g) => {
+          const u = this.querySelector(`ea-option[value="${g}"]`);
+          u && (u.toggleAttribute("selected", !0), p += i(!0, u.innerText, u.value));
+        }), p;
+      };
+      if (e(this, A).innerHTML = "", this["collapse-tags"] && Array.isArray(t)) {
+        const h = Math.max(0, Number(this["max-collapse-tags"]) || 1), p = Math.max(0, t.length - h);
+        h > 0 && (s += d(t.slice(0, h))), p > 0 && (s += i(!1, `+${p}`, null));
+      } else
+        s += d(t);
+      e(this, A).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 p, g;
+      const s = t.target === e(this, o).shadowRoot ? e(this, o) : t.target;
+      if ((p = s.classList) != null && p.contains("ea-select__clear-icon") || s.closest("ea-tag"))
+        return;
+      (g = e(this, n).closeAbortController) == null || g.abort(), e(this, n).closeAbortController = new AbortController();
+      const i = (u) => {
+        const c = u.target.closest("ea-option");
+        c && (c.disabled || (this.multiple ? (Array.isArray(this.value) || (this.value = []), this.value.includes(c.value) ? this.value = this.value.filter((v) => v !== c.value) : this.value = [...this.value, c.value]) : (this.value = c.value, this.hide())));
+      }, d = (u) => {
+        var c;
+        this.contains(u.target) || (this.hide(), (c = e(this, n).closeAbortController) == null || c.abort());
+      }, h = (u) => {
+        var v;
+        (/* @__PURE__ */ new Set(["Escape", "ArrowUp", "ArrowDown"])).has(u.key) && (u.preventDefault(), u.key === "Escape" && (this.hide(), (v = e(this, n).closeAbortController) == null || v.abort()));
+      };
+      e(this, m).isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !0 })), await N.sleep(100), this.addEventListener("ea-option-click", i, {
+        signal: e(this, n).closeAbortController.signal
+      }), document.addEventListener("click", d, {
+        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");
+      this.value = this.value.filter((d) => d !== i), this.dispatchEvent(
+        new J({ 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 = G, 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, d, 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 && ((d = this.value) == null ? void 0 : d.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>
+    `, b(this, E, this.shadowRoot.querySelector(".ea-select")), b(this, o, this.shadowRoot.querySelector(".ea-select__input")), b(this, A, this.shadowRoot.querySelector(".ea-select__tag-wrap")), b(this, k, this.shadowRoot.querySelector(".ea-select__dropdown")), b(this, q, this.shadowRoot.querySelector(
+      ".ea-select__dropdown-icon"
+    )), b(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(), b(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(), A = 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", X);
+class Y extends Event {
+  constructor(r) {
+    super("ea-option-click", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+var _, C, R;
+class V 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(), !this.disabled && this.dispatchEvent(
+        new Y({
+          value: this.value,
+          target: t.target
+        })
+      );
+    });
+    this.stylesheet = Z, 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>
+    `, b(this, _, this.shadowRoot.querySelector(".ea-option"));
+  }
+  connectedCallback() {
+    var s;
+    super.connectedCallback(), this.removeAttribute("tabindex"), (s = e(this, C)) == null || s.abort(), b(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", V);
+var $, x, w;
+class tt extends H {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    l(this, $);
+    /** @type {HTMLSlotElement} */
+    l(this, x);
+    /** @type {AbortController} */
+    l(this, w, 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>
+    `, b(this, $, this.shadowRoot.querySelector(".ea-option-group")), b(this, x, this.shadowRoot.querySelector("slot[name='header']"));
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), (t = e(this, w)) == null || t.abort(), b(this, w, new AbortController());
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = e(this, w)) == null || t.abort();
+  }
+}
+$ = new WeakMap(), x = new WeakMap(), w = new WeakMap();
+window.customElements.get("ea-option-group") || window.customElements.define("ea-option-group", tt);
+export {
+  V as EaOption,
+  tt as EaOptionGroup,
+  X as EaSelect
+};