traxxx-web/components/filters/range.vue

81 lines
1.4 KiB
Vue
Raw Normal View History

<template>
<div class="filter-section">
<label class="filter-label noselect">
<span class="label">
<Checkbox
:checked="!disabled"
class="checkbox"
@change="(checked) => $emit('enable', checked)"
/>{{ label }}
</span>
<span
v-if="!disabled"
class="label-values"
>{{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template></span>
</label>
<span class="filter-split">
<Range
:min="min"
:max="max"
:value="value"
:values="values"
:disabled="disabled"
:allow-enable="allowEnable"
@enable="emit('enable', true)"
@input="(range) => emit('input', range)"
@change="(range) => emit('change', range)"
>
<template #start><slot name="start" /></template>
<template #end><slot name="end" /></template>
</Range>
</span>
</div>
</template>
<script setup>
import Checkbox from '../form/checkbox.vue';
import Range from '../form/range.vue';
defineProps({
label: {
type: String,
default: null,
},
value: {
type: Array,
default: () => [0, 10],
},
values: {
type: Array,
default: null,
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 10,
},
unit: {
type: String,
default: null,
},
disabled: {
type: Boolean,
default: false,
},
allowEnable: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['change', 'input', 'enable']);
</script>
<style scoped>
</style>