@vc-shell/framework 1.0.153 → 1.0.154

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

@@ -1,13 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode } from "vue";
 import FIELD_MAP from "../components/FIELD_MAP";
 import { ControlSchema } from "../types";
-import { IControlBaseProps, IControlBaseOptions } from "../types/models";
+import { IControlBaseProps } from "../types/models";
 import { getModel } from "./getters";
 import { setModel } from "./setters";
 import { unwrapInterpolation } from "./unwrapInterpolation";
 import { DetailsBladeContext } from "../factories";
 import { safeIn } from "./safeIn";
 import { i18n } from "./../../../../core/plugins/i18n";
+import { visibilityHandler } from "./visibilityHandler";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -50,9 +52,7 @@ function nodeBuilder<
   const required = safeIn("rules", controlSchema) && controlSchema.rules?.required;
 
   const contextProperty =
-    safeIn("property", controlSchema) &&
-    controlSchema.property &&
-    getModel(controlSchema.property, toValue(internalContext));
+    safeIn("property", controlSchema) && controlSchema.property && getModel(controlSchema.property, internalContext);
 
   const scopedProperty =
     safeIn("property", controlSchema) &&
@@ -77,7 +77,7 @@ function nodeBuilder<
       disabledHandler(controlSchema.disabled, bladeContext));
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onUpdateModelValue = (e: any) => {
+  const onUpdateModelValue = async (e: any) => {
     if (safeIn("property", controlSchema) && controlSchema.property) {
       setModel({
         property: controlSchema.property,
@@ -94,7 +94,7 @@ function nodeBuilder<
       ) {
         const updateMethod = controlSchema.update.method;
         if (safeIn(updateMethod, bladeContext.scope) && typeof bladeContext.scope[updateMethod] === "function") {
-          bladeContext.scope[updateMethod](e, controlSchema.property, toValue(internalContext));
+          await bladeContext.scope[updateMethod](e, controlSchema.property, toValue(internalContext));
         }
       }
     }
@@ -102,24 +102,20 @@ function nodeBuilder<
 
   const baseProps: IControlBaseProps = reactive({
     key: `${parentId}`,
-    label: unref(computed(() => (label ? t(label) : undefined))),
+    label: computed(() => (label ? t(label) : undefined)),
     disabled,
     name,
     rules,
-    placeholder: unref(computed(() => (placeholder ? t(placeholder) : undefined))),
+    placeholder: computed(() => (placeholder ? t(placeholder) : undefined)),
     required,
     modelValue,
     "onUpdate:modelValue": onUpdateModelValue,
-    tooltip: unref(computed(() => (tooltip ? t(tooltip) : undefined))),
+    tooltip: computed(() => (tooltip ? t(tooltip) : undefined)),
     multilanguage,
-  });
-
-  const baseOptions: IControlBaseOptions = reactive({
-    visibility: computed(() =>
-      safeIn("visibility", controlSchema) && controlSchema.visibility?.method
-        ? bladeContext.scope?.[controlSchema.visibility?.method]
-        : true,
-    ),
+    class:
+      "horizontalSeparator" in controlSchema && controlSchema.horizontalSeparator
+        ? "tw-border-b tw-border-solid tw-border-b-[#e5e5e5] tw-mb-[5px] tw-pb-[21px]"
+        : "",
   });
 
   const component = FIELD_MAP[controlSchema.component as keyof typeof FIELD_MAP];
@@ -127,45 +123,70 @@ function nodeBuilder<
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
 
-    const fieldsModel =
+    const contextFieldModel =
       safeIn("property", controlSchema) &&
       controlSchema.property &&
       getModel(controlSchema.property, toValue(internalContext));
 
-    const model = toValue(fieldsModel);
+    const scopedFieldModel =
+      safeIn("property", controlSchema) &&
+      controlSchema.property &&
+      getModel(controlSchema.property, toValue(bladeContext.scope ?? {}));
+
+    const model = toValue(scopedFieldModel) || toValue(contextFieldModel);
 
     if (model && Array.isArray(model)) {
       return model.map((modelItem: { [x: string]: unknown; id: string }) =>
-        controlSchema.fields.map((fieldItem) =>
+        controlSchema.fields.reduce((arr, fieldItem) => {
+          if (
+            safeIn("visibility", fieldItem) &&
+            fieldItem.visibility?.method &&
+            !visibilityHandler(bladeContext.scope?.[fieldItem.visibility?.method], toValue(modelItem), fieldItem)
+          ) {
+            return arr;
+          }
+          return [
+            ...arr,
+            nodeBuilder({
+              controlSchema: fieldItem,
+              parentId: `fieldset-${fieldItem.id}-${modelItem.id}`,
+              internalContext: modelItem,
+              bladeContext,
+              currentLocale,
+              formData,
+            }),
+          ];
+        }, [] as VNode[]),
+      );
+    }
+
+    return [
+      controlSchema.fields.reduce((arr, field) => {
+        if (
+          safeIn("visibility", field) &&
+          field.visibility?.method &&
+          !visibilityHandler(bladeContext.scope?.[field.visibility?.method], toValue(internalContext), field)
+        ) {
+          return arr;
+        }
+
+        return [
+          ...arr,
           nodeBuilder({
-            controlSchema: fieldItem,
-            parentId: `fieldset-${fieldItem.id}-${modelItem.id}`,
-            internalContext: modelItem,
+            controlSchema: field,
+            parentId: `fieldset-${parentId}-${field.id}`,
+            internalContext,
             bladeContext,
             currentLocale,
             formData,
           }),
-        ),
-      );
-    }
-
-    return [
-      controlSchema.fields.map((field) =>
-        nodeBuilder({
-          controlSchema: field,
-          parentId: `fieldset-${parentId}-${field.id}`,
-          internalContext,
-          bladeContext,
-          currentLocale,
-          formData,
-        }),
-      ),
+        ];
+      }, [] as VNode[]),
     ];
   });
 
   const elProps = {
     baseProps,
-    baseOptions,
     bladeContext,
     element: controlSchema,
     currentLocale: unref(currentLocale),

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

@@ -0,0 +1,22 @@
+import { ControlSchema } from "./../types/index";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComputedRef, toValue } from "vue";
+
+export const visibilityHandler = (
+  visibility:
+    | ComputedRef<boolean | undefined>
+    | ((schema: ControlSchema, fieldContext: Record<string, any> | undefined) => boolean)
+    | undefined,
+  fieldContext: Record<string, any> | undefined,
+  schema: ControlSchema,
+) => {
+  if (visibility === undefined) {
+    return true;
+  }
+
+  if (typeof visibility === "function") {
+    return visibility(schema, fieldContext);
+  }
+
+  return toValue(visibility);
+};

package/shared/modules/dynamic/index.ts

@@ -9,6 +9,7 @@ import { kebabToPascal } from "../../../core/utilities";
 import { BladeInstanceConstructor } from "../../index";
 import { createAppModule } from "../../../core/plugins";
 import { ComponentProps } from "./../../utilities/vueUtils";
+import { Router } from "vue-router";
 
 interface Registered {
   component: BladeInstanceConstructor;
@@ -138,7 +139,7 @@ export const createDynamicAppModule = (args: {
   }
 
   return {
-    install(app: App, options: { router: any }) {
+    install(app: App, options: { router: Router }) {
       const bladePages = { ...pages };
       const appModuleContent = {
         locales: args?.locales,

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

@@ -4,7 +4,7 @@
     v-loading="loading"
     :expanded="expanded"
     :closable="closable"
-    width="50%"
+    :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
     @close="$emit('close:blade')"
@@ -33,6 +33,7 @@
         <div class="item-details__content">
           <VcForm class="tw-grow tw-p-4">
             <SchemaRender
+              :key="`${loading}`"
               v-model="item"
               :ui-schema="form.children"
               :context="bladeContext"
@@ -78,6 +79,7 @@ import {
   ComputedRef,
   type Component,
   ConcreteComponent,
+  toRefs,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, useMounted, useTemplateRefsList } from "@vueuse/core";
@@ -92,10 +94,11 @@ import {
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
 import { VcSelect } from "../../../../ui/components";
-import { toolbarReducer } from "../helpers/toolbarReducer";
+import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import * as _ from "lodash-es";
 import { IBladeToolbar } from "../../../../core/types";
+import { toRef } from "vue";
 
 interface Props {
   expanded?: boolean;
@@ -239,56 +242,58 @@ const bladeOptions = reactive({
 });
 
 const toolbarComputed =
-  props.composables &&
-  toolbarReducer({
-    defaultToolbarSchema: settings.value?.toolbar ?? [],
-    defaultToolbarBindings: {
-      saveChanges: {
-        async clickHandler() {
-          if (item.value) {
-            await saveChanges(item.value);
-
-            emit("parent:call", {
-              method: "reload",
-            });
-
-            emit("parent:call", {
-              method: "updateActiveWidgetCount",
-            });
-
-            if (!props.param) {
-              emit("close:blade");
-            }
-          }
-        },
-        disabled: computed(() => !validationState.value.modified),
-      },
-      remove: {
-        async clickHandler() {
-          if (
-            await showConfirmation(
-              computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE`)),
-            )
-          ) {
-            if (props.param) {
-              await remove?.({ id: props.param });
+  (props.composables &&
+    useToolbarReducer({
+      defaultToolbarSchema: settings.value?.toolbar ?? [],
+      defaultToolbarBindings: {
+        saveChanges: {
+          async clickHandler() {
+            if (item.value) {
+              await saveChanges(item.value);
+
               emit("parent:call", {
                 method: "reload",
               });
+
               emit("parent:call", {
                 method: "updateActiveWidgetCount",
               });
 
-              emit("close:blade");
+              if (!props.param) {
+                emit("close:blade");
+              }
             }
-          }
+          },
+          disabled: computed(() => !validationState.value.modified),
+        },
+        remove: {
+          async clickHandler() {
+            if (
+              await showConfirmation(
+                computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE`)),
+              )
+            ) {
+              if (props.param) {
+                await remove?.({ id: props.param });
+                emit("parent:call", {
+                  method: "reload",
+                });
+                emit("parent:call", {
+                  method: "updateActiveWidgetCount",
+                });
+
+                emit("close:blade");
+              }
+            }
+          },
+          disabled: computed(() => toValue(scope)?.disabled),
         },
-        disabled: computed(() => toValue(scope)?.disabled),
       },
-    },
-    customToolbarConfig: toValue(scope)?.toolbarOverrides,
-    context: bladeContext.value,
-  });
+      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      context: bladeContext.value,
+      scope,
+    })) ??
+  [];
 
 async function setActiveWidget(widget: string | ConcreteComponent) {
   const component = typeof widget === "string" ? resolveComponent(widget) : widget;

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

@@ -4,7 +4,7 @@
     v-if="!composables"
     :expanded="expanded"
     :closable="closable"
-    width="50%"
+    :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
     :class="{
@@ -62,9 +62,9 @@
 
         <!-- Not found template -->
         <template #notfound>
-          <template v-if="bladeOptions?.notFound">
+          <template v-if="tableTemplates?.notFound">
             <component
-              :is="bladeOptions.notFound"
+              :is="tableTemplates.notFound"
               @reset="resetSearch"
             ></component>
           </template>
@@ -84,9 +84,9 @@
 
         <!-- Empty template -->
         <template #empty>
-          <template v-if="bladeOptions?.empty">
+          <template v-if="tableTemplates?.empty">
             <component
-              :is="bladeOptions.empty"
+              :is="tableTemplates.empty"
               :class="{
                 'tw-py-6': isWidgetView,
               }"
@@ -104,7 +104,7 @@
 
         <!-- Override table templates-->
         <template
-          v-for="(component, key, index) in bladeOptions?.templateOverrideComponents"
+          v-for="(component, key, index) in tableTemplates?.templateOverrideComponents"
           #[`item_${key}`]="itemData"
           :key="`template_override_${index}`"
         >
@@ -117,11 +117,11 @@
         <!-- Override table mobile view -->
 
         <template
-          v-if="bladeOptions?.mobileView"
+          v-if="tableTemplates?.mobileView"
           #mobile-item="itemData"
         >
           <component
-            :is="bladeOptions.mobileView"
+            :is="tableTemplates.mobileView"
             :context="itemData"
           ></component>
         </template>
@@ -137,23 +137,20 @@ import {
   inject,
   reactive,
   ref,
-  resolveComponent,
   shallowRef,
   toValue,
   unref,
   watch,
   UnwrapRef,
-  ShallowRef,
-  ConcreteComponent,
   ComputedRef,
   onBeforeMount,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
-import { useFilterBuilder } from "../composables";
+import { useFilterBuilder, useTableTemplates } from "../composables";
 import { useFunctions, useNotifications } from "../../../../core/composables";
 import { ITableColumns } from "../../../../core/types";
-import { toolbarReducer } from "../helpers/toolbarReducer";
+import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { notification, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
@@ -231,7 +228,7 @@ const stateKey =
   props.composables &&
   computed(() => {
     if (tableData?.value?.id) {
-      return tableData.value?.id + props.isWidgetView ? "_dashboard" : "";
+      return tableData.value?.id && props.isWidgetView ? tableData.value?.id + "_dashboard" : tableData.value?.id;
     }
 
     throw new Error('Table id is not defined. Please provide "id" property in table schema');
@@ -257,6 +254,8 @@ if (props.isWidgetView) {
   query.value.take = 5;
 }
 
+const { tableTemplates } = useTableTemplates(tableData);
+
 const calculateColumns = (columns: ListContentSchema["columns"]) => {
   const result = columns?.map((column) => {
     if (typeof column.visible !== "boolean" && column.visible?.method) {
@@ -286,10 +285,6 @@ const table =
 const bladeOptions = reactive({
   tableData,
   table,
-  templateOverrideComponents: templateOverrideComponents(),
-  mobileView: resolveTemplateComponent("mobileTemplate"),
-  notFound: resolveTemplateComponent("notFoundTemplate"),
-  empty: resolveTemplateComponent("emptyTemplate"),
 });
 
 const {
@@ -316,44 +311,46 @@ const bladeContext = ref<ListBladeContext>({
 });
 
 const toolbarComputed =
-  props.composables &&
-  toolbarReducer({
-    defaultToolbarSchema: settings.value?.toolbar ?? [],
-    defaultToolbarBindings: {
-      save: {
-        clickHandler() {
-          emit("close:blade");
+  (props.composables &&
+    useToolbarReducer({
+      defaultToolbarSchema: settings.value?.toolbar ?? [],
+      defaultToolbarBindings: {
+        save: {
+          clickHandler() {
+            emit("close:blade");
+          },
+          disabled: computed(() => !modified.value),
         },
-        disabled: computed(() => !modified.value),
-      },
-      openAddBlade: {
-        async clickHandler() {
-          if (
-            scope &&
-            "openDetailsBlade" in toValue(scope) &&
-            toValue(scope).openDetailsBlade &&
-            typeof toValue(scope).openDetailsBlade === "function"
-          ) {
-            toValue(scope).openDetailsBlade();
-          } else throw new Error("openDetailsBlade method is not defined in scope");
+        openAddBlade: {
+          async clickHandler() {
+            if (
+              scope &&
+              "openDetailsBlade" in toValue(scope) &&
+              toValue(scope).openDetailsBlade &&
+              typeof toValue(scope).openDetailsBlade === "function"
+            ) {
+              toValue(scope).openDetailsBlade();
+            } else throw new Error("openDetailsBlade method is not defined in scope");
+          },
         },
-      },
-      refresh: {
-        async clickHandler() {
-          await reload();
+        refresh: {
+          async clickHandler() {
+            await reload();
+          },
         },
-      },
-      removeItems: {
-        async clickHandler() {
-          await removeItems();
+        removeItems: {
+          async clickHandler() {
+            await removeItems();
+          },
+          disabled: computed(() => !selectedIds.value?.length),
+          isVisible: isDesktop.value,
         },
-        disabled: computed(() => !selectedIds.value?.length),
-        isVisible: isDesktop.value,
       },
-    },
-    customToolbarConfig: toValue(scope)?.toolbarOverrides,
-    context: bladeContext.value,
-  });
+      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      context: bladeContext.value,
+      scope,
+    })) ??
+  [];
 
 onBeforeMount(async () => {
   if (props.composables) await load({ ...query.value, sort: sort.value });
@@ -545,43 +542,6 @@ async function resetSearch() {
   });
 }
 
-function templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
-  return {
-    ...table?.value.columns?.reduce(
-      (acc, curr) => {
-        if ("customTemplate" in curr && curr.customTemplate) {
-          if (!("component" in curr.customTemplate)) {
-            throw new Error(
-              `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`,
-            );
-          } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
-            const component = resolveComponent(curr.customTemplate.component);
-
-            if (typeof component !== "string") {
-              acc[curr.id] = shallowRef(component);
-            }
-          }
-        }
-        return acc;
-      },
-      {} as Record<string, ShallowRef<ConcreteComponent>>,
-    ),
-  };
-}
-
-function resolveTemplateComponent(name: keyof ListContentSchema) {
-  if (!tableData?.value) return;
-  const value = tableData.value[name];
-  if (value && typeof value === "object" && "component" in value) {
-    const componentName = value.component;
-    if (componentName) {
-      const component = resolveComponent(componentName);
-
-      if (component && typeof component !== "string") return shallowRef(component);
-    }
-  }
-}
-
 function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] }) {
   if (event.dragIndex !== event.dropIndex) {
     const sorted = event.value.map((item, index) => {