@vc-shell/framework 1.0.120 → 1.0.122

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

@@ -1,20 +1,29 @@
-import { ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, unref, watch } from "vue";
+import { Component, ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, unref, watch } from "vue";
 import { Gallery } from "../factories";
 import componentProps from "./props";
 import { IImage } from "../../../../../core/types";
 import { useBladeNavigation, usePopup } from "./../../../../components";
 import { useI18n } from "vue-i18n";
-import { AssetsDetails } from "../../../assets";
+import { default as AssetsDetails } from "../../../assets/components/assets-details/assets-details.vue";
 import * as _ from "lodash-es";
 import { GallerySchema } from "../../types";
 import { unrefNested } from "./../../helpers/unrefNested";
 import { setModel } from "../../helpers/setters";
+import { safeIn } from "../../helpers/safeIn";
 
 export default {
   name: "GalleryField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: GallerySchema }) {
-    if (!_.has(props.bladeContext.scope, "assetsHandler.images")) {
+    if (
+      !(
+        safeIn("bladeContext", props) &&
+        props.bladeContext &&
+        safeIn("scope", props.bladeContext) &&
+        props.bladeContext.scope &&
+        props.bladeContext.scope.assetsHandler?.images
+      )
+    ) {
       throw new Error(
         `There is no assetsHandler.images config provided in blade scope: ${JSON.stringify(
           props.bladeContext.scope,
@@ -28,7 +37,7 @@ export default {
     const { t } = useI18n({ useScope: "global" });
     const { openBlade } = useBladeNavigation();
 
-    const { edit, remove, upload, loading } = toRefs(props.bladeContext.scope.assetsHandler.images);
+    const imagesHandler = toRefs(props.bladeContext.scope?.assetsHandler?.images);
     const internalModel = ref();
 
     watch(
@@ -43,27 +52,29 @@ export default {
 
     return () => {
       const imageHandlers = {
-        loading,
+        loading: imagesHandler.loading,
         async edit(image: IImage) {
-          internalModel.value[props.element.property] = await edit.value(
+          internalModel.value[props.element.property] = await imagesHandler.edit?.value?.(
             unref(props.formData)[props.element.property] as IImage[],
             image
           );
           await editImages(internalModel.value[props.element.property]);
         },
-        async upload(files: FileList) {
-          internalModel.value[props.element.property] = await upload.value(
-            files,
-            unref(props.formData)[props.element.property] as IImage[],
-            (unref(props.formData).id as string) || (unref(props.formData).categoryId as string),
-            props.element.uploadFolder
-          );
+        async upload(files: FileList | null) {
+          if (files) {
+            internalModel.value[props.element.property] = await imagesHandler.upload?.value?.(
+              files,
+              unref(props.formData)[props.element.property] as IImage[],
+              (unref(props.formData).id as string) || (unref(props.formData).categoryId as string),
+              props.element.uploadFolder
+            );
 
-          files = null;
+            files = null;
 
-          await editImages(internalModel.value[props.element.property]);
+            await editImages(internalModel.value[props.element.property]);
 
-          return internalModel.value[props.element.property];
+            return internalModel.value[props.element.property];
+          }
         },
         async remove(image: IImage) {
           if (
@@ -77,7 +88,7 @@ export default {
               )
             )
           ) {
-            internalModel.value[props.element.property] = await remove.value(
+            internalModel.value[props.element.property] = await imagesHandler.remove?.value?.(
               unref(props.formData)[props.element.property] as IImage[],
               image
             );
@@ -99,9 +110,16 @@ export default {
       }
 
       async function editImages(args: IImage[]) {
-        internalModel.value[props.element.property] = args;
-        setModel({ property: props.element.property, value: args, context: props.fieldContext });
-        await props.bladeContext.validationState.validate();
+        if (props.fieldContext) {
+          internalModel.value[props.element.property] = args;
+          setModel({
+            property: props.element.property,
+            value: args,
+            context: props.fieldContext,
+            scope: props.bladeContext.scope,
+          });
+          await props.bladeContext.validationState.validate();
+        }
       }
 
       const field = Gallery({
@@ -109,7 +127,9 @@ export default {
           ...props.baseProps,
           loading: imageHandlers.loading,
           images: props.baseProps.modelValue,
-          multiple: true,
+          multiple: props.element.multiple,
+          variant: props.element.variant,
+          itemActions: props.element.actions,
           onUpload: imageHandlers.upload,
           onRemove: imageHandlers.remove,
           onEdit: onGalleryItemEdit,
@@ -118,7 +138,7 @@ export default {
         options: props.baseOptions,
       });
 
-      return props.baseOptions.visibility ? h(field.component, unrefNested(field.props)) : null;
+      return props.baseOptions.visibility ? h(field.component as Component, unrefNested(field.props)) : null;
     };
   },
 };

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h } from "vue";
+import { ExtractPropTypes, h, Component } from "vue";
 import { ImageField } from "../factories";
 import componentProps from "./props";
 import { ImageSchema } from "../../types";
@@ -22,7 +22,7 @@ export default {
         options: props.baseOptions,
       });
 
-      const render = h(field.component, field.props);
+      const render = h(field.component as Component, field.props);
 
       return props.baseOptions.visibility ? render : null;
     };

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

@@ -5,7 +5,6 @@ import ValidationField from "./ValidationField";
 import { getModel } from "../../helpers/getters";
 import { setModel } from "../../helpers/setters";
 import { InputCurrencySchema } from "../../types";
-import { unrefNested } from "../../helpers/unrefNested";
 
 export default {
   name: "InputCurrency",
@@ -15,12 +14,17 @@ export default {
       const field = InputCurrency({
         props: {
           ...props.baseProps,
-          option: getModel(props.element.optionProperty, props.fieldContext).value,
+          option: getModel(props.element.optionProperty, props.fieldContext ?? {}).value,
           optionLabel: props.element.optionLabel,
           optionValue: props.element.optionValue,
-          options: unref(props.bladeContext.scope)["currencies"],
+          options: unref(props.bladeContext.scope)?.["currencies"],
           "onUpdate:option": (e: string | number | Record<string, unknown>) => {
-            setModel({ value: e, property: props.element.optionProperty, context: props.fieldContext });
+            setModel({
+              value: e,
+              property: props.element.optionProperty,
+              context: props.fieldContext ?? {},
+              scope: props.bladeContext.scope,
+            });
           },
           clearable: props.element.clearable || false,
         },

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h, VNode } from "vue";
+import { ExtractPropTypes, h, VNode, Component } from "vue";
 import { InputField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
@@ -25,15 +25,15 @@ export default {
           clearable: props.element.clearable || false,
         },
         options: props.baseOptions,
-        slots: Object.entries(slotsMap).reduce((acc, [key, value]: [keyof InputSchema, keyof InputSchema]) => {
-          if (props.element[key]) {
-            acc[value] = () =>
+        slots: Object.entries(slotsMap).reduce((acc, [key, value]) => {
+          if (props.element[key as keyof InputSchema]) {
+            acc[value as keyof InputSchema] = () =>
               nodeBuilder({
-                controlSchema: props.element[key] as ControlSchema,
-                parentId: `${(props.element[key] as ControlSchema).id}`,
-                internalContext: props.fieldContext,
+                controlSchema: props.element[key as keyof InputSchema] as ControlSchema,
+                parentId: `${(props.element[key as keyof InputSchema] as ControlSchema).id}`,
+                internalContext: props.fieldContext ?? {},
                 bladeContext: props.bladeContext,
-                currentLocale: props.currentLocale,
+                currentLocale: props.currentLocale ?? "en-US",
                 formData: props.formData,
               });
           }
@@ -41,7 +41,7 @@ export default {
         }, {} as Record<keyof InputSchema, () => VNode | false>),
       });
 
-      const render = h(field.component, field.props, field.slots);
+      const render = h(field.component as Component, field.props, field.slots);
 
       if (field.props.rules) {
         return props.baseOptions.visibility

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

@@ -1,10 +1,10 @@
+import { ComponentSlots } from "../../../../utilities/vueUtils";
 import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { SelectField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
 import { VcSelect } from "../../../../../ui/components";
-import type { ComponentSlots } from "vue-component-type-helpers";
 
 type TScope =
   | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
@@ -21,7 +21,7 @@ export default {
           optionValue: props.element.optionValue,
           optionLabel: props.element.optionLabel,
           emitValue: props.element.emitValue,
-          options: props.bladeContext.scope[props.element.optionsMethod],
+          options: props.bladeContext.scope?.[props.element.optionsMethod],
           currentLanguage: props.currentLocale,
           clearable: props.element.clearable || false,
           searchable: props.element.searchable || false,
@@ -32,7 +32,10 @@ export default {
           props.element.customTemplate &&
           ["selected-item", "option"].reduce((obj, slot) => {
             obj[slot] = (scope: TScope) =>
-              h(resolveComponent(props.element.customTemplate.component), { context: scope, slotName: slot });
+              h(resolveComponent(props.element.customTemplate?.component as string), {
+                context: scope,
+                slotName: slot,
+              });
             return obj;
           }, {} as Record<string, (scope: TScope) => VNode>),
       });

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, computed, h, unref } from "vue";
 import componentProps from "./props";
 import { StatusSchema } from "../../types";
 import { StatusField } from "../factories";
@@ -13,7 +13,7 @@ export default {
         if (props.element.content && typeof props.element.content === "string") {
           return props.element.content;
         } else if (props.element.content?.method) {
-          const method = unref(props.bladeContext.scope)[props.element.content?.method];
+          const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
           if (method === "function") {
             return method();
           } else {
@@ -48,7 +48,7 @@ export default {
       });
 
       return props.baseOptions.visibility
-        ? h(field.component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots)
+        ? h(field.component as Component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots)
         : null;
     };
   },

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

@@ -0,0 +1,41 @@
+import { TextareaField } from "./../factories";
+import { TextareaSchema } from "./../../types/index";
+import { ExtractPropTypes, h, Component } from "vue";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+
+export default {
+  name: "TextareaField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: TextareaSchema }) {
+    return () => {
+      const field = TextareaField({
+        props: {
+          ...props.baseProps,
+          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;
+      } else {
+        return props.baseOptions.visibility ? render : null;
+      }
+    };
+  },
+};

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

@@ -15,30 +15,30 @@ export default defineComponent({
   setup(props) {
     const slots = useSlots();
     const fieldKey = computed(() =>
-      unref(props.props).multilanguage
-        ? `${String(props.props.key)}_${unref(props.props.currentLanguage)}`
-        : String(props.props.key)
+      unref(props.props)?.multilanguage
+        ? `${String(props.props?.key)}_${unref(props.props?.currentLanguage)}`
+        : String(props.props?.key)
     );
 
     const fieldNameLang = reactify((name: string) => {
-      return props.props.multilanguage ? name + "_" + props.props.currentLanguage : name;
+      return props.props?.multilanguage ? name + "_" + props.props.currentLanguage : name;
     });
 
     return () =>
       h(
         Field,
         {
-          rules: props.props.rules,
-          modelValue: props.props.modelValue,
-          label: props.props.label,
+          rules: props.props?.rules,
+          modelValue: props.props?.modelValue,
+          label: props.props?.label,
           key: fieldKey.value,
           name: fieldNameLang(
-            props.rows > 1 && props.index >= 0 ? props.props?.name + "_" + props.index : props.props?.name
+            (props.rows ?? 1) > 1 && (props.index ?? 0) >= 0 ? props.props?.name + "_" + props.index : props.props?.name
           ).value,
         },
         {
           default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
-            return slots.default().map((slot) =>
+            return slots.default?.().map((slot) =>
               h(slot, {
                 ...props.props,
                 error: !!errors.length,

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h } from "vue";
+import { Component, ExtractPropTypes, h } from "vue";
 import { VideoField } from "../factories";
 import componentProps from "./props";
 import { VideoSchema } from "../../types";
@@ -13,14 +13,11 @@ export default {
           ...props.baseProps,
           source: props.baseProps.modelValue,
           size: props.element.size,
-          rounded: props.element.rounded,
-          bordered: props.element.bordered,
-          clickable: props.element.clickable,
         },
         options: props.baseOptions,
       });
 
-      const render = h(field.component, field.props);
+      const render = h(field.component as Component, field.props);
 
       return props.baseOptions.visibility ? render : null;
     };

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

@@ -9,7 +9,7 @@ export default {
     default: () => ({} as IControlBaseProps),
   },
   baseOptions: {
-    type: Object as PropType<UnwrapNestedRefs<IControlBaseOptions>>,
+    type: Object as PropType<IControlBaseOptions>,
     default: () => ({} as IControlBaseOptions),
   },
   element: {
@@ -30,7 +30,6 @@ export default {
   },
   fieldContext: {
     type: Object,
-    default: undefined,
   },
   nodeBuilder: {
     type: Function,

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

@@ -40,14 +40,16 @@ interface Data {
 }
 
 export interface UseFilterBuilder {
-  filterComponent: (slotMethods: { close: () => void }) => VNode<
-    RendererNode,
-    RendererElement,
-    {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      [key: string]: any;
-    }
-  >;
+  filterComponent: (slotMethods: { close: () => void }) =>
+    | VNode<
+        RendererNode,
+        RendererElement,
+        {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [key: string]: any;
+        }
+      >
+    | undefined;
   activeFilterCount: ComputedRef<number>;
   isFilterVisible: ComputedRef<boolean>;
   reset: () => Promise<void>;
@@ -55,7 +57,11 @@ export interface UseFilterBuilder {
   readonly filter: Record<string, any>;
 }
 
-export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAction<Query> }): UseFilterBuilder => {
+export default <Query>(args: {
+  data: Data | undefined;
+  query: MaybeRef<Query>;
+  load: AsyncAction<Query>;
+}): UseFilterBuilder => {
   const _search = args.load;
   const _data = args.data;
 
@@ -108,7 +114,9 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
           const filterData = control.data;
           const fields = createCheckboxFromData(filterData, control);
 
-          obj = fields;
+          if (fields) {
+            obj = fields;
+          }
         }
         if (control.component === "vc-input") {
           obj[control.field] = createInput(control);

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

@@ -6,9 +6,9 @@ import type { ItemId, IValidationState, UseDetails } from "../types";
 import { createUnrefFn } from "@vueuse/core";
 
 export interface UseDetailsFactoryParams<Item> {
-  load: (args: ItemId) => Promise<Item>;
-  saveChanges: (details: Item) => Promise<Item>;
-  remove: (args: ItemId) => Promise<void>;
+  load: (args?: ItemId) => Promise<Item>;
+  saveChanges: (details: Item) => Promise<Item | void>;
+  remove?: (args: ItemId) => Promise<void>;
 }
 
 export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<Item>) => {
@@ -23,20 +23,20 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
     const isDirty = useIsFormDirty();
     const isDisabled = computed(() => !isDirty.value || !isFormValid.value);
 
-    const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args) => {
+    const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args?: ItemId) => {
       item.value = await factoryParams.load(args);
       resetModified(item.value);
     });
 
     const { loading: manageLoading, action: saveChanges } = useAsync<Item>(async (item) => {
       if (validationState.value.valid) {
-        await factoryParams.saveChanges(item);
+        await factoryParams.saveChanges(item as Item);
         isModified.value = false;
       } else throw new Error("Form is not valid");
     });
 
     const { loading: removeLoading, action: remove } = useAsync<ItemId>(async (args) => {
-      await factoryParams.remove(args);
+      await factoryParams.remove?.(args as ItemId);
     });
 
     const loading = useLoading(itemLoading, manageLoading, removeLoading);
@@ -48,6 +48,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
         modified: isModified.value,
         disabled: isDisabled.value,
         validated: !isDisabled.value && isModified.value,
+        cachedValue: itemTemp.value,
         setFieldError,
         setErrors,
         resetModified,

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

@@ -38,18 +38,18 @@ export const useListFactory = <Items extends Record<string, any>[], Query extend
 
     const { loading: itemsLoading, action: load } = useAsync<Query>(async (query) => {
       searchQuery.value = { ...searchQuery.value, ...query };
-      searchResult.value = await factoryParams.load(query);
+      searchResult.value = await factoryParams.load?.(query as Query);
     });
 
     const { loading: itemsDelete, action: remove } = useAsync<CustomQuery>(async (customQuery) => {
-      await factoryParams.remove(searchQuery.value, customQuery);
+      await factoryParams.remove?.(searchQuery.value, customQuery as CustomQuery);
     });
 
     const loading = useLoading(itemsLoading, itemsDelete);
 
     const pagination = computed(() => ({
       currentPage: (searchQuery.value?.skip || 0) / Math.max(1, searchQuery?.value.take || 20) + 1,
-      totalCount: searchResult.value?.totalCount,
+      totalCount: searchResult.value?.totalCount || 0,
       pageSize: pageSize,
       get pages() {
         return Math.ceil(this.totalCount / this.pageSize);
@@ -57,7 +57,7 @@ export const useListFactory = <Items extends Record<string, any>[], Query extend
     }));
 
     return {
-      items: computed(() => searchResult.value?.results),
+      items: computed(() => searchResult.value?.results as Items),
       query: searchQuery,
       loading,
       pagination,

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

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef } from "vue";
+import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
 import { AsyncAction } from "../../../../../core/composables";
 import { SettingsSchema } from "../../types";
 import { Asset, AssetsHandler, IBladeToolbar, IImage } from "../../../../../core/types";
 import { useBladeNavigation } from "../../../../components";
+import { FormContext } from "vee-validate";
 
 export type ItemId = { id: string };
 
@@ -20,10 +21,11 @@ export interface IValidationState<Item> {
   disabled: boolean;
   modified: boolean;
   validated: boolean;
-  setFieldError: (field: string, message: string | string[]) => void;
-  setErrors: (fields: Record<string, string>) => void;
+  cachedValue: Item | undefined;
+  setFieldError: FormContext["setFieldError"];
+  setErrors: FormContext["setErrors"];
   resetModified: (data: MaybeRef<Item>, updateInitial?: MaybeRef<boolean>) => void;
-  validate: () => Promise<{ valid: boolean; errors: Record<string, string> }>;
+  validate: FormContext["validate"];
 }
 
 export type CustomQuery = { ids: string[] | null; allSelected?: boolean };
@@ -31,9 +33,9 @@ export type CustomQuery = { ids: string[] | null; allSelected?: boolean };
 export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope> {
   load: AsyncAction<ItemId>;
   saveChanges: AsyncAction<Item>;
-  remove: AsyncAction<ItemId>;
+  remove?: AsyncAction<ItemId>;
   loading: ComputedRef<boolean>;
-  item: Ref<Item>;
+  item: Ref<Item | undefined>;
   validationState: ComputedRef<IValidationState<Item>>;
   scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
   bladeTitle?: ComputedRef<string>;
@@ -64,7 +66,7 @@ export interface ListBaseBladeScope extends BaseBladeScope {
 }
 
 export interface DetailsBaseBladeScope extends BaseBladeScope {
-  disabled?: ComputedRef<boolean>;
+  disabled?: ComputedRef<boolean | undefined>;
   multilanguage?: {
     loading: ComputedRef<boolean>;
     currentLocale: Ref<string>;
@@ -89,8 +91,8 @@ export interface DetailsBaseBladeScope extends BaseBladeScope {
     }) => void;
   };
   assetsHandler?: {
-    assets?: AssetsHandler<Asset, Asset>;
-    images?: AssetsHandler<IImage, IImage>;
+    assets?: AssetsHandler<Asset>;
+    images?: AssetsHandler<IImage>;
   };
 }