OrionAside

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

Good to know

OrionAside and OrionModal 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 aside 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

Asides can be used in multiples ways

in the template, using refs or the prop display to hide or show an aside.
programmatically with useAside(customOptions).

AsideStyle AsideSlots AsideNested

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="_aside?.close({ flush: true })">
			Close and flush queue
		</o-button>

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

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

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

defineProps<{ title: string, uid?: number }>();
const _aside = inject<OrionAside>('_aside');

function openNew () {
	useAside({
		Nested: NestedComp,
		NestedProps: {
			title: `Queued aside`,
			uid: getUid(),
		},
	});
}
</script>

AsidePlayground

Props

displayboolean = undefined

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

Events

enter-start

enter-end

leave-start

leave-end

Slots

poster

No bindings

header

No bindings

actions

close: () => void

footer

close: function

default

close: () => void

PublicInstance

slotPoster

string

slotFooter

string

slotActions

string

slotHeader

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

_aside

publicInstance