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