@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,46 +0,0 @@
-import { h, ExtractPropTypes, Component } from "vue";
-import { EditorField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import ValidationField from "@shared/modules/dynamic/components/fields/ValidationField";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { EditorSchema } from "@shared/modules/dynamic";
-
-export default {
-  name: "EditorField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: EditorSchema }) {
-    return () => {
-      const field = EditorField({
-        props: Object.assign(
-          {},
-          {
-            currentLanguage: props.currentLocale,
-            assetsFolder: props.element.assetsFolder,
-            maxlength: props.element.maxlength,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      const render = h(field.component as Component, field.props);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            index: props.elIndex,
-            rows: props.rows,
-            key: `${String(field.props.key)}_validation`,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,66 +0,0 @@
-import { h, toRefs, ExtractPropTypes, toValue } from "vue";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import * as _ from "lodash-es";
-import { VcCol } from "@ui/components/atoms/vc-col";
-import { VcRow } from "@ui/components/atoms/vc-row";
-import { FieldsetSchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "Fieldset",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: FieldsetSchema }) {
-    const { fields: fieldsetFields } = toRefs(props);
-
-    return () =>
-      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 ${unrefNested(props.baseProps).classNames ?? ""}`,
-            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,
-                        },
-                        () => {
-                          if (typeof item === "object") {
-                            return h(item, {
-                              elIndex: index,
-                              rows: arr.length,
-                              key: `item-${itemIndex}-${colIndex}-${index}`,
-                            });
-                          }
-                        },
-                      );
-                    }),
-                  ],
-                );
-              }),
-            ]),
-          ],
-        );
-      });
-  },
-};

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

@@ -1,162 +0,0 @@
-import { Component, ExtractPropTypes, computed, h, markRaw, ref, toRefs, toValue, unref, watch } from "vue";
-import { Gallery } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import type { ICommonAsset } from "@core/types";
-import { useBladeNavigation } from "@shared/components/blade-navigation/composables";
-import { usePopup } from "@shared/components/popup-handler/composables/usePopup";
-import { useI18n } from "vue-i18n";
-import { default as AssetsDetails } from "@shared/modules/assets/components/assets-details/assets-details.vue";
-import * as _ from "lodash-es";
-import { GallerySchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { setModel } from "@shared/modules/dynamic/helpers/setters";
-import { safeIn } from "@shared/modules/dynamic/helpers/safeIn";
-
-export default {
-  name: "GalleryField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: GallerySchema }) {
-    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,
-          null,
-          2,
-        )}`,
-      );
-    }
-
-    const { showConfirmation } = usePopup();
-    const { t } = useI18n({ useScope: "global" });
-    const { openBlade } = useBladeNavigation();
-
-    const imagesHandler = 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: imagesHandler.loading ?? false,
-        async edit(image: ICommonAsset) {
-          if (!imagesHandler.edit?.value) throw new Error("Edit handler is not provided");
-          const edited = await imagesHandler.edit?.value?.([image]);
-
-          await editImages(edited);
-        },
-        async upload(files: FileList | null, lastSortOrder?: number) {
-          if (!imagesHandler.upload?.value) throw new Error("Upload handler is not provided");
-          if (files) {
-            const uploaded = await imagesHandler.upload?.value?.(files, lastSortOrder);
-
-            let addToExisting: ICommonAsset[];
-            if (Array.isArray(uploaded) && Array.isArray(internalModel.value[props.element.property])) {
-              addToExisting = internalModel.value[props.element.property].concat(uploaded);
-            } else {
-              addToExisting = uploaded;
-            }
-            files = null;
-
-            await editImages(addToExisting);
-          }
-        },
-        async remove(image: ICommonAsset) {
-          if (!imagesHandler.remove?.value) throw new Error("Remove handler is not provided");
-          if (
-            imagesHandler.noRemoveConfirmation ||
-            (await showConfirmation(
-              computed(() =>
-                t(
-                  `${props.bladeContext?.settings?.localizationPrefix
-                    .trim()
-                    .toUpperCase()}.PAGES.ALERTS.IMAGE_DELETE_CONFIRMATION`,
-                ),
-              ),
-            ))
-          ) {
-            const edited = await imagesHandler.remove?.value?.([image]);
-            await editImages(edited);
-          }
-        },
-      };
-
-      function onGalleryItemEdit(item: ICommonAsset) {
-        openBlade({
-          blade: markRaw(AssetsDetails),
-          options: {
-            asset: item,
-            assetEditHandler: imageHandlers.edit,
-            assetRemoveHandler: imageHandlers.remove,
-          },
-        });
-      }
-
-      async function editImages(args: ICommonAsset[]) {
-        if (props.fieldContext) {
-          internalModel.value[props.element.property] = args;
-          setModel({
-            property: props.element.property,
-            value: args,
-            context: props.fieldContext,
-            scope: props.bladeContext.scope,
-          });
-
-          if (props.bladeContext.validationState) {
-            await props.bladeContext.validationState.setFieldValue(props.element.id, args);
-          }
-        }
-      }
-
-      const field = Gallery({
-        props: Object.assign(
-          {},
-          {
-            customText: {
-              dragHere:
-                typeof props.element.customText?.dragHere !== "undefined"
-                  ? unref(computed(() => t(props.element.customText!.dragHere!)))
-                  : undefined,
-              browse:
-                typeof props.element.customText?.browse !== "undefined"
-                  ? unref(computed(() => t(props.element.customText!.browse!)))
-                  : undefined,
-            },
-            uploadIcon: props.element.uploadIcon,
-            loading: imageHandlers.loading,
-            images: toValue(props.baseProps.modelValue),
-            multiple: props.element.multiple,
-            variant: props.element.variant,
-            itemActions: props.element.actions,
-            onUpload: imageHandlers.upload,
-            onRemove: imageHandlers.remove,
-            onEdit: onGalleryItemEdit,
-            onSort: editImages,
-            hideAfterUpload: props.element.hideAfterUpload,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      return h(field.component as Component, Object.assign(unrefNested(field.props), { class: "tw-flex-auto" }));
-    };
-  },
-};

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

@@ -1,35 +0,0 @@
-import { ExtractPropTypes, h, Component, toValue } from "vue";
-import { ImageField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { ImageSchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "ImageField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: ImageSchema }) {
-    return () => {
-      const field = ImageField({
-        props: Object.assign(
-          {},
-          {
-            src: toValue(props.baseProps.modelValue),
-            aspect: props.element.aspect,
-            rounded: props.element.rounded,
-            bordered: props.element.bordered,
-            size: props.element.size,
-            background: props.element.background,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      const render = h(field.component as Component, field.props);
-
-      return render;
-    };
-  },
-};

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

@@ -1,79 +0,0 @@
-import { Component, ExtractPropTypes, h, unref } from "vue";
-import { InputCurrency } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import ValidationField from "@shared/modules/dynamic/components/fields/ValidationField";
-import { getModel } from "@shared/modules/dynamic/helpers/getters";
-import { setModel } from "@shared/modules/dynamic/helpers/setters";
-import { InputCurrencySchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { toValue } from "@vueuse/core";
-import { safeIn } from "@shared/modules/dynamic/helpers/safeIn";
-
-export default {
-  name: "InputCurrency",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputCurrencySchema }) {
-    return () => {
-      const options =
-        (safeIn("options", props.element) &&
-          props.element.options &&
-          (toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
-            toValue(unref(props.bladeContext.scope)?.[props.element.options]))) ??
-        undefined;
-
-      const contextProperty =
-        safeIn("optionProperty", props.element) &&
-        props.element.optionProperty &&
-        getModel(props.element.optionProperty, props.fieldContext ?? {});
-
-      const scopedProperty =
-        safeIn("optionProperty", props.element) &&
-        props.element.optionProperty &&
-        props.bladeContext.scope &&
-        getModel(props.element.optionProperty, props.bladeContext.scope);
-
-      const field = InputCurrency({
-        props: Object.assign(
-          {},
-          {
-            precision: props.element.precision,
-            option: toValue(scopedProperty ?? contextProperty),
-            currencyDisplay: props.element.currencyDisplay,
-            optionLabel: props.element.optionLabel,
-            optionValue: props.element.optionValue,
-            options,
-            "onUpdate:option": (e: string | number | Record<string, unknown>) => {
-              setModel({
-                value: e,
-                property: props.element.optionProperty,
-                context: props.fieldContext ?? {},
-                scope: props.bladeContext.scope,
-              });
-            },
-            clearable: props.element.clearable || false,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-      const render = h(field.component as Component, field.props);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            index: props.elIndex,
-            rows: props.rows,
-            key: `${String(field.props.key)}_validation`,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,81 +0,0 @@
-import { ExtractPropTypes, h, VNode, Component, toValue } from "vue";
-import { InputField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import ValidationField from "@shared/modules/dynamic/components/fields/ValidationField";
-import { InputSchema, ControlSchema } from "@shared/modules/dynamic/types";
-import { nodeBuilder } from "@shared/modules/dynamic/helpers/nodeBuilder";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { methodHandler } from "@shared/modules/dynamic/helpers/methodHandler";
-
-const slotsMap = {
-  append: "append",
-  prepend: "prepend",
-  appendInner: "append-inner",
-  prependInner: "prepend-inner",
-};
-
-export default {
-  name: "InputField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
-    return () => {
-      const field = InputField({
-        props: Object.assign(
-          {},
-          {
-            type: props.element.variant,
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            maxlength: props.element.maxlength,
-            datePickerOptions: props.element.datePickerOptions,
-            loading: props.element.loading?.method
-              ? methodHandler(
-                  toValue(props.bladeContext?.scope)?.[props.element.loading?.method],
-                  props.fieldContext,
-                  props.element,
-                )
-              : false,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        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 keyof InputSchema] as ControlSchema,
-                  parentId: `${(props.element[key as keyof InputSchema] as ControlSchema).id}`,
-                  internalContext: props.fieldContext ?? {},
-                  bladeContext: props.bladeContext,
-                  currentLocale: props.currentLocale ?? "en-US",
-                  formData: props.formData,
-                });
-            }
-            return acc;
-          },
-          {} as Record<keyof InputSchema, () => VNode | false>,
-        ),
-      });
-
-      const render = h(field.component as Component, field.props, field.slots);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            index: props.elIndex,
-            rows: props.rows,
-            key: `${String(field.props.key)}_validation`,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,68 +0,0 @@
-import { ComponentSlots } from "@shared/utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
-import { MultivalueField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import ValidationField from "@shared/modules/dynamic/components/fields/ValidationField";
-import { MultivalueSchema } from "@shared/modules/dynamic/types";
-import { VcMultivalue } from "@ui/components/molecules/vc-multivalue";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
-  Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
-
-export default {
-  name: "MultivalueField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
-    return () => {
-      const field = MultivalueField({
-        props: Object.assign(
-          {},
-          {
-            multivalue: props.element.multivalue,
-            type: props.element.variant,
-            optionValue: props.element.optionValue,
-            optionLabel: props.element.optionLabel,
-            options: props.element.options ? props.bladeContext.scope?.[props.element.options] : undefined,
-            currentLanguage: props.currentLocale,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-
-        slots:
-          props.element.customTemplate &&
-          ["option", "selected-item"].reduce(
-            (obj, slot) => {
-              obj[slot] = (scope: TScope) =>
-                h(resolveComponent(props.element.customTemplate?.component as string), {
-                  context: scope,
-                  slotName: slot,
-                });
-              return obj;
-            },
-            {} as Record<string, (scope: TScope) => VNode>,
-          ),
-      });
-
-      const render = h(field.component as unknown as Component, field.props, field.slots);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            index: props.elIndex,
-            rows: props.rows,
-            key: `${String(field.props.key)}_validation`,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,83 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ExtractPropTypes, h, toValue, unref } from "vue";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import ValidationField from "@shared/modules/dynamic/components/fields/ValidationField";
-import { RadioButton } from "@shared/modules/dynamic/components/factories";
-import { RadioButtonSchema } from "@shared/modules/dynamic/types";
-import { getModel } from "@shared/modules/dynamic/helpers/getters";
-import * as _ from "lodash-es";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-
-export default {
-  name: "RadioButtonGroup",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: RadioButtonSchema }) {
-    return () => {
-      const label = unrefNested(props.baseProps).label;
-      const options: any[] =
-        toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
-        toValue(unref(props.bladeContext.scope)?.[props.element.options]);
-
-      const fields = options.map((opt) =>
-        RadioButton({
-          props: Object.assign(
-            {},
-            {
-              value: props.element.optionValue ? toValue(getModel(props.element.optionValue, opt ?? {})) : opt,
-              binary: props.element.binary,
-              label: props.element.optionLabel ? toValue(getModel(props.element.optionLabel, opt ?? {})) : opt,
-            },
-            _.omit(unrefNested(props.baseProps), "label"),
-            {
-              class: unrefNested(props.baseProps).classNames ?? "",
-            },
-          ),
-        }),
-      );
-
-      const render = [
-        label
-          ? h(
-              VcLabel,
-              { required: props.element.rules?.required },
-              {
-                default: () => label,
-                tooltip: unrefNested(props.baseProps).tooltip ? () => unrefNested(props.baseProps).tooltip : undefined,
-              },
-            )
-          : undefined,
-        fields.map((field) => h(field.component as Component, field.props)),
-        h({
-          props: ["error", "errorMessage"],
-          components: { VcHint },
-          template: `
-            <VcHint v-if="error" class="vc-textarea__error">
-              {{ errorMessage }}
-            </VcHint>
-            `,
-        }),
-      ];
-
-      if (props.element.rules) {
-        return h(
-          ValidationField,
-          {
-            props: {
-              rules: props.element.rules,
-              modelValue: unrefNested(props.baseProps).modelValue,
-              label: unrefNested(props.baseProps).label,
-              name: unrefNested(props.baseProps).name,
-            },
-            index: props.elIndex,
-            rows: props.rows,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,28 +0,0 @@
-import { Component, ExtractPropTypes, h } from "vue";
-import { Rating } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { RatingSchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "RatingEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: RatingSchema }) {
-    return () => {
-      const field = Rating({
-        props: Object.assign(
-          {},
-          {
-            variant: props.element.type,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      return h(field.component as Component, field.props);
-    };
-  },
-};