Prefix all type imports with the 'type' keyword where appropriate

frontend/src/components/widgets/WidgetLayout.vue

@@ -16,9 +16,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { isWidgetColumn, isWidgetRow, isWidgetSection, LayoutGroup, WidgetLayout } from "@/wasm-communication/messages";
+import { isWidgetColumn, isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetLayout } from "@/wasm-communication/messages";
 
 import WidgetSection from "@/components/widgets/groups/WidgetSection.vue";
 import WidgetRow from "@/components/widgets/WidgetRow.vue";

frontend/src/components/widgets/WidgetRow.vue

@@ -71,9 +71,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { WidgetColumn, WidgetRow, isWidgetColumn, isWidgetRow } from "@/wasm-communication/messages";
+import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";

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

@@ -61,9 +61,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName, IconSize } from "@/utility-functions/icons";
+import { type IconName, type IconSize } from "@/utility-functions/icons";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 

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

@@ -47,20 +47,15 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 
 export default defineComponent({
-	components: {
-		FloatingMenu,
-		IconButton,
-		LayoutRow,
-	},
 	props: {
 		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
 
@@ -79,5 +74,10 @@ export default defineComponent({
 			this.action?.();
 		},
 	},
+	components: {
+		FloatingMenu,
+		IconButton,
+		LayoutRow,
+	},
 });
 </script>

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

@@ -63,9 +63,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -70,9 +70,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { isWidgetRow, isWidgetSection, LayoutGroup, WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
+import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -106,8 +106,8 @@ const WidgetSection = defineComponent({
 	components: {
 		LayoutCol,
 		LayoutRow,
-		TextLabel,
 		Separator,
+		TextLabel,
 		WidgetRow,
 	},
 });

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

@@ -57,9 +57,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

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

@@ -68,9 +68,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { RGBA } from "@/wasm-communication/messages";
+import { type RGBA } from "@/wasm-communication/messages";
 
 import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
@@ -159,12 +159,12 @@ export default defineComponent({
 		},
 	},
 	components: {
-		TextInput,
 		ColorPicker,
-		LayoutRow,
 		FloatingMenu,
-		Separator,
+		LayoutRow,
 		OptionalInput,
+		Separator,
+		TextInput,
 	},
 });
 </script>

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

@@ -97,9 +97,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType, toRaw } from "vue";
+import { defineComponent, type PropType, toRaw } from "vue";
 
-import { MenuListEntry } from "@/wasm-communication/messages";
+import { type MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -161,8 +161,8 @@ export default defineComponent({
 	},
 	components: {
 		IconLabel,
-		MenuList,
 		LayoutRow,
+		MenuList,
 	},
 });
 </script>

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

@@ -115,7 +115,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
 

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

@@ -69,13 +69,13 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from "vue";
+import { defineComponent, nextTick, type PropType } from "vue";
 
-import { MenuListEntry } from "@/wasm-communication/messages";
+import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+import type FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import MenuList from "@/components/floating-menus/MenuList.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
+import type LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
@@ -175,8 +175,8 @@ export default defineComponent({
 		},
 	},
 	components: {
-		LayoutRow,
 		IconLabel,
+		LayoutRow,
 		MenuList,
 	},
 });

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

@@ -68,7 +68,7 @@
 import { defineComponent } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
-import { MenuBarEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
+import { type KeyRaw, type KeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

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

@@ -85,9 +85,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IncrementBehavior } from "@/wasm-communication/messages";
+import { type IncrementBehavior } from "@/wasm-communication/messages";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

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

@@ -35,9 +35,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";

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

@@ -62,9 +62,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { RadioEntries, RadioEntryData } from "@/wasm-communication/messages";
+import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -86,8 +86,8 @@ export default defineComponent({
 	},
 	components: {
 		IconLabel,
-		TextLabel,
 		LayoutRow,
+		TextLabel,
 	},
 });
 </script>

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

@@ -66,10 +66,10 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { rgbaToDecimalRgba } from "@/utility-functions/color";
-import { type RGBA, Color } from "@/wasm-communication/messages";
+import { type RGBA, type Color } from "@/wasm-communication/messages";
 
 import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
@@ -78,12 +78,6 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 
 export default defineComponent({
 	inject: ["editor"],
-	components: {
-		FloatingMenu,
-		ColorPicker,
-		LayoutRow,
-		LayoutCol,
-	},
 	props: {
 		primary: { type: Object as PropType<Color>, required: true },
 		secondary: { type: Object as PropType<Color>, required: true },
@@ -112,5 +106,11 @@ export default defineComponent({
 			this.editor.instance.updateSecondaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
 		},
 	},
+	components: {
+		ColorPicker,
+		FloatingMenu,
+		LayoutCol,
+		LayoutRow,
+	},
 });
 </script>

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

@@ -17,7 +17,7 @@
 <style lang="scss"></style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

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

@@ -21,7 +21,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

frontend/src/components/widgets/labels/IconLabel.vue

@@ -33,9 +33,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName, IconStyle, icons, iconComponents } from "@/utility-functions/icons";
+import { type IconName, type IconStyle, ICONS, ICON_COMPONENTS } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
@@ -46,7 +46,7 @@ export default defineComponent({
 	},
 	computed: {
 		iconSizeClass(): string {
-			return `size-${icons[this.icon].size}`;
+			return `size-${ICONS[this.icon].size}`;
 		},
 		iconStyleClass(): string {
 			if (!this.iconStyle || this.iconStyle === "Normal") return "";
@@ -55,7 +55,7 @@ export default defineComponent({
 	},
 	components: {
 		LayoutRow,
-		...iconComponents,
+		...ICON_COMPONENTS,
 	},
 });
 </script>

frontend/src/components/widgets/labels/Separator.vue

@@ -73,9 +73,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/wasm-communication/messages";
+import { type SeparatorDirection, type SeparatorType } from "@/wasm-communication/messages";
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/labels/TextLabel.vue

@@ -30,7 +30,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -130,11 +130,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 import { platformIsMac } from "@/utility-functions/platform";
-import { KeyRaw, KeysGroup, Key, MouseMotion } from "@/wasm-communication/messages";
+import { type KeyRaw, type KeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/metrics/CanvasRuler.vue

@@ -43,7 +43,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 const RULER_THICKNESS = 16;
 const MAJOR_MARK_THICKNESS = 16;

frontend/src/components/widgets/metrics/PersistentScrollbar.vue

@@ -107,7 +107,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export type ScrollbarDirection = "Horizontal" | "Vertical";