Added tag filter dialog.

assets/components/dialog/dialog.vue

@@ -0,0 +1,106 @@
+<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);
+	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;
+}
+</style>