reka-ui/dist/ScrollArea/ScrollAreaScrollbarImpl.cjs

Vue port for Radix UI Primitives.

'use strict';

const vue = require('vue');
const core = require('@vueuse/core');
const ScrollArea_utils = require('./utils.cjs');
const ScrollArea_ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.cjs');
const ScrollArea_ScrollAreaScrollbar = require('./ScrollAreaScrollbar.cjs');
const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
const Primitive_Primitive = require('../Primitive/Primitive.cjs');
const ScrollArea_ScrollAreaRoot = require('./ScrollAreaRoot.cjs');

const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "ScrollAreaScrollbarImpl",
  props: {
    isHorizontal: { type: Boolean }
  },
  emits: ["onDragScroll", "onWheelScroll", "onThumbPointerDown"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const rootContext = ScrollArea_ScrollAreaRoot.injectScrollAreaRootContext();
    const scrollbarVisibleContext = ScrollArea_ScrollAreaScrollbarVisible.injectScrollAreaScrollbarVisibleContext();
    const scrollbarContext = ScrollArea_ScrollAreaScrollbar.injectScrollAreaScrollbarContext();
    const { forwardRef, currentElement: scrollbar } = shared_useForwardExpose.useForwardExpose();
    const prevWebkitUserSelectRef = vue.ref("");
    const rectRef = vue.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);
    }
    vue.onMounted(() => {
      document.addEventListener("wheel", handleWheel, { passive: false });
    });
    vue.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: ScrollArea_utils.toInt(getComputedStyle(scrollbar.value).paddingLeft),
            paddingEnd: ScrollArea_utils.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: ScrollArea_utils.toInt(getComputedStyle(scrollbar.value).paddingLeft),
            paddingEnd: ScrollArea_utils.toInt(getComputedStyle(scrollbar.value).paddingRight)
          }
        });
      }
    }
    core.useResizeObserver(scrollbar, handleSizeChange);
    core.useResizeObserver(rootContext.content, handleSizeChange);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), {
        ref: vue.unref(forwardRef),
        style: { "position": "absolute" },
        "data-scrollbarimpl": "",
        as: vue.unref(scrollbarContext).as.value,
        "as-child": vue.unref(scrollbarContext).asChild.value,
        onPointerdown: handlePointerDown,
        onPointermove: handlePointerMove,
        onPointerup: handlePointerUp
      }, {
        default: vue.withCtx(() => [
          vue.renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["as", "as-child"]);
    };
  }
});

exports._sfc_main = _sfc_main;
//# sourceMappingURL=ScrollAreaScrollbarImpl.cjs.map