Highlighting filter trigger when filter is applied. Using binary number as query boolean.

assets/components/actors/actors.vue

@@ -62,7 +62,10 @@
 			<ul class="nolist">
 				<li>
 					<Tooltip class="filter boobs">
-						<span class="filter-trigger"><Icon icon="boobs" />Boobs</span>
+						<span
+							class="filter-trigger"
+							:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
+						><Icon icon="boobs" />Boobs</span>
 
 						<template v-slot:tooltip>
 							<div class="filter-section boobsize">
@@ -117,7 +120,7 @@
 									><Icon icon="leaf" /></span>
 
 									<input
-										v-model="naturalBoobs"
+										v-model.number="naturalBoobs"
 										class="toggle"
 										type="range"
 										min="0"
@@ -137,7 +140,10 @@
 
 				<li>
 					<Tooltip class="filter boobs">
-						<span class="filter-trigger"><Icon icon="rulers" />Physique</span>
+						<span
+							class="filter-trigger"
+							:class="{ enabled: heightRequired || weightRequired }"
+						><Icon icon="rulers" />Physique</span>
 
 						<template v-slot:tooltip>
 							<div class="filter-section">
@@ -237,7 +243,7 @@ import Checkbox from '../form/checkbox.vue';
 import Range from '../form/range.vue';
 import Pagination from '../pagination/pagination.vue';
 
-const toggleValues = [true, undefined, false];
+const toggleValues = [true, null, false];
 const boobSizes = 'ABCDEFGHZ'.split('');
 
 function updateFilters() {
@@ -245,7 +251,7 @@ function updateFilters() {
 		name: 'actors',
 		params: this.$route.params,
 		query: {
-			naturalBoobs: toggleValues[this.naturalBoobs],
+			nb: this.naturalBoobs !== 1 ? this.naturalBoobs : undefined,
 			bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
 			h: this.heightRequired ? this.height.join(',') : undefined,
 			w: this.weightRequired ? this.weight.join(',') : undefined,
@@ -314,8 +320,6 @@ export default {
 		Pagination,
 	},
 	data() {
-		const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.nb);
-
 		return {
 			actors: [],
 			pageTitle: null,
@@ -325,7 +329,7 @@ export default {
 			boobSizes,
 			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: !!this.$route.query.bs,
-			naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
+			naturalBoobs: Number(this.$route.query.nb) || 1,
 			height: this.$route.query.h?.split(',').map(Number) || [50, 220],
 			heightRequired: !!this.$route.query.h,
 			weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
@@ -481,6 +485,14 @@ export default {
 			fill: var(--shadow-strong);
 		}
 	}
+
+	&.enabled {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
 }
 
 .filter-section {

assets/components/form/range.vue

@@ -15,7 +15,7 @@
 			@click="setNearest"
 		>
 			<input
-				v-model="valueA"
+				v-model.number="valueA"
 				:min="min"
 				:max="max"
 				:data-value="valueA"
@@ -28,7 +28,7 @@
 			>
 
 			<input
-				v-model="valueB"
+				v-model.number="valueB"
 				:min="min"
 				:max="max"
 				:data-value="valueB"