x-next 1.0.0 → 1.1.0

package/dist/es/components/resize-box/ResizeBox.vue2.js

@@ -0,0 +1,257 @@
+import { defineComponent as ot, toRefs as rt, reactive as M, ref as ut, computed as l, watch as K, onBeforeUnmount as st } from "vue";
+import dt from "../../_container/resize-trigger.vue.js";
+import V from "../../_hooks/use-merge-state.js";
+import { isNumber as s } from "../../_utils/is.js";
+import { off as D, on as E } from "../../_utils/dom.js";
+import { getClassNameMixin as at } from "../../_utils/config.js";
+const _ = "left", z = "right", k = "top", S = "bottom", ct = [
+  _,
+  z,
+  k,
+  S
+];
+function R(o, h) {
+  if (o === 0) return 0;
+  const u = o - h;
+  return u <= 0 ? 0 : u;
+}
+function O(o) {
+  return [k, S].indexOf(o) > -1;
+}
+const vt = ot({
+  name: "ResizeBox",
+  components: {
+    ResizeTrigger: dt
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 宽度
+     * @en Width
+     * @vModel
+     */
+    width: {
+      type: Number
+    },
+    /**
+     * @zh 高度
+     * @en Height
+     * @vModel
+     */
+    height: {
+      type: Number
+    },
+    /**
+     * @zh 最小宽度
+     * @en Minimum width
+     */
+    minWidth: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 最大宽度
+     * @en Maximum width
+     */
+    maxWidth: {
+      type: Number
+    },
+    /**
+     * @zh 最小高度
+     * @en Minimum height
+     */
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 最大高度
+     * @en Maximum height
+     */
+    maxHeight: {
+      type: Number
+    },
+    /**
+     * @zh 伸缩框的 html 标签
+     * @en The html tag of the telescopic box
+     */
+    component: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * @zh 可以进行伸缩的边，有上、下、左、右可以使用
+     * @en Can be stretched side, there are up, down, left and right can be used
+     * */
+    directions: {
+      type: Array,
+      default: () => ["right"]
+    }
+  },
+  emits: {
+    "update:width": (o) => !0,
+    "update:height": (o) => !0,
+    /**
+     * @zh 拖拽开始时触发
+     * @en Triggered when dragging starts
+     * @param {MouseEvent} ev
+     */
+    movingStart: (o) => !0,
+    /**
+     * @zh 拖拽时触发
+     * @en Triggered when dragging
+     * @param {{ width: number; height: number; }} size
+     * @param {MouseEvent} ev
+     */
+    moving: (o, h) => !0,
+    /**
+     * @zh 拖拽结束时触发
+     * @en Triggered when the drag ends
+     * @param {MouseEvent} ev
+     */
+    movingEnd: (o) => !0
+  },
+  /**
+   * @zh 伸缩杆的内容
+   * @en The contents of the resize pole
+   * @slot resize-trigger
+   * @binding {'left' | 'right' | 'top' | 'bottom'} direction
+   */
+  /**
+   * @zh 伸缩杆的图标
+   * @en Resize pole icon
+   * @slot resize-trigger-icon
+   * @binding {'left' | 'right' | 'top' | 'bottom'} direction
+   */
+  setup(o, { attrs: h, emit: u }) {
+    const { height: G, width: j, directions: q } = rt(o), [f, C] = V(
+      null,
+      M({
+        value: j
+      })
+    ), [p, P] = V(
+      null,
+      M({
+        value: G
+      })
+    ), v = ut(), Y = M({}), X = at("resize-box"), J = l(() => {
+      const { class: t, style: e, ...i } = h;
+      return i;
+    }), Q = l(() => [X.block, h.class]), y = l(
+      () => s(f.value) ? W(f.value) : f.value
+    ), w = l(
+      () => s(p.value) ? x(p.value) : p.value
+    ), L = l(() => ({
+      ...s(y.value) ? { width: `${y.value}px` } : {},
+      ...s(w.value) ? { height: `${w.value}px` } : {},
+      ...Y
+    })), Z = l(() => [h.style, L.value]), tt = l(
+      () => q.value.filter((t) => ct.includes(t))
+    ), r = {
+      direction: "",
+      startPageX: 0,
+      startPageY: 0,
+      startWidth: 0,
+      startHeight: 0,
+      moving: !1,
+      padding: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }
+    };
+    let H, I;
+    function W(t) {
+      return Math.min(o.maxWidth ?? Number.POSITIVE_INFINITY, Math.max(o.minWidth, t));
+    }
+    function x(t) {
+      return Math.min(
+        o.maxHeight ?? Number.POSITIVE_INFINITY,
+        Math.max(o.minHeight, t)
+      );
+    }
+    function b() {
+      var i;
+      const { left: t, right: e } = r.padding;
+      return s(y.value) ? y.value : R(((i = v.value) == null ? void 0 : i.clientWidth) || 0, t + e);
+    }
+    function N() {
+      var i;
+      const { top: t, bottom: e } = r.padding;
+      return s(w.value) ? w.value : R(((i = v.value) == null ? void 0 : i.clientHeight) || 0, t + e);
+    }
+    function m(t, e) {
+      const i = W(t);
+      C(i), u("update:width", i), u("moving", { width: i, height: N() }, e);
+    }
+    K(y, (t) => {
+      s(f.value) && s(t) && t !== f.value && (C(t), u("update:width", t));
+    }, { immediate: !0 }), K(w, (t) => {
+      s(p.value) && s(t) && t !== p.value && (P(t), u("update:height", t));
+    }, { immediate: !0 });
+    function g(t, e) {
+      const i = x(t);
+      P(i), u("update:height", i), u("moving", { width: b(), height: i }, e);
+    }
+    function U() {
+      D(window, "mousemove", $), D(window, "mouseup", T), D(window, "contextmenu", T), H !== void 0 && typeof document < "u" && document.body && (document.body.style.cursor = H, H = void 0), I !== void 0 && typeof document < "u" && document.body && (document.body.style.userSelect = I, I = void 0);
+    }
+    function $(t) {
+      if (!r.moving) return;
+      const { startPageX: e, startPageY: i, startWidth: n, startHeight: d, direction: A } = r;
+      let a = n, c = d;
+      const B = t.pageX - e, F = t.pageY - i;
+      switch (A) {
+        case _:
+          a = W(n - B), m(a, t);
+          break;
+        case z:
+          a = W(n + B), m(a, t);
+          break;
+        case k:
+          c = x(d - F), g(c, t);
+          break;
+        case S:
+          c = x(d + F), g(c, t);
+          break;
+      }
+    }
+    function T(t) {
+      r.moving && (r.moving = !1, U(), u("movingEnd", t));
+    }
+    function et(t, e) {
+      var a, c;
+      e.preventDefault(), u("movingStart", e), r.moving = !0, H = typeof document < "u" ? document.body.style.cursor : "", I = typeof document < "u" ? document.body.style.userSelect : "", r.startPageX = e.pageX, r.startPageY = e.pageY, r.direction = t;
+      const { top: i, left: n, right: d, bottom: A } = r.padding;
+      r.startWidth = R(((a = v.value) == null ? void 0 : a.clientWidth) || 0, n + d), r.startHeight = R(((c = v.value) == null ? void 0 : c.clientHeight) || 0, i + A), E(window, "mousemove", $), E(window, "mouseup", T), E(window, "contextmenu", T), document.body.style.cursor = O(t) ? "row-resize" : "col-resize", document.body.style.userSelect = "none";
+    }
+    function it(t, e) {
+      const i = e.shiftKey ? 1 : 10;
+      let n = !1;
+      t === _ ? e.key === "ArrowLeft" ? (m(b() + i, e), n = !0) : e.key === "ArrowRight" && (m(b() - i, e), n = !0) : t === z ? e.key === "ArrowRight" ? (m(b() + i, e), n = !0) : e.key === "ArrowLeft" && (m(b() - i, e), n = !0) : t === k ? e.key === "ArrowUp" ? (g(N() + i, e), n = !0) : e.key === "ArrowDown" && (g(N() - i, e), n = !0) : t === S && (e.key === "ArrowDown" ? (g(N() + i, e), n = !0) : e.key === "ArrowUp" && (g(N() - i, e), n = !0)), n && e.preventDefault();
+    }
+    function nt(t, e) {
+      const { width: i, height: n } = e.contentRect, d = O(t) ? n : i;
+      r.padding[t] = d, Y[`padding-${t}`] = `${d}px`;
+    }
+    return st(() => {
+      U();
+    }), {
+      className: X,
+      classNames: Q,
+      wrapperAttrs: J,
+      styles: L,
+      mergedStyles: Z,
+      wrapperRef: v,
+      onMoveStart: et,
+      onTriggerKeydown: it,
+      isHorizontal: O,
+      allowDirections: tt,
+      onTiggerResize: nt
+    };
+  }
+});
+export {
+  vt as default
+};

package/dist/es/components/resize-box/index.js

@@ -0,0 +1,8 @@
+import e from "./ResizeBox.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as t } from "../../_utils/config.js";
+const n = o(t("ResizeBox"), e);
+export {
+  n as ResizeBox,
+  n as default
+};

package/dist/es/components/scrollbar-v2/Scrollbar.vue.js

@@ -0,0 +1,50 @@
+import h from "./Scrollbar.vue2.js";
+import { resolveComponent as t, openBlock as r, createElementBlock as f, normalizeStyle as c, normalizeClass as u, createVNode as i, withCtx as s, createElementVNode as z, mergeProps as S, renderSlot as p, createBlock as d, createCommentVNode as m } from "vue";
+import R from "../../_virtual/_plugin-vue_export-helper.js";
+function b(e, o, v, y, C, k) {
+  const n = t("ResizeObserver"), a = t("thumb");
+  return r(), f("div", {
+    ref: "rootRef",
+    class: u(e.cls),
+    style: c(e.style)
+  }, [
+    i(n, { onResize: e.handleResize }, {
+      default: s(() => [
+        z("div", S({
+          ref: "containerRef",
+          class: e.className.element("container")
+        }, e.getContainerAttrs(), {
+          style: e.getContainerStyle(),
+          onScroll: o[0] || (o[0] = (...l) => e.handleScroll && e.handleScroll(...l)),
+          onWheel: o[1] || (o[1] = (...l) => e.handleWheel && e.handleWheel(...l))
+        }), [
+          i(n, { onResize: e.handleResize }, {
+            default: s(() => [
+              p(e.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["onResize"])
+        ], 16)
+      ]),
+      _: 3
+    }, 8, ["onResize"]),
+    !e.hide && e.hasHorizontalScrollbar ? (r(), d(a, {
+      key: 0,
+      ref: "horizontalThumbRef",
+      data: e.horizontalData,
+      direction: "horizontal",
+      onScroll: e.handleHorizontalScroll
+    }, null, 8, ["data", "onScroll"])) : m("", !0),
+    !e.hide && e.hasVerticalScrollbar ? (r(), d(a, {
+      key: 1,
+      ref: "verticalThumbRef",
+      data: e.verticalData,
+      direction: "vertical",
+      onScroll: e.handleVerticalScroll
+    }, null, 8, ["data", "onScroll"])) : m("", !0)
+  ], 6);
+}
+const g = /* @__PURE__ */ R(h, [["render", b]]);
+export {
+  g as default
+};

package/dist/es/components/scrollbar-v2/Scrollbar.vue2.js

@@ -0,0 +1,268 @@
+import { defineComponent as ne, ref as f, computed as y, onMounted as se } from "vue";
+import ce from "../../_container/resize-observer-v2.js";
+import fe from "./thumb.vue.js";
+import { isObject as ue } from "../../_utils/is.js";
+import { getClassNameMixin as he } from "../../_utils/config.js";
+const k = 20, z = 15, p = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "boxSizing",
+  "flex",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+  "alignSelf",
+  "justifySelf"
+]), j = (e) => e.replace(/-([a-z])/g, (a, r) => r.toUpperCase()), w = /* @__PURE__ */ new Set(["height", "minHeight", "maxHeight"]), I = (e, a) => e ? Array.isArray(e) ? e.reduce(
+  (r, i) => ({
+    ...r,
+    ...I(i, a)
+  }),
+  {}
+) : typeof e == "string" ? e.split(";").reduce((r, i) => {
+  const [n, ...l] = i.split(":"), u = l.join(":").trim();
+  if (!n || !u) return r;
+  const c = j(n.trim());
+  return p.has(c) && !(a != null && a.ignoreVerticalLayout && w.has(c)) && (r[c] = u), r;
+}, {}) : Object.entries(e).reduce(
+  (r, [i, n]) => {
+    const l = j(i);
+    return p.has(l) && !(a != null && a.ignoreVerticalLayout && w.has(l)) && (r[l] = n), r;
+  },
+  {}
+) : {}, D = (e, a) => e <= 0 || a <= 0 ? 1 : e / a, ge = ne({
+  name: "Scrollbar",
+  components: {
+    ResizeObserver: ce,
+    Thumb: fe
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 类型
+     * @en Type
+     */
+    type: {
+      type: String,
+      default: "embed"
+    },
+    /**
+     * @zh 外层的类名
+     * @en Outer class
+     */
+    outerClass: [String, Object, Array],
+    /**
+     * @zh 外层的样式
+     * @en Outer style
+     */
+    outerStyle: {
+      type: [String, Object, Array]
+    },
+    // private
+    hide: {
+      type: Boolean,
+      default: !1
+    },
+    disableHorizontal: {
+      type: Boolean,
+      default: !1
+    },
+    disableVertical: {
+      type: Boolean,
+      default: !1
+    },
+    horizontalWheel: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    /**
+     * @zh 滚动时触发
+     * @en Triggered when scroll
+     */
+    scroll: (e) => !0
+  },
+  setup(e, { emit: a, attrs: r }) {
+    const i = he("scrollbar"), n = f(), l = f(), u = f(), c = f(), T = f(), H = f(), _ = f(!1), W = f(!1), b = y(
+      () => _.value && !e.disableHorizontal
+    ), S = y(
+      () => W.value && !e.disableVertical
+    ), g = f(!1), N = () => {
+      const { style: t, ...o } = r;
+      return o;
+    }, U = () => {
+      const t = {};
+      return e.disableHorizontal && (t.overflowX = "hidden"), e.disableVertical && (t.overflowY = "hidden"), [r.style, t];
+    }, C = () => {
+      var t, o, s, d, v, h;
+      if (l.value) {
+        const {
+          clientWidth: m,
+          clientHeight: O,
+          offsetWidth: Q,
+          offsetHeight: ee,
+          scrollWidth: x,
+          scrollHeight: M,
+          scrollTop: te,
+          scrollLeft: le
+        } = l.value, V = ((t = n.value) == null ? void 0 : t.clientWidth) ?? Q, A = ((o = n.value) == null ? void 0 : o.clientHeight) ?? ee;
+        _.value = x > m, W.value = M > O, g.value = b.value && S.value;
+        const L = g.value ? V - z : V, R = g.value ? A - z : A, E = Math.round(
+          L / Math.min(x / m, L / k)
+        ), $ = Math.max(L - E, 0), ae = D(x - m, $), B = Math.round(
+          R / Math.min(M / O, R / k)
+        ), Y = Math.max(R - B, 0), oe = D(M - O, Y);
+        u.value = {
+          ratio: ae,
+          thumbSize: E,
+          max: $
+        }, c.value = {
+          ratio: oe,
+          thumbSize: B,
+          max: Y
+        };
+        const re = Math.round(te / (((s = c.value) == null ? void 0 : s.ratio) ?? 1));
+        (d = H.value) == null || d.setOffset(re);
+        const ie = Math.round(le / (((v = u.value) == null ? void 0 : v.ratio) ?? 1));
+        (h = T.value) == null || h.setOffset(ie);
+      }
+    };
+    se(() => {
+      C();
+    });
+    const K = () => {
+      C();
+    }, G = (t) => {
+      var o, s, d, v;
+      if (l.value) {
+        if (b.value && !e.disableHorizontal) {
+          const h = Math.round(
+            l.value.scrollLeft / (((o = u.value) == null ? void 0 : o.ratio) ?? 1)
+          );
+          (s = T.value) == null || s.setOffset(h);
+        }
+        if (S.value && !e.disableVertical) {
+          const h = Math.round(
+            l.value.scrollTop / (((d = c.value) == null ? void 0 : d.ratio) ?? 1)
+          );
+          (v = H.value) == null || v.setOffset(h);
+        }
+      }
+      a("scroll", t);
+    }, X = (t) => {
+      var s;
+      const o = t.deltaX || t.deltaY;
+      return t.deltaMode === WheelEvent.DOM_DELTA_LINE ? o * 16 : t.deltaMode === WheelEvent.DOM_DELTA_PAGE ? o * (((s = l.value) == null ? void 0 : s.clientWidth) ?? 1) : o;
+    }, Z = (t) => {
+      if (!e.horizontalWheel || !l.value || !b.value || S.value || e.disableHorizontal)
+        return;
+      const o = X(t);
+      if (o === 0) return;
+      const { scrollLeft: s, scrollWidth: d, clientWidth: v } = l.value, h = d - v, m = Math.min(Math.max(s + o, 0), h);
+      m !== s && (l.value.scrollLeft = m, t.preventDefault());
+    }, P = (t) => {
+      var o;
+      l.value && l.value.scrollTo({
+        left: t * (((o = u.value) == null ? void 0 : o.ratio) ?? 1)
+      });
+    }, q = (t) => {
+      var o;
+      l.value && l.value.scrollTo({
+        top: t * (((o = c.value) == null ? void 0 : o.ratio) ?? 1)
+      });
+    }, F = y(() => {
+      const t = {};
+      return e.type === "track" && (b.value && (t.paddingBottom = `${z}px`), S.value && (t.paddingRight = `${z}px`)), [
+        t,
+        I(r.style, {
+          ignoreVerticalLayout: !!(e.outerClass || e.outerStyle)
+        }),
+        e.outerStyle
+      ];
+    }), J = y(() => [
+      i.block,
+      i.modifier(`type-${e.type}`),
+      {
+        [i.modifier("both")]: g.value
+      },
+      r.class,
+      e.outerClass
+    ]);
+    return {
+      className: i,
+      cls: J,
+      style: F,
+      rootRef: n,
+      getContainerAttrs: N,
+      getContainerStyle: U,
+      containerRef: l,
+      horizontalThumbRef: T,
+      verticalThumbRef: H,
+      horizontalData: u,
+      verticalData: c,
+      isBoth: g,
+      hasHorizontalScrollbar: b,
+      hasVerticalScrollbar: S,
+      handleResize: K,
+      handleScroll: G,
+      handleWheel: Z,
+      handleHorizontalScroll: P,
+      handleVerticalScroll: q
+    };
+  },
+  methods: {
+    /**
+     * @zh 滚动
+     * @en scrollTo
+     * @public
+     * @param {number | {left?: number;top?: number}} options
+     * @param {number} y
+     */
+    scrollTo(e, a) {
+      var n, l;
+      const r = this.$props.disableHorizontal, i = this.$props.disableVertical;
+      ue(e) ? (n = this.$refs.containerRef) == null || n.scrollTo({
+        ...e,
+        left: r ? 0 : e.left,
+        top: i ? 0 : e.top
+      }) : (e !== void 0 || a !== void 0) && ((l = this.$refs.containerRef) == null || l.scrollTo(
+        r ? 0 : e ?? 0,
+        i ? 0 : a ?? 0
+      ));
+    },
+    /**
+     * @zh 纵向滚动
+     * @en scroll vertically
+     * @public
+     * @param {number} top
+     * @version 2.40.0
+     */
+    scrollTop(e) {
+      var a;
+      this.$props.disableVertical && (e = 0), (a = this.$refs.containerRef) == null || a.scrollTo({
+        top: e
+      });
+    },
+    /**
+     * @zh 横向滚动
+     * @en scroll horizontal
+     * @public
+     * @param {number} left
+     * @version 2.40.0
+     */
+    scrollLeft(e) {
+      var a;
+      this.$props.disableHorizontal && (e = 0), (a = this.$refs.containerRef) == null || a.scrollTo({
+        left: e
+      });
+    }
+  }
+});
+export {
+  ge as default
+};

package/dist/es/components/scrollbar-v2/index.js

@@ -0,0 +1,8 @@
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as r } from "../../_utils/config.js";
+import t from "./Scrollbar.vue.js";
+const a = o(r("Scrollbar"), t);
+export {
+  a as Scrollbar,
+  a as default
+};

package/dist/es/components/scrollbar-v2/thumb.vue.js

@@ -0,0 +1,30 @@
+import s from "./thumb.vue2.js";
+import { openBlock as a, createBlock as t, Transition as i, withCtx as d, createElementVNode as l, withModifiers as m, normalizeClass as n, normalizeStyle as u } from "vue";
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+function c(e, o, p, b, h, k) {
+  return a(), t(i, null, {
+    default: d(() => [
+      l("div", {
+        ref: "trackRef",
+        class: n(["x-scrollbar-track", `x-scrollbar-track-direction-${e.direction}`]),
+        onMousedown: o[1] || (o[1] = m((...r) => e.handleTrackClick && e.handleTrackClick(...r), ["self"]))
+      }, [
+        l("div", {
+          ref: "thumbRef",
+          class: n(e.thumbCls),
+          style: u(e.thumbStyle),
+          onMousedown: o[0] || (o[0] = (...r) => e.handleThumbMouseDown && e.handleThumbMouseDown(...r))
+        }, [
+          l("div", {
+            class: n(e.className.element("bar"))
+          }, null, 2)
+        ], 38)
+      ], 34)
+    ]),
+    _: 1
+  });
+}
+const M = /* @__PURE__ */ f(s, [["render", c]]);
+export {
+  M as default
+};

package/dist/es/components/scrollbar-v2/thumb.vue2.js

@@ -0,0 +1,77 @@
+import { defineComponent as k, ref as u, computed as f, onBeforeUnmount as B } from "vue";
+import { on as h, off as g } from "../../_utils/dom.js";
+import { getClassNameMixin as D } from "../../_utils/config.js";
+const $ = k({
+  name: "Thumb",
+  props: {
+    data: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: ["scroll"],
+  setup(n, { emit: w }) {
+    const l = D("scrollbar--thumb"), s = u(), o = u(), i = f(() => n.direction === "horizontal" ? {
+      size: "width",
+      direction: "left",
+      client: "clientX"
+    } : {
+      size: "height",
+      direction: "top",
+      client: "clientY"
+    }), t = u(0), c = u(!1), b = u(0), C = f(() => {
+      var e;
+      return {
+        [i.value.size]: `${((e = n.data) == null ? void 0 : e.thumbSize) ?? 0}px`,
+        [i.value.direction]: `${t.value}px`
+      };
+    }), p = (e) => {
+      e.preventDefault(), o.value && (d(), b.value = e[i.value.client] - o.value.getBoundingClientRect()[i.value.direction], c.value = !0, h(window, "mousemove", x), h(window, "mouseup", r), h(window, "contextmenu", r));
+    }, d = () => {
+      g(window, "mousemove", x), g(window, "mouseup", r), g(window, "contextmenu", r);
+    }, M = (e) => {
+      var a, z;
+      if (e.preventDefault(), o.value) {
+        const v = m(
+          e[i.value.client] > o.value.getBoundingClientRect()[i.value.direction] ? t.value + (((a = n.data) == null ? void 0 : a.thumbSize) ?? 0) : t.value - (((z = n.data) == null ? void 0 : z.thumbSize) ?? 0)
+        );
+        v !== t.value && (t.value = v, w("scroll", v));
+      }
+    }, m = (e) => e < 0 ? 0 : n.data && e > n.data.max ? n.data.max : e, x = (e) => {
+      if (s.value && o.value) {
+        const a = m(
+          e[i.value.client] - s.value.getBoundingClientRect()[i.value.direction] - b.value
+        );
+        a !== t.value && (t.value = a, w("scroll", a));
+      }
+    }, r = () => {
+      c.value = !1, d();
+    }, R = (e) => {
+      c.value || (e = m(e), e !== t.value && (t.value = e));
+    }, S = f(() => [
+      l.block,
+      l.modifier(`direction-${n.direction}`),
+      {
+        [l.modifier("dragging")]: c.value
+      }
+    ]);
+    return B(() => {
+      d();
+    }), {
+      trackRef: s,
+      thumbRef: o,
+      className: l,
+      thumbCls: S,
+      thumbStyle: C,
+      handleThumbMouseDown: p,
+      handleTrackClick: M,
+      setOffset: R
+    };
+  }
+});
+export {
+  $ as default
+};