easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-message.js

@@ -0,0 +1,251 @@
+var R = Object.defineProperty;
+var T = (t) => {
+  throw TypeError(t);
+};
+var q = (t, s, e) => s in t ? R(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var S = (t, s, e) => q(t, typeof s != "symbol" ? s + "" : s, e), _ = (t, s, e) => s.has(t) || T("Cannot " + e);
+var i = (t, s, e) => (_(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, a) => (_(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
+import { B as U } from "./Base.js";
+import { s as $ } from "../css/ea-message.style.js";
+import { t as B } from "../utils/timeout.js";
+var o, u, m, y, r, f, l, b, w;
+class N extends U {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    n(this, o);
+    /** @type {HTMLElement} */
+    n(this, u);
+    /** @type {HTMLElement} */
+    n(this, m);
+    /** @type {HTMLElement} */
+    n(this, y);
+    /** @type {AbortController} */
+    n(this, r);
+    n(this, f, {
+      dangerouslyUseHTMLString: !1
+    });
+    S(this, "state", this.properties({
+      type: {
+        type: ["primary", "success", "warning", "info", "error"],
+        default: "info",
+        observer: (e) => {
+          const a = {
+            success: "icon-ok-circled",
+            error: "icon-cancel-circled",
+            warning: "icon-attention-alt",
+            info: "icon-info",
+            primary: "icon-info"
+          };
+          i(this, u).icon = a[e], i(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: async (e) => {
+          var a;
+          (a = i(this, r)) == null || a.abort(), d(this, r, new AbortController()), e ? (i(this, b).call(this), i(this, o).className = this.updateContainerClasslist(), i(this, l).call(this, "show"), i(this, o).offsetWidth, i(this, o).classList.add("ea-message--is-show"), i(this, o).addEventListener(
+            "transitionend",
+            () => {
+              i(this, l).call(this, "shown");
+            },
+            { once: !0, signal: i(this, r).signal }
+          )) : (i(this, w).call(this), i(this, o).classList.add("ea-message--before-hide"), i(this, l).call(this, "hide"), i(this, o).addEventListener(
+            "transitionend",
+            () => {
+              i(this, o).className = this.updateContainerClasslist(), i(this, l).call(this, "hidden");
+            },
+            { once: !0, signal: i(this, r).signal }
+          ));
+        }
+      },
+      message: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          this.dangerouslyUseHTMLString ? i(this, m).innerHTML = e : i(this, m).innerText = e;
+        }
+      },
+      showClose: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          i(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      placement: {
+        type: [
+          "top",
+          "top-left",
+          "top-right",
+          "bottom",
+          "bottom-left",
+          "bottom-right",
+          "middle"
+        ],
+        default: "top",
+        observer: () => {
+          this.className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    n(this, l, (e, a) => {
+      this.emit(e, {
+        detail: a,
+        bubbles: !0,
+        composed: !0
+      });
+    });
+    S(this, "close", () => {
+      this.visible = !1, i(this, l).call(this, "close");
+    });
+    n(this, b, () => {
+      const e = document.querySelectorAll(
+        `ea-message[placement="${this.placement}"]`
+      );
+      if (e.length <= 1) return;
+      const a = e[e.length - 2], c = a.style.getPropertyValue("--ea-message-y"), h = a.shadowRoot.querySelector(".ea-message").getBoundingClientRect();
+      this.style.setProperty(
+        "--ea-message-y",
+        `${Number(c.replace("px", "")) + h.height + 8}px`
+      );
+    });
+    n(this, w, () => {
+      const e = [
+        ...document.querySelectorAll(`ea-message[placement="${this.placement}"]`)
+      ], a = e.findIndex((h) => h === this), c = e.slice(a + 1), H = i(this, o).getBoundingClientRect().height;
+      c.forEach((h, A) => {
+        const x = Number(
+          h.style.getPropertyValue("--ea-message-y").replace("px", "")
+        );
+        h.style.setProperty("--ea-message-y", `${x - H - 8}px`);
+      });
+    });
+    this.stylesheet = $, this.$render();
+  }
+  // ------- dangerouslyUseHTMLString -------
+  // #region
+  get dangerouslyUseHTMLString() {
+    return i(this, f).dangerouslyUseHTMLString;
+  }
+  set dangerouslyUseHTMLString(e) {
+    i(this, f).dangerouslyUseHTMLString = e;
+  }
+  // #endregion
+  // ------- end -------
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "type",
+      "visible",
+      "message",
+      "showClose",
+      "placement"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-message", {
+      "--visible": this.visible,
+      ["--" + this.type]: this.type,
+      "--show-close": this.showClose,
+      ["--" + this.placement]: this.placement
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class="ea-message" part="container">
+        <ea-icon class="ea-message__icon" part="icon"></ea-icon>
+        <div class="ea-message__content" part="content-wrap"></div>
+        <ea-icon class="ea-message__icon-close" icon="icon-cancel" part="close-icon"></ea-icon>
+      </div>
+    `, d(this, o, this.shadowRoot.querySelector(".ea-message")), d(this, u, this.shadowRoot.querySelector(".ea-message__icon")), d(this, m, this.shadowRoot.querySelector(
+      ".ea-message__content"
+    )), d(this, y, this.shadowRoot.querySelector(
+      ".ea-message__icon-close"
+    ));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.showClose && i(this, y).addEventListener("click", this.close);
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = i(this, r)) == null || e.abort();
+  }
+}
+o = new WeakMap(), u = new WeakMap(), m = new WeakMap(), y = new WeakMap(), r = new WeakMap(), f = new WeakMap(), l = new WeakMap(), b = new WeakMap(), w = new WeakMap();
+window.customElements.get("ea-message") || window.customElements.define("ea-message", N);
+var C, v, E, M, L;
+class g {
+  /**
+   * @param {EaMessageOptions} options
+   */
+  constructor(s) {
+    n(this, C, ["dangerouslyUseHTMLString", "message", "placement", "type", "showClose", "duration", "offset"]);
+    n(this, v, (s) => {
+      const e = document.createElement("ea-message");
+      if (s instanceof String)
+        e.message = s;
+      else if (s instanceof Object)
+        for (const a in s)
+          e[a] = s[a];
+      else
+        console.warn("[EaMessage] TypeError: options must be a string or an object.");
+      return e;
+    });
+    n(this, E, (s, e = 3e3) => {
+      e <= 0 || B(() => {
+        s.visible = !1;
+      }, e);
+    });
+    n(this, M, (s, e) => {
+      if (e instanceof HTMLElement)
+        e.appendChild(s);
+      else {
+        const a = document.querySelector(e);
+        a ? a.appendChild(s) : document.body.appendChild(s);
+      }
+    });
+    n(this, L, (s, e) => {
+      s.addEventListener("hidden", (a) => {
+        e == null || e(a), s.remove();
+      }, { once: !0 });
+    });
+    this.options = i(this, C).reduce((a, c) => (s[c] && (a[c] = s[c]), a), {}), this.options.placement = this.options.placement || "top";
+    const e = i(this, v).call(this, this.options);
+    i(this, M).call(this, e, s.appendTo), i(this, E).call(this, e, s.duration), i(this, L).call(this, e, s.onClose), e.visible = !0;
+  }
+}
+C = new WeakMap(), v = new WeakMap(), E = new WeakMap(), M = new WeakMap(), L = new WeakMap();
+const p = (t) => {
+  new g(t);
+};
+p.primary = (t) => new g({
+  message: t,
+  type: "primary"
+});
+p.success = (t) => new g({
+  message: t,
+  type: "success"
+});
+p.warning = (t) => new g({
+  message: t,
+  type: "warning"
+});
+p.info = (t) => new g({
+  message: t,
+  type: "info"
+});
+p.error = (t) => new g({
+  message: t,
+  type: "error"
+});
+window.$message = p;
+export {
+  p as EaMessage,
+  N as EaMessageElement
+};

package/dist/components/ea-notification.js

@@ -0,0 +1,331 @@
+var $ = Object.defineProperty;
+var I = (s) => {
+  throw TypeError(s);
+};
+var A = (s, i, t) => i in s ? $(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var C = (s, i, t) => A(s, typeof i != "symbol" ? i + "" : i, t), R = (s, i, t) => i.has(s) || I("Cannot " + t);
+var e = (s, i, t) => (R(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? I("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), c = (s, i, t, o) => (R(s, i, "write to private field"), o ? o.call(s, t) : i.set(s, t), t);
+import { t as B } from "../utils/timeout.js";
+import { E as q } from "../utils/Utils.js";
+import { B as P } from "./Base.js";
+import { s as k } from "../css/ea-notification.style.js";
+var v, E, _, L, S, x;
+class z {
+  /**
+   * @param {EaNotificationOptions} options
+   */
+  constructor(i) {
+    n(this, v, ["dangerouslyUseHTMLString", "message"]);
+    n(this, E, ["appendTo"]);
+    n(this, _, {
+      title: "",
+      dangerouslyUseHTMLString: !1,
+      message: "",
+      icon: "",
+      type: "info",
+      duration: 3e3,
+      placement: "top-right",
+      zIndex: 0,
+      showClose: !0,
+      closeIcon: "icon-cancel",
+      appendTo: "body"
+    });
+    /**
+     *
+     * @param {HTMLElement} el
+     * @param {EaNotificationOptions} options
+     * @returns
+     */
+    n(this, L, (i) => {
+      const t = document.createElement("ea-notification");
+      for (const o in i) {
+        if (e(this, E).includes(o)) continue;
+        const p = i[o];
+        if (e(this, v).includes(o))
+          t[o] = p;
+        else {
+          const w = q.String.toLowerCamelCase(o);
+          t.setAttribute(w, p);
+        }
+      }
+      return t;
+    });
+    /**
+     *
+     * @param {HTMLElement} el
+     * @param {HTMLElement | String} appendTo
+     * @returns
+     */
+    n(this, S, (i, t) => {
+      if (!t) return document.body.appendChild(i);
+      if (t instanceof HTMLElement)
+        t.appendChild(i);
+      else if (typeof t == "string") {
+        const o = document.querySelector(t);
+        o ? o.appendChild(i) : document.body.appendChild(i);
+      } else
+        console.warn(
+          `[EaNotification] TypeError: ${t} is not a valid element or selector.`
+        );
+    });
+    /**
+     *
+     * @param {HTMLElement} el
+     * @param {number} duration
+     * @returns
+     */
+    n(this, x, (i, t = 3e3) => {
+      i.visible = !0, i.addEventListener("hidden", () => i.remove()), t > 0 && B(() => {
+        i.visible = !1;
+      }, t);
+    });
+    C(this, "close", () => {
+      this.instance.close();
+    });
+    i = Object.assign({}, e(this, _), i);
+    const t = e(this, L).call(this, i);
+    this.instance = t, e(this, S).call(this, t, i.appendTo), e(this, x).call(this, t, i.duration);
+  }
+}
+v = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), L = new WeakMap(), S = new WeakMap(), x = new WeakMap();
+const r = (s) => new z(s);
+r.primary = (s) => r({
+  ...s,
+  type: "primary"
+});
+r.success = (s) => r({
+  ...s,
+  type: "success"
+});
+r.warning = (s) => r({
+  ...s,
+  type: "warning"
+});
+r.info = (s) => r({
+  ...s,
+  type: "info"
+});
+r.error = (s) => r({
+  ...s,
+  type: "error"
+});
+var a, M, y, g, d, m, l, b, f, h, N, T, H;
+class V extends P {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    n(this, a);
+    /** @type {HTMLElement} */
+    n(this, M);
+    /** @type {HTMLElement} */
+    n(this, y);
+    /** @type {HTMLElement} */
+    n(this, g);
+    /** @type {HTMLElement} */
+    n(this, d);
+    /** @type {HTMLElement} */
+    n(this, m);
+    /** @type {AbortController} */
+    n(this, l);
+    /** @type {AbortController} */
+    n(this, b);
+    n(this, f, {
+      dangerouslyUseHTMLString: !1,
+      message: ""
+    });
+    C(this, "state", this.properties({
+      type: {
+        type: ["primary", "success", "warning", "info", "error"],
+        default: "info",
+        observer: (t) => {
+          const o = {
+            success: "icon-ok-circled",
+            error: "icon-cancel-circled",
+            warning: "icon-attention-alt",
+            info: "icon-info",
+            primary: "icon-info"
+          };
+          e(this, y).icon = o[t], e(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, g).textContent = t;
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: async (t) => {
+          var o;
+          (o = e(this, l)) == null || o.abort(), c(this, l, new AbortController()), t ? (e(this, N).call(this), e(this, a).className = this.updateContainerClasslist(), e(this, h).call(this, "show"), e(this, a).offsetWidth, e(this, a).classList.add("is-show"), e(this, a).addEventListener(
+            "transitionend",
+            () => {
+              e(this, h).call(this, "shown");
+            },
+            { once: !0, signal: e(this, l).signal }
+          )) : (e(this, T).call(this), e(this, a).classList.add("is-before-hide"), e(this, h).call(this, "hide"), e(this, a).addEventListener(
+            "transitionend",
+            () => {
+              e(this, a).className = this.updateContainerClasslist(), e(this, h).call(this, "hidden");
+            },
+            { once: !0, signal: e(this, l).signal }
+          ));
+        }
+      },
+      showClose: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist(), e(this, d).icon = this["close-icon"];
+        }
+      },
+      closeIcon: {
+        type: String,
+        default: "icon-cancel",
+        observer: (t) => {
+          this["show-close"] && (e(this, d).icon = t);
+        }
+      },
+      placement: {
+        type: ["top-right", "top-left", "bottom-right", "bottom-left"],
+        default: "top-right",
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      zIndex: {
+        type: Number,
+        default: 0,
+        observer: (t) => {
+          e(this, a).style.setProperty("--z-index", t);
+        }
+      }
+    }));
+    n(this, h, (t, o) => {
+      this.emit(t, {
+        detail: o,
+        bubbles: !0,
+        composed: !0
+      });
+    });
+    C(this, "close", () => {
+      this.visible = !1, e(this, h).call(this, "close");
+    });
+    n(this, N, () => {
+      const t = document.querySelectorAll(
+        `ea-notification[placement="${this.placement}"]`
+      );
+      if (t.length <= 1) return;
+      const o = t[t.length - 2], p = o.style.getPropertyValue("--ea-notification-y"), u = o.shadowRoot.querySelector(".ea-notification").getBoundingClientRect();
+      this.style.setProperty(
+        "--ea-notification-y",
+        `${Number(p.replace("px", "")) + u.height + 8}px`
+      );
+    });
+    n(this, T, () => {
+      const t = [
+        ...document.querySelectorAll(
+          `ea-notification[placement="${this.placement}"]`
+        )
+      ], o = t.findIndex((u) => u === this), p = t.slice(o + 1), w = e(this, a).getBoundingClientRect().height;
+      p.forEach((u, O) => {
+        const U = Number(
+          u.style.getPropertyValue("--ea-notification-y").replace("px", "")
+        );
+        u.style.setProperty(
+          "--ea-notification-y",
+          `${U - w - 8}px`
+        );
+      });
+    });
+    n(this, H, () => {
+      this.visible = !1;
+    });
+    this.stylesheet = k, this.$render();
+  }
+  // ------- dangerouslyUseHTMLString -------
+  // #region
+  get dangerouslyUseHTMLString() {
+    return e(this, f).dangerouslyUseHTMLString;
+  }
+  set dangerouslyUseHTMLString(t) {
+    e(this, f).dangerouslyUseHTMLString = t;
+  }
+  // #endregion
+  // ------- end -------
+  // ------- message -------
+  // #region
+  get message() {
+    return e(this, f).message;
+  }
+  set message(t) {
+    e(this, f).message = t, this.dangerouslyUseHTMLString ? e(this, m).innerHTML = t : e(this, m).innerText = t;
+  }
+  // #endregion
+  // ------- end -------
+  static get observedAttributes() {
+    return q.Array.toLowerCamelCase([
+      "visible",
+      "title",
+      "message",
+      "type",
+      "icon",
+      "duration",
+      "placement",
+      "showClose",
+      "zIndex",
+      "closeIcon"
+    ]);
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-notification", {
+      "--visible": this.visible,
+      ["--" + this.type]: this.type,
+      "--show-close": this["show-close"],
+      ["--" + this.placement]: this.placement
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class="ea-notification" part='container'>
+        <ea-icon class="ea-notification__icon" part="icon"></ea-icon>
+        <div class="ea-notification__content">
+          <header class="ea-notification__header" part='header'>
+            <h2 class="ea-notification__title" part="title"> </h2>
+            <ea-icon class="ea-notification__close-icon" part='close-icon'></ea-icon>
+          </header>
+          <main class="ea-notification__main" part='main'> </main>
+        </div>
+      </div>
+        `, c(this, a, this.shadowRoot.querySelector(".ea-notification")), c(this, M, this.shadowRoot.querySelector(".ea-notification__header")), c(this, y, this.shadowRoot.querySelector(
+      ".ea-notification__icon"
+    )), c(this, g, this.shadowRoot.querySelector(".ea-notification__title")), c(this, d, this.shadowRoot.querySelector(
+      ".ea-notification__close-icon"
+    )), c(this, m, this.shadowRoot.querySelector(".ea-notification__main"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = new AbortController();
+    c(this, b, t), this["show-close"] && e(this, d).addEventListener("click", e(this, H), {
+      signal: t.signal
+    });
+  }
+  $beforeUnmounted() {
+    var t, o;
+    (t = e(this, l)) == null || t.abort(), (o = e(this, b)) == null || o.abort();
+  }
+}
+a = new WeakMap(), M = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), m = new WeakMap(), l = new WeakMap(), b = new WeakMap(), f = new WeakMap(), h = new WeakMap(), N = new WeakMap(), T = new WeakMap(), H = new WeakMap();
+window.customElements.get("ea-notification") || window.customElements.define("ea-notification", V);
+window.$notify = r;
+export {
+  r as EaNotification,
+  V as EaNotificationElement
+};