easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-select.js

@@ -0,0 +1,609 @@
+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" name='xmark'></ea-icon>
+          <ea-icon slot="suffix" class="ea-select__dropdown-icon" part="dropdown-icon" name='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, x;
+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, x, (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, x).call(this, i);
+    };
+    this.addEventListener("click", e(this, x), {
+      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(), x = new WeakMap();
+window.customElements.get("ea-option") || window.customElements.define("ea-option", tt);
+var $, R, A;
+class et extends H {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    l(this, $);
+    /** @type {HTMLSlotElement} */
+    l(this, R);
+    /** @type {AbortController} */
+    l(this, A, new AbortController());
+    y(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, R).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, R, 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(), R = 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
+};