Add the TextInput widget (#518)

* Separate out the number input from a generic field input

* Add TextInput widget

Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>

frontend/src/components/widgets/floating-menus/ColorPicker.vue

@@ -131,6 +131,7 @@ type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
 // TODO: Such as removing the `picker*` data variables and reducing the number of functions which call each other in weird, non-obvious ways.
 
 export default defineComponent({
+	emits: ["update:color"],
 	props: {
 		color: { type: Object as PropType<RGBA>, required: true },
 	},

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -7,9 +7,9 @@
 				:key="entryIndex"
 				class="row"
 				:class="{ open: isMenuEntryOpen(entry), active: entry === activeEntry }"
-				@click="handleEntryClick(entry)"
-				@pointerenter="handleEntryPointerEnter(entry)"
-				@pointerleave="handleEntryPointerLeave(entry)"
+				@click="() => handleEntryClick(entry)"
+				@pointerenter="() => handleEntryPointerEnter(entry)"
+				@pointerleave="() => handleEntryPointerLeave(entry)"
 				:data-hover-menu-spawner-extend="entry.children && []"
 			>
 				<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" class="entry-checkbox" />
@@ -160,6 +160,10 @@ const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, bu
 const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
 
 const MenuList = defineComponent({
+	emits: {
+		"update:activeEntry": null,
+		widthChanged: (width: number) => typeof width === "number",
+	},
 	inject: ["fullscreen"],
 	props: {
 		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },