110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
|
<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>
|