@vc-shell/framework 1.0.153 → 1.0.155

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

@@ -24,7 +24,6 @@ export default {
           currentLanguage: props.currentLocale,
           clearable: props.element.clearable || false,
         },
-        options: props.baseOptions,
         slots: Object.entries(slotsMap).reduce(
           (acc, [key, value]) => {
             if (props.element[key as keyof InputSchema]) {
@@ -47,20 +46,18 @@ export default {
       const render = h(field.component as Component, field.props, field.slots);
 
       if (field.props.rules) {
-        return props.baseOptions.visibility
-          ? h(
-              ValidationField,
-              {
-                props: field.props,
-                index: props.elIndex,
-                rows: props.rows,
-                key: `${String(field.props.key)}_validation`,
-              },
-              () => render,
-            )
-          : null;
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`,
+          },
+          () => render,
+        );
       } else {
-        return props.baseOptions.visibility ? render : null;
+        return render;
       }
     };
   },

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

@@ -23,7 +23,6 @@ export default {
           options: props.element.options ? props.bladeContext.scope?.[props.element.options] : undefined,
           currentLanguage: props.currentLocale,
         },
-        options: props.baseOptions,
 
         slots:
           props.element.customTemplate &&
@@ -43,20 +42,18 @@ export default {
       const render = h(field.component as unknown as Component, field.props, field.slots);
 
       if (field.props.rules) {
-        return props.baseOptions.visibility
-          ? h(
-              ValidationField,
-              {
-                props: field.props,
-                index: props.elIndex,
-                rows: props.rows,
-                key: `${String(field.props.key)}_validation`,
-              },
-              () => render,
-            )
-          : null;
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`,
+          },
+          () => render,
+        );
       } else {
-        return props.baseOptions.visibility ? render : null;
+        return render;
       }
     };
   },

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

@@ -0,0 +1,21 @@
+import { Component, ExtractPropTypes, h } from "vue";
+import { Rating } from "../factories";
+import componentProps from "./props";
+import { RatingSchema } from "../../types";
+
+export default {
+  name: "RatingEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: RatingSchema }) {
+    return () => {
+      const field = Rating({
+        props: {
+          ...props.baseProps,
+          variant: props.element.type,
+        },
+      });
+
+      return h(field.component as Component, field.props);
+    };
+  },
+};

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

@@ -26,7 +26,6 @@ export default {
           clearable: props.element.clearable || false,
           searchable: props.element.searchable || false,
         },
-        options: props.baseOptions,
 
         slots:
           props.element.customTemplate &&
@@ -46,20 +45,18 @@ export default {
       const render = h(field.component as unknown as Component, field.props, field.slots);
 
       if (field.props.rules) {
-        return props.baseOptions.visibility
-          ? h(
-              ValidationField,
-              {
-                props: field.props,
-                index: props.elIndex,
-                rows: props.rows,
-                key: `${String(field.props.key)}_validation`,
-              },
-              () => render,
-            )
-          : null;
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`,
+          },
+          () => render,
+        );
       } else {
-        return props.baseOptions.visibility ? render : null;
+        return render;
       }
     };
   },

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

@@ -31,7 +31,6 @@ export default {
           outline: props.element.outline,
           extend: props.element.extend,
         },
-        options: props.baseOptions,
         slots: {
           default: () => {
             return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
@@ -47,9 +46,7 @@ export default {
         },
       });
 
-      return props.baseOptions.visibility
-        ? h(field.component as Component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots)
-        : null;
+      return h(field.component as Component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots);
     };
   },
 };

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

@@ -0,0 +1,22 @@
+import { Component, ExtractPropTypes, h } from "vue";
+import { Switch } from "../factories";
+import componentProps from "./props";
+import { SwitchSchema } from "../../types";
+
+export default {
+  name: "SwitchEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: SwitchSchema }) {
+    return () => {
+      const field = Switch({
+        props: {
+          ...props.baseProps,
+          trueValue: props.element.trueValue,
+          falseValue: props.element.falseValue,
+        },
+      });
+
+      return h(field.component as Component, field.props);
+    };
+  },
+};

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

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useTableTemplates } from "./../../composables";
+import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Table } from "../factories";
+import componentProps from "./props";
+import { TableSchema } from "../../types";
+import { useI18n } from "vue-i18n";
+
+type TableItemData = Record<string, any>;
+
+export default {
+  name: "TableEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: TableSchema }) {
+    const { tableTemplates } = useTableTemplates(props.element);
+    const { t } = useI18n({ useScope: "global" });
+
+    return () => {
+      const field = Table({
+        props: {
+          ...props.baseProps,
+          header: !!props.element.header,
+          footer: !!props.element.footer,
+          multiselect: !!props.element.multiselect,
+          columns: props.element.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) })),
+          items: props.baseProps.modelValue ?? [],
+          stateKey: props.element.id,
+          class: {
+            "!tw-flex-auto": true,
+          },
+        },
+        slots: {
+          ...Object.entries(tableTemplates.templateOverrideComponents).reduce(
+            (obj, [key, value], index) => {
+              obj[`item_${key}`] = (itemData: TableItemData) => {
+                return h(unref(value), { context: itemData, key: `template_override_${props.element.id}_${index}` });
+              };
+
+              return obj;
+            },
+            {} as Record<`item_${string}`, any>,
+          ),
+          notfound: tableTemplates?.notFound
+            ? (itemData: TableItemData) => h(tableTemplates.notFound as Component, { context: itemData })
+            : () => undefined,
+          "mobile-item": tableTemplates?.mobileView
+            ? (itemData: TableItemData) => h(tableTemplates.mobileView as Component, { context: itemData })
+            : () => undefined,
+          empty: tableTemplates?.empty
+            ? (itemData: TableItemData) => h(tableTemplates.empty as Component, { context: itemData })
+            : () => undefined,
+        },
+      });
+
+      return h(field.component as Component, field.props, field.slots);
+    };
+  },
+};

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

@@ -15,26 +15,23 @@ export default {
           currentLanguage: props.currentLocale,
           clearable: props.element.clearable || false,
         },
-        options: props.baseOptions,
       });
 
       const render = h(field.component as Component, field.props);
 
       if (field.props.rules) {
-        return props.baseOptions.visibility
-          ? h(
-              ValidationField,
-              {
-                props: field.props,
-                index: props.elIndex,
-                rows: props.rows,
-                key: `${String(field.props.key)}_validation`,
-              },
-              () => render,
-            )
-          : null;
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`,
+          },
+          () => render,
+        );
       } else {
-        return props.baseOptions.visibility ? render : null;
+        return render;
       }
     };
   },

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

@@ -14,12 +14,11 @@ export default {
           source: props.baseProps.modelValue,
           size: props.element.size,
         },
-        options: props.baseOptions,
       });
 
       const render = h(field.component as Component, field.props);
 
-      return props.baseOptions.visibility ? render : null;
+      return render;
     };
   },
 };

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

@@ -1,6 +1,6 @@
 import { ComputedRef, MaybeRef, PropType, UnwrapNestedRefs, VNode } from "vue";
 import { DetailsBladeContext } from "../../factories";
-import { IControlBaseOptions, IControlBaseProps } from "../../types/models";
+import { IControlBaseProps } from "../../types/models";
 import { ControlSchema } from "../../types";
 
 export default {
@@ -8,10 +8,6 @@ export default {
     type: Object as PropType<UnwrapNestedRefs<IControlBaseProps>>,
     default: () => ({}) as IControlBaseProps,
   },
-  baseOptions: {
-    type: Object as PropType<IControlBaseOptions>,
-    default: () => ({}) as IControlBaseOptions,
-  },
   element: {
     type: Object as PropType<ControlSchema>,
     default: () => ({}) as ControlSchema,

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

@@ -1 +1,3 @@
 export { default as useFilterBuilder } from "./useFilterBuilder";
+export { useTableTemplates } from "./useTableTemplates";
+export { useToolbarReducer } from "./useToolbarReducer";

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

@@ -17,11 +17,14 @@ import * as _ from "lodash-es";
 import { Checkbox, InputField } from "../../components/factories";
 import { AsyncAction } from "../../../../../core/composables";
 import { VcButton, VcCol, VcContainer, VcRow } from "../../../../../ui/components";
+import { createUnrefFn } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
 
 interface RawControl {
   field: string;
   component: string;
   label?: string;
+  multiple?: boolean;
   data?: { value: string; displayName: string }[];
 }
 
@@ -67,15 +70,17 @@ export default <Query>(args: {
 
   const isFilterVisible = ref(true);
   const filter: Record<string, unknown> = reactive({});
+  const { t } = useI18n({ useScope: "global" });
 
   const controls = ref<Control[]>([]);
 
   const appliedFilter = ref({});
   const activeFilterCount = computed(() => Object.values(appliedFilter.value).filter((item) => !!item).length);
 
-  const disable = computed(() => !Object.keys(filter).length || _.some(filter, _.isEmpty));
-
-  const disabled = computed(() => !Object.keys(appliedFilter.value).length || _.some(appliedFilter.value, _.isEmpty));
+  const isDisabled = createUnrefFn((filterObj: Record<string, unknown>) => {
+    const filterKeys = Object.keys(filterObj);
+    return filterKeys.length === 0 || filterKeys.every((key) => !filterObj[key]);
+  });
 
   onMounted(() => createFilterControls());
 
@@ -83,23 +88,20 @@ export default <Query>(args: {
     const item = filter[field];
     if (Array.isArray(item) && typeof item !== "string") {
       return item.some((x) => x === value);
+    } else {
+      return item === value;
     }
   }
 
-  function selectFilterItem(e: boolean, value: string, field: string) {
-    const item = filter[field];
-    let isSelected = false;
-
-    if (Array.isArray(item)) {
-      isSelected = item.includes(value);
+  function selectFilterItem(e: boolean, value: string, field: string, multiple = true) {
+    if (multiple) {
+      filter[field] = e
+        ? [...((filter[field] as string[]) || []), value]
+        : ((filter[field] as string[]) || []).filter((x) => x !== value);
 
-      if (e && !isSelected) {
-        item.push(value);
-      } else if (!e && isSelected) {
-        filter[field] = item.filter((x) => x !== value);
-      }
+      if (!(filter[field] as string[]).length) filter[field] = undefined;
     } else {
-      filter[field] = [];
+      filter[field] = e ? value : undefined;
     }
   }
 
@@ -143,14 +145,11 @@ export default <Query>(args: {
           props: {
             classNames: "tw-mb-2",
             modelValue: computed(() => isItemSelected(currC.value, control.field)),
-            "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field),
+            "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field, control.multiple),
           },
           slots: {
             default: () => currC.displayName,
           },
-          options: {
-            visibility: computed(() => true),
-          },
         });
 
         return obj;
@@ -168,9 +167,6 @@ export default <Query>(args: {
         modelValue: computed(() => filter[control.field]),
         "onUpdate:modelValue": (e: unknown) => (filter[control.field] = e),
       },
-      options: {
-        visibility: computed(() => true),
-      },
     });
   }
 
@@ -223,15 +219,18 @@ export default <Query>(args: {
               {
                 outline: true,
                 class: "tw-mr-4",
-                disabled: disabled.value,
+                disabled: isDisabled(appliedFilter),
                 onClick: () => resetFilters(slotMethods.close),
               },
-              () => "Reset",
+              () => t("COMPONENTS.FILTERS.RESET"),
             ),
             h(
               VcButton,
-              { disabled: disable.value, onClick: () => applyFilters(slotMethods.close) },
-              () => "Apply filters",
+              {
+                disabled: isDisabled(filter),
+                onClick: () => applyFilters(slotMethods.close),
+              },
+              () => t("COMPONENTS.FILTERS.APPLY"),
             ),
           ]),
         ),

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

@@ -0,0 +1,63 @@
+import { ConcreteComponent, MaybeRef, ShallowRef, reactive, resolveComponent, shallowRef, toValue } from "vue";
+import { ListContentSchema } from "../..";
+
+export interface IUseTableTemplates {
+  tableTemplates: {
+    templateOverrideComponents: Record<string, ShallowRef<ConcreteComponent>>;
+    mobileView: ConcreteComponent | undefined;
+    notFound: ConcreteComponent | undefined;
+    empty: ConcreteComponent | undefined;
+  };
+}
+
+export const useTableTemplates = (
+  tableSchema: MaybeRef<ListContentSchema | undefined> | undefined,
+): IUseTableTemplates => {
+  const tableTemplates = reactive({
+    templateOverrideComponents: templateOverrideComponents(),
+    mobileView: resolveTemplateComponent("mobileTemplate"),
+    notFound: resolveTemplateComponent("notFoundTemplate"),
+    empty: resolveTemplateComponent("emptyTemplate"),
+  });
+
+  function resolveTemplateComponent(name: keyof ListContentSchema): ShallowRef<ConcreteComponent> | undefined {
+    if (!toValue(tableSchema)) return;
+    const value = toValue(tableSchema)?.[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 templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
+    return {
+      ...toValue(tableSchema)?.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>>,
+      ),
+    };
+  }
+
+  return {
+    tableTemplates,
+  };
+};

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

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IBladeToolbar } from "../../../../../core/types";
+import * as _ from "lodash-es";
+import { SettingsSchema } from "../../types";
+import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../../factories/types";
+import { useI18n } from "vue-i18n";
+import { toValue } from "@vueuse/core";
+import { UnwrapNestedRefs, computed, ref, ComputedRef } from "vue";
+
+export const useToolbarReducer = (args: {
+  defaultToolbarSchema: SettingsSchema["toolbar"];
+  defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
+  customToolbarConfig: BaseBladeScope["toolbarOverrides"];
+  context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
+  scope: ComputedRef<BaseBladeScope> | undefined;
+}): UnwrapNestedRefs<ComputedRef<IBladeToolbar[]>> | undefined => {
+  if (!args) return;
+
+  const { t } = useI18n({ useScope: "global" });
+
+  const toolbarMethodsMerge = _.merge(
+    ref({}),
+    ref(args.defaultToolbarBindings),
+    ref(toValue(args.customToolbarConfig)),
+  );
+
+  return computed(() => {
+    if (args.defaultToolbarSchema?.length !== 0) {
+      return args.defaultToolbarSchema?.reduce((acc, curr) => {
+        const toolbarItemCtx = toolbarMethodsMerge.value[
+          curr.method as keyof typeof toolbarMethodsMerge.value
+        ] as IBladeToolbar;
+        if (toolbarItemCtx) {
+          const context =
+            typeof toolbarItemCtx === "function"
+              ? {
+                  clickHandler: async () => await (toolbarItemCtx as (ctx: typeof args.context) => any)(args.context),
+                }
+              : {
+                  ...toolbarItemCtx,
+                  clickHandler() {
+                    return toolbarItemCtx.clickHandler?.call(null, args.context);
+                  },
+                };
+
+          acc.push({
+            ...curr,
+            ...context,
+            title: t(curr.title) as string,
+          });
+        }
+
+        return acc;
+      }, [] as IBladeToolbar[]);
+    }
+
+    if (args.scope && toValue(toValue(args.scope).toolbarOverrides)) {
+      const toolbarOverrides: BaseBladeScope["toolbarOverrides"] = toValue(toValue(args.scope).toolbarOverrides);
+
+      if (Array.isArray(toolbarOverrides)) {
+        return toolbarOverrides;
+      } else if (typeof toolbarOverrides === "function") {
+        return toolbarOverrides(args.context);
+      } else if (typeof toolbarOverrides === "object") {
+        return Object.values(toolbarOverrides);
+      }
+    }
+
+    return [];
+  });
+};

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

@@ -7,7 +7,7 @@ import { createUnrefFn } from "@vueuse/core";
 
 export interface UseDetailsFactoryParams<Item> {
   load: (args?: ItemId) => Promise<Item | undefined>;
-  saveChanges: (details: Item) => Promise<Item | void>;
+  saveChanges?: (details: Item) => Promise<Item | void>;
   remove?: (args: ItemId) => Promise<void>;
 }
 
@@ -30,7 +30,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
 
     const { loading: manageLoading, action: saveChanges } = useAsync<Item>(async (item) => {
       if (validationState.value.valid) {
-        await factoryParams.saveChanges(item as Item);
+        await factoryParams.saveChanges?.(item as Item);
         isModified.value = false;
       } else throw new Error("Form is not valid");
     });

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

@@ -63,7 +63,7 @@ export interface UseList<Items, Query, Scope extends ListBaseBladeScope = ListBa
 
 export interface BaseBladeScope {
   [x: string]: any;
-  toolbarOverrides?: { [x: string]: IBladeToolbar } | ((...args: any[]) => any);
+  toolbarOverrides?: MaybeRef<{ [x: string]: IBladeToolbar }> | ((...args: any[]) => any) | MaybeRef<IBladeToolbar[]>;
 }
 
 export interface ListBaseBladeScope extends BaseBladeScope {