<template> <div class="figure"> <div class="value-section"> <span class="value-label">Units</span> <select :value="units" class="input" :disabled="!editing.has('figure')" @change="emit('units', $event.target.value)" > <option value="us">USA</option> <option value="uk">UK</option> <option value="eu">Europe/Asia</option> <option value="jp">Japan</option> <option value="au">Australia</option> <option value="it">Italy</option> <option value="fr">France</option> </select> </div> <span class="figure-bust"> <div class="value-section"> <span class="value-label">Bust</span> <select v-model="figure.bust" class="select input" placeholder="Bust" :disabled="!editing.has('figure')" > <option :key="`figure-bust-unknown`" :value="null" /> <option v-for="bust in bustSizes[units]" :key="`figure-bust-${bust}`" :value="Array.isArray(bust) ? bust[0] : bust" >{{ Array.isArray(bust) ? bust.join('/') : bust }}</option> </select> </div> <div class="value-section"> <span class="value-label">Cup</span> <select v-model="figure.cup" class="select input" placeholder="Cup" :disabled="!editing.has('figure')" > <option :key="`figure-cup-unknown`" :value="null" /> <option v-for="cup in cupSizes[units]" :key="`figure-cup-${cup}`" :value="Array.isArray(cup) ? cup[0] : cup" >{{ Array.isArray(cup) ? cup.join('/') : cup }}</option> </select> </div> </span> <div class="value-section"> <span class="value-label">Waist</span> <span> <input v-model="figure.waist" type="number" class="input" :disabled="!editing.has('figure')" > <template v-if="['us', 'uk'].includes(units)"> inch</template> <template v-else> cm</template> </span> </div> <div class="value-section"> <span class="value-label">Hip</span> <span> <input v-model="figure.hip" type="number" class="input" :disabled="!editing.has('figure')" > <template v-if="['us', 'uk'].includes(units)"> inch</template> <template v-else> cm</template> </span> </div> </div> </template> <script setup> import { reactive, watch } from 'vue'; const props = defineProps({ edits: { type: Object, default: null, }, editing: { type: Set, default: null, }, units: { type: String, default: 'us', }, }); const emit = defineEmits(['figure', 'units']); const figure = reactive(props.edits.figure); watch(figure, () => emit('figure', figure)); const cupSizes = { us: ['AA', 'A', 'B', 'C', 'D', ['DD', 'E'], ['DDD', 'F'], 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'], // United States uk: ['AA', 'A', 'B', 'C', 'D', 'DD', 'E', 'F', 'FF', 'G', 'GG', 'H', 'HH', 'J', 'JJ', 'K', 'KK'], // United Kingdom eu: ['AA', 'A', 'B', 'C', 'D', 'E', 'F', 'G', ' H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'], // Europe jp: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q'], // Japan }; cupSizes.fr = cupSizes.eu; // France cupSizes.it = cupSizes.uk; // Italy cupSizes.au = cupSizes.uk; // Australia // bra band sizes const bustSizes = { us: [28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56], eu: [60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130], fr: [75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145], it: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], au: [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34], }; bustSizes.uk = bustSizes.us; bustSizes.jp = bustSizes.eu; </script>