@vc-shell/framework 1.0.110 → 1.0.112

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

@@ -0,0 +1,44 @@
+import { ExtractPropTypes, h } from "vue";
+import { Checkbox } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { CheckboxSchema } from "../../types";
+
+export default {
+  name: "Checkbox",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: CheckboxSchema }) {
+    return () => {
+      const field = Checkbox({
+        props: {
+          ...props.baseProps,
+          trueValue: props.element.trueValue,
+          falseValue: props.element.falseValue,
+        },
+        options: props.baseOptions,
+        slots: {
+          default: () => props.element.content,
+        },
+      });
+
+      const render = h(field.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;
+      } else {
+        return props.baseOptions.visibility ? render : null;
+      }
+    };
+  },
+};

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

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ExtractPropTypes, computed, h, inject, ref, toRefs, toValue, unref, watch, Comment } from "vue";
+import { DynamicProperties } from "../factories";
+import componentProps from "./props";
+import { unrefNested } from "../../helpers/unrefNested";
+import { reactify, reactiveComputed } from "@vueuse/core";
+import * as _ from "lodash-es";
+import { DynamicPropertiesSchema } from "../../types";
+import { setModel } from "../../helpers/setters";
+
+export default {
+  name: "DynamicProperty",
+  props: componentProps,
+  emits: ["setModelData"],
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: DynamicPropertiesSchema }) {
+    if (!props.bladeContext.scope.dynamicProperties) {
+      throw new Error(
+        `There is no DynamicProperties config provided in blade scope: ${JSON.stringify(
+          props.bladeContext.scope,
+          null,
+          2
+        )}`
+      );
+    }
+
+    const internalModel = ref();
+
+    watch(
+      () => props.baseProps?.modelValue,
+      (newVal) => {
+        if (!_.isEqual(newVal, internalModel.value)) {
+          internalModel.value = _.cloneDeep(newVal);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    const filteredProps = reactify((prop: any, { include, exclude }) => {
+      if (prop) {
+        return prop.filter((x) => {
+          if (include) return include?.includes(x.type);
+          if (exclude) return !exclude?.includes(x.type);
+          else return true;
+        });
+      }
+      return null;
+    });
+
+    const dynamicProps = filteredProps(internalModel, {
+      include: props.element?.include,
+      exclude: props.element?.exclude,
+    });
+
+    const properties = reactiveComputed(() => {
+      return (dynamicProps.value || [])?.map((prop) =>
+        DynamicProperties({
+          props: {
+            disabled: "disabled" in props.bladeContext.scope && props.bladeContext.scope.disabled,
+            property: prop,
+            modelValue: computed(() =>
+              props.bladeContext.scope.dynamicProperties.getPropertyValue(prop, toValue(props.currentLocale))
+            ),
+            optionsGetter: props.bladeContext.scope.dynamicProperties.loadDictionaries,
+            "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 });
+            },
+            required: prop.required,
+            multivalue: prop.multivalue,
+            multilanguage: prop.multilanguage,
+            valueType: prop.valueType,
+            dictionary: prop.dictionary,
+            name: prop.name,
+            rules: {
+              min: prop.validationRule?.charCountMin,
+              max: prop.validationRule?.charCountMax,
+              regex: prop.validationRule?.regExp,
+            },
+            displayNames: prop.displayNames,
+            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
+        ? properties?.map((field) => h(field.component, unrefNested(field.props)))
+        : null;
+    };
+  },
+};

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

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, ExtractPropTypes } from "vue";
+import { EditorField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { unrefNested } from "../../helpers/unrefNested";
+import { getModel } from "../../helpers/getters";
+
+export default {
+  name: "EditorField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps>) {
+    return () => {
+      const field = EditorField({
+        props: {
+          ...props.baseProps,
+          currentLanguage: props.currentLocale,
+          assetsFolder: props.formData.id || props.formData.categoryId,
+        },
+        options: props.baseOptions,
+      });
+
+      const render = h(field.component as any, 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/Fieldset.ts

@@ -0,0 +1,77 @@
+import { Ref, h, inject, nextTick, toRefs, ExtractPropTypes } from "vue";
+import componentProps from "./props";
+import * as _ from "lodash-es";
+import { VcButton, VcCol, VcRow } from "../../../../../ui/components";
+import { FieldsetSchema } from "../../types";
+
+export default {
+  name: "Fieldset",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: FieldsetSchema }) {
+    const isMobile = inject<Ref<boolean>>("isMobile");
+
+    const { fields: fieldsetFields } = toRefs(props);
+
+    return () =>
+      props.baseOptions.visibility
+        ? fieldsetFields.value.map((fields, index, arr) => {
+            const divideByCols = Array.isArray(fields) && _.chunk(fields, props.element.columns || 1);
+
+            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" }, [
+                  divideByCols.map((itemsArr, colIndex) => {
+                    return h(
+                      VcRow,
+                      {
+                        key: `col-${colIndex}-${index}`,
+                        class: "tw-relative tw-gap-4",
+                      },
+                      () => [
+                        ...itemsArr.map((item, itemIndex) => {
+                          return h(
+                            VcCol,
+                            {
+                              key: `col-${itemIndex}-${colIndex}-${index}`,
+                            },
+                            () => {
+                              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: () => {
+                        props.bladeContext.scope[props.element.remove?.method](index);
+                      },
+                    })
+                  : undefined,
+              ]
+            );
+          })
+        : null;
+  },
+};

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

@@ -0,0 +1,121 @@
+import { ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, 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 * as _ from "lodash-es";
+import { GallerySchema } from "../../types";
+import { unrefNested } from "./../../helpers/unrefNested";
+import { setModel } from "../../helpers/setters";
+
+export default {
+  name: "GalleryField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: GallerySchema }, ctx) {
+    if (!_.has(props.bladeContext.scope, "assetsHandler.images")) {
+      throw new Error(
+        `There is no assetsHandler.images config provided in blade scope: ${JSON.stringify(
+          props.bladeContext.scope,
+          null,
+          2
+        )}`
+      );
+    }
+
+    const { showConfirmation } = usePopup();
+    const { t } = useI18n({ useScope: "global" });
+    const { openBlade } = useBladeNavigation();
+
+    const { edit, remove, upload, loading } = toRefs(props.bladeContext.scope.assetsHandler.images);
+    const internalModel = ref();
+
+    watch(
+      () => props.fieldContext,
+      (newVal) => {
+        if (!_.isEqual(internalModel.value, newVal)) {
+          internalModel.value = _.cloneDeep(newVal);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    return () => {
+      const imageHandlers = {
+        loading,
+        async edit(image: IImage) {
+          internalModel.value[props.element.property] = await edit.value(props.formData[props.element.property], image);
+          await editImages(internalModel.value[props.element.property]);
+        },
+        async upload(files: FileList) {
+          internalModel.value[props.element.property] = await upload.value(
+            files,
+            props.formData[props.element.property],
+            props.formData.id || props.formData.categoryId,
+            props.element.uploadFolder
+          );
+
+          files = null;
+
+          await editImages(internalModel.value[props.element.property]);
+
+          return internalModel.value[props.element.property];
+        },
+        async remove(image: IImage) {
+          if (
+            await showConfirmation(
+              computed(() =>
+                t(
+                  `${props.bladeContext.settings.localizationPrefix
+                    .trim()
+                    .toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE_CONFIRMATION`
+                )
+              )
+            )
+          ) {
+            internalModel.value[props.element.property] = await remove.value(
+              props.formData[props.element.property],
+              image
+            );
+            await editImages(internalModel.value[props.element.property]);
+          }
+          return internalModel.value[props.element.property];
+        },
+      };
+
+      function onGalleryItemEdit(item: IImage) {
+        openBlade({
+          blade: markRaw(AssetsDetails),
+          options: {
+            asset: item,
+            assetEditHandler: imageHandlers.edit,
+            assetRemoveHandler: imageHandlers.remove,
+          },
+        });
+      }
+
+      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();
+      }
+
+      const field = Gallery({
+        props: {
+          ...props.baseProps,
+          loading: imageHandlers.loading,
+          images: props.baseProps.modelValue,
+          multiple: true,
+          onUpload: imageHandlers.upload,
+          onRemove: imageHandlers.remove,
+          onEdit: onGalleryItemEdit,
+          onSort: editImages,
+        },
+        options: props.baseOptions,
+      });
+
+      return props.baseOptions.visibility ? h(field.component, unrefNested(field.props)) : null;
+    };
+  },
+};

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

@@ -0,0 +1,49 @@
+import { Component, ExtractPropTypes, h, unref } from "vue";
+import { InputCurrency } from "../factories";
+import componentProps from "./props";
+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",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputCurrencySchema }) {
+    return () => {
+      const field = InputCurrency({
+        props: {
+          ...props.baseProps,
+          option: getModel(props.element.optionProperty, props.fieldContext).value,
+          optionLabel: props.element.optionLabel,
+          optionValue: props.element.optionValue,
+          options: unref(props.bladeContext.scope)["currencies"],
+          "onUpdate:option": (e: string | number | Record<string, unknown>) => {
+            setModel({ value: e, property: props.element.optionProperty, context: props.fieldContext });
+          },
+          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/InputField.ts

@@ -0,0 +1,42 @@
+import { ExtractPropTypes, h } from "vue";
+import { InputField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { InputSchema } from "../../types";
+
+export default {
+  name: "InputField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
+    return () => {
+      const field = InputField({
+        props: {
+          ...props.baseProps,
+          type: props.element.variant,
+          currentLanguage: props.currentLocale,
+          clearable: props.element.clearable || false,
+        },
+        options: props.baseOptions,
+      });
+
+      const render = h(field.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/SelectField.ts

@@ -0,0 +1,54 @@
+import { h, resolveComponent, ExtractPropTypes, Component } from "vue";
+import { SelectField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { SelectSchema } from "../../types";
+
+export default {
+  name: "SelectField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
+    return () => {
+      const field = SelectField({
+        props: {
+          ...props.baseProps,
+          optionValue: props.element.optionValue,
+          optionLabel: props.element.optionLabel,
+          emitValue: props.element.emitValue,
+          options: props.bladeContext.scope[props.element.optionsMethod],
+          currentLanguage: props.currentLocale,
+          clearable: props.element.clearable || false,
+          searchable: props.element.searchable || false,
+        },
+        options: props.baseOptions,
+
+        slots:
+          props.element.customTemplate &&
+          ["selected-item", "option"].reduce((obj, slot) => {
+            obj[slot] = (scope) =>
+              h(resolveComponent(props.element.customTemplate.component), { context: scope, slotName: slot });
+            return obj;
+          }, {}),
+      });
+
+      const render = h(field.component as unknown as Component, field.props, field.slots);
+
+      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/StatusField.ts

@@ -0,0 +1,55 @@
+import { ExtractPropTypes, computed, h, unref } from "vue";
+import componentProps from "./props";
+import { StatusSchema } from "../../types";
+import { StatusField } from "../factories";
+import { VcIcon } from "../../../../../ui/components";
+
+export default {
+  name: "StatusField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: StatusSchema }) {
+    return () => {
+      const slotContent = computed(() => {
+        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];
+          if (method === "function") {
+            return method();
+          } else {
+            return method;
+          }
+        }
+
+        return null;
+      });
+
+      const field = StatusField({
+        props: {
+          ...props.baseProps,
+          variant: props.element.variant,
+          outline: props.element.outline,
+          extend: props.element.extend,
+        },
+        options: props.baseOptions,
+        slots: {
+          default: () => {
+            return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
+              h(VcIcon, {
+                icon: props.element.icon,
+                size: props.element.iconSize,
+                variant: props.element.iconVariant,
+                class: "tw-mr-3",
+              }),
+              h("div", [h("div", { class: "tw-font-bold" }, props.element.title), h("div", slotContent.value)]),
+            ]);
+          },
+        },
+      });
+
+      return props.baseOptions.visibility
+        ? h(field.component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots)
+        : null;
+    };
+  },
+};

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

@@ -0,0 +1,53 @@
+import { computed, h, unref, useSlots, defineComponent } from "vue";
+import { unrefNested } from "../../helpers/unrefNested";
+import { Field } from "vee-validate";
+import { reactify } from "@vueuse/core";
+
+const validationFieldProps = {
+  props: Object,
+  index: Number,
+  rows: Number,
+};
+
+export default defineComponent({
+  name: "ValidationField",
+  props: validationFieldProps,
+  setup(props) {
+    const slots = useSlots();
+    const fieldKey = computed(() =>
+      unref(props.props).multilanguage
+        ? `${String(props.props.key)}_${unref(props.props.currentLanguage)}`
+        : String(props.props.key)
+    );
+
+    const fieldNameLang = reactify((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,
+          key: fieldKey.value,
+          name: fieldNameLang(
+            props.rows > 1 && props.index >= 0 ? props.props?.name + "_" + props.index : props.props?.name
+          ).value,
+        },
+        {
+          default: ({ errorMessage, errors }) => {
+            return slots.default().map((slot) =>
+              h(slot, {
+                ...props.props,
+                error: !!errors.length,
+                errorMessage,
+                key: fieldKey.value + "_control",
+              })
+            );
+          },
+        }
+      );
+  },
+});