@vc-shell/framework 1.0.128 → 1.0.130

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -143,6 +143,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<Emits>();
+
+defineOptions({
+  name: "AssetsDetails",
+});
+
 useForm({ validateOnMount: false });
 const isValid = useIsFormValid();
 const isDirty = useIsFormDirty();

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -10,7 +10,7 @@
     @collapse="$emit('collapse:blade')"
   >
     <div
-      v-loading="options.loading"
+      v-loading="options?.loading"
       class="tw-relative tw-h-full"
       @dragover.prevent.stop="dragOver"
       @dragleave.prevent="dragLeave"
@@ -146,7 +146,6 @@ import { ICommonAsset, IActionBuilderResult, IBladeToolbar, ITableColumns } from
 import { ref, computed, onMounted, unref, watch, markRaw, Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import moment from "moment";
-import { AssetsDetails as Assets } from "./../../../assets/components/assets-details";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import * as _ from "lodash-es";
 import { IParentCallArgs, useBladeNavigation } from "../../../../components";
@@ -179,6 +178,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineOptions({
+  name: "AssetsManager",
+});
+
 const { t } = useI18n({ useScope: "global" });
 
 const defaultAssets = ref<ICommonAsset[]>([]);
@@ -190,7 +193,7 @@ const readonly = computed(() => props.options.disabled);
 let assetsCopy: ICommonAsset[];
 const modified = ref(false);
 
-const { openBlade } = useBladeNavigation();
+const { openBlade, resolveBladeByName } = useBladeNavigation();
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
@@ -263,7 +266,7 @@ watch(
   (newVal) => {
     modified.value = !_.isEqual(newVal, assetsCopy);
   },
-  { deep: true }
+  { deep: true },
 );
 
 onMounted(() => {
@@ -332,7 +335,7 @@ async function inputUpload(event: Event) {
 
 function onItemClick(item: ICommonAsset) {
   openBlade({
-    blade: markRaw(Assets),
+    blade: resolveBladeByName("AssetsDetails"),
     options: {
       asset: unref(item),
       disabled: readonly.value,

package/shared/modules/dynamic/components/fields/GalleryField.ts

@@ -28,8 +28,8 @@ export default {
         `There is no assetsHandler.images config provided in blade scope: ${JSON.stringify(
           props.bladeContext.scope,
           null,
-          2
-        )}`
+          2,
+        )}`,
       );
     }
 
@@ -47,7 +47,7 @@ export default {
           internalModel.value = _.cloneDeep(newVal);
         }
       },
-      { deep: true, immediate: true }
+      { deep: true, immediate: true },
     );
 
     return () => {
@@ -83,9 +83,9 @@ export default {
                 t(
                   `${props.bladeContext.settings.localizationPrefix
                     .trim()
-                    .toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE_CONFIRMATION`
-                )
-              )
+                    .toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE_CONFIRMATION`,
+                ),
+              ),
             )
           ) {
             const edited = await imagesHandler.remove?.value?.([image]);
@@ -114,7 +114,7 @@ export default {
             context: props.fieldContext,
             scope: props.bladeContext.scope,
           });
-          await props.bladeContext.validationState.validate();
+          await props.bladeContext.validationState.setFieldValue(props.element.id, args);
         }
       }
 

package/shared/modules/dynamic/components/fields/InputCurrency.ts

@@ -6,6 +6,7 @@ import { getModel } from "../../helpers/getters";
 import { setModel } from "../../helpers/setters";
 import { InputCurrencySchema } from "../../types";
 
+// TODO fix disabling when blades is disabled
 export default {
   name: "InputCurrency",
   props: componentProps,
@@ -42,7 +43,7 @@ export default {
                 rows: props.rows,
                 key: `${String(field.props.key)}_validation`,
               },
-              () => render
+              () => render,
             )
           : null;
       } else {

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -109,21 +109,24 @@ export default <Query>(args: {
       return;
     }
     controls.value = _data.columns.map((item): Control => {
-      const ctr = item.controls.reduce((obj, control) => {
-        if (control.component === "vc-checkbox") {
-          const filterData = control.data;
-          const fields = createCheckboxFromData(filterData, control);
-
-          if (fields) {
-            obj = fields;
+      const ctr = item.controls.reduce(
+        (obj, control) => {
+          if (control.component === "vc-checkbox") {
+            const filterData = control.data;
+            const fields = createCheckboxFromData(filterData, control);
+
+            if (fields) {
+              obj = fields;
+            }
+          }
+          if (control.component === "vc-input") {
+            obj[control.field] = createInput(control);
           }
-        }
-        if (control.component === "vc-input") {
-          obj[control.field] = createInput(control);
-        }
 
-        return obj;
-      }, {} as Record<string, ReturnType<typeof Checkbox> | ReturnType<typeof InputField>>);
+          return obj;
+        },
+        {} as Record<string, ReturnType<typeof Checkbox> | ReturnType<typeof InputField>>,
+      );
 
       return {
         title: item.title,
@@ -134,23 +137,26 @@ export default <Query>(args: {
 
   function createCheckboxFromData(data: RawControl["data"], control: RawControl) {
     if (!(data && data.length)) return;
-    return data.reduce((obj, currC) => {
-      obj[currC.value] = Checkbox({
-        props: {
-          classNames: "tw-mb-2",
-          modelValue: computed(() => isItemSelected(currC.value, control.field)),
-          "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field),
-        },
-        slots: {
-          default: () => currC.displayName,
-        },
-        options: {
-          visibility: computed(() => true),
-        },
-      });
+    return data.reduce(
+      (obj, currC) => {
+        obj[currC.value] = Checkbox({
+          props: {
+            classNames: "tw-mb-2",
+            modelValue: computed(() => isItemSelected(currC.value, control.field)),
+            "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field),
+          },
+          slots: {
+            default: () => currC.displayName,
+          },
+          options: {
+            visibility: computed(() => true),
+          },
+        });
 
-      return obj;
-    }, {} as Record<string, ReturnType<typeof Checkbox>>);
+        return obj;
+      },
+      {} as Record<string, ReturnType<typeof Checkbox>>,
+    );
   }
 
   function createInput(control: RawControl) {
@@ -202,12 +208,12 @@ export default <Query>(args: {
                 return h(
                   item.component as Component,
                   { ...item.props, class: item.props.classNames },
-                  "slots" in item && item.slots ? { ...item.slots } : {}
+                  "slots" in item && item.slots ? { ...item.slots } : {},
                 );
               }
             }),
-          ])
-        )
+          ]),
+        ),
       ),
       h(VcRow, () =>
         h(VcCol, { class: "tw-p-2" }, () =>
@@ -220,15 +226,15 @@ export default <Query>(args: {
                 disabled: disabled.value,
                 onClick: () => resetFilters(slotMethods.close),
               },
-              () => "Reset"
+              () => "Reset",
             ),
             h(
               VcButton,
               { disabled: disable.value, onClick: () => applyFilters(slotMethods.close) },
-              () => "Apply filters"
+              () => "Apply filters",
             ),
-          ])
-        )
+          ]),
+        ),
       ),
     ]);
   }

package/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -13,7 +13,7 @@ export interface UseDetailsFactoryParams<Item> {
 
 export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<Item>) => {
   return function useDetails(): UseDetails<Item> {
-    const { setFieldError, setErrors, validate } = useForm({
+    const { setFieldError, setErrors, validate, setFieldValue, setValues } = useForm({
       validateOnMount: false,
     });
     const item = ref<Item>();
@@ -51,9 +51,11 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         cachedValue: itemTemp.value,
         setFieldError,
         setErrors,
+        setFieldValue,
+        setValues,
         resetModified,
         validate,
-      })
+      }),
     );
 
     watch(
@@ -61,7 +63,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
       ([state, stateCopy]) => {
         isModified.value = !_.isEqual(stateCopy.value, state.value);
       },
-      { deep: true }
+      { deep: true },
     );
 
     const resetModified = createUnrefFn((data: Item, updateInitial = false) => {

package/shared/modules/dynamic/factories/types/index.ts

@@ -23,6 +23,8 @@ export interface IValidationState<Item> {
   validated: boolean;
   cachedValue: Item | undefined;
   setFieldError: FormContext["setFieldError"];
+  setFieldValue: FormContext["setFieldValue"];
+  setValues: FormContext["setValues"];
   setErrors: FormContext["setErrors"];
   resetModified: (data: MaybeRef<Item>, updateInitial?: MaybeRef<boolean>) => void;
   validate: FormContext["validate"];
@@ -62,7 +64,9 @@ export interface BaseBladeScope {
 }
 
 export interface ListBaseBladeScope extends BaseBladeScope {
-  openDetailsBlade: (args?: Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">) => void;
+  openDetailsBlade: (
+    args?: Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">,
+  ) => Promise<void>;
 }
 
 export interface DetailsBaseBladeScope extends BaseBladeScope {
@@ -80,7 +84,7 @@ export interface DetailsBaseBladeScope extends BaseBladeScope {
     loadDictionaries: (
       property: Record<string, any>,
       keyword?: string,
-      locale?: string
+      locale?: string,
     ) => Promise<Record<string, any>[]>;
     getPropertyValue: (property: Record<string, any>, locale: string) => any;
     setPropertyValue: (data: {

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

@@ -19,40 +19,46 @@ export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key:
 };
 
 const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
-  return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
-    const clonedSchema = _.cloneDeep(schema);
-    overrides.upsert
-      ?.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 });
+  return Object.entries(schemaCopy).reduce(
+    (obj, [name, schema]) => {
+      const clonedSchema = _.cloneDeep(schema);
+      overrides.upsert
+        ?.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 : 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>);
+            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>,
+  );
 };
 
 const removeHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
-  return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
-    const clonedSchema = _.cloneDeep(schema);
-    overrides.remove
-      ?.filter((x) => clonedSchema.settings.id === x.id)
-      .forEach(({ path }) => {
-        if (path) {
-          const parentPath = path.slice(0, path.lastIndexOf("["));
-          _.unset(clonedSchema, path);
-          _.update(clonedSchema, parentPath, _.compact);
-        }
-      }, {});
-    obj[name] = clonedSchema;
-    return obj;
-  }, {} as Record<string, DynamicSchema>);
+  return Object.entries(schemaCopy).reduce(
+    (obj, [name, schema]) => {
+      const clonedSchema = _.cloneDeep(schema);
+      overrides.remove
+        ?.filter((x) => clonedSchema.settings.id === x.id)
+        .forEach(({ path }) => {
+          if (path) {
+            const parentPath = path.slice(0, path.lastIndexOf("["));
+            _.unset(clonedSchema, path);
+            _.update(clonedSchema, parentPath, _.compact);
+          }
+        }, {});
+      obj[name] = clonedSchema;
+      return obj;
+    },
+    {} as Record<string, DynamicSchema>,
+  );
 };

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

@@ -2,5 +2,5 @@ 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;
+  return key in obj;
 }

package/shared/modules/dynamic/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as pages from "./pages";
-import { App, Component, DefineComponent, defineComponent } from "vue";
+import { App, Component, defineComponent } from "vue";
 import { DynamicSchema, OverridesSchema } from "./types";
 import * as _ from "lodash-es";
 import { handleOverrides } from "./helpers/override";
@@ -8,7 +8,7 @@ import { reactiveComputed } from "@vueuse/core";
 import { kebabToPascal } from "../../../core/utilities";
 import { BladeInstanceConstructor } from "../../index";
 import { createAppModule } from "../../../core/plugins";
-import { BladeMenu, NavigationMenu } from "../../../core/types";
+import { BladeMenu } from "../../../core/types";
 import { ComponentProps } from "./../../utilities/vueUtils";
 
 interface Registered {
@@ -33,7 +33,7 @@ const createAppModuleWrapper = (args: {
     { [bladeName]: bladeComponent },
     appModuleContent?.locales,
     appModuleContent?.notificationTemplates,
-    appModuleContent?.moduleComponents
+    appModuleContent?.moduleComponents,
   );
 };
 
@@ -51,7 +51,7 @@ const register = (
         notificationTemplates?: { [key: string]: Component };
         moduleComponents?: { [key: string]: Component };
       }
-    | undefined
+    | undefined,
 ): Registered => {
   const { app, component, json, options } = args;
   const bladeComponent = _.cloneDeep(component);
@@ -71,6 +71,7 @@ const register = (
   const BladeInstanceConstructor = defineComponent({
     ...bladeComponent,
     isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
+    menuItem: ("menuItem" in json.settings && json.settings.menuItem) ?? undefined,
     setup: (props: ComponentProps<typeof bladeComponent>, ctx) =>
       (bladeComponent?.setup &&
         bladeComponent.setup(
@@ -80,9 +81,9 @@ const register = (
             {
               model: json,
               composables: args.composables,
-            } as any
+            } as any,
           ),
-          ctx
+          ctx,
         )) ??
       {},
   });
@@ -105,15 +106,14 @@ const register = (
 const handleError = (errorKey: string, schema: { [key: string]: DynamicSchema }, text?: string) => {
   console.error(
     `Module initialization aborted. '${errorKey}' key not found in files: ${Object.keys(schema).join(
-      ", "
-    )}. '${errorKey}' key ${text}`
+      ", ",
+    )}. '${errorKey}' key ${text}`,
   );
 };
 
-export const createDynamicAppModule = <T extends BladeMenu>(args: {
+export const createDynamicAppModule = (args: {
   schema: { [key: string]: DynamicSchema };
   composables: { [key: string]: (...args: any[]) => any };
-  menuConfig?: { [I in keyof T]: NavigationMenu<T[I]> };
   overrides?: OverridesSchema;
   moduleComponents?: { [key: string]: Component };
   locales?: { [key: string]: object };
@@ -127,7 +127,7 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
     handleError(
       "isWorkspace",
       args.schema,
-      "must be included in one of this files to initialize module workspace blade"
+      "must be included in one of this files to initialize module workspace blade",
     );
 
   if (moduleInitializer && everyHasTemplate) {
@@ -156,7 +156,7 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
               json: JsonSchema,
               options,
             },
-            index === 0 ? appModuleContent : undefined
+            index === 0 ? appModuleContent : undefined,
           );
 
           if (!blade) {