reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 6.28 kB
Source Map (JSON)
{"version":3,"file":"HoverCardContentImpl.cjs","sources":["../../src/HoverCard/HoverCardContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperContentProps } from '@/Popper'\nimport type { DismissableLayerEmits } from '@/DismissableLayer'\nimport { useForwardExpose, useGraceArea } from '@/shared'\nimport { syncRef } from '@vueuse/shared'\n\nexport type HoverCardContentImplEmits = DismissableLayerEmits\nexport interface HoverCardContentImplProps extends PopperContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'\nimport { injectHoverCardRootContext } from './HoverCardRoot.vue'\nimport { PopperContent } from '@/Popper'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { getTabbableNodes } from './utils'\nimport { useForwardProps } from '..'\n\nconst props = defineProps<HoverCardContentImplProps>()\nconst emits = defineEmits<HoverCardContentImplEmits>()\nconst forwarded = useForwardProps(props)\n\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\nconst rootContext = injectHoverCardRootContext()\nconst { isPointerInTransit, onPointerExit } = useGraceArea(rootContext.triggerElement, contentElement)\n\nsyncRef(rootContext.isPointerInTransitRef, isPointerInTransit, { direction: 'rtl' })\n\nonPointerExit(() => {\n rootContext.onClose()\n})\n\nconst containSelection = ref(false)\n\nlet originalBodyUserSelect: string\nwatchEffect((cleanupFn) => {\n if (containSelection.value) {\n const body = document.body\n\n // Safari requires prefix\n originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect\n\n body.style.userSelect = 'none'\n body.style.webkitUserSelect = 'none'\n\n cleanupFn(() => {\n body.style.userSelect = originalBodyUserSelect\n body.style.webkitUserSelect = originalBodyUserSelect\n })\n }\n})\n\nfunction handlePointerUp() {\n containSelection.value = false\n rootContext.isPointerDownOnContentRef.value = false\n\n // Delay a frame to ensure we always access the latest selection\n nextTick(() => {\n const hasSelection = document.getSelection()?.toString() !== ''\n if (hasSelection)\n rootContext.hasSelectionRef.value = true\n })\n}\nonMounted(() => {\n if (contentElement.value) {\n document.addEventListener('pointerup', handlePointerUp)\n\n const tabbables = getTabbableNodes(contentElement.value)\n tabbables.forEach(tabbable => tabbable.setAttribute('tabindex', '-1'))\n }\n})\n\nonUnmounted(() => {\n document.removeEventListener('pointerup', handlePointerUp)\n rootContext.hasSelectionRef.value = false\n rootContext.isPointerDownOnContentRef.value = false\n})\n</script>\n\n<template>\n <DismissableLayer\n as-child\n :disable-outside-pointer-events=\"false\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n @focus-outside.prevent=\"emits('focusOutside', $event)\"\n @dismiss=\"rootContext.onDismiss\"\n >\n <PopperContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :ref=\"forwardRef\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :style=\"{\n 'userSelect': containSelection ? 'text' : undefined,\n // Safari requires prefix\n 'WebkitUserSelect': containSelection ? 'text' : undefined,\n // re-namespace exposed content custom properties\n '--reka-hover-card-content-transform-origin': 'var(--reka-popper-transform-origin)',\n '--reka-hover-card-content-available-width': 'var(--reka-popper-available-width)',\n '--reka-hover-card-content-available-height': 'var(--reka-popper-available-height)',\n '--reka-hover-card-trigger-width': 'var(--reka-popper-anchor-width)',\n '--reka-hover-card-trigger-height': 'var(--reka-popper-anchor-height)',\n }\"\n @pointerdown=\"(event: PointerEvent) => {\n // Contain selection to current layer\n if ((event.currentTarget as HTMLElement).contains(event.target as HTMLElement)) {\n containSelection = true\n }\n rootContext.hasSelectionRef.value = false;\n rootContext.isPointerDownOnContentRef.value = true;\n }\"\n >\n <slot />\n </PopperContent>\n </DismissableLayer>\n</template>\n"],"names":["useForwardProps","useForwardExpose","injectHoverCardRootContext","useGraceArea","syncRef","ref","watchEffect","nextTick","onMounted","getTabbableNodes","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,uCAAgB,KAAK,CAAA;AAEvC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AACxE,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAC/C,IAAA,MAAM,EAAE,kBAAoB,EAAA,aAAA,KAAkBC,gCAAa,CAAA,WAAA,CAAY,gBAAgB,cAAc,CAAA;AAErG,IAAAC,cAAA,CAAQ,YAAY,qBAAuB,EAAA,kBAAA,EAAoB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEnF,IAAA,aAAA,CAAc,MAAM;AAClB,MAAA,WAAA,CAAY,OAAQ,EAAA;AAAA,KACrB,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,KAAK,CAAA;AAElC,IAAI,IAAA,sBAAA;AACJ,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,iBAAiB,KAAO,EAAA;AAC1B,QAAA,MAAM,OAAO,QAAS,CAAA,IAAA;AAGtB,QAAA,sBAAA,GAAyB,IAAK,CAAA,KAAA,CAAM,UAAc,IAAA,IAAA,CAAK,KAAM,CAAA,gBAAA;AAE7D,QAAA,IAAA,CAAK,MAAM,UAAa,GAAA,MAAA;AACxB,QAAA,IAAA,CAAK,MAAM,gBAAmB,GAAA,MAAA;AAE9B,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,IAAA,CAAK,MAAM,UAAa,GAAA,sBAAA;AACxB,UAAA,IAAA,CAAK,MAAM,gBAAmB,GAAA,sBAAA;AAAA,SAC/B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAA,gBAAA,CAAiB,KAAQ,GAAA,KAAA;AACzB,MAAA,WAAA,CAAY,0BAA0B,KAAQ,GAAA,KAAA;AAG9C,MAAAC,YAAA,CAAS,MAAM;AACb,QAAA,MAAM,YAAe,GAAA,QAAA,CAAS,YAAa,EAAA,EAAG,UAAe,KAAA,EAAA;AAC7D,QAAI,IAAA,YAAA;AACF,UAAA,WAAA,CAAY,gBAAgB,KAAQ,GAAA,IAAA;AAAA,OACvC,CAAA;AAAA;AAEH,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,eAAe,KAAO,EAAA;AACxB,QAAS,QAAA,CAAA,gBAAA,CAAiB,aAAa,eAAe,CAAA;AAEtD,QAAM,MAAA,SAAA,GAAYC,gCAAiB,CAAA,cAAA,CAAe,KAAK,CAAA;AACvD,QAAA,SAAA,CAAU,QAAQ,CAAY,QAAA,KAAA,QAAA,CAAS,YAAa,CAAA,UAAA,EAAY,IAAI,CAAC,CAAA;AAAA;AACvE,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACzD,MAAA,WAAA,CAAY,gBAAgB,KAAQ,GAAA,KAAA;AACpC,MAAA,WAAA,CAAY,0BAA0B,KAAQ,GAAA,KAAA;AAAA,KAC/C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}