traxxx/assets/components/actors/filter-range.vue

<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 v-slot:start><slot name="start" /></template>
				<template v-slot:end><slot name="end" /></template>
			</Range>
		</span>
	</div>
</template>

<script>
import Checkbox from '../form/checkbox.vue';
import Range from '../form/range.vue';

export default {
	components: {
		Checkbox,
		Range,
	},
	props: {
		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,
		},
	},
	emits: ['change', 'input', 'enable'],
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.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>