@vc-shell/framework 1.1.54 → 1.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.54",
+  "version": "1.1.55",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -82,9 +82,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.54",
-    "@vc-shell/config-generator": "^1.1.54",
-    "@vc-shell/ts-config": "^1.1.54",
+    "@vc-shell/api-client-generator": "^1.1.55",
+    "@vc-shell/config-generator": "^1.1.55",
+    "@vc-shell/ts-config": "^1.1.55",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/shared/composables/index.ts

@@ -1,3 +1,5 @@
 export * from "./useMenuExpanded";
 export * from "./useModificationTracker";
 export * from "./useTableSort";
+export * from "./useBladeMultilanguage";
+export * from "./useExternalWidgets";

package/shared/composables/useBladeMultilanguage.ts

@@ -0,0 +1,75 @@
+import { ref, computed, watchEffect, type Ref } from "vue";
+import { useLanguages } from "../../core/composables";
+
+interface LanguageOption {
+  value: string;
+  label: string | undefined;
+}
+
+interface LanguageOptionWithFlag extends LanguageOption {
+  flag?: string;
+}
+
+interface UseBladeMultilanguageParams {
+  localesOptions: Ref<LanguageOption[]>;
+  currentLocale: Ref<string>;
+  setLocale: (locale: string) => void;
+}
+
+interface UseBladeMultilanguageReturn {
+  languageOptionsWithFlags: Ref<LanguageOptionWithFlag[]>;
+  currentLanguageOption: Ref<LanguageOptionWithFlag | undefined>;
+  isLoadingFlags: Ref<boolean>;
+  setLocale: (locale: string) => void;
+  isMultilanguage: Ref<boolean>;
+}
+
+/**
+ * Composable for preparing data for the language switcher in blades.
+ * @param {UseBladeMultilanguageParams} params - Parameters including languages, current locale, and a function to set it.
+ * @returns {UseBladeMultilanguageReturn} - Reactive data and actions for use in DataContext.
+ */
+export function useBladeMultilanguage({
+  localesOptions,
+  currentLocale,
+  setLocale,
+}: UseBladeMultilanguageParams): UseBladeMultilanguageReturn {
+  const { getFlag } = useLanguages();
+
+  const languageOptionsWithFlags = ref<LanguageOptionWithFlag[]>([]);
+  const isLoadingFlags = ref(false);
+
+  const isMultilanguage = computed(() => localesOptions.value.length > 1);
+
+  watchEffect(async () => {
+    if (!isMultilanguage.value) {
+      languageOptionsWithFlags.value = [];
+      return;
+    }
+
+    isLoadingFlags.value = true;
+    const options = await Promise.all(
+      localesOptions.value.map(async (lang) => ({
+        ...lang,
+        flag: await getFlag(lang.value ?? ""),
+      })),
+    );
+
+    console.log("options", options);
+
+    languageOptionsWithFlags.value = options;
+    isLoadingFlags.value = false;
+  });
+
+  const currentLanguageOption = computed(() => {
+    return languageOptionsWithFlags.value.find((lang) => lang.value === currentLocale.value);
+  });
+
+  return {
+    languageOptionsWithFlags,
+    currentLanguageOption,
+    isLoadingFlags,
+    setLocale,
+    isMultilanguage,
+  };
+}

package/shared/composables/useExternalWidgets.ts

@@ -0,0 +1,111 @@
+import { computed, inject, onMounted, watchEffect, Ref, ComputedRef } from "vue";
+import { WidgetServiceKey, BladeInstance } from "../../injection-keys";
+import { IWidget, IExternalWidgetRegistration } from "../../core/services/widget-service";
+
+export interface UseExternalWidgetsOptions {
+  bladeType: string;
+  bladeData: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>;
+  autoRegister?: boolean; // Automatic registration when mounted
+  autoUpdateProps?: boolean; // Automatic update of props when data changes
+}
+
+export function useExternalWidgets(options: UseExternalWidgetsOptions) {
+  const { bladeType, bladeData, autoRegister = true, autoUpdateProps = true } = options;
+
+  const widgetService = inject(WidgetServiceKey);
+  const blade = inject(BladeInstance);
+
+  const registeredExternalWidgetIds = new Set<string>();
+
+  const registerExternalWidgets = () => {
+    if (!widgetService || !blade?.value.id) {
+      console.warn("Widget service or blade ID not available");
+      return;
+    }
+
+    const externalWidgets = widgetService.getExternalWidgetsForBlade(bladeType);
+
+    externalWidgets.forEach((externalWidget) => {
+      // Check if the widget is already registered
+      if (registeredExternalWidgetIds.has(externalWidget.id)) {
+        return;
+      }
+
+      const widget: IWidget = {
+        id: externalWidget.id,
+        component: externalWidget.component,
+        config: externalWidget.config,
+        isVisible: externalWidget.isVisible,
+        title: externalWidget.title,
+        updateFunctionName: externalWidget.updateFunctionName,
+        // Initially allow props
+        props: widgetService.resolveWidgetProps(
+          { id: externalWidget.id, component: externalWidget.component, config: externalWidget.config },
+          bladeData.value,
+        ),
+      };
+
+      try {
+        widgetService.registerWidget(widget, blade.value.id);
+        registeredExternalWidgetIds.add(externalWidget.id);
+      } catch (error) {
+        console.error(`Failed to register external widget '${externalWidget.id}':`, error);
+      }
+    });
+  };
+
+  // Update widget props when blade data changes
+  const updateWidgetProps = () => {
+    if (!widgetService || !blade?.value.id) return;
+
+    const widgets = widgetService.getWidgets(blade.value.id);
+
+    widgets.forEach((widget) => {
+      if (widget.config && registeredExternalWidgetIds.has(widget.id)) {
+        try {
+          const resolvedProps = widgetService.resolveWidgetProps(widget, bladeData.value);
+
+          widgetService.updateWidget({
+            id: widget.id,
+            bladeId: blade.value.id,
+            widget: { props: resolvedProps },
+          });
+        } catch (error) {
+          console.error(`Failed to update props for widget '${widget.id}':`, error);
+        }
+      }
+    });
+  };
+
+  // Unregister external widgets when unmounted
+  const unregisterExternalWidgets = () => {
+    if (!widgetService || !blade?.value.id) return;
+
+    registeredExternalWidgetIds.forEach((widgetId) => {
+      try {
+        widgetService.unregisterWidget(widgetId, blade.value.id);
+      } catch (error) {
+        console.error(`Failed to unregister external widget '${widgetId}':`, error);
+      }
+    });
+
+    registeredExternalWidgetIds.clear();
+  };
+
+  // Automatic registration when mounted
+  if (autoRegister) {
+    onMounted(registerExternalWidgets);
+  }
+
+  // Automatic update of props when blade data changes
+  if (autoUpdateProps) {
+    watchEffect(updateWidgetProps);
+  }
+
+  return {
+    registerExternalWidgets,
+    updateWidgetProps,
+    unregisterExternalWidgets,
+    registeredExternalWidgetIds: computed(() => Array.from(registeredExternalWidgetIds)),
+  };
+}

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/desktop/vc-blade-toolbar-desktop.vue

@@ -119,7 +119,7 @@ watch(
   }
 
   &__more {
-    @apply tw-flex tw-items-center tw-gap-2 tw-px-2 tw-cursor-pointer tw-text-[var(--blade-toolbar-desktop-more-color)] tw-flex-col;
+    @apply tw-flex tw-items-center tw-gap-1 tw-px-2 tw-cursor-pointer tw-text-[var(--blade-toolbar-desktop-more-color)] tw-flex-col;
 
     &-text {
       @apply tw-text-xs;