refactor(ui): improve naming and typing of new snackbar implementation

Author: luizhf42

ui/src/components/Snackbar/SnackbarNew.vue

@@ -3,7 +3,7 @@
     v-model="show"
     location="top"
     :timeout="4000"
-    :color="type"
+    :color="color"
     transition="slide-x-transition"
   >
     {{ message }}
@@ -12,13 +12,14 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { rawPlugin } from "@/plugins/snackbar";
+import { plugin } from "@/plugins/snackbar";
 
 const show = computed({
-  get: () => rawPlugin.state.show,
-  set: (value) => rawPlugin.setShow(value),
+  get: () => plugin.state.show,
+  set: (value) => plugin.setShow(value),
 });
 
-const message = computed(() => rawPlugin.state.message);
-const type = computed(() => rawPlugin.state.type);
+const message = computed(() => plugin.state.message);
+const type = computed(() => plugin.state.type);
+const color = computed(() => type.value ?? "info");
 </script>

ui/src/plugins/snackbar.ts

@@ -2,9 +2,11 @@ import { App, Plugin, reactive, readonly } from "vue";
 
 const InjectionKey = Symbol("snackbar");
 
+type SnackbarType = "success" | "error" | "info" | "warning";
+
 interface SnackbarState {
   message: string;
-  type: "success" | "error" | "info" | "warning" | "";
+  type: SnackbarType | null;
   show: boolean;
 }
 
@@ -13,17 +15,17 @@ interface ISnackbarPlugin {
   showError: (msg: string) => void;
   showInfo: (msg: string) => void;
   showWarning: (msg: string) => void;
-  hideSnackbar: () => void;
+  setShow: (value: boolean) => void;
   state: Readonly<SnackbarState>;
 }
 
 const state = reactive<SnackbarState>({
   message: "",
-  type: "",
+  type: null,
   show: false,
 });
 
-const showSnackbar = (type: SnackbarState["type"], message: string) => {
+const showSnackbar = (type: SnackbarType, message: string) => {
   state.message = message;
   state.type = type;
   state.show = true;
@@ -33,7 +35,7 @@ const showSnackbar = (type: SnackbarState["type"], message: string) => {
   }, 4000);
 };
 
-const plugin = {
+const plugin: ISnackbarPlugin = {
   showSuccess: (msg: string) => showSnackbar("success", msg),
   showError: (msg: string) => showSnackbar("error", msg),
   showInfo: (msg: string) => showSnackbar("info", msg),
@@ -48,5 +50,5 @@ const SnackbarPlugin: Plugin = {
   },
 };
 
-export { SnackbarPlugin, InjectionKey, plugin as rawPlugin };
+export { SnackbarPlugin, InjectionKey, plugin };
 export type { SnackbarState, ISnackbarPlugin };