@vc-shell/framework 1.0.153 → 1.0.155

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

@@ -11,12 +11,14 @@ import {
   IButton,
   IInputCurrency,
   IFieldset,
-  IControlBaseOptions,
   IStatusField,
   IContentField,
   IVideoField,
   IImageField,
   ITextareaField,
+  ISwitch,
+  ITable,
+  IRating,
 } from "./../types/models";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { markRaw } from "vue";
@@ -36,12 +38,11 @@ import {
   VcVideo,
   VcTextarea,
   VcMultivalue,
+  VcSwitch,
+  VcTable,
+  VcRating,
 } from "../../../../ui/components";
 
-export const ControlBase = ({ visibility = undefined }: IControlBaseOptions): IControlBaseOptions => ({
-  visibility,
-});
-
 export const ControlBaseProps = ({
   rules = undefined,
   label = undefined,
@@ -66,151 +67,168 @@ export const ControlBaseProps = ({
   ...rest,
 });
 
-export const MultivalueField = ({ props, slots, options }: IMultivalueField): IMultivalueField => ({
+export const MultivalueField = ({ props, slots }: IMultivalueField): IMultivalueField => ({
   component: markRaw(VcMultivalue),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const SelectField = ({ props, slots, options }: ISelectField): ISelectField => ({
+export const SelectField = ({ props, slots }: ISelectField): ISelectField => ({
   component: markRaw(VcSelect) as any,
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const StatusField = ({ props, slots, options }: IStatusField): IStatusField => ({
+export const StatusField = ({ props, slots }: IStatusField): IStatusField => ({
   component: markRaw(VcStatus),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const InputField = ({ props, options, slots }: IInputField): IInputField => ({
+export const InputField = ({ props, slots }: IInputField): IInputField => ({
   component: markRaw(VcInput),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const TextareaField = ({ props, options }: ITextareaField): ITextareaField => ({
+export const TextareaField = ({ props }: ITextareaField): ITextareaField => ({
   component: markRaw(VcTextarea),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const ContentField = ({ props, options }: IContentField): IContentField => ({
+export const ContentField = ({ props }: IContentField): IContentField => ({
   component: markRaw(VcField),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const ImageField = ({ props, options }: IImageField): IImageField => ({
+export const ImageField = ({ props }: IImageField): IImageField => ({
   component: markRaw(VcImage),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const VideoField = ({ props, options }: IInputField): IVideoField => ({
+export const VideoField = ({ props }: IInputField): IVideoField => ({
   component: markRaw(VcVideo),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const InputCurrency = ({ props, options }: IInputCurrency): IInputCurrency => ({
+export const InputCurrency = ({ props }: IInputCurrency): IInputCurrency => ({
   component: markRaw(VcInputCurrency),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const CardCollection = ({ props, options, slots }: ICardCollection): ICardCollection => ({
+export const CardCollection = ({ props, slots }: ICardCollection): ICardCollection => ({
   component: markRaw(VcCard),
   props: {
     ...props,
     ...ControlBaseProps(props),
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const DynamicProperties = ({ props, options }: IDynamicProperties): IDynamicProperties => ({
+export const DynamicProperties = ({ props }: IDynamicProperties): IDynamicProperties => ({
   component: markRaw(VcDynamicProperty),
   props: {
     ...props,
     ...ControlBaseProps(props),
   },
-  options: ControlBase(options),
 });
 
-export const EditorField = ({ props, options }: IEditorField): IEditorField => ({
+export const EditorField = ({ props }: IEditorField): IEditorField => ({
   component: markRaw(VcEditor),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const Gallery = ({ props, options }: IGallery): IGallery => ({
+export const Gallery = ({ props }: IGallery): IGallery => ({
   component: markRaw(VcGallery),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
 });
 
-export const Checkbox = ({ props, options, slots }: ICheckbox): ICheckbox => ({
+export const Checkbox = ({ props, slots }: ICheckbox): ICheckbox => ({
   component: markRaw(VcCheckbox),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
-export const Button = ({ props, options, slots }: IButton): IButton => ({
+export const Button = ({ props, slots }: IButton): IButton => ({
   component: markRaw(VcButton),
   props: {
     ...ControlBaseProps(props),
     ...props,
   },
-  options: ControlBase(options),
+
   slots,
 });
 
+export const Switch = ({ props }: ISwitch): ISwitch => ({
+  component: markRaw(VcSwitch),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
 export const Fieldset = ({ columns, fields, property, remove }: IFieldset): IFieldset => ({
   columns,
   fields,
   property,
   remove,
 });
+
+export const Table = ({ props, slots }: ITable): ITable => ({
+  component: markRaw(VcTable),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  slots,
+});
+
+export const Rating = ({ props }: IRating): IRating => ({
+  component: markRaw(VcRating),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});

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

@@ -19,13 +19,12 @@ export default {
             unref(props.bladeContext.scope)?.[props.element.method]();
           },
         },
-        options: props.baseOptions,
         slots: {
           default: () => props.element.content,
         },
       });
 
-      return props.baseOptions.visibility ? h(field.component as Component, field.props, field.slots) : null;
+      return h(field.component as Component, field.props, field.slots);
     };
   },
 };

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

@@ -45,15 +45,26 @@ export default {
       const field = CardCollection({
         props: {
           ...props.baseProps,
-          header: props.element.label,
+          header: props.baseProps.label,
           isCollapsable: props.element.collapsible,
           isCollapsed: restoreCollapsed(props.element.id),
           "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
         },
-        options: props.baseOptions,
 
         slots: {
-          default: () => h("div", { class: "tw-flex tw-flex-col tw-p-4 tw-gap-4" }, toValue(props.fields)),
+          default: () =>
+            h(
+              "div",
+              {
+                class: {
+                  "tw-flex": true,
+                  "tw-flex-col": true,
+                  "tw-p-4": !!props.element.removePadding === true ? false : true,
+                  "tw-gap-4": true,
+                },
+              },
+              toValue(props.fields),
+            ),
           actions: () => {
             if (props.element.action && props.fieldContext && props.currentLocale) {
               const elem = nodeBuilder({
@@ -78,9 +89,7 @@ export default {
         return localStorage?.getItem(key) === "true";
       }
 
-      return props.baseOptions.visibility && hasNoComment.value
-        ? h(field.component as Component, field.props, field.slots)
-        : null;
+      return hasNoComment.value ? h(field.component as Component, field.props, field.slots) : null;
     };
   },
 };

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

@@ -1,8 +1,10 @@
-import { ExtractPropTypes, h, Component } from "vue";
+import { ExtractPropTypes, h, Component, unref } from "vue";
 import { Checkbox } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { CheckboxSchema } from "../../types";
+import { unwrapInterpolation } from "../../helpers/unwrapInterpolation";
+import { toValue } from "@vueuse/core";
 
 export default {
   name: "Checkbox",
@@ -15,29 +17,26 @@ export default {
           trueValue: props.element.trueValue,
           falseValue: props.element.falseValue,
         },
-        options: props.baseOptions,
         slots: {
-          default: () => props.element.content,
+          default: () => unref(unwrapInterpolation(props.element.content, toValue(props.fieldContext!))),
         },
       });
 
       const render = h(field.component as Component, field.props, field.slots);
 
       if (field.props.rules) {
-        return props.baseOptions.visibility
-          ? h(
-              ValidationField,
-              {
-                props: field.props,
-                slots: field.slots,
-                index: props.elIndex,
-                rows: props.rows,
-              },
-              () => render,
-            )
-          : null;
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            slots: field.slots,
+            index: props.elIndex,
+            rows: props.rows,
+          },
+          () => render,
+        );
       } else {
-        return props.baseOptions.visibility ? render : null;
+        return render;
       }
     };
   },

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

@@ -13,13 +13,13 @@ export default {
           ...props.baseProps,
           type: props.element.variant,
           copyable: props.element.copyable || false,
+          orientation: props.element.orientation,
         },
-        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/CustomComponent.ts

@@ -0,0 +1,19 @@
+import { CustomComponentSchema } from "./../../types";
+import { ExtractPropTypes, resolveComponent, h } from "vue";
+import componentProps from "./props";
+
+export default {
+  name: "CustomComponentRenderer",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: CustomComponentSchema }) {
+    return () => {
+      const component = resolveComponent(props.element?.name);
+
+      return typeof component === "object"
+        ? h(component, {
+            context: props.bladeContext,
+          })
+        : null;
+    };
+  },
+};

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

@@ -116,13 +116,12 @@ export default {
             key: prop.multilanguage ? prop.name + "_" + prop.id + "_" + props.currentLocale : prop.name + "_" + prop.id,
             currentLanguage: props.currentLocale,
           },
-          options: props.baseOptions,
         }),
       );
     });
 
     return () => {
-      return properties && properties.length && props.baseOptions.visibility
+      return properties && properties.length
         ? properties?.map((field) => h(field.component as Component, unrefNested(field.props)))
         : null;
     };

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

@@ -14,26 +14,23 @@ export default {
           currentLanguage: props.currentLocale,
           assetsFolder: unref(props.formData).id || unref(props.formData).categoryId,
         },
-        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/Fieldset.ts

@@ -13,75 +13,69 @@ export default {
     const { fields: fieldsetFields } = toRefs(props);
 
     return () =>
-      props.baseOptions.visibility
-        ? toValue(fieldsetFields.value).map((fields, index, arr) => {
-            const divideByCols = _.chunk(fields, props.element.columns || 1) ?? [];
+      toValue(fieldsetFields.value).map((fields, index, arr) => {
+        const divideByCols = _.chunk(fields, props.element.columns || 1) ?? [];
 
-            return h(
-              "div",
-              {
-                class: "tw-flex tw-row tw-relative test ",
-                key: `fieldset-${index}`,
-              },
-              [
-                h("div", { class: "tw-flex-1 tw-gap-4 tw-flex tw-flex-col tw-min-w-0" }, [
-                  divideByCols.map((itemsArr, colIndex) => {
-                    return h(
-                      VcRow,
-                      {
-                        key: `col-${colIndex}-${index}`,
-                        class: {
-                          "tw-relative": true,
-                          "tw-gap-4": true,
-                          "!tw-flex-wrap": true,
-                          "!tw-flex !tw-flex-row": !!props.element.aspectRatio,
+        return h(
+          "div",
+          {
+            class: "tw-flex tw-row tw-relative",
+            key: `fieldset-${index}`,
+          },
+          [
+            h("div", { class: "tw-flex-1 tw-gap-4 tw-flex tw-flex-col tw-min-w-0" }, [
+              divideByCols.map((itemsArr, colIndex) => {
+                return h(
+                  VcRow,
+                  {
+                    key: `col-${colIndex}-${index}`,
+                    class: {
+                      "tw-relative": true,
+                      "tw-gap-4": true,
+                      "!tw-flex-wrap": true,
+                      "!tw-flex !tw-flex-row": !!props.element.aspectRatio,
+                    },
+                  },
+                  () => [
+                    ...itemsArr.map((item, itemIndex) => {
+                      return h(
+                        VcCol,
+                        {
+                          key: `col-${itemIndex}-${colIndex}-${index}`,
+                          size: "aspectRatio" in props.element ? props.element.aspectRatio?.[itemIndex] : 1,
                         },
-                      },
-                      () => [
-                        ...itemsArr.map((item, itemIndex) => {
-                          return h(
-                            VcCol,
-                            {
-                              key: `col-${itemIndex}-${colIndex}-${index}`,
-                              size:
-                                "aspectRatio" in props.element
-                                  ? props.element.aspectRatio?.[itemIndex].toString()
-                                  : "1",
-                            },
-                            () => {
-                              if (typeof item === "object") {
-                                return h(item, {
-                                  elIndex: index,
-                                  rows: arr.length,
-                                  key: `item-${itemIndex}-${colIndex}-${index}`,
-                                });
-                              }
-                            },
-                          );
-                        }),
-                      ],
-                    );
-                  }),
-                ]),
-                props.element.remove
-                  ? h(VcButton, {
-                      iconSize: "m",
-                      icon: "fas fa-times-circle",
-                      text: true,
-                      class: {
-                        "tw-m-2": !isMobile.value,
-                        "tw-absolute tw-top-0 tw-right-0": isMobile.value,
-                        "!tw-hidden": arr.length === 1,
-                      },
-                      onClick: () => {
-                        if (props.element.remove?.method)
-                          props.bladeContext.scope?.[props.element.remove?.method](index);
-                      },
-                    })
-                  : undefined,
-              ],
-            );
-          })
-        : null;
+                        () => {
+                          if (typeof item === "object") {
+                            return h(item, {
+                              elIndex: index,
+                              rows: arr.length,
+                              key: `item-${itemIndex}-${colIndex}-${index}`,
+                            });
+                          }
+                        },
+                      );
+                    }),
+                  ],
+                );
+              }),
+            ]),
+            props.element.remove
+              ? h(VcButton, {
+                  iconSize: "m",
+                  icon: "fas fa-times-circle",
+                  text: true,
+                  class: {
+                    "tw-m-2": !isMobile.value,
+                    "tw-absolute tw-top-0 tw-right-0": isMobile.value,
+                    "!tw-hidden": arr.length === 1,
+                  },
+                  onClick: () => {
+                    if (props.element.remove?.method) props.bladeContext.scope?.[props.element.remove?.method](index);
+                  },
+                })
+              : undefined,
+          ],
+        );
+      });
   },
 };

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

@@ -132,10 +132,9 @@ export default {
           onSort: editImages,
           hideAfterUpload: props.element.hideAfterUpload,
         },
-        options: props.baseOptions,
       });
 
-      return props.baseOptions.visibility ? h(field.component as Component, unrefNested(field.props)) : null;
+      return h(field.component as Component, unrefNested(field.props));
     };
   },
 };

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

@@ -19,12 +19,11 @@ export default {
           size: props.element.size,
           background: props.element.background,
         },
-        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/InputCurrency.ts

@@ -29,25 +29,22 @@ export default {
           },
           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;
       }
     };
   },