easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-space.js

@@ -0,0 +1,109 @@
+var f = Object.defineProperty;
+var n = (t) => {
+  throw TypeError(t);
+};
+var m = (t, s, e) => s in t ? f(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var o = (t, s, e) => m(t, typeof s != "symbol" ? s + "" : s, e), p = (t, s, e) => s.has(t) || n("Cannot " + e);
+var i = (t, s, e) => (p(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (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), d = (t, s, e, r) => (p(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
+import { B as y } from "./Base.js";
+import { s as g } from "../css/ea-space.style.js";
+var a;
+class v extends y {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, a);
+    o(this, "state", this.properties({
+      wrap: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.style.setProperty("--ea-space-wrap", e ? "wrap" : "nowrap");
+        }
+      },
+      alignment: {
+        type: String,
+        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: (e) => {
+          i(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: String,
+        default: "default",
+        observer: (e) => {
+          if (["large", "small", "default"].includes(e))
+            i(this, a).className = `${this.updateContainerClasslist()} ea-space--${e}`;
+          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) => {
+          const r = [...this.children];
+          r.forEach((h, u) => {
+            if (u < r.length - 1) {
+              const l = document.createElement("span");
+              l.innerText = e, l.part = "spacer", this.insertBefore(l, h.nextSibling);
+            }
+          });
+        }
+      },
+      fill: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          i(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      "fill-ratio": {
+        type: Number,
+        default: 100,
+        observer: (e) => {
+          this.style.setProperty("--ea-space-fill-ratio", `${e}%`);
+        }
+      }
+    }));
+    this.stylesheet = g, this.$render();
+  }
+  static get observedAttributes() {
+    return ["wrap", "direction", "size", "spacer", "alignment", "fill", "fill-ratio"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-space", {
+      ["--" + this.direction]: this.direction,
+      "--fill": this.fill
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class="ea-space" part="container">
+                <slot></slot>
+            </div>
+        `, d(this, a, this.shadowRoot.querySelector(".ea-space"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+a = new WeakMap();
+window.customElements.get("ea-space") || window.customElements.define("ea-space", v);
+export {
+  v as EaSpace
+};

package/dist/components/ea-splitter.js

@@ -0,0 +1,217 @@
+var $ = Object.defineProperty;
+var W = (e) => {
+  throw TypeError(e);
+};
+var k = (e, s, t) => s in e ? $(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var f = (e, s, t) => k(e, typeof s != "symbol" ? s + "" : s, t), L = (e, s, t) => s.has(e) || W("Cannot " + t);
+var n = (e, s, t) => (L(e, s, "read from private field"), t ? t.call(e) : s.get(e)), c = (e, s, t) => s.has(e) ? W("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), b = (e, s, t, i) => (L(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import { B as N } from "./Base.js";
+import { s as I } from "../css/ea-splitter.style.js";
+import { s as M } from "../css/ea-splitter-panel.style.js";
+import { s as q } from "../css/ea-splitter-bar.style.js";
+const d = (e) => e.endsWith("px") ? parseInt(e.replace("px", "")) : e.endsWith("%") ? Number(e.replace("%", "")) / 100 : parseInt(e);
+var a, m, h, y, v;
+class D extends N {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, a);
+    /** @type {AbortController} */
+    c(this, m);
+    f(this, "state", this.properties({
+      layout: {
+        type: ["horizontal", "vertical"],
+        default: "horizontal",
+        observer: (t) => {
+          n(this, a).style.setProperty("--ea-splitter-direction", t === "vertical" ? "column" : "row"), n(this, a).className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 派发 resizeStart 事件
+     * @param {string} eventName 事件名称
+     */
+    c(this, h, (t) => {
+      this.dispatchEvent(new CustomEvent(t, {
+        detail: {
+          size: [...this.children].filter((i) => i.tagName === "EA-SPLITTER-PANEL").map((i) => {
+            var o;
+            return (o = i.getBoundingClientRect()) == null ? void 0 : o[this.layout === "vertical" ? "height" : "width"];
+          })
+        }
+      }));
+    });
+    /**
+     * `layout="horizontal"` 时的 `resize` 事件监听
+     * @param {MouseEvent} e
+     */
+    c(this, y, (t) => {
+      t.preventDefault(), t.stopPropagation();
+      const i = new AbortController(), o = Number(t.target.getAttribute("data-index")), r = this.children[o - 1], l = this.children[o + 1], R = t.clientX, z = r.getBoundingClientRect().width, P = l.getBoundingClientRect().width;
+      n(this, h).call(this, "panel-resize-start");
+      const S = (H) => {
+        t.preventDefault(), t.stopPropagation();
+        const g = H.clientX - R, C = z + g, w = P - g;
+        let p = 0, u = 0;
+        r.min.endsWith("%") ? (p = n(this, a).clientWidth * d(r.min), u = n(this, a).clientWidth * d(l.min)) : r.min.endsWith("px") && (p = d(r.min), u = d(l.min)), !(C <= p || w <= u) && (r.size = C + "px", l.size = w + "px", n(this, h).call(this, "panel-resize"));
+      }, A = () => {
+        i.abort(), n(this, h).call(this, "panel-resize-end");
+      };
+      window.addEventListener("mousemove", S, { signal: i.signal }), window.addEventListener("mouseup", A, { signal: i.signal });
+    });
+    /**
+     * `layout="vertical"` 时的 `resize` 事件监听
+     * @param {MouseEvent} e
+     */
+    c(this, v, (t) => {
+      t.preventDefault(), t.stopPropagation();
+      const i = new AbortController(), o = Number(t.target.getAttribute("data-index")), r = this.children[o - 1], l = this.children[o + 1], R = t.clientY, z = r.getBoundingClientRect().height, P = l.getBoundingClientRect().height;
+      n(this, h).call(this, "resize-start");
+      const S = (H) => {
+        t.preventDefault(), t.stopPropagation();
+        const g = H.clientY - R, C = z + g, w = P - g;
+        let p = 0, u = 0;
+        r.min.endsWith("%") ? (p = n(this, a).clientHeight * d(r.min), u = n(this, a).clientHeight * d(l.min)) : r.min.endsWith("px") && (p = d(r.min), u = d(l.min)), !(C <= p || w <= u) && (r.size = C + "px", l.size = w + "px", n(this, h).call(this, "panel-resize"));
+      }, A = () => {
+        i.abort(), n(this, h).call(this, "panel-resize-end");
+      };
+      window.addEventListener("mousemove", S, { signal: i.signal }), window.addEventListener("mouseup", A, { signal: i.signal });
+    });
+    this.stylesheet = I, this.$render();
+  }
+  static get observedAttributes() {
+    return ["layout"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+          <div class="ea-splitter" part="container">
+            <slot></slot>
+          </div>
+        `, b(this, a, this.shadowRoot.querySelector(".ea-splitter"));
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-splitter", {
+      ["--" + this.layout]: !!(this.layout || this.layout === "")
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), b(this, m, new AbortController()), queueMicrotask(() => {
+      let t = [...this.children];
+      [...this.children].forEach((i, o) => {
+        if (i.tagName === "EA-SPLITTER-PANEL" && (i.layout = this.layout, i.setAttribute("data-panel-index", o), o < t.length - 1)) {
+          const r = document.createElement("ea-splitter-bar");
+          this.insertBefore(r, i.nextSibling);
+        }
+      }), t = [...this.children], t.forEach((i, o) => {
+        i.tagName === "EA-SPLITTER-BAR" && (i.setAttribute("data-index", o), i.layout = this.layout, i.addEventListener("mousedown", this.layout === "horizontal" ? n(this, y) : n(this, v), { signal: n(this, m).signal }));
+      });
+    });
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = n(this, m)) == null || t.abort();
+  }
+}
+a = new WeakMap(), m = new WeakMap(), h = new WeakMap(), y = new WeakMap(), v = new WeakMap();
+window.customElements.get("ea-splitter") || window.customElements.define("ea-splitter", D);
+var E;
+class X extends N {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, E);
+    f(this, "state", this.properties({
+      size: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-size", t);
+        }
+      },
+      min: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-min-size", t);
+        }
+      },
+      layout: {
+        type: ["vertical", "horizontal"],
+        default: "horizontal",
+        observer: (t) => {
+        }
+      }
+    }));
+    this.stylesheet = M, this.$render();
+  }
+  static get observedAttributes() {
+    return ["size", "min", "layout"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist(
+      "ea-splitter-panel",
+      {
+        // ['--' + this.state.type]: this.state.type,
+      }
+    );
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class="ea-splitter-panel" part="container">
+                <slot></slot>
+            </div>
+        `, b(this, E, this.shadowRoot.querySelector(".ea-splitter-panel"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+E = new WeakMap();
+window.customElements.get("ea-splitter-panel") || window.customElements.define("ea-splitter-panel", X);
+var x;
+class Y extends N {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, x);
+    f(this, "state", this.properties({
+      layout: {
+        type: ["vertical", "horizontal"],
+        default: "",
+        observer: (t) => {
+        }
+      }
+    }));
+    this.stylesheet = q, this.$render();
+  }
+  static get observedAttributes() {
+    return ["layout"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-splitter-bar", {
+      // ['--' + this.state.type]: this.state.type,
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class="ea-splitter-bar" part="container"></div>
+        `, b(this, x, this.shadowRoot.querySelector(".ea-splitter-bar"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+x = new WeakMap();
+window.customElements.get("ea-splitter-bar") || window.customElements.define("ea-splitter-bar", Y);

package/dist/components/ea-statistic.js

@@ -0,0 +1,6 @@
+import "./Base.js";
+import "../css/ea-statistic.style.js";
+import { E as a } from "./ea-statistic2.js";
+export {
+  a as EaStatistic
+};

package/dist/components/ea-statistic2.js

@@ -0,0 +1,83 @@
+var m = Object.defineProperty;
+var p = (t) => {
+  throw TypeError(t);
+};
+var _ = (t, e, s) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var d = (t, e, s) => _(t, typeof e != "symbol" ? e + "" : e, s), f = (t, e, s) => e.has(t) || p("Cannot " + s);
+var u = (t, e, s) => (f(t, e, "read from private field"), s ? s.call(t) : e.get(t)), a = (t, e, s) => e.has(t) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), i = (t, e, s, h) => (f(t, e, "write to private field"), h ? h.call(t, s) : e.set(t, s), s);
+import { B as b } from "./Base.js";
+import { s as x } from "../css/ea-statistic.style.js";
+class E extends Event {
+  constructor(e) {
+    super("ea-finish", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
+  }
+}
+var n, o, r, c, l;
+class w extends b {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, o);
+    /** @type {HTMLElement} */
+    a(this, r);
+    /** @type {HTMLElement} */
+    a(this, c);
+    /** @type {HTMLElement} */
+    a(this, l);
+    d(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (s) => {
+          u(this, o).textContent = s;
+        }
+      },
+      value: {
+        type: Number,
+        default: 0,
+        /**  @param {Number} newVal */
+        observer: (s) => {
+          u(this, r).textContent = s.toLocaleString();
+        }
+      }
+    }));
+    this.stylesheet = x, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "title", "value"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-statistic' part='container'>
+        <header class='ea-statistic__header' part='title'>
+          <slot name='title'></slot>
+        </header>
+        <main class='ea-statistic__content' part='content'>
+          <span class='ea-statistic__prefix' part='prefix'>
+            <slot name='prefix'></slot>
+          </span>
+          <span class='ea-statistic__number' part='number'>
+            <slot></slot>
+          </span>
+          <span class='ea-statistic__suffix' part='suffix'>
+            <slot name='suffix'></slot>
+          </span>
+        </main>
+      </div>
+    `, i(this, n, this.shadowRoot.querySelector(".ea-statistic")), i(this, o, this.shadowRoot.querySelector(".ea-statistic__header slot")), i(this, r, this.shadowRoot.querySelector(".ea-statistic__number")), i(this, c, this.shadowRoot.querySelector(".ea-statistic__prefix slot")), i(this, l, this.shadowRoot.querySelector(".ea-statistic__suffix slot"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+n = new WeakMap(), o = new WeakMap(), r = new WeakMap(), c = new WeakMap(), l = new WeakMap();
+window.customElements.get("ea-statistic") || window.customElements.define("ea-statistic", w);
+export {
+  w as E,
+  E as a
+};