reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.13 kB
Source Map (JSON)
{"version":3,"file":"ScrollAreaScrollbar.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaScrollbarProps extends PrimitiveProps {\n /** The orientation of the scrollbar */\n orientation?: 'vertical' | 'horizontal'\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with Vue animation libraries.\n */\n forceMount?: boolean\n}\n\nexport interface ScrollAreaScollbarContext {\n as: Ref<PrimitiveProps['as']>\n orientation: Ref<'vertical' | 'horizontal'>\n forceMount?: Ref<boolean>\n isHorizontal: Ref<boolean>\n asChild: Ref<boolean>\n}\n\nexport const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext]\n = createContext<ScrollAreaScollbarContext>('ScrollAreaScrollbar')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n computed,\n onUnmounted,\n toRefs,\n watch,\n} from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue'\nimport ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue'\nimport ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n orientation: 'vertical',\n as: 'div',\n})\n\nconst { forwardRef } = useForwardExpose()\nconst rootContext = injectScrollAreaRootContext()\n\nconst isHorizontal = computed(() => props.orientation === 'horizontal')\n\nwatch(\n isHorizontal,\n () => {\n if (isHorizontal.value)\n rootContext.onScrollbarXEnabledChange(true)\n else rootContext.onScrollbarYEnabledChange(true)\n },\n { immediate: true },\n)\n\nonUnmounted(() => {\n rootContext.onScrollbarXEnabledChange(false)\n rootContext.onScrollbarYEnabledChange(false)\n})\n\nconst { orientation, forceMount, asChild, as } = toRefs(props)\nprovideScrollAreaScrollbarContext({\n orientation,\n forceMount,\n isHorizontal,\n as,\n asChild,\n})\n</script>\n\n<template>\n <ScrollAreaScrollbarHover\n v-if=\"rootContext.type.value === 'hover'\"\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n :force-mount=\"forceMount\"\n >\n <slot />\n </ScrollAreaScrollbarHover>\n <ScrollAreaScrollbarScroll\n v-else-if=\"rootContext.type.value === 'scroll'\"\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n :force-mount=\"forceMount\"\n >\n <slot />\n </ScrollAreaScrollbarScroll>\n <ScrollAreaScrollbarAuto\n v-else-if=\"rootContext.type.value === 'auto'\"\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n :force-mount=\"forceMount\"\n >\n <slot />\n </ScrollAreaScrollbarAuto>\n <ScrollAreaScrollbarVisible\n v-else-if=\"rootContext.type.value === 'always'\"\n v-bind=\"$attrs\"\n :ref=\"forwardRef\"\n data-state=\"visible\"\n >\n <slot />\n </ScrollAreaScrollbarVisible>\n</template>\n"],"names":["createContext","useForwardExpose","injectScrollAreaRootContext","computed","watch","onUnmounted","toRefs"],"mappings":";;;;;;;;;;;AAuBO,MAAM,CAAC,gCAAA,EAAkC,iCAAiC,CAAA,GAC7EA,mCAAyC,qBAAqB;;;;;;;;;;;;;AAoBlE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AACxC,IAAA,MAAM,cAAcC,qDAA4B,EAAA;AAEhD,IAAA,MAAM,YAAe,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,gBAAgB,YAAY,CAAA;AAEtE,IAAAC,SAAA;AAAA,MACE,YAAA;AAAA,MACA,MAAM;AACJ,QAAA,IAAI,YAAa,CAAA,KAAA;AACf,UAAA,WAAA,CAAY,0BAA0B,IAAI,CAAA;AAAA,aACvC,WAAA,CAAY,0BAA0B,IAAI,CAAA;AAAA,OACjD;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;AAEA,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,0BAA0B,KAAK,CAAA;AAC3C,MAAA,WAAA,CAAY,0BAA0B,KAAK,CAAA;AAAA,KAC5C,CAAA;AAED,IAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,SAAS,EAAG,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC7D,IAAkC,iCAAA,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,EAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}