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

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));
+}

package/core/composables/useMenuService/index.ts

@@ -1,110 +1,20 @@
-import { createSharedComposable, createUnrefFn, useArrayFind } from "@vueuse/core";
-import { Ref, ref, computed } from "vue";
-import * as _ from "lodash-es";
-import { i18n } from "./../../plugins/i18n";
-import { MenuItem } from "../../types";
-
-interface MenuService {
-  addMenuItem: (item: MenuItem) => void;
-  menuItems: Ref<MenuItem[]>;
-  removeMenuItem: (item: MenuItem) => void;
+import { provide, inject, getCurrentInstance } from "vue";
+import { MenuService, createMenuService, addMenuItem } from "../../services/menu-service";
+import { MenuServiceKey } from "../../../injection-keys";
+
+export function provideMenuService(): MenuService {
+  const service = createMenuService();
+  provide(MenuServiceKey, service);
+  return service;
 }
 
-const menuItems: Ref<MenuItem[]> = ref([]);
-const rawMenu: Ref<MenuItem[]> = ref([]);
-
-function useMenuServiceFn(): MenuService {
-  const { t } = i18n.global;
-
-  function addMenuItem(item: MenuItem): void {
-    rawMenu.value.push(item);
-    constructMenu();
-  }
-
-  const upsert = createUnrefFn(
-    (array: (MenuItem | Omit<MenuItem, "icon">)[], element: MenuItem | Omit<MenuItem, "icon">) => {
-      const index = array.findIndex((_element) => _.isEqual(_.omit(_element, "title"), _.omit(element, "title")));
-      if (index > -1) {
-        array[index] = { ...element };
-      } else {
-        array.push({ ...element });
-      }
-    },
-  );
-
-  function sortByPriority(a: MenuItem, b: MenuItem): number {
-    const getPriority = (item: MenuItem): number => item.priority ?? Infinity;
-    return getPriority(a) - getPriority(b);
-  }
-
-  function sortByGroupPriority(a: MenuItem, b: MenuItem): number {
-    const getGroupPriority = (item: MenuItem): number => item.inGroupPriority ?? Infinity;
-    return getGroupPriority(a) - getGroupPriority(b);
-  }
-
-  function constructMenu(): void {
-    const constructedMenu: Ref<MenuItem[]> = ref([]);
-
-    rawMenu.value.forEach((item) => {
-      if (item.group) {
-        const isGroupExist = useArrayFind(
-          constructedMenu,
-          (m) => m.groupId === "group_" + _.snakeCase(t(item.group ?? "")),
-        );
-
-        const groupItem = _.omit(
-          {
-            ...item,
-            title: computed(() => t(item.title as string)),
-          },
-          "group",
-          "groupIcon",
-          "groupPriority",
-        );
-
-        if (isGroupExist.value && isGroupExist.value.children) {
-          upsert(isGroupExist.value.children, groupItem);
-        } else {
-          const group: Omit<MenuItem, "icon"> = {
-            groupId: "group_" + _.snakeCase(t(item.group)),
-            groupIcon: item.groupIcon ?? "",
-            title: computed(() => t(item.group as string)),
-            children: [_.omit(groupItem)],
-            priority: item.priority,
-          };
-          upsert(constructedMenu.value, group);
-        }
-      } else {
-        if (item.title) {
-          upsert(constructedMenu.value, { ...item });
-        }
-      }
-    });
-
-    menuItems.value = constructedMenu.value
-      .map(
-        (x): MenuItem => ({
-          ...x,
-          title: computed(() => t(x.title as string)),
-          id: _.snakeCase(t(x.title as string)),
-          children: x.children?.sort(sortByGroupPriority),
-        }),
-      )
-      .sort(sortByPriority);
+export function useMenuService(): MenuService {
+  const service = inject(MenuServiceKey);
+  if (!service) {
+    console.error("Menu service not found in current context. Injection chain:", getCurrentInstance());
+    throw new Error("MenuService not provided");
   }
-
-  function removeMenuItem(item: MenuItem): void {
-    const index = menuItems.value.indexOf(item);
-    menuItems.value.splice(index, 1);
-  }
-
-  return {
-    addMenuItem,
-    menuItems,
-    removeMenuItem,
-  };
+  return service;
 }
 
-const useMenuService = createSharedComposable(useMenuServiceFn);
-
-export { useMenuService };
+export { addMenuItem };

package/core/composables/useSettingsMenu/index.ts

@@ -0,0 +1,23 @@
+import { inject, provide } from "vue";
+import {
+  createSettingsMenuService,
+  ISettingsMenuService,
+  addSettingsMenuItem,
+} from "../../services/settings-menu-service";
+import { SettingsMenuServiceKey } from "../../../injection-keys";
+
+export function provideSettingsMenu(): ISettingsMenuService {
+  const settingsMenuService = createSettingsMenuService();
+  provide(SettingsMenuServiceKey, settingsMenuService);
+  return settingsMenuService;
+}
+
+export function useSettingsMenu(): ISettingsMenuService {
+  const settingsMenuService = inject(SettingsMenuServiceKey);
+  if (!settingsMenuService) {
+    throw new Error("Settings menu service not found");
+  }
+  return settingsMenuService;
+}
+
+export { addSettingsMenuItem };

package/core/composables/useTheme/index.ts

@@ -1,61 +1,62 @@
-import { useColorMode, useCycleList } from "@vueuse/core";
-import { computed, watchEffect, ref, type Ref } from "vue";
-
-export interface IUseTheme {
-  themes: Ref<string[]>;
-  current: Ref<string>;
-  next: () => void;
-  register: (customNames: string | string[]) => void;
-  unregister: (customNames: string | string[]) => void;
-  setTheme: (theme: string) => void;
-}
-
-const registeredThemes: Ref<string[]> = ref(["auto"]);
-export const useTheme = (): IUseTheme => {
-  function register(customNames: string | string[]) {
-    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
-      if (!registeredThemes.value.includes(name)) {
-        registeredThemes.value.push(name);
-      }
-    });
-  }
-
-  function unregister(customNames: string | string[]) {
-    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
-      const index = registeredThemes.value.indexOf(name);
-      if (index >= 0) {
-        registeredThemes.value.splice(index, 1);
-      }
-    });
-  }
-
-  function setTheme(theme: string) {
-    state.value = theme;
-  }
-
-  const mode = useColorMode({
-    emitAuto: true,
-    modes: {
-      ...registeredThemes.value.reduce(
-        (acc, name) => {
-          acc[name] = name;
-          return acc;
-        },
-        {} as Record<string, string>,
-      ),
-    },
-  });
-
-  const { state, next } = useCycleList(registeredThemes.value, { initialValue: mode });
-
-  watchEffect(() => (mode.value = state.value));
-
-  return {
-    themes: computed(() => registeredThemes.value),
-    current: state,
-    next,
-    register,
-    unregister,
-    setTheme,
-  };
-};
+import { BasicColorSchema, useColorMode, useCycleList } from "@vueuse/core";
+import { computed, watchEffect, ref, type Ref } from "vue";
+
+export interface IUseTheme {
+  themes: Ref<string[]>;
+  current: Ref<string>;
+  next: () => void;
+  register: (customNames: string | string[]) => void;
+  unregister: (customNames: string | string[]) => void;
+  setTheme: (theme: string) => void;
+}
+
+const registeredThemes: Ref<string[]> = ref(["auto"]);
+export const useTheme = (): IUseTheme => {
+  function register(customNames: string | string[]) {
+    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
+      if (!registeredThemes.value.includes(name)) {
+        registeredThemes.value.push(name);
+      }
+    });
+  }
+
+  function unregister(customNames: string | string[]) {
+    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
+      const index = registeredThemes.value.indexOf(name);
+      if (index >= 0) {
+        registeredThemes.value.splice(index, 1);
+      }
+    });
+  }
+
+  function setTheme(theme: string) {
+    state.value = theme;
+  }
+
+  const mode = useColorMode({
+    emitAuto: true,
+    initialValue: "light",
+    modes: {
+      ...registeredThemes.value.reduce(
+        (acc, name) => {
+          acc[name] = name;
+          return acc;
+        },
+        {} as Record<string, string>,
+      ),
+    },
+  });
+
+  const { state, next } = useCycleList(registeredThemes.value, { initialValue: mode });
+
+  watchEffect(() => (mode.value = state.value as BasicColorSchema));
+
+  return {
+    themes: computed(() => registeredThemes.value),
+    current: state,
+    next,
+    register,
+    unregister,
+    setTheme,
+  };
+};

package/core/composables/useWidgets/index.ts

@@ -0,0 +1,20 @@
+import { getCurrentInstance, inject, provide } from "vue";
+import { createWidgetService, IWidgetService, registerWidget } from "./../../services/widget-service";
+import { WidgetServiceKey } from "./../../../injection-keys";
+
+export function provideWidgetService(): IWidgetService {
+  const service = createWidgetService();
+  provide(WidgetServiceKey, service);
+  return service;
+}
+
+export function useWidgets(): IWidgetService {
+  const service = inject(WidgetServiceKey);
+  if (!service) {
+    console.error("Widget service not found in current context. Injection chain:", getCurrentInstance());
+    throw new Error("WidgetService not provided");
+  }
+  return service;
+}
+
+export { registerWidget };

package/core/constants/index.ts

@@ -1 +1,3 @@
+export const FALLBACK_BLADE_ID = "fallback-blade-id";
+
 export * from "./locale";

package/core/directives/autofocus/index.ts

@@ -1,9 +1,9 @@
-import { Directive, DirectiveBinding } from "vue";
-
-export const autofocus = {
-  mounted(el: HTMLElement, binding: DirectiveBinding): void {
-    if (binding.value) {
-      el.focus();
-    }
-  },
-} as Directive;
+import { Directive, DirectiveBinding } from "vue";
+
+export const autofocus = {
+  mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    if (binding.value) {
+      el.focus();
+    }
+  },
+} as Directive;

package/core/directives/loading/index.ts

@@ -1,13 +1,42 @@
 import { DirectiveBinding } from "vue";
 import "./styles.css";
 
+interface LoadingOptions {
+  size?: "small" | "medium" | "large";
+  color?: string;
+  blur?: boolean;
+  fullscreen?: boolean;
+}
+
 export const loading = (el: HTMLElement, binding: DirectiveBinding) => {
   const zIndex = binding.arg ? parseInt(binding.arg, 10) : 9999;
+
+  const options: LoadingOptions = typeof binding.value === "object" ? binding.value : { blur: true };
+
   if (binding.value) {
     el.classList.add("v-loading");
+
+    if (options.size) {
+      el.setAttribute("data-loading-size", options.size);
+    }
+
+    if (options.color) {
+      el.style.setProperty("--v-loading-spinner-color", options.color);
+    }
+
+    if (options.blur === false) {
+      el.classList.add("v-loading--no-blur");
+    }
+
+    if (options.fullscreen) {
+      el.classList.add("v-loading--fullscreen");
+    }
+
     el.style.setProperty("--v-loading-z-index", `${zIndex}`);
   } else {
-    el.classList.remove("v-loading");
+    el.classList.remove("v-loading", "v-loading--no-blur", "v-loading--fullscreen");
+    el.removeAttribute("data-loading-size");
     el.style.removeProperty("--v-loading-z-index");
+    el.style.removeProperty("--v-loading-spinner-color");
   }
 };

package/core/directives/loading/styles.css

@@ -1,6 +1,10 @@
 :root {
   --v-loading-bg-color: var(--additional-50);
   --v-loading-bg: rgb(from var(--v-loading-bg-color) r g b / 75%);
+  --v-loading-spinner-color: var(--primary-500, #319ed4);
+  --v-loading-spinner-size-small: 20px;
+  --v-loading-spinner-size-medium: 30px;
+  --v-loading-spinner-size-large: 40px;
 }
 
 .v-loading {
@@ -11,7 +15,7 @@
 .v-loading::before {
   content: "";
   position: absolute;
-  z-index: var(--v-loading-z-index, 9998); /* Default to 9998 if not set */
+  z-index: var(--v-loading-z-index, 9998);
   top: 0;
   right: 0;
   bottom: 0;
@@ -20,21 +24,46 @@
   backdrop-filter: blur(3px);
 }
 
+.v-loading--no-blur::before {
+  backdrop-filter: none;
+}
+
+.v-loading--fullscreen {
+  position: fixed;
+  inset: 0;
+}
+
 .v-loading::after {
   content: "";
   position: absolute;
-  z-index: calc(var(--v-loading-z-index, 9999) + 1); /* Default to 9999 + 1 if not set */
-  width: 30px;
-  height: 30px;
-  border: 4px solid #319ed4;
+  z-index: calc(var(--v-loading-z-index, 9999) + 1);
+  width: var(--v-loading-spinner-size, var(--v-loading-spinner-size-medium));
+  height: var(--v-loading-spinner-size, var(--v-loading-spinner-size-medium));
+  border: 4px solid var(--v-loading-spinner-color);
   border-right-color: transparent;
   animation: 0.75s linear infinite v-loading;
   border-radius: 50%;
-  top: calc(50% - 30px / 2);
-  left: calc(50% - 30px / 2);
+  top: calc(50% - var(--v-loading-spinner-size, var(--v-loading-spinner-size-medium)) / 2);
+  left: calc(50% - var(--v-loading-spinner-size, var(--v-loading-spinner-size-medium)) / 2);
   display: inline-block;
 }
 
+/* Размеры спиннера */
+.v-loading[data-loading-size="small"]::after {
+  --v-loading-spinner-size: var(--v-loading-spinner-size-small);
+  border-width: 2px;
+}
+
+.v-loading[data-loading-size="medium"]::after {
+  --v-loading-spinner-size: var(--v-loading-spinner-size-medium);
+  border-width: 3px;
+}
+
+.v-loading[data-loading-size="large"]::after {
+  --v-loading-spinner-size: var(--v-loading-spinner-size-large);
+  border-width: 4px;
+}
+
 @keyframes v-loading {
   to {
     transform: rotate(360deg);

package/core/plugins/i18n/index.ts

@@ -1,11 +1,11 @@
-import { createI18n } from "vue-i18n";
-
-const i18n = createI18n({
-  legacy: false,
-  globalInjection: true,
-  locale: "en",
-  fallbackLocale: "en",
-  formatFallbackMessages: true,
-});
-
-export { i18n };
+import { createI18n } from "vue-i18n";
+
+const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: "en",
+  fallbackLocale: "en",
+  formatFallbackMessages: true,
+});
+
+export { i18n };