@vc-shell/framework 1.1.54 → 1.1.56

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,151 @@
+import { computed, inject, onMounted, watchEffect, Ref, ComputedRef } from "vue";
+import { WidgetServiceKey, BladeInstance } from "../../injection-keys";
+import { IWidget } from "../../core/services/widget-service";
+
+/**
+ * Deep comparison function to check if props have changed
+ */
+function isPropsChanged(oldProps: Record<string, unknown>, newProps: Record<string, unknown>): boolean {
+  const oldKeys = Object.keys(oldProps);
+  const newKeys = Object.keys(newProps);
+
+  // Quick check for key count difference
+  if (oldKeys.length !== newKeys.length) {
+    return true;
+  }
+
+  // Check each key for changes
+  return newKeys.some((key) => {
+    const oldValue = oldProps[key];
+    const newValue = newProps[key];
+
+    // For objects and arrays, do a shallow comparison
+    if (typeof oldValue === "object" && typeof newValue === "object") {
+      if (oldValue === null || newValue === null) {
+        return oldValue !== newValue;
+      }
+      // For now, consider objects as changed if they're different references
+      // In future, we might want to implement deep comparison
+      return oldValue !== newValue;
+    }
+
+    return oldValue !== newValue;
+  });
+}
+
+export interface UseExternalWidgetsOptions {
+  bladeId: 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 { bladeId, bladeData, autoRegister = true, autoUpdateProps = true } = options;
+
+  const widgetService = inject(WidgetServiceKey);
+  const blade = inject(BladeInstance);
+
+  // Normalize bladeId to lowercase for consistency
+  const normalizedBladeId = computed(() => bladeId.toLowerCase());
+
+  const registeredExternalWidgetIds = new Set<string>();
+
+  const registerExternalWidgets = () => {
+    if (!widgetService || !normalizedBladeId.value) {
+      console.warn("Widget service or blade ID not available");
+      return;
+    }
+
+    const externalWidgets = widgetService.getExternalWidgetsForBlade(normalizedBladeId.value);
+
+    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, normalizedBladeId.value);
+        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);
+
+          // Only update if props have actually changed to avoid unnecessary re-renders
+          const currentProps = widget.props || {};
+          const hasChanged = isPropsChanged(currentProps, resolvedProps);
+
+          if (hasChanged) {
+            widgetService.updateWidget({
+              id: widget.id,
+              bladeId: normalizedBladeId.value,
+              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 || !normalizedBladeId.value) return;
+
+    registeredExternalWidgetIds.forEach((widgetId) => {
+      try {
+        widgetService.unregisterWidget(widgetId, normalizedBladeId.value);
+      } 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/molecules/vc-editor/vc-editor.vue

@@ -644,6 +644,15 @@ async function handleImageSelection(event: Event) {
     ul,
     ol {
       padding: 0 1rem;
+      list-style: disc;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    ol {
+      list-style: decimal;
     }
 
     blockquote {

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;

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/vc-widget-container.vue

@@ -14,11 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toValue, inject } from "vue";
+import { computed, toValue, inject, isRef } from "vue";
 import { useWidgets } from "../../../../../../core/composables/useWidgets";
 import { WidgetContainerDesktop, WidgetContainerMobile } from "./_internal";
 import { BladeInstance } from "../../../../../../injection-keys";
 import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
+import { IWidget } from "../../../../../../core/services";
 
 interface Props {
   bladeId: string;
@@ -28,20 +29,37 @@ const props = defineProps<Props>();
 const normalizedBladeId = computed(() => props.bladeId.toLowerCase());
 const widgetService = useWidgets();
 const widgets = computed(() => widgetService.getWidgets(normalizedBladeId.value));
+
 const bladeInstance = inject<IBladeInstance>(BladeInstance);
 
-const visibleWidgets = computed(() =>
-  widgets.value.filter((widget) => {
-    if (typeof widget.isVisible === "function") {
-      return widget.isVisible(bladeInstance);
-    } else if (typeof widget.isVisible === "boolean") {
-      return widget.isVisible;
-    } else if (widget.isVisible === undefined) {
-      return true; // Show widget by default if isVisible is not specified
-    }
-    return toValue(widget.isVisible);
-  }),
-);
+const isWidgetVisible = (widget: IWidget, bladeInstance: IBladeInstance | undefined): boolean => {
+  const { isVisible } = widget;
+
+  // Default to visible if isVisible is not specified
+  if (isVisible === undefined) {
+    return true;
+  }
+
+  // Handle function: call with blade instance context
+  if (typeof isVisible === "function") {
+    return isVisible(toValue(bladeInstance));
+  }
+
+  // Handle reactive reference: unwrap the value
+  if (isRef(isVisible)) {
+    return toValue(isVisible);
+  }
+
+  // Handle boolean: return as-is
+  if (typeof isVisible === "boolean") {
+    return isVisible;
+  }
+
+  // Fallback: attempt to unwrap any other reactive value
+  return toValue(isVisible);
+};
+
+const visibleWidgets = computed(() => widgets.value.filter((widget) => isWidgetVisible(widget, bladeInstance)));
 </script>
 
 <style lang="scss">