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

package/core/services/app-bar-mobile-buttons-service.ts

@@ -0,0 +1,57 @@
+import { ComputedRef, ref, computed, Component, MaybeRef, Ref } from "vue";
+
+export interface AppBarButtonContent {
+  id: string;
+  component?: Component;
+  props?: Record<string, unknown>;
+  icon?: Component;
+  onClick?: () => void;
+  order?: number;
+  onClose?: () => void;
+  isVisible?: MaybeRef<boolean> | ComputedRef<boolean>;
+}
+
+export interface IAppBarMobileButtonsService {
+  registeredButtons: ComputedRef<AppBarButtonContent[]>;
+  register: (button: AppBarButtonContent) => void;
+  unregister: (buttonId: string) => void;
+  getButton: (buttonId: string) => AppBarButtonContent | undefined;
+  getButtons: ComputedRef<AppBarButtonContent[]>;
+}
+
+/**
+ * Creates a service for managing mobile AppBar buttons
+ * Handles button registration and retrieval for mobile app bar
+ */
+export function createAppBarMobileButtonsService(): IAppBarMobileButtonsService {
+  const registeredButtonsState = ref<AppBarButtonContent[]>([]) as Ref<AppBarButtonContent[]>;
+  const registeredButtons = computed(() => registeredButtonsState.value);
+
+  const register = (button: AppBarButtonContent) => {
+    const existingButtonIndex = registeredButtonsState.value.findIndex((b) => b.id === button.id);
+
+    if (existingButtonIndex >= 0) {
+      registeredButtonsState.value[existingButtonIndex] = button;
+    } else {
+      registeredButtonsState.value.push(button);
+    }
+  };
+
+  const unregister = (buttonId: string) => {
+    registeredButtonsState.value = registeredButtonsState.value.filter((button) => button.id !== buttonId);
+  };
+
+  const getButton = (buttonId: string) => {
+    return registeredButtonsState.value.find((button) => button.id === buttonId);
+  };
+
+  const getButtons = computed(() => [...registeredButtonsState.value].sort((a, b) => (a.order || 0) - (b.order || 0)));
+
+  return {
+    registeredButtons,
+    register,
+    unregister,
+    getButton,
+    getButtons,
+  };
+}

package/core/services/dashboard-service.ts

@@ -0,0 +1,121 @@
+import { reactive, Component } from "vue";
+import { DashboardServiceKey } from "../../injection-keys";
+import { usePermissions } from "../composables/usePermissions";
+
+export interface DashboardWidgetSize {
+  width: number;
+  height: number;
+}
+
+export interface DashboardWidgetPosition {
+  x: number;
+  y: number;
+}
+
+export interface DashboardWidget {
+  id: string;
+  name: string;
+  component: Component;
+  size: DashboardWidgetSize;
+  position?: DashboardWidgetPosition;
+  permissions?: string[];
+  props?: Record<string, unknown>;
+}
+
+export interface IDashboardService {
+  registerWidget: (widget: DashboardWidget) => void;
+  getWidgets: () => DashboardWidget[];
+  updateWidgetPosition: (widgetId: string, position: DashboardWidgetPosition) => void;
+  getLayout: () => Map<string, DashboardWidgetPosition>;
+}
+
+// Global state for pre-registering widgets
+const preregisteredWidgets: DashboardWidget[] = [];
+
+/**
+ * Registers a widget before the service is initialized
+ */
+export function registerDashboardWidget(widget: DashboardWidget): void {
+  const existingWidget = preregisteredWidgets.find((w) => w.id === widget.id);
+  if (!existingWidget) {
+    preregisteredWidgets.push(widget);
+  }
+}
+
+const createState = () => ({
+  widgets: reactive<Map<string, DashboardWidget>>(new Map()),
+  layout: reactive<Map<string, DashboardWidgetPosition>>(new Map()),
+});
+
+/**
+ * Creates a service for managing dashboard widgets
+ */
+export function createDashboardService(): IDashboardService {
+  const state = createState();
+  const { hasAccess } = usePermissions();
+
+  const registerWidget = (widget: DashboardWidget): void => {
+    if (state.widgets.has(widget.id)) {
+      throw new Error(`Widget with id ${widget.id} already registered`);
+    }
+
+    state.widgets.set(widget.id, widget);
+
+    // If the position is not specified, add the widget to the end
+    if (!widget.position) {
+      const lastWidget = Array.from(state.layout.values()).reduce((max, pos) => {
+        return pos.y > max ? pos.y : max;
+      }, 0);
+
+      state.layout.set(widget.id, {
+        x: 0,
+        y: lastWidget + 1,
+      });
+    } else {
+      state.layout.set(widget.id, widget.position);
+    }
+  };
+
+  /**
+   * Returns a list of widgets with access rights
+   */
+  const getWidgets = (): DashboardWidget[] => {
+    return Array.from(state.widgets.values()).filter((widget) => {
+      // If the widget has no permissions requirements, show it to everyone
+      if (!widget.permissions || widget.permissions.length === 0) {
+        return true;
+      }
+
+      // Check if the user has the necessary permissions
+      return hasAccess(widget.permissions);
+    });
+  };
+
+  const updateWidgetPosition = (widgetId: string, position: DashboardWidgetPosition): void => {
+    if (!state.widgets.has(widgetId)) {
+      throw new Error(`Widget with id ${widgetId} not found`);
+    }
+
+    state.layout.set(widgetId, position);
+  };
+
+  const getLayout = (): Map<string, DashboardWidgetPosition> => {
+    return state.layout;
+  };
+
+  // Register pre-registered widgets
+  preregisteredWidgets.forEach((widget) => {
+    try {
+      registerWidget(widget);
+    } catch (e) {
+      console.warn(`Failed to register preregistered widget ${widget.id}:`, e);
+    }
+  });
+
+  return {
+    registerWidget,
+    getWidgets,
+    updateWidgetPosition,
+    getLayout,
+  };
+}

package/core/services/global-search-service.ts

@@ -0,0 +1,36 @@
+import { Ref, ref } from "vue";
+
+export interface GlobalSearchState {
+  isSearchVisible: Ref<Record<string, boolean>>;
+  searchQuery: Ref<Record<string, string>>;
+  toggleSearch: (bladeId: string) => void;
+  setSearchQuery: (bladeId: string, query: string) => void;
+  closeSearch: (bladeId: string) => void;
+}
+
+export function createGlobalSearchService() {
+  const isSearchVisible = ref<Record<string, boolean>>({});
+  const searchQuery = ref<Record<string, string>>({});
+
+  const toggleSearch = (bladeId: string) => {
+    isSearchVisible.value[bladeId] = !isSearchVisible.value[bladeId];
+  };
+
+  const setSearchQuery = (bladeId: string, query: string) => {
+    searchQuery.value[bladeId] = query;
+  };
+
+  const closeSearch = (bladeId: string) => {
+    isSearchVisible.value[bladeId] = false;
+  };
+
+  const state: GlobalSearchState = {
+    isSearchVisible,
+    searchQuery,
+    toggleSearch,
+    setSearchQuery,
+    closeSearch,
+  };
+
+  return state;
+}

package/core/services/menu-service.ts

@@ -0,0 +1,235 @@
+import { Component, computed, ComputedRef, ref, watch, type Ref } from "vue";
+import * as _ from "lodash-es";
+import { i18n } from "./../plugins/i18n";
+import type { MenuItem } from "../types";
+import { createUnrefFn, useArrayFind } from "@vueuse/core";
+
+// Global state for pre-registering menu items
+const preregisteredMenuItems: Ref<MenuItem[]> = ref([]);
+
+/**
+ * Registers a menu item before the service is initialized
+ */
+export function addMenuItem(item: MenuItem): void {
+  preregisteredMenuItems.value.push(item);
+}
+
+export interface MenuService {
+  addMenuItem: (item: MenuItem) => void;
+  menuItems: Ref<MenuItem[]>;
+  removeMenuItem: (item: MenuItem) => void;
+}
+
+// Default priority values
+const DEFAULT_PRIORITY = Infinity;
+const DEFAULT_GROUP_PRIORITY = Infinity;
+
+// State
+const menuItems: Ref<MenuItem[]> = ref([]);
+const rawMenu: Ref<MenuItem[]> = ref([]);
+
+/**
+ * Menu service implementation
+ * Handles the registration and organization of menu items
+ */
+export function createMenuService(): MenuService {
+  const { t } = i18n.global;
+
+  /**
+   * Add a new menu item to the raw menu and rebuild the menu structure
+   * @param item - The menu item to add
+   */
+  function addMenuItem(item: MenuItem): void {
+    rawMenu.value.push(item);
+    constructMenu();
+  }
+
+  /**
+   * Removes a menu item from the menu
+   * @param item - The menu item to remove
+   */
+  function removeMenuItem(item: MenuItem): void {
+    const index = menuItems.value.indexOf(item);
+    if (index !== -1) {
+      menuItems.value.splice(index, 1);
+    }
+  }
+
+  /**
+   * Updates an element in an array or adds it if not found
+   */
+  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 });
+      }
+    },
+  );
+
+  /**
+   * Sorts menu items by their priority
+   */
+  function sortByPriority(a: MenuItem, b: MenuItem): number {
+    const getPriority = (item: MenuItem): number => item.priority ?? DEFAULT_PRIORITY;
+    return getPriority(a) - getPriority(b);
+  }
+
+  /**
+   * Sorts items within a group by their inGroupPriority / priority
+   */
+  function sortByGroupPriority(a: MenuItem, b: MenuItem): number {
+    const getGroupPriority = (item: MenuItem): number =>
+      item.inGroupPriority ?? item.priority ?? DEFAULT_GROUP_PRIORITY;
+    return getGroupPriority(a) - getGroupPriority(b);
+  }
+
+  /**
+   * Creates a localized ID from a title
+   */
+  function createItemId(title: string | ComputedRef<string>): string {
+    const titleValue = typeof title === "string" ? t(title) : title.value;
+    return _.snakeCase(titleValue);
+  }
+
+  /**
+   * Creates a localized computed title
+   */
+  function createLocalizedTitle(title: string): ComputedRef<string> {
+    return computed(() => t(title));
+  }
+
+  /**
+   * Processes a menu item that belongs to a group
+   */
+  function processGroupItem(item: MenuItem, constructedMenu: Ref<MenuItem[]>): void {
+    // Skip if no group information provided
+    if (!item.group && !item.groupConfig) return;
+
+    let groupId: string;
+    let groupTitle: string;
+    let groupIcon: string | Component | undefined;
+    let groupPriority: number | undefined;
+    let groupPermissions: string | string[] | undefined;
+
+    // Prefer groupConfig over legacy group properties
+    if (item.groupConfig) {
+      // Use the explicit group ID from groupConfig
+      groupId = item.groupConfig.id;
+      groupTitle = item.groupConfig.title || groupId;
+      groupIcon = item.groupConfig.icon;
+      groupPriority = item.groupConfig.priority;
+      groupPermissions = item.groupConfig.permissions;
+    } else {
+      // Fallback to legacy group properties
+      groupId = "group_" + createItemId(item.group as string);
+      groupTitle = item.group as string;
+      groupIcon = item.groupIcon;
+      groupPriority = item.priority; // Use item priority as group priority for legacy
+    }
+
+    const existingGroup = useArrayFind(constructedMenu, (m) => m.groupId === groupId);
+
+    // Create the item to be added to the group
+    const groupItem = {
+      ..._.omit(item, ["group", "groupIcon", "groupPriority", "groupConfig"]),
+      title: createLocalizedTitle(item.title as string),
+    } as MenuItem;
+
+    if (existingGroup.value && existingGroup.value.children) {
+      // Add to existing group
+      upsert(existingGroup.value.children, groupItem);
+
+      // Update existing group properties if using groupConfig
+      if (item.groupConfig) {
+        if (item.groupConfig.title) {
+          existingGroup.value.title = createLocalizedTitle(item.groupConfig.title);
+        }
+        if (item.groupConfig.icon !== undefined) {
+          existingGroup.value.groupIcon = item.groupConfig.icon;
+        }
+        if (item.groupConfig.priority !== undefined) {
+          existingGroup.value.priority = item.groupConfig.priority;
+        }
+        if (item.groupConfig.permissions !== undefined) {
+          existingGroup.value.permissions = item.groupConfig.permissions;
+        }
+      }
+    } else {
+      // Create a new group with this item
+      const group = {
+        groupId,
+        groupIcon: groupIcon ?? "",
+        title: createLocalizedTitle(groupTitle),
+        children: [groupItem],
+        priority: groupPriority ?? item.priority ?? DEFAULT_PRIORITY,
+        permissions: groupPermissions,
+      } as MenuItem;
+      upsert(constructedMenu.value, group);
+    }
+  }
+
+  /**
+   * Processes a standalone menu item (not in a group)
+   */
+  function processStandaloneItem(item: MenuItem, constructedMenu: Ref<MenuItem[]>): void {
+    if (item.title) {
+      const standaloneItem = {
+        ...item,
+        title: createLocalizedTitle(item.title as string),
+      } as MenuItem;
+      upsert(constructedMenu.value, standaloneItem);
+    }
+  }
+
+  /**
+   * Finalizes menu items by adding IDs and sorting children
+   */
+  function finalizeMenuItems(items: MenuItem[]): MenuItem[] {
+    return items
+      .map(
+        (item): MenuItem => ({
+          ...item,
+          title: createLocalizedTitle(item.title as string),
+          id: item.id || createItemId(item.title as ComputedRef<string>),
+          children: item.children?.sort(sortByGroupPriority),
+        }),
+      )
+      .sort(sortByPriority);
+  }
+
+  /**
+   * Constructs the complete menu structure from raw menu items
+   */
+  function constructMenu(): void {
+    const constructedMenu: Ref<MenuItem[]> = ref([]);
+
+    // Process each raw menu item
+    rawMenu.value.forEach((item) => {
+      if (item.group || item.groupConfig) {
+        processGroupItem(item, constructedMenu);
+      } else {
+        processStandaloneItem(item, constructedMenu);
+      }
+    });
+
+    // Finalize and set the menu items
+    menuItems.value = finalizeMenuItems(constructedMenu.value);
+  }
+
+  preregisteredMenuItems.value.forEach((item) => {
+    try {
+      addMenuItem(item);
+    } catch (e) {
+      console.warn(`Failed to register preregistered menu item ${item.id || item.title}:`, e);
+    }
+  });
+
+  return {
+    addMenuItem,
+    menuItems,
+    removeMenuItem,
+  };
+}

package/core/services/settings-menu-service.ts

@@ -0,0 +1,75 @@
+import { ref, computed, Component, ComputedRef } from "vue";
+
+export interface SettingsMenuItem {
+  id: string;
+  order?: number;
+  component: Component;
+  props?: Record<string, unknown>;
+}
+
+export interface RegisterSettingsMenuItemOptions extends Omit<SettingsMenuItem, "id"> {
+  id?: string;
+}
+
+export interface ISettingsMenuService {
+  register: (options: RegisterSettingsMenuItemOptions) => string;
+  unregister: (id: string) => void;
+  items: ComputedRef<SettingsMenuItem[]>;
+}
+
+// Global state for pre-registering settings menu items
+const preregisteredSettingsMenuItems: SettingsMenuItem[] = [];
+const settingsMenuItems = ref<Map<string, SettingsMenuItem>>(new Map());
+
+/**
+ * Registers a settings menu item before the service is initialized
+ */
+export function addSettingsMenuItem(item: RegisterSettingsMenuItemOptions): void {
+  const id = item.id || crypto.randomUUID();
+  preregisteredSettingsMenuItems.push({
+    id,
+    order: item.order ?? preregisteredSettingsMenuItems.length,
+    component: item.component,
+    props: item.props,
+  });
+}
+
+/**
+ * Creates a settings menu service
+ * Manages the registration and organization of settings menu items
+ */
+export function createSettingsMenuService(): ISettingsMenuService {
+  const register = (options: RegisterSettingsMenuItemOptions): string => {
+    const id = options.id || crypto.randomUUID();
+    settingsMenuItems.value.set(id, {
+      id,
+      order: options.order ?? settingsMenuItems.value.size,
+      component: options.component,
+      props: options.props,
+    });
+    return id;
+  };
+
+  const unregister = (id: string): void => {
+    settingsMenuItems.value.delete(id);
+  };
+
+  const items = computed<SettingsMenuItem[]>(() => {
+    return Array.from(settingsMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  });
+
+  // Register pre-added settings menu items
+  preregisteredSettingsMenuItems.forEach((item) => {
+    try {
+      register(item);
+    } catch (e) {
+      console.warn(`Failed to register pre-added settings menu item ${item.id}:`, e);
+    }
+  });
+
+  return {
+    register,
+    unregister,
+    items,
+  };
+}

package/core/services/widget-service.ts

@@ -0,0 +1,147 @@
+import { ConcreteComponent, reactive, ref, ComponentInternalInstance } from "vue";
+
+export type WidgetEventHandler = (...args: unknown[]) => void;
+
+export interface IWidgetEvents {
+  [key: string]: Set<WidgetEventHandler>;
+}
+
+export interface IWidget {
+  id: string;
+  title?: string;
+  component: ConcreteComponent;
+  props?: Record<string, unknown>;
+  events?: Record<string, unknown>;
+  onOpen?: (blade: { id: string }) => void;
+  onClose?: (blade: { id: string }) => void;
+}
+
+export interface IWidgetRegistration {
+  bladeId: string;
+  widget: IWidget;
+}
+
+export interface IWidgetService {
+  registerWidget: (widget: IWidget, bladeId: string) => void;
+  unregisterWidget: (widgetId: string, bladeId: string) => void;
+  getWidgets: (bladeId: string) => IWidget[];
+  clearBladeWidgets: (bladeId: string) => void;
+  registeredWidgets: IWidgetRegistration[];
+  isActiveWidget: (id: string) => boolean;
+  setActiveWidget: (ref: ComponentInternalInstance["exposed"]) => void;
+  updateActiveWidget: () => void;
+  isWidgetRegistered: (id: string) => boolean;
+}
+
+// Global state for pre-registering widgets
+const preregisteredWidgets: IWidgetRegistration[] = [];
+const preregisteredIds = new Set<string>();
+
+/**
+ * Registers a widget before the service is initialized
+ */
+export function registerWidget(widget: IWidget, bladeId: string): void {
+  preregisteredWidgets.push({ bladeId, widget });
+  preregisteredIds.add(widget.id);
+}
+
+export function createWidgetService(): IWidgetService {
+  const widgetRegistry = reactive<Record<string, IWidget[]>>({});
+  const registeredWidgets = reactive<IWidgetRegistration[]>([]);
+  const activeWidgetRef = ref();
+  const registeredIds = reactive(new Set<string>());
+
+  const registerWidget = (widget: IWidget, bladeId: string): void => {
+    if (!widgetRegistry[bladeId]) {
+      widgetRegistry[bladeId] = [];
+    }
+
+    const existingIndex = widgetRegistry[bladeId].findIndex((w) => w.id === widget.id);
+    if (existingIndex === -1) {
+      widgetRegistry[bladeId].push(widget);
+      registeredWidgets.push({ bladeId, widget });
+      registeredIds.add(widget.id);
+    }
+  };
+
+  const unregisterWidget = (widgetId: string, bladeId: string): void => {
+    if (widgetRegistry[bladeId]) {
+      const index = widgetRegistry[bladeId].findIndex((w) => w.id === widgetId);
+      if (index !== -1) {
+        widgetRegistry[bladeId].splice(index, 1);
+        registeredIds.delete(widgetId);
+      }
+    }
+
+    const regIndex = registeredWidgets.findIndex((w) => w.bladeId === bladeId && w.widget.id === widgetId);
+    if (regIndex !== -1) {
+      registeredWidgets.splice(regIndex, 1);
+    }
+  };
+
+  const getWidgets = (bladeId: string): IWidget[] => {
+    return widgetRegistry[bladeId] || [];
+  };
+
+  const clearBladeWidgets = (bladeId: string): void => {
+    if (widgetRegistry[bladeId]) {
+      widgetRegistry[bladeId].forEach((widget) => {
+        registeredIds.delete(widget.id);
+      });
+      delete widgetRegistry[bladeId];
+    }
+
+    const indices = registeredWidgets
+      .map((w, i) => (w.bladeId === bladeId ? i : -1))
+      .filter((i) => i !== -1)
+      .reverse();
+
+    indices.forEach((index) => {
+      registeredWidgets.splice(index, 1);
+    });
+  };
+
+  const setActiveWidget = (ref: ComponentInternalInstance["exposed"]): void => {
+    activeWidgetRef.value = undefined;
+
+    activeWidgetRef.value = ref;
+  };
+
+  const updateActiveWidget = (): void => {
+    if (!activeWidgetRef.value) {
+      return;
+    }
+
+    if (activeWidgetRef.value?.updateActiveWidgetCount) {
+      activeWidgetRef.value.updateActiveWidgetCount();
+    }
+  };
+
+  const isWidgetRegistered = (id: string): boolean => {
+    return registeredIds.has(id);
+  };
+
+  const isActiveWidget = (id: string): boolean => {
+    return activeWidgetRef.value?.id === id;
+  };
+
+  preregisteredWidgets.forEach((widget) => {
+    try {
+      registerWidget(widget.widget, widget.bladeId);
+    } catch (e) {
+      console.warn(`Failed to register preregistered widget ${widget.widget.id}:`, e);
+    }
+  });
+
+  return {
+    registerWidget,
+    unregisterWidget,
+    getWidgets,
+    clearBladeWidgets,
+    registeredWidgets,
+    isActiveWidget,
+    setActiveWidget,
+    updateActiveWidget,
+    isWidgetRegistered,
+  };
+}