easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-scrollbar.js

@@ -1,235 +1,252 @@
-var z = Object.defineProperty;
-var _ = (o) => {
-  throw TypeError(o);
+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;
 };
-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 {
+const f = "ea-scrollbar", s = L(f);
+let e = class extends y {
   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);
-        }
+    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
       }
-    }));
-    /**
-     * 滚动事件 - 修改滚动条样式 和 事件派发
-     */
-    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
-        );
+    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
+        }
       });
     });
-    /**
-     * 垂直滚动条拖动事件
-     * @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 }
+  }
+  /** 处理尺寸变化，更新滑块大小和轨道可见性 */
+  _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
       );
     });
-    /**
-     * 键盘事件
-     * @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"];
+  _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();
   }
-  $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;
+  _handleSlotChange() {
+    this._handleResize();
   }
-  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
-    });
+  _handleWindowResize() {
+    this.noresize || this._handleResize();
   }
-  /**
-   * @exports scrollTo
-   * @param {ScrollToOptions} options
-   */
-  scrollTo(s) {
-    t(this, e).scrollTo(s);
+  _handleWindowLoad() {
+    this._handleResize();
   }
-  $beforeUnmounted() {
-    var s;
-    (s = this.eventController) == null || s.abort();
+  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);
   }
-}
-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);
+  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 {
-  S as EaScrollbar
+  e as EaScrollbar
 };