vuetify
Version:
Vue Material Component Framework
1 lines • 8.2 kB
Source Map (JSON)
{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VDefaultsProvider","VOverlay","useProxiedModel","useScopeId","forwardRefs","computed","mergeProps","nextTick","ref","watch","genericComponent","IN_BROWSER","useRender","filterVOverlayProps","makeVOverlayProps","VDialog","name","props","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","emits","value","setup","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","matches","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activatorProps","String","overlayProps","activator","args"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, mergeProps, nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER, useRender } from '@/util'\nimport { filterVOverlayProps, makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n name: 'VDialog',\n\n props: {\n fullscreen: Boolean,\n retainFocus: {\n type: Boolean,\n default: true,\n },\n scrollable: Boolean,\n\n ...makeVOverlayProps({\n origin: 'center center' as const,\n scrollStrategy: 'block' as const,\n transition: { component: VDialogTransition },\n zIndex: 2400,\n }),\n },\n\n emits: {\n 'update:modelValue': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const isActive = useProxiedModel(props, 'modelValue')\n const { scopeId } = useScopeId()\n\n const overlay = ref<VOverlay>()\n function onFocusin (e: FocusEvent) {\n const before = e.relatedTarget as HTMLElement | null\n const after = e.target as HTMLElement | null\n\n if (\n before !== after &&\n overlay.value?.contentEl &&\n // We're the topmost dialog\n overlay.value?.globalTop &&\n // It isn't the document or the dialog body\n ![document, overlay.value.contentEl].includes(after!) &&\n // It isn't inside the dialog body\n !overlay.value.contentEl.contains(after)\n ) {\n const focusable = [...overlay.value.contentEl.querySelectorAll(\n 'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]')) as HTMLElement[]\n\n if (!focusable.length) return\n\n const firstElement = focusable[0]\n const lastElement = focusable[focusable.length - 1]\n\n if (before === firstElement) {\n lastElement.focus()\n } else {\n firstElement.focus()\n }\n }\n }\n\n if (IN_BROWSER) {\n watch(() => isActive.value && props.retainFocus, val => {\n val\n ? document.addEventListener('focusin', onFocusin)\n : document.removeEventListener('focusin', onFocusin)\n }, { immediate: true })\n }\n\n watch(isActive, async val => {\n await nextTick()\n if (val) {\n overlay.value!.contentEl?.focus({ preventScroll: true })\n } else {\n overlay.value!.activatorEl?.focus({ preventScroll: true })\n }\n })\n\n const activatorProps = computed(() =>\n mergeProps({\n 'aria-haspopup': 'dialog',\n 'aria-expanded': String(isActive.value),\n }, props.activatorProps)\n )\n\n useRender(() => {\n const [overlayProps] = filterVOverlayProps(props)\n\n return (\n <VOverlay\n ref={ overlay }\n class={[\n 'v-dialog',\n {\n 'v-dialog--fullscreen': props.fullscreen,\n 'v-dialog--scrollable': props.scrollable,\n },\n ]}\n { ...overlayProps }\n v-model={ isActive.value }\n aria-role=\"dialog\"\n aria-modal=\"true\"\n activatorProps={ activatorProps.value }\n { ...scopeId }\n >\n {{\n activator: slots.activator,\n default: (...args) => (\n <VDefaultsProvider root>\n { slots.default?.(...args) }\n </VDefaultsProvider>\n ),\n }}\n </VOverlay>\n )\n })\n\n return forwardRefs({}, overlay)\n },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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"}