From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 8 Jul 2025 09:58:40 +0000 (+0000)
Subject: frontend: Always load the basic UI components
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=01df8e1a4d26c7a6593e42d38d25a545c6caffc8;p=pbs.git

frontend: Always load the basic UI components

This allows us to keep the views and more complex components a lot
shorter by having to write fewer import statements.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/components/BasicComponents.ts b/frontend/src/components/BasicComponents.ts
new file mode 100644
index 00000000..004f659a
--- /dev/null
+++ b/frontend/src/components/BasicComponents.ts
@@ -0,0 +1,36 @@
+import type { App } from "vue";
+
+// Grid
+import Container from "@/components/Container.vue";
+import Section from "@/components/Section.vue";
+
+// Elements
+import Block from "@/components/Block.vue";
+import Box from "@/components/Box.vue";
+import Notification from "@/components/Notification.vue";
+import Tags from "@/components/Tags.vue";
+import Tag from "@/components/Tag.vue";
+
+// Components
+import Modal from "@/components/Modal.vue";
+
+// Icons
+import Icon from "@/components/Icon.vue";
+
+// Loading Indicator
+import Loader from "@/components/Loader.vue";
+
+export default {
+	install(app: App) {
+		app.component("Container", Container)
+		app.component("Block", Block)
+		app.component("Box", Box)
+		app.component("Icon", Icon)
+		app.component("Loader", Loader)
+		app.component("Modal", Modal)
+		app.component("Notification", Notification)
+		app.component("Section", Section)
+		app.component("Tags", Tags)
+		app.component("Tag", Tag)
+	}
+}
diff --git a/frontend/src/components/MirrorList.vue b/frontend/src/components/MirrorList.vue
index a907bd2f..8d194240 100644
--- a/frontend/src/components/MirrorList.vue
+++ b/frontend/src/components/MirrorList.vue
@@ -3,13 +3,6 @@
 	import { useMirrorStore } from '@/stores/mirrors'
 	import { getCountryName } from "@/utils/i18n"
 
-	// Components
-	import Box from "@/components/Box.vue"
-	import Loader from "@/components/Loader.vue"
-	import Notification from "@/components/Notification.vue"
-	import Tags from "@/components/Tags.vue"
-	import Tag from "@/components/Tag.vue"
-
 	// Load the store
 	const mirrorStore = useMirrorStore()
 
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
new file mode 100644
index 00000000..a7c67ddc
--- /dev/null
+++ b/frontend/src/components/Modal.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+	import { ref } from "vue";
+
+	defineProps<{
+		open: boolean
+	}>()
+
+	defineEmits<{
+		(e: "update:open", value: boolean): void
+	}>()
+</script>
+
+<template>
+	<div class="modal" :class="{ 'is-active': open }">
+		<!-- Make a click on the background close the modal -->
+		<div class="modal-background" @click="$emit('update:open', false)"></div>
+
+		<div class="modal-content box">
+			<slot />
+		</div>
+
+		<button	class="modal-close is-large" aria-label="close"
+			@click="$emit('update:open', false)"></button>
+	</div>
+</template>
diff --git a/frontend/src/components/PackageFilelist.vue b/frontend/src/components/PackageFilelist.vue
index 69eaddbf..db7d69ea 100644
--- a/frontend/src/components/PackageFilelist.vue
+++ b/frontend/src/components/PackageFilelist.vue
@@ -5,12 +5,6 @@
 	import type { Package, File } from "@/api/packages";
 	import { fetchPackageFilelist } from "@/api/packages";
 
-	// Components
-	import Icon from "@/components/Icon.vue";
-	import Loader from "@/components/Loader.vue";
-	import Notification from "@/components/Notification.vue";
-	import Section from "@/components/Section.vue";
-
 	// Utils
 	import { fileIsDownloadable, fileIsViewable } from "@/utils/files";
 	import { formatMode, formatSize } from "@/utils/format";
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e379be3f..1e28401d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -37,6 +37,10 @@ app.use(
 	})
 )
 
+// Import all basic components
+import BasicComponents from "@/components/BasicComponents"
+app.use(BasicComponents)
+
 // Import icons
 import "./icons"
 
diff --git a/frontend/src/views/BuildersView.vue b/frontend/src/views/BuildersView.vue
index 5b3d4391..975bbb0f 100644
--- a/frontend/src/views/BuildersView.vue
+++ b/frontend/src/views/BuildersView.vue
@@ -3,9 +3,6 @@
 	import type { Builder } from "@/api/builders";
 	import { fetchBuilders } from "@/api/builders";
 
-	// Import UI components
-	import Section from "../components/Section.vue"
-
 	// Builders
 	const builders = ref<Builder[]>([]);
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6227d54c..9d44e419 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import Section from "../components/Section.vue"
 </script>
 
 <template>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 461bce35..d6cc29ed 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -13,12 +13,6 @@
 	import { useAuth } from "@/composables/auth";
 	const auth = useAuth();
 
-	// Import components
-	import Container from "@/components/Container.vue";
-	import Icon from "@/components/Icon.vue";
-	import Notification from "@/components/Notification.vue";
-	import Section from "@/components/Section.vue";
-
 	// Error string shown to the user in case something went wrong
 	const error = ref<string | null>(null)
 
diff --git a/frontend/src/views/MirrorsView.vue b/frontend/src/views/MirrorsView.vue
index bae033a3..4702f676 100644
--- a/frontend/src/views/MirrorsView.vue
+++ b/frontend/src/views/MirrorsView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	// Components
 	import MirrorList from "@/components/MirrorList.vue"
-	import Section from "@/components/Section.vue"
 </script>
 
 <template>
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
index 49cdd43f..a14e3e06 100644
--- a/frontend/src/views/NotFoundView.vue
+++ b/frontend/src/views/NotFoundView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import Container from "@/components/Container.vue"
 </script>
 
 <template>
diff --git a/frontend/src/views/PackagesView.vue b/frontend/src/views/PackagesView.vue
index 5347cd61..a05beb59 100644
--- a/frontend/src/views/PackagesView.vue
+++ b/frontend/src/views/PackagesView.vue
@@ -5,9 +5,6 @@
 	import type { PackageSummary } from "@/api/packages";
 	import { fetchPackages } from "@/api/packages";
 
-	// Components
-	import Section from "@/components/Section.vue";
-
 	// Create a list with all packages
 	const packages = ref<PackageSummary[]>([]);