Modal

The Modal component provides a very basic dialogue window useful for prompting the user to take some action.

Composable Components

The Modal is made up of several components that allow you to compose different types of modal windows.

Component	Description
ModalRoot	The root component element
ModalContent	The wrapper element that contains all the content of the modal
ModalHeader	The element that contains the modal header content
ModalBody	The element that contains the modal body content
ModalFooter	The element that contains the modal footer content
ModalClose	The trigger button element that closes the modal
ModalAction	The trigger button that can be used to handle a post modal closing event. Typically a submit type routine
ModalOverlay	The browser overlay. Use this is you need to prevent the user from interacting with the ui while the modal is open

Examples

const isOpen = ref(false) // toggle this value to make the modal open/close

<teleport to="body">
    <ModalRoot v-model="isOpen" @modal-root:close="handleClose" class="top-0 left-0">
        <ModalContent>
            <ModalHeader class="header">
                <h2>Modal Title</h2>
            </ModalHeader>
            <ModalBody class="!p-8">
                <p>
                    Modal body text goes here.
                </p>
            </ModalBody>
            <ModalFooter>
                <ModalClose @modal-close:click="handleClose" class="btn-secondary">Cancel</ModalClose>
                <ModalAction class="!ms-3 btn-primary" @modal-action:click="handleAction">Done</ModalAction>
            </ModalFooter>
        </ModalContent>
        <ModalOverlay />
    </ModalRoot>
</teleport>

A working example of this can be in /frontend/components/PasswordModal/PasswordModal.vue.

ModalRoot

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
modal-root:close	emits when the modal is closed

CSS Classes

Class	Description
.modal-root	the class applied to the ModalRoot element

ModalContent

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.modal-content	the class applied to the ModalContent element

ModalHeader

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.modal-header	the class applied to the ModalHeader element

ModalBody

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.modal-body	the class applied to the ModalBody element

ModalFooter

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.modal-footer	the class applied to the ModalFooter element

ModalClose

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
modal-close:click	emits when the modal close button element is clicked

CSS Classes

Class	Description
.modal-close	the class applied to the ModalClose element

ModalAction

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
modal-action:click	emits when the modal action button element is clicked

CSS Classes

Class	Description
.modal-action	the class applied to the ModalAction element