47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<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>
|