traxxx-web/components/filters/physique.vue

47 lines
1.2 KiB
Vue
Raw Normal View History

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