@vc-shell/framework 1.1.0-alpha.9 → 1.1.1

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,62 +1,64 @@
-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,
-  };
-};
+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/useToolbar.ts

@@ -0,0 +1,88 @@
+import { ComputedRef, computed, getCurrentInstance, inject, onBeforeUnmount } from "vue";
+import { BladeInstance, TOOLBAR_SERVICE } from "../../injection-keys";
+import { IToolbarItem, IToolbarService, createToolbarService } from "../services/toolbar-service";
+import { FALLBACK_BLADE_ID } from "../constants";
+import { IBladeInstance } from "../../shared/components/blade-navigation/types";
+
+// Global toolbar service (if not provided through provide/inject)
+let globalToolbarService: IToolbarService | null = null;
+
+/**
+ * Composable for working with the toolbar
+ * @returns Methods for managing toolbar buttons
+ */
+export function useToolbar() {
+  // Try to get the service from dependency injection
+  const toolbarService = inject<IToolbarService | null>(TOOLBAR_SERVICE, null);
+
+  // If the service is not injected, create a global one
+  if (!toolbarService && !globalToolbarService) {
+    globalToolbarService = createToolbarService();
+  }
+
+  const service = toolbarService || globalToolbarService;
+
+  if (!service) {
+    throw new Error("Toolbar service is not available");
+  }
+
+  // Get the ID of the current blade
+  const blade = inject<ComputedRef<IBladeInstance>>(
+    BladeInstance,
+    computed(() => ({
+      id: FALLBACK_BLADE_ID,
+      expandable: false,
+      maximized: false,
+      error: undefined,
+      navigation: undefined,
+      breadcrumbs: undefined,
+    })),
+  );
+
+  const bladeId = computed(() => blade.value?.id ?? FALLBACK_BLADE_ID);
+
+  // Functions for working with the toolbar
+  /**
+   * Registers a toolbar button
+   * @param toolbarItem - Toolbar button object
+   * @param toolbarItem.id - Unique identifier of the button
+   * @param toolbarItem.priority - Button priority (higher - more important, displayed at the beginning). Default is 0.
+   */
+  const registerToolbarItem = (toolbarItem: IToolbarItem) => {
+    service.registerToolbarItem(toolbarItem, bladeId.value);
+  };
+
+  const unregisterToolbarItem = (toolbarItemId: string) => {
+    service.unregisterToolbarItem(toolbarItemId, bladeId.value);
+  };
+
+  const updateToolbarItem = (id: string, toolbarItem: Partial<IToolbarItem>) => {
+    service.updateToolbarItem({ id, bladeId: bladeId.value, toolbarItem });
+  };
+
+  const getToolbarItems = () => {
+    return service.getToolbarItems(bladeId.value);
+  };
+
+  const clearBladeToolbarItems = () => {
+    service.clearBladeToolbarItems(bladeId.value);
+  };
+
+  // Automatic cleanup when the component is unmounted
+  const instance = getCurrentInstance();
+  if (instance) {
+    onBeforeUnmount(() => {
+      clearBladeToolbarItems();
+    });
+  }
+
+  return {
+    registerToolbarItem,
+    unregisterToolbarItem,
+    updateToolbarItem,
+    getToolbarItems,
+    clearBladeToolbarItems,
+    isToolbarItemRegistered: service.isToolbarItemRegistered,
+    registeredToolbarItems: service.registeredToolbarItems,
+  };
+}

package/core/services/app-bar-menu-service.ts

@@ -0,0 +1,87 @@
+import { ref, computed, Component, ComputedRef } from "vue";
+
+export interface AppBarWidget {
+  id: string;
+  order?: number;
+  icon?: Component | string;
+  component?: Component;
+  props?: Record<string, unknown>;
+  onClick?: () => void;
+  slot?: string;
+  badge?: boolean | (() => boolean);
+}
+
+export interface registerAppBarWidgetOptions extends Omit<AppBarWidget, "id"> {
+  id?: string;
+}
+
+export interface IAppBarWidgetService {
+  register: (options: registerAppBarWidgetOptions) => string;
+  unregister: (id: string) => void;
+  items: ComputedRef<AppBarWidget[]>;
+}
+
+// Global state for pre-registering AppBar menu items
+const preregisteredAppBarMenuItems: AppBarWidget[] = [];
+const appBarMenuItems = ref<Map<string, AppBarWidget>>(new Map());
+
+/**
+ * Registers an AppBar menu item before the service is initialized
+ */
+export function addAppBarWidget(item: registerAppBarWidgetOptions): void {
+  const id = item.id || crypto.randomUUID();
+  preregisteredAppBarMenuItems.push({
+    id,
+    order: item.order ?? preregisteredAppBarMenuItems.length,
+    icon: item.icon,
+    component: item.component,
+    props: item.props,
+    onClick: item.onClick,
+    slot: item.slot,
+    badge: item.badge,
+  });
+}
+
+/**
+ * Creates an AppBar menu service
+ * Manages the registration and organization of AppBar menu items
+ */
+export function createAppBarWidgetService(): IAppBarWidgetService {
+  const register = (options: registerAppBarWidgetOptions): string => {
+    const id = options.id || crypto.randomUUID();
+    appBarMenuItems.value.set(id, {
+      id,
+      order: options.order ?? appBarMenuItems.value.size,
+      icon: options.icon,
+      component: options.component,
+      props: options.props,
+      onClick: options.onClick,
+      slot: options.slot,
+      badge: options.badge,
+    });
+    return id;
+  };
+
+  const unregister = (id: string): void => {
+    appBarMenuItems.value.delete(id);
+  };
+
+  const items = computed<AppBarWidget[]>(() => {
+    return Array.from(appBarMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  });
+
+  // Register pre-added widgets
+  preregisteredAppBarMenuItems.forEach((item) => {
+    try {
+      register(item);
+    } catch (e) {
+      console.warn(`Failed to register pre-added AppBar widget ${item.id}:`, e);
+    }
+  });
+
+  return {
+    register,
+    unregister,
+    items,
+  };
+}

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

@@ -0,0 +1,8 @@
+export * from "./app-bar-menu-service";
+export * from "./app-bar-mobile-buttons-service";
+export * from "./dashboard-service";
+export * from "./global-search-service";
+export * from "./menu-service";
+export * from "./settings-menu-service";
+export * from "./toolbar-service";
+export * from "./widget-service";

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

@@ -0,0 +1,141 @@
+import { reactive, ref, ComputedRef, Ref } from "vue";
+import { IBladeToolbar } from "../types";
+
+export interface IToolbarItem extends IBladeToolbar {
+  id: string;
+  bladeId?: string;
+  priority?: number;
+}
+
+export interface IToolbarRegistration {
+  bladeId: string;
+  toolbarItem: IToolbarItem;
+}
+
+export interface IToolbarService {
+  registerToolbarItem: (toolbarItem: IToolbarItem, bladeId: string) => void;
+  unregisterToolbarItem: (toolbarItemId: string, bladeId: string) => void;
+  getToolbarItems: (bladeId: string) => IToolbarItem[];
+  clearBladeToolbarItems: (bladeId: string) => void;
+  registeredToolbarItems: IToolbarRegistration[];
+  isToolbarItemRegistered: (id: string) => boolean;
+  updateToolbarItem: ({
+    id,
+    bladeId,
+    toolbarItem,
+  }: {
+    id: string;
+    bladeId: string;
+    toolbarItem: Partial<IToolbarItem>;
+  }) => void;
+}
+
+// Global state for pre-registering toolbar buttons
+const preregisteredToolbarItems: IToolbarRegistration[] = [];
+const preregisteredIds = new Set<string>();
+
+/**
+ * Registers a toolbar button before the service is initialized
+ */
+export function registerToolbarItem(toolbarItem: IToolbarItem, bladeId: string): void {
+  preregisteredToolbarItems.push({ bladeId, toolbarItem });
+  preregisteredIds.add(toolbarItem.id);
+}
+
+export function createToolbarService(): IToolbarService {
+  const toolbarRegistry = reactive<Record<string, IToolbarItem[]>>({});
+  const registeredToolbarItems = reactive<IToolbarRegistration[]>([]);
+  const registeredIds = reactive(new Set<string>());
+
+  const registerToolbarItem = (toolbarItem: IToolbarItem, bladeId: string): void => {
+    if (!toolbarRegistry[bladeId]) {
+      toolbarRegistry[bladeId] = [];
+    }
+
+    const existingIndex = toolbarRegistry[bladeId].findIndex((t) => t.id === toolbarItem.id);
+    if (existingIndex === -1) {
+      toolbarRegistry[bladeId].push(reactive(toolbarItem));
+      registeredToolbarItems.push({ bladeId, toolbarItem: reactive(toolbarItem) });
+      registeredIds.add(toolbarItem.id);
+    }
+  };
+
+  const updateToolbarItem = ({
+    id,
+    bladeId,
+    toolbarItem,
+  }: {
+    id: string;
+    bladeId: string;
+    toolbarItem: Partial<IToolbarItem>;
+  }): void => {
+    if (toolbarRegistry[bladeId]) {
+      const index = toolbarRegistry[bladeId].findIndex((t) => t.id === id);
+      if (index !== -1) {
+        toolbarRegistry[bladeId][index] = { ...toolbarRegistry[bladeId][index], ...toolbarItem };
+      }
+    }
+  };
+
+  const unregisterToolbarItem = (toolbarItemId: string, bladeId: string): void => {
+    if (toolbarRegistry[bladeId]) {
+      const index = toolbarRegistry[bladeId].findIndex((t) => t.id === toolbarItemId);
+      if (index !== -1) {
+        toolbarRegistry[bladeId].splice(index, 1);
+        registeredIds.delete(toolbarItemId);
+      }
+    }
+
+    const regIndex = registeredToolbarItems.findIndex(
+      (t) => t.bladeId === bladeId && t.toolbarItem.id === toolbarItemId,
+    );
+    if (regIndex !== -1) {
+      registeredToolbarItems.splice(regIndex, 1);
+    }
+  };
+
+  const getToolbarItems = (bladeId: string): IToolbarItem[] => {
+    return toolbarRegistry[bladeId] || [];
+  };
+
+  const clearBladeToolbarItems = (bladeId: string): void => {
+    if (toolbarRegistry[bladeId]) {
+      toolbarRegistry[bladeId].forEach((toolbarItem) => {
+        registeredIds.delete(toolbarItem.id);
+      });
+      delete toolbarRegistry[bladeId];
+    }
+
+    const indices = registeredToolbarItems
+      .map((t, i) => (t.bladeId === bladeId ? i : -1))
+      .filter((i) => i !== -1)
+      .reverse();
+
+    indices.forEach((index) => {
+      registeredToolbarItems.splice(index, 1);
+    });
+  };
+
+  const isToolbarItemRegistered = (id: string): boolean => {
+    return registeredIds.has(id);
+  };
+
+  // Register pre-registered toolbar buttons
+  preregisteredToolbarItems.forEach((item) => {
+    try {
+      registerToolbarItem(item.toolbarItem, item.bladeId);
+    } catch (e) {
+      console.warn(`Failed to register preregistered toolbar item ${item.toolbarItem.id}:`, e);
+    }
+  });
+
+  return {
+    registerToolbarItem,
+    unregisterToolbarItem,
+    getToolbarItems,
+    clearBladeToolbarItems,
+    registeredToolbarItems,
+    isToolbarItemRegistered,
+    updateToolbarItem,
+  };
+}