@vc-shell/framework 1.0.156 → 1.0.158

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

@@ -12,6 +12,7 @@ import {
   VNode,
   ComputedRef,
   readonly,
+  toValue,
 } from "vue";
 import * as _ from "lodash-es";
 import { Checkbox, InputField } from "../../components/factories";
@@ -143,7 +144,7 @@ export default <Query>(args: {
       (obj, currC) => {
         obj[currC.value] = Checkbox({
           props: {
-            classNames: "tw-mb-2",
+            class: "tw-mb-2",
             modelValue: computed(() => isItemSelected(currC.value, control.field)),
             "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field, control.multiple),
           },
@@ -162,8 +163,8 @@ export default <Query>(args: {
     return InputField({
       props: {
         type: "date",
-        classNames: "tw-mb-3",
-        label: control.label,
+        class: "tw-mb-3",
+        label: toValue(computed(() => t(control.label ?? ""))),
         modelValue: computed(() => filter[control.field]),
         "onUpdate:modelValue": (e: unknown) => (filter[control.field] = e),
       },
@@ -207,7 +208,7 @@ export default <Query>(args: {
               if ("component" in item && item.component) {
                 return h(
                   item.component as Component,
-                  { ...item.props, class: item.props.classNames },
+                  { ...item.props, class: item.props.class },
                   "slots" in item && item.slots ? { ...item.slots } : {},
                 );
               }

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") {

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

@@ -1,11 +1,11 @@
-import { unref } from "vue";
+import { ToRefs, unref, UnwrapRef } from "vue";
 
-export function unrefNested<T extends Record<string, unknown>>(field: T) {
-  const unreffedProps = {} as T;
+export function unrefNested<T extends ToRefs<Record<string, unknown>>>(field: T) {
+  const unreffedProps = {} as { [K in keyof T]: UnwrapRef<T[K]> };
 
   if (field) {
     Object.keys(field).forEach((key: keyof T) => {
-      unreffedProps[key] = unref(field[key]);
+      unreffedProps[key] = unref(field[key]) as UnwrapRef<T[typeof key]>;
     });
 
     return unreffedProps;

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

@@ -33,7 +33,6 @@
         <div class="item-details__content">
           <VcForm class="tw-grow tw-p-4">
             <SchemaRender
-              :key="`${loading}`"
               v-model="item"
               :ui-schema="form.children"
               :context="bladeContext"
@@ -79,7 +78,6 @@ import {
   ComputedRef,
   type Component,
   ConcreteComponent,
-  toRefs,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, useMounted, useTemplateRefsList } from "@vueuse/core";
@@ -98,7 +96,6 @@ 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;

package/shared/modules/dynamic/types/models.ts

@@ -73,7 +73,6 @@ export interface IControlBaseProps {
   disabled?: boolean;
   required?: boolean;
   name?: string;
-  classNames?: string;
   modelValue?: any;
   tooltip?: string;
   "onUpdate:modelValue"?: (event: any) => void;

package/ui/components/molecules/vc-multivalue/vc-multivalue.vue

@@ -126,7 +126,6 @@ import { unref, nextTick, ref, computed } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate, MiddlewareState } from "@floating-ui/vue";
 import { generateId } from "../../../../core/utilities";
-import * as _ from "lodash-es";
 
 export interface Props<T> {
   placeholder?: string;

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -35,7 +35,7 @@
   </span>
 
   <!-- Date exact cell -->
-  <dvi
+  <div
     v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
     class="tw-text-[#a5a5a5] tw-truncate"
   >
@@ -73,7 +73,7 @@
     >
       N/A
     </div>
-  </dvi>
+  </div>
 
   <!-- Image cell -->
   <template v-else-if="cell.type === 'image'">

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";

package/ui/components/organisms/vc-table/vc-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0">
+  <div class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow">
     <!-- Header slot with filter and searchbar -->
     <slot
       v-if="