78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
|
<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"> {{ 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>
|