VfModal

Base modal shell providing backdrop, layout, and slot structure.

Import

import { VfModal, vfModalRef } from '@zyno-io/vue-foundation';

Basic Usage

<VfModal id="my-modal" close-on-mask-click scrolls close-x :class="['wide']">
    <template #header>Modal Title</template>

    <p>Modal content goes here.</p>

    <template #footer>
        <button @click="save">Save</button>
    </template>
</VfModal>

Props

Prop	Type	Default	Description
id	string	--	HTML id attribute
closeOnMaskClick	boolean	false	Close when clicking backdrop (also enables Escape key)
scrolls	boolean	false	Enable scrolling in content area
closeX	boolean	false	Show close icon in header
class	string | string[]	--	CSS classes on the overlay wrapper
onClose	() => void	--	Custom close handler (overrides default dismiss)

Slots

Slot	Description
header	Modal header content
default	Modal body content
footer	Modal footer content

Events

Event	Description
formSubmit	The modal wraps content in a <form>, so submit events bubble up

Exposed Methods

const modalRef = vfModalRef();

// Mask the modal form (disable inputs, show "Please wait...")
const unmask = modalRef.value.mask();
unmask(); // restore

// Hide/show the modal without destroying it
const unhide = modalRef.value.hide();
unhide();

Use the vfModalRef() helper to create a properly typed ref:

import { vfModalRef } from '@zyno-io/vue-foundation';

const modal = vfModalRef();
// <VfModal ref="modal" ...>

Demo

<template>
    <div>
        <button @click="showModal = true">Open Modal</button>

        <teleport to="body">
            <VfModal v-if="showModal" close-on-mask-click close-x @close="showModal = false">
                <template #header>Example Modal</template>

                <p>This is a modal with <code>close-on-mask-click</code> and <code>close-x</code> enabled.</p>
                <p>Click the backdrop, the X button, or press Escape to close it.</p>

                <template #footer>
                    <button type="button" @click="showModal = false">Cancel</button>
                    <button @click="handleSave">Save</button>
                </template>
            </VfModal>
        </teleport>
    </div>
</template>

<script lang="ts" setup>
import { VfModal, showAlert } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const showModal = ref(false);

async function handleSave() {
    showModal.value = false;
    await showAlert('Saved!');
}
</script>