DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Separated some actor edit types into dedicated components.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-11-03 06:30:09 +01:00
parent 94ebc92789
commit 89c55cea93
19 changed files with 1096 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
components/edit/augmentation.vue Normal file
View File

@@ -0,0 +1,229 @@
<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>