traxxx-web/components/dialog/dialog.vue

<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;
}
</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;
	background: var(--shadow-strong-10);
}

.dialog {
	border-radius: .25rem;
	box-shadow: 0 0 3px var(--shadow);
	overflow: hidden;
	max-width: 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>