148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<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>
|