traxxx-web/components/dialog/dialog.vue

124 lines
1.9 KiB
Vue
Raw Normal View History

<template>
<Teleport to="body">
<div
class="dialog-container"
@click="emit('close')"
>
<div
class="dialog"
@click.stop
>
<div class="dialog-header">
<span class="dialog-title ellipsis">{{ title }}</span>
<Icon
icon="cross2"
class="dialog-close"
@click="emit('close')"
/>
</div>
<slot />
</div>
</div>
</Teleport>
</template>
<script setup>
import { onMounted } from 'vue';
defineProps({
title: {
type: String,
default: null,
},
});
const emit = defineEmits(['open', 'close']);
onMounted(() => emit('open'));
</script>
<style>
.dialog-body {
display: flex;
flex-direction: column;
border-radius: 0 0 .25rem .25rem;
background: var(--background);
}
.dialog-heading {
color: var(--primary);
margin: 0 0 .5rem 0;
font-size: 1rem;
}
.dialog-description {
margin: 0 0 .5rem 0;
color: var(--shadow-strong-10);
font-size: .9rem;
line-height: 1.5;
}
.dialog-error {
padding: .5rem 1rem;
color: var(--text-light);
background: var(--error);
font-weight: bold;
}
</style>
<style scoped>
.dialog-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
z-index: 900;
box-sizing: border-box;
padding: 1rem;
background: var(--shadow-strong-10);
}
.dialog {
display: flex;
flex-direction: column;
border-radius: .25rem;
box-shadow: 0 0 3px var(--shadow);
overflow: hidden;
max-width: 100%;
max-height: 100%;
margin: 1rem;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: stretch;
background: var(--primary);
border-radius: .25rem .25rem 0 0;
}
.dialog-title {
padding: .5rem 1rem;
color: var(--text-light);
font-size: 1.1rem;
font-weight: bold;
}
.dialog-close {
height: auto;
padding: 0 .75rem;
fill: var(--highlight);
&:hover {
fill: var(--text-light);
cursor: pointer;
}
}
</style>