UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 3.65 kB
{"version":3,"file":"PopoverContentImpl.cjs","sources":["../../src/Popover/PopoverContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperContentProps } from '@/Popper'\nimport type {\n DismissableLayerEmits,\n DismissableLayerProps,\n} from '@/DismissableLayer'\nimport type { FocusScopeProps } from '@/FocusScope'\nimport { reactiveOmit } from '@vueuse/shared'\n\nexport type PopoverContentImplEmits = DismissableLayerEmits & {\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n openAutoFocus: [event: Event]\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n closeAutoFocus: [event: Event]\n}\n\nexport interface PopoverContentImplProps extends PopperContentProps, DismissableLayerProps {}\n\ninterface PopoverContentImplPrivateProps extends PopoverContentImplProps {\n /**\n * Whether focus should be trapped within the `MenuContent`\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectPopoverRootContext } from './PopoverRoot.vue'\nimport { PopperContent } from '@/Popper'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { useFocusGuards, useForwardExpose, useForwardProps } from '@/shared'\n\nconst props = defineProps<PopoverContentImplPrivateProps>()\nconst emits = defineEmits<PopoverContentImplEmits>()\n\nconst forwarded = useForwardProps(reactiveOmit(props, 'trapFocus', 'disableOutsidePointerEvents'))\nconst { forwardRef } = useForwardExpose()\n\nconst rootContext = injectPopoverRootContext()\nuseFocusGuards()\n</script>\n\n<template>\n <FocusScope\n as-child\n loop\n :trapped=\"trapFocus\"\n @mount-auto-focus=\"emits('openAutoFocus', $event)\"\n @unmount-auto-focus=\"emits('closeAutoFocus', $event)\"\n >\n <DismissableLayer\n as-child\n :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n @interact-outside=\"emits('interactOutside', $event)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @focus-outside=\"emits('focusOutside', $event)\"\n @dismiss=\"rootContext.onOpenChange(false)\"\n >\n <PopperContent\n v-bind=\"forwarded\"\n :id=\"rootContext.contentId\"\n :ref=\"forwardRef\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :aria-labelledby=\"rootContext.triggerId\"\n :style=\"{\n '--reka-popover-content-transform-origin':\n 'var(--reka-popper-transform-origin)',\n '--reka-popover-content-available-width':\n 'var(--reka-popper-available-width)',\n '--reka-popover-content-available-height':\n 'var(--reka-popper-available-height)',\n '--reka-popover-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-popover-trigger-height': 'var(--reka-popper-anchor-height)',\n }\"\n role=\"dialog\"\n >\n <slot />\n </PopperContent>\n </DismissableLayer>\n </FocusScope>\n</template>\n"],"names":["useForwardProps","reactiveOmit","useForwardExpose","injectPopoverRootContext","useFocusGuards"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,YAAYA,sCAAgB,CAAAC,mBAAA,CAAa,KAAO,EAAA,WAAA,EAAa,6BAA6B,CAAC,CAAA;AACjG,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AAExC,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAC7C,IAAeC,oCAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}