reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.26 kB
Source Map (JSON)
{"version":3,"file":"ScrollAreaScrollbarScroll.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarScroll.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ScrollAreaScrollbarScrollProps {\n forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from 'vue'\nimport { useDebounceFn } from '@vueuse/core'\nimport { useStateMachine } from '../shared/useStateMachine'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\nimport { Presence } from '@/Presence'\nimport { useForwardExpose } from '@/shared'\n\ndefineProps<ScrollAreaScrollbarScrollProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef } = useForwardExpose()\n\nconst { state, dispatch } = useStateMachine('hidden', {\n hidden: {\n SCROLL: 'scrolling',\n },\n scrolling: {\n SCROLL_END: 'idle',\n POINTER_ENTER: 'interacting',\n },\n interacting: {\n SCROLL: 'interacting',\n POINTER_LEAVE: 'idle',\n },\n idle: {\n HIDE: 'hidden',\n SCROLL: 'scrolling',\n POINTER_ENTER: 'interacting',\n },\n})\n\nwatchEffect((onCleanup) => {\n if (state.value === 'idle') {\n const timeId = window.setTimeout(\n () => dispatch('HIDE'),\n rootContext.scrollHideDelay.value,\n )\n\n onCleanup(() => {\n window.clearTimeout(timeId)\n })\n }\n})\n\nconst debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)\n\nwatchEffect((onCleanup) => {\n const viewport = rootContext.viewport.value\n const scrollDirection = scrollbarContext.isHorizontal.value\n ? 'scrollLeft'\n : 'scrollTop'\n\n if (viewport) {\n let prevScrollPos = viewport[scrollDirection]\n const handleScroll = () => {\n const scrollPos = viewport[scrollDirection]\n const hasScrollInDirectionChanged = prevScrollPos !== scrollPos\n if (hasScrollInDirectionChanged) {\n dispatch('SCROLL')\n debounceScrollEnd()\n }\n prevScrollPos = scrollPos\n }\n viewport.addEventListener('scroll', handleScroll)\n\n onCleanup(() => {\n viewport.removeEventListener('scroll', handleScroll)\n })\n }\n})\n</script>\n\n<template>\n <Presence :present=\"forceMount || state !== 'hidden'\">\n <ScrollAreaScrollbarVisible\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n >\n <slot />\n </ScrollAreaScrollbarVisible>\n </Presence>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","useStateMachine","watchEffect","useDebounceFn"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,mBAAmBC,+DAAiC,EAAA;AAE1D,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAIC,uCAAgB,QAAU,EAAA;AAAA,MACpD,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,MAAA;AAAA,QACZ,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA,WAAA;AAAA,QACR,aAAe,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,UAAU,MAAQ,EAAA;AAC1B,QAAA,MAAM,SAAS,MAAO,CAAA,UAAA;AAAA,UACpB,MAAM,SAAS,MAAM,CAAA;AAAA,UACrB,YAAY,eAAgB,CAAA;AAAA,SAC9B;AAEA,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,MAAM,CAAA;AAAA,SAC3B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,oBAAoBC,kBAAc,CAAA,MAAM,QAAS,CAAA,YAAY,GAAG,GAAG,CAAA;AAEzE,IAAAD,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,YAAY,QAAS,CAAA,KAAA;AACtC,MAAA,MAAM,eAAkB,GAAA,gBAAA,CAAiB,YAAa,CAAA,KAAA,GAClD,YACA,GAAA,WAAA;AAEJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,aAAA,GAAgB,SAAS,eAAe,CAAA;AAC5C,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,SAAA,GAAY,SAAS,eAAe,CAAA;AAC1C,UAAA,MAAM,8BAA8B,aAAkB,KAAA,SAAA;AACtD,UAAA,IAAI,2BAA6B,EAAA;AAC/B,YAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,YAAkB,iBAAA,EAAA;AAAA;AAEpB,UAAgB,aAAA,GAAA,SAAA;AAAA,SAClB;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM;AACd,UAAS,QAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;"}