Separated some actor edit types into dedicated components.

components/edit/penis.vue

@@ -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>