Move JS script to the top of each Vue file

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

@@ -1,3 +1,25 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+
+export default defineComponent({
+	props: {
+		labels: { type: Array as PropType<string[]>, required: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(index: number) => void>, required: true },
+	},
+	components: {
+		LayoutRow,
+		TextButton,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="breadcrumb-trail-buttons" :title="tooltip">
 		<TextButton
@@ -57,25 +79,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-
-export default defineComponent({
-	props: {
-		labels: { type: Array as PropType<string[]>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(index: number) => void>, required: true },
-	},
-	components: {
-		LayoutRow,
-		TextButton,
-	},
-});
-</script>

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

@@ -1,3 +1,26 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type IconName, type IconSize } from "@/utility-functions/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+
+export default defineComponent({
+	props: {
+		icon: { type: String as PropType<IconName>, required: true },
+		size: { type: Number as PropType<IconSize>, required: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		active: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+	},
+	components: { IconLabel },
+});
+</script>
+
 <template>
 	<button
 		class="icon-button"
@@ -78,26 +101,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type IconName, type IconSize } from "@/utility-functions/icons";
-
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-
-export default defineComponent({
-	props: {
-		icon: { type: String as PropType<IconName>, required: true },
-		size: { type: Number as PropType<IconSize>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		active: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
-	},
-	components: { IconLabel },
-});
-</script>

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

@@ -1,3 +1,21 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	props: {
+		exposed: { type: Boolean as PropType<boolean>, required: true },
+		dataType: { type: String as PropType<string>, required: true },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+	},
+	components: { LayoutRow },
+});
+</script>
+
 <template>
 	<LayoutRow class="parameter-expose-button">
 		<button :class="{ exposed }" :style="{ '--data-type-color': `var(--color-data-${dataType})` }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
@@ -39,21 +57,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-
-export default defineComponent({
-	props: {
-		exposed: { type: Boolean as PropType<boolean>, required: true },
-		dataType: { type: String as PropType<string>, required: true },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
-	},
-	components: { LayoutRow },
-});
-</script>

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

@@ -1,3 +1,41 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type IconName } from "@/utility-functions/icons";
+
+import FloatingMenu from "@/components/layout/FloatingMenu.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+
+export default defineComponent({
+	props: {
+		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		action: { type: Function as PropType<() => void>, required: false },
+	},
+	data() {
+		return {
+			open: false,
+		};
+	},
+	methods: {
+		onClick() {
+			this.open = true;
+
+			this.action?.();
+		},
+	},
+	components: {
+		FloatingMenu,
+		IconButton,
+		LayoutRow,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="popover-button">
 		<IconButton :class="{ open }" :disabled="disabled" :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
@@ -50,41 +88,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type IconName } from "@/utility-functions/icons";
-
-import FloatingMenu from "@/components/layout/FloatingMenu.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-
-export default defineComponent({
-	props: {
-		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-
-		// Callbacks
-		action: { type: Function as PropType<() => void>, required: false },
-	},
-	data() {
-		return {
-			open: false,
-		};
-	},
-	methods: {
-		onClick() {
-			this.open = true;
-
-			this.action?.();
-		},
-	},
-	components: {
-		FloatingMenu,
-		IconButton,
-		LayoutRow,
-	},
-});
-</script>

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

@@ -1,3 +1,31 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type IconName } from "@/utility-functions/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+export default defineComponent({
+	props: {
+		label: { type: String as PropType<string>, required: true },
+		icon: { type: String as PropType<IconName | undefined>, required: false },
+		emphasized: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
+	},
+	components: {
+		IconLabel,
+		TextLabel,
+	},
+});
+</script>
+
 <template>
 	<button
 		class="text-button"
@@ -69,31 +97,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type IconName } from "@/utility-functions/icons";
-
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-
-export default defineComponent({
-	props: {
-		label: { type: String as PropType<string>, required: true },
-		icon: { type: String as PropType<IconName | undefined>, required: false },
-		emphasized: { type: Boolean as PropType<boolean>, default: false },
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
-	},
-	components: {
-		IconLabel,
-		TextLabel,
-	},
-});
-</script>