Reinitialized commit. Update and actors overview with some filters.

components/filters/range.vue

@@ -0,0 +1,208 @@
+<template>
+	<div class="filter-section">
+		<label class="filter-label noselect">
+			<span class="label">
+				<Checkbox
+					:checked="!disabled"
+					class="checkbox"
+					@change="(checked) => $emit('enable', checked)"
+				/>{{ label }}
+			</span>
+
+			<span
+				v-if="!disabled"
+				class="label-values"
+			>{{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template></span>
+		</label>
+
+		<span class="filter-split">
+			<Range
+				:min="min"
+				:max="max"
+				:value="value"
+				:values="values"
+				:disabled="disabled"
+				:allow-enable="allowEnable"
+				@enable="emit('enable', true)"
+				@input="(range) => emit('input', range)"
+				@change="(range) => emit('change', range)"
+			>
+				<template #start><slot name="start" /></template>
+				<template #end><slot name="end" /></template>
+			</Range>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import Checkbox from '../form/checkbox.vue';
+import Range from '../form/range.vue';
+
+defineProps({
+	label: {
+		type: String,
+		default: null,
+	},
+	value: {
+		type: Array,
+		default: () => [0, 10],
+	},
+	values: {
+		type: Array,
+		default: null,
+	},
+	min: {
+		type: Number,
+		default: 0,
+	},
+	max: {
+		type: Number,
+		default: 10,
+	},
+	unit: {
+		type: String,
+		default: null,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	allowEnable: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const emit = defineEmits(['change', 'input', 'enable']);
+</script>
+
+<style scoped>
+.filter-section {
+	width: 15rem;
+	max-width: 100%;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.filter-label {
+	display: flex;
+	justify-content: space-between;
+	padding: .75rem .5rem .5rem .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	.label {
+		display: inline-flex;
+		align-items: center;
+		text-transform: capitalize;
+	}
+
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
+	.icon {
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.label-values {
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
+}
+
+.toggle-container,
+.range-container {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 0;
+
+	&.on {
+		.toggle-label.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--enabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--enabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--enabled);
+			}
+		}
+	}
+
+	&.off {
+		.toggle-label.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--disabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--disabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle-label {
+	display: inline-flex;
+	justify-content: center;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+	padding: 0 .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&.on {
+		text-align: right;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		&.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+	}
+}
+</style>