@vc-shell/framework 1.1.55 → 1.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.55",
+  "version": "1.1.57",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -44,17 +44,17 @@
     "@headlessui/vue": "^1.7.19",
     "@iconify/vue": "^5.0.0",
     "@microsoft/signalr": "^8.0.0",
-    "@tiptap/extension-image": "^2.23.0",
-    "@tiptap/extension-link": "^2.23.0",
-    "@tiptap/extension-placeholder": "^2.23.0",
-    "@tiptap/extension-table": "^2.23.0",
+    "@tiptap/extension-image": "^2.25.0",
+    "@tiptap/extension-link": "^2.25.0",
+    "@tiptap/extension-placeholder": "^2.25.0",
+    "@tiptap/extension-table": "^2.25.0",
     "@tiptap/extension-table-cell": "^2.23.1",
     "@tiptap/extension-table-header": "^2.23.1",
     "@tiptap/extension-table-row": "^2.23.1",
-    "@tiptap/extension-underline": "^2.23.0",
-    "@tiptap/pm": "^2.23.0",
-    "@tiptap/starter-kit": "^2.23.0",
-    "@tiptap/vue-3": "^2.23.0",
+    "@tiptap/extension-underline": "^2.25.0",
+    "@tiptap/pm": "^2.25.0",
+    "@tiptap/starter-kit": "^2.25.0",
+    "@tiptap/vue-3": "^2.25.0",
     "@vee-validate/i18n": "^4.12.4",
     "@vee-validate/rules": "^4.12.4",
     "@vuepic/vue-datepicker": "^9.0.2",
@@ -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.55",
-    "@vc-shell/config-generator": "^1.1.55",
-    "@vc-shell/ts-config": "^1.1.55",
+    "@vc-shell/api-client-generator": "^1.1.57",
+    "@vc-shell/config-generator": "^1.1.57",
+    "@vc-shell/ts-config": "^1.1.57",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/shared/composables/index.ts

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

package/shared/composables/useExternalWidgets.ts

@@ -1,52 +1,50 @@
-import { computed, inject, onMounted, watchEffect, Ref, ComputedRef } from "vue";
+import { computed, inject, onMounted, onUnmounted, watch, toValue, Ref, ComputedRef } from "vue";
 import { WidgetServiceKey, BladeInstance } from "../../injection-keys";
-import { IWidget, IExternalWidgetRegistration } from "../../core/services/widget-service";
+import { IWidget } from "../../core/services";
 
 export interface UseExternalWidgetsOptions {
-  bladeType: string;
+  bladeId: Ref<string> | 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 { bladeId, bladeData } = options;
 
   const widgetService = inject(WidgetServiceKey);
   const blade = inject(BladeInstance);
 
+  // Normalize bladeId to lowercase for consistency
+  const normalizedBladeId = computed(() => blade?.value.id?.toLowerCase() ?? "");
+
   const registeredExternalWidgetIds = new Set<string>();
 
   const registerExternalWidgets = () => {
     if (!widgetService || !blade?.value.id) {
-      console.warn("Widget service or blade ID not available");
+      console.warn("useExternalWidgets: Widget service or blade instance not available");
       return;
     }
 
-    const externalWidgets = widgetService.getExternalWidgetsForBlade(bladeType);
+    const allExternalWidgets = widgetService.getAllExternalWidgets();
+    const targetBladeId = toValue(bladeId);
+
+    const filteredWidgets = allExternalWidgets.filter(
+      (widget) => widget.targetBlades?.includes(targetBladeId) ?? false,
+    );
 
-    externalWidgets.forEach((externalWidget) => {
-      // Check if the widget is already registered
+    filteredWidgets.forEach((externalWidget) => {
       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,
-        ),
+      const widgetClone = widgetService.cloneWidget(externalWidget);
+
+      const newWidget: IWidget = {
+        ...widgetClone,
+        props: widgetService.resolveWidgetProps(widgetClone, toValue(bladeData)),
       };
 
       try {
-        widgetService.registerWidget(widget, blade.value.id);
+        widgetService.registerWidget(newWidget, normalizedBladeId.value);
         registeredExternalWidgetIds.add(externalWidget.id);
       } catch (error) {
         console.error(`Failed to register external widget '${externalWidget.id}':`, error);
@@ -54,17 +52,15 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
     });
   };
 
-  // Update widget props when blade data changes
   const updateWidgetProps = () => {
     if (!widgetService || !blade?.value.id) return;
 
-    const widgets = widgetService.getWidgets(blade.value.id);
+    registeredExternalWidgetIds.forEach((widgetId) => {
+      const widget = widgetService.getWidgets(normalizedBladeId.value).find((w) => w.id === widgetId);
 
-    widgets.forEach((widget) => {
-      if (widget.config && registeredExternalWidgetIds.has(widget.id)) {
+      if (widget) {
         try {
-          const resolvedProps = widgetService.resolveWidgetProps(widget, bladeData.value);
-
+          const resolvedProps = widgetService.resolveWidgetProps(widget, toValue(bladeData));
           widgetService.updateWidget({
             id: widget.id,
             bladeId: blade.value.id,
@@ -77,35 +73,31 @@ export function useExternalWidgets(options: UseExternalWidgetsOptions) {
     });
   };
 
-  // Unregister external widgets when unmounted
   const unregisterExternalWidgets = () => {
-    if (!widgetService || !blade?.value.id) return;
+    if (!widgetService || !normalizedBladeId.value) return;
 
     registeredExternalWidgetIds.forEach((widgetId) => {
       try {
-        widgetService.unregisterWidget(widgetId, blade.value.id);
+        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);
-  }
+  onMounted(registerExternalWidgets);
+  onUnmounted(unregisterExternalWidgets);
 
-  // Automatic update of props when blade data changes
-  if (autoUpdateProps) {
-    watchEffect(updateWidgetProps);
-  }
+  watch(
+    () => toValue(bladeData),
+    () => {
+      updateWidgetProps();
+    },
+    { deep: true },
+  );
 
   return {
-    registerExternalWidgets,
-    updateWidgetProps,
-    unregisterExternalWidgets,
     registeredExternalWidgetIds: computed(() => Array.from(registeredExternalWidgetIds)),
   };
 }

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -519,8 +519,8 @@ async function handleImageSelection(event: Event) {
   --vc-editor-text-primary: var(--neutrals-900);
   --vc-editor-text-secondary: var(--neutrals-500);
   --vc-editor-text-muted: var(--neutrals-400);
-  --vc-editor-text-disabled: var(--neutrals-400);
-  --vc-editor-background-disabled: var(--neutrals-100);
+  --vc-editor-text-disabled: var(--neutrals-500);
+  --vc-editor-background-disabled: var(--neutrals-200);
   --vc-editor-focus-border: var(--primary-500);
   --vc-editor-focus-shadow: var(--primary-500);
   --vc-editor-error-border: var(--danger-500);
@@ -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/molecules/vc-select/vc-select.vue

@@ -572,7 +572,7 @@ const emit = defineEmits<{
    * Emitted when the component needs to change the model; Is also used by v-model
    */
 
-  "update:modelValue": [inputValue: MaybeArray<string | Option> | null];
+  "update:modelValue": [inputValue: MaybeArray<Option> | MaybeArray<string> | null];
   /**
    * Emitted when user wants to filter a value
    */

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

@@ -37,6 +37,7 @@
             horizontal
             :widget-id="item.id"
             v-on="item.events || {}"
+            @click="toggleToolbar"
           />
         </template>
       </GenericDropdown>

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">

package/ui/components/organisms/vc-table/_internal/vc-table-header/vc-table-header.vue

@@ -40,7 +40,7 @@ const emit = defineEmits<{
 
 defineSlots<{
   filters: (props: { closePanel: () => void }) => VNode;
-  header: (props: { header: VNode }) => VNode;
+  header: (props: { header: () => VNode }) => VNode;
 }>();
 
 const blade = inject(

package/ui/components/organisms/vc-table/types.ts

@@ -3,7 +3,7 @@ import type { Ref, VNode } from "vue";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 
 export interface TableSlots<T> {
-  header: (props: { header: VNode }) => any;
+  header: (props: { header: () => VNode }) => any;
   filters: (args: { closePanel: () => void }) => any;
   "mobile-item": (args: { item: T }) => any;
   [key: `header_${string}`]: (props: any) => any;

package/dist/shared/composables/useBladeMultilanguage.d.ts

@@ -1,28 +0,0 @@
-import { type Ref } from "vue";
-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 declare function useBladeMultilanguage({ localesOptions, currentLocale, setLocale, }: UseBladeMultilanguageParams): UseBladeMultilanguageReturn;
-export {};
-//# sourceMappingURL=useBladeMultilanguage.d.ts.map

package/dist/shared/composables/useBladeMultilanguage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBladeMultilanguage.d.ts","sourceRoot":"","sources":["../../../shared/composables/useBladeMultilanguage.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG3D,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,UAAU,sBAAuB,SAAQ,cAAc;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,2BAA2B;IACnC,cAAc,EAAE,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC;IACtC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,UAAU,2BAA2B;IACnC,wBAAwB,EAAE,GAAG,CAAC,sBAAsB,EAAE,CAAC,CAAC;IACxD,qBAAqB,EAAE,GAAG,CAAC,sBAAsB,GAAG,SAAS,CAAC,CAAC;IAC/D,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,eAAe,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,2BAA2B,GAAG,2BAA2B,CAuC3D"}

package/shared/composables/useBladeMultilanguage.ts

@@ -1,75 +0,0 @@
-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,
-  };
-}