Major frontend code cleanup (#452)

Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed

frontend/src/utilities/widgets.ts

@@ -0,0 +1,88 @@
+export type Widgets = TextButtonWidget | IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
+export type WidgetRow = Widgets[];
+export type WidgetLayout = WidgetRow[];
+
+// Text Button
+export interface TextButtonWidget {
+	kind: "TextButton";
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: TextButtonProps;
+}
+
+export interface TextButtonProps {
+	// `action` is used via `IconButtonWidget.callback`
+	label: string;
+	emphasized?: boolean;
+	disabled?: boolean;
+	minWidth?: number;
+	gapAfter?: boolean;
+}
+
+// Icon Button
+export interface IconButtonWidget {
+	kind: "IconButton";
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: IconButtonProps;
+}
+
+export interface IconButtonProps {
+	// `action` is used via `IconButtonWidget.callback`
+	icon: string;
+	size: number;
+	gapAfter?: boolean;
+}
+
+// Popover Button
+export interface PopoverButtonWidget {
+	kind: "PopoverButton";
+	tooltip?: string;
+	callback?: () => void;
+	// popover: WidgetLayout;
+	popover: { title: string; text: string }; // TODO: Replace this with a `WidgetLayout` like above for arbitrary layouts
+	props: PopoverButtonProps;
+}
+
+export interface PopoverButtonProps {
+	// `action` is used via `PopoverButtonWidget.callback`
+	icon?: string;
+}
+
+// Number Input
+export interface NumberInputWidget {
+	kind: "NumberInput";
+	tooltip?: string;
+	optionPath: string[];
+	props: Omit<NumberInputProps, "value">;
+}
+
+export interface NumberInputProps {
+	value: number;
+	min?: number;
+	max?: number;
+	incrementBehavior?: boolean;
+	incrementFactor?: number;
+	isInteger?: boolean;
+	unit?: string;
+	unitIsHiddenWhenEditing?: boolean;
+	displayDecimalPlaces?: number;
+	label?: string;
+	disabled?: boolean;
+}
+
+// Separator
+export type SeparatorDirection = "Horizontal" | "Vertical";
+export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";
+
+export interface SeparatorWidget {
+	kind: "Separator";
+	props: SeparatorProps;
+}
+
+export interface SeparatorProps {
+	direction?: SeparatorDirection;
+	type?: SeparatorType;
+}