Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script setup lang="ts">
const title = defineProp<string>('title', { required: true })
const open = defineModel<boolean>({ required: true })
</script>
<template>
<Teleport to="body">
<Transition mode="out-in">
<div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay">
<div @click.stop class="funkwhale modal">
<h2>{{ title }}</h2>
<Transition>
<div v-if="$slots.alert" class="alert-container">
<div>
<slot name="alert" />
</div>
</div>
</Transition>
<hr />
<div class="modal-content">
<slot />
</div>
<hr v-if="$slots.actions" />
<div v-if="$slots.actions" class="modal-actions">
<slot name="actions" />
</div>
</div>
</div>
</Transition>
</Teleport>
</template>
<style lang="scss">
@import './style.scss'
</style>