Use v-model for inputs

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" />
@@ -216,6 +216,7 @@ export default defineComponent({
 			select_tool(toolName);
 		},
 		async viewModeChanged(toolIndex: number) {
+			console.log(toolIndex);
 			function todo(_: number) {
 				return _;
 			}
@@ -249,6 +250,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 {
@@ -258,6 +261,7 @@ export default defineComponent({
 			SeparatorDirection,
 			SeparatorType,
 			modeMenuEntries,
+			viewModeIndex: 0,
 		};
 	},
 	components: {

client/web/src/components/widgets/floating-menus/FloatingMenu.vue

@@ -2,7 +2,7 @@
 	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open" ref="floatingMenu">
 		<div class="tail" v-if="type === MenuType.Popover"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
-			<div class="floating-menu-content" ref="floatingMenuContent" :style="{ minWidth: minWidth > 0 ? `${minWidth}px` : undefined }">
+			<div class="floating-menu-content" ref="floatingMenuContent" :style="floatingMenuContentStyle">
 				<slot></slot>
 			</div>
 		</div>
@@ -350,5 +350,12 @@ export default defineComponent({
 			}
 		},
 	},
+	computed: {
+		floatingMenuContentStyle(): unknown {
+			return {
+				minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "",
+			};
+		},
+	},
 });
 </script>

client/web/src/components/widgets/floating-menus/MenuList.vue

@@ -6,7 +6,7 @@
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
 				class="row"
-				:class="{ open: isMenuEntryOpen(entry), active: entry === activeEntry }"
+				:class="{ open: isMenuEntryOpen(entry), active: entry === currentEntry }"
 				@click="handleEntryClick(entry)"
 				@mouseenter="handleEntryMouseEnter(entry)"
 				@mouseleave="handleEntryMouseLeave(entry)"
@@ -22,9 +22,8 @@
 					v-if="entry.children"
 					:direction="MenuDirection.TopRight"
 					:menuEntries="entry.children"
-					:activeEntry="activeEntry"
+					v-model:active-entry="currentEntry"
 					:minWidth="minWidth"
-					:defaultAction="defaultAction"
 					:drawIcon="drawIcon"
 					:ref="(ref) => setEntryRefs(entry, ref)"
 				/>
@@ -146,8 +145,6 @@ const MenuList = defineComponent({
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
 		minWidth: { type: Number, default: 0 },
-		defaultAction: { type: Function, required: false },
-		widthChanged: { type: Function, required: false },
 		drawIcon: { type: Boolean, default: false },
 	},
 	methods: {
@@ -157,8 +154,11 @@ const MenuList = defineComponent({
 		handleEntryClick(menuEntry: MenuListEntry) {
 			(this.$refs.floatingMenu as typeof FloatingMenu).setClosed();
 
-			if (menuEntry.action) menuEntry.action();
-			else if (this.defaultAction) this.defaultAction(menuEntry);
+			if (menuEntry.action) {
+				menuEntry.action();
+			} else {
+				this.$emit("update:activeEntry", menuEntry);
+			}
 		},
 		handleEntryMouseEnter(menuEntry: MenuListEntry) {
 			if (!menuEntry.children || !menuEntry.children.length) return;
@@ -193,9 +193,6 @@ const MenuList = defineComponent({
 			return Boolean(floatingMenu && floatingMenu.isOpen());
 		},
 		measureAndReportWidth() {
-			const { widthChanged } = this;
-			if (!widthChanged) return;
-
 			// API is experimental but supported in all browsers - https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			(document as any).fonts.ready.then(() => {
@@ -212,7 +209,7 @@ const MenuList = defineComponent({
 						// Restore open/closed state if it was forced open for measurement
 						if (!initiallyOpen) floatingMenu.setClosed();
 
-						widthChanged(width);
+						this.$emit("width-changed", width);
 					});
 				});
 			});
@@ -246,6 +243,7 @@ const MenuList = defineComponent({
 	},
 	data() {
 		return {
+			currentEntry: this.activeEntry,
 			SeparatorDirection,
 			SeparatorType,
 			MenuDirection,

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/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() {
@@ -65,6 +64,7 @@ export default defineComponent({
 		(this.$refs.radioInput as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
 			iconButton.addEventListener("click", () => {
 				this.activeIndex = index;
+				this.$emit("update:index", index);
 				this.$emit("changed", index);
 			});
 		});