@inertia-vuetify/modal 0.0.0-stage → 3.0.0-rc.0

package/src/ModalContent.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { markAriaHidden } from '@inertiaui/vanilla'
+import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, useId, useTemplateRef, watch } from 'vue'
+import { useDefaults, useDisplay, useRtl } from 'vuetify'
+import { VCard, VCardActions, VCardItem } from 'vuetify/components/VCard'
+import { VDialog } from 'vuetify/components/VDialog'
+import CloseButton from './CloseButton.vue'
+import { getConfig, getDialogLocation, getMaxWidth } from './config'
+import { requestCloseKey } from './keys'
+import { slideTransition } from './transitions'
+import type { BeforeClose, ModalConfig, ModalContext } from './types'
+
+const props = defineProps<{
+    modalContext: ModalContext
+    config: ModalConfig
+    title?: string
+    beforeClose?: BeforeClose
+    dialogProps?: Record<string, unknown>
+    cardProps?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{ 'after-leave': [] }>()
+
+const slots = defineSlots<{
+    default(props: { requestClose: () => Promise<void> }): unknown
+    title?(props: { requestClose: () => Promise<void> }): unknown
+    actions?(props: { requestClose: () => Promise<void> }): unknown
+}>()
+
+// Local modals have no ModalRenderer, so this is what lets their content call useModal().
+provide('modalContext', toRef(props, 'modalContext'))
+provide(requestCloseKey, requestClose)
+
+// Scopes `createVuetify({ defaults: { InertiaModal: { VDialog: { ... } } } })` to these modals.
+useDefaults({}, 'InertiaModal')
+
+const { isRtl } = useRtl()
+const display = useDisplay()
+const titleId = useId()
+const entered = ref(false)
+const dialog = useTemplateRef<InstanceType<typeof VDialog>>('dialog')
+
+// Read before the dialog takes focus: the transition grows from it and focus returns to it.
+const trigger =
+    typeof document !== 'undefined' && document.activeElement !== document.body ? (document.activeElement as HTMLElement | null) : null
+
+const type = computed(() => (props.config.slideover ? 'slideover' : 'modal'))
+const hasTitle = computed(() => !!props.title || !!slots.title)
+const showCloseButton = computed(() => props.config.closeButton !== false)
+
+const fullscreen = computed(() => {
+    const value = props.config.fullscreen
+
+    if (value === 'mobile') {
+        return display.mobile.value
+    }
+
+    if (typeof value === 'string') {
+        return display.width.value < display.thresholds.value[value]
+    }
+
+    return typeof value === 'number' ? display.width.value < value : !!value
+})
+
+const layout = computed(() => {
+    const { maxWidth, position, slideover } = props.config
+    const contentClass = [`im-${type.value}-dialog`, { [`im-slideover-${position}`]: slideover && position !== 'right' }]
+
+    if (!slideover) {
+        return fullscreen.value
+            ? { fullscreen: true, transition: 'dialog-bottom-transition', contentClass }
+            : { location: getDialogLocation(position), maxWidth: getMaxWidth(maxWidth), target: trigger ?? undefined, contentClass }
+    }
+
+    if (position === 'bottom') {
+        return {
+            location: 'bottom' as const,
+            width: '100%',
+            maxWidth: getMaxWidth(maxWidth),
+            fullscreen: fullscreen.value,
+            contentClass,
+            transition: slideTransition('translateY(100%)'),
+        }
+    }
+
+    // Slideover sides are physical like upstream, while Vuetify locations follow the text direction.
+    const left = position === 'left'
+
+    return {
+        location: left !== isRtl.value ? ('left' as const) : ('right' as const),
+        width: '100%',
+        maxWidth: getMaxWidth(maxWidth),
+        height: '100%',
+        maxHeight: '100%',
+        fullscreen: fullscreen.value,
+        contentClass,
+        transition: slideTransition(`translateX(${left ? '-100%' : '100%'})`),
+    }
+})
+
+// Only the top modal dims the page; leaving it unset keeps Vuetify defaults and dialogProps in charge.
+const scrim = computed(() => (props.modalContext.onTopOfStack ? (props.dialogProps?.scrim as string | boolean | undefined) : false))
+
+const contentStyle = computed(() => ({
+    margin: props.config.slideover && !fullscreen.value ? 0 : undefined,
+    filter: props.modalContext.onTopOfStack ? undefined : 'blur(4px)',
+    transition: 'filter 0.3s',
+}))
+
+let closing = false
+
+async function requestClose() {
+    if (closing) {
+        return
+    }
+
+    closing = true
+
+    try {
+        if ((await props.beforeClose?.()) === false) {
+            dialog.value?.animateClick()
+        } else {
+            props.modalContext.close()
+        }
+    } finally {
+        closing = false
+    }
+}
+
+// How to handle the close v-dialog emits right after click:outside.
+let outsideClick: 'close' | 'refuse' | 'ignore' = 'close'
+
+function onClickOutside() {
+    if (!props.modalContext.onTopOfStack) {
+        // Stacked modals render beside this one, so Vuetify reports clicks in them as outside clicks.
+        outsideClick = 'ignore'
+    } else if (!props.config.closeExplicitly && props.config.closeOnClickOutside === false) {
+        // v-dialog has no separate outside-click switch.
+        outsideClick = 'refuse'
+    }
+}
+
+function onUpdateModelValue(open: boolean) {
+    const action = outsideClick
+    outsideClick = 'close'
+
+    if (open || action === 'ignore') {
+        return
+    }
+
+    if (action === 'refuse') {
+        dialog.value?.animateClick()
+    } else {
+        requestClose()
+    }
+}
+
+function onAfterLeave() {
+    emit('after-leave')
+    props.modalContext.afterLeave()
+}
+
+let restoreAppElement: (() => void) | null = null
+
+function onOpenChange(open: boolean) {
+    const appElement = getConfig('appElement')
+
+    if (open) {
+        if (typeof appElement === 'string') {
+            restoreAppElement ??= markAriaHidden(appElement)
+        }
+
+        return
+    }
+
+    entered.value = false
+    restoreAppElement?.()
+    restoreAppElement = null
+    trigger?.focus({ preventScroll: true })
+}
+
+onMounted(() => watch(() => props.modalContext.isOpen, onOpenChange, { immediate: true, flush: 'post' }))
+onBeforeUnmount(() => onOpenChange(false))
+</script>
+
+<template>
+    <VDialog
+        ref="dialog"
+        v-bind="{ ...layout, ...dialogProps }"
+        :model-value="modalContext.isOpen"
+        :persistent="(config.closeExplicitly && modalContext.onTopOfStack) || undefined"
+        :scrim
+        :close-on-back="false"
+        :content-props="{ style: contentStyle }"
+        :aria-labelledby="hasTitle ? titleId : undefined"
+        :aria-hidden="!modalContext.onTopOfStack || undefined"
+        :data-inertiaui-modal-id="modalContext.id"
+        :data-inertiaui-modal-index="modalContext.index"
+        @click:outside="onClickOutside"
+        @update:model-value="onUpdateModelValue"
+        @after-enter="entered = true"
+        @after-leave="onAfterLeave"
+    >
+        <VCard
+            :class="`im-${type}-wrapper`"
+            :rounded="config.slideover ? 0 : undefined"
+            :data-inertiaui-modal-entered="entered"
+            v-bind="cardProps"
+        >
+            <VCardItem v-if="hasTitle" :class="`im-${type}-title`">
+                <template #title>
+                    <span :id="titleId">
+                        <slot name="title" :request-close="requestClose">{{ title }}</slot>
+                    </span>
+                </template>
+
+                <template v-if="showCloseButton" #append>
+                    <CloseButton />
+                </template>
+            </VCardItem>
+
+            <div v-else-if="showCloseButton" class="position-absolute top-0 pa-2" style="inset-inline-end: 0; z-index: 1">
+                <CloseButton />
+            </div>
+
+            <div
+                :class="[`im-${type}-content`, config.paddingClasses, config.panelClasses]"
+                :style="{ flex: '1 1 auto', minHeight: 0, overflowY: 'auto', paddingTop: hasTitle ? 0 : undefined }"
+            >
+                <slot :request-close="requestClose" />
+            </div>
+
+            <VCardActions v-if="slots.actions" :class="`im-${type}-actions`">
+                <slot name="actions" :request-close="requestClose" />
+            </VCardActions>
+        </VCard>
+    </VDialog>
+</template>

package/src/ModalLink.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import type { RequestPayload } from '@inertiajs/core'
+import { computed, onBeforeUnmount, onMounted, provide, reactive, ref, useAttrs, watch, type Component, type PropType } from 'vue'
+import { getConfig } from './config'
+import { only, rejectNullValues } from './helpers'
+import { modalPropNames, prefetch as prefetchModal, useModalStack } from './modalStack'
+import type { Fullscreen, HttpMethod, MaxWidth, ModalContext, ModalPosition, PrefetchOption, SlideoverPosition } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+// Modal config props default to null so unset ones fall back to the Modal and the global config.
+const props = defineProps({
+    href: { type: String, required: true },
+    method: { type: String as PropType<HttpMethod>, default: 'get' },
+    data: { type: Object as PropType<RequestPayload>, default: () => ({}) },
+    as: { type: [String, Object] as PropType<string | Component>, default: 'a' },
+    headers: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
+    queryStringArrayFormat: { type: String as PropType<'brackets' | 'indices'>, default: 'brackets' },
+    navigate: { type: Boolean, default: null },
+    prefetch: { type: [Boolean, String, Array] as PropType<PrefetchOption>, default: false },
+    cacheFor: { type: Number, default: 30000 },
+    closeButton: { type: Boolean, default: null },
+    closeExplicitly: { type: Boolean, default: null },
+    closeOnClickOutside: { type: Boolean, default: null },
+    maxWidth: { type: String as PropType<MaxWidth>, default: null },
+    paddingClasses: { type: [Boolean, String] as PropType<string | false>, default: null },
+    panelClasses: { type: [Boolean, String] as PropType<string | false>, default: null },
+    position: { type: String as PropType<ModalPosition | SlideoverPosition>, default: null },
+    slideover: { type: Boolean, default: null },
+    fullscreen: { type: [Boolean, String, Number] as PropType<Fullscreen>, default: null },
+})
+
+const emit = defineEmits<{
+    'after-leave': []
+    blur: []
+    close: []
+    error: [error: unknown]
+    focus: []
+    start: []
+    success: []
+    prefetching: []
+    prefetched: []
+}>()
+
+defineSlots<{ default?(props: { loading: boolean }): unknown }>()
+
+const loading = ref(false)
+const modalStack = useModalStack()
+const modalContext = ref<ModalContext | null>(null)
+
+provide('modalContext', modalContext)
+
+const shouldNavigate = computed(() => props.navigate ?? (getConfig('navigate') as boolean))
+
+const prefetchModes = computed(() => {
+    if (props.prefetch === true) {
+        return ['hover']
+    }
+
+    return props.prefetch === false ? [] : [props.prefetch].flat()
+})
+
+function doPrefetch() {
+    prefetchModal(props.href, {
+        method: props.method,
+        data: props.data,
+        headers: props.headers,
+        queryStringArrayFormat: props.queryStringArrayFormat,
+        cacheFor: props.cacheFor,
+        onPrefetching: () => emit('prefetching'),
+        onPrefetched: () => emit('prefetched'),
+    })
+}
+
+let hoverTimeout: ReturnType<typeof setTimeout> | undefined
+
+function onMouseenter() {
+    if (prefetchModes.value.includes('hover')) {
+        // A short delay skips links the pointer only passes over.
+        hoverTimeout = setTimeout(doPrefetch, 75)
+    }
+}
+
+function onMouseleave() {
+    clearTimeout(hoverTimeout)
+}
+
+function onMousedown(event: MouseEvent) {
+    if (prefetchModes.value.includes('click') && event.button === 0) {
+        doPrefetch()
+    }
+}
+
+onMounted(() => {
+    if (prefetchModes.value.includes('mount')) {
+        doPrefetch()
+    }
+})
+
+let isBlurred = false
+
+watch(
+    () => modalContext.value?.onTopOfStack,
+    (onTopOfStack) => {
+        if (!modalContext.value) {
+            return
+        }
+
+        if (onTopOfStack && isBlurred) {
+            emit('focus')
+        } else if (!onTopOfStack) {
+            emit('blur')
+        }
+
+        isBlurred = !onTopOfStack
+    },
+)
+
+const attrs = useAttrs()
+let unsubscribeEventListeners: (() => void) | undefined
+
+onBeforeUnmount(() => {
+    unsubscribeEventListeners?.()
+    clearTimeout(hoverTimeout)
+})
+
+watch(modalContext, (value, oldValue) => {
+    if (value && !oldValue) {
+        unsubscribeEventListeners = value.registerEventListenersFromAttrs(attrs)
+        emit('success')
+    }
+})
+
+function onAfterLeave() {
+    modalContext.value = null
+    emit('after-leave')
+}
+
+function handle(event: MouseEvent) {
+    // Leave modified clicks on links to the browser, e.g. to open a new tab.
+    if ((event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) && event.currentTarget instanceof HTMLAnchorElement) {
+        return
+    }
+
+    event.preventDefault()
+
+    if (loading.value) {
+        return
+    }
+
+    if (!props.href.startsWith('#')) {
+        loading.value = true
+        emit('start')
+    }
+
+    modalStack
+        .visit(
+            props.href,
+            props.method,
+            props.data,
+            props.headers,
+            rejectNullValues(only(props, modalPropNames)),
+            () => emit('close'),
+            onAfterLeave,
+            props.queryStringArrayFormat,
+            shouldNavigate.value,
+        )
+        .then((context) => (modalContext.value = reactive(context)))
+        .catch((error: unknown) => {
+            console.error(error)
+            emit('error', error)
+        })
+        .finally(() => (loading.value = false))
+}
+</script>
+
+<template>
+    <component
+        :is="as"
+        v-bind="$attrs"
+        :href
+        @click="handle"
+        @mouseenter="onMouseenter"
+        @mouseleave="onMouseleave"
+        @mousedown="onMousedown"
+    >
+        <slot :loading />
+    </component>
+</template>

package/src/ModalRenderer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { only } from './helpers'
+import { useModalStack } from './modalStack'
+
+const props = defineProps<{ index: number }>()
+
+const modalStack = useModalStack()
+const modalContext = computed(() => modalStack.stack.value[props.index])
+
+provide('modalContext', modalContext)
+</script>
+
+<template>
+    <component
+        :is="modalContext.component"
+        v-if="modalContext?.component"
+        v-bind="only(modalContext.props, modalContext.getComponentPropKeys(), true)"
+        @modal-event="(event: string, ...args: unknown[]) => modalContext.emit(event, ...args)"
+    />
+</template>

package/src/ModalRoot.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { http, router, usePage } from '@inertiajs/vue3'
+import { onUnmounted, watch } from 'vue'
+import { sameUrlPath } from './helpers'
+import ModalRenderer from './ModalRenderer.vue'
+import { useModalStack } from './modalStack'
+import type { ModalResponseData } from './types'
+
+const modalStack = useModalStack()
+const $page = usePage()
+
+let isNavigating = false
+const pendingModalKeys = new Set<string>()
+// Non-GET visits in flight, by id, and whether they should close the modals when they finish.
+const submissions = new Map<string, boolean>()
+
+// Deduplicates modal data that has no id.
+const getModalKey = (modalData: ModalResponseData) => modalData.id || `${modalData.component}:${modalData.url}`
+const modalData = (props?: Record<string, unknown>) => props?._inertiaui_modal as ModalResponseData | undefined
+
+onUnmounted(
+    router.on('start', ({ detail: { visit } }) => {
+        isNavigating = true
+
+        if (visit.method !== 'get') {
+            submissions.set(visit.id, false)
+        }
+    }),
+)
+
+// Inertia 3 swaps in a same-URL response, like a redirect back after submitting a form, without
+// a navigate event. Close the modals once such a submission lands on a page without one; waiting
+// for finish lets the submission's onSuccess still emit events to the modals.
+onUnmounted(
+    router.on('success', ({ detail: { page, visitId } }) => {
+        if (visitId && submissions.has(visitId) && !modalData(page.props)) {
+            submissions.set(visitId, true)
+        }
+    }),
+)
+
+onUnmounted(
+    router.on('finish', ({ detail: { visit } }) => {
+        isNavigating = false
+
+        if (submissions.get(visit.id)) {
+            modalStack.closeAll()
+        }
+
+        submissions.delete(visit.id)
+    }),
+)
+
+onUnmounted(
+    router.on('navigate', ({ detail: { page } }) => {
+        const modalOnBase = modalData(page.props)
+
+        // router.push() in afterLeave() can fire navigate before the modal data is cleared; don't reopen the modal then.
+        if (modalStack.isClosingToBaseUrl(page.url)) {
+            modalStack.clearClosingToBaseUrl()
+            modalStack.closeAll(true)
+            modalStack.setBaseUrl(null)
+            return
+        }
+
+        // No modal on this page, or history moved to a URL that isn't the modal's.
+        if (!modalOnBase || !sameUrlPath(page.url, modalOnBase.url)) {
+            modalStack.closeAll(true)
+            modalStack.setBaseUrl(null)
+            return
+        }
+
+        const modalKey = getModalKey(modalOnBase)
+        const stack = modalStack.stack.value
+
+        // Skip modals that are being pushed, already open, or reopened with new props (handled by the watcher below).
+        if (
+            pendingModalKeys.has(modalKey) ||
+            (modalOnBase.id && stack.some((modal) => modal.id === modalOnBase.id)) ||
+            stack.some((modal) => modal.response.component === modalOnBase.component && sameUrlPath(modal.response.url, modalOnBase.url))
+        ) {
+            return
+        }
+
+        modalStack.setBaseUrl(modalOnBase.baseUrl ?? null)
+        pendingModalKeys.add(modalKey)
+
+        modalStack
+            .pushFromResponseData(modalOnBase, {}, () => {
+                if (!modalOnBase.baseUrl) {
+                    console.error('No base url in modal response data so cannot navigate back')
+                    return
+                }
+
+                // Clear it first so the base page request (and its deferred props) isn't sent as a modal request.
+                modalStack.setBaseUrl(null)
+
+                if (!isNavigating && typeof window !== 'undefined' && window.location.href !== modalOnBase.baseUrl) {
+                    router.visit(modalOnBase.baseUrl, { preserveScroll: true, preserveState: true })
+                }
+            })
+            .finally(() => pendingModalKeys.delete(modalKey))
+    }),
+)
+
+// Tells the server which page a modal opens on top of, so back() can redirect there. Inertia 3 loads
+// deferred props before the navigate event, so the page props are the fallback.
+// It is registered in setup to be in place for that, and only in the browser: during SSR,
+// onUnmounted never runs and every render would leak a handler.
+const removeRequestInterceptor =
+    typeof window === 'undefined'
+        ? undefined
+        : http.onRequest((config) => {
+              const baseUrl = modalStack.getBaseUrl() ?? modalData($page.props)?.baseUrl
+
+              if (baseUrl) {
+                  config.headers = { ...config.headers, 'X-InertiaUI-Modal-Base-Url': baseUrl }
+              }
+
+              return config
+          })
+
+onUnmounted(() => removeRequestInterceptor?.())
+
+watch(
+    () => modalData($page.props),
+    (newModal, previousModal) => {
+        if (!newModal) {
+            return
+        }
+
+        const isSameModal = (modal: { component?: string; url?: string }) =>
+            modal.component === newModal.component && sameUrlPath(modal.url, newModal.url)
+
+        // The server re-rendered an open modal, e.g. after a redirect back to it: refresh its props.
+        if (previousModal && isSameModal(previousModal)) {
+            modalStack.stack.value[0]?.updateProps(newModal.props ?? {})
+            return
+        }
+
+        if (!previousModal) {
+            modalStack.stack.value.find((modal) => isSameModal(modal.response))?.updateProps(newModal.props ?? {})
+        }
+    },
+)
+</script>
+
+<template>
+    <slot />
+
+    <ModalRenderer v-if="modalStack.stack.value.length" :index="0" />
+</template>

package/src/WhenVisible.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted, ref, useTemplateRef, type Ref } from 'vue'
+import type { ModalContext, ReloadOptions } from './types'
+
+const props = withDefaults(
+    defineProps<{
+        data?: string | string[]
+        params?: ReloadOptions
+        buffer?: number
+        as?: string
+        always?: boolean
+    }>(),
+    { buffer: 0, as: 'div' },
+)
+
+defineSlots<{ default?(): unknown; fallback?(): unknown }>()
+
+const modalContext = inject<Ref<ModalContext | null>>('modalContext')
+
+if (!modalContext) {
+    throw new Error('WhenVisible component must be used inside a Modal component')
+}
+
+const loaded = ref(false)
+const root = useTemplateRef<HTMLElement>('root')
+let fetching = false
+let observer: IntersectionObserver | undefined
+
+function reloadParams(): ReloadOptions {
+    if (props.data) {
+        return { only: [props.data].flat() }
+    }
+
+    if (!props.params) {
+        throw new Error('You must provide either a `data` or `params` prop.')
+    }
+
+    return props.params
+}
+
+onMounted(() => {
+    if (!root.value) {
+        return
+    }
+
+    observer = new IntersectionObserver(
+        ([entry]) => {
+            if (!entry.isIntersecting) {
+                return
+            }
+
+            if (!props.always) {
+                observer?.disconnect()
+            }
+
+            if (fetching) {
+                return
+            }
+
+            fetching = true
+            const params = reloadParams()
+
+            modalContext.value?.reload({
+                ...params,
+                onStart: () => {
+                    fetching = true
+                    params.onStart?.()
+                },
+                onFinish: () => {
+                    loaded.value = true
+                    fetching = false
+                    params.onFinish?.()
+                },
+            })
+        },
+        { rootMargin: `${props.buffer}px` },
+    )
+
+    observer.observe(root.value)
+})
+
+onUnmounted(() => observer?.disconnect())
+</script>
+
+<template>
+    <component :is="as" ref="root">
+        <slot v-if="loaded" />
+        <slot v-else name="fallback" />
+    </component>
+</template>