reka-ui/dist/ScrollArea/ScrollAreaScrollbarVisible.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"ScrollAreaScrollbarVisible.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarVisible.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\nimport type { Direction, Sizes } from './types'\n\nexport interface ScrollAreaScrollbarVisibleContext {\n  sizes: Ref<Sizes>\n  hasThumb: Ref<boolean>\n  handleWheelScroll: (event: WheelEvent, payload: number) => void\n  handleThumbDown: (\n    event: MouseEvent,\n    payload: { x: number, y: number }\n  ) => void\n  handleThumbUp: (event: MouseEvent) => void\n  handleSizeChange: (payload: Sizes) => void\n  onThumbPositionChange: () => void\n  onDragScroll: (payload: number) => void\n  onThumbChange: (element: HTMLElement) => void\n}\n\nexport const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]\n  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'\nimport ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'\nimport {\n  getScrollPositionFromPointer,\n  getThumbOffsetFromScroll,\n  getThumbRatio,\n  isScrollingWithinScrollbarBounds,\n} from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\nconst { forwardRef } = useForwardExpose()\n\nconst sizes = ref<Sizes>({\n  content: 0,\n  viewport: 0,\n  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n})\n\nconst hasThumb = computed(() => {\n  const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content)\n  return Boolean(thumbRatio > 0 && thumbRatio < 1)\n})\n\nconst thumbRef = ref<HTMLElement>()\nconst pointerOffset = ref(0)\n\nfunction handleWheelScroll(event: WheelEvent, payload: number) {\n  if (isShowingScrollbarX.value) {\n    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY\n\n    rootContext.viewport.value!.scrollLeft = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n  else {\n    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY\n\n    rootContext.viewport.value!.scrollTop = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n}\n\nfunction handleThumbDown(event: MouseEvent, payload: { x: number, y: number }) {\n  if (isShowingScrollbarX.value)\n    pointerOffset.value = payload.x\n  else pointerOffset.value = payload.y\n}\nfunction handleThumbUp(event: MouseEvent) {\n  pointerOffset.value = 0\n}\n\nfunction handleSizeChange(payload: Sizes) {\n  sizes.value = payload\n}\n\nfunction getScrollPosition(pointerPos: number, dir?: Direction) {\n  return getScrollPositionFromPointer(\n    pointerPos,\n    pointerOffset.value,\n    sizes.value,\n    dir,\n  )\n}\n\nconst isShowingScrollbarX = computed(\n  () => scrollbarContext.isHorizontal.value,\n)\n\nfunction onDragScroll(payload: number) {\n  if (isShowingScrollbarX.value) {\n    rootContext.viewport.value!.scrollLeft = getScrollPosition(\n      payload,\n      rootContext.dir.value,\n    )\n  }\n  else {\n    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)\n  }\n}\n\nfunction onThumbPositionChange() {\n  if (isShowingScrollbarX.value) {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollLeft\n      const offset = getThumbOffsetFromScroll(\n        scrollPos,\n        sizes.value,\n        rootContext.dir.value,\n      )\n      thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n  else {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollTop\n      const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)\n      thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n  }\n}\nfunction onThumbChange(element: HTMLElement) {\n  thumbRef.value = element\n}\n\nprovideScrollAreaScrollbarVisibleContext({\n  sizes,\n  hasThumb,\n  handleWheelScroll,\n  handleThumbDown,\n  handleThumbUp,\n  handleSizeChange,\n  onThumbPositionChange,\n  onThumbChange,\n  onDragScroll,\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbarX\n    v-if=\"isShowingScrollbarX\"\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarX>\n  <ScrollAreaScrollbarY\n    v-else\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarY>\n</template>\n"],"names":["createContext","injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","computed","getThumbRatio","isScrollingWithinScrollbarBounds","getScrollPositionFromPointer","getThumbOffsetFromScroll"],"mappings":"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"}