@vc-shell/framework 1.0.119 → 1.0.121

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

@@ -7,6 +7,7 @@ import { setModel } from "./setters";
 import { unwrapInterpolation } from "./unwrapInterpolation";
 import { DetailsBladeContext } from "../factories";
 import * as _ from "lodash-es";
+import { safeIn } from "./safeIn";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -14,8 +15,9 @@ function disabledHandler(
 ): boolean {
   if (!disabled) return false;
   if (typeof disabled === "boolean") return disabled;
-  else if (typeof context.scope[disabled.method] === "function") return context.scope[disabled.method]();
-  else if (context.scope[disabled.method]) return context.scope[disabled.method];
+  else if (disabled.method && typeof context.scope?.[disabled.method] === "function")
+    return context.scope[disabled.method]();
+  else if (disabled.method && context.scope?.[disabled.method]) return context.scope[disabled.method];
   return false;
 }
 
@@ -23,45 +25,100 @@ function nodeBuilder<
   Context extends Record<string, unknown>,
   BContext extends UnwrapNestedRefs<DetailsBladeContext>,
   FormData
->(args: {
+>({
+  controlSchema,
+  parentId,
+  internalContext,
+  bladeContext,
+  currentLocale,
+  formData,
+}: {
   controlSchema: ControlSchema;
   parentId: string | number;
   internalContext: MaybeRef<Context>;
   bladeContext: BContext;
   currentLocale: MaybeRef<string>;
   formData: FormData;
-}): VNode | false {
-  const { controlSchema, parentId, internalContext, bladeContext, currentLocale, formData } = args;
-  if (!controlSchema) return false;
+}): VNode {
+  if (!controlSchema) throw new Error("There is no controlSchema provided");
 
-  const baseProps = reactive<IControlBaseProps>({
-    key: `${parentId}`,
-    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext))) : undefined,
-    disabled:
-      ("disabled" in bladeContext.scope && bladeContext.scope.disabled) ||
-      disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext),
-    name: controlSchema.id,
-    rules: controlSchema.rules,
-    placeholder: controlSchema.placeholder,
-    required: controlSchema.rules?.required,
-    modelValue: getModel(controlSchema.property, toValue(internalContext)),
-    "onUpdate:modelValue": (e: unknown) => {
-      setModel({ property: controlSchema.property, value: e, context: toValue(internalContext) });
-
-      if (_.has(controlSchema, "update.method")) {
-        controlSchema.update.method in bladeContext.scope &&
-        typeof bladeContext.scope[controlSchema.update.method] === "function"
-          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, toValue(internalContext))
-          : undefined;
+  const name = controlSchema.id;
+  const rules = (safeIn("rules", controlSchema) && controlSchema.rules) || undefined;
+  const placeholder = (safeIn("placeholder", controlSchema) && controlSchema.placeholder) || undefined;
+  const required = safeIn("rules", controlSchema) && controlSchema.rules?.required;
+
+  const contextProperty =
+    safeIn("property", controlSchema) &&
+    controlSchema.property &&
+    _.has(toValue(internalContext), controlSchema.property) &&
+    getModel(controlSchema.property, toValue(internalContext));
+
+  const scopedProperty =
+    safeIn("property", controlSchema) &&
+    controlSchema.property &&
+    bladeContext.scope &&
+    _.has(bladeContext.scope, controlSchema.property) &&
+    bladeContext.scope[controlSchema.property];
+
+  const modelValue = contextProperty || scopedProperty || undefined;
+
+  const tooltip = (safeIn("tooltip", controlSchema) && controlSchema.tooltip) || undefined;
+  const multilanguage = safeIn("multilanguage", controlSchema) && controlSchema.multilanguage;
+
+  const label =
+    safeIn("label", controlSchema) && controlSchema.label
+      ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext)))
+      : undefined;
+
+  const disabled =
+    (bladeContext.scope && safeIn("disabled", bladeContext.scope) && bladeContext.scope.disabled) ||
+    (safeIn("disabled", controlSchema) &&
+      controlSchema.disabled &&
+      disabledHandler(controlSchema.disabled, bladeContext));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onUpdateModelValue = (e: any) => {
+    if (safeIn("property", controlSchema) && controlSchema.property) {
+      setModel({
+        property: controlSchema.property,
+        value: e,
+        context: toValue(internalContext),
+        scope: bladeContext.scope,
+      });
+
+      if (
+        safeIn("update", controlSchema) &&
+        controlSchema.update &&
+        safeIn("method", controlSchema.update) &&
+        bladeContext.scope
+      ) {
+        const updateMethod = controlSchema.update.method;
+        if (safeIn(updateMethod, bladeContext.scope) && typeof bladeContext.scope[updateMethod] === "function") {
+          bladeContext.scope[updateMethod](e, controlSchema.property, toValue(internalContext));
+        }
       }
-    },
-    tooltip: controlSchema.tooltip,
-    multilanguage: controlSchema.multilanguage,
+    }
+  };
+
+  const baseProps: IControlBaseProps = reactive({
+    key: `${parentId}`,
+    label,
+    disabled,
+    name,
+    rules,
+    placeholder,
+    required,
+    modelValue,
+    "onUpdate:modelValue": onUpdateModelValue,
+    tooltip,
+    multilanguage,
   });
 
-  const baseOptions = reactive<IControlBaseOptions>({
+  const baseOptions: IControlBaseOptions = reactive({
     visibility: computed(() =>
-      controlSchema.visibility?.method ? bladeContext.scope[controlSchema.visibility?.method] : true
+      safeIn("visibility", controlSchema) && controlSchema.visibility?.method
+        ? bladeContext.scope?.[controlSchema.visibility?.method]
+        : true
     ),
   });
 
@@ -69,16 +126,21 @@ function nodeBuilder<
 
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
-    const fieldsModel = getModel(controlSchema.property, toValue(internalContext));
+
+    const fieldsModel =
+      safeIn("property", controlSchema) &&
+      controlSchema.property &&
+      getModel(controlSchema.property, toValue(internalContext));
 
     const model = toValue(fieldsModel);
+
     if (model && Array.isArray(model)) {
-      return model.map((model: { [x: string]: unknown; id: string }) =>
+      return model.map((modelItem: { [x: string]: unknown; id: string }) =>
         controlSchema.fields.map((fieldItem) =>
           nodeBuilder({
             controlSchema: fieldItem,
-            parentId: `fieldset-${fieldItem.id}-${model.id}`,
-            internalContext: model,
+            parentId: `fieldset-${fieldItem.id}-${modelItem.id}`,
+            internalContext: modelItem,
             bladeContext,
             currentLocale,
             formData,
@@ -86,6 +148,7 @@ function nodeBuilder<
         )
       );
     }
+
     return [
       controlSchema.fields.map((field) =>
         nodeBuilder({

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

@@ -1,5 +1,5 @@
 import * as _ from "lodash-es";
-import { DynamicSchema, OverridesSchema, OverridesUpsert } from "../types";
+import { DynamicSchema, OverridesSchema } from "../types";
 
 export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   let schema = _.cloneDeep(schemaCopy);
@@ -21,32 +21,19 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
   return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
     const clonedSchema = _.cloneDeep(schema);
     overrides.upsert
-      .filter((x) => clonedSchema.settings.id === x.id)
-      .forEach(
-        ({
-          index,
-          path,
-          value,
-          id,
-        }: {
-          index: OverridesUpsert["index"];
-          path: OverridesUpsert["path"];
-          value: OverridesUpsert["value"];
-          id: OverridesUpsert["id"];
-        }) => {
-          const valueByPath = _.get(clonedSchema, path);
-          if (Array.isArray(valueByPath) && valueByPath.length && typeof value === "object") {
-            const findIndex = _.findIndex(valueByPath, { id: value.id });
+      ?.filter((x) => clonedSchema.settings.id === x.id)
+      .forEach((args) => {
+        const valueByPath = _.get(clonedSchema, args.path);
+        if (Array.isArray(valueByPath) && valueByPath.length && typeof args.value === "object" && "index" in args) {
+          const findIndex = _.findIndex(valueByPath, { id: args.value.id });
 
-            const spliced = valueByPath /* @ts-ignore */
-              .toSpliced(findIndex >= 0 ? findIndex : index, findIndex >= 0 ? 1 : 0, value);
-            _.set(clonedSchema, path, spliced);
-          } else {
-            _.set(clonedSchema, path, value);
-          }
-        },
-        {}
-      );
+          const spliced = valueByPath /* @ts-ignore */
+            .toSpliced(findIndex >= 0 ? findIndex : args.index, findIndex >= 0 ? 1 : 0, args.value);
+          _.set(clonedSchema, args.path, spliced);
+        } else {
+          _.set(clonedSchema, args.path, args.value);
+        }
+      }, {});
     obj[name] = clonedSchema;
     return obj;
   }, {} as Record<string, DynamicSchema>);
@@ -56,7 +43,7 @@ const removeHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
   return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
     const clonedSchema = _.cloneDeep(schema);
     overrides.remove
-      .filter((x) => clonedSchema.settings.id === x.id)
+      ?.filter((x) => clonedSchema.settings.id === x.id)
       .forEach(({ path }) => {
         if (path) {
           const parentPath = path.slice(0, path.lastIndexOf("["));

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

@@ -0,0 +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 ?? undefined;
+}

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

@@ -6,10 +6,19 @@ function setModel(args: {
   value: string | number | Record<string, any>;
   option?: string;
   context: Record<string, any>;
+  scope?: Record<string, any>;
 }) {
-  const { property, value, option, context } = args;
+  const { property, value, option, context, scope } = args;
 
-  _.set(context, property, option ? value[option as keyof typeof value] : value);
+  if (_.has(context, property)) {
+    _.set(context, property, option ? value[option as keyof typeof value] : value);
+  } else if (scope && _.has(scope, property)) {
+    if (typeof scope[property] === "function") {
+      scope[property](value);
+    } else {
+      scope[property] = value;
+    }
+  }
 }
 
 export { setModel };

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

@@ -10,7 +10,7 @@ export const toolbarReducer = (args: {
   defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
-}): UnwrapNestedRefs<ComputedRef<IBladeToolbar[]>> => {
+}): UnwrapNestedRefs<ComputedRef<IBladeToolbar[]>> | undefined => {
   if (!args) return;
   const toolbarMethodsMerge = _.merge(ref({}), ref(args.defaultToolbarBindings), ref(args.customToolbarConfig));
   return computed(() =>
@@ -27,7 +27,7 @@ export const toolbarReducer = (args: {
             : {
                 ...toolbarItemCtx,
                 clickHandler() {
-                  return toolbarItemCtx.clickHandler.call(null, args.context);
+                  return toolbarItemCtx.clickHandler?.call(null, args.context);
                 },
               };
 
@@ -38,6 +38,6 @@ export const toolbarReducer = (args: {
       }
 
       return acc;
-    }, [])
+    }, [] as IBladeToolbar[])
   );
 };

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

@@ -1,6 +1,7 @@
 import { getModel } from "./getters";
 
-function unwrapInterpolation<T>(property: string, context: T) {
+// 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);

package/shared/modules/dynamic/index.ts

@@ -6,24 +6,27 @@ import * as _ from "lodash-es";
 import { handleOverrides } from "./helpers/override";
 import { reactiveComputed } from "@vueuse/core";
 import { kebabToPascal } from "../../../core/utilities";
-import { BladeConstructor } from "../../index";
+import { BladeInstanceConstructor } from "../../index";
 import { createAppModule } from "../../../core/plugins";
 import { BladeMenu, NavigationMenu } from "../../../core/types";
+import { ComponentProps } from "./../../utilities/vueUtils";
 
 interface Registered {
-  component: BladeConstructor;
+  component: BladeInstanceConstructor;
   name: string;
   model: DynamicSchema;
 }
 
 const createAppModuleWrapper = (args: {
   bladeName: string;
-  bladeComponent: BladeConstructor;
-  appModuleContent: {
-    locales?: { [key: string]: object };
-    notificationTemplates?: { [key: string]: Component };
-    moduleComponents?: { [key: string]: Component };
-  };
+  bladeComponent: BladeInstanceConstructor;
+  appModuleContent:
+    | {
+        locales?: { [key: string]: object };
+        notificationTemplates?: { [key: string]: Component };
+        moduleComponents?: { [key: string]: Component };
+      }
+    | undefined;
 }) => {
   const { bladeName, bladeComponent, appModuleContent } = args;
   return createAppModule(
@@ -37,16 +40,18 @@ const createAppModuleWrapper = (args: {
 const register = (
   args: {
     app: App;
-    component: BladeConstructor;
+    component: BladeInstanceConstructor;
     composables: { [key: string]: (...args: any[]) => any };
     json: DynamicSchema;
     options?: { router: any };
   },
-  appModuleContent: {
-    locales?: { [key: string]: object };
-    notificationTemplates?: { [key: string]: Component };
-    moduleComponents?: { [key: string]: Component };
-  }
+  appModuleContent:
+    | {
+        locales?: { [key: string]: object };
+        notificationTemplates?: { [key: string]: Component };
+        moduleComponents?: { [key: string]: Component };
+      }
+    | undefined
 ): Registered => {
   const { app, component, json, options } = args;
   const bladeComponent = _.cloneDeep(component);
@@ -63,31 +68,33 @@ const register = (
     bladeComponent.permissions = json.settings.permissions;
   }
 
-  const defineBladeComponent = defineComponent({
+  const BladeInstanceConstructor = defineComponent({
     ...bladeComponent,
     name: bladeName,
     isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
-    setup: (props, ctx) =>
-      (bladeComponent as DefineComponent).setup(
-        reactiveComputed(() => ({
-          ...props,
-          model: json,
-          composables: args.composables,
-        })),
-        reactiveComputed(() => ctx)
-      ),
+    setup: (props: ComponentProps<typeof bladeComponent>, ctx) =>
+      (bladeComponent?.setup &&
+        bladeComponent.setup(
+          reactiveComputed(() => ({
+            ...props,
+            model: json,
+            composables: args.composables,
+          })) as any,
+          reactiveComputed(() => ctx) as any
+        )) ??
+      {},
   });
 
   const module = createAppModuleWrapper({
     bladeName,
-    bladeComponent: defineBladeComponent,
+    bladeComponent: BladeInstanceConstructor,
     appModuleContent,
   });
 
   module.install(app, options);
 
   return {
-    component: defineBladeComponent,
+    component: BladeInstanceConstructor,
     name: bladeName,
     model: json,
   };
@@ -111,7 +118,7 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
   notificationTemplates?: { [key: string]: Component };
 }) => {
   const moduleInitializer = _.findKey(args.schema, (o) => "isWorkspace" in o.settings && o.settings.isWorkspace);
-  const everyHasTemplate = _.every(Object.values(args.schema), (o) => o.settings.component);
+  const everyHasTemplate = _.every(Object.values(args.schema), (o) => o?.settings?.component);
 
   if (!everyHasTemplate) handleError("component", args.schema, "must be included in 'settings' of every file");
   if (!moduleInitializer)
@@ -136,11 +143,13 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
           notificationTemplates: args?.notificationTemplates,
           moduleComponents: args?.moduleComponents,
         };
-        Object.entries(schemaCopy).forEach(([JsonName, JsonSchema], index) => {
+        Object.entries(schemaCopy).forEach(([, JsonSchema], index) => {
           const blade = register(
             {
               app,
-              component: bladePages[JsonSchema.settings.component as keyof typeof bladePages],
+              component: bladePages[
+                JsonSchema.settings.component as keyof typeof bladePages
+              ] as BladeInstanceConstructor,
               composables: { ...args.composables },
               json: JsonSchema,
               options,

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

@@ -35,7 +35,7 @@
               v-model="item"
               :ui-schema="form.children"
               :context="bladeContext"
-              :current-locale="scope.multilanguage?.currentLocale"
+              :current-locale="scope?.multilanguage?.currentLocale"
             ></SchemaRender>
           </VcForm>
         </div>
@@ -72,12 +72,11 @@ import {
   unref,
   watch,
   onBeforeMount,
-  UnwrapRef,
+  ComputedRef,
+  type Component,
 } from "vue";
-import { DynamicDetailsSchema, FormContentSchema } from "../types";
-import { reactiveComputed } from "@vueuse/core";
-import * as _ from "lodash-es";
-import { IBladeToolbar } from "../../../../core/types";
+import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
+import { reactiveComputed, useMounted } from "@vueuse/core";
 import { DetailsBladeContext, DetailsBaseBladeScope, IParentCallArgs, UseDetails, usePopup } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
 import { VcSelect } from "../../../../ui/components";
@@ -116,15 +115,15 @@ const { t } = useI18n({ useScope: "global" });
 
 const { showConfirmation } = usePopup();
 
-const { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables[
-  props.model?.settings?.composable
-]({ emit, props }) as UseDetails<Record<string, any>, DetailsBaseBladeScope>;
+const { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables?.[
+  props.model?.settings?.composable ?? ""
+]({ emit, props, mounted: useMounted() }) as UseDetails<Record<string, any>, DetailsBaseBladeScope>;
 
 const title = ref();
 const isReady = ref(false);
 
 const unwatchTitle = watch(
-  () => bladeTitle.value,
+  () => bladeTitle?.value,
   (newVal) => {
     if (newVal) {
       title.value = newVal;
@@ -138,10 +137,10 @@ const unwatchTitle = watch(
 const settings = computed(() => props.model?.settings);
 
 const form = computed(
-  (): FormContentSchema => props.model?.content.find((x) => x.component === "vc-form") as FormContentSchema
+  (): FormContentSchema => props.model?.content.find((x) => x?.component === "vc-form") as FormContentSchema
 );
 
-const widgets = computed(() => props.model.content.find((x) => x.component === "vc-widgets"));
+const widgets = computed(() => props.model?.content.find((x) => x?.component === "vc-widgets"));
 
 const bladeContext = ref<DetailsBladeContext>({
   loading,
@@ -152,11 +151,11 @@ const bladeContext = ref<DetailsBladeContext>({
   remove,
   saveChanges,
   bladeTitle,
-  settings,
+  settings: settings as ComputedRef<SettingsSchema>,
 });
 
 const bladeStatus = computed(() => {
-  if ("status" in props.model.settings && props.model.settings.status) {
+  if (props.model && "status" in props.model.settings && props.model.settings.status) {
     if (!("component" in props.model.settings.status))
       throw new Error(`Component is required in status: ${props.model.settings.status}`);
     return reactive(h(resolveComponent(props.model.settings.status.component), { context: bladeContext.value }));
@@ -166,23 +165,24 @@ const bladeStatus = computed(() => {
 });
 
 const bladeMultilanguage = reactiveComputed(() => {
-  if ("multilanguage" in toValue(scope) && toValue(scope).multilanguage) {
+  if (scope && "multilanguage" in toValue(scope) && toValue(scope).multilanguage) {
     return {
-      component: () =>
-        h(VcSelect as any, {
+      component: () => {
+        return h(VcSelect as Component, {
           name: "currentLocale",
-          modelValue: toValue(scope).multilanguage.currentLocale,
-          options: toValue(scope).multilanguage.localesOptions,
+          modelValue: toValue(scope).multilanguage?.currentLocale,
+          options: toValue(scope).multilanguage?.localesOptions,
           optionValue: "value",
           optionLabel: "label",
           disabled: "disabled" in toValue(scope) && toValue(scope).disabled,
           required: true,
           clearable: false,
           "onUpdate:modelValue": (e: string) => {
-            toValue(scope).multilanguage.setLocale(e);
+            toValue(scope).multilanguage?.setLocale(e);
           },
-        }),
-      currentLocale: toValue(scope).multilanguage.currentLocale,
+        });
+      },
+      currentLocale: toValue(scope).multilanguage?.currentLocale,
     };
   }
 
@@ -202,17 +202,19 @@ const bladeOptions = reactive({
 });
 
 const toolbarComputed = toolbarReducer({
-  defaultToolbarSchema: settings.value.toolbar,
+  defaultToolbarSchema: settings.value?.toolbar ?? [],
   defaultToolbarBindings: {
     saveChanges: {
       async clickHandler() {
-        await saveChanges(item.value);
+        if (item.value) {
+          await saveChanges(item.value);
 
-        emit("parent:call", {
-          method: "reload",
-        });
-        if (!props.param) {
-          emit("close:blade");
+          emit("parent:call", {
+            method: "reload",
+          });
+          if (!props.param) {
+            emit("close:blade");
+          }
         }
       },
       disabled: computed(() => !validationState.value.validated),
@@ -225,7 +227,7 @@ const toolbarComputed = toolbarReducer({
           )
         ) {
           if (props.param) {
-            await remove({ id: props.param });
+            await remove?.({ id: props.param });
             emit("parent:call", {
               method: "reload",
             });
@@ -263,7 +265,7 @@ async function onBeforeClose() {
 defineExpose({
   title: bladeTitle,
   onBeforeClose,
-  ...scope.value,
+  ...scope?.value,
 });
 </script>