1 line
8.3 KiB
Plaintext
1 line
8.3 KiB
Plaintext
|
{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VDefaultsProvider","VOverlay","makeVOverlayProps","forwardRefs","useProxiedModel","useScopeId","computed","mergeProps","nextTick","ref","watch","focusableChildren","genericComponent","IN_BROWSER","propsFactory","useRender","makeVDialogProps","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","VDialog","name","props","emits","value","setup","_ref","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activatorProps","String","overlayProps","filterProps","_createVNode","_mergeProps","class","style","$event","activator","_len","arguments","args","Array","_key"],"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'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, mergeProps, nextTick, ref, watch } from 'vue'\nimport { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Component } from 'vue'\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVDialogProps = propsFactory({\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 as Component },\n zIndex: 2400,\n }),\n}, 'VDialog')\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n name: 'VDialog',\n\n props: makeVDialogProps(),\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 = focusableChildren(overlay.value.contentEl)\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(isAct
|