Fix all remaining Vue/TS errors flagged in Volar

frontend/src/components/panels/Document.vue

@@ -10,7 +10,7 @@
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
+				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus: boolean) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
 					<p>The contents of this popover menu are coming soon</p>
@@ -42,7 +42,7 @@
 
 				<Separator :type="'Section'" />
 
-				<NumberInput @update:value="(newRotation) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
+				<NumberInput @update:value="(newRotation: number) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
 
 				<Separator :type="'Section'" />
 
@@ -54,7 +54,7 @@
 
 				<NumberInput
 					v-model:value="documentZoom"
-					@update:value="(newZoom) => setCanvasZoom(newZoom)"
+					@update:value="(newZoom: number) => setCanvasZoom(newZoom)"
 					:min="0.000001"
 					:max="1000000"
 					:incrementBehavior="'Callback'"
@@ -133,9 +133,9 @@
 						<PersistentScrollbar
 							:direction="'Vertical'"
 							:handlePosition="scrollbarPos.y"
-							@update:handlePosition="(newValue) => translateCanvasY(newValue)"
+							@update:handlePosition="(newValue: number) => translateCanvasY(newValue)"
 							v-model:handleLength="scrollbarSize.y"
-							@pressTrack="(delta) => pageY(delta)"
+							@pressTrack="(delta: number) => pageY(delta)"
 							:class="'right-scrollbar'"
 						/>
 					</LayoutCol>
@@ -144,9 +144,9 @@
 					<PersistentScrollbar
 						:direction="'Horizontal'"
 						:handlePosition="scrollbarPos.x"
-						@update:handlePosition="(newValue) => translateCanvasX(newValue)"
+						@update:handlePosition="(newValue: number) => translateCanvasX(newValue)"
 						v-model:handleLength="scrollbarSize.x"
-						@pressTrack="(delta) => pageX(delta)"
+						@pressTrack="(delta: number) => pageX(delta)"
 						:class="'bottom-scrollbar'"
 					/>
 				</LayoutRow>

frontend/src/components/panels/LayerTree.vue

@@ -3,7 +3,7 @@
 		<LayoutRow :class="'options-bar'">
 			<DropdownInput
 				v-model:selectedIndex="blendModeSelectedIndex"
-				@update:selectedIndex="(newSelectedIndex) => setLayerBlendMode(newSelectedIndex)"
+				@update:selectedIndex="(newSelectedIndex: number) => setLayerBlendMode(newSelectedIndex)"
 				:menuEntries="blendModeEntries"
 				:disabled="blendModeDropdownDisabled"
 			/>
@@ -12,7 +12,7 @@
 
 			<NumberInput
 				v-model:value="opacity"
-				@update:value="(newOpacity) => setLayerOpacity(newOpacity)"
+				@update:value="(newOpacity: number) => setLayerOpacity(newOpacity)"
 				:min="0"
 				:max="100"
 				:unit="'%'"
@@ -29,7 +29,7 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
-			<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop($event)">
+			<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop()">
 				<div class="layer-row" v-for="({ entry: layer }, index) in layers" :key="String(layer.path.slice(-1))">
 					<div class="visibility">
 						<IconButton
@@ -51,7 +51,7 @@
 						:data-index="index"
 						draggable="true"
 						@dragstart="dragStart($event, layer)"
-						:title="layer.path"
+						:title="String(layer.path)"
 					>
 						<div class="layer-type-icon">
 							<IconLabel v-if="layer.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />

frontend/src/components/widgets/buttons/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
+	<button class="icon-button" :class="`size-${size}`" @click="(e: MouseEvent) => action(e)">
 		<IconLabel :icon="icon" />
 	</button>
 </template>

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -49,11 +49,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { PopoverButtonIcon } from "@/utilities/widgets";
+
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
-export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
-
 export default defineComponent({
 	components: {
 		FloatingMenu,

frontend/src/components/widgets/buttons/TextButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
+	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e: MouseEvent) => action(e)">
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>

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

@@ -1,12 +1,12 @@
 <template>
 	<div class="color-picker">
-		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e) => onPointerDown(e)">
+		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="saturationCursor" class="selection-circle"></div>
 		</div>
-		<div class="hue-picker" ref="huePicker" @pointerdown="(e) => onPointerDown(e)">
+		<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="hueCursor" class="selection-pincers"></div>
 		</div>
-		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e) => onPointerDown(e)">
+		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="opacityCursor" class="selection-pincers"></div>
 		</div>
 	</div>

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

@@ -29,7 +29,7 @@
 					:direction="'TopRight'"
 					:menuEntries="entry.children"
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollable }"
-					:ref="(ref) => setEntryRefs(entry, ref)"
+					:ref="(ref: any) => setEntryRefs(entry, ref)"
 				/>
 			</div>
 		</template>

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -98,7 +98,7 @@ export default defineComponent({
 		},
 	},
 	props: {
-		checked: { type: Boolean as PropType<boolean>, required: true },
+		checked: { type: Boolean as PropType<boolean>, default: false },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
 	},

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -7,7 +7,7 @@
 		</div>
 		<MenuList
 			v-model:activeEntry="activeEntry"
-			@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
+			@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
 			@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
 			:menuEntries="menuEntries"
 			:direction="'Bottom'"
@@ -93,6 +93,11 @@ import { defineComponent, PropType } from "vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
+// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
+declare global {
+	const MENU_LIST_ENTRY: MenuListEntry;
+}
+
 export default defineComponent({
 	props: {
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -10,7 +10,7 @@
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
+			<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref: any) => setEntryRefs(entry, ref)" />
 		</div>
 	</div>
 </template>

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -152,8 +152,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
+import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
-export type IncrementDirection = "Decrease" | "Increase";
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -3,13 +3,13 @@
 		<div class="secondary swatch">
 			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
-				<ColorPicker @update:color="(color) => secondaryColorChanged(color)" :color="secondaryColor" />
+				<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
 			</FloatingMenu>
 		</div>
 		<div class="primary swatch">
 			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
-				<ColorPicker @update:color="(color) => primaryColorChanged(color)" :color="primaryColor" />
+				<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
 			</FloatingMenu>
 		</div>
 	</div>
@@ -68,12 +68,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
+import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
 import { rgbaToDecimalRgba } from "@/utilities/color";
 
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
+// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
+declare global {
+	type RGBA_ = RGBA;
+}
+
 export default defineComponent({
 	inject: ["editor"],
 	components: {

frontend/src/components/widgets/options/ToolOptions.vue

@@ -9,7 +9,7 @@
 			</PopoverButton>
 			<NumberInput
 				v-if="option.kind === 'NumberInput'"
-				@update:value="(value) => updateToolOptions(option.optionPath, value)"
+				@update:value="(value: number) => updateToolOptions(option.optionPath, value)"
 				:title="option.tooltip"
 				:value="getToolOption(option.optionPath)"
 				v-bind="option.props"

frontend/src/utilities/widgets.ts

@@ -1,3 +1,5 @@
+import { IconName, IconSize } from "@/utilities/icons";
+
 export type Widgets = TextButtonWidget | IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
 export type WidgetRow = Widgets[];
 export type WidgetLayout = WidgetRow[];
@@ -31,8 +33,8 @@ export interface IconButtonWidget {
 
 export interface IconButtonProps {
 	// `action` is used via `IconButtonWidget.callback`
-	icon: string;
+	icon: IconName;
-	size: number;
+	size: IconSize;
 	gapAfter?: boolean;
 }
 
@@ -48,9 +50,12 @@ export interface PopoverButtonWidget {
 
 export interface PopoverButtonProps {
 	// `action` is used via `PopoverButtonWidget.callback`
-	icon?: string;
+	icon?: PopoverButtonIcon;
 }
 
+type Extends<T, U extends T> = U;
+export type PopoverButtonIcon = Extends<IconName, "DropdownArrow" | "VerticalEllipsis">;
+
 // Number Input
 export interface NumberInputWidget {
 	kind: "NumberInput";
@@ -63,7 +68,7 @@ export interface NumberInputProps {
 	value: number;
 	min?: number;
 	max?: number;
-	incrementBehavior?: boolean;
+	incrementBehavior?: IncrementBehavior;
 	incrementFactor?: number;
 	isInteger?: boolean;
 	unit?: string;
@@ -73,6 +78,9 @@ export interface NumberInputProps {
 	disabled?: boolean;
 }
 
+export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
+export type IncrementDirection = "Decrease" | "Increase";
+
 // Separator
 export type SeparatorDirection = "Horizontal" | "Vertical";
 export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";