easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-overlay.js

@@ -0,0 +1,161 @@
+var b = Object.defineProperty;
+var f = (e) => {
+  throw TypeError(e);
+};
+var w = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var y = (e, s, t) => w(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || f("Cannot " + t);
+var o = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), i = (e, s, t) => s.has(e) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, n) => (p(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
+import { B as C } from "./Base.js";
+import { s as k } from "../css/ea-overlay.style.js";
+import { t as g } from "../utils/timeout.js";
+var a, m, l, c, r, h, v;
+class E extends C {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, a);
+    /** @type {HTMLElement} */
+    i(this, m);
+    /** @type {HTMLElement} */
+    i(this, l);
+    /** @type {AbortController} */
+    i(this, c);
+    y(this, "state", this.properties({
+      status: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "open"), requestAnimationFrame(() => {
+            o(this, a).classList.add("ea-overlay--is-show"), o(this, a).addEventListener(
+              "transitionend",
+              () => {
+                o(this, r).call(this, "opened");
+              },
+              { once: !0 }
+            );
+          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, r).call(this, "close"), o(this, a).addEventListener(
+            "transitionend",
+            () => {
+              o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "closed");
+            },
+            { once: !0 }
+          ));
+        }
+      },
+      modal: {
+        type: Boolean,
+        default: !0,
+        observer: (t) => {
+          o(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      "before-close": {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+        }
+      },
+      "close-on-click-modal": {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+        }
+      },
+      ...[
+        "z-index",
+        "background-color",
+        "content-width",
+        "content-max-width",
+        "content-height",
+        "content-left",
+        "content-top",
+        "content-translate-x",
+        "content-translate-y",
+        "content-transform"
+      ].reduce((t, n) => (t[n] = {
+        type: String,
+        default: "",
+        observer: (u) => {
+          this.style.setProperty(`--ea-overlay-${n}`, u);
+        }
+      }, t), {})
+    }));
+    i(this, r, (t, n) => {
+      this.emit(t, {
+        detail: n
+        // bubbles: true,
+        // composed: true,
+      });
+    });
+    i(this, h, () => this.status = !1);
+    i(this, v, (t) => {
+      [...this.children].find(
+        (u) => u === t.target || u.contains(t.target)
+      ) || o(this, l) === t.target || o(this, l).contains(t.target) || (this["before-close"] ? this.emit("before-close", {
+        detail: { done: () => o(this, h).call(this) }
+      }) : o(this, h).call(this));
+    });
+    this.stylesheet = k, this.$render(), document.activeElement.blur(), g(() => {
+      this.focus();
+    }, 0);
+  }
+  static get observedAttributes() {
+    return [
+      "status",
+      "modal",
+      "before-close",
+      "close-on-click-modal",
+      "z-index",
+      "background-color",
+      "content-width",
+      "content-max-width",
+      "content-height",
+      "content-left",
+      "content-top",
+      "content-translate-x",
+      "content-translate-y",
+      "content-transform"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-overlay", {
+      "--open": this.status,
+      "--modal": !this.modal
+    });
+  }
+  show() {
+    this.status = !0;
+  }
+  hide() {
+    this.status = !1;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class='ea-overlay' part='container'>
+                <div class='ea-overlay__mask' part='mask'></div>
+                <div class='ea-overlay__content' part='content'>
+                    <slot></slot>
+                </div>
+            </div>
+        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, m, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, l, this.shadowRoot.querySelector(
+      ".ea-overlay__content"
+    ));
+  }
+  connectedCallback() {
+    super.connectedCallback(), d(this, c, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, v), {
+      signal: o(this, c).signal
+    });
+  }
+  $beforeUnmounted() {
+    o(this, c).abort();
+  }
+}
+a = new WeakMap(), m = new WeakMap(), l = new WeakMap(), c = new WeakMap(), r = new WeakMap(), h = new WeakMap(), v = new WeakMap();
+window.customElements.get("ea-overlay") || window.customElements.define("ea-overlay", E);
+export {
+  E as EaOverlay
+};

package/dist/components/ea-page-header.js

@@ -0,0 +1,108 @@
+var u = Object.defineProperty;
+var b = (t) => {
+  throw TypeError(t);
+};
+var m = (t, a, e) => a in t ? u(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e;
+var g = (t, a, e) => m(t, typeof a != "symbol" ? a + "" : a, e), _ = (t, a, e) => a.has(t) || b("Cannot " + e);
+var o = (t, a, e) => (_(t, a, "read from private field"), e ? e.call(t) : a.get(t)), s = (t, a, e) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, e), n = (t, a, e, i) => (_(t, a, "write to private field"), i ? i.call(t, e) : a.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as w } from "../css/ea-page-header.style.js";
+var c, l, d, h, r, p;
+class k extends v {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    s(this, c);
+    /** @type {HTMLSlotElement} */
+    s(this, l);
+    /** @type {HTMLSlotElement} */
+    s(this, d);
+    /** @type {HTMLSlotElement} */
+    s(this, h);
+    /** @type {AbortController} */
+    s(this, r, new AbortController());
+    g(this, "state", this.properties({
+      icon: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          const i = o(this, l).querySelector("ea-icon");
+          i && i.setAttribute("icon", e);
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, d).textContent = e;
+        }
+      },
+      content: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, h).textContent = e;
+        }
+      }
+    }));
+    /**
+     * 点击返回按钮时，派发 back 事件
+     */
+    s(this, p, () => {
+      this.emit("back");
+    });
+    this.stylesheet = w, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "icon", "title", "content"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-page-header' part='container'>
+        <section class="ea-page-header__breadcrumb" part="breadcrumb">
+          <slot name="breadcrumb"></slot>
+        </section>
+        <section class="ea-page-header__wrapper" part="header-wrapper">
+          <div class="ea-page-header__back" part="back">
+            <span class="ea-page-header__icon" part="icon">
+              <slot name="icon">
+                <ea-icon icon="icon-angle-left" part="back-icon"></ea-icon>
+              </slot>
+            </span>
+            <span class="ea-page-header__title" part="title">
+                <slot name="title">Back</slot>
+            </span>
+          </div>
+          <ea-icon class="ea-page-header__divider" part="divider">|</ea-icon>
+          <div class="ea-page-header__content" part="content">
+            <slot name="content"></slot>
+          </div>
+          <div class="ea-page-header__extra" part="extra">
+            <slot name="extra"></slot>
+          </div>
+        </section>
+        <slot></slot>
+      </div>
+    `, n(this, c, this.shadowRoot.querySelector(".ea-page-header__back")), n(this, l, this.shadowRoot.querySelector(
+      ".ea-page-header__icon slot[name='icon']"
+    )), n(this, d, this.shadowRoot.querySelector(
+      ".ea-page-header__title slot[name='title']"
+    )), n(this, h, this.shadowRoot.querySelector(
+      ".ea-page-header__content slot[name='content']"
+    ));
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = o(this, r)) == null || e.abort(), n(this, r, new AbortController()), o(this, c).addEventListener("click", o(this, p), {
+      signal: o(this, r).signal
+    });
+  }
+  $beforeUnmounted() {
+    o(this, r).abort();
+  }
+}
+c = new WeakMap(), l = new WeakMap(), d = new WeakMap(), h = new WeakMap(), r = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-page-header") || window.customElements.define("ea-page-header", k);
+export {
+  k as EaPageHeader
+};