easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-scrollbar.js

@@ -0,0 +1,235 @@
+var z = Object.defineProperty;
+var _ = (o) => {
+  throw TypeError(o);
+};
+var R = (o, i, s) => i in o ? z(o, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : o[i] = s;
+var k = (o, i, s) => R(o, typeof i != "symbol" ? i + "" : i, s), E = (o, i, s) => i.has(o) || _("Cannot " + s);
+var t = (o, i, s) => (E(o, i, "read from private field"), s ? s.call(o) : i.get(o)), r = (o, i, s) => i.has(o) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(o) : i.set(o, s), h = (o, i, s, l) => (E(o, i, "write to private field"), l ? l.call(o, s) : i.set(o, s), s);
+import { B as C } from "./Base.js";
+import { s as H } from "../css/ea-scrollbar.style.js";
+var n, b, g, c, a, e, L, u, d, p, f, w, m;
+class S extends C {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, n);
+    /** @type {HTMLElement} */
+    r(this, b);
+    /** @type {HTMLElement} */
+    r(this, g);
+    /** @type {HTMLElement} */
+    r(this, c);
+    /** @type {HTMLElement} */
+    r(this, a);
+    /** @type {HTMLElement} */
+    r(this, e);
+    r(this, L, {
+      verticalScrollDistance: 0,
+      horizontalScrollDistance: 0
+    });
+    /**
+     * @typedef {Object} State
+     */
+    /** @type {State} */
+    k(this, "state", this.properties({
+      height: {
+        type: String,
+        default: "",
+        observer: (s) => {
+        }
+      },
+      native: {
+        type: Boolean,
+        default: !1,
+        observer: (s) => {
+          t(this, n).classList.toggle("ea-scrollbar--native", s);
+        }
+      },
+      noresize: {
+        type: Boolean,
+        default: !1,
+        observer: (s) => {
+          t(this, n).classList.toggle("ea-scrollbar--noresize", s);
+        }
+      },
+      always: {
+        type: Boolean,
+        default: !1,
+        observer: (s) => {
+          t(this, n).classList.toggle("ea-scrollbar--always", s);
+        }
+      }
+    }));
+    /**
+     * 滚动事件 - 修改滚动条样式 和 事件派发
+     */
+    r(this, u, () => {
+      t(this, c).style.setProperty(
+        "--ea-scrollbar-top",
+        `${t(this, e).scrollTop / t(this, e).scrollHeight * 100}%`
+      ), t(this, a).style.setProperty(
+        "--ea-scrollbar-left",
+        `${t(this, e).scrollLeft / t(this, e).scrollWidth * 100}%`
+      ), this.dispatchEvent(
+        new CustomEvent("scroll", {
+          detail: {
+            scrollTop: t(this, e).scrollTop,
+            scrollLeft: t(this, e).scrollLeft
+          }
+        })
+      );
+      const s = {
+        left: t(this, e).scrollTop / t(this, e).scrollHeight <= 0,
+        right: t(this, e).scrollTop / t(this, e).scrollHeight >= 1,
+        top: t(this, e).scrollLeft / t(this, e).scrollWidth <= 0,
+        bottom: t(this, e).scrollLeft / t(this, e).scrollWidth >= 1
+      };
+      Object.keys(s).forEach((l) => {
+        s[l] && this.dispatchEvent(
+          new CustomEvent("end-reached", {
+            detail: {
+              direction: l,
+              scrollTop: t(this, e).scrollTop,
+              scrollLeft: t(this, e).scrollLeft
+            }
+          })
+        );
+      });
+    });
+    /**
+     * 页面尺寸改变后，调整滚动条样式
+     */
+    r(this, d, () => {
+      queueMicrotask(() => {
+        const s = t(this, e).getBoundingClientRect(), l = s.height / t(this, e).scrollHeight, v = s.width / t(this, e).scrollWidth;
+        t(this, c).style.setProperty(
+          "--ea-scrollbar-thumb-vertical-height",
+          `${l * 100}%`
+        ), t(this, a).style.setProperty(
+          "--ea-scrollbar-thumb-horizontal-width",
+          `${v * 100}%`
+        ), t(this, g).classList.toggle(
+          "is-show",
+          l >= 0.999
+        ), t(this, b).classList.toggle(
+          "is-show",
+          v >= 0.999
+        );
+      });
+    });
+    /**
+     * 垂直滚动条拖动事件
+     * @param {MouseEvent} e
+     */
+    r(this, p, (s) => {
+      const l = t(this, g).getBoundingClientRect(), y = (s.clientY - l.top) / l.height * (t(this, e).scrollHeight - t(this, e).clientHeight);
+      t(this, e).scrollTo({
+        top: y,
+        behavior: "instant"
+      }), t(this, c).classList.add("is-active");
+    });
+    /**
+     * 水平滚动条拖动事件
+     * @param {MouseEvent} e
+     */
+    r(this, f, (s) => {
+      const l = t(this, b).getBoundingClientRect(), y = (s.clientX - l.left) / l.width * (t(this, e).scrollWidth - t(this, e).clientWidth);
+      t(this, e).scrollTo({
+        left: y,
+        behavior: "instant"
+      }), t(this, a).classList.add("is-active");
+    });
+    /**
+     * 鼠标按下事件
+     * @param {MouseEvent} e
+     */
+    r(this, w, (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const l = new AbortController(), v = s.target === t(this, a);
+      window.addEventListener(
+        "mousemove",
+        v ? t(this, f) : t(this, p),
+        { signal: l.signal }
+      ), window.addEventListener(
+        "mouseup",
+        () => {
+          l.abort(), t(this, a).classList.remove("is-active"), t(this, c).classList.remove("is-active");
+        },
+        { signal: l.signal }
+      );
+    });
+    /**
+     * 键盘事件
+     * @param {KeyboardEvent} e
+     */
+    r(this, m, (s) => {
+      s.key === "ArrowUp" || s.key === "ArrowDown" ? t(this, e).scrollTo({
+        top: t(this, e).scrollTop + t(this, e).scrollHeight / 8 * (s.key === "ArrowUp" ? -1 : 1),
+        behavior: "smooth"
+      }) : (s.key === "ArrowLeft" || s.key === "ArrowRight") && t(this, e).scrollTo({
+        left: t(this, e).scrollLeft + t(this, e).scrollWidth / 8 * (s.key === "ArrowLeft" ? -1 : 1),
+        behavior: "smooth"
+      });
+    });
+    this.stylesheet = H, this.isMounted = !1;
+  }
+  static get observedAttributes() {
+    return ["native", "noresize", "always"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <div class="ea-scrollbar" part="container">
+                <div class="ea-scrollbar__track ea-scrollbar__track-horizontal" part="track-horizontal">
+                    <div class="ea-scrollbar__thumb-horizontal" part="thumb"></div>
+                </div>
+                <div class="ea-scrollbar__track ea-scrollbar__track-vertical" part="track-vertical">
+                    <div class="ea-scrollbar__thumb-vertical" part="thumb"></div>
+                </div>
+                <div class="ea-scrollbar__view" part="view-container">
+                    <slot></slot>
+                </div>
+            </div>
+        `, h(this, n, this.shadowRoot.querySelector(".ea-scrollbar")), h(this, g, this.shadowRoot.querySelector(
+      ".ea-scrollbar__track-vertical"
+    )), h(this, b, this.shadowRoot.querySelector(
+      ".ea-scrollbar__track-horizontal"
+    )), h(this, c, this.shadowRoot.querySelector(
+      ".ea-scrollbar__thumb-vertical"
+    )), h(this, a, this.shadowRoot.querySelector(
+      ".ea-scrollbar__thumb-horizontal"
+    )), h(this, e, this.shadowRoot.querySelector(".ea-scrollbar__view")), this.isMounted = !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.$render(), this.native = this.native, this.noresize = this.noresize, this.always = this.always, this.eventController = new AbortController();
+    const s = this.eventController;
+    t(this, d).call(this), t(this, e).addEventListener("scroll", t(this, u), {
+      signal: s.signal
+    }), t(this, a).addEventListener("mousedown", t(this, w), {
+      signal: s.signal
+    }), t(this, c).addEventListener("mousedown", t(this, w), {
+      signal: s.signal
+    }), this.addEventListener("keydown", t(this, m)), this.noresize || window.addEventListener("resize", t(this, d), {
+      signal: s.signal
+    }), this.shadowRoot.addEventListener("slotchange", t(this, d), {
+      signal: s.signal
+    }), window.addEventListener("load", t(this, d), {
+      signal: s.signal
+    });
+  }
+  /**
+   * @exports scrollTo
+   * @param {ScrollToOptions} options
+   */
+  scrollTo(s) {
+    t(this, e).scrollTo(s);
+  }
+  $beforeUnmounted() {
+    var s;
+    (s = this.eventController) == null || s.abort();
+  }
+}
+n = new WeakMap(), b = new WeakMap(), g = new WeakMap(), c = new WeakMap(), a = new WeakMap(), e = new WeakMap(), L = new WeakMap(), u = new WeakMap(), d = new WeakMap(), p = new WeakMap(), f = new WeakMap(), w = new WeakMap(), m = new WeakMap();
+window.customElements.get("ea-scrollbar") || window.customElements.define("ea-scrollbar", S);
+export {
+  S as EaScrollbar
+};

package/dist/components/ea-segmented.js

@@ -0,0 +1,215 @@
+var _ = Object.defineProperty;
+var C = (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 m = (t, s, e) => k(t, typeof s != "symbol" ? s + "" : s, e), f = (t, s, e) => s.has(t) || C("Cannot " + e);
+var n = (t, s, e) => (f(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (t, s, e) => s.has(t) ? C("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), y = (t, s, e, a) => (f(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e), w = (t, s, e) => (f(t, s, "access private method"), e);
+import { B as S } from "./Base.js";
+import { s as A } from "../css/ea-segmented.style.js";
+import { E as u } from "../utils/Utils.js";
+var o, r, b, E, v, d;
+class $ extends S {
+  constructor() {
+    super();
+    c(this, b);
+    /** @type {HTMLElement} */
+    c(this, o);
+    /** @type {AbortController} */
+    c(this, r);
+    m(this, "propsState", this.properties({
+      options: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (e) => {
+          this.hasAttribute("name") || (this.setAttribute(
+            "name",
+            this.tagName + "-" + u.String.randomString()
+          ), console.warn(`[${this.tagName}] name attribute is required.`, this)), w(this, b, E).call(this, e);
+        }
+      },
+      propsConfiguration: {
+        props: !0,
+        type: Object,
+        default: {
+          label: "label",
+          value: "value",
+          disabled: "disabled"
+        },
+        observer: (e) => {
+        }
+      }
+    }));
+    m(this, "state", this.properties({
+      value: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          n(this, d).call(this, e);
+        }
+      },
+      size: {
+        type: ["large", "default", "small"],
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist(), n(this, d).call(this, this.value);
+        }
+      },
+      direction: {
+        type: ["horizontal", "vertical"],
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist(), n(this, d).call(this, this.value);
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      block: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * change 事件
+     * @param {Event} e
+     */
+    c(this, v, (e) => {
+      const a = e.target.value;
+      this.value = a, this.emit("change", { detail: { value: a } });
+    });
+    /**
+     * 更新指示器位置
+     * @param {string} value
+     */
+    c(this, d, (e = this.value) => {
+      var a;
+      ((a = this.options) != null && a.includes(e) || this.options.some((g) => g[this.propsConfiguration.value] === e)) && [
+        ...n(this, o).querySelectorAll(".ea-segmented__item")
+      ].forEach((h) => {
+        const l = h.querySelector(".ea-segmented__original");
+        if (h.classList.toggle("is-checked", (l == null ? void 0 : l.value) === e), (l == null ? void 0 : l.value) === e) {
+          const p = h.getBoundingClientRect();
+          this.style.setProperty(
+            "--ea-segmented-indicator-width",
+            `${p.width}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-height",
+            `${p.height}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-x",
+            `${h.offsetLeft}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-y",
+            `${h.offsetTop}px`
+          );
+        }
+      });
+    });
+    this.stylesheet = A, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "value", "size", "direction", "block"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-segmented",
+      {
+        ["--" + this.size]: this.size
+      },
+      {
+        [this.direction]: this.direction,
+        block: this.block
+      }
+    );
+    return n(this, o).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-segmented' part='container'></div>
+    `, y(this, o, this.shadowRoot.querySelector(".ea-segmented")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = n(this, r)) == null || e.abort();
+  }
+}
+o = new WeakMap(), r = new WeakMap(), b = new WeakSet(), /**
+ * 渲染选项列表
+ * @param {Array<{label: string, value: string, disabled: Boolean}> | Array<String>} options
+ */
+E = function(e) {
+  var p;
+  (p = n(this, r)) == null || p.abort(), y(this, r, new AbortController());
+  const a = this.propsConfiguration, g = e.map(
+    (i) => u.EaElement.h(
+      "label",
+      null,
+      {
+        class: [
+          "ea-segmented__item",
+          i[a.disabled] || this.disabled ? "is-disabled" : "",
+          i.checked || this.value === (i.value || i) ? "is-checked" : ""
+        ],
+        part: "item",
+        for: i[a.label] || i[a.value] || i
+      },
+      [
+        u.EaElement.h(
+          "input",
+          "ea-segmented__original",
+          {
+            part: "input",
+            type: "radio",
+            name: this.name || this.getAttrString("name"),
+            id: i[a.label] || i[a.value] || i,
+            value: i[a.value] || i,
+            checked: i.checked,
+            disabled: i[a.disabled] || this.disabled
+          },
+          ""
+        ),
+        u.EaElement.h(
+          "span",
+          "ea-segmented__label",
+          {
+            part: "label",
+            "aria-label": i[a.label] || i[a.value] || i
+          },
+          i[a.label] || i[a.value] || i
+        )
+      ]
+    )
+  ).join(""), h = u.EaElement.h(
+    "span",
+    "ea-segmented__indicator",
+    { part: "indicator" },
+    null
+  ), l = () => {
+    n(this, d).call(this, this.value);
+  };
+  n(this, o).innerHTML = [g, h].join(""), n(this, d).call(this, this.value), n(this, o).addEventListener("change", n(this, v), {
+    signal: n(this, r).signal
+  }), window.addEventListener("resize", l, {
+    signal: n(this, r).signal
+  });
+}, v = new WeakMap(), d = new WeakMap();
+window.customElements.get("ea-segmented") || window.customElements.define("ea-segmented", $);
+export {
+  $ as EaSegmented
+};