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

package/core/composables/useMenuService/index.ts

@@ -1,110 +1,110 @@
-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;
-}
-
-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);
-  }
-
-  function removeMenuItem(item: MenuItem): void {
-    const index = menuItems.value.indexOf(item);
-    menuItems.value.splice(index, 1);
-  }
-
-  return {
-    addMenuItem,
-    menuItems,
-    removeMenuItem,
-  };
-}
-
-const useMenuService = createSharedComposable(useMenuServiceFn);
-
-export { useMenuService };
+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;
+}
+
+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);
+  }
+
+  function removeMenuItem(item: MenuItem): void {
+    const index = menuItems.value.indexOf(item);
+    menuItems.value.splice(index, 1);
+  }
+
+  return {
+    addMenuItem,
+    menuItems,
+    removeMenuItem,
+  };
+}
+
+const useMenuService = createSharedComposable(useMenuServiceFn);
+
+export { useMenuService };

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,18 @@
+import { getCurrentInstance, inject, provide } from "vue";
+import { createWidgetService, IWidgetService } 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;
+}

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

package/core/plugins/modularity/index.ts

@@ -7,37 +7,39 @@ import { useMenuService, useNotifications } from "../../composables";
 import * as _ from "lodash-es";
 import { notification } from "../../../shared";
 
-export const createModule = (components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) => ({
-  install(app: App): void {
-    // Register components
-    Object.entries(components).forEach(([componentName, component]) => {
-      // Check if the component is already registered
-      if (app.component(componentName)) {
-        // Remove the existing component
-        // Note: Vue does not provide a method to remove a component, so we can overwrite it
-        console.warn(
-          `Component ${componentName} is already registered. It will be overwritten with the new component.`,
-        );
-      }
-      app.component(componentName, component);
-    });
-
-    // Load locales
-    if (locales) {
-      Object.entries(locales).forEach(([key, message]) => {
-        // Merge locale messages, overwriting existing ones
-        i18n.global.mergeLocaleMessage(key, message);
+export function createModule(components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) {
+  return {
+    install(app: App): void {
+      // Register components
+      Object.entries(components).forEach(([componentName, component]) => {
+        // Check if the component is already registered
+        if (app.component(componentName)) {
+          // Remove the existing component
+          // Note: Vue does not provide a method to remove a component, so we can overwrite it
+          console.warn(
+            `Component ${componentName} is already registered. It will be overwritten with the new component.`,
+          );
+        }
+        app.component(componentName, component);
       });
-    }
-  },
-});
 
-export const createAppModule = (
+      // Load locales
+      if (locales) {
+        Object.entries(locales).forEach(([key, message]) => {
+          // Merge locale messages, overwriting existing ones
+          i18n.global.mergeLocaleMessage(key, message);
+        });
+      }
+    },
+  };
+}
+
+export function createAppModule(
   pages: { [key: string]: BladeInstanceConstructor },
   locales?: { [key: string]: object },
   notificationTemplates?: { [key: string]: Component & { notifyType?: string } },
   moduleComponents?: { [key: string]: Component },
-) => {
+) {
   return {
     install(app: App, options?: { router: Router }): void {
       let routerInstance: Router;
@@ -245,7 +247,7 @@ export const createAppModule = (
       }
     },
   };
-};
+}
 
 export * from "./loader";
 export * from "./extensions-helper";