OrionModal

<o-modal> crée une balise <div> dans le DOM qui apparaît depuis le haut de la fenêtre via une simple animation. Elle peut être ouverte via le système de refs ou via la prop display.

Bon à savoir

OrionModal et OrionAside ont un fonctionnement très similaire.

Popables

OrionNotif, OrionAside et OrionModal font partie de la famille des Popables.

Cela signifie que vous pouvez en ouvrir une nouvelle sans fermer l'actuelle. Si vous faites cela, la première modal sera placée en file d'attente et se ré-ouvrira automatiquement à la fermeture de la deuxième.

Ce comportement peut être adapté en fonction de vos besoins.
Plus d'informations dans la documentation des popables.

Un exemple dans la partie composant imbriqué.

Usage

Les modal peuvent être utilisées de plusieurs façons

directement dans le template, en utilisant les refs ou la prop display pour l'afficher ou le masquer.
programmatiquement avec 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 = false

optionsPartial<Orion.Modal.Options> = () => {}

Events

enter-start

No payload

enter-end

No payload

leave-start

No payload

leave-end

No payload

cancel

No payload

confirm

No payload

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 | undefined) => Promise<void>

trigger

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

animateAsync

(enter: boolean) => Promise<void>

removeProgrammatic

() => void

isLastOpenedPopable

() => boolean

_el

(() => HTMLElement | undefined) | undefined

Provide

_modal

publicInstance