Move toast and associated styling to custom component

diff --git a/client/App.vue b/client/App.vue
index 4aeaec432c9fd314cedaa18771e72f8d327fa9d6..f61ab0f0ffad69f0f69ef099d3beb4a955647573 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,13 +1,12 @@
 <template>\r
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">\r
-    <Toast position="bottom-right" />\r
+    <PrimeToast />\r
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />\r
     <RouterView />\r
   </div>\r
 </template>\r
 \r
 <script setup>\r
-import Toast from "primevue/toast";\r
 import { computed, onBeforeMount } from "vue";\r
 import { RouterView, useRoute } from "vue-router";\r
 \r
@@ -15,6 +14,7 @@ import { getConfig } from "./api.js";
 import { useGlobalStore } from "./globalStore.js";\r
 import NavBar from "./partials/NavBar.vue";\r
 import { loadStoredToken } from "./tokenStorage.js";\r
+import PrimeToast from "./components/PrimeToast.vue";\r
 \r
 const globalStore = useGlobalStore();\r
 const route = useRoute();\r

diff --git a/client/components/PrimeToast.vue b/client/components/PrimeToast.vue
new file mode 100644 (file)
index 0000000..6fb2cf1
--- /dev/null
+++ b/client/components/PrimeToast.vue
@@ -0,0 +1,23 @@
+<template>
+  <Toast position="bottom-right" :pt="style" />
+</template>
+
+<script setup>
+import Toast from "primevue/toast";
+
+const style = {
+  message: "flex flex-col items-end ml-[20px]",
+  container: ({ props }) => ({
+    class: [
+      "mt-2 px-3 py-2 rounded-lg max-w-96",
+      "bg-theme-background-elevated border border-l-2 border-theme-border",
+      {
+        "border-l-theme-success": props.message.severity == "success",
+        "border-l-theme-failure": props.message.severity == "error",
+      },
+    ],
+  }),
+  icon: "invisible h-0 w-0",
+  summary: "font-bold",
+};
+</script>

diff --git a/client/index.js b/client/index.js
index 834a22c991573fe852df764454c2092ea9276881..fbea270906a46a075452b2b75fe1d4eb3b1f2d2f 100644 (file)
--- a/client/index.js
+++ b/client/index.js
@@ -3,7 +3,6 @@ import PrimeVue from "primevue/config";
 import ToastService from "primevue/toastservice";\r
 import { createApp } from "vue";\r
 import { createPinia } from "pinia";\r
-import { primeStyles } from "./style.js";\r
 import router from "/router.js";\r
 \r
 const app = createApp(App);\r
@@ -11,9 +10,6 @@ const pinia = createPinia();
 \r
 app.use(router);\r
 app.use(pinia);\r
-app.use(PrimeVue, {\r
-  unstyled: true,\r
-  pt: primeStyles,\r
-});\r
+app.use(PrimeVue, { unstyled: true });\r
 app.use(ToastService);\r
 app.mount("#app");\r

diff --git a/client/style.js b/client/style.js
deleted file mode 100644 (file)
index d3a8451..0000000
--- a/client/style.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const primeStyles = {
-  toast: {
-    message: "flex flex-col items-end ml-[20px]",
-    container: ({ props }) => ({
-      class: [
-        "mt-2 px-3 py-2 rounded-lg max-w-96",
-        "bg-theme-background-elevated border border-l-2 border-theme-border ",
-        {
-          "border-l-theme-success": props.message.severity == "success",
-          "border-l-theme-failure": props.message.severity == "error",
-        },
-      ],
-    }),
-    icon: "invisible h-0 w-0",
-    summary: "font-bold",
-  },
-};