global event bus and some helper methods

Author: Piotr

src/components/icon/Filter.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg height="14" viewBox="0 0 1792 1792" width="14" xmlns="http://www.w3.org/2000/svg" fill="none">
+        <path
+            d="M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45v-486l-493-493q-31-29-14-70 17-39 59-39h1280q42 0 59 39z"
+            fill="currentColor" />
+    </svg>
+</template>

src/demo.ts

@@ -77,7 +77,7 @@ export function getLayout(json: boolean = true): Layout {
             return { 
                 text: line.json_content.level,
                 facets: [
-                    { name:"Level", value:line.json_content.level }
+                    { name:"Custom facet", value:line.json_content.level.substr(0,3) }
                 ] 
             }
         }`

src/event_bus.ts

@@ -0,0 +1,87 @@
+// eventBus.ts
+import { reactive } from 'vue'
+
+type EventCallback = (...args: any[]) => void
+type EventDefinition = Record<string, any[]>
+
+// Generic event bus creator function - similar to defineEmits pattern
+export function defineEventBus<T extends EventDefinition>(events: T = {} as T) {
+    // Type for event callbacks mapped to their parameter types
+    type EventCallbacks = {
+        [K in keyof T]: (...args: T[K]) => void
+    }
+
+    // Type-safe event listeners storage
+    const listeners: {
+        [K in keyof T]?: EventCallbacks[K][]
+    } = {}
+
+    const bus = reactive({
+        // Register event listener with type checking
+        on<K extends keyof T>(event: K, callback: EventCallbacks[K]) {
+            if (!listeners[event]) {
+                listeners[event] = []
+            }
+            listeners[event]!.push(callback)
+            return () => bus.off(event, callback)
+        },
+
+        // Remove event listener
+        off<K extends keyof T>(event: K, callback?: EventCallbacks[K]) {
+            if (!listeners[event]) return
+            if (!callback) {
+                delete listeners[event]
+                return
+            }
+            listeners[event] = listeners[event]!.filter(cb => cb !== callback)
+        },
+
+        // Emit event with type-checked arguments
+        emit<K extends keyof T>(event: K, ...args: T[K]) {
+            if (!listeners[event]) return
+            listeners[event]!.forEach(callback => callback(...args))
+        }
+    })
+
+    return bus
+}
+
+// Usage example: create a typed event bus
+export type GlobalEvents = {
+    'searchbar-update': [value: string]
+}
+
+// Create a global instance
+export const globalEventBus = defineEventBus<GlobalEvents>()
+
+
+// In component A.vue
+// Usage example
+// import { globalEventBus } from './eventBus'
+
+// function userLogin() {
+//   // Type checking ensures correct parameters
+//   globalEventBus.emit('user:login', 'john_doe', Date.now())
+  
+//   // This would cause a TypeScript error - wrong parameter types
+//   // globalEventBus.emit('user:login', 123, 'wrong')
+// }
+
+// // In component B.vue
+// import { globalEventBus } from './eventBus'
+// import { onMounted, onUnmounted } from 'vue'
+
+// const loginHandler = (username: string, timestamp: number) => {
+//   console.log(`${username} logged in at ${new Date(timestamp).toLocaleString()}`)
+// }
+
+// onMounted(() => {
+//   // Store the unsubscribe function
+//   const unsubscribe = globalEventBus.on('user:login', loginHandler)
+  
+//   // Alternative cleanup approach
+//   onUnmounted(() => {
+//     unsubscribe()
+//     // Or: globalEventBus.off('user:login', loginHandler)
+//   })
+// })

src/store.ts

@@ -427,6 +427,16 @@ export const useMainStore = defineStore("main", () => {
         return initSettings.value?.updateVersion
     }
 
+    const isFacetActive = (name: string) => {
+        for (let f in facets.value) {
+            if (facets.value[f].name !== name) {
+                continue
+            }
+            return facets.value[f].items.find(f => f.selected == true) != undefined
+        }
+        return false
+    }
+
     const notificationBar = computed(() => {
 
         return false // for until its finished
@@ -509,6 +519,7 @@ export const useMainStore = defineStore("main", () => {
         displayRows,
 
         facets,
+        isFacetActive,
         searchbar,
         searchbarValid,
         searchClear,