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

package/dist/keys.d.ts

@@ -0,0 +1,2 @@
+import type { InjectionKey } from 'vue';
+export declare const requestCloseKey: InjectionKey<() => Promise<void>>;

package/dist/modalStack.d.ts

@@ -0,0 +1,64 @@
+import { type HttpResponse, type RequestPayload } from '@inertiajs/core';
+import { type Component, type ComputedRef, type Ref } from 'vue';
+import type { HttpMethod, ModalConfig, ModalContext, ModalResponseData, PrefetchOptions, ReloadOptions, VisitOptions } from './types';
+type EventCallback = (...args: unknown[]) => void;
+type ComponentResolver = (name: string) => Promise<Component>;
+export declare function prefetch(href: string, options?: PrefetchOptions): Promise<void>;
+/** @deprecated A no-op kept for setup code written for Inertia 2. */
+export declare const initFromPageProps: (_pageProps: Record<string, unknown>) => void;
+export declare class ModalInstance {
+    id: string;
+    isOpen: boolean;
+    shouldRender: boolean;
+    listeners: Record<string, EventCallback[]>;
+    component: Component | null;
+    props: Ref<Record<string, unknown>>;
+    response: ModalResponseData;
+    config: ModalConfig;
+    onCloseCallback: (() => void) | null;
+    afterLeaveCallback: (() => void) | null;
+    index: ComputedRef<number>;
+    onTopOfStack: ComputedRef<boolean>;
+    name?: string;
+    constructor(component: Component | null, response: ModalResponseData, config?: ModalConfig | null, onClose?: (() => void) | null, afterLeave?: (() => void) | null);
+    getComponentPropKeys: () => string[];
+    getParentModal: () => ModalContext | null;
+    getChildModal: () => ModalContext | null;
+    show: () => void;
+    close: () => void;
+    setOpen: (open: boolean) => void;
+    afterLeave: () => void;
+    on: (event: string, callback: EventCallback) => void;
+    off: (event: string, callback?: EventCallback) => void;
+    emit: (event: string, ...args: unknown[]) => void;
+    registerEventListenersFromAttrs: (attrs: Record<string, unknown>) => (() => void);
+    reload: (options?: ReloadOptions) => Promise<void>;
+    updateProps: (props: Record<string, unknown>) => void;
+}
+declare function registerLocalModal(name: string, callback: (modal: ModalInstance) => void): void;
+/** Removes a modal without waiting for its leave transition. */
+export declare function discardModal(modal: ModalContext): void;
+declare function pushFromResponseData(responseData: ModalResponseData, config?: ModalConfig, onClose?: (() => void) | null, onAfterLeave?: (() => void) | null): Promise<ModalInstance>;
+declare function visit(href: string, method: HttpMethod, payload?: RequestPayload, headers?: Record<string, string>, config?: ModalConfig, onClose?: (() => void) | null, onAfterLeave?: (() => void) | null, queryStringArrayFormat?: 'brackets' | 'indices', useBrowserHistory?: boolean, onStart?: (() => void) | null, onSuccess?: ((response?: HttpResponse) => void) | null, onError?: ((...args: unknown[]) => void) | null, props?: Record<string, unknown> | null): Promise<ModalInstance>;
+/** Opens a modal for a URL, or a local modal for `#name`. */
+export declare function visitModal(url: string, options?: VisitOptions): Promise<ModalInstance>;
+declare function push(component: Component | null, response: ModalResponseData, config?: ModalConfig | null, onClose?: (() => void) | null, afterLeave?: (() => void) | null): ModalInstance;
+export declare const modalPropNames: string[];
+export interface ModalStack {
+    /** @deprecated A no-op kept for setup code written for Inertia 2. */
+    setComponentResolver: (resolver: ComponentResolver) => void;
+    getBaseUrl: () => string | null;
+    setBaseUrl: (url: string | null) => void;
+    isClosingToBaseUrl: (pageUrl: string) => boolean;
+    clearClosingToBaseUrl: () => void;
+    stack: Readonly<Ref<readonly ModalContext[]>>;
+    push: typeof push;
+    pushFromResponseData: typeof pushFromResponseData;
+    closeAll: (force?: boolean) => void;
+    reset: () => void;
+    visit: typeof visit;
+    registerLocalModal: typeof registerLocalModal;
+    removeLocalModal: (name: string) => boolean;
+}
+export declare function useModalStack(): ModalStack;
+export {};

package/dist/transitions.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A `v-dialog` transition that moves the panel in from off-screen, e.g. `translateX(100%)`.
+ * Vuetify only ships short slide transitions, so this uses the Web Animations API.
+ */
+export declare function slideTransition(hiddenTransform: string): {
+    component: import("vue").FunctionalComponent<import("vue").TransitionProps, {}, any, {}>;
+    css: boolean;
+    onEnter: (el: Element, done: () => void) => void;
+    onLeave: (el: Element, done: () => void) => void;
+};

package/dist/types.d.ts

@@ -0,0 +1,109 @@
+import type { HttpResponse, Method, RequestPayload } from '@inertiajs/core';
+import type { UnwrapNestedRefs } from 'vue';
+import type { ModalInstance } from './modalStack';
+export type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+export type ModalPosition = 'top' | 'center' | 'bottom';
+export type SlideoverPosition = 'left' | 'right' | 'bottom';
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type HttpMethod = Method;
+/**
+ * `true`/`false`, `'mobile'` for Vuetify's `display.mobile`, or fullscreen
+ * below a Vuetify breakpoint or pixel width.
+ */
+export type Fullscreen = boolean | 'mobile' | Breakpoint | number;
+/** Runs before a user-initiated close; return `false` to keep the modal open. */
+export type BeforeClose = () => boolean | void | Promise<boolean | void>;
+export interface ModalTypeConfig {
+    closeButton: boolean;
+    closeExplicitly: boolean;
+    closeOnClickOutside: boolean;
+    maxWidth: MaxWidth | (string & {});
+    paddingClasses: string | false;
+    panelClasses: string | false;
+    position: ModalPosition | SlideoverPosition;
+    fullscreen: Fullscreen;
+}
+/** The configuration of a single modal, as resolved from its props, the visit, and the defaults. */
+export type ModalConfig = Partial<ModalTypeConfig & {
+    slideover: boolean;
+}>;
+/** What `putConfig()` accepts; omitted keys get their defaults. */
+export interface GlobalModalConfig {
+    type?: 'modal' | 'slideover';
+    navigate?: boolean;
+    appElement?: string | null;
+    modal?: Partial<ModalTypeConfig>;
+    slideover?: Partial<ModalTypeConfig>;
+}
+/** The `_inertiaui_modal` payload the `inertiaui/modal` Laravel package sends. */
+export interface ModalResponseData {
+    id?: string;
+    component: string;
+    props: Record<string, unknown>;
+    url?: string;
+    version?: string;
+    meta?: {
+        deferredProps?: Record<string, string[]>;
+    };
+    baseUrl?: string;
+}
+export interface ReloadOptions {
+    only?: string[];
+    except?: string[];
+    method?: HttpMethod;
+    data?: Record<string, unknown>;
+    headers?: Record<string, string>;
+    onStart?: () => void;
+    onSuccess?: (response: HttpResponse) => void;
+    onError?: (error: unknown) => void;
+    onFinish?: () => void;
+}
+export interface VisitOptions {
+    method?: HttpMethod;
+    data?: RequestPayload;
+    headers?: Record<string, string>;
+    config?: ModalConfig;
+    onClose?: () => void;
+    onAfterLeave?: () => void;
+    queryStringArrayFormat?: 'brackets' | 'indices';
+    navigate?: boolean;
+    onStart?: () => void;
+    onSuccess?: (response?: HttpResponse) => void;
+    onError?: (...args: unknown[]) => void;
+    listeners?: Record<string, (...args: unknown[]) => void>;
+    /** Props for local modals. */
+    props?: Record<string, unknown>;
+}
+export type PrefetchOption = boolean | 'hover' | 'click' | 'mount' | Array<'hover' | 'click' | 'mount'>;
+export interface PrefetchOptions {
+    method?: HttpMethod;
+    data?: RequestPayload;
+    headers?: Record<string, string>;
+    queryStringArrayFormat?: 'brackets' | 'indices';
+    cacheFor?: number;
+    onPrefetching?: () => void;
+    onPrefetched?: () => void;
+}
+/** A modal instance as components see it, with its computed refs unwrapped. */
+export type ModalContext = UnwrapNestedRefs<ModalInstance>;
+export interface HeadlessModalSlotProps extends Record<string, unknown> {
+    id: string;
+    index: number;
+    isOpen: boolean;
+    onTopOfStack: boolean;
+    shouldRender: boolean;
+    config: ModalConfig;
+    modalContext: ModalContext;
+    afterLeave: () => void;
+    /** Closes immediately, skipping `before-close`. */
+    close: () => void;
+    emit: (event: string, ...args: unknown[]) => void;
+    getChildModal: () => ModalContext | null;
+    getParentModal: () => ModalContext | null;
+    reload: (options?: ReloadOptions) => Promise<void>;
+    setOpen: (open: boolean) => void;
+}
+export interface ModalSlotProps extends HeadlessModalSlotProps {
+    /** Closes like the close button does, so `before-close` can veto it. */
+    requestClose: () => Promise<void>;
+}

package/dist/useModal.d.ts

@@ -0,0 +1,3 @@
+import type { ModalContext } from './types';
+/** The modal the calling component is rendered in, or `null` outside a modal. */
+export default function useModal(): ModalContext | null;

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@inertia-vuetify/modal",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "3.0.0-rc.0",
+  "description": "Vuetify modals and slideovers for Inertia.js, compatible with the inertiaui/modal Laravel package",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inertia-vuetify/modal.git"
+  },
+  "main": "./dist/inertia-modal-vuetify.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/inertia-modal-vuetify.js"
+    },
+    "./src": {
+      "types": "./dist/index.d.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite serve example",
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "build:example": "vite build example",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "oxlint",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vuetify": "^4.2.0",
+    "@inertiajs/core": "^3.0.0",
+    "@inertiajs/vue3": "^3.0.0"
+  },
+  "dependencies": {
+    "@inertiaui/vanilla": "^1.5.0"
+  },
+  "devDependencies": {
+    "@inertiajs/core": "^3.9.1",
+    "@inertiajs/vue3": "^3.9.1",
+    "@mdi/font": "^7.4.47",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/browser-playwright": "^5.0.5",
+    "@vue/test-utils": "^2.5.1",
+    "oxfmt": "^0.74.0",
+    "oxlint": "^1.89.0",
+    "playwright": "^1.64.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.5",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-tsc": "^3.3.13",
+    "vuetify": "^4.3.0"
+  },
+  "keywords": [
+    "inertia",
+    "inertiajs",
+    "modal",
+    "vuetify",
+    "vue"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/src/CloseButton.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useLocale } from 'vuetify'
+import { VBtn } from 'vuetify/components/VBtn'
+import { requestCloseKey } from './keys'
+
+const requestClose = inject(requestCloseKey)
+const { t } = useLocale()
+</script>
+
+<template>
+    <VBtn class="im-close-button" icon="$close" variant="text" size="small" :aria-label="t('$vuetify.close')" @click="requestClose?.()" />
+</template>

package/src/Deferred.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
+import type { ModalContext } from './types'
+
+const props = defineProps<{ data: string | string[] }>()
+
+defineSlots<{ default?(): unknown; fallback?(): unknown }>()
+
+const modalContext = inject<Ref<ModalContext | null>>('modalContext')
+
+if (!modalContext) {
+    throw new Error('Deferred component must be used inside a Modal component')
+}
+
+const allKeysAreAvailable = computed(() => [props.data].flat().every((key) => modalContext.value?.props[key] !== undefined))
+</script>
+
+<template>
+    <slot v-if="allKeysAreAvailable" />
+    <slot v-else name="fallback" />
+</template>

package/src/HeadlessModal.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, onMounted, reactive, ref, useAttrs, watch, type PropType, type Ref } from 'vue'
+import { getConfig, getConfigByType } from './config'
+import ModalRenderer from './ModalRenderer.vue'
+import { discardModal, useModalStack } from './modalStack'
+import type { Fullscreen, HeadlessModalSlotProps, MaxWidth, ModalConfig, ModalContext, ModalPosition, SlideoverPosition } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+// Props default to null so unset ones fall back to the global config.
+const props = defineProps({
+    name: String,
+    slideover: { type: Boolean, default: null },
+    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 },
+    fullscreen: { type: [Boolean, String, Number] as PropType<Fullscreen>, default: null },
+})
+
+const emits = defineEmits<{
+    'modal-event': [event: string, ...args: unknown[]]
+    focus: []
+    blur: []
+    close: []
+    success: []
+}>()
+
+defineSlots<{ default?(props: HeadlessModalSlotProps): unknown }>()
+
+const modalStack = useModalStack()
+const modalContext: Ref<ModalContext | null> = props.name ? ref(null) : inject('modalContext', ref(null))
+
+const config = computed<ModalConfig>(() => {
+    const slideover = modalContext.value?.config?.slideover ?? props.slideover ?? getConfig('type') === 'slideover'
+
+    return {
+        slideover,
+        closeButton: props.closeButton ?? getConfigByType(slideover, 'closeButton'),
+        closeExplicitly: props.closeExplicitly ?? getConfigByType(slideover, 'closeExplicitly'),
+        closeOnClickOutside: props.closeOnClickOutside ?? getConfigByType(slideover, 'closeOnClickOutside'),
+        maxWidth: props.maxWidth ?? getConfigByType(slideover, 'maxWidth'),
+        paddingClasses: props.paddingClasses ?? getConfigByType(slideover, 'paddingClasses'),
+        panelClasses: props.panelClasses ?? getConfigByType(slideover, 'panelClasses'),
+        position: props.position ?? getConfigByType(slideover, 'position'),
+        fullscreen: props.fullscreen ?? getConfigByType(slideover, 'fullscreen'),
+        ...modalContext.value?.config,
+    }
+})
+
+const attrs = useAttrs()
+let unsubscribeEventListeners: (() => void) | undefined
+
+function registerEventListeners() {
+    unsubscribeEventListeners = modalContext.value?.registerEventListenersFromAttrs(attrs)
+}
+
+if (props.name) {
+    modalStack.registerLocalModal(props.name, (context) => {
+        const previous = modalContext.value
+
+        // Reopened before its leave transition finished: that instance would never get afterLeave().
+        if (previous?.shouldRender && previous.id !== context.id) {
+            discardModal(previous)
+        }
+
+        modalContext.value = reactive(context)
+        registerEventListeners()
+    })
+
+    onBeforeUnmount(() => modalStack.removeLocalModal(props.name!))
+}
+
+onMounted(() => {
+    if (!props.name) {
+        registerEventListeners()
+    }
+})
+
+onBeforeUnmount(() => unsubscribeEventListeners?.())
+
+function emit(event: string, ...args: unknown[]) {
+    emits('modal-event', event, ...args)
+}
+
+defineExpose({
+    emit,
+    afterLeave: () => modalContext.value?.afterLeave(),
+    close: () => modalContext.value?.close(),
+    reload: (...args: Parameters<ModalContext['reload']>) => modalContext.value?.reload(...args),
+    setOpen: (open: boolean) => modalContext.value?.setOpen(open),
+    getChildModal: () => modalContext.value?.getChildModal(),
+    getParentModal: () => modalContext.value?.getParentModal(),
+
+    get config() {
+        return modalContext.value?.config
+    },
+    get id() {
+        return modalContext.value?.id
+    },
+    get index() {
+        return modalContext.value?.index
+    },
+    get isOpen() {
+        return modalContext.value?.isOpen
+    },
+    get modalContext() {
+        return modalContext.value
+    },
+    get onTopOfStack() {
+        return modalContext.value?.onTopOfStack
+    },
+    get shouldRender() {
+        return modalContext.value?.shouldRender
+    },
+})
+
+watch(
+    () => modalContext.value?.onTopOfStack,
+    (onTopOfStack, previousOnTopOfStack) => {
+        if (onTopOfStack && !previousOnTopOfStack) {
+            emits('focus')
+        } else if (!onTopOfStack && previousOnTopOfStack) {
+            emits('blur')
+        }
+    },
+)
+
+watch(
+    () => modalContext.value?.isOpen,
+    (isOpen, previousIsOpen) => {
+        if (isOpen) {
+            emits('success')
+        } else if (previousIsOpen === true) {
+            // Not when first mounting closed.
+            emits('close')
+        }
+    },
+    { immediate: true },
+)
+
+// The next modal in the stack renders inside this one.
+const nextIndex = computed(() => {
+    const context = modalContext.value
+
+    return context ? modalStack.stack.value.find((modal) => modal.shouldRender && modal.index > context.index)?.index : undefined
+})
+</script>
+
+<template>
+    <slot
+        v-if="modalContext?.shouldRender"
+        v-bind="modalContext.props"
+        :id="modalContext.id"
+        :after-leave="modalContext.afterLeave"
+        :close="modalContext.close"
+        :config
+        :emit
+        :get-child-modal="modalContext.getChildModal"
+        :get-parent-modal="modalContext.getParentModal"
+        :index="modalContext.index"
+        :is-open="modalContext.isOpen"
+        :modal-context
+        :on-top-of-stack="modalContext.onTopOfStack"
+        :reload="modalContext.reload"
+        :set-open="modalContext.setOpen"
+        :should-render="modalContext.shouldRender"
+    />
+
+    <ModalRenderer v-if="nextIndex" :index="nextIndex" />
+</template>

package/src/Modal.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, useTemplateRef, type PropType } from 'vue'
+import HeadlessModal from './HeadlessModal.vue'
+import ModalContent from './ModalContent.vue'
+import type { BeforeClose, Fullscreen, MaxWidth, ModalPosition, ModalSlotProps, ReloadOptions, SlideoverPosition } from './types'
+
+// Upstream props default to null so unset ones fall back to the global config.
+const props = defineProps({
+    name: String,
+    slideover: { type: Boolean, default: null },
+    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 },
+    title: String,
+    fullscreen: { type: [Boolean, String, Number] as PropType<Fullscreen>, default: null },
+    beforeClose: Function as PropType<BeforeClose>,
+    dialogProps: Object as PropType<Record<string, unknown>>,
+    cardProps: Object as PropType<Record<string, unknown>>,
+})
+
+const emit = defineEmits<{
+    'after-leave': []
+    blur: []
+    close: []
+    focus: []
+    success: []
+}>()
+
+defineSlots<{
+    default?(props: ModalSlotProps): unknown
+    title?(props: ModalSlotProps): unknown
+    actions?(props: ModalSlotProps): unknown
+}>()
+
+const headlessProps = computed(() => ({
+    name: props.name,
+    slideover: props.slideover,
+    closeButton: props.closeButton,
+    closeExplicitly: props.closeExplicitly,
+    closeOnClickOutside: props.closeOnClickOutside,
+    maxWidth: props.maxWidth,
+    paddingClasses: props.paddingClasses,
+    panelClasses: props.panelClasses,
+    position: props.position,
+    fullscreen: props.fullscreen,
+}))
+
+const modal = useTemplateRef<InstanceType<typeof HeadlessModal>>('modal')
+
+defineExpose({
+    afterLeave: () => modal.value?.afterLeave(),
+    close: () => modal.value?.close(),
+    emit: (event: string, ...args: unknown[]) => modal.value?.emit(event, ...args),
+    getChildModal: () => modal.value?.getChildModal(),
+    getParentModal: () => modal.value?.getParentModal(),
+    reload: (options?: ReloadOptions) => modal.value?.reload(options),
+    setOpen: (open: boolean) => modal.value?.setOpen(open),
+
+    get config() {
+        return modal.value?.config
+    },
+    get id() {
+        return modal.value?.id
+    },
+    get index() {
+        return modal.value?.index
+    },
+    get isOpen() {
+        return modal.value?.isOpen
+    },
+    get modalContext() {
+        return modal.value?.modalContext
+    },
+    get onTopOfStack() {
+        return modal.value?.onTopOfStack
+    },
+    get shouldRender() {
+        return modal.value?.shouldRender
+    },
+})
+</script>
+
+<template>
+    <HeadlessModal
+        ref="modal"
+        v-bind="headlessProps"
+        v-slot="slotProps"
+        @success="emit('success')"
+        @close="emit('close')"
+        @focus="emit('focus')"
+        @blur="emit('blur')"
+    >
+        <ModalContent
+            :key="slotProps.id"
+            :modal-context="slotProps.modalContext"
+            :config="slotProps.config"
+            :title
+            :before-close
+            :dialog-props
+            :card-props
+            @after-leave="emit('after-leave')"
+        >
+            <template #default="{ requestClose }">
+                <slot v-bind="{ ...slotProps, requestClose }" />
+            </template>
+
+            <template v-if="$slots.title" #title="{ requestClose }">
+                <slot name="title" v-bind="{ ...slotProps, requestClose }" />
+            </template>
+
+            <template v-if="$slots.actions" #actions="{ requestClose }">
+                <slot name="actions" v-bind="{ ...slotProps, requestClose }" />
+            </template>
+        </ModalContent>
+    </HeadlessModal>
+</template>

package/src/ModalBtn.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VBtn } from 'vuetify/components/VBtn'
+import ModalLink from './ModalLink.vue'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{ href: string }>()
+
+defineSlots<{ default?(props: { loading: boolean }): unknown }>()
+
+const loading = ref(false)
+</script>
+
+<template>
+    <ModalLink
+        v-slot="slotProps"
+        v-bind="$attrs"
+        :as="VBtn"
+        :href
+        :loading
+        @start="loading = true"
+        @success="loading = false"
+        @error="loading = false"
+    >
+        <slot v-bind="slotProps" />
+    </ModalLink>
+</template>