traxxx/assets/components/dialog/dialog.vue

<template>
	<teleport to="body">
		<div
			class="container"
			@click="$emit('close')"
		>
			<div
				class="dialog"
				@click.stop
			>
				<div
					v-if="title || $slots.header"
					class="header"
				>
					<slot name="header">
						<h2 class="header-title">{{ title }}</h2>
					</slot>

					<Icon
						icon="cross2"
						class="close"
						@click="$emit('close')"
					/>
				</div>

				<div class="body">
					<slot />
				</div>
			</div>
		</div>
	</teleport>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: null,
		},
	},
	emits: ['close'],
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem;
	background: var(--darken-strong);
	z-index: 10;
}

.dialog {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	background: var(--background);
	box-shadow: 0 0 3px var(--darken-weak);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--primary);
	color: var(--text-light);
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: capitalize;
}

.header-title {
	padding: .5rem .5rem .5rem 1rem;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.25rem;
}

.close {
	height: 100%;
	padding: 0 1rem;
	fill: var(--lighten);

	&:hover {
		fill: var(--lighten-strong);
		cursor: pointer;
	}
}

.body {
	padding: 1rem;
	flex-grow: 1;
	overflow: auto;
}

::v-deep(.dialog-actions) {
	display: flex;
	padding: .5rem 0;

	&.right {
		justify-content: flex-end;
	}
}
</style>