@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/shared/modules/dynamic/helpers/override.ts

@@ -1,153 +1,153 @@
-import * as _ from "lodash-es";
-import { DynamicSchema, OverridesSchema } from "../types";
-import "core-js/actual/array/to-spliced";
-
-export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
-  let schema = _.cloneDeep(schemaCopy);
-
-  // REMOVE
-  if (overrides.remove && overrides.remove.length > 0) {
-    schema = removeHelper(overrides, schema);
-  }
-
-  // UPSERT
-  if (overrides.upsert && overrides.upsert.length > 0) {
-    schema = upsertHelper(overrides, schema);
-  }
-
-  return schema;
-};
-
-const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
-  return Object.entries(schemaCopy).reduce(
-    (obj, [, schema]) => {
-      const clonedSchema = _.cloneDeep(schema);
-      overrides.upsert
-        ?.filter((x) => clonedSchema.settings.id === x.id)
-        .forEach((args) => {
-          let valueByPath = _.get(clonedSchema, args.path);
-          let currentPath: string | (string | number)[] = args.path;
-
-          // if we can't get value with lodash - try to parse path, cause it could be path with elements id's
-          if (!valueByPath) {
-            const pathParts = args.path.split(".");
-
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            let current: any = clonedSchema;
-            const generatedPath = [];
-            for (const part of pathParts) {
-              if (Array.isArray(current)) {
-                const currentCopy = [...current];
-                current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
-
-                const fountElIndex = currentCopy.findIndex((x) => x === current);
-
-                generatedPath.push(fountElIndex);
-              } else {
-                if (current) {
-                  current = current[part];
-                  generatedPath.push(part);
-                }
-              }
-            }
-
-            currentPath = generatedPath;
-
-            valueByPath = current;
-          }
-
-          if (
-            Array.isArray(valueByPath) &&
-            valueByPath.length &&
-            typeof args.value === "object" &&
-            !Array.isArray(args.value)
-          ) {
-            const findIndex = _.findIndex(valueByPath, { id: args.value.id });
-
-            const spliced = valueByPath /* @ts-expect-error  - toSpliced is not parsed correctly by ts */
-              .toSpliced(findIndex >= 0 ? findIndex : (args.index ?? 0), findIndex >= 0 ? 1 : 0, args.value);
-            _.set(clonedSchema, currentPath, spliced);
-          } else if (Array.isArray(valueByPath) && valueByPath.length) {
-            _.set(clonedSchema, currentPath, [...valueByPath, args.value]);
-          } else {
-            _.set(clonedSchema, currentPath, args.value);
-          }
-        });
-
-      const newId = clonedSchema.settings.id;
-
-      if (newId !== schema.settings.id) {
-        obj[newId] = clonedSchema;
-      } else {
-        obj[schema.settings.id] = clonedSchema;
-      }
-
-      return obj;
-    },
-    {} as Record<string, DynamicSchema>,
-  );
-};
-
-const removeHelper = (overrides: OverridesSchema, schemaCopy: Record<string, DynamicSchema>) => {
-  return Object.entries(schemaCopy).reduce(
-    (obj, [name, schema]) => {
-      const clonedSchema = _.cloneDeep(schema);
-      sortByMaxIndexPath(overrides.remove?.filter((x) => schema.settings.id === x.id)).forEach(({ path }) => {
-        if (path) {
-          removePath(clonedSchema, path);
-        }
-      });
-      obj[name] = clonedSchema;
-      return obj;
-    },
-    {} as Record<string, DynamicSchema>,
-  );
-};
-
-function removePath(obj: DynamicSchema, path: string) {
-  const removeItem = _.get(obj, path);
-
-  if (removeItem) {
-    const parentPath = path.slice(0, path.lastIndexOf("["));
-    _.unset(obj, path);
-    _.update(obj, parentPath, _.compact);
-  } else {
-    const pathParts = path.split(".");
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let current: any = obj;
-    const generatedPath = [];
-    for (const part of pathParts) {
-      if (Array.isArray(current)) {
-        const currentCopy = [...current];
-        current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
-
-        const foundElIndex = currentCopy.findIndex((x) => x === current);
-
-        generatedPath.push(foundElIndex);
-      } else {
-        if (current) {
-          current = current[part];
-          generatedPath.push(part);
-        }
-      }
-    }
-    _.unset(obj, generatedPath);
-    _.update(obj, generatedPath, _.compact);
-  }
-}
-
-// this part sorts paths with indexes in descending order to avoid deleting items with already changed indexes
-function sortByMaxIndexPath(items: { path: string }[] | undefined) {
-  return (items || []).sort((a, b) => getMaxIndexFromPath(b.path) - getMaxIndexFromPath(a.path));
-}
-
-function getMaxIndexFromPath(path: string): number {
-  const matches = path.match(/\[(\d+)\]/g);
-
-  if (matches) {
-    const indexes = matches.map((match) => parseInt(match.slice(1, -1), 10));
-    return Math.max(...indexes);
-  }
-
-  return Infinity;
-}
+import * as _ from "lodash-es";
+import { DynamicSchema, OverridesSchema } from "../types";
+import "core-js/actual/array/to-spliced";
+
+export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
+  let schema = _.cloneDeep(schemaCopy);
+
+  // REMOVE
+  if (overrides.remove && overrides.remove.length > 0) {
+    schema = removeHelper(overrides, schema);
+  }
+
+  // UPSERT
+  if (overrides.upsert && overrides.upsert.length > 0) {
+    schema = upsertHelper(overrides, schema);
+  }
+
+  return schema;
+};
+
+const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
+  return Object.entries(schemaCopy).reduce(
+    (obj, [, schema]) => {
+      const clonedSchema = _.cloneDeep(schema);
+      overrides.upsert
+        ?.filter((x) => clonedSchema.settings.id === x.id)
+        .forEach((args) => {
+          let valueByPath = _.get(clonedSchema, args.path);
+          let currentPath: string | (string | number)[] = args.path;
+
+          // if we can't get value with lodash - try to parse path, cause it could be path with elements id's
+          if (!valueByPath) {
+            const pathParts = args.path.split(".");
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let current: any = clonedSchema;
+            const generatedPath = [];
+            for (const part of pathParts) {
+              if (Array.isArray(current)) {
+                const currentCopy = [...current];
+                current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
+
+                const fountElIndex = currentCopy.findIndex((x) => x === current);
+
+                generatedPath.push(fountElIndex);
+              } else {
+                if (current) {
+                  current = current[part];
+                  generatedPath.push(part);
+                }
+              }
+            }
+
+            currentPath = generatedPath;
+
+            valueByPath = current;
+          }
+
+          if (
+            Array.isArray(valueByPath) &&
+            valueByPath.length &&
+            typeof args.value === "object" &&
+            !Array.isArray(args.value)
+          ) {
+            const findIndex = _.findIndex(valueByPath, { id: args.value.id });
+
+            const spliced = valueByPath /* @ts-expect-error  - toSpliced is not parsed correctly by ts */
+              .toSpliced(findIndex >= 0 ? findIndex : (args.index ?? 0), findIndex >= 0 ? 1 : 0, args.value);
+            _.set(clonedSchema, currentPath, spliced);
+          } else if (Array.isArray(valueByPath) && valueByPath.length) {
+            _.set(clonedSchema, currentPath, [...valueByPath, args.value]);
+          } else {
+            _.set(clonedSchema, currentPath, args.value);
+          }
+        });
+
+      const newId = clonedSchema.settings.id;
+
+      if (newId !== schema.settings.id) {
+        obj[newId] = clonedSchema;
+      } else {
+        obj[schema.settings.id] = clonedSchema;
+      }
+
+      return obj;
+    },
+    {} as Record<string, DynamicSchema>,
+  );
+};
+
+const removeHelper = (overrides: OverridesSchema, schemaCopy: Record<string, DynamicSchema>) => {
+  return Object.entries(schemaCopy).reduce(
+    (obj, [name, schema]) => {
+      const clonedSchema = _.cloneDeep(schema);
+      sortByMaxIndexPath(overrides.remove?.filter((x) => schema.settings.id === x.id)).forEach(({ path }) => {
+        if (path) {
+          removePath(clonedSchema, path);
+        }
+      });
+      obj[name] = clonedSchema;
+      return obj;
+    },
+    {} as Record<string, DynamicSchema>,
+  );
+};
+
+function removePath(obj: DynamicSchema, path: string) {
+  const removeItem = _.get(obj, path);
+
+  if (removeItem) {
+    const parentPath = path.slice(0, path.lastIndexOf("["));
+    _.unset(obj, path);
+    _.update(obj, parentPath, _.compact);
+  } else {
+    const pathParts = path.split(".");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let current: any = obj;
+    const generatedPath = [];
+    for (const part of pathParts) {
+      if (Array.isArray(current)) {
+        const currentCopy = [...current];
+        current = current.find((x) => Object.entries(x).some(([key, value]) => key === part || value === part));
+
+        const foundElIndex = currentCopy.findIndex((x) => x === current);
+
+        generatedPath.push(foundElIndex);
+      } else {
+        if (current) {
+          current = current[part];
+          generatedPath.push(part);
+        }
+      }
+    }
+    _.unset(obj, generatedPath);
+    _.update(obj, generatedPath, _.compact);
+  }
+}
+
+// this part sorts paths with indexes in descending order to avoid deleting items with already changed indexes
+function sortByMaxIndexPath(items: { path: string }[] | undefined) {
+  return (items || []).sort((a, b) => getMaxIndexFromPath(b.path) - getMaxIndexFromPath(a.path));
+}
+
+function getMaxIndexFromPath(path: string): number {
+  const matches = path.match(/\[(\d+)\]/g);
+
+  if (matches) {
+    const indexes = matches.map((match) => parseInt(match.slice(1, -1), 10));
+    return Math.max(...indexes);
+  }
+
+  return Infinity;
+}

package/shared/modules/dynamic/helpers/safeIn.ts

@@ -1,6 +1,6 @@
-type AllKeys<T> = T extends unknown ? keyof T : never;
-type FilterByKnownKey<T, K extends PropertyKey> = T extends unknown ? (K extends keyof T ? T : never) : never;
-
-export function safeIn<K extends AllKeys<T>, T extends object>(key: K, obj: T): obj is FilterByKnownKey<T, K> {
-  return key in obj;
-}
+type AllKeys<T> = T extends unknown ? keyof T : never;
+type FilterByKnownKey<T, K extends PropertyKey> = T extends unknown ? (K extends keyof T ? T : never) : never;
+
+export function safeIn<K extends AllKeys<T>, T extends object>(key: K, obj: T): obj is FilterByKnownKey<T, K> {
+  return key in obj;
+}

package/shared/modules/dynamic/helpers/setters.ts

@@ -1,24 +1,24 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as _ from "lodash-es";
-
-function setModel(args: {
-  property: string;
-  value: string | number | Record<string, any>;
-  option?: string;
-  context: Record<string, any>;
-  scope?: Record<string, any>;
-}) {
-  const { property, value, option, context, scope } = args;
-
-  if (scope && _.has(scope, property)) {
-    if (typeof scope[property] === "function") {
-      scope[property](value);
-    } else {
-      _.set(scope, property, value);
-    }
-    return;
-  }
-  _.set(context, property, option ? value[option as keyof typeof value] : value);
-}
-
-export { setModel };
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as _ from "lodash-es";
+
+function setModel(args: {
+  property: string;
+  value: string | number | Record<string, any>;
+  option?: string;
+  context: Record<string, any>;
+  scope?: Record<string, any>;
+}) {
+  const { property, value, option, context, scope } = args;
+
+  if (scope && _.has(scope, property)) {
+    if (typeof scope[property] === "function") {
+      scope[property](value);
+    } else {
+      _.set(scope, property, value);
+    }
+    return;
+  }
+  _.set(context, property, option ? value[option as keyof typeof value] : value);
+}
+
+export { setModel };

package/shared/modules/dynamic/helpers/unrefNested.ts

@@ -1,14 +1,14 @@
-import { ToRefs, unref, UnwrapRef } from "vue";
-
-export function unrefNested<T extends ToRefs<Record<string, unknown>>>(field: T) {
-  const unreffedProps = {} as { [K in keyof T]: UnwrapRef<T[K]> };
-
-  if (field) {
-    Object.keys(field).forEach((key: keyof T) => {
-      unreffedProps[key] = unref(field[key]) as UnwrapRef<T[typeof key]>;
-    });
-
-    return unreffedProps;
-  }
-  return field;
-}
+import { ToRefs, unref, UnwrapRef } from "vue";
+
+export function unrefNested<T extends ToRefs<Record<string, unknown>>>(field: T) {
+  const unreffedProps = {} as { [K in keyof T]: UnwrapRef<T[K]> };
+
+  if (field) {
+    Object.keys(field).forEach((key: keyof T) => {
+      unreffedProps[key] = unref(field[key]) as UnwrapRef<T[typeof key]>;
+    });
+
+    return unreffedProps;
+  }
+  return field;
+}

package/shared/modules/dynamic/helpers/unwrapInterpolation.ts

@@ -1,16 +1,16 @@
-import { getModel } from "./getters";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function unwrapInterpolation<T extends Record<string, any>>(property: string, context: T) {
-  const pattern = /{(.*)}/g;
-
-  const match = property.match(pattern);
-
-  if (match !== null) {
-    return getModel(property.replace(/{|}/g, ""), context);
-  }
-
-  return property;
-}
-
-export { unwrapInterpolation };
+import { getModel } from "./getters";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function unwrapInterpolation<T extends Record<string, any>>(property: string, context: T) {
+  const pattern = /{(.*)}/g;
+
+  const match = property.match(pattern);
+
+  if (match !== null) {
+    return getModel(property.replace(/{|}/g, ""), context);
+  }
+
+  return property;
+}
+
+export { unwrapInterpolation };

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -58,21 +58,6 @@
         </div>
       </VcContainer>
     </div>
-
-    <template
-      v-if="item && bladeWidgets && bladeWidgets.length"
-      #widgets="{ isExpanded }"
-    >
-      <component
-        :is="widgetItem"
-        v-for="(widgetItem, index) in bladeWidgets"
-        :key="index"
-        :ref="(el: HTMLElement) => widgetsRefs.set({ component: widgetItem, el })"
-        v-model="bladeContext"
-        :is-expanded="isExpanded"
-        @click="setActiveWidget(widgetItem)"
-      ></component>
-    </template>
   </VcBlade>
 </template>
 
@@ -96,6 +81,10 @@ import {
   toRefs,
   provide,
   type VNode,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
@@ -116,6 +105,9 @@ import * as _ from "lodash-es";
 import { useLanguages, useNotifications } from "../../../../core/composables";
 import { notification } from "../../../components";
 import { ComponentSlots } from "../../../utilities/vueUtils";
+import { useWidgets } from "../../../../core/composables/useWidgets";
+import { BladeInstance } from "../../../../injection-keys";
+import { IWidget } from "../../../../core/types/widget";
 
 interface Props {
   expanded?: boolean;
@@ -150,6 +142,7 @@ const { getFlag } = useLanguages();
 
 const widgetsRefs = useTemplateRefsList<{ el: HTMLDivElement; component: ConcreteComponent }>();
 const isMixinReady = ref(false);
+const blade = inject(BladeInstance);
 
 if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "undefined") {
   throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
@@ -200,6 +193,7 @@ if (props.mixinFn?.length) {
   isMixinReady.value = true;
 }
 
+const widgetService = useWidgets();
 const { onBeforeClose } = useBladeNavigation();
 const title = ref();
 const isReady = ref(false);
@@ -360,15 +354,14 @@ const bladeMultilanguage = reactiveComputed(() => {
   return {};
 });
 
-const bladeWidgets = computed(() => {
-  return widgets.value?.children?.map((x) => {
-    if (typeof x === "string") return resolveComponent(x);
-    else throw new Error(`Component is required in widget: ${x}`);
-  });
-});
-
 const bladeOptions = reactive({
   status: bladeStatus,
+  backButton: computed(() => {
+    if (toValue(unreffedScope)?.backButton) {
+      return toValue(unreffedScope).backButton;
+    }
+    return undefined;
+  }),
 });
 
 const multilanguage = reactive({
@@ -396,6 +389,10 @@ const toolbarComputed =
                 method: "updateActiveWidgetCount",
               });
 
+              console.log("saveChanges", widgetService);
+
+              widgetService.updateActiveWidget();
+
               if (!unref(props.param)) {
                 emit("close:blade");
               }
@@ -423,6 +420,8 @@ const toolbarComputed =
                 method: "updateActiveWidgetCount",
               });
 
+              widgetService.updateActiveWidget();
+
               emit("close:blade");
             }
           },
@@ -434,16 +433,48 @@ const toolbarComputed =
     })) ??
   [];
 
-async function setActiveWidget(widget: string | ConcreteComponent) {
-  const component = typeof widget === "string" ? resolveComponent(widget) : widget;
+onMounted(() => {
+  if (blade?.value.id && widgets.value?.children) {
+    widgets.value.children.forEach((widgetComponent) => {
+      const component =
+        typeof widgetComponent === "string"
+          ? resolveComponent(widgetComponent)
+          : (widgetComponent as ConcreteComponent);
+
+      if (!component) {
+        console.error(`Failed to resolve widget component: ${widgetComponent}`);
+        return;
+      }
 
-  await nextTick(
-    () =>
-      (activeWidgetExposed.value = widgetsRefs.value.find((x) =>
-        _.isEqual(x.component, typeof component !== "string" ? component : resolveComponent(component)),
-      )?.el),
-  );
-}
+      const widgetId =
+        typeof component === "object" && "__name" in component ? component.__name : `widget-${Date.now()}`;
+
+      if (widgetId) {
+        widgetService.registerWidget(
+          {
+            id: widgetId,
+            component: markRaw(component as ConcreteComponent),
+            props: {
+              modelValue: bladeContext,
+            },
+            events: {
+              "update:modelValue": (val: unknown) => {
+                bladeContext.value = val as DetailsBladeContext;
+              },
+            },
+          },
+          blade.value.id,
+        );
+      }
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  if (blade?.value.id) {
+    widgetService.clearBladeWidgets(blade.value.id);
+  }
+});
 
 async function updateActiveWidgetCount() {
   if (
@@ -479,6 +510,13 @@ onBeforeClose(async () => {
 provide("bladeContext", toReactive(bladeContext));
 provide("isBladeEditable", isBladeEditable);
 
+const bladeWidgets = computed(() => {
+  return widgets.value?.children?.map((x) => {
+    if (typeof x === "string") return resolveComponent(x);
+    else throw new Error(`Component is required in widget: ${x}`);
+  });
+});
+
 defineExpose({
   title: bladeTitle ?? "",
   updateActiveWidgetCount,