75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
|
<div class="filter">
|
|
<RangeFilter
|
|
label="bra size"
|
|
:min="0"
|
|
:max="cups.length - 1"
|
|
:value="filters.braSize"
|
|
:values="cups"
|
|
: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 { computed } from 'vue';
|
|
|
|
import RangeFilter from '#/components/filters/range.vue';
|
|
|
|
const props = defineProps({
|
|
filters: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
// cup range should probably not be used, because it becomes impossible to filter for larger values than the current results
|
|
cupRange: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
function cupRangeToCups(cupA, cupB) {
|
|
const smallestCode = cupA.charCodeAt(0);
|
|
const biggestCode = cupB.charCodeAt(0);
|
|
|
|
return Array.from({ length: biggestCode - smallestCode + 1 }, (value, index) => String.fromCharCode(smallestCode + index));
|
|
}
|
|
|
|
const emit = defineEmits(['update']);
|
|
|
|
const naturalBoobsValues = [true, undefined, false];
|
|
const cups = computed(() => (props.cupRange ? cupRangeToCups(props.cupRange[0], props.cupRange[1]) : 'ABCDEFGHIJKZ'.split(''))); // add Z to allow for 'bigger than K' without wasting fidelity
|
|
</script>
|