easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-drawer.js

@@ -0,0 +1,194 @@
+var _ = Object.defineProperty;
+var y = (t) => {
+  throw TypeError(t);
+};
+var C = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var b = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), v = (t, s, e) => s.has(t) || y("Cannot " + e);
+var o = (t, s, e) => (v(t, s, "read from private field"), e ? e.call(t) : s.get(t)), a = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, p) => (v(t, s, "write to private field"), p ? p.call(t, e) : s.set(t, e), e);
+import { EaOverlay as g } from "./ea-overlay.js";
+import { s as S } from "../css/ea-drawer.style.js";
+import { E } from "../utils/Utils.js";
+import { t as k } from "../utils/timeout.js";
+var i, u, l, h, c, n, f, w, m, d;
+class q extends g {
+  constructor() {
+    super();
+    /** @type {AbortController} */
+    a(this, i);
+    /** @type {HTMLElement} */
+    a(this, u);
+    /** @type {HTMLElement} */
+    a(this, l);
+    /** @type {HTMLElement} */
+    a(this, h);
+    /** @type {HTMLElement} */
+    a(this, c);
+    /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, f);
+    /** @type {HTMLElement} */
+    a(this, w);
+    b(this, "state", this.properties({
+      direction: {
+        type: ["rtl", "ltr", "ttb", "btt"],
+        default: "rtl",
+        observer: (e) => {
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        repeatable: !0,
+        observer: (e) => {
+          if (!e && this["before-close"] && this.status !== this.visible)
+            return o(this, d).call(this);
+          e && k(() => {
+            this.focus();
+          }, 0), this.status = e;
+        }
+      },
+      "with-header": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          o(this, h).style.display = e ? "flex" : "none";
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          this["with-header"] && (o(this, c).textContent = e);
+        }
+      },
+      showClose: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          this["with-header"] && (o(this, n).style.display = e ? "block" : "none");
+        }
+      },
+      size: {
+        type: String,
+        default: "30%",
+        observer: (e) => {
+          this.style.setProperty("--ea-drawer-size", e);
+        }
+      },
+      "append-to-body": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+        }
+      },
+      "close-on-press-escape": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+        }
+      }
+    }));
+    a(this, m, (e, p) => {
+      p.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" icon="icon-cancel" 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>
+    `, r(this, u, this.shadowRoot.querySelector(".ea-overlay")), r(this, l, this.shadowRoot.querySelector(".ea-drawer-main")), r(this, h, this.shadowRoot.querySelector(".ea-drawer-main__header")), r(this, c, this.shadowRoot.querySelector(".ea-drawer-main__title")), r(this, n, this.shadowRoot.querySelector(
+        ".ea-drawer-main__close-icon"
+      )), r(this, f, this.shadowRoot.querySelector(".ea-drawer-main__content")), r(this, w, this.shadowRoot.querySelector(".ea-drawer-main__footer"));
+    });
+    a(this, d, () => {
+      this["before-close"] ? this.emit("before-close", {
+        detail: {
+          done: () => this.status = !1
+        }
+      }) : this.status = !1;
+    });
+    const e = this.shadowRoot.querySelector(
+      ".ea-overlay__content"
+    );
+    o(this, m).call(this, this.direction, e), this["append-to-body"] && document.body.appendChild(this);
+  }
+  static get observedAttributes() {
+    return E.Array.toLowerCamelCase([
+      ...super.observedAttributes,
+      "direction",
+      "visible",
+      "append-to-body",
+      "append-to",
+      // "lock-scroll",
+      "before-close",
+      "close-on-click-modal",
+      "close-on-press-escape",
+      // "open-delay",
+      // "close-delay",
+      // "destroy-on-close",
+      "modal",
+      // "resizable",
+      "show-close",
+      "size",
+      "title",
+      "with-header",
+      "z-index",
+      "header-aria-level "
+    ]);
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return `${super.updateContainerClasslist()} ${this.computedClasslist(
+      "ea-drawer",
+      {
+        ["--" + this.direction]: this.direction
+      },
+      {
+        drawer: !0
+      }
+    )}`;
+  }
+  connectedCallback() {
+    r(this, i, new AbortController()), o(this, l).ariaModal = !0, o(this, l).role = "dialog", this["close-on-click-modal"] = this.getAttrBoolean(
+      "close-on-click-modal",
+      !0
+    ), this.addEventListener(
+      "closed",
+      () => {
+        this.visible = !1;
+      },
+      {
+        signal: o(this, i).signal
+      }
+    ), this["show-close"] && o(this, n).addEventListener("click", o(this, d), {
+      signal: o(this, i).signal
+    }), this["close-on-press-escape"] && this.addEventListener(
+      "keydown",
+      (e) => {
+        e.key === "Escape" && o(this, d).call(this);
+      },
+      { signal: o(this, i).signal }
+    ), super.connectedCallback(), this.assignedStyle(S);
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = o(this, i)) == null || e.abort();
+  }
+}
+i = new WeakMap(), u = new WeakMap(), l = new WeakMap(), h = new WeakMap(), c = new WeakMap(), n = new WeakMap(), f = new WeakMap(), w = new WeakMap(), m = new WeakMap(), d = new WeakMap();
+window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", q);
+export {
+  q 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
+};

package/dist/components/ea-empty.js

@@ -0,0 +1,85 @@
+var y = Object.defineProperty;
+var m = (t) => {
+  throw TypeError(t);
+};
+var u = (t, s, e) => s in t ? y(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var c = (t, s, e) => u(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || m("Cannot " + e);
+var n = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? m("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), a = (t, s, e, d) => (h(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
+import { B as g } from "./Base.js";
+import { s as v } from "../css/ea-empty.style.js";
+const _ = `
+<svg viewBox="25 30 50 50" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" class="front" part="default-image-front" />
+    <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" class="border" part="default-image-border" />
+</svg>
+`;
+var p, i, r, l;
+class b extends g {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, p);
+    /** @type {HTMLElement} */
+    o(this, i);
+    /** @type {HTMLElement} */
+    o(this, r);
+    /** @type {HTMLElement} */
+    o(this, l);
+    c(this, "state", this.properties({
+      image: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          n(this, i).innerHTML = `<img class="ea-empty__image" src="${e}" alt="empty image" part="image" />`;
+        }
+      },
+      "image-size": {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("--ea-empty-size", e))
+            return console.warn(
+              `[ea-empty] The size value ${e} is not supported.`
+            );
+          this.style.setProperty("--ea-empty-size", e);
+        }
+      },
+      description: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          n(this, r).textContent = e;
+        }
+      }
+    }));
+    this.stylesheet = v, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "image", "image-size", "description"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-empty' part='container'>
+        <div class="ea-empty__placeholder" part="placeholder">
+            <slot name="image">
+                <section class="ea-empty__default">${_}</section>
+            </slot>
+        </div>
+        <div class="ea-empty__description" part="description">
+            <slot name="description">No Data</slot>
+        </div>
+        <div class="ea-empty__bottom" part="bottom">
+            <slot></slot>
+        </div>
+      </div>
+    `, a(this, p, this.shadowRoot.querySelector(".ea-empty")), a(this, i, this.shadowRoot.querySelector(".ea-empty__placeholder")), a(this, r, this.shadowRoot.querySelector(".ea-empty__description")), a(this, l, this.shadowRoot.querySelector(".ea-empty__bottom"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+p = new WeakMap(), i = new WeakMap(), r = new WeakMap(), l = new WeakMap();
+window.customElements.get("ea-empty") || window.customElements.define("ea-empty", b);
+export {
+  b as EaEmpty
+};