easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-dialog.js

@@ -0,0 +1,249 @@
+var _ = Object.defineProperty;
+var v = (t) => {
+  throw TypeError(t);
+};
+var S = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var u = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || v("Cannot " + e);
+var o = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), a = (t, s, e) => s.has(t) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, d) => (w(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
+import { EaOverlay as E } from "./ea-overlay.js";
+import { s as B } from "../css/ea-dialog.style.js";
+import { t as C } from "../utils/timeout.js";
+var n, h, c, p, r, i, b, f, g;
+class k extends E {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, h);
+    /** @type {HTMLElement} */
+    a(this, c);
+    /** @type {HTMLElement} */
+    a(this, p);
+    /** @type {HTMLElement} */
+    a(this, r);
+    /** @type {AbortController} */
+    a(this, i);
+    u(this, "state", this.properties({
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          if (!e && this["before-close"] && this.status !== this.visible)
+            return o(this, f).call(this);
+          e ? C(() => {
+            this.focus();
+          }, 0) : C(() => {
+            this.blur();
+          }, 0), this.status = e;
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, p) && (o(this, p).textContent = e);
+        }
+      },
+      width: {
+        type: String,
+        default: "50%",
+        observer: (e) => {
+          this.style.setProperty("--ea-overlay-content-width", e);
+        }
+      },
+      top: {
+        type: String,
+        default: "50%",
+        observer: (e) => {
+          this.style.setProperty("--ea-overlay-content-top", e);
+        }
+      },
+      center: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      },
+      fullscreen: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      },
+      "append-to-body": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      "append-to": {
+        type: String,
+        default: "body",
+        observer: () => {
+        }
+      },
+      "show-close": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          o(this, r).style.display = e ? "block" : "none";
+        }
+      },
+      "modal-penetrable": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      draggable: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 通过 append-to 属性，将组件插入到指定元素中
+     */
+    a(this, b, () => {
+      this.getAttrString("append-to") && this["append-to"] ? document.querySelector(this["append-to"]).appendChild(this) : this["append-to-body"] && document.body.appendChild(this);
+    });
+    /**
+     * 重置 dialog 位置
+     */
+    u(this, "resetPosition", () => {
+      o(this, h).style.left = "var(--ea-overlay-content-left)", o(this, h).style.top = "var(--ea-overlay-content-top)";
+    });
+    /**
+     * 打开 dialog
+     */
+    u(this, "show", () => {
+      this.visible = !0;
+    });
+    /**
+     * 关闭 dialog
+     */
+    u(this, "hide", () => {
+      this.visible = !1;
+    });
+    /**
+     * 触发 before-close 事件
+     */
+    a(this, f, () => {
+      this["before-close"] ? this.emit("before-close", {
+        detail: {
+          done: () => this.status = !1
+        }
+      }) : this.status = !1;
+    });
+    a(this, g, (e) => {
+      if (!o(this, c).contains(e.target) || o(this, c) !== e.target)
+        return;
+      const d = new AbortController(), m = this.shadowRoot.querySelector(
+        ".ea-overlay__content"
+      );
+      window.addEventListener(
+        "mousemove",
+        (y) => {
+          m.style.left = y.clientX + "px", m.style.top = y.clientY + "px";
+        },
+        {
+          signal: d.signal
+        }
+      ), window.addEventListener(
+        "mouseup",
+        () => {
+          d.abort();
+        },
+        { signal: d.signal }
+      );
+    });
+    const e = this.shadowRoot.querySelector(".ea-overlay__content");
+    e.innerHTML = `
+      <div class='ea-dialog-main' part='container'>
+        <header class='ea-dialog-main__header' part='header'>
+          <slot name="header">
+            <span class='ea-dialog-main__title' part='title'></span>
+            <ea-icon class='ea-dialog-main__close-icon' name='xmark' part='close-icon'></ea-icon>          
+          </slot>
+        </header>
+        <main class='ea-dialog-main__content' part='content'>
+            <slot></slot>
+        </main>
+        <footer class='ea-dialog-main__footer' part='footer'>
+            <slot name='footer'></slot>
+        </footer>
+      </div>
+    `, l(this, n, this.shadowRoot.querySelector(".ea-overlay")), l(this, h, e), l(this, c, this.shadowRoot.querySelector(".ea-dialog-main__header")), l(this, p, this.shadowRoot.querySelector(".ea-dialog-main__title")), l(this, r, this.shadowRoot.querySelector(
+      ".ea-dialog-main__close-icon"
+    )), o(this, b).call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "visible",
+      "title",
+      "width",
+      "fullscreen",
+      "top",
+      "modal",
+      "center",
+      "append-to-body",
+      "append-to",
+      //   "lock-scroll",
+      //   "open-delay",
+      //   "close-delay",
+      "close-on-click-modal",
+      "close-on-press-escape",
+      "show-close",
+      "close-icon",
+      "before-close",
+      //   "destroy-on-close",
+      "z-index",
+      "modal-penetrable",
+      "draggable"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return `${super.updateContainerClasslist()} ${this.computedClasslist(
+      "ea-dialog",
+      {
+        "--center": this.center,
+        "--draggable": this.draggable,
+        "--fullscreen": this.fullscreen
+      },
+      {
+        dialog: !0,
+        "modal-penetrable": this["modal-penetrable"] && !this.modal
+      }
+    )}`;
+  }
+  connectedCallback() {
+    l(this, i, new AbortController()), this["close-on-click-modal"] = this.getAttrBoolean(
+      "close-on-click-modal",
+      !0
+    ), this.setAttribute("role", "dialog"), super.connectedCallback(), this.assignedStyle(B), this.addEventListener("closed", this.hide, {
+      signal: o(this, i).signal
+    }), this["show-close"] && o(this, r) && o(this, r).addEventListener("click", o(this, f), {
+      signal: o(this, i).signal
+    }), this.draggable && !this.fullscreen && this.shadowRoot.addEventListener("mousedown", o(this, g), {
+      signal: o(this, i).signal
+    });
+  }
+  $beforeUnmounted() {
+    o(this, i).abort();
+  }
+}
+n = new WeakMap(), h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), r = new WeakMap(), i = new WeakMap(), b = new WeakMap(), f = new WeakMap(), g = new WeakMap();
+window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", k);
+export {
+  k as EaDialog
+};

package/dist/components/ea-drawer.js

@@ -0,0 +1,216 @@
+var g = Object.defineProperty;
+var _ = (s) => {
+  throw TypeError(s);
+};
+var S = (s, o, e) => o in s ? g(s, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[o] = e;
+var C = (s, o, e) => S(s, typeof o != "symbol" ? o + "" : o, e), E = (s, o, e) => o.has(s) || _("Cannot " + e);
+var t = (s, o, e) => (E(s, o, "read from private field"), e ? e.call(s) : o.get(s)), a = (s, o, e) => o.has(s) ? _("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, e), l = (s, o, e, i) => (E(s, o, "write to private field"), i ? i.call(s, e) : o.set(s, e), e);
+import { EaOverlay as k } from "./ea-overlay.js";
+import { s as A } from "../css/ea-drawer.style.js";
+import { E as q } from "../utils/Utils.js";
+import { t as R } from "../utils/timeout.js";
+var p, c, u, f, n, w, b, h, r, m, d, y;
+class B extends k {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, p);
+    /** @type {HTMLElement} */
+    a(this, c);
+    /** @type {HTMLElement} */
+    a(this, u);
+    /** @type {HTMLElement} */
+    a(this, f);
+    /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, w);
+    /** @type {HTMLElement} */
+    a(this, b);
+    /** @type {AbortController} */
+    a(this, h);
+    a(this, r, {
+      /** @type {AbortController | null} */
+      showClose: null,
+      /** @type {AbortController | null} */
+      closeOnPressEscape: null
+    });
+    C(this, "state", this.properties({
+      direction: {
+        type: ["rtl", "ltr", "ttb", "btt"],
+        default: "rtl"
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        repeatable: !0,
+        observer: (e) => {
+          if (!e && this.beforeClose && this.status !== this.visible) {
+            this.visible = !e, t(this, d).call(this);
+            return;
+          }
+          e && R(() => this.focus(), 0), (e || !this.beforeClose) && (this.status = e);
+        }
+      },
+      "with-header": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          t(this, u).style.display = e ? "flex" : "none";
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          this["with-header"] && (t(this, f).textContent = e);
+        }
+      },
+      showClose: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          var i;
+          (i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = null, this["with-header"] && (t(this, n).style.display = e ? "block" : "none"), e && (t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
+            signal: t(this, r).showClose.signal
+          }));
+        }
+      },
+      size: {
+        type: String,
+        default: "30%",
+        observer: (e) => {
+          this.style.setProperty("--ea-drawer-size", e);
+        }
+      },
+      "append-to-body": {
+        type: Boolean,
+        default: !1
+      },
+      "close-on-press-escape": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          var i;
+          (i = t(this, r).closeOnPressEscape) == null || i.abort(), t(this, r).closeOnPressEscape = null, e && (t(this, r).closeOnPressEscape = new AbortController(), document.addEventListener("keydown", t(this, y), {
+            signal: t(this, r).closeOnPressEscape.signal
+          }));
+        }
+      }
+    }));
+    C(this, "funcStates", this.properties({
+      beforeClose: {
+        rawFunction: !0,
+        props: !0,
+        type: Function,
+        default: null
+      }
+    }));
+    /**
+     * 初始化抽屉 DOM 结构
+     * @param {HTMLElement} container - 抽屉内容容器
+     */
+    a(this, m, (e) => {
+      e.innerHTML = `
+      <div class="ea-drawer-main" part="container">
+        <header class="ea-drawer-main__header" part="header">
+          <span class="ea-drawer-main__title" part="title">
+            <slot name="title"></slot>
+          </span>
+          <ea-icon class="ea-drawer-main__close-icon" name="xmark" part="close-icon"></ea-icon>
+        </header>
+        <main class="ea-drawer-main__content" part="content">
+          <slot></slot>
+        </main>
+        <footer class="ea-drawer-main__footer" part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `, l(this, p, this.shadowRoot.querySelector(".ea-overlay")), l(this, c, this.shadowRoot.querySelector(".ea-drawer-main")), l(this, u, this.shadowRoot.querySelector(".ea-drawer-main__header")), l(this, f, this.shadowRoot.querySelector(".ea-drawer-main__title")), l(this, n, this.shadowRoot.querySelector(
+        ".ea-drawer-main__close-icon"
+      )), l(this, w, this.shadowRoot.querySelector(".ea-drawer-main__content")), l(this, b, this.shadowRoot.querySelector(".ea-drawer-main__footer"));
+    });
+    /**
+     * 处理抽屉关闭前的回调
+     */
+    a(this, d, () => {
+      this.beforeClose ? this.beforeClose(() => {
+        this.status = !1, this.visible = !1;
+      }) : (this.status = !1, this.visible = !1);
+    });
+    /**
+     * 处理键盘事件
+     * @param {KeyboardEvent} e - 键盘事件对象
+     */
+    a(this, y, (e) => {
+      e.key === "Escape" && this.visible && t(this, d).call(this);
+    });
+    this["append-to-body"] && document.body.appendChild(this);
+    const e = this.shadowRoot.querySelector(
+      ".ea-overlay__content"
+    );
+    t(this, m).call(this, e);
+  }
+  static get observedAttributes() {
+    return q.Array.toLowerCamelCase([
+      ...super.observedAttributes,
+      "direction",
+      "visible",
+      "append-to-body",
+      "append-to",
+      "close-on-click-modal",
+      "close-on-press-escape",
+      "modal",
+      "show-close",
+      "size",
+      "title",
+      "with-header",
+      "z-index",
+      "header-aria-level"
+    ]);
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = `${super.updateContainerClasslist()} ${this.computedClasslist(
+      "ea-drawer",
+      {
+        ["--" + this.direction]: this.direction
+      },
+      {
+        drawer: !0
+      }
+    )}`;
+    return t(this, p).className = e, e;
+  }
+  connectedCallback() {
+    var e, i;
+    (e = t(this, h)) == null || e.abort(), l(this, h, new AbortController()), t(this, c).ariaModal = !0, t(this, c).role = "dialog", this["close-on-click-modal"] = this.getAttrBoolean(
+      "close-on-click-modal",
+      !0
+    ), this.addEventListener(
+      "closed",
+      () => {
+        this.visible = !1;
+      },
+      {
+        signal: t(this, h).signal
+      }
+    ), this["show-close"] && ((i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
+      signal: t(this, r).showClose.signal
+    })), super.connectedCallback(), this.assignedStyle(A);
+  }
+  $beforeUnmounted() {
+    var e, i;
+    (e = t(this, h)) == null || e.abort();
+    for (const v in t(this, r))
+      (i = t(this, r)[v]) == null || i.abort(), t(this, r)[v] = null;
+  }
+}
+p = new WeakMap(), c = new WeakMap(), u = new WeakMap(), f = new WeakMap(), n = new WeakMap(), w = new WeakMap(), b = new WeakMap(), h = new WeakMap(), r = new WeakMap(), m = new WeakMap(), d = new WeakMap(), y = new WeakMap();
+window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", B);
+export {
+  B as EaDrawer
+};

package/dist/components/ea-dropdown.js

@@ -0,0 +1,228 @@
+var C = Object.defineProperty;
+var g = (t) => {
+  throw TypeError(t);
+};
+var E = (t, s, e) => s in t ? C(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var v = (t, s, e) => E(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || g("Cannot " + e);
+var i = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? g("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, a) => (w(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
+import { EaPopper as k } from "./ea-popper.js";
+import { s as A } from "../css/ea-dropdown.style.js";
+import { B as f } from "./Base.js";
+import { s as y } from "../css/ea-dropdown-item.style.js";
+import { s as L } from "../css/ea-dropdown-menu.style.js";
+var d, n, l, m;
+class x extends k {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, d);
+    /** @type {AbortController} */
+    o(this, n, new AbortController());
+    o(this, l, {
+      hasPlacement: !0
+    });
+    v(this, "state", this.properties({
+      trigger: {
+        type: ["click", "hover", "contextmenu"],
+        default: "hover",
+        observer: () => {
+        }
+      },
+      "hide-on-click": {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+        }
+      },
+      size: {
+        type: ["small", "default", "large"],
+        default: "",
+        observer: () => {
+        }
+      }
+    }));
+    /**
+     * 触发事件
+     */
+    o(this, m, {
+      hover: () => {
+        let e = new AbortController();
+        this.addEventListener(
+          "mouseover",
+          () => {
+            e == null || e.abort(), e = new AbortController(), this.show(), this.addEventListener(
+              "mouseout",
+              () => {
+                this.hide();
+              },
+              { signal: e.signal, once: !0 }
+            ), this.status || e.abort();
+          },
+          { signal: i(this, n).signal }
+        );
+      },
+      click: () => {
+        i(this, d).addEventListener(
+          "click",
+          () => {
+            this.toggle();
+          },
+          { signal: i(this, n).signal }
+        );
+      },
+      contextmenu: () => {
+        let e = new AbortController();
+        const a = (b) => {
+          this.contains(b.target) || (e.abort(), this.hide());
+        }, p = (b) => {
+          b.preventDefault(), e == null || e.abort(), e = new AbortController(), this.toggle(), window.addEventListener("click", a, {
+            signal: e.signal,
+            once: !0
+          }), this.status || e.abort();
+        };
+        this.addEventListener("contextmenu", p, {
+          signal: i(this, n).signal
+        });
+      }
+    });
+    h(this, d, this.shadowRoot.querySelector('slot[name="reference"]')), this.getAttrString("placement") || (i(this, l).hasPlacement = !1);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "trigger", "hide-on-click", "size"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.assignedStyle(A), i(this, l).hasPlacement || (this.placement = "bottom"), i(this, m)[this.trigger](), this.addEventListener(
+      "ea-dropdown-item-click",
+      (e) => {
+        e.stopPropagation(), this["hide-on-click"] && this.hide();
+      },
+      { signal: i(this, n).signal }
+    );
+  }
+  $beforeUnmounted() {
+    i(this, n).abort();
+  }
+}
+d = new WeakMap(), n = new WeakMap(), l = new WeakMap(), m = new WeakMap();
+window.customElements.get("ea-dropdown") || window.customElements.define("ea-dropdown", x);
+var c, r, u;
+class $ extends f {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, c);
+    /** @type {AbortController} */
+    o(this, r, new AbortController());
+    v(this, "state", this.properties({
+      divided: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.toggleAttribute("aria-disabled", e), this.updateContainerClasslist();
+        }
+      },
+      command: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      }
+    }));
+    /**
+     * 点击事件
+     * @param {Event} e
+     */
+    o(this, u, (e) => {
+      if (this.hasAttribute("disabled")) {
+        e.stopImmediatePropagation(), e.preventDefault();
+        return;
+      }
+      const a = () => {
+        this.emit("ea-dropdown-item-click", {
+          bubbles: !0
+        });
+      }, p = () => {
+        this.emit("command", {
+          detail: {
+            command: this.command
+          },
+          bubbles: !0
+        });
+      };
+      a(), this.command && p();
+    });
+    this.stylesheet = y, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "disabled", "divided", "command"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-dropdown-item",
+      {
+        "--disabled": this.disabled
+      },
+      {
+        divided: this.divided
+      }
+    );
+    return i(this, c).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-dropdown-item' part='container'>
+        <div class='ea-dropdown-item__divider' part='divider'></div>
+        <div class='ea-dropdown-item__content' part='content'>
+            <slot></slot>
+        </div>
+      </div>
+    `, h(this, c, this.shadowRoot.querySelector(".ea-dropdown-item")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = i(this, r)) == null || e.abort(), h(this, r, new AbortController()), this.addEventListener("click", i(this, u), {
+      signal: i(this, r).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = i(this, r)) == null || e.abort();
+  }
+}
+c = new WeakMap(), r = new WeakMap(), u = new WeakMap();
+window.customElements.get("ea-dropdown-item") || window.customElements.define("ea-dropdown-item", $);
+class P extends f {
+  static get observedAttributes() {
+    return [...super.observedAttributes];
+  }
+  constructor() {
+    super(), this.stylesheet = L, this.$render();
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-dropdown-menu' part='container'>
+        <slot></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-dropdown-menu") || window.customElements.define("ea-dropdown-menu", P);
+export {
+  x as EaDropdown,
+  $ as EaDropdownItem,
+  P as EaDropdownMenu
+};