reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.01 kB
Source Map (JSON)
{"version":3,"file":"ScrollAreaViewport.cjs","sources":["../../src/ScrollArea/ScrollAreaViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface ScrollAreaViewportProps extends PrimitiveProps {\n /**\n * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n */\n nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<ScrollAreaViewportProps>()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst rootContext = injectScrollAreaRootContext()\n\nconst viewportElement = ref<HTMLElement>()\n\nonMounted(() => {\n rootContext.onViewportChange(viewportElement.value!)\n rootContext.onContentChange(contentElement.value!)\n})\n\ndefineExpose({\n viewportElement,\n})\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n</script>\n\n<template>\n <div\n ref=\"viewportElement\"\n data-reka-scroll-area-viewport=\"\"\n :style=\"{\n /**\n * We don't support `visible` because the intention is to have at least one scrollbar\n * if this component is used and `visible` will behave like `auto` in that case\n * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description\n *\n * We don't handle `auto` because the intention is for the native implementation\n * to be hidden if using this component. We just want to ensure the node is scrollable\n * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n * the browser from having to work out whether to render native scrollbars or not,\n * we tell it to with the intention of hiding them in CSS.\n */\n overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',\n overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',\n }\"\n v-bind=\"$attrs\"\n :tabindex=\"0\"\n >\n <Primitive\n :ref=\"forwardRef\"\n :style=\"{\n /**\n * When horizontal scrollbar is visible: this element should be at least\n * as wide as its children for size calculations to work correctly.\n *\n * When horizontal scrollbar is NOT visible: this element's width should\n * be constrained by the parent container to enable `text-overflow: ellipsis`\n */\n minWidth: rootContext.scrollbarXEnabled.value ? 'fit-content' : undefined,\n }\"\n :as-child=\"props.asChild\"\n :as=\"as\"\n >\n <slot />\n </Primitive>\n </div>\n <Primitive\n as=\"style\"\n :nonce=\"nonce\"\n >\n /* Hide scrollbars cross-browser and enable momentum scroll for touch\n devices */\n [data-reka-scroll-area-viewport] {\n scrollbar-width:none;\n -ms-overflow-style:none;\n -webkit-overflow-scrolling:touch;\n }\n\n [data-reka-scroll-area-viewport]::-webkit-scrollbar {\n display:none;\n }\n </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectScrollAreaRootContext","ref","onMounted","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,cAAcC,qDAA4B,EAAA;AAEhD,IAAA,MAAM,kBAAkBC,OAAiB,EAAA;AAEzC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAM,CAAA;AACnD,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAM,CAAA;AAAA,KAClD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX;AAAA,KACD,CAAA;AACD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}