@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/core/composables/index.ts

@@ -7,10 +7,14 @@ export * from "./useAsync";
 export * from "./useApiClient";
 export * from "./useLoading";
 export * from "./useErrorHandler";
-export { useAssets } from "./useAssets";
-export { useMenuService } from "./useMenuService";
-export { useBeforeUnload } from "./useBeforeUnload";
-export { useLanguages } from "./useLanguages";
-export { useBreadcrumbs } from "./useBreadcrumbs";
-export { useAppInsights } from "./useAppInsights";
-export { useTheme } from "./useTheme";
+export * from "./useAssets";
+export * from "./useMenuService";
+export * from "./useBeforeUnload";
+export * from "./useLanguages";
+export * from "./useBreadcrumbs";
+export * from "./useAppInsights";
+export * from "./useTheme";
+export * from "./useWidgets";
+export * from "./useDashboard";
+export * from "./useAppBarWidget";
+export * from "./useSettingsMenu";

package/core/composables/useApiClient/index.ts

@@ -1,22 +1,22 @@
-export interface IAuthApiBase {
-  authToken: string;
-  setAuthToken(token: string): void;
-  getBaseUrl(defaultUrl: string, baseUrl: string): string;
-}
-
-interface UseApiClient<ApiClient extends IAuthApiBase> {
-  getApiClient: () => Promise<ApiClient>;
-}
-
-export function useApiClient<ApiClient extends IAuthApiBase>(
-  c: new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient,
-): UseApiClient<ApiClient> {
-  async function getApiClient() {
-    const client = new c();
-    return client;
-  }
-
-  return {
-    getApiClient,
-  };
-}
+export interface IAuthApiBase {
+  authToken: string;
+  setAuthToken(token: string): void;
+  getBaseUrl(defaultUrl: string, baseUrl: string): string;
+}
+
+interface UseApiClient<ApiClient extends IAuthApiBase> {
+  getApiClient: () => Promise<ApiClient>;
+}
+
+export function useApiClient<ApiClient extends IAuthApiBase>(
+  c: new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient,
+): UseApiClient<ApiClient> {
+  async function getApiClient() {
+    const client = new c();
+    return client;
+  }
+
+  return {
+    getApiClient,
+  };
+}

package/core/composables/useAppBarMobileButtons/index.ts

@@ -0,0 +1,17 @@
+import { inject, provide } from "vue";
+import { AppBarMobileButtonsServiceKey } from "../../../injection-keys";
+import { createAppBarMobileButtonsService } from "../../services/app-bar-mobile-buttons-service";
+
+export function provideAppBarMobileButtonsService() {
+  const service = createAppBarMobileButtonsService();
+  provide(AppBarMobileButtonsServiceKey, service);
+  return service;
+}
+
+export function useAppBarMobileButtons() {
+  const service = inject(AppBarMobileButtonsServiceKey);
+  if (!service) {
+    throw new Error("AppBarMobileButtonsService not found");
+  }
+  return service;
+}

package/core/composables/useAppBarWidget/index.ts

@@ -0,0 +1,19 @@
+import { inject, provide } from "vue";
+import { addAppBarWidget, createAppBarWidgetService, IAppBarWidgetService } from "../../services/app-bar-menu-service";
+import { AppBarWidgetServiceKey } from "../../../injection-keys";
+
+export function provideAppBarWidget(): IAppBarWidgetService {
+  const service = createAppBarWidgetService();
+  provide(AppBarWidgetServiceKey, service);
+  return service;
+}
+
+export function useAppBarWidget(): IAppBarWidgetService {
+  const service = inject(AppBarWidgetServiceKey);
+  if (!service) {
+    throw new Error("AppBarWidgetService not found");
+  }
+  return service;
+}
+
+export { addAppBarWidget };

package/core/composables/useBeforeUnload/index.ts

@@ -1,25 +1,25 @@
-import { onBeforeMount, onBeforeUnmount, unref, ComputedRef } from "vue";
-
-/**
- * Prevents the user from closing the tab if the modified flag is set to true.
- * @param modified - The flag that indicates whether the user has made changes.
- * @returns The modified flag.
- */
-export const useBeforeUnload = (modified: ComputedRef<boolean>) => {
-  onBeforeMount(() => {
-    window.addEventListener("beforeunload", preventUnload);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("beforeunload", preventUnload);
-  });
-
-  function preventUnload(event: Event) {
-    if (!unref(modified)) return;
-    event.preventDefault();
-  }
-
-  return {
-    modified,
-  };
-};
+import { onBeforeMount, onBeforeUnmount, unref, ComputedRef } from "vue";
+
+/**
+ * Prevents the user from closing the tab if the modified flag is set to true.
+ * @param modified - The flag that indicates whether the user has made changes.
+ * @returns The modified flag.
+ */
+export const useBeforeUnload = (modified: ComputedRef<boolean>) => {
+  onBeforeMount(() => {
+    window.addEventListener("beforeunload", preventUnload);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", preventUnload);
+  });
+
+  function preventUnload(event: Event) {
+    if (!unref(modified)) return;
+    event.preventDefault();
+  }
+
+  return {
+    modified,
+  };
+};

package/core/composables/useDashboard/index.ts

@@ -0,0 +1,19 @@
+import { createDashboardService, IDashboardService, registerDashboardWidget } from "../../services/dashboard-service";
+import { provide, inject } from "vue";
+import { DashboardServiceKey } from "../../../injection-keys";
+
+export function provideDashboardService(): IDashboardService {
+  const service = createDashboardService();
+  provide(DashboardServiceKey, service);
+  return service;
+}
+
+export function useDashboard(): IDashboardService {
+  const service = inject(DashboardServiceKey);
+  if (!service) {
+    throw new Error("DashboardService not provided");
+  }
+  return service;
+}
+
+export { registerDashboardWidget };

package/core/composables/useFunctions/debounce.ts

@@ -1,16 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export default function debounce(func: (...args: any[]) => void, delay: number): (...args: unknown[]) => void {
-  console.debug(`[@vc-shell/framework#useFunctions:debounce] - Entry point`);
-  let timer: number | null = null;
-
-  return function (...args: unknown[]): void {
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    timer = window.setTimeout(() => {
-      timer = null;
-      func(...args);
-    }, delay);
-  };
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export default function debounce(func: (...args: any[]) => void, delay: number): (...args: unknown[]) => void {
+  console.debug(`[@vc-shell/framework#useFunctions:debounce] - Entry point`);
+  let timer: number | null = null;
+
+  return function (...args: unknown[]): void {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = window.setTimeout(() => {
+      timer = null;
+      func(...args);
+    }, delay);
+  };
+}

package/core/composables/useFunctions/delay.ts

@@ -1,4 +1,4 @@
-export default function delay(func: (...args: unknown[]) => void, delay = 0): void {
-  console.debug(`[@vc-shell/framework#useFunctions:delay] - Entry point`);
-  setTimeout(func, delay);
-}
+export default function delay(func: (...args: unknown[]) => void, delay = 0): void {
+  console.debug(`[@vc-shell/framework#useFunctions:delay] - Entry point`);
+  setTimeout(func, delay);
+}

package/core/composables/useFunctions/index.ts

@@ -1,21 +1,21 @@
-import debounce from "./debounce";
-import delay from "./delay";
-import once from "./once";
-import throttle from "./throttle";
-
-interface IUseFunctions {
-  debounce: typeof debounce;
-  delay: typeof delay;
-  once: typeof once;
-  throttle: typeof throttle;
-}
-
-export function useFunctions(): IUseFunctions {
-  console.debug("useFunctions entry point");
-  return {
-    debounce,
-    delay,
-    once,
-    throttle,
-  };
-}
+import debounce from "./debounce";
+import delay from "./delay";
+import once from "./once";
+import throttle from "./throttle";
+
+interface IUseFunctions {
+  debounce: typeof debounce;
+  delay: typeof delay;
+  once: typeof once;
+  throttle: typeof throttle;
+}
+
+export function useFunctions(): IUseFunctions {
+  console.debug("useFunctions entry point");
+  return {
+    debounce,
+    delay,
+    once,
+    throttle,
+  };
+}

package/core/composables/useFunctions/once.ts

@@ -1,12 +1,12 @@
-const resultsMap = new WeakMap();
-
-export default function once(func: (...args: unknown[]) => void): (...args: unknown[]) => unknown {
-  console.debug(`[@vc-shell/framework#useFunctions:once] - Entry point`);
-  return function (...args: unknown[]): unknown {
-    if (!resultsMap.has(func)) {
-      const result = func(...args);
-      resultsMap.set(func, result);
-    }
-    return resultsMap.get(func);
-  };
-}
+const resultsMap = new WeakMap();
+
+export default function once(func: (...args: unknown[]) => void): (...args: unknown[]) => unknown {
+  console.debug(`[@vc-shell/framework#useFunctions:once] - Entry point`);
+  return function (...args: unknown[]): unknown {
+    if (!resultsMap.has(func)) {
+      const result = func(...args);
+      resultsMap.set(func, result);
+    }
+    return resultsMap.get(func);
+  };
+}

package/core/composables/useFunctions/sleep.ts

@@ -1,4 +1,4 @@
-export default function sleep(ms: number): Promise<void> {
-  console.debug(`[@vc-shell/framework#useFunctions:sleep] - Entry point`);
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+export default function sleep(ms: number): Promise<void> {
+  console.debug(`[@vc-shell/framework#useFunctions:sleep] - Entry point`);
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/core/composables/useFunctions/throttle.ts

@@ -1,14 +1,14 @@
-export default function throttle(func: (...args: unknown[]) => void, delay: number): (...args: unknown[]) => void {
-  console.debug(`[@vc-shell/framework#useFunctions:throttle] - Entry point`);
-  let wasThrottled = false;
-
-  return function (...args: unknown[]): void {
-    if (!wasThrottled) {
-      func(...args);
-      wasThrottled = true;
-      setTimeout(() => {
-        wasThrottled = false;
-      }, delay);
-    }
-  };
-}
+export default function throttle(func: (...args: unknown[]) => void, delay: number): (...args: unknown[]) => void {
+  console.debug(`[@vc-shell/framework#useFunctions:throttle] - Entry point`);
+  let wasThrottled = false;
+
+  return function (...args: unknown[]): void {
+    if (!wasThrottled) {
+      func(...args);
+      wasThrottled = true;
+      setTimeout(() => {
+        wasThrottled = false;
+      }, delay);
+    }
+  };
+}

package/core/composables/useGlobalSearch/index.ts

@@ -0,0 +1,19 @@
+import { inject, provide } from "vue";
+import { GlobalSearchKey } from "../../../injection-keys";
+import { GlobalSearchState, createGlobalSearchService } from "../../services/global-search-service";
+
+export function provideGlobalSearch() {
+  const state = createGlobalSearchService();
+  provide(GlobalSearchKey, state);
+  return state;
+}
+
+export function useGlobalSearch() {
+  const state = inject<GlobalSearchState>(GlobalSearchKey);
+
+  if (!state) {
+    throw new Error("useGlobalSearch must be used within a component that has called createGlobalSearch");
+  }
+
+  return state;
+}

package/core/composables/useKeyboardNavigation/index.ts

@@ -0,0 +1,211 @@
+import { onMounted, onBeforeUnmount, ref } from "vue";
+
+interface UseKeyboardNavigationOptions {
+  containerSelector?: string;
+  itemSelector?: string;
+  onEnter?: (element: HTMLElement) => void;
+  onEscape?: () => void;
+  loop?: boolean;
+}
+
+/**
+ * Hook for implementing standard keyboard navigation inside components
+ * @param options Options for configuring navigation
+ * @returns Object with methods for managing focus
+ */
+export function useKeyboardNavigation(options: UseKeyboardNavigationOptions = {}) {
+  const {
+    containerSelector = '[role="menu"]',
+    itemSelector = '[tabindex="0"]',
+    onEnter,
+    onEscape,
+    loop = true,
+  } = options;
+
+  const container = ref<HTMLElement | null>(null);
+  const focusedItemIndex = ref(-1);
+
+  /**
+   * Handler for keydown events for navigation
+   */
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!container.value) return;
+
+    const focusableElements = Array.from(container.value.querySelectorAll(itemSelector)) as HTMLElement[];
+
+    if (!focusableElements.length) return;
+
+    switch (event.key) {
+      case "Tab":
+        // Standard tabulation between elements
+        handleTabNavigation(event, focusableElements);
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        // Navigation forward
+        event.preventDefault();
+        focusNextElement(focusableElements);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        // Navigation backward
+        event.preventDefault();
+        focusPreviousElement(focusableElements);
+        break;
+      case "Enter":
+      case " ":
+        // Selection of the current element
+        if (focusedItemIndex.value >= 0 && focusedItemIndex.value < focusableElements.length) {
+          event.preventDefault();
+          if (onEnter) {
+            onEnter(focusableElements[focusedItemIndex.value]);
+          } else {
+            focusableElements[focusedItemIndex.value].click();
+          }
+        }
+        break;
+      case "Escape":
+        // Closing the menu or cancellation
+        if (onEscape) {
+          event.preventDefault();
+          onEscape();
+        }
+        break;
+      case "Home":
+        // Transition to the first element
+        event.preventDefault();
+        focusFirstElement(focusableElements);
+        break;
+      case "End":
+        // Transition to the last element
+        event.preventDefault();
+        focusLastElement(focusableElements);
+        break;
+    }
+  };
+
+  /**
+   * Handling standard tabulation
+   */
+  const handleTabNavigation = (event: KeyboardEvent, elements: HTMLElement[]) => {
+    if (event.shiftKey) {
+      // Shift+Tab - backward
+      focusPreviousElement(elements);
+    } else {
+      // Tab - forward
+      focusNextElement(elements);
+    }
+  };
+
+  /**
+   * Focus on the next element
+   */
+  const focusNextElement = (elements: HTMLElement[]) => {
+    if (!elements.length) return;
+
+    if (focusedItemIndex.value < elements.length - 1) {
+      focusedItemIndex.value++;
+    } else if (loop) {
+      focusedItemIndex.value = 0;
+    }
+
+    elements[focusedItemIndex.value].focus();
+  };
+
+  /**
+   * Focus on the previous element
+   */
+  const focusPreviousElement = (elements: HTMLElement[]) => {
+    if (!elements.length) return;
+
+    if (focusedItemIndex.value > 0) {
+      focusedItemIndex.value--;
+    } else if (loop) {
+      focusedItemIndex.value = elements.length - 1;
+    }
+
+    elements[focusedItemIndex.value].focus();
+  };
+
+  /**
+   * Focus on the first element
+   */
+  const focusFirstElement = (elements: HTMLElement[]) => {
+    if (!elements.length) return;
+    focusedItemIndex.value = 0;
+    elements[0].focus();
+  };
+
+  /**
+   * Focus on the last element
+   */
+  const focusLastElement = (elements: HTMLElement[]) => {
+    if (!elements.length) return;
+    focusedItemIndex.value = elements.length - 1;
+    elements[elements.length - 1].focus();
+  };
+
+  /**
+   * Initialization and event processing
+   */
+  const initKeyboardNavigation = (el: HTMLElement) => {
+    container.value = el;
+    el.addEventListener("keydown", handleKeyDown);
+  };
+
+  /**
+   * Cancelling event processing
+   */
+  const cleanupKeyboardNavigation = () => {
+    if (container.value) {
+      container.value.removeEventListener("keydown", handleKeyDown);
+      container.value = null;
+    }
+  };
+
+  onMounted(() => {
+    if (typeof document !== "undefined" && containerSelector) {
+      const el = document.querySelector(containerSelector) as HTMLElement;
+      if (el) {
+        initKeyboardNavigation(el);
+      }
+    }
+  });
+
+  onBeforeUnmount(() => {
+    cleanupKeyboardNavigation();
+  });
+
+  return {
+    initKeyboardNavigation,
+    cleanupKeyboardNavigation,
+    focusNextElement: () => {
+      if (container.value) {
+        const elements = Array.from(container.value.querySelectorAll(itemSelector)) as HTMLElement[];
+        focusNextElement(elements);
+      }
+    },
+    focusPreviousElement: () => {
+      if (container.value) {
+        const elements = Array.from(container.value.querySelectorAll(itemSelector)) as HTMLElement[];
+        focusPreviousElement(elements);
+      }
+    },
+    focusFirstElement: () => {
+      if (container.value) {
+        const elements = Array.from(container.value.querySelectorAll(itemSelector)) as HTMLElement[];
+        focusFirstElement(elements);
+      }
+    },
+    focusLastElement: () => {
+      if (container.value) {
+        const elements = Array.from(container.value.querySelectorAll(itemSelector)) as HTMLElement[];
+        focusLastElement(elements);
+      }
+    },
+    setFocusedIndex: (index: number) => {
+      focusedItemIndex.value = index;
+    },
+    getFocusedIndex: () => focusedItemIndex.value,
+  };
+}