@vc-shell/framework 1.0.120 → 1.0.121

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -149,14 +149,14 @@ const isDirty = useIsFormDirty();
 const { t } = useI18n({ useScope: "global" });
 const defaultAsset = ref<Asset>({ ...props.options?.asset });
 
-const readonly = computed(() => props.options.disabled);
+const readonly = computed(() => props.options?.disabled);
 
 const assetNameClean = computed({
   get() {
-    return defaultAsset.value.name.split(".").shift();
+    return defaultAsset.value.name?.split(".").shift();
   },
-  set(value: string) {
-    const fileExtension = defaultAsset.value.name.split(".").pop();
+  set(value) {
+    const fileExtension = defaultAsset.value.name?.split(".").pop();
     defaultAsset.value.name = value + "." + fileExtension;
   },
 });
@@ -194,7 +194,10 @@ const bladeToolbar = ref<IBladeToolbar[]>([
 
 const assetType = computed(() => defaultAsset.value?.typeId);
 
-function copyLink(link: string) {
+function copyLink(link: string | undefined) {
+  if (!link) {
+    return;
+  }
   if (link.charAt(0) === "/") {
     navigator.clipboard?.writeText(`${location.origin}${link}`);
   } else {
@@ -202,7 +205,10 @@ function copyLink(link: string) {
   }
 }
 
-function openLink(link: string) {
+function openLink(link: string | undefined) {
+  if (!link) {
+    return;
+  }
   location.href = link;
 }
 </script>

package/shared/modules/assets/components/assets-details/index.ts

@@ -1,3 +1 @@
-import _AssetsDetails from "./assets-details.vue";
-
-export const AssetsDetails = _AssetsDetails as typeof _AssetsDetails;
+export { default as AssetsDetails } from "./assets-details.vue";

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -24,7 +24,7 @@
         :items="defaultAssets"
         :header="false"
         :footer="false"
-        :item-action-builder="!readonly && actionBuilder"
+        :item-action-builder="!readonly ? actionBuilder : undefined"
         :multiselect="!readonly"
         class="tw-h-full tw-w-full"
         @item-click="onItemClick"
@@ -48,14 +48,14 @@
         <!-- Override size column -->
         <template #item_size="{ item }">
           <div>
-            {{ readableSize(item.size) }}
+            {{ readableSize(item.size ?? 0) }}
           </div>
         </template>
 
         <!-- Override url column -->
         <template #item_url="{ item }">
           <div class="tw-flex tw-items-center tw-justify-center">
-            <template v-if="isImage(item.name)">
+            <template v-if="isImage(item.name ?? '')">
               <VcImage
                 :bordered="true"
                 size="s"
@@ -66,7 +66,7 @@
             </template>
             <template v-else>
               <VcIcon
-                :icon="getFileThumbnail(item.name)"
+                :icon="getFileThumbnail(item.name ?? '')"
                 class="tw-text-[#a9bfd2] tw-text-[38px]"
               ></VcIcon>
             </template>
@@ -83,7 +83,7 @@
         <!-- Mobile -->
         <template #mobile-item="{ item }">
           <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-p-3 tw-flex tw-flex-nowrap">
-            <template v-if="isImage(item.name)">
+            <template v-if="isImage(item.name ?? '')">
               <VcImage
                 :bordered="true"
                 size="s"
@@ -95,7 +95,7 @@
             <template v-else>
               <div class="tw-w-12 tw-flex tw-items-center tw-justify-center">
                 <VcIcon
-                  :icon="getFileThumbnail(item.name)"
+                  :icon="getFileThumbnail(item.name ?? '')"
                   class="tw-text-[#a9bfd2] tw-w-12 tw-text-[48px]"
                 ></VcIcon>
               </div>
@@ -108,7 +108,7 @@
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
                   <VcHint>{{ t("ASSETS_MANAGER.TABLE.HEADER.SIZE") }}</VcHint>
                   <div class="tw-truncate tw-mt-1">
-                    {{ readableSize(item.size) }}
+                    {{ readableSize(item.size ?? 0) }}
                   </div>
                 </div>
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
@@ -143,10 +143,10 @@
 
 <script setup lang="ts">
 import { Asset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../../core/types";
-import { ref, computed, onMounted, unref, watch, markRaw, UnwrapNestedRefs } from "vue";
+import { ref, computed, onMounted, unref, watch, markRaw, Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import moment from "moment";
-import Assets from "./../../../assets/components/assets-details/assets-details.vue";
+import { AssetsDetails as Assets } from "./../../../assets/components/assets-details";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import * as _ from "lodash-es";
 import { IParentCallArgs, useBladeNavigation } from "../../../../components";
@@ -185,7 +185,7 @@ const defaultAssets = ref<Asset[]>([]);
 const isDragging = ref(false);
 const uploader = ref();
 const loading = ref(false);
-const selectedItems = ref([]);
+const selectedItems: Ref<Asset[]> = ref([]);
 const readonly = computed(() => props.options.disabled);
 let assetsCopy: Asset[];
 const modified = ref(false);

package/shared/modules/dynamic/components/FIELD_MAP.ts

@@ -12,12 +12,13 @@ import StatusField from "./fields/StatusField";
 import ContentField from "./fields/ContentField";
 import VideoField from "./fields/VideoField";
 import ImageField from "./fields/ImageField";
+import TextareaField from "./fields/TextareaField";
 
 import { ControlSchema } from "../types";
-import { ConcreteComponent } from "vue";
 
 type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
-type TFieldMap = Record<AvailableComponents, ConcreteComponent>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TFieldMap = Record<AvailableComponents, any>;
 
 const FIELD_MAP: TFieldMap = {
   "vc-select": SelectField,
@@ -34,6 +35,7 @@ const FIELD_MAP: TFieldMap = {
   "vc-field": ContentField,
   "vc-video": VideoField,
   "vc-image": ImageField,
+  "vc-textarea": TextareaField,
 };
 
 export default FIELD_MAP;

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -8,7 +8,7 @@ import { nodeBuilder } from "../helpers/nodeBuilder";
 const schemeRenderProps = {
   context: {
     type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
-    default: () => ({}),
+    default: () => ({} as DetailsBladeContext),
   },
   modelValue: {
     type: Object as PropType<Record<string, any>>,
@@ -74,7 +74,7 @@ export default defineComponent({
               formData: internalFormData,
             }),
           ],
-          []
+          [] as VNode[]
         )
       );
   },

package/shared/modules/dynamic/components/factories.ts

@@ -14,6 +14,7 @@ import {
   VcSelect,
   VcStatus,
   VcVideo,
+  VcTextarea,
 } from "../../../../ui/components";
 import {
   IControlBaseProps,
@@ -32,6 +33,7 @@ import {
   IContentField,
   IVideoField,
   IImageField,
+  ITextareaField,
 } from "../types/models";
 
 export const ControlBase = ({ visibility = undefined }: IControlBaseOptions): IControlBaseOptions => ({
@@ -62,7 +64,7 @@ export const ControlBaseProps = ({
   ...rest,
 });
 
-export const SelectField = ({ props, slots, options }: Partial<ISelectField>): ISelectField => ({
+export const SelectField = ({ props, slots, options }: ISelectField): ISelectField => ({
   component: markRaw(VcSelect) as any,
   props: {
     ...ControlBaseProps(props),
@@ -72,7 +74,7 @@ export const SelectField = ({ props, slots, options }: Partial<ISelectField>): I
   slots,
 });
 
-export const StatusField = ({ props, slots, options }: Partial<IStatusField>): IStatusField => ({
+export const StatusField = ({ props, slots, options }: IStatusField): IStatusField => ({
   component: markRaw(VcStatus),
   props: {
     ...ControlBaseProps(props),
@@ -82,7 +84,7 @@ export const StatusField = ({ props, slots, options }: Partial<IStatusField>): I
   slots,
 });
 
-export const InputField = ({ props, options, slots }: Partial<IInputField>): IInputField => ({
+export const InputField = ({ props, options, slots }: IInputField): IInputField => ({
   component: markRaw(VcInput),
   props: {
     ...ControlBaseProps(props),
@@ -92,7 +94,16 @@ export const InputField = ({ props, options, slots }: Partial<IInputField>): IIn
   slots,
 });
 
-export const ContentField = ({ props, options }: Partial<IContentField>): IContentField => ({
+export const TextareaField = ({ props, options }: ITextareaField): ITextareaField => ({
+  component: markRaw(VcTextarea),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+});
+
+export const ContentField = ({ props, options }: IContentField): IContentField => ({
   component: markRaw(VcField),
   props: {
     ...ControlBaseProps(props),
@@ -101,7 +112,7 @@ export const ContentField = ({ props, options }: Partial<IContentField>): IConte
   options: ControlBase(options),
 });
 
-export const ImageField = ({ props, options }: Partial<IImageField>): IImageField => ({
+export const ImageField = ({ props, options }: IImageField): IImageField => ({
   component: markRaw(VcImage),
   props: {
     ...ControlBaseProps(props),
@@ -110,7 +121,7 @@ export const ImageField = ({ props, options }: Partial<IImageField>): IImageFiel
   options: ControlBase(options),
 });
 
-export const VideoField = ({ props, options }: Partial<IInputField>): IVideoField => ({
+export const VideoField = ({ props, options }: IInputField): IVideoField => ({
   component: markRaw(VcVideo),
   props: {
     ...ControlBaseProps(props),
@@ -119,7 +130,7 @@ export const VideoField = ({ props, options }: Partial<IInputField>): IVideoFiel
   options: ControlBase(options),
 });
 
-export const InputCurrency = ({ props, options }: Partial<IInputCurrency>): IInputCurrency => ({
+export const InputCurrency = ({ props, options }: IInputCurrency): IInputCurrency => ({
   component: markRaw(VcInputCurrency),
   props: {
     ...ControlBaseProps(props),
@@ -128,7 +139,7 @@ export const InputCurrency = ({ props, options }: Partial<IInputCurrency>): IInp
   options: ControlBase(options),
 });
 
-export const CardCollection = ({ props, options, slots }: Partial<ICardCollection>): ICardCollection => ({
+export const CardCollection = ({ props, options, slots }: ICardCollection): ICardCollection => ({
   component: markRaw(VcCard),
   props: {
     ...props,
@@ -138,7 +149,7 @@ export const CardCollection = ({ props, options, slots }: Partial<ICardCollectio
   slots,
 });
 
-export const DynamicProperties = ({ props, options }: Partial<IDynamicProperties>): IDynamicProperties => ({
+export const DynamicProperties = ({ props, options }: IDynamicProperties): IDynamicProperties => ({
   component: markRaw(VcDynamicProperty),
   props: {
     ...props,
@@ -147,7 +158,7 @@ export const DynamicProperties = ({ props, options }: Partial<IDynamicProperties
   options: ControlBase(options),
 });
 
-export const EditorField = ({ props, options }: Partial<IEditorField>): IEditorField => ({
+export const EditorField = ({ props, options }: IEditorField): IEditorField => ({
   component: markRaw(VcEditor),
   props: {
     ...ControlBaseProps(props),
@@ -156,7 +167,7 @@ export const EditorField = ({ props, options }: Partial<IEditorField>): IEditorF
   options: ControlBase(options),
 });
 
-export const Gallery = ({ props, options }: Partial<IGallery>): IGallery => ({
+export const Gallery = ({ props, options }: IGallery): IGallery => ({
   component: markRaw(VcGallery),
   props: {
     ...ControlBaseProps(props),
@@ -165,7 +176,7 @@ export const Gallery = ({ props, options }: Partial<IGallery>): IGallery => ({
   options: ControlBase(options),
 });
 
-export const Checkbox = ({ props, options, slots }: Partial<ICheckbox>): ICheckbox => ({
+export const Checkbox = ({ props, options, slots }: ICheckbox): ICheckbox => ({
   component: markRaw(VcCheckbox),
   props: {
     ...ControlBaseProps(props),
@@ -175,7 +186,7 @@ export const Checkbox = ({ props, options, slots }: Partial<ICheckbox>): ICheckb
   slots,
 });
 
-export const Button = ({ props, options, slots }: Partial<IButton>): IButton => ({
+export const Button = ({ props, options, slots }: IButton): IButton => ({
   component: markRaw(VcButton),
   props: {
     ...ControlBaseProps(props),

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h, unref } from "vue";
+import { Component, ExtractPropTypes, h, unref } from "vue";
 import { Button } from "../factories";
 import componentProps from "./props";
 import { ButtonSchema } from "../../types";
@@ -16,7 +16,7 @@ export default {
           iconSize: props.element?.iconSize,
           text: props.element?.text,
           onClick: () => {
-            unref(props.bladeContext.scope)[props.element.method]();
+            unref(props.bladeContext.scope)?.[props.element.method]();
           },
         },
         options: props.baseOptions,
@@ -25,7 +25,7 @@ export default {
         },
       });
 
-      return props.baseOptions.visibility ? h(field.component, field.props, field.slots) : null;
+      return props.baseOptions.visibility ? h(field.component as Component, field.props, field.slots) : null;
     };
   },
 };

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

@@ -1,4 +1,14 @@
-import { ExtractPropTypes, computed, h, toValue, VNodeChild, VNodeNormalizedChildren, watch, VNode } from "vue";
+import {
+  ExtractPropTypes,
+  computed,
+  h,
+  toValue,
+  VNodeChild,
+  VNodeNormalizedChildren,
+  watch,
+  VNode,
+  Component,
+} from "vue";
 import { CardCollection } from "../factories";
 import componentProps from "./props";
 import { CardSchema } from "../../types";
@@ -14,7 +24,7 @@ export default {
 
     const commentRecursiveNodeCheck = (node: VNodeChild | VNodeNormalizedChildren): boolean => {
       return _.every(Array.isArray(node) ? node : [node], (nodeItem) => {
-        if (typeof nodeItem === "object") {
+        if (nodeItem && typeof nodeItem === "object") {
           if (
             "children" in nodeItem &&
             nodeItem.children &&
@@ -24,12 +34,13 @@ export default {
             return commentRecursiveNodeCheck(nodeItem.children);
           }
           if (
+            nodeItem &&
             "el" in nodeItem &&
             nodeItem.el &&
-            "nodeType" in (nodeItem.el as VNode["el"]) &&
-            (nodeItem.el as VNode["el"]).nodeType
+            "nodeType" in (nodeItem.el as VNode["el"] as HTMLElement) &&
+            (nodeItem.el as VNode["el"] as HTMLElement).nodeType
           ) {
-            return (nodeItem.el as VNode["el"]).nodeType !== 8;
+            return (nodeItem.el as VNode["el"] as HTMLElement).nodeType !== 8;
           } else return true;
         } else return true;
       });
@@ -59,15 +70,17 @@ export default {
         slots: {
           default: () => h("div", { class: "tw-flex tw-flex-col tw-p-4 tw-gap-4" }, toValue(props.fields)),
           actions: () => {
-            const elem = nodeBuilder({
-              controlSchema: props.element.action,
-              parentId: `${props.element.id}`,
-              internalContext: props.fieldContext,
-              bladeContext: props.bladeContext,
-              currentLocale: props.currentLocale,
-              formData: props.formData,
-            });
-            return elem;
+            if (props.element.action && props.fieldContext && props.currentLocale) {
+              const elem = nodeBuilder({
+                controlSchema: props.element.action,
+                parentId: `${props.element.id}`,
+                internalContext: props.fieldContext,
+                bladeContext: props.bladeContext,
+                currentLocale: props.currentLocale,
+                formData: props.formData,
+              });
+              return elem;
+            }
           },
         },
       });
@@ -80,7 +93,9 @@ export default {
         return localStorage?.getItem(key) === "true";
       }
 
-      return props.baseOptions.visibility && isNotEmpty.value ? h(field.component, field.props, field.slots) : null;
+      return props.baseOptions.visibility && isNotEmpty.value
+        ? h(field.component as Component, field.props, field.slots)
+        : null;
     };
   },
 };

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h } from "vue";
+import { ExtractPropTypes, h, Component } from "vue";
 import { Checkbox } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
@@ -21,7 +21,7 @@ export default {
         },
       });
 
-      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/ContentField.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, h } from "vue";
+import { ExtractPropTypes, h, Component } from "vue";
 import { ContentField } from "../factories";
 import componentProps from "./props";
 import { FieldSchema } from "../../types";
@@ -17,7 +17,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/DynamicProperty.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ExtractPropTypes, computed, h, ref, toValue, watch, UnwrapNestedRefs } from "vue";
+import { ExtractPropTypes, computed, h, ref, toValue, watch, UnwrapNestedRefs, Component } from "vue";
 import { DynamicProperties } from "../factories";
 import componentProps from "./props";
 import { unrefNested } from "../../helpers/unrefNested";
@@ -31,7 +31,7 @@ export default {
   props: componentProps,
   emits: ["setModelData"],
   setup(props: ExtractPropTypes<typeof componentProps> & { element: DynamicPropertiesSchema }) {
-    if (!props.bladeContext.scope.dynamicProperties) {
+    if (!props.bladeContext.scope?.dynamicProperties) {
       throw new Error(
         `There is no DynamicProperties config provided in blade scope: ${JSON.stringify(
           props.bladeContext.scope,
@@ -54,7 +54,7 @@ export default {
     );
 
     const filteredProps = reactify(
-      (prop: IProperty[], { include, exclude }: { include: string[]; exclude: string[] }) => {
+      (prop: IProperty[], { include, exclude }: { include?: string[]; exclude?: string[] }) => {
         if (prop) {
           return prop.filter((x) => {
             if (include) return include?.includes(x.type);
@@ -75,20 +75,30 @@ export default {
       return (dynamicProps.value || [])?.map((prop) =>
         DynamicProperties({
           props: {
-            disabled: "disabled" in props.bladeContext.scope && props.bladeContext.scope.disabled,
+            disabled:
+              props.bladeContext.scope && "disabled" in props.bladeContext.scope && props.bladeContext.scope.disabled,
             property: prop,
             modelValue: computed(() =>
-              props.bladeContext.scope.dynamicProperties.getPropertyValue(prop, toValue(props.currentLocale))
+              props.bladeContext.scope?.dynamicProperties?.getPropertyValue(
+                prop,
+                toValue(props.currentLocale ?? "en-US")
+              )
             ),
-            optionsGetter: props.bladeContext.scope.dynamicProperties.loadDictionaries,
+            optionsGetter: props.bladeContext.scope?.dynamicProperties?.loadDictionaries as (
+              property: Record<string, any>,
+              keyword?: string | undefined,
+              locale?: string | undefined
+            ) => Promise<Record<string, any>[]>,
             "onUpdate:model-value": (args: {
               property: Record<string, any>;
               value: string | Record<string, any>[];
               dictionary?: Record<string, any>[];
               locale?: string;
             }) => {
-              props.bladeContext.scope.dynamicProperties.setPropertyValue(args);
-              setModel({ context: props.fieldContext, property: props.element.property, value: internalModel.value });
+              props.bladeContext.scope?.dynamicProperties?.setPropertyValue(args);
+              if (props.fieldContext) {
+                setModel({ context: props.fieldContext, property: props.element.property, value: internalModel.value });
+              }
             },
             required: prop.required,
             multivalue: prop.multivalue,
@@ -112,7 +122,7 @@ export default {
 
     return () => {
       return properties && properties.length && props.baseOptions.visibility
-        ? properties?.map((field) => h(field.component, unrefNested(field.props)))
+        ? properties?.map((field) => h(field.component as Component, unrefNested(field.props)))
         : null;
     };
   },

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

@@ -8,14 +8,14 @@ export default {
   name: "Fieldset",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: FieldsetSchema }) {
-    const isMobile = inject<Ref<boolean>>("isMobile");
+    const isMobile = inject("isMobile") as Ref<boolean>;
 
     const { fields: fieldsetFields } = toRefs(props);
 
     return () =>
       props.baseOptions.visibility
         ? toValue(fieldsetFields.value).map((fields, index, arr) => {
-            const divideByCols = Array.isArray(fields) && _.chunk(fields, props.element.columns || 1);
+            const divideByCols = _.chunk(fields, props.element.columns || 1) ?? [];
 
             return h(
               "div",
@@ -44,7 +44,9 @@ export default {
                             {
                               key: `col-${itemIndex}-${colIndex}-${index}`,
                               size:
-                                "aspectRatio" in props.element ? props.element.aspectRatio[itemIndex].toString() : "1",
+                                "aspectRatio" in props.element
+                                  ? props.element.aspectRatio?.[itemIndex].toString()
+                                  : "1",
                             },
                             () => {
                               if (typeof item === "object") {
@@ -72,7 +74,8 @@ export default {
                         "!tw-hidden": arr.length === 1,
                       },
                       onClick: () => {
-                        props.bladeContext.scope[props.element.remove?.method](index);
+                        if (props.element.remove?.method)
+                          props.bladeContext.scope?.[props.element.remove?.method](index);
                       },
                     })
                   : undefined,