reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 1.96 kB
Source Map (JSON)
{"version":3,"file":"Viewport.cjs","sources":["../../src/Viewport/Viewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\nimport { toRefs } from 'vue'\n\nexport interface ViewportProps 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 { Primitive } from '@/Primitive'\n\nconst props = defineProps<ViewportProps>()\nconst { forwardRef } = useForwardExpose()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n</script>\n\n<template>\n <Primitive\n v-bind=\"{ ...$attrs, ...props }\"\n :ref=\"forwardRef\"\n data-reka-viewport\n role=\"presentation\"\n :style=\"{\n // we use position: 'relative' here on the `viewport` so that when we call\n // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n // (independent of the scrollUpButton).\n position: 'relative',\n flex: 1,\n overflow: 'auto',\n }\"\n >\n <slot />\n </Primitive>\n <Primitive\n as=\"style\"\n :nonce=\"nonce\"\n >\n /* Hide scrollbars cross-browser and enable momentum scroll for touch\n devices */ [data-reka-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n -webkit-overflow-scrolling: touch; }\n [data-reka-viewport]::-webkit-scrollbar { display: none; }\n </Primitive>\n</template>\n"],"names":["useForwardExpose","toRefs","useNonce"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIC,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}