UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

github.com/unovue/reka-ui

unovue/reka-ui

1 lines • 8.08 kB
1
{"version":3,"file":"ScrollAreaScrollbarImpl.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n onDragScroll: [payload: { x: number, y: number }]\n onWheelScroll: [payload: { x: number, y: number }]\n onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { toInt } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n if (rectRef.value) {\n const x = event.clientX - rectRef.value?.left\n const y = event.clientY - rectRef.value?.top\n emit('onDragScroll', { x, y })\n }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n const mainPointer = 0\n if (event.button === mainPointer) {\n const element = event.target as HTMLElement\n element.setPointerCapture(event.pointerId)\n rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n // pointer capture doesn't prevent text selection in Safari\n // so we remove text selection manually when scrolling\n prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n document.body.style.webkitUserSelect = 'none'\n if (rootContext.viewport)\n rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n handleDragScroll(event)\n }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n const element = event.target as HTMLElement\n if (element.hasPointerCapture(event.pointerId))\n element.releasePointerCapture(event.pointerId)\n\n document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n if (rootContext.viewport)\n rootContext.viewport.value!.style.scrollBehavior = ''\n\n rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n const element = event.target as HTMLElement\n const isScrollbarWheel = scrollbar.value?.contains(element)\n const maxScrollPos\n = scrollbarVisibleContext.sizes.value.content\n - scrollbarVisibleContext.sizes.value.viewport\n if (isScrollbarWheel)\n scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n if (!scrollbar.value)\n return\n if (props.isHorizontal) {\n scrollbarVisibleContext.handleSizeChange({\n content: rootContext.viewport.value?.scrollWidth ?? 0,\n viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n scrollbar: {\n size: scrollbar.value.clientWidth ?? 0,\n paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n },\n })\n }\n else {\n scrollbarVisibleContext.handleSizeChange({\n content: rootContext.viewport.value?.scrollHeight ?? 0,\n viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n scrollbar: {\n size: scrollbar.value?.clientHeight ?? 0,\n paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n },\n })\n }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n <Primitive\n :ref=\"forwardRef\"\n style=\"position: absolute\"\n data-scrollbarimpl\n :as=\"scrollbarContext.as.value\"\n :as-child=\"scrollbarContext.asChild.value\"\n @pointerdown=\"handlePointerDown\"\n @pointermove=\"handlePointerMove\"\n @pointerup=\"handlePointerUp\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","onMounted","onUnmounted","toInt","useResizeObserver"],"mappings":"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"}