traxxx-web/components/filters/boobs.vue

61 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<div class="filter">
<RangeFilter
label="bra size"
:min="0"
:max="braSizes.length - 1"
:value="filters.braSize"
:values="braSizes"
:disabled="!filters.braSizeRequired"
@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
@input="(range) => emit('update', 'braSize', range, false)"
@change="(range) => emit('update', 'braSize', range, true)"
>
<template #start><Icon icon="boobs-small" /></template>
<template #end><Icon icon="boobs-big" /></template>
</RangeFilter>
<span class="filter-label">Enhanced Boobs</span>
<span
:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
class="toggle-container noclick"
>
<span
class="toggle-label off"
@click="emit('update', 'naturalBoobs', true, true)"
><Icon icon="leaf" /></span>
<input
:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
class="toggle"
type="range"
min="0"
max="2"
@change="emit('update', 'naturalBoobs', naturalBoobsValues[$event.target.value], true)"
>
<span
class="toggle-label on"
@click="emit('update', 'naturalBoobs', false, true)"
><Icon icon="magic-wand2" /></span>
</span>
</div>
</template>
<script setup>
import RangeFilter from '#/components/filters/range.vue';
defineProps({
filters: {
type: Object,
default: null,
},
});
const emit = defineEmits(['update']);
const braSizes = 'ABCDEFGHIJKZ'.split('');
const naturalBoobsValues = [true, undefined, false];
</script>