traxxx-web/components/edit/figure.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)">&nbsp;inch</template>
				<template v-else>&nbsp;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)">&nbsp;inch</template>
				<template v-else>&nbsp;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>