easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-result.js

@@ -0,0 +1,102 @@
+import { E as m } from "../core/EaBase.ts.js";
+import { q as n, a as l, C as _ } from "../core/decorator.js";
+import { E as d } from "../utils/Enum.ts.js";
+import { V as b, b as v } from "../core/constants.js";
+import { s as f } from "../css/ea-result.style.js";
+import "./ea-icon.js";
+import { c as y } from "../utils/bem.ts.js";
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (i, o, p, r) => {
+  for (var a = r > 1 ? void 0 : r ? S(o, p) : o, c = i.length - 1, u; c >= 0; c--)
+    (u = i[c]) && (a = (r ? u(o, p, a) : u(a)) || a);
+  return r && a && C(o, p, a), a;
+};
+const h = "ea-result", t = y(h);
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.variant = "", this.heading = "", this.subTitle = "", this.icon = "";
+  }
+  /** 更新图标，icon 属性优先于 variant 默认图标 */
+  _updateIcon() {
+    const i = this.icon || v[this.variant] || "";
+    this._icon.setAttribute("name", i);
+  }
+  /** 更新标题内容，设置 slot 的 fallback */
+  _updateHeading() {
+    this._titleSlot && (this._titleSlot.textContent = this.heading);
+  }
+  /** 更新副标题内容，设置 slot 的 fallback */
+  _updateSubTitle() {
+    this._subTitleSlot && (this._subTitleSlot.textContent = this.subTitle);
+  }
+  updateContainerClasslist() {
+    const i = t({ [this.variant]: !!this.variant });
+    return this._container && (this._container.className = i), i;
+  }
+  html() {
+    return `
+      <div class="${t()}" part="container" role="status">
+        <div class="${t.e("icon-wrap")}" part="icon-wrap"><slot name="icon"><ea-icon class="${t.e("icon")}" part="icon"></ea-icon></slot></div>
+        <h3 class="${t.e("title")}" part="title"><slot name="title"></slot></h3>
+        <div class="${t.e("sub-title")}" part="sub-title"><slot name="sub-title"></slot></div>
+        <div class="${t.e("extra")}" part="extra"><slot name="extra"></slot></div>
+      </div>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+};
+s([
+  n(t.cb())
+], e.prototype, "_container", 2);
+s([
+  n(`${t.ce("icon-wrap")} ea-icon`)
+], e.prototype, "_icon", 2);
+s([
+  n(`${t.ce("title")} slot[name="title"]`)
+], e.prototype, "_titleSlot", 2);
+s([
+  n(`${t.ce("sub-title")} slot[name="sub-title"]`)
+], e.prototype, "_subTitleSlot", 2);
+s([
+  l({
+    type: d(b),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIcon();
+    }
+  })
+], e.prototype, "variant", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateHeading();
+    }
+  })
+], e.prototype, "heading", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateSubTitle();
+    }
+  })
+], e.prototype, "subTitle", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateIcon();
+    }
+  })
+], e.prototype, "icon", 2);
+e = s([
+  _(h, { styles: [f] })
+], e);
+export {
+  e as EaResult
+};

package/dist/components/ea-scrollbar.js

@@ -0,0 +1,252 @@
+import { E as y } from "../core/EaBase.ts.js";
+import { q as _, l as c, C as T, a as u } from "../core/decorator.js";
+import { s as z } from "../css/ea-scrollbar.style.js";
+import { c as L } from "../utils/bem.ts.js";
+var C = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (t, i, l, r) => {
+  for (var a = r > 1 ? void 0 : r ? k(i, l) : i, h = t.length - 1, n; h >= 0; h--)
+    (n = t[h]) && (a = (r ? n(i, l, a) : n(a)) || a);
+  return r && a && C(i, l, a), a;
+};
+const f = "ea-scrollbar", s = L(f);
+let e = class extends y {
+  constructor() {
+    super(...arguments), this.height = "", this.native = !1, this.noresize = !1, this.always = !1, this._handleThumbDrag = (t) => {
+      var d, w;
+      if (!this._dragState || !this._view) return;
+      const {
+        isHorizontal: i,
+        startClientX: l,
+        startClientY: r,
+        startScrollLeft: a,
+        startScrollTop: h,
+        thumbWidth: n,
+        thumbHeight: p
+      } = this._dragState;
+      if (i) {
+        const v = t.clientX - l, m = ((d = this._horizontalTrack) == null ? void 0 : d.getBoundingClientRect().width) || 0, g = v / (m - n), b = a + g * (this._view.scrollWidth - this._view.clientWidth);
+        this._view.scrollTo({
+          left: Math.max(
+            0,
+            Math.min(b, this._view.scrollWidth - this._view.clientWidth)
+          ),
+          behavior: "instant"
+        });
+      } else {
+        const v = t.clientY - r, m = ((w = this._verticalTrack) == null ? void 0 : w.getBoundingClientRect().height) || 0, g = v / (m - p), b = h + g * (this._view.scrollHeight - this._view.clientHeight);
+        this._view.scrollTo({
+          top: Math.max(
+            0,
+            Math.min(b, this._view.scrollHeight - this._view.clientHeight)
+          ),
+          behavior: "instant"
+        });
+      }
+    };
+  }
+  updateContainerClasslist() {
+    const t = s(
+      { native: this.native, noresize: this.noresize, always: this.always },
+      {}
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  /** 处理滚动事件，更新滑块位置并派发滚动事件 */
+  _handleScroll() {
+    if (!this._view || !this._verticalThumb || !this._horizontalThumb) return;
+    this._verticalThumb.style.setProperty(
+      "--ea-scrollbar-top",
+      `${this._view.scrollTop / this._view.scrollHeight * 100}%`
+    ), this._horizontalThumb.style.setProperty(
+      "--ea-scrollbar-left",
+      `${this._view.scrollLeft / this._view.scrollWidth * 100}%`
+    ), this.emit("ea-scroll", {
+      detail: {
+        scrollTop: this._view.scrollTop,
+        scrollLeft: this._view.scrollLeft
+      }
+    });
+    const t = {
+      top: this._view.scrollTop / this._view.scrollHeight <= 0,
+      bottom: this._view.scrollTop / this._view.scrollHeight >= 1,
+      left: this._view.scrollLeft / this._view.scrollWidth <= 0,
+      right: this._view.scrollLeft / this._view.scrollWidth >= 1
+    };
+    Object.keys(t).forEach((i) => {
+      t[i] && this.emit("ea-end-reached", {
+        detail: {
+          direction: i,
+          scrollTop: this._view.scrollTop,
+          scrollLeft: this._view.scrollLeft
+        }
+      });
+    });
+  }
+  /** 处理尺寸变化，更新滑块大小和轨道可见性 */
+  _handleResize() {
+    queueMicrotask(() => {
+      var r, a;
+      if (!this._view || !this._verticalThumb || !this._horizontalThumb) return;
+      const t = this._view.getBoundingClientRect(), i = t.height / this._view.scrollHeight, l = t.width / this._view.scrollWidth;
+      this._verticalThumb.style.setProperty(
+        "--ea-scrollbar-thumb-vertical-height",
+        `${i * 100}%`
+      ), this._horizontalThumb.style.setProperty(
+        "--ea-scrollbar-thumb-horizontal-width",
+        `${l * 100}%`
+      ), (r = this._verticalTrack) == null || r.classList.toggle(
+        "is-hidden",
+        i >= 0.999
+      ), (a = this._horizontalTrack) == null || a.classList.toggle(
+        "is-hidden",
+        l >= 0.999
+      );
+    });
+  }
+  _handleMouseDown(t) {
+    var r, a, h, n, p;
+    if (t.preventDefault(), t.stopPropagation(), !this._view) return;
+    const i = t.target === this._horizontalThumb;
+    this._dragState = {
+      isHorizontal: i,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      startScrollLeft: this._view.scrollLeft,
+      startScrollTop: this._view.scrollTop,
+      thumbWidth: ((r = this._horizontalThumb) == null ? void 0 : r.getBoundingClientRect().width) || 0,
+      thumbHeight: ((a = this._verticalThumb) == null ? void 0 : a.getBoundingClientRect().height) || 0
+    }, (h = this._container) == null || h.classList.add("is-dragging"), i ? (n = this._horizontalThumb) == null || n.classList.add("is-active") : (p = this._verticalThumb) == null || p.classList.add("is-active");
+    const l = new AbortController();
+    window.addEventListener("mousemove", this._handleThumbDrag, {
+      signal: l.signal
+    }), window.addEventListener(
+      "mouseup",
+      () => {
+        var d, w, v;
+        l.abort(), this._dragState = void 0, (d = this._container) == null || d.classList.remove("is-dragging"), (w = this._horizontalThumb) == null || w.classList.remove("is-active"), (v = this._verticalThumb) == null || v.classList.remove("is-active");
+      },
+      { signal: l.signal, once: !0 }
+    );
+  }
+  _handleKeyDown(t) {
+    this._view && (t.key === "ArrowUp" || t.key === "ArrowDown" ? this._view.scrollTo({
+      top: this._view.scrollTop + this._view.scrollHeight / 8 * (t.key === "ArrowUp" ? -1 : 1),
+      behavior: "smooth"
+    }) : (t.key === "ArrowLeft" || t.key === "ArrowRight") && this._view.scrollTo({
+      left: this._view.scrollLeft + this._view.scrollWidth / 8 * (t.key === "ArrowLeft" ? -1 : 1),
+      behavior: "smooth"
+    }));
+  }
+  _handleViewScroll() {
+    this._handleScroll();
+  }
+  _handleSlotChange() {
+    this._handleResize();
+  }
+  _handleWindowResize() {
+    this.noresize || this._handleResize();
+  }
+  _handleWindowLoad() {
+    this._handleResize();
+  }
+  scrollTo(t, i) {
+    var l, r;
+    typeof t == "number" ? (l = this._view) == null || l.scrollTo(t, i ?? 0) : (r = this._view) == null || r.scrollTo(t);
+  }
+  html() {
+    return `
+      <div class="${s()}" part="container">
+        <div class="${s.e("track-horizontal")}" part="track-horizontal">
+          <div class="${s.e("thumb-horizontal")}" part="thumb-horizontal"></div>
+        </div>
+        <div class="${s.e("track-vertical")}" part="track-vertical">
+          <div class="${s.e("thumb-vertical")}" part="thumb-vertical"></div>
+        </div>
+        <div class="${s.e("view")}" part="view">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._handleResize(), this._container && (this._container.style.height = this.height || "100%");
+  }
+};
+o([
+  _(s.cb())
+], e.prototype, "_container", 2);
+o([
+  _(s.ce("track-horizontal"))
+], e.prototype, "_horizontalTrack", 2);
+o([
+  _(s.ce("track-vertical"))
+], e.prototype, "_verticalTrack", 2);
+o([
+  _(s.ce("thumb-horizontal"))
+], e.prototype, "_horizontalThumb", 2);
+o([
+  _(s.ce("thumb-vertical"))
+], e.prototype, "_verticalThumb", 2);
+o([
+  _(s.ce("view"))
+], e.prototype, "_view", 2);
+o([
+  u({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && (this._container.style.height = t || "100%");
+    }
+  })
+], e.prototype, "height", 2);
+o([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "native", 2);
+o([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "noresize", 2);
+o([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "always", 2);
+o([
+  c("mousedown", s.ce("thumb-horizontal")),
+  c("mousedown", s.ce("thumb-vertical"))
+], e.prototype, "_handleMouseDown", 1);
+o([
+  c("keydown")
+], e.prototype, "_handleKeyDown", 1);
+o([
+  c("scroll", s.ce("view"))
+], e.prototype, "_handleViewScroll", 1);
+o([
+  c("slotchange", s.ce("view"))
+], e.prototype, "_handleSlotChange", 1);
+o([
+  c("resize", "window")
+], e.prototype, "_handleWindowResize", 1);
+o([
+  c("load", "window")
+], e.prototype, "_handleWindowLoad", 1);
+e = o([
+  T(f, { styles: [z] })
+], e);
+export {
+  e as EaScrollbar
+};

package/dist/components/ea-segmented.js

@@ -0,0 +1,283 @@
+import { E as w } from "../core/EaBase.ts.js";
+import { a as h, C as z, q as E, p as g, l as y } from "../core/decorator.js";
+import { h as u } from "../utils/h.ts.js";
+import { h as P } from "../utils/html.ts.js";
+import { E as A } from "../utils/Enum.ts.js";
+import { s as S } from "../css/ea-segmented.style.js";
+import { c as T } from "../utils/bem.ts.js";
+class b extends Event {
+  constructor(i) {
+    super("change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = i;
+  }
+}
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, i, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? O(i, s) : i, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (t = (r ? l(i, s, t) : l(t)) || t);
+  return r && t && I(i, s, t), t;
+};
+const v = "ea-segmented", c = T(v);
+let k = 0, n = class extends w {
+  constructor() {
+    super(...arguments), this.options = [], this.propsConfiguration = {
+      label: "label",
+      value: "value",
+      disabled: "disabled"
+    }, this.value = "", this.size = "", this.direction = "", this.disabled = !1, this.block = !1, this.name = "";
+  }
+  updateContainerClasslist() {
+    const e = c(
+      { [this.size]: !!this.size },
+      { [this.direction]: !!this.direction, block: this.block }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <div class='${c()}' part='container'></div>
+    `;
+  }
+  /** 获取非禁用的选项列表 */
+  _getEnabledItems() {
+    return this._container ? Array.from(
+      this._container.querySelectorAll(".ea-segmented__item")
+    ).filter((e) => !e.hasAttribute("aria-disabled")) : [];
+  }
+  /** 更新 aria-activedescendant 指向当前选中项 */
+  _updateActiveDescendant() {
+    var s;
+    if (!this._container) return;
+    const e = this._container.querySelectorAll(".ea-segmented__item"), i = Array.from(e).find(
+      (r) => r.getAttribute("aria-checked") === "true"
+    );
+    i != null && i.id ? this.setAttribute("aria-activedescendant", i.id) : (s = e[0]) != null && s.id && this.setAttribute("aria-activedescendant", e[0].id);
+  }
+  /** 渲染选项列表 */
+  _renderOptions(e) {
+    if (!this._container) return;
+    const i = this.propsConfiguration, s = e.map((t) => {
+      const a = typeof t == "string", l = a ? t : t[i.label], d = a ? t : t[i.value], p = a ? this.disabled : t[i.disabled] || this.disabled, f = a ? this.value === t : t.checked || this.value === t[i.value], C = [
+        c.e("item"),
+        p ? "is-disabled" : "",
+        f ? "is-checked" : ""
+      ].filter(Boolean).join(" "), m = {
+        part: "input",
+        type: "radio",
+        name: this.name,
+        id: l || d,
+        value: d
+      };
+      p && (m.disabled = !0), f && (m.checked = !0);
+      const _ = {
+        part: "item",
+        for: l || d,
+        id: `${v}-item-${++k}`,
+        role: "radio",
+        "aria-checked": String(f)
+      };
+      return p && (_["aria-disabled"] = "true"), u(
+        "label",
+        C,
+        _,
+        [
+          u("input", c.e("original"), m, ""),
+          u(
+            "span",
+            c.e("label"),
+            {
+              part: "label"
+            },
+            l || d
+          )
+        ]
+      );
+    }).join(""), r = u(
+      "span",
+      c.e("indicator"),
+      { part: "indicator" },
+      null
+    );
+    this._container.innerHTML = P(
+      [s, r].join("")
+    ), this._updateIndicatorPosition(this.value), this._updateActiveDescendant();
+  }
+  _handleChange(e) {
+    e.stopPropagation();
+    const i = e.target.value;
+    this.value = i, this.dispatchEvent(new b({ value: i }));
+  }
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    const i = this._getEnabledItems();
+    if (!i.length) return;
+    const s = i.findIndex(
+      (t) => t.getAttribute("aria-checked") === "true"
+    );
+    let r = s;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault(), r = s < i.length - 1 ? s + 1 : 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault(), r = s > 0 ? s - 1 : i.length - 1;
+        break;
+      case " ":
+        if (e.preventDefault(), s < 0 && i[0]) {
+          const t = i[0].querySelector(
+            ".ea-segmented__original"
+          );
+          t && (this.value = t.value, this.dispatchEvent(
+            new b({ value: t.value })
+          ));
+        }
+        return;
+      default:
+        return;
+    }
+    if (r !== s && i[r]) {
+      const t = i[r].querySelector(
+        ".ea-segmented__original"
+      );
+      t && (this.value = t.value, this.dispatchEvent(
+        new b({ value: t.value })
+      ));
+    }
+  }
+  /**
+   * 更新选中指示器位置
+   * @param value 当前选中值
+   */
+  _updateIndicatorPosition(e = this.value) {
+    this._container && requestAnimationFrame(() => {
+      var i, s;
+      this._container && ((i = this.options) != null && i.includes(e) || (s = this.options) != null && s.some(
+        (r) => r[this.propsConfiguration.value] === e
+      )) && [
+        ...this._container.querySelectorAll(".ea-segmented__item")
+      ].forEach((t) => {
+        const a = t.querySelector(
+          ".ea-segmented__original"
+        ), l = (a == null ? void 0 : a.value) === e;
+        if (t.classList.toggle("is-checked", l), t.setAttribute("aria-checked", String(l)), (a == null ? void 0 : a.value) === e) {
+          const d = t.getBoundingClientRect();
+          this.style.setProperty(
+            "--ea-segmented-indicator-width",
+            `${d.width}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-height",
+            `${d.height}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-x",
+            `${t.offsetLeft}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-y",
+            `${t.offsetTop}px`
+          );
+        }
+      });
+    });
+  }
+  $mount() {
+    this.setAttribute("role", "radiogroup"), this.tabIndex = 0, this.updateContainerClasslist(), this.options && this.options.length > 0 && this._renderOptions(this.options), this._container && typeof ResizeObserver < "u" && (this._resizeObserver = new ResizeObserver(() => {
+      this._resizeTimer && clearTimeout(this._resizeTimer), this._resizeTimer = window.setTimeout(() => {
+        this._resizeTimer = void 0, this._updateIndicatorPosition(this.value);
+      }, 16);
+    }), this._resizeObserver.observe(this._container));
+  }
+  $beforeUnmount() {
+    var e;
+    this._resizeTimer && (clearTimeout(this._resizeTimer), this._resizeTimer = void 0), (e = this._resizeObserver) == null || e.disconnect(), this._resizeObserver = void 0;
+  }
+};
+o([
+  E(".ea-segmented")
+], n.prototype, "_container", 2);
+o([
+  g({
+    type: Array,
+    default: [],
+    observer(e) {
+      this.hasAttribute("name") || (this.setAttribute(
+        "name",
+        this.tagName + "-" + Math.random().toString(36).substring(2, 15)
+      ), console.warn(`[${this.tagName}] name attribute is required.`, this)), this._renderOptions(e);
+    }
+  })
+], n.prototype, "options", 2);
+o([
+  g({
+    type: Object,
+    default: { label: "label", value: "value", disabled: "disabled" }
+  })
+], n.prototype, "propsConfiguration", 2);
+o([
+  h({
+    type: String,
+    default: "",
+    observer(e) {
+      this._updateIndicatorPosition(e), this._updateActiveDescendant();
+    }
+  })
+], n.prototype, "value", 2);
+o([
+  h({
+    type: A(["large", "default", "small"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIndicatorPosition(this.value);
+    }
+  })
+], n.prototype, "size", 2);
+o([
+  h({
+    type: A(["horizontal", "vertical"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIndicatorPosition(this.value);
+    }
+  })
+], n.prototype, "direction", 2);
+o([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-disabled", map: (e) => String(e) },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "disabled", 2);
+o([
+  h({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "block", 2);
+o([
+  h({
+    type: String,
+    default: ""
+  })
+], n.prototype, "name", 2);
+o([
+  y("change", ".ea-segmented")
+], n.prototype, "_handleChange", 1);
+o([
+  y("keydown")
+], n.prototype, "_handleKeydown", 1);
+n = o([
+  z(v, { styles: [S] })
+], n);
+const L = n;
+export {
+  n as EaSegmented,
+  L as default
+};