Added tag filter dialog.

assets/components/form/checkbox.vue

@@ -0,0 +1,99 @@
+<template>
+	<label class="check-container noselect">
+		<span class="check-label">{{ label }}</span>
+
+		<input
+			v-show="false"
+			:id="`checkbox-${uid}`"
+			:checked="checked"
+			type="checkbox"
+			class="check-checkbox"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`checkbox-${uid}`"
+			class="check"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['change'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.check-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.check {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	flex-shrink: 0;
+	position: relative;
+	background-color: var(--shadow-hint);
+    cursor: pointer;
+    transition: background .15s ease;
+
+    &::after {
+        content: '';
+        width: .5rem;
+        height: .3rem;
+        border: solid 2px var(--text-light);
+        border-top: none;
+        border-right: none;
+        margin: -.2rem 0 0 0;
+        transform: rotateZ(-45deg) scaleX(0);
+        transition: transform .15s ease;
+    }
+}
+
+.check-cross .check::before {
+	content: '';
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: url('/img/icons/cross3.svg') no-repeat center/80%;
+	opacity: .15;
+	transition: transform .1s ease;
+}
+
+.check-checkbox:checked + .check {
+    background: var(--primary);
+
+    &::after {
+        transform: rotateZ(-45deg) scaleX(1);
+    }
+
+	&::before {
+        transform: scaleX(0);
+	}
+}
+
+.check-label {
+	overflow: hidden;
+	text-transform: capitalize;
+	text-overflow: ellipsis;
+	margin: 0 .5rem 0 0;
+}
+</style>