Separated some actor edit types into dedicated components.
This commit is contained in:
229
components/edit/augmentation.vue
Normal file
229
components/edit/augmentation.vue
Normal 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>
|
||||
147
components/edit/figure.vue
Normal file
147
components/edit/figure.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<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>
|
||||
109
components/edit/penis.vue
Normal file
109
components/edit/penis.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div
|
||||
class="figure penis"
|
||||
>
|
||||
<div class="value-section">
|
||||
<span class="value-label">Units</span>
|
||||
|
||||
<select
|
||||
:value="units"
|
||||
class="input"
|
||||
:disabled="!editing.has('penis')"
|
||||
@change="emit('units', $event.target.value)"
|
||||
>
|
||||
<option value="imperial">Imperial</option>
|
||||
<option value="metric">Metric</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="value-section">
|
||||
<span class="value-label">Penis length</span>
|
||||
|
||||
<span v-if="units === 'metric'">
|
||||
<input
|
||||
v-model="penis.metricLength"
|
||||
type="number"
|
||||
class="volume input"
|
||||
min="1"
|
||||
max="30"
|
||||
:disabled="!editing.has('penis')"
|
||||
> cm
|
||||
</span>
|
||||
|
||||
<span v-if="units === 'imperial'">
|
||||
<input
|
||||
v-model="penis.imperialLength"
|
||||
type="number"
|
||||
class="volume input"
|
||||
min="1"
|
||||
max="30"
|
||||
:disabled="!editing.has('penis')"
|
||||
> inch
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="value-section">
|
||||
<span class="value-label">Penis girth</span>
|
||||
|
||||
<span v-if="units === 'metric'">
|
||||
<input
|
||||
v-model="penis.metricGirth"
|
||||
type="number"
|
||||
class="volume input"
|
||||
min="1"
|
||||
max="30"
|
||||
:disabled="!editing.has('penis')"
|
||||
> cm
|
||||
</span>
|
||||
|
||||
<span v-if="units === 'imperial'">
|
||||
<input
|
||||
v-model="penis.imperialGirth"
|
||||
type="number"
|
||||
class="volume input"
|
||||
min="1"
|
||||
max="30"
|
||||
:disabled="!editing.has('penis')"
|
||||
> inch
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="value-section">
|
||||
<span class="value-label">Circumcised</span>
|
||||
|
||||
<select
|
||||
v-model="penis.isCircumcised"
|
||||
class="input"
|
||||
:disabled="!editing.has('penis')"
|
||||
>
|
||||
<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,
|
||||
},
|
||||
units: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['penis', 'units']);
|
||||
const penis = reactive(props.edits.penis);
|
||||
|
||||
watch(penis, () => emit('penis', penis));
|
||||
</script>
|
||||
77
components/edit/place.vue
Normal file
77
components/edit/place.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div
|
||||
class="place"
|
||||
>
|
||||
<div class="value-section">
|
||||
<span class="value-label">Country</span>
|
||||
|
||||
<select
|
||||
v-model="place.country"
|
||||
class="select input"
|
||||
placeholder="Country"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
<option
|
||||
:key="`${item.key}-country-unknown`"
|
||||
:value="null"
|
||||
/>
|
||||
|
||||
<option
|
||||
v-for="country in sortedCountries"
|
||||
:key="`${item.key}-country-${country.alpha2}`"
|
||||
:value="country.alpha2"
|
||||
>{{ country.alias || country.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="value-section">
|
||||
<span class="value-label">Place</span>
|
||||
|
||||
<input
|
||||
v-model="place.place"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch, inject } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
edits: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
editing: {
|
||||
type: Set,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const countries = pageContext.pageProps.countries;
|
||||
|
||||
const emit = defineEmits(['place']);
|
||||
const place = reactive(props.edits[props.item.key]);
|
||||
|
||||
watch(place, () => emit('place', place));
|
||||
|
||||
const topCountries = [
|
||||
'AU',
|
||||
'BR',
|
||||
'CZ',
|
||||
'DE',
|
||||
'JP',
|
||||
'RU',
|
||||
'GB',
|
||||
'US',
|
||||
];
|
||||
|
||||
const sortedCountries = countries.toSorted((countryA, countryB) => topCountries.indexOf(countryB.alpha2) - topCountries.indexOf(countryA.alpha2));
|
||||
</script>
|
||||
@@ -8,7 +8,7 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="footer-segment footer-link nolink discord"
|
||||
><Icon icon="discord" /></a>
|
||||
><Icon icon="discord-full" /></a>
|
||||
|
||||
<a
|
||||
v-if="env.links.content"
|
||||
|
||||
Reference in New Issue
Block a user