vt3e.cat
wip bsky client for the web & android
bbell.vt3e.cat
1<script setup lang="ts">
2import { useModalStore } from '@/stores/modal'
3import { storeToRefs } from 'pinia'
4
5const modalStore = useModalStore()
6const { stack } = storeToRefs(modalStore)
7</script>
8
9<template>
10 <Teleport to="body">
11 <TransitionGroup name="modal" tag="div" class="modal-stack-container">
12 <component
13 v-for="(modal, index) in stack"
14 :key="modal.id"
15 :is="modal.component"
16 v-bind="modal.props"
17 :z-index="9999 + index"
18 @close="modalStore.close"
19 />
20 </TransitionGroup>
21 </Teleport>
22</template>
23
24<style lang="scss">
25.modal-stack-container {
26 position: relative;
27 z-index: 9999;
28}
29
30.modal-enter-from,
31.modal-leave-to {
32 .backdrop {
33 opacity: 0;
34 }
35
36 .modal-content {
37 transform: scale(0.95) translateY(64px);
38 opacity: 0;
39 }
40}
41</style>