traxxx-web/components/edit/augmentation.vue

<template>
	<div
		class="figure augmentation"
	>
		<div class="value-section">
			<span class="value-label">Natural boobs</span>

			<select
				v-model="augmentation.naturalBoobs"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option :value="true">Yes</option>
				<option :value="false">No</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalBoobs === false"
			class="value-section"
		>
			<span class="value-label">Implant CC</span>

			<input
				v-model="augmentation.boobsVolume"
				type="number"
				class="volume input"
				placeholder="CC"
				min="50"
				max="10000"
				:disabled="!editing.has('augmentation')"
			>
		</div>

		<div
			v-if="augmentation.naturalBoobs === false"
			class="value-section"
		>
			<span class="value-label">Implant type</span>

			<select
				v-model="augmentation.boobsImplant"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option value="saline">Saline</option>
				<option value="silicone">Silicone</option>
				<option value="gummy">Gummy</option>
				<option value="fat">Fat transfer</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalBoobs === false"
			class="value-section"
		>
			<span class="value-label">Implant placement</span>

			<select
				v-model="augmentation.boobsPlacement"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option value="over">Over muscle</option>
				<option value="under">Under muscle</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalBoobs === false"
			class="value-section"
		>
			<span class="value-label">Incision</span>

			<select
				v-model="augmentation.boobsIncision"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option value="mammary">Under breast</option>
				<option value="areolar">Areola</option>
				<option value="crescent">Crescent</option>
				<option value="lollipop">Lollipop</option>
				<option value="anchor">Anchor</option>
				<option value="axillary">Armpit</option>
				<option value="umbilical">Navel</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalBoobs === false"
			class="value-section value-divide"
		>
			<span class="value-label">Surgeon</span>

			<input
				v-model="augmentation.boobsSurgeon"
				class="volume input"
				placeholder="Surgeon"
				list="surgeons"
				:disabled="!editing.has('augmentation')"
			>

			<datalist id="surgeons">
				<option value="Dr. Revis" />
			</datalist>
		</div>

		<div class="value-section">
			<span class="value-label">Natural butt</span>

			<select
				v-model="augmentation.naturalButt"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option :value="true">Yes</option>
				<option :value="false">No</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalButt === false"
			class="value-section"
		>
			<span class="value-label">Implant CC</span>

			<input
				v-model="augmentation.buttVolume"
				type="number"
				class="volume input"
				placeholder="CC"
				min="50"
				max="10000"
				:disabled="!editing.has('augmentation')"
			>
		</div>

		<div
			v-if="augmentation.naturalButt === false"
			class="value-section"
		>
			<span class="value-label">Implant type</span>

			<select
				v-model="augmentation.buttImplant"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option value="bbl">BBL (fat transfer)</option>
				<option value="lift">Direct lift</option>
				<option value="filler">Filler (Sculptra)</option>
				<option value="mms">MMS (CoolTone)</option>
				<option value="lipo">Lipo without BBL</option>
			</select>
		</div>

		<div class="value-section">
			<span class="value-label">Natural lips</span>

			<select
				v-model="augmentation.naturalLips"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option :value="true">Yes</option>
				<option :value="false">No</option>
			</select>
		</div>

		<div
			v-if="augmentation.naturalLips === false"
			class="value-section"
		>
			<span class="value-label">Filler CC</span>

			<input
				v-model="augmentation.lipsVolume"
				type="number"
				class="volume input"
				placeholder="CC"
				min="50"
				max="10000"
				:disabled="!editing.has('augmentation')"
			>
		</div>

		<div class="value-section">
			<span class="value-label">Natural labia</span>

			<select
				v-model="augmentation.naturalLabia"
				class="input"
				:disabled="!editing.has('augmentation')"
			>
				<option :value="null" />
				<option :value="true">Yes</option>
				<option :value="false">No</option>
			</select>
		</div>
	</div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const props = defineProps({
	edits: {
		type: Object,
		default: null,
	},
	editing: {
		type: Set,
		default: null,
	},
});

const emit = defineEmits(['augmentation']);
const augmentation = reactive(props.edits.augmentation);

watch(augmentation, () => emit('augmentation', augmentation));
</script>