@aplus-frontend/ui/es/src/scroll-bar/internal.vue.mjs

import { defineComponent as V, shallowRef as h, ref as W, toRef as f, watch as z, watchEffect as A, unref as o, createElementBlock as N, openBlock as U, normalizeStyle as X, normalizeClass as b, createElementVNode as E } from "vue";
import "../config-provider/index.mjs";
import { useTrack as Y } from "./hooks/use-track.mjs";
import I from "./style/index.mjs";
import { ensureRangeValue as L } from "./utils/index.mjs";
import { useNamespace as j } from "../config-provider/hooks/use-namespace.mjs";
const O = /* @__PURE__ */ V({
  __name: "internal",
  props: {
    direction: { default: "vertical" },
    scroll: { default: 0 },
    barLength: { default: 35 },
    width: {},
    barColor: {},
    trackColor: {},
    trackWidth: {},
    disabled: { type: Boolean, default: !1 },
    showTrack: { type: Boolean, default: !0 },
    trackSpeed: { default: 2 },
    onScrollStart: {},
    onScroll: {},
    onScrollEnd: {}
  },
  setup(C, { expose: D }) {
    const t = C, m = h(), i = h(), l = h(), { b: M, e: k, m: R, em: c, cssVar: B } = j("scroll-bar"), P = I("scroll-bar"), n = W(t.scroll), { handleMouseDown: v } = Y({
      currentScroll: n,
      track: i,
      bar: l,
      type: f(t, "direction"),
      trackSpeed: f(t, "trackSpeed"),
      barLength: f(t, "barLength"),
      disabled: f(t, "disabled"),
      onDown: (e) => {
        t.onScrollStart?.(e);
      },
      onUp: (e) => {
        t.onScrollEnd?.(e);
      },
      onScroll: (e) => {
        t.onScroll?.(e);
      }
    });
    z(
      () => t.scroll,
      (e) => {
        n.value = e;
      }
    ), A(() => {
      if (!o(l)) return;
      const e = `${(100 - t.barLength) * n.value / t.barLength}%`, r = `${t.barLength}%`;
      t.direction === "vertical" ? (l.value.style.height = r, l.value.style.transform = `translate3d(0, ${e}, 0)`) : (l.value.style.width = r, l.value.style.transform = `translate3d(${e}, 0, 0)`);
    });
    let p, s, d;
    function T(e) {
      if (t.disabled || e.button !== 0) return;
      e.preventDefault(), e.stopPropagation();
      const r = o(i), a = o(l);
      if (!r || !a)
        return;
      document.addEventListener("pointermove", g), document.addEventListener("pointerup", S);
      const u = r.getBoundingClientRect(), y = a.getBoundingClientRect();
      t.direction === "vertical" ? (p = u.height, s = y.top - u.top, d = e.clientY) : (p = u.width, s = y.left - u.left, d = e.clientX), t.onScrollStart?.(o(n));
    }
    function g(e) {
      e.stopPropagation(), e.preventDefault();
      let r;
      t.direction === "vertical" ? r = s + e.clientY - d : r = s + e.clientX - d;
      const a = r / p / (100 - t.barLength) * 1e4;
      n.value = L(a), t.onScroll?.(o(n));
    }
    function S(e) {
      e.preventDefault(), document.removeEventListener("pointermove", g), document.removeEventListener("pointerup", S), t.onScrollEnd?.(o(n));
    }
    function w(e) {
      e.cancelable && (e.stopPropagation(), e.preventDefault());
    }
    function $(e) {
      Math.abs(o(n) - e) <= 1e-3 || (n.value = L(e));
    }
    return D({
      currentScroll: n,
      container: m,
      bar: l,
      track: i,
      scroll: $
    }), (e, r) => (U(), N("div", {
      ref_key: "container",
      ref: m,
      class: b([o(M)(), o(R)(e.direction), o(P)]),
      style: X(
        o(B)(
          {
            "bar-color": e.barColor,
            "track-color": e.trackColor,
            "bar-width": e.width ? `${e.width}px` : void 0,
            "track-width": e.trackWidth ? `${e.trackWidth}px` : void 0
          },
          !1
        )
      )
    }, [
      E("div", {
        ref_key: "track",
        ref: i,
        class: b([
          o(k)("track"),
          e.disabled ? o(c)("track", "disabled") : null,
          e.showTrack ? null : o(c)("track", "hidden")
        ]),
        onPointerdown: r[0] || (r[0] = //@ts-ignore
        (...a) => o(v) && o(v)(...a)),
        onTouchstart: w
      }, null, 34),
      E("div", {
        ref_key: "bar",
        ref: l,
        class: b([
          o(k)("bar"),
          o(c)("bar", e.direction),
          e.disabled ? o(c)("bar", "disabled") : null
        ]),
        onPointerdown: T,
        onTouchstart: w
      }, null, 34)
    ], 6));
  }
});
export {
  O as default
};