Moved filter sections to their own components.

components/filters/physique.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="filter">
+		<RangeFilter
+			label="height"
+			:min="50"
+			:max="220"
+			:value="filters.height"
+			:disabled="!filters.heightRequired"
+			unit="cm"
+			@enable="(checked) => emit('update', 'heightRequired', checked, filters.heightRequired !== checked)"
+			@input="(range) => emit('update', 'height', range, false)"
+			@change="(range) => emit('update', 'height', range, true)"
+		>
+			<template #start><Icon icon="height-short" /></template>
+			<template #end><Icon icon="height" /></template>
+		</RangeFilter>
+
+		<RangeFilter
+			label="weight"
+			:min="30"
+			:max="200"
+			:value="filters.weight"
+			:disabled="!filters.weightRequired"
+			unit="kg"
+			@enable="(checked) => emit('update', 'weightRequired', checked, filters.weightRequired !== checked)"
+			@input="(range) => emit('update', 'weight', range, false)"
+			@change="(range) => emit('update', 'weight', range, true)"
+		>
+			<template #start><Icon icon="meter-slow" /></template>
+			<template #end><Icon icon="meter-fast" /></template>
+		</RangeFilter>
+	</div>
+</template>
+
+<script setup>
+import RangeFilter from '#/components/filters/range.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+</script>