@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/core/composables/index.ts

@@ -1,16 +1,17 @@
-export * from "./useFunctions";
-export * from "./useUser";
-export * from "./useNotifications";
-export * from "./useSettings";
-export * from "./usePermissions";
-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 "./useFunctions";
+export * from "./useUser";
+export * from "./useNotifications";
+export * from "./useSettings";
+export * from "./usePermissions";
+export * from "./useAsync";
+export * from "./useApiClient";
+export * from "./useLoading";
+export * from "./useErrorHandler";
+export * from "./useAssets";
+export * from "./useMenuService";
+export * from "./useBeforeUnload";
+export * from "./useLanguages";
+export * from "./useBreadcrumbs";
+export * from "./useAppInsights";
+export * from "./useTheme";
+export * from "./useWidgets";

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/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/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.ts

@@ -0,0 +1,44 @@
+import { ref, inject, provide, Ref } from "vue";
+
+const GLOBAL_SEARCH_KEY = Symbol("globalSearch");
+
+export interface GlobalSearchState {
+  isSearchVisible: Ref<Record<string, boolean>>;
+  searchQuery: Ref<Record<string, string>>;
+  toggleSearch: (bladeId: number) => void;
+  setSearchQuery: (bladeId: number, query: string) => void;
+}
+
+export function createGlobalSearch() {
+  const isSearchVisible = ref<Record<string, boolean>>({});
+  const searchQuery = ref<Record<string, string>>({});
+
+  const toggleSearch = (bladeId: number) => {
+    isSearchVisible.value[bladeId] = !isSearchVisible.value[bladeId];
+    console.log("toggleSearch", bladeId, isSearchVisible.value[bladeId]);
+  };
+
+  const setSearchQuery = (bladeId: number, query: string) => {
+    searchQuery.value[bladeId] = query;
+  };
+
+  const state: GlobalSearchState = {
+    isSearchVisible,
+    searchQuery,
+    toggleSearch,
+    setSearchQuery,
+  };
+
+  provide(GLOBAL_SEARCH_KEY, state);
+  return state;
+}
+
+export function useGlobalSearch() {
+  const state = inject<GlobalSearchState>(GLOBAL_SEARCH_KEY);
+
+  if (!state) {
+    throw new Error("useGlobalSearch must be used within a component that has called createGlobalSearch");
+  }
+
+  return state;
+}

package/core/composables/useLanguages/index.ts

@@ -1,78 +1,78 @@
-import * as veeValidate from "vee-validate";
-import { i18n } from "../../plugins/i18n";
-import { setLocale as setVeeI18nLocale, localize } from "@vee-validate/i18n";
-import { createSharedComposable, useLocalStorage } from "@vueuse/core";
-import { ComputedRef, computed } from "vue";
-import ISO6391 from "iso-639-1";
-import { languageToCountryMap } from "../../constants";
-
-export interface IUseLanguages {
-  setLocale: (locale: string) => void;
-  currentLocale: ComputedRef<string>;
-  getLocaleByTag: (localeTag: string) => string | undefined;
-  resolveCamelCaseLocale: (locale: string) => string;
-  getFlag: (language: string) => Promise<string>;
-}
-
-export const useLanguages = createSharedComposable(() => {
-  const defaultLanguage = i18n.global.locale.value;
-  const savedLocale = useLocalStorage("VC_LANGUAGE_SETTINGS", "");
-
-  const currentLocale = computed(() => {
-    let locale = defaultLanguage;
-
-    if (i18n.global.availableLocales.includes(savedLocale.value)) {
-      locale = savedLocale.value;
-    }
-
-    return locale;
-  });
-
-  function setLocale(locale: string) {
-    i18n.global.locale.value = locale;
-    veeValidate.configure({
-      generateMessage: localize(locale, {
-        messages: (i18n.global.getLocaleMessage(locale) as { messages: Record<string, string> }).messages,
-      }),
-    });
-    setVeeI18nLocale(locale);
-    savedLocale.value = locale;
-  }
-
-  function getLocaleByTag(localeTag: string) {
-    if (!localeTag) return;
-
-    const twoLetterLanguageName = localeTag.split("-")[0];
-
-    return ISO6391.getNativeName(twoLetterLanguageName);
-  }
-
-  function resolveCamelCaseLocale(locale: string) {
-    const formattedLocale = locale.replace(/([a-z]+)([A-Z]+)/g, "$1-$2").toLowerCase();
-
-    if (i18n.global.getLocaleMessage(formattedLocale)) {
-      return formattedLocale;
-    }
-    return "en";
-  }
-
-  function getCountryCode(language: string): string {
-    return (
-      languageToCountryMap[language.toLocaleLowerCase()] || languageToCountryMap[language.slice(0, 2)] || "xx" // placeholder for unknown country
-    );
-  }
-
-  async function getFlag(language: string): Promise<string> {
-    const countryCode = getCountryCode(language);
-    return new URL(`../../../assets/icons/flags/${countryCode}.svg`, import.meta.url).href;
-  }
-
-  return {
-    setLocale,
-    currentLocale,
-    getLocaleByTag,
-    resolveCamelCaseLocale,
-    getFlag,
-    getCountryCode,
-  };
-});
+import * as veeValidate from "vee-validate";
+import { i18n } from "../../plugins/i18n";
+import { setLocale as setVeeI18nLocale, localize } from "@vee-validate/i18n";
+import { createSharedComposable, useLocalStorage } from "@vueuse/core";
+import { ComputedRef, computed } from "vue";
+import ISO6391 from "iso-639-1";
+import { languageToCountryMap } from "../../constants";
+
+export interface IUseLanguages {
+  setLocale: (locale: string) => void;
+  currentLocale: ComputedRef<string>;
+  getLocaleByTag: (localeTag: string) => string | undefined;
+  resolveCamelCaseLocale: (locale: string) => string;
+  getFlag: (language: string) => Promise<string>;
+}
+
+export const useLanguages = createSharedComposable(() => {
+  const defaultLanguage = i18n.global.locale.value;
+  const savedLocale = useLocalStorage("VC_LANGUAGE_SETTINGS", "");
+
+  const currentLocale = computed(() => {
+    let locale = defaultLanguage;
+
+    if (i18n.global.availableLocales.includes(savedLocale.value)) {
+      locale = savedLocale.value;
+    }
+
+    return locale;
+  });
+
+  function setLocale(locale: string) {
+    i18n.global.locale.value = locale;
+    veeValidate.configure({
+      generateMessage: localize(locale, {
+        messages: (i18n.global.getLocaleMessage(locale) as { messages: Record<string, string> }).messages,
+      }),
+    });
+    setVeeI18nLocale(locale);
+    savedLocale.value = locale;
+  }
+
+  function getLocaleByTag(localeTag: string) {
+    if (!localeTag) return;
+
+    const twoLetterLanguageName = localeTag.split("-")[0];
+
+    return ISO6391.getNativeName(twoLetterLanguageName);
+  }
+
+  function resolveCamelCaseLocale(locale: string) {
+    const formattedLocale = locale.replace(/([a-z]+)([A-Z]+)/g, "$1-$2").toLowerCase();
+
+    if (i18n.global.getLocaleMessage(formattedLocale)) {
+      return formattedLocale;
+    }
+    return "en";
+  }
+
+  function getCountryCode(language: string): string {
+    return (
+      languageToCountryMap[language.toLocaleLowerCase()] || languageToCountryMap[language.slice(0, 2)] || "xx" // placeholder for unknown country
+    );
+  }
+
+  async function getFlag(language: string): Promise<string> {
+    const countryCode = getCountryCode(language);
+    return new URL(`../../../assets/icons/flags/${countryCode}.svg`, import.meta.url).href;
+  }
+
+  return {
+    setLocale,
+    currentLocale,
+    getLocaleByTag,
+    resolveCamelCaseLocale,
+    getFlag,
+    getCountryCode,
+  };
+});

package/core/composables/useLoading/index.ts

@@ -1,9 +1,9 @@
-import { computed, ComputedRef, Ref } from "vue";
-
-export interface HasLoading {
-  loading: Readonly<Ref<boolean>>;
-}
-
-export function useLoading(...args: Readonly<Ref<boolean>>[]): ComputedRef<boolean> {
-  return computed(() => args.some((item) => item.value));
-}
+import { computed, ComputedRef, Ref } from "vue";
+
+export interface HasLoading {
+  loading: Readonly<Ref<boolean>>;
+}
+
+export function useLoading(...args: Readonly<Ref<boolean>>[]): ComputedRef<boolean> {
+  return computed(() => args.some((item) => item.value));
+}