Refactor frontend input components to use the v-model Vue pattern (#224)

* Use v-model for inputs

* Add opacity to LayerTree

* Fix FloatingMenu typing

client/web/src/components/widgets/inputs/DropdownInput.vue

@@ -5,15 +5,7 @@
 			<span>{{ activeEntry.label }}</span>
 			<Icon :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
-		<MenuList
-			:menuEntries="menuEntries"
-			:activeEntry="activeEntry"
-			:defaultAction="setActiveEntry"
-			:direction="MenuDirection.Bottom"
-			:widthChanged="widthChanged"
-			:drawIcon="drawIcon"
-			ref="menuList"
-		/>
+		<MenuList :menuEntries="menuEntries" v-model:active-entry="activeEntry" :direction="MenuDirection.Bottom" @width-changed="onWidthChanged" :drawIcon="drawIcon" ref="menuList" />
 	</div>
 </template>
 
@@ -101,7 +93,7 @@ export default defineComponent({
 		setActiveEntry(newActiveEntry: MenuListEntry) {
 			this.activeEntry = newActiveEntry;
 		},
-		widthChanged(newWidth: number) {
+		onWidthChanged(newWidth: number) {
 			this.minWidth = newWidth;
 		},
 	},

client/web/src/components/widgets/inputs/NumberInput.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="number-input">
-		<button class="arrow left"></button>
-		<button class="arrow right"></button>
-		<input type="text" spellcheck="false" :value="`${value}${unit}`" />
+		<button class="arrow left" @click="onIncrement(-1)"></button>
+		<button class="arrow right" @click="onIncrement(1)"></button>
+		<input type="text" spellcheck="false" :value="displayValue" />
 	</div>
 </template>
 
@@ -99,7 +99,37 @@ export default defineComponent({
 	components: {},
 	props: {
 		value: { type: Number, required: true },
-		unit: { type: String, default: "" },
+		unit: { type: String, default: "", required: false },
+		step: { type: Number, default: 1, required: false },
+		min: { type: Number, required: false },
+		max: { type: Number, required: false },
+	},
+	computed: {
+		displayValue(): string {
+			if (!this.unit) return this.value.toString();
+			return `${this.value}${this.unit}`;
+		},
+	},
+	methods: {
+		onIncrement(direction: number) {
+			const step = this.step * direction;
+			const newValue = this.value + step;
+			this.updateValue(newValue);
+		},
+
+		updateValue(newValue: number) {
+			let value = newValue;
+
+			if (Number.isFinite(this.min) && typeof this.min === "number") {
+				value = Math.max(value, this.min);
+			}
+
+			if (Number.isFinite(this.max) && typeof this.max === "number") {
+				value = Math.min(value, this.max);
+			}
+
+			this.$emit("update:value", value);
+		},
 	},
 });
 </script>

client/web/src/components/widgets/inputs/RadioInput.vue

@@ -51,12 +51,11 @@ import { defineComponent } from "vue";
 export default defineComponent({
 	components: {},
 	props: {
-		initialIndex: { type: Number, required: true },
-		setIndex: { type: Function, required: false },
+		index: { type: Number, required: true },
 	},
 	data() {
 		return {
-			activeIndex: this.initialIndex,
+			activeIndex: this.index,
 		};
 	},
 	mounted() {
@@ -64,8 +63,7 @@ export default defineComponent({
 
 		(this.$refs.radioInput as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
 			iconButton.addEventListener("click", () => {
-				this.activeIndex = index;
-				this.$emit("changed", index);
+				this.setActive(index);
 			});
 		});
 	},
@@ -78,6 +76,8 @@ export default defineComponent({
 		// This method may be called by the user of this component by setting a `ref="radioInput"` attribute and calling `(this.$refs.viewModePicker as typeof RadioInput).setActive(...)`
 		setActive(index: number) {
 			this.activeIndex = index;
+			this.$emit("update:index", index);
+			this.$emit("changed", index);
 		},
 		updateActiveIconButton() {
 			const iconButtons = (this.$refs.radioInput as Element).querySelectorAll(".icon-button");