OrionModal

<o-modal> creates a <div> tag in the DOM that appear from the top of the window in a simple animation. It can be opened using refs or with the prop display.

Good to know

OrionModal and OrionAside work in a very similar way.

Popables

OrionNotif, OrionAside and OrionModal are parts of the Popables family.

It means that you can open a new modal without closing the actual. If you do so, the first one will be kept in queue and reappear when you close the second one.

This behaviour can be customized to fit your needs.
More informations on this mecanism on the Popables documentation.

Example in the nested component documentation part.

Usage

Modals can be used in multiples ways

in the template, using refs or the prop display to hide or show a modal.
programmatically with useModal(customOptions).

ModalStyle ModalOptions ModalPromptConfirm ModalNested

Nested component source code

<template>
	<o-section :title="`${title} ${uid ?? ''}`">
		<p>
			Etiam porta sem malesuada magna mollis euismod.
			Etiam porta sem malesuada magna mollis euismod.
			Aenean lacinia bibendum nulla sed consectetur.
			Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
			Cras justo odio, dapibus ac facilisis in, egestas eget quam.
		</p>

		<p>
			Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
			Eget lacinia odio sem nec elit.
			Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Vestibulum id ligula porta felis euismod semper.
			Nulla vitae elit libero, a pharetra augue.
		</p>
	</o-section>

	<o-section align="right">
		<o-button
			v-if="uid"
			color="warning"
			outline
			@click="_modal?.close({ flush: true })">
			Close and flush queue
		</o-button>

		<o-button
			color="danger"
			outline
			@click="_modal?.close()">
			Close modal
		</o-button>

		<o-button
			color="info"
			@click="openNewModal()">
			Open a new modal
		</o-button>
	</o-section>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { useModal, getUid } from 'lib';
import NestedComp from './NestedComp.vue';

defineProps<{ title: string, uid?: number }>();

const _modal = inject<OrionModal>('_modal');

function openNewModal () {
	useModal({
		Nested: NestedComp,
		NestedProps: {
			title: `Queued modal`,
			uid: getUid(),
		},
	});
}
</script>

ModalPlayground

Props

displayboolean = undefined

optionsPartial<Orion.Popable.Options> & Partial<Orion.Modal.Options> = () => ({}) as Partial<Orion.Popable.Options>

Events

enter-start

enter-end

leave-start

leave-end

cancel

confirm

Slots

footer

close: () => void

default

close: () => void

PublicInstance

slotFooter

string

_loader

() => OrionLoader

uid

number

bus

Bus

state

{
	isClosing: boolean;
	isOpening: boolean;
	isMounted: boolean;
	visible: boolean;
}

options

Orion.Popable.Options

open

(keepInQueue?: boolean) => Promise<void>

(options?: Orion.Popable.CloseOptions) => Promise<void>

trigger

(eventName: string, params?: any) => void

animateAsync

(enter: boolean) => Promise<void>

removeProgrammatic

() => void

isLastOpenedPopable

() => boolean

_el

() => HTMLElement | undefined

Provide

_modal

publicInstance