reka-ui/dist/ScrollArea/ScrollAreaScrollbarImpl.js

Vue port for Radix UI Primitives.

import { defineComponent, ref, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, renderSlot } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { t as toInt } from './utils.js';
import { i as injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.js';
import { i as injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.js';
import { u as useForwardExpose } from '../shared/useForwardExpose.js';
import { P as Primitive } from '../Primitive/Primitive.js';
import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ScrollAreaScrollbarImpl",
  props: {
    isHorizontal: { type: Boolean }
  },
  emits: ["onDragScroll", "onWheelScroll", "onThumbPointerDown"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const rootContext = injectScrollAreaRootContext();
    const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
    const scrollbarContext = injectScrollAreaScrollbarContext();
    const { forwardRef, currentElement: scrollbar } = useForwardExpose();
    const prevWebkitUserSelectRef = ref("");
    const rectRef = ref();
    function handleDragScroll(event) {
      if (rectRef.value) {
        const x = event.clientX - rectRef.value?.left;
        const y = event.clientY - rectRef.value?.top;
        emit("onDragScroll", { x, y });
      }
    }
    function handlePointerDown(event) {
      const mainPointer = 0;
      if (event.button === mainPointer) {
        const element = event.target;
        element.setPointerCapture(event.pointerId);
        rectRef.value = scrollbar.value.getBoundingClientRect();
        prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect;
        document.body.style.webkitUserSelect = "none";
        if (rootContext.viewport)
          rootContext.viewport.value.style.scrollBehavior = "auto";
        handleDragScroll(event);
      }
    }
    function handlePointerMove(event) {
      handleDragScroll(event);
    }
    function handlePointerUp(event) {
      const element = event.target;
      if (element.hasPointerCapture(event.pointerId))
        element.releasePointerCapture(event.pointerId);
      document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
      if (rootContext.viewport)
        rootContext.viewport.value.style.scrollBehavior = "";
      rectRef.value = void 0;
    }
    function handleWheel(event) {
      const element = event.target;
      const isScrollbarWheel = scrollbar.value?.contains(element);
      const maxScrollPos = scrollbarVisibleContext.sizes.value.content - scrollbarVisibleContext.sizes.value.viewport;
      if (isScrollbarWheel)
        scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos);
    }
    onMounted(() => {
      document.addEventListener("wheel", handleWheel, { passive: false });
    });
    onUnmounted(() => {
      document.removeEventListener("wheel", handleWheel);
    });
    function handleSizeChange() {
      if (!scrollbar.value)
        return;
      if (props.isHorizontal) {
        scrollbarVisibleContext.handleSizeChange({
          content: rootContext.viewport.value?.scrollWidth ?? 0,
          viewport: rootContext.viewport.value?.offsetWidth ?? 0,
          scrollbar: {
            size: scrollbar.value.clientWidth ?? 0,
            paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
            paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight)
          }
        });
      } else {
        scrollbarVisibleContext.handleSizeChange({
          content: rootContext.viewport.value?.scrollHeight ?? 0,
          viewport: rootContext.viewport.value?.offsetHeight ?? 0,
          scrollbar: {
            size: scrollbar.value?.clientHeight ?? 0,
            paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
            paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight)
          }
        });
      }
    }
    useResizeObserver(scrollbar, handleSizeChange);
    useResizeObserver(rootContext.content, handleSizeChange);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Primitive), {
        ref: unref(forwardRef),
        style: { "position": "absolute" },
        "data-scrollbarimpl": "",
        as: unref(scrollbarContext).as.value,
        "as-child": unref(scrollbarContext).asChild.value,
        onPointerdown: handlePointerDown,
        onPointermove: handlePointerMove,
        onPointerup: handlePointerUp
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["as", "as-child"]);
    };
  }
});

export { _sfc_main as _ };
//# sourceMappingURL=ScrollAreaScrollbarImpl.js.map