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;
 		},
 	},