easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-container.js

@@ -1,206 +1,214 @@
-var b = Object.defineProperty;
-var f = (t) => {
-  throw TypeError(t);
+import { E as p } from "../core/EaBase.ts.js";
+import { q as S, a as i, C as h, l as x } from "../core/decorator.js";
+import { E as D } from "../utils/Enum.ts.js";
+import { s as j } from "../css/ea-container.style.js";
+import { c } from "../utils/bem.ts.js";
+import { s as N } from "../css/ea-header.style.js";
+import { s as w } from "../css/ea-main.style.js";
+import { s as M } from "../css/ea-footer.style.js";
+import { s as T } from "../css/ea-aside.style.js";
+var G = Object.defineProperty, z = Object.getOwnPropertyDescriptor, y = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? z(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && G(r, a, t), t;
 };
-var g = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var n = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), y = (t, s, e) => s.has(t) || f("Cannot " + e);
-var r = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), a = (t, s, e, d) => (y(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
-import { B as c } from "./Base.js";
-import { s as w } from "../css/ea-container.style.js";
-import { s as C } from "../css/ea-header.style.js";
-import { s as E } from "../css/ea-main.style.js";
-import { s as $ } from "../css/ea-footer.style.js";
-import { s as v } from "../css/ea-aside.style.js";
-var h, l, i, u;
-class S extends c {
+const g = "ea-container", $ = c(g), q = ["horizontal", "vertical"];
+let n = class extends p {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, h);
-    /** @type {SlotElement} */
-    o(this, l);
-    /** @type {AbortController} */
-    o(this, i);
-    /**
-     * @typedef {Object} State
-     * @property {string} direction 排列方向
-     */
-    /** @type {State} */
-    n(this, "state", this.properties({
-      direction: {
-        type: ["horizontal", "vertical"],
-        default: "horizontal",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 处理槽位变化事件
-     */
-    o(this, u, () => {
-      const e = [...this.querySelectorAll("& > *")].map(
-        (d) => d.tagName.toLowerCase()
-      );
-      this.hasAttribute("direction") || (e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal");
-    });
-    this.stylesheet = w, this.$render();
+    super(...arguments), this.direction = "horizontal";
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "direction"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist("ea-container", {
-      [`--${this.direction}`]: this.direction
-    });
-    return r(this, h).className = e, e;
+    const e = $({ [this.direction]: !0 });
+    return this._container && (this._container.className = e), e;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-        <div class="ea-container" part="container">
-            <slot></slot>
-        </div>
-    `, a(this, h, this.shadowRoot.querySelector(".ea-container")), a(this, l, this.shadowRoot.querySelector("slot"));
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <slot></slot>
+      </div>
+    `;
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = r(this, i)) == null || e.abort(), a(this, i, new AbortController()), r(this, l).addEventListener("slotchange", r(this, u), {
-      signal: r(this, i).signal
-    });
+  _handleSlotChange() {
+    if (this.hasAttribute("direction")) return;
+    const e = [...this.querySelectorAll("& > *")].map(
+      (r) => r.tagName.toLowerCase()
+    );
+    e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal";
   }
-  $beforeUnmounted() {
-    var e;
-    (e = r(this, i)) == null || e.abort();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-h = new WeakMap(), l = new WeakMap(), i = new WeakMap(), u = new WeakMap();
-customElements.get("ea-container") || customElements.define("ea-container", S);
-class k extends c {
+};
+y([
+  S($.cb())
+], n.prototype, "_container", 2);
+y([
+  i({
+    type: D(q),
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "direction", 2);
+y([
+  x("slotchange", "slot")
+], n.prototype, "_handleSlotChange", 1);
+n = y([
+  h(g, { styles: [j] })
+], n);
+var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, d = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? I(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && B(r, a, t), t;
+};
+const P = "ea-header", F = c(P);
+let u = class extends p {
   constructor() {
-    super();
-    /**
-     * @typedef {Object} State
-     * @property {string} height
-     */
-    /** @type {State} */
-    n(this, "state", this.properties({
-      height: {
-        type: String,
-        default: "60px",
-        observer: (e) => {
-          e && CSS.supports("height", e) ? this.style.setProperty("--ea-header-height", e) : e ? this.style.setProperty("--ea-header-height", "60px") : this.style.setProperty("--ea-header-height", "auto");
-        }
-      }
-    }));
-    this.stylesheet = C, this.$render();
-  }
-  static get observedAttributes() {
-    return ["height"];
+    super(...arguments), this.label = "", this.height = "60px";
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <header class="ea-header" part="container">
+  html() {
+    return `
+      <header class="${F()}" part="container">
         <slot></slot>
       </header>
     `;
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-window.customElements.get("ea-header") || window.customElements.define("ea-header", k);
-class x extends c {
+};
+d([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-header",
+      map: (e) => e || null
+    }
+  })
+], u.prototype, "label", 2);
+d([
+  i({
+    type: String,
+    default: "60px",
+    observer(e) {
+      e && CSS.supports("height", e) ? this.style.setProperty("--ea-header-height", e) : e ? this.style.setProperty("--ea-header-height", "60px") : this.style.setProperty("--ea-header-height", "auto");
+    }
+  })
+], u.prototype, "height", 2);
+u = d([
+  h(P, { styles: [N] })
+], u);
+var H = Object.defineProperty, L = Object.getOwnPropertyDescriptor, C = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? L(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && H(r, a, t), t;
+};
+const O = "ea-main", R = c(O);
+let _ = class extends p {
   constructor() {
-    super(), this.stylesheet = E, this.$render();
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <main class="ea-main" part="container">
-                <slot></slot>
-            </main>
-        `;
+    super(...arguments), this.label = "";
   }
-  connectedCallback() {
-    super.connectedCallback();
+  html() {
+    return `
+      <main class="${R()}" part="container">
+        <slot></slot>
+      </main>
+    `;
   }
-}
-window.customElements.get("ea-main") || window.customElements.define("ea-main", x);
-var p;
-class A extends c {
+};
+C([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-main",
+      map: (e) => e || null
+    }
+  })
+], _.prototype, "label", 2);
+_ = C([
+  h(O, { styles: [w] })
+], _);
+var Y = Object.defineProperty, J = Object.getOwnPropertyDescriptor, v = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? J(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && Y(r, a, t), t;
+};
+const E = "ea-footer", K = c(E);
+let f = class extends p {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, p);
-    /**
-     * @typedef {Object} State
-     * @property {string} height
-     */
-    /** @type {State} */
-    n(this, "state", this.properties({
-      height: {
-        type: String,
-        default: "60px",
-        observer: (e) => {
-          e && CSS.supports("height", e) ? this.style.setProperty("--ea-footer-height", e) : e ? this.style.setProperty("--ea-footer-height", "60px") : this.style.setProperty("--ea-footer-height", "auto");
-        }
-      }
-    }));
-    this.stylesheet = $, this.$render();
-  }
-  static get observedAttributes() {
-    return ["height"];
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <footer class="ea-footer" part="container">
-                <slot></slot>
-            </footer>
-        `, a(this, p, this.shadowRoot.querySelector(".ea-footer"));
+    super(...arguments), this.label = "", this.height = "60px";
   }
-  connectedCallback() {
-    super.connectedCallback();
+  html() {
+    return `
+      <footer class="${K()}" part="container">
+        <slot></slot>
+      </footer>
+    `;
   }
-}
-p = new WeakMap();
-window.customElements.get("ea-footer") || window.customElements.define("ea-footer", A);
-var m;
-class R extends c {
+};
+v([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-footer",
+      map: (e) => e || null
+    }
+  })
+], f.prototype, "label", 2);
+v([
+  i({
+    type: String,
+    default: "60px",
+    observer(e) {
+      e && CSS.supports("height", e) ? this.style.setProperty("--ea-footer-height", e) : e ? this.style.setProperty("--ea-footer-height", "60px") : this.style.setProperty("--ea-footer-height", "auto");
+    }
+  })
+], f.prototype, "height", 2);
+f = v([
+  h(E, { styles: [M] })
+], f);
+var Q = Object.defineProperty, U = Object.getOwnPropertyDescriptor, b = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? U(r, a) : r, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (t = (s ? l(r, a, t) : l(t)) || t);
+  return s && t && Q(r, a, t), t;
+};
+const A = "ea-aside", W = c(A);
+let m = class extends p {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, m);
-    /**
-     * @typedef {Object} State
-     */
-    /** @type {State} */
-    n(this, "state", this.properties({
-      width: {
-        type: String,
-        default: "300px",
-        observer: (e) => {
-          this.style.setProperty("--ea-aside-width", e);
-        }
-      }
-    }));
-    this.stylesheet = v, this.$render();
-  }
-  static get observedAttributes() {
-    return ["width"];
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <aside class="ea-aside" part="container">
-                <slot></slot>
-            </aside>
-        `, a(this, m, this.shadowRoot.querySelector(".ea-aside"));
+    super(...arguments), this.label = "", this.width = "300px";
   }
-  connectedCallback() {
-    super.connectedCallback();
+  html() {
+    return `
+      <aside class="${W()}" part="container">
+        <slot></slot>
+      </aside>
+    `;
   }
-}
-m = new WeakMap();
-window.customElements.get("ea-aside") || window.customElements.define("ea-aside", R);
+};
+b([
+  i({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-aside",
+      map: (e) => e || null
+    }
+  })
+], m.prototype, "label", 2);
+b([
+  i({
+    type: String,
+    default: "300px",
+    observer(e) {
+      this.style.setProperty("--ea-aside-width", e);
+    }
+  })
+], m.prototype, "width", 2);
+m = b([
+  h(A, { styles: [T] })
+], m);