@vc-shell/framework 1.0.157 → 1.0.159

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

@@ -3,6 +3,7 @@ import componentProps from "./props";
 import { StatusSchema } from "../../types";
 import { StatusField } from "../factories";
 import { VcIcon } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "StatusField",
@@ -25,12 +26,14 @@ export default {
       });
 
       const field = StatusField({
-        props: {
-          ...props.baseProps,
-          variant: props.element.variant,
-          outline: props.element.outline,
-          extend: props.element.extend,
-        },
+        props: Object.assign(
+          {
+            variant: props.element.variant,
+            outline: props.element.outline,
+            extend: props.element.extend,
+          },
+          unrefNested(props.baseProps),
+        ),
         slots: {
           default: () => {
             return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [

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

@@ -2,6 +2,7 @@ import { Component, ExtractPropTypes, h } from "vue";
 import { Switch } from "../factories";
 import componentProps from "./props";
 import { SwitchSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "SwitchEl",
@@ -9,11 +10,14 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: SwitchSchema }) {
     return () => {
       const field = Switch({
-        props: {
-          ...props.baseProps,
-          trueValue: props.element.trueValue,
-          falseValue: props.element.falseValue,
-        },
+        props: Object.assign(
+          {},
+          {
+            trueValue: props.element.trueValue,
+            falseValue: props.element.falseValue,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       return h(field.component as Component, field.props);

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

@@ -5,6 +5,7 @@ import { Table } from "../factories";
 import componentProps from "./props";
 import { TableSchema } from "../../types";
 import { useI18n } from "vue-i18n";
+import { unrefNested } from "../../helpers/unrefNested";
 
 type TableItemData = Record<string, any>;
 
@@ -17,18 +18,21 @@ export default {
 
     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,
+        props: Object.assign(
+          {},
+          {
+            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: unrefNested(props.baseProps).modelValue ?? [],
+            stateKey: props.element.id,
+            class: {
+              "!tw-flex-auto": true,
+            },
           },
-        },
+          unrefNested(props.baseProps),
+        ),
         slots: {
           ...Object.entries(tableTemplates.templateOverrideComponents).reduce(
             (obj, [key, value], index) => {

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

@@ -3,6 +3,7 @@ import { TextareaSchema } from "./../../types/index";
 import { ExtractPropTypes, h, Component } from "vue";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "TextareaField",
@@ -10,11 +11,14 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: TextareaSchema }) {
     return () => {
       const field = TextareaField({
-        props: {
-          ...props.baseProps,
-          currentLanguage: props.currentLocale,
-          clearable: props.element.clearable || false,
-        },
+        props: Object.assign(
+          {},
+          {
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       const render = h(field.component as Component, field.props);

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

@@ -2,6 +2,7 @@ import { Component, ExtractPropTypes, h } from "vue";
 import { VideoField } from "../factories";
 import componentProps from "./props";
 import { VideoSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "VideoField",
@@ -9,11 +10,14 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
     return () => {
       const field = VideoField({
-        props: {
-          ...props.baseProps,
-          source: props.baseProps.modelValue,
-          size: props.element.size,
-        },
+        props: Object.assign(
+          {},
+          {
+            source: props.baseProps.modelValue,
+            size: props.element.size,
+          },
+          unrefNested(props.baseProps),
+        ),
       });
 
       const render = h(field.component as Component, field.props);

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

@@ -1,12 +1,12 @@
-import { ComputedRef, MaybeRef, PropType, UnwrapNestedRefs, VNode } from "vue";
+import { ComputedRef, PropType, ToRefs, UnwrapNestedRefs, VNode } from "vue";
 import { DetailsBladeContext } from "../../factories";
 import { IControlBaseProps } from "../../types/models";
 import { ControlSchema } from "../../types";
 
 export default {
   baseProps: {
-    type: Object as PropType<UnwrapNestedRefs<IControlBaseProps>>,
-    default: () => ({}) as IControlBaseProps,
+    type: Object as PropType<ToRefs<IControlBaseProps>>,
+    default: () => ({}) as ToRefs<IControlBaseProps>,
   },
   element: {
     type: Object as PropType<ControlSchema>,
@@ -21,16 +21,12 @@ export default {
     default: () => ({}) as ComputedRef<VNode[][]>,
   },
   formData: {
-    type: Object as PropType<MaybeRef<Record<string, unknown>>>,
-    default: () => ({}) as MaybeRef<Record<string, unknown>>,
+    type: Object as PropType<ToRefs<Record<string, unknown>>>,
+    default: () => ({}) as ToRefs<Record<string, unknown>>,
   },
   fieldContext: {
     type: Object,
   },
-  nodeBuilder: {
-    type: Function,
-    default: () => ({}),
-  },
   currentLocale: {
     type: String,
   },
@@ -40,8 +36,4 @@ export default {
   rows: {
     type: Number,
   },
-  onSetModelData: {
-    type: Function,
-    default: () => ({}),
-  },
 };

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   h,
   ref,
@@ -13,6 +14,7 @@ import {
   ComputedRef,
   readonly,
   toValue,
+  Ref,
 } from "vue";
 import * as _ from "lodash-es";
 import { Checkbox, InputField } from "../../components/factories";
@@ -20,14 +22,8 @@ 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 }[];
-}
+import { FilterBase, FilterCheckbox, FilterDateInput } from "../../types";
+import { onBeforeUnmount } from "vue";
 
 interface Control {
   title: string;
@@ -36,13 +32,6 @@ interface Control {
   };
 }
 
-interface Data {
-  columns: {
-    title: string;
-    controls: RawControl[];
-  }[];
-}
-
 export interface UseFilterBuilder {
   filterComponent: (slotMethods: { close: () => void }) =>
     | VNode<
@@ -62,15 +51,16 @@ export interface UseFilterBuilder {
 }
 
 export default <Query>(args: {
-  data: Data | undefined;
+  data: FilterBase | undefined;
   query: MaybeRef<Query>;
   load: AsyncAction<Query>;
+  scope: ComputedRef<Record<string, any>> | undefined;
 }): UseFilterBuilder => {
   const _search = args.load;
   const _data = args.data;
 
   const isFilterVisible = ref(true);
-  const filter: Record<string, unknown> = reactive({});
+  const filter: Ref<Record<string, unknown>> = ref({});
   const { t } = useI18n({ useScope: "global" });
 
   const controls = ref<Control[]>([]);
@@ -86,7 +76,7 @@ export default <Query>(args: {
   onMounted(() => createFilterControls());
 
   function isItemSelected(value: string, field: string) {
-    const item = filter[field];
+    const item = filter.value[field];
     if (Array.isArray(item) && typeof item !== "string") {
       return item.some((x) => x === value);
     } else {
@@ -96,13 +86,13 @@ export default <Query>(args: {
 
   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);
+      filter.value[field] = e
+        ? [...((filter.value[field] as string[]) || []), value]
+        : ((filter.value[field] as string[]) || []).filter((x) => x !== value);
 
-      if (!(filter[field] as string[]).length) filter[field] = undefined;
+      if (!(filter.value[field] as string[]).length) filter.value[field] = undefined;
     } else {
-      filter[field] = e ? value : undefined;
+      filter.value[field] = e ? value : undefined;
     }
   }
 
@@ -116,7 +106,8 @@ export default <Query>(args: {
         (obj, control) => {
           if (control.component === "vc-checkbox") {
             const filterData = control.data;
-            const fields = createCheckboxFromData(filterData, control);
+            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
+            const fields = createCheckboxFromData(filterDataFromScope, control);
 
             if (fields) {
               obj = fields;
@@ -138,18 +129,20 @@ export default <Query>(args: {
     });
   }
 
-  function createCheckboxFromData(data: RawControl["data"], control: RawControl) {
-    if (!(data && data.length)) return;
-    return data.reduce(
+  // TODO add to documentation support of dynamic data for filter
+  function createCheckboxFromData(data: MaybeRef<Record<string, string>[]>, control: FilterCheckbox) {
+    if (!(toValue(data) && toValue(data).length)) return;
+    return toValue(data).reduce(
       (obj, currC) => {
-        obj[currC.value] = Checkbox({
+        obj[currC[control.optionValue]] = Checkbox({
           props: {
-            classNames: "tw-mb-2",
-            modelValue: computed(() => isItemSelected(currC.value, control.field)),
-            "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field, control.multiple),
+            class: "tw-mb-2",
+            modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
+            "onUpdate:modelValue": (e: boolean) =>
+              selectFilterItem(e, currC[control.optionValue], control.field, control.multiple),
           },
           slots: {
-            default: () => unref(computed(() => t(currC.displayName))),
+            default: () => toValue(currC[control.optionLabel]),
           },
         });
 
@@ -159,14 +152,14 @@ export default <Query>(args: {
     );
   }
 
-  function createInput(control: RawControl) {
+  function createInput(control: FilterDateInput) {
     return InputField({
       props: {
         type: "date",
-        classNames: "tw-mb-3",
+        class: "tw-mb-3",
         label: toValue(computed(() => t(control.label ?? ""))),
-        modelValue: computed(() => filter[control.field]),
-        "onUpdate:modelValue": (e: unknown) => (filter[control.field] = e),
+        modelValue: computed(() => filter.value[control.field]),
+        "onUpdate:modelValue": (e: unknown) => (filter.value[control.field] = e),
       },
     });
   }
@@ -175,10 +168,10 @@ export default <Query>(args: {
     filterHandlerFn();
     await _search({
       ...unref(args.query),
-      ...filter,
+      ...filter.value,
     });
     appliedFilter.value = {
-      ...filter,
+      ...filter.value,
     };
   }
 
@@ -189,62 +182,72 @@ export default <Query>(args: {
 
     await _search({
       ...unref(args.query),
-      ...filter,
+      ...filter.value,
     });
   }
 
   function render(slotMethods: { close: () => void }) {
     if (_.isEmpty(controls.value)) return;
-    return h(VcContainer, () => [
-      h(VcRow, () =>
-        Object.values(controls.value).map(({ title, fields }) =>
-          h(VcCol, { class: "tw-p-2" }, () => [
-            h(
-              "div",
-              { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
-              unref(computed(() => t(title))),
-            ),
-            Object.values(fields).map((item) => {
-              if ("component" in item && item.component) {
-                return h(
-                  item.component as Component,
-                  { ...item.props, class: item.props.classNames },
-                  "slots" in item && item.slots ? { ...item.slots } : {},
-                );
-              }
-            }),
-          ]),
+    return h(
+      VcContainer,
+      {
+        onVnodeBeforeMount: () => {
+          if (Object.keys(appliedFilter.value).length) {
+            filter.value = _.cloneDeep(appliedFilter.value);
+          }
+        },
+      },
+      () => [
+        h(VcRow, () =>
+          Object.values(controls.value).map(({ title, fields }) =>
+            h(VcCol, { class: "tw-p-2" }, () => [
+              h(
+                "div",
+                { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
+                unref(computed(() => t(title))),
+              ),
+              Object.values(fields).map((item) => {
+                if ("component" in item && item.component) {
+                  return h(
+                    item.component as Component,
+                    { ...item.props, class: item.props.class },
+                    "slots" in item && item.slots ? { ...item.slots } : {},
+                  );
+                }
+              }),
+            ]),
+          ),
         ),
-      ),
-      h(VcRow, () =>
-        h(VcCol, { class: "tw-p-2" }, () =>
-          h("div", { class: "tw-flex tw-justify-end" }, [
-            h(
-              VcButton,
-              {
-                outline: true,
-                class: "tw-mr-4",
-                disabled: isDisabled(appliedFilter),
-                onClick: () => resetFilters(slotMethods.close),
-              },
-              () => t("COMPONENTS.FILTERS.RESET"),
-            ),
-            h(
-              VcButton,
-              {
-                disabled: isDisabled(filter),
-                onClick: () => applyFilters(slotMethods.close),
-              },
-              () => t("COMPONENTS.FILTERS.APPLY"),
-            ),
-          ]),
+        h(VcRow, () =>
+          h(VcCol, { class: "tw-p-2" }, () =>
+            h("div", { class: "tw-flex tw-justify-end" }, [
+              h(
+                VcButton,
+                {
+                  outline: true,
+                  class: "tw-mr-4",
+                  disabled: isDisabled(appliedFilter),
+                  onClick: () => resetFilters(slotMethods.close),
+                },
+                () => t("COMPONENTS.FILTERS.RESET"),
+              ),
+              h(
+                VcButton,
+                {
+                  disabled: isDisabled(filter),
+                  onClick: () => applyFilters(slotMethods.close),
+                },
+                () => t("COMPONENTS.FILTERS.APPLY"),
+              ),
+            ]),
+          ),
         ),
-      ),
-    ]);
+      ],
+    );
   }
 
   async function reset() {
-    Object.keys(filter).forEach((key: string) => (filter[key] = undefined));
+    Object.keys(filter).forEach((key: string) => (filter.value[key] = undefined));
 
     appliedFilter.value = {};
   }
@@ -252,7 +255,7 @@ export default <Query>(args: {
   return {
     filterComponent: render,
     activeFilterCount,
-    filter: readonly(filter),
+    filter: readonly(filter.value),
     isFilterVisible: computed(() => isFilterVisible.value),
     reset,
   };

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

@@ -1,10 +1,9 @@
-import { reactify } from "@vueuse/core";
 import * as _ from "lodash-es";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getModel = reactify((property: string, context: Record<string, any>) => {
+export const getModel = (property: string, context: Record<string, any>) => {
   if (property && context) {
     return _.get(context, property);
   }
   return null;
-});
+};

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode } from "vue";
+import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode, ToRefs } from "vue";
 import FIELD_MAP from "../components/FIELD_MAP";
 import { ControlSchema } from "../types";
 import { IControlBaseProps } from "../types/models";
@@ -10,6 +10,8 @@ import { DetailsBladeContext } from "../factories";
 import { safeIn } from "./safeIn";
 import { i18n } from "./../../../../core/plugins/i18n";
 import { visibilityHandler } from "./visibilityHandler";
+import { toRefs } from "@vueuse/core";
+import { unrefNested } from "./unrefNested";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -34,13 +36,15 @@ function nodeBuilder<
   bladeContext,
   currentLocale,
   formData,
+  updateFormData,
 }: {
   controlSchema: ControlSchema;
   parentId: string | number;
-  internalContext: MaybeRef<Context>;
+  internalContext: ToRefs<Context>;
   bladeContext: BContext;
   currentLocale: MaybeRef<string>;
-  formData: FormData;
+  formData: ToRefs<FormData>;
+  updateFormData?: (newVal: ToRefs<unknown>) => void;
 }): VNode {
   if (!controlSchema) throw new Error("There is no controlSchema provided");
 
@@ -60,14 +64,14 @@ function nodeBuilder<
     bladeContext.scope &&
     bladeContext.scope[controlSchema.property];
 
-  const modelValue = scopedProperty || contextProperty || undefined;
+  const modelValue = scopedProperty ?? contextProperty ?? 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)))
+      ? unref(unwrapInterpolation(controlSchema.label, internalContext))
       : undefined;
 
   const disabled =
@@ -82,10 +86,12 @@ function nodeBuilder<
       setModel({
         property: controlSchema.property,
         value: e,
-        context: toValue(internalContext),
+        context: internalContext,
         scope: bladeContext.scope,
       });
 
+      updateFormData?.(formData);
+
       if (
         safeIn("update", controlSchema) &&
         controlSchema.update &&
@@ -94,7 +100,7 @@ function nodeBuilder<
       ) {
         const updateMethod = controlSchema.update.method;
         if (safeIn(updateMethod, bladeContext.scope) && typeof bladeContext.scope[updateMethod] === "function") {
-          await bladeContext.scope[updateMethod](e, controlSchema.property, toValue(internalContext));
+          await bladeContext.scope[updateMethod](e, controlSchema.property, unrefNested(internalContext));
         }
       }
     }
@@ -124,24 +130,22 @@ function nodeBuilder<
     if (!("fields" in controlSchema)) return null;
 
     const contextFieldModel =
-      safeIn("property", controlSchema) &&
-      controlSchema.property &&
-      getModel(controlSchema.property, toValue(internalContext));
+      safeIn("property", controlSchema) && controlSchema.property && getModel(controlSchema.property, internalContext);
 
     const scopedFieldModel =
       safeIn("property", controlSchema) &&
       controlSchema.property &&
       getModel(controlSchema.property, toValue(bladeContext.scope ?? {}));
 
-    const model = toValue(scopedFieldModel) || toValue(contextFieldModel);
+    const model = scopedFieldModel || contextFieldModel;
 
-    if (model && Array.isArray(model)) {
-      return model.map((modelItem: { [x: string]: unknown; id: string }) =>
-        controlSchema.fields.reduce((arr, fieldItem) => {
+    if (toValue(model) && Array.isArray(toValue(model))) {
+      return toValue(model).map((modelItem: ToRefs<{ [x: string]: unknown; id: string }>) => {
+        return controlSchema.fields.reduce((arr, fieldItem) => {
           if (
             safeIn("visibility", fieldItem) &&
             fieldItem.visibility?.method &&
-            !visibilityHandler(bladeContext.scope?.[fieldItem.visibility?.method], toValue(modelItem), fieldItem)
+            !visibilityHandler(bladeContext.scope?.[fieldItem.visibility?.method], modelItem, fieldItem)
           ) {
             return arr;
           }
@@ -154,10 +158,11 @@ function nodeBuilder<
               bladeContext,
               currentLocale,
               formData,
+              updateFormData,
             }),
           ];
-        }, [] as VNode[]),
-      );
+        }, [] as VNode[]);
+      });
     }
 
     return [
@@ -165,7 +170,7 @@ function nodeBuilder<
         if (
           safeIn("visibility", field) &&
           field.visibility?.method &&
-          !visibilityHandler(bladeContext.scope?.[field.visibility?.method], toValue(internalContext), field)
+          !visibilityHandler(bladeContext.scope?.[field.visibility?.method], internalContext, field)
         ) {
           return arr;
         }
@@ -179,6 +184,7 @@ function nodeBuilder<
             bladeContext,
             currentLocale,
             formData,
+            updateFormData,
           }),
         ];
       }, [] as VNode[]),
@@ -186,13 +192,13 @@ function nodeBuilder<
   });
 
   const elProps = {
-    baseProps,
+    baseProps: toRefs(baseProps),
     bladeContext,
     element: controlSchema,
     currentLocale: unref(currentLocale),
     fields: fieldsHandler,
     formData,
-    fieldContext: reactive(unref(internalContext)),
+    fieldContext: internalContext,
   };
 
   return h(component, elProps);

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as _ from "lodash-es";
+import { unrefNested } from "./unrefNested";
 
 function setModel(args: {
   property: string;
@@ -10,7 +11,7 @@ function setModel(args: {
 }) {
   const { property, value, option, context, scope } = args;
 
-  if (_.has(context, property)) {
+  if (_.has(unrefNested(context), property)) {
     _.set(context, property, option ? value[option as keyof typeof value] : value);
   } else if (scope && _.has(scope, property)) {
     if (typeof scope[property] === "function") {