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 (file)
index 0000000..004f659
--- /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 a907bd2fe0906fcc9c69d5609d9189006ac8ff07..8d1942408c39fb106afbf2d364eed3cfb982fef9 100644 (file)
--- 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 (file)
index 0000000..a7c67dd
--- /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 69eaddbf4a8aebab1928ee43240a608d8a4f2c37..db7d69eab6a81847c4f074eb97fe46e47d3a2e0c 100644 (file)
--- 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 e379be3f522ceab5db924139b11f52c79276c49f..1e28401d3801dfe72f5e4b8db6d0f06aea5d8d80 100644 (file)
--- 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 5b3d43915290f76eb1c61969a24bda2a5c9cba45..975bbb0f0e9dc6e4a6fc3567dd6f30473b9ff976 100644 (file)
--- 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 6227d54ce221155fb078f038e32d83b48d63eafd..9d44e419ec50cc40d82fba8969ddacefc8555b54 100644 (file)
--- 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 461bce35985adca850a39e054571924d30ce0696..d6cc29ed9dff010b34526a90f85e75c1dd624804 100644 (file)
--- 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 bae033a3bea7bac461c579b8232caa02514c272a..4702f67636d688e1d36140c7c877c0fe92ed152d 100644 (file)
--- 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 49cdd43fb2698b892f02800d8339b1b6ac5124b9..a14e3e06111753007b92d068858c61981ad07011 100644 (file)
--- 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 5347cd61b3d295b56dfebb3144a91be27c2a618d..a05beb59df5447a1f661cc83a609c9afd1cc60ab 100644 (file)
--- 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[]>([]);