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

package/src/app.ts

@@ -0,0 +1,17 @@
+import { h, type App, type Component, type VNode } from 'vue'
+import ModalRoot from './ModalRoot.vue'
+
+/** Renders the Inertia app inside `ModalRoot`, which renders the modal stack. */
+export function renderApp(App: Component, props: Record<string, any>): () => VNode {
+    return () => h(ModalRoot, () => h(App, props))
+}
+
+/** Wraps an app's existing render function in `ModalRoot`. */
+export function withInertiaModal(app: App): void {
+    const component = app._component as { render?: () => VNode }
+    const render = component.render
+
+    if (render) {
+        component.render = () => h(ModalRoot, () => render())
+    }
+}

package/src/cache.ts

@@ -0,0 +1,67 @@
+interface CacheEntry<T> {
+    response: T
+    expiresAt: number
+}
+
+export class ResponseCache<T> {
+    private cache = new Map<string, CacheEntry<T>>()
+    private timers = new Map<string, ReturnType<typeof setTimeout>>()
+    private inFlight = new Map<string, Promise<T>>()
+
+    static key(method: string, url: string, data: unknown): string {
+        return `${method}:${url}:${JSON.stringify(data)}`
+    }
+
+    get(key: string): T | null {
+        const cached = this.cache.get(key)
+
+        if (!cached) {
+            return null
+        }
+
+        if (Date.now() > cached.expiresAt) {
+            this.delete(key)
+            return null
+        }
+
+        return cached.response
+    }
+
+    set(key: string, response: T, cacheFor: number): void {
+        this.delete(key)
+
+        this.cache.set(key, {
+            response,
+            expiresAt: Date.now() + cacheFor,
+        })
+
+        if (cacheFor > 0) {
+            this.timers.set(
+                key,
+                setTimeout(() => this.delete(key), cacheFor),
+            )
+        }
+    }
+
+    delete(key: string): void {
+        this.cache.delete(key)
+
+        const timer = this.timers.get(key)
+        if (timer) {
+            clearTimeout(timer)
+            this.timers.delete(key)
+        }
+    }
+
+    getInFlight(key: string): Promise<T> | undefined {
+        return this.inFlight.get(key)
+    }
+
+    setInFlight(key: string, promise: Promise<T>): void {
+        this.inFlight.set(key, promise)
+    }
+
+    deleteInFlight(key: string): void {
+        this.inFlight.delete(key)
+    }
+}

package/src/config.ts

@@ -0,0 +1,116 @@
+import type { GlobalModalConfig, ModalPosition, ModalTypeConfig } from './types'
+
+type Config = Required<Omit<GlobalModalConfig, 'modal' | 'slideover'>> & {
+    modal: ModalTypeConfig
+    slideover: ModalTypeConfig
+}
+
+const defaultConfig: Config = {
+    type: 'modal',
+    navigate: false,
+    appElement: '#app',
+    modal: {
+        closeButton: true,
+        closeExplicitly: false,
+        closeOnClickOutside: true,
+        maxWidth: '2xl',
+        paddingClasses: 'pa-4 pa-sm-6',
+        panelClasses: '',
+        position: 'center',
+        fullscreen: 'sm',
+    },
+    slideover: {
+        closeButton: true,
+        closeExplicitly: false,
+        closeOnClickOutside: true,
+        maxWidth: 'md',
+        paddingClasses: 'pa-4 pa-sm-6',
+        panelClasses: '',
+        position: 'right',
+        fullscreen: false,
+    },
+}
+
+let config: Config
+
+export function resetConfig(): void {
+    config = structuredClone(defaultConfig)
+}
+
+/** Replaces the configuration (omitted keys get their defaults) or sets one dot-notation key. */
+export function putConfig(config: GlobalModalConfig): void
+export function putConfig(key: string, value: unknown): void
+export function putConfig(key: string | GlobalModalConfig, value?: unknown): void {
+    if (typeof key === 'object') {
+        config = {
+            type: key.type ?? defaultConfig.type,
+            navigate: key.navigate ?? defaultConfig.navigate,
+            appElement: key.appElement !== undefined ? key.appElement : defaultConfig.appElement,
+            modal: { ...defaultConfig.modal, ...key.modal },
+            slideover: { ...defaultConfig.slideover, ...key.slideover },
+        }
+        return
+    }
+
+    const keys = key.split('.')
+    let current = config as Record<string, unknown>
+
+    for (const segment of keys.slice(0, -1)) {
+        current = (current[segment] ??= {}) as Record<string, unknown>
+    }
+
+    current[keys[keys.length - 1]] = value
+}
+
+/** Reads the whole configuration or one dot-notation key; missing keys return `null`. */
+export function getConfig(key?: string): unknown {
+    if (key === undefined) {
+        return config
+    }
+
+    let current: unknown = config
+
+    for (const segment of key.split('.')) {
+        if (current === null || typeof current !== 'object') {
+            return null
+        }
+
+        current = (current as Record<string, unknown>)[segment]
+    }
+
+    return current ?? null
+}
+
+export function getConfigByType<K extends keyof ModalTypeConfig>(slideover: boolean, key: K): ModalTypeConfig[K] {
+    return getConfig(`${slideover ? 'slideover' : 'modal'}.${key}`) as ModalTypeConfig[K]
+}
+
+// Max-width tokens name Tailwind's max-w-* scale, like the original package.
+const maxWidths: Record<string, string> = {
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+}
+
+/**
+ * Maps a max-width token to a CSS width; unknown tokens fall back to `2xl`.
+ */
+export function getMaxWidth(maxWidth?: string | null): string {
+    return maxWidths[maxWidth ?? ''] ?? maxWidths['2xl']
+}
+
+/**
+ * Maps a modal position to a Vuetify dialog location.
+ */
+export function getDialogLocation(position?: string | null): ModalPosition {
+    return position === 'top' || position === 'bottom' ? position : 'center'
+}
+
+resetConfig()

package/src/helpers.ts

@@ -0,0 +1,18 @@
+import { generateId as generateVanillaId } from '@inertiaui/vanilla'
+
+export { except, kebabCase, only, rejectNullValues, sameUrlPath } from '@inertiaui/vanilla'
+
+export function parseResponseData(data: unknown): unknown {
+    return typeof data === 'string' ? JSON.parse(data) : data
+}
+
+let generateIdUsingCallback: (() => string) | null = null
+
+/** Overrides id generation, e.g. to make request headers predictable in tests. */
+export function generateIdUsing(callback: (() => string) | null): void {
+    generateIdUsingCallback = callback
+}
+
+export function generateId(prefix = 'inertiaui_modal_'): string {
+    return generateIdUsingCallback?.() ?? generateVanillaId(prefix)
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export * as dialogUtils from '@inertiaui/vanilla'
+export type { CleanupFunction, EscapeKeyOptions, FocusTrapOptions } from '@inertiaui/vanilla'
+
+export { renderApp, withInertiaModal } from './app'
+export { getConfig, getDialogLocation, getMaxWidth, putConfig, resetConfig } from './config'
+export { default as Deferred } from './Deferred.vue'
+export { default as HeadlessModal } from './HeadlessModal.vue'
+export { default as Modal } from './Modal.vue'
+export { default as ModalBtn } from './ModalBtn.vue'
+export { default as ModalLink } from './ModalLink.vue'
+export { default as ModalRoot } from './ModalRoot.vue'
+export { initFromPageProps, ModalInstance, modalPropNames, prefetch, useModalStack, visitModal, type ModalStack } from './modalStack'
+export type * from './types'
+export { default as useModal } from './useModal'
+export { default as WhenVisible } from './WhenVisible.vue'

package/src/keys.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue'
+
+export const requestCloseKey: InjectionKey<() => Promise<void>> = Symbol('inertia-modal-request-close')