traxxx-web/components/filters/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 #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>