easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-popover.js

@@ -0,0 +1,123 @@
+var x = Object.defineProperty;
+var E = (t) => {
+  throw TypeError(t);
+};
+var S = (t, s, e) => s in t ? x(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var w = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), y = (t, s, e) => s.has(t) || E("Cannot " + e);
+var o = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? E("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, i) => (y(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { EaPopper as L } from "./ea-popper.js";
+import { s as _ } from "../css/ea-popover.style.js";
+var u, l, v, a, h, d, f, p, g, m;
+class k extends L {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, u);
+    /** @type {HTMLElement} */
+    r(this, l);
+    /** @type {HTMLElement} */
+    r(this, v);
+    /** @type {HTMLElement} */
+    r(this, a);
+    /** @type {HTMLElement} */
+    r(this, h);
+    /** @type {AbortController} */
+    r(this, d);
+    r(this, f);
+    w(this, "state", this.properties({
+      trigger: {
+        type: ["click", "focus", "hover", "contextmenu", "customized"],
+        default: "hover",
+        observer: (e) => {
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.status = e;
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (o(this, a))
+            o(this, a).innerText = e;
+          else {
+            const i = document.createElement("div"), n = o(this, l).querySelector("slot");
+            i.classList.add("ea-popover__title"), i.part = "title", i.innerText = e, o(this, l).insertBefore(i, n), c(this, a, i);
+          }
+        }
+      },
+      content: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (o(this, h))
+            o(this, h).innerText = e;
+          else {
+            const i = document.createElement("div"), n = o(this, l).querySelector("slot");
+            i.classList.add("ea-popover__content"), i.part = "content", i.innerText = e, o(this, l).appendChild(i), c(this, h, i), n.remove();
+          }
+        }
+      }
+    }));
+    r(this, p, {
+      hover: () => {
+        this.addEventListener("mouseover", (e) => {
+          this.show(), this.addEventListener("mouseout", (i) => {
+            this.hide();
+          }, { once: !0 });
+        }, { signal: o(this, d).signal });
+      },
+      click: () => {
+        this.addEventListener("click", () => {
+          this.toggle();
+        });
+      },
+      focus: () => {
+        this.addEventListener("focus", () => {
+          this.show(), this.addEventListener("blur", (e) => {
+            this.hide();
+          });
+        });
+      },
+      contextmenu: () => {
+        this.addEventListener("contextmenu", (e) => {
+          e.preventDefault();
+          const i = new AbortController();
+          this.show(), window.addEventListener("click", (n) => {
+            this.contains(n.target) || (this.hide(), i.abort());
+          }, { signal: i.signal });
+        });
+      }
+    });
+    r(this, g, () => {
+      const e = new AbortController();
+      c(this, d, e), this.assignedStyle(_);
+    });
+    r(this, m, () => {
+      var i, n;
+      if (this.trigger === "customized") return;
+      const e = Object.keys(o(this, p)).find((b) => this.trigger === b);
+      (n = (i = o(this, p))[e || "hover"]) == null || n.call(i), e || console.warn(`[EaPopper] trigger event ${this.trigger} is not exist`);
+    });
+    c(this, u, this.shadowRoot.querySelector(".ea-popper")), c(this, l, this.shadowRoot.querySelector(".ea-popper__original")), c(this, v, this.shadowRoot.querySelector(".ea-popper__reference"));
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "trigger", "title", "content", "visible"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), o(this, g).call(this), o(this, m).call(this);
+  }
+  $beforeUnmounted() {
+    var e;
+    super.$beforeUnmounted(), (e = o(this, d)) == null || e.abort();
+  }
+}
+u = new WeakMap(), l = new WeakMap(), v = new WeakMap(), a = new WeakMap(), h = new WeakMap(), d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), g = new WeakMap(), m = new WeakMap();
+window.customElements.get("ea-popover") || window.customElements.define("ea-popover", k);
+export {
+  k as EaPopover
+};

package/dist/components/ea-popper.js

@@ -0,0 +1,203 @@
+var y = Object.defineProperty;
+var m = (s) => {
+  throw TypeError(s);
+};
+var v = (s, t, e) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var w = (s, t, e) => v(s, typeof t != "symbol" ? t + "" : t, e), g = (s, t, e) => t.has(s) || m("Cannot " + e);
+var i = (s, t, e) => (g(s, t, "read from private field"), e ? e.call(s) : t.get(s)), l = (s, t, e) => t.has(s) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), c = (s, t, e, r) => (g(s, t, "write to private field"), r ? r.call(s, e) : t.set(s, e), e);
+import { B as C } from "./Base.js";
+import { s as x } from "../css/ea-popper.style.js";
+const b = (s, t = 0) => {
+  const e = s.getBoundingClientRect();
+  return e.top >= t && e.left >= t && e.bottom <= window.innerHeight - t && e.right <= window.innerWidth - t;
+}, B = (s, t) => {
+  const e = {
+    left: "right",
+    right: "left",
+    top: "bottom",
+    bottom: "top"
+  }, r = s.getBoundingClientRect(), n = {
+    top: r.top < 0 && t.includes("top"),
+    bottom: r.bottom > window.innerHeight && t.includes("bottom"),
+    left: r.left < 0 && t.includes("left"),
+    right: r.right > window.innerWidth && t.includes("right")
+  };
+  if (b(s)) return t;
+  for (const p in n)
+    if (n[p])
+      return t.replace(p, e[p]);
+  return t;
+};
+var o, a, f, h, u, d;
+class R extends C {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    l(this, o);
+    /** @type {HTMLElement} */
+    l(this, a);
+    /** @type {HTMLElement} */
+    l(this, f);
+    /** @type {AbortController} */
+    l(this, h);
+    /** @type {Boolean} */
+    l(this, u);
+    w(this, "state", this.properties({
+      width: {
+        type: Number,
+        default: "150",
+        observer: (e) => {
+          i(this, a).style.setProperty(
+            "--ea-popper-width",
+            `${e}px`
+          );
+        }
+      },
+      placement: {
+        type: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end"
+        ],
+        default: "top",
+        observer: (e) => {
+          i(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      "show-arrow": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          i(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      status: {
+        type: Boolean,
+        default: !1,
+        observer: async (e) => {
+          var r;
+          if ((r = i(this, h)) == null || r.abort(), c(this, h, new AbortController()), e) {
+            if (i(this, o).className = this.updateContainerClasslist(), i(this, d).call(this, "show"), this.flip) {
+              const n = i(this, a).getBoundingClientRect(), p = b(
+                this,
+                Math.max(n.width, n.height)
+              );
+              i(this, u) === this.placement ? this.placement = B(
+                i(this, a),
+                this.placement
+              ) : p && (this.placement = i(this, u));
+            }
+            i(this, o).offsetWidth, i(this, o).classList.add("ea-popper--is-show"), i(this, o).addEventListener(
+              "transitionend",
+              () => {
+                i(this, d).call(this, "shown");
+              },
+              { once: !0, signal: i(this, h).signal }
+            );
+          } else
+            i(this, o).classList.add("ea-popper--before-hide"), i(this, d).call(this, "hide"), i(this, o).addEventListener(
+              "transitionend",
+              () => {
+                i(this, o).className = this.updateContainerClasslist(), i(this, d).call(this, "hidden");
+              },
+              { once: !0, signal: i(this, h).signal }
+            );
+        }
+      },
+      offset: {
+        type: String,
+        default: "0 0",
+        observer: (e) => {
+          try {
+            let [r, n] = e.split(" ").map((p) => Number(p.trim()));
+            if (r && typeof n > "u")
+              n = r;
+            else if (!(r && n || `${r} ${n}` == "0 0"))
+              throw new RangeError(
+                `[ea-popper] Invalid offset value: ${e}, expected format: "x(Number) y(Number)"`
+              );
+            i(this, a).style.setProperty(
+              "--ea-popper-transform-x",
+              `${r}px`
+            ), i(this, a).style.setProperty(
+              "--ea-popper-transform-y",
+              `${n}px`
+            );
+          } catch (r) {
+            console.error(r);
+          }
+        }
+      },
+      flip: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+        }
+      }
+    }));
+    l(this, d, (e, r) => {
+      this.emit(e, {
+        detail: r,
+        bubbles: !0,
+        composed: !0
+      });
+    });
+    this.stylesheet = x, this.$render();
+  }
+  static get observedAttributes() {
+    return ["width", "placement", "show-arrow", "status", "offset", "filp"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-popper", {
+      ["--" + this.placement]: this.placement,
+      "--show-arrow": this["show-arrow"],
+      "--show": this.status
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class='ea-popper' part='container' tabindex='-1'>
+                <div class='ea-popper__reference' part='reference' tabindex='-1'>
+                    <div class='ea-popper__original' part='original' tabindex='0'>
+                        <slot></slot>
+                    </div>
+                    <slot name='reference'></slot>
+                </div>
+            </div>
+        `, c(this, o, this.shadowRoot.querySelector(".ea-popper")), c(this, a, this.shadowRoot.querySelector(
+      ".ea-popper__original"
+    )), c(this, f, this.shadowRoot.querySelector(
+      ".ea-popper__reference"
+    ));
+  }
+  show() {
+    this.status = !0;
+  }
+  hide() {
+    this.status = !1;
+  }
+  toggle() {
+    this.status = !this.status;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.placement = this.placement, c(this, u, this.placement);
+  }
+}
+o = new WeakMap(), a = new WeakMap(), f = new WeakMap(), h = new WeakMap(), u = new WeakMap(), d = new WeakMap();
+window.customElements.get("ea-popper") || window.customElements.define("ea-popper", R);
+export {
+  R as EaPopper
+};

package/dist/components/ea-progress.js

@@ -0,0 +1,269 @@
+var _ = Object.defineProperty;
+var x = (t) => {
+  throw TypeError(t);
+};
+var k = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var f = (t, s, e) => k(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || x("Cannot " + e);
+var r = (t, s, e) => (m(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (t, s, e) => s.has(t) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, i) => (m(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as w } from "../css/ea-progress.style.js";
+const P = `
+<svg viewBox="0 0 100 100">
+    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
+    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
+</svg>
+<section class="ea-progress__percentage" part="percentage">
+    <slot></slot>
+</section>
+`, S = `
+<svg viewBox="0 0 100 100">
+    <mask id="myMask">
+        <rect class="mask" width="100%" height="20%" fill="white" />
+    </mask>
+    <clipPath id="myClip">
+        <rect class="mask" />
+    </clipPath>
+    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
+    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
+</svg>
+<section class="ea-progress__percentage" part="percentage">
+    <slot></slot>
+</section>
+`;
+var a, d, o, p, u;
+class B extends v {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, a);
+    /** @type {HTMLElement} */
+    c(this, d);
+    /** @type {HTMLElement} */
+    c(this, o);
+    /** @type {HTMLElement} */
+    c(this, p);
+    f(this, "propState", this.properties({
+      color: {
+        props: !0,
+        type: {
+          Array: () => {
+            var e, i;
+            return ((i = (e = this.props) == null ? void 0 : e.color) == null ? void 0 : i.length) > 0;
+          },
+          Function: () => {
+            var e;
+            return typeof ((e = this.props) == null ? void 0 : e.color) == "function";
+          },
+          String: () => {
+            var e;
+            return typeof this.getAttribute("color") == "string" || typeof ((e = this.props) == null ? void 0 : e.color) == "string";
+          }
+        },
+        default: () => this.getAttribute("color") || "",
+        observer: (e) => {
+          r(this, u).call(this, e, e);
+        }
+      }
+    }));
+    f(this, "state", this.properties({
+      percentage: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          if (e < 0) return this.percentage = 0;
+          if (e > 100) return this.percentage = 100;
+          const i = this.querySelector("[data-percentage]"), n = {
+            success: "icon-ok-circled",
+            warning: "icon-attention-circled",
+            exception: "icon-cancel-circled"
+          }, l = {
+            line: () => e + "%",
+            circle: () => 302 * ((100 - e) / 100) + "px",
+            dashboard: () => {
+              const C = 49 - Number(this["stroke-width"].replace("px", "")) / 2, y = 2 * Math.PI * C, b = (100 - e) / 100;
+              return r(this, o).style.strokeDasharray = y * (270 / 360) + "px", r(this, d).style.strokeDasharray = y * (270 / 360) + "px", y * (270 / 360) * b + "px";
+            }
+          };
+          r(this, a).style.setProperty(
+            "--ea-progress-percentage",
+            l[this.type]()
+          ), ["success", "exception", "warning"].includes(this.status) && !this["text-inside"] ? r(this, p).innerHTML = `<ea-icon class="ea-progress__status" icon="${n[this.status]}" part="status-icon"></ea-icon>` : r(this, p).textContent = e + "%", i && (i.textContent = this.percentage), r(this, u).call(this, this.color, e), this.emit("change", {
+            detail: {
+              percentage: e
+            }
+          });
+        }
+      },
+      type: {
+        type: ["line", "circle", "dashboard"],
+        default: "line",
+        observer: () => {
+          this.$render(), this.updateContainerClasslist();
+        }
+      },
+      status: {
+        type: ["success", "exception", "warning"],
+        default: "",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      "stroke-width": {
+        type: String,
+        default: "8px",
+        observer: (e) => {
+          if (!CSS.supports("width", e))
+            return console.warn(
+              `[EaProgress] The width value ${e} is not supported.`
+            );
+          r(this, a).style.setProperty("--ea-progress-stroke-width", e);
+        }
+      },
+      "text-inside": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          try {
+            e && r(this, o).appendChild(r(this, p));
+          } catch {
+          }
+          this.updateContainerClasslist();
+        }
+      },
+      indeterminate: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      duration: {
+        type: Number,
+        default: 3,
+        observer: (e) => {
+          r(this, a).style.setProperty(
+            "--ea-progress-animation-duration",
+            `${e}s`
+          );
+        }
+      },
+      striped: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      "striped-flow": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: String,
+        default: "126px",
+        observer: (e) => {
+          this.type !== "line" && r(this, a).style.setProperty("--ea-progress-size", e);
+        }
+      },
+      "show-text": {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 处理颜色变化
+     * @param {string | string[] | function} color 颜色值或函数
+     * @param {number} [percentage] 百分比
+     */
+    c(this, u, (e, i = this.percentage) => {
+      if (!(!e || typeof e > "u"))
+        if (Array.isArray(e)) {
+          let n = e[0];
+          for (let l = 0; l < e.length; l++) {
+            const g = e[l];
+            if (i <= g.percentage) {
+              n = g;
+              break;
+            }
+          }
+          r(this, o).style.setProperty("--ea-progress-path-color", n == null ? void 0 : n.color);
+        } else typeof e == "string" ? r(this, o).style.setProperty("--ea-progress-path-color", e) : typeof e == "function" && r(this, o).style.setProperty(
+          "--ea-progress-path-color",
+          e(i)
+        );
+    });
+    this.stylesheet = w, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "type",
+      "percentage",
+      "status",
+      "stroke-width",
+      "text-inside",
+      "indeterminate",
+      "duration",
+      "striped",
+      "striped-flow",
+      // "width",
+      "show-text"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-progress",
+      {
+        ["--" + this.status]: this.status,
+        "--text-inside": this["text-inside"],
+        "--striped": this.striped
+      },
+      {
+        [this.type]: this.type,
+        indeterminate: this.indeterminate && this.type === "line" && !this["striped-flow"],
+        "striped-flow": this["striped-flow"],
+        "show-text": this["show-text"]
+      }
+    );
+    return r(this, a).className = e, e;
+  }
+  $render() {
+    const e = {
+      line: `
+        <div class='ea-progress' part='container'>
+          <section class="ea-progress__track" part="track">
+              <section class="ea-progress__path" part="path"></section>
+          </section>
+          <section class="ea-progress__percentage" part="percentage">
+            <slot class="ea-progress__percentage"></slot>
+          </section>
+        </div>
+      `,
+      circle: P,
+      dashboard: S
+    };
+    this.shadowRoot.innerHTML = `
+      <div class='ea-progress' part='container'>
+        ${e[this.type]}
+      </div>
+    `, h(this, a, this.shadowRoot.querySelector(".ea-progress")), h(this, d, this.shadowRoot.querySelector(".ea-progress__track")), h(this, o, this.shadowRoot.querySelector(".ea-progress__path")), h(this, p, this.shadowRoot.querySelector(".ea-progress__percentage slot")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+a = new WeakMap(), d = new WeakMap(), o = new WeakMap(), p = new WeakMap(), u = new WeakMap();
+window.customElements.get("ea-progress") || window.customElements.define("ea-progress", B);
+export {
+  B as EaProgress
+};