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/panels/Document.vue

@@ -52,7 +52,7 @@
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<RadioInput :initialIndex="0" @changed="viewModeChanged">
+				<RadioInput v-model:index="viewModeIndex">
 					<IconButton :icon="'ViewModeNormal'" :size="24" title="View Mode: Normal" />
 					<IconButton :icon="'ViewModeOutline'" :size="24" title="View Mode: Outline" />
 					<IconButton :icon="'ViewModePixels'" :size="24" title="View Mode: Pixels" />
@@ -236,6 +236,7 @@ export default defineComponent({
 			select_tool(toolName);
 		},
 		async viewModeChanged(toolIndex: number) {
+			console.log(toolIndex);
 			function todo(_: number) {
 				return _;
 			}
@@ -269,6 +270,8 @@ export default defineComponent({
 
 		window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
 		window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
+
+		this.$watch("viewModeIndex", this.viewModeChanged);
 	},
 	data() {
 		return {
@@ -278,6 +281,7 @@ export default defineComponent({
 			SeparatorDirection,
 			SeparatorType,
 			modeMenuEntries,
+			viewModeIndex: 0,
 		};
 	},
 	components: {