reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 4.23 kB
Source Map (JSON)
{"version":3,"file":"DialogContentImpl.cjs","sources":["../../src/Dialog/DialogContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n DismissableLayerEmits,\n DismissableLayerProps,\n} from '@/DismissableLayer'\nimport { getActiveElement, useForwardExpose, useId } from '@/shared'\n\nexport type DialogContentImplEmits = 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 DialogContentImplProps extends DismissableLayerProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling transntion with Vue native transition or other animation libraries.\n */\n forceMount?: boolean\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { getOpenState } from '@/Menu/utils'\nimport { useWarning } from './utils'\nimport { onMounted } from 'vue'\n\nconst props = defineProps<DialogContentImplProps>()\nconst emits = defineEmits<DialogContentImplEmits>()\n\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nrootContext.titleId ||= useId(undefined, 'reka-dialog-title')\nrootContext.descriptionId ||= useId(undefined, 'reka-dialog-description')\n\nonMounted(() => {\n rootContext.contentElement = contentElement\n\n // Preserve the `DialogTrigger` element in case it was triggered programmatically\n if (getActiveElement() !== document.body)\n rootContext.triggerElement.value = getActiveElement() as HTMLElement\n})\n\nif (process.env.NODE_ENV !== 'production') {\n useWarning({\n titleName: 'DialogTitle',\n contentName: 'DialogContent',\n componentLink: 'dialog.html#title',\n titleId: rootContext.titleId,\n descriptionId: rootContext.descriptionId,\n contentElement,\n })\n}\n</script>\n\n<template>\n <FocusScope\n as-child\n loop\n :trapped=\"props.trapFocus\"\n @mount-auto-focus=\"emits('openAutoFocus', $event)\"\n @unmount-auto-focus=\"emits('closeAutoFocus', $event)\"\n >\n <DismissableLayer\n :id=\"rootContext.contentId\"\n :ref=\"forwardRef\"\n :as=\"as\"\n :as-child=\"asChild\"\n :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n role=\"dialog\"\n :aria-describedby=\"rootContext.descriptionId\"\n :aria-labelledby=\"rootContext.titleId\"\n :data-state=\"getOpenState(rootContext.open.value)\"\n v-bind=\"$attrs\"\n @dismiss=\"rootContext.onOpenChange(false)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @focus-outside=\"emits('focusOutside', $event)\"\n @interact-outside=\"emits('interactOutside', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n >\n <slot />\n </DismissableLayer>\n </FocusScope>\n</template>\n"],"names":["injectDialogRootContext","useForwardExpose","useId","onMounted","getActiveElement","useWarning"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAY,WAAA,CAAA,OAAA,KAAYC,kBAAM,CAAA,MAAA,EAAW,mBAAmB,CAAA;AAC5D,IAAY,WAAA,CAAA,aAAA,KAAkBA,kBAAM,CAAA,MAAA,EAAW,yBAAyB,CAAA;AAExE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAG7B,MAAI,IAAAC,wCAAA,OAAuB,QAAS,CAAA,IAAA;AAClC,QAAY,WAAA,CAAA,cAAA,CAAe,QAAQA,wCAAiB,EAAA;AAAA,KACvD,CAAA;AAED,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAWC,uBAAA,CAAA;AAAA,QACT,SAAW,EAAA,aAAA;AAAA,QACX,WAAa,EAAA,eAAA;AAAA,QACb,aAAe,EAAA,mBAAA;AAAA,QACf,SAAS,WAAY,CAAA,OAAA;AAAA,QACrB,eAAe,WAAY,CAAA,aAAA;AAAA,QAC3B;AAAA,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}