easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-space.js

@@ -1,123 +1,138 @@
-var m = Object.defineProperty;
-var n = (t) => {
-  throw TypeError(t);
+import { E as m } from "../core/EaBase.ts.js";
+import { q as d, a as l, C as y } from "../core/decorator.js";
+import { E as c } from "../utils/Enum.ts.js";
+import { s as v } from "../css/ea-space.style.js";
+import { c as C } from "../utils/bem.ts.js";
+var b = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(i, n) : i, o = e.length - 1, p; o >= 0; o--)
+    (p = e[o]) && (s = (a ? p(i, n, s) : p(s)) || s);
+  return a && s && b(i, n, s), s;
 };
-var b = (t, s, e) => s in t ? m(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var p = (t, s, e) => b(t, typeof s != "symbol" ? s + "" : s, e), c = (t, s, e) => s.has(t) || n("Cannot " + e);
-var u = (t, s, e) => (c(t, s, "read from private field"), e ? e.call(t) : s.get(t)), d = (t, s, e) => s.has(t) ? n("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, a) => (c(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { B as g } from "./Base.js";
-import { s as y } from "../css/ea-space.style.js";
-var r;
-class v extends g {
+const u = "ea-space", f = C(u), S = ["horizontal", "vertical"], h = ["small", "default", "large"], g = [
+  "",
+  "center",
+  "flex-start",
+  "flex-end",
+  "baseline",
+  "stretch"
+];
+let t = class extends m {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    d(this, r);
-    p(this, "state", this.properties({
-      wrap: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.style.setProperty("--ea-space-wrap", e ? "wrap" : "nowrap");
-        }
-      },
-      alignment: {
-        type: ["", "center", "flex-start", "flex-end", "baseline", "stretch"],
-        default: "",
-        observer: (e) => {
-          if (!CSS.supports("align-items", e))
-            return console.warn(`[ea-space] Invalid alignment value ${e}`);
-          this.style.setProperty("--ea-space-alignment", e);
-        }
-      },
-      direction: {
-        type: ["vertical", "horizontal"],
-        default: "horizontal",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: String,
-        default: "default",
-        observer: (e) => {
-          if (["large", "small", "default"].includes(e))
-            this.updateContainerClasslist();
-          else {
-            if (!CSS.supports("gap", e))
-              return console.warn("[ea-space] Invalid size value");
-            this.style.setProperty("--ea-space-gap", e);
-          }
-        }
-      },
-      spacer: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          if (this.querySelectorAll('[part="spacer"]').forEach((i) => i.remove()), !e) return;
-          const o = [...this.children];
-          o.forEach((i, f) => {
-            if (f < o.length - 1) {
-              const l = document.createElement("span");
-              l.innerText = e, l.part = "spacer", this.insertBefore(l, i.nextSibling);
-            }
-          });
-        }
-      },
-      fill: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "fill-ratio": {
-        type: Number,
-        default: 100,
-        observer: (e) => {
-          Number.isNaN(Number(e)) || this.toggleAttribute("fill", !0), this.style.setProperty("--ea-space-fill-ratio", `${e}%`);
-        }
-      }
-    }));
-    this.stylesheet = y, this.$render();
+    super(...arguments), this.wrap = !1, this.alignment = "", this.direction = "horizontal", this.size = "default", this.spacer = "", this.fill = !1, this.fillRatio = 100;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "wrap",
-      "direction",
-      "size",
-      "spacer",
-      "alignment",
-      "fill",
-      "fill-ratio"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist("ea-space", {
-      [`--${this.size}`]: !CSS.supports("gap", this.size),
-      ["--" + this.direction]: this.direction,
-      "--fill": this.fill
-    });
-    return u(this, r).className = e, e;
+    const e = h.includes(this.size), i = f(
+      {
+        [this.size]: e,
+        vertical: this.direction === "vertical",
+        fill: this.fill
+      },
+      { wrap: this.wrap }
+    );
+    return this._container && (this._container.className = i), i;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class="ea-space" part="container">
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
         <slot></slot>
       </div>
-    `, h(this, r, this.shadowRoot.querySelector(".ea-space")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-r = new WeakMap();
-window.customElements.get("ea-space") || window.customElements.define("ea-space", v);
+};
+r([
+  d(f.cb())
+], t.prototype, "_container", 2);
+r([
+  l({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "wrap", 2);
+r([
+  l({
+    type: c(g),
+    default: "",
+    observer(e) {
+      if (e && !CSS.supports("align-items", e)) {
+        console.warn(`[ea-space] Invalid alignment value: ${e}`);
+        return;
+      }
+      this.style.setProperty("--ea-space-alignment", e || "center");
+    }
+  })
+], t.prototype, "alignment", 2);
+r([
+  l({
+    type: c(S),
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "direction", 2);
+r([
+  l({
+    type: String,
+    default: "default",
+    observer(e) {
+      if (h.includes(e))
+        this.updateContainerClasslist();
+      else {
+        if (!CSS.supports("gap", e)) {
+          console.warn("[ea-space] Invalid size value");
+          return;
+        }
+        this.style.setProperty("--ea-space-gap", e);
+      }
+    }
+  })
+], t.prototype, "size", 2);
+r([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      if (this.querySelectorAll('[part="spacer"]').forEach((a) => a.remove()), !e) return;
+      const n = [...this.children];
+      n.forEach((a, s) => {
+        if (s < n.length - 1) {
+          const o = document.createElement("span");
+          o.innerText = e, o.setAttribute("part", "spacer"), this.insertBefore(o, a.nextSibling);
+        }
+      });
+    }
+  })
+], t.prototype, "spacer", 2);
+r([
+  l({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "fill", 2);
+r([
+  l({
+    type: Number,
+    default: 100,
+    observer(e) {
+      Number.isNaN(Number(e)) || (this.fill = !0), this.style.setProperty("--ea-space-fill-ratio", `${e}%`);
+    }
+  })
+], t.prototype, "fillRatio", 2);
+t = r([
+  y(u, { styles: [v] })
+], t);
 export {
-  v as EaSpace
+  g as ALIGNMENT_TYPES,
+  S as DIRECTION_TYPES,
+  t as EaSpace,
+  h as SIZE_TYPES
 };