UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 2.01 kB
{"version":3,"file":"ScrollAreaScrollbarY.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarY.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { getThumbSize } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n if (scrollbarElement.value)\n rootContext.onScrollbarYChange(scrollbarElement.value)\n})\n\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n <ScrollAreaScrollbarImpl\n :ref=\"forwardRef\"\n :is-horizontal=\"false\"\n data-orientation=\"vertical\"\n :style=\"{\n top: 0,\n right: rootContext.dir.value === 'ltr' ? 0 : undefined,\n left: rootContext.dir.value === 'rtl' ? 0 : undefined,\n bottom: 'var(--reka-scroll-area-corner-height)',\n ['--reka-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n }\"\n @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.y)\"\n >\n <slot />\n </ScrollAreaScrollbarImpl>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","onMounted","computed"],"mappings":";;;;;;;;;;;;AAQA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqBC,wCAAiB,EAAA;AAE1E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AAED,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}