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

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

@@ -1,242 +0,0 @@
-import {
-  IMultivalueField,
-  IControlBaseProps,
-  ISelectField,
-  IInputField,
-  ICardCollection,
-  IEditorField,
-  IGallery,
-  IDynamicProperties,
-  ICheckbox,
-  IButton,
-  IInputCurrency,
-  IFieldset,
-  IStatusField,
-  IContentField,
-  IVideoField,
-  IImageField,
-  ITextareaField,
-  ISwitch,
-  ITable,
-  IRating,
-  IRadioButton,
-} from "@shared/modules/dynamic/types/models";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { markRaw } from "vue";
-import { VcButton } from "@ui/components/atoms/vc-button";
-import { VcCard } from "@ui/components/atoms/vc-card";
-import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
-import { VcDynamicProperty } from "@ui/components/organisms/vc-dynamic-property";
-import { VcEditor } from "@ui/components/molecules/vc-editor";
-import { VcField } from "@ui/components/molecules/vc-field";
-import { VcGallery } from "@ui/components/organisms/vc-gallery";
-import { VcImage } from "@ui/components/atoms/vc-image";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { VcInputCurrency } from "@ui/components/molecules/vc-input-currency";
-import { VcSelect } from "@ui/components/molecules/vc-select";
-import { VcStatus } from "@ui/components/atoms/vc-status";
-import { VcVideo } from "@ui/components/atoms/vc-video";
-import { VcTextarea } from "@ui/components/molecules/vc-textarea";
-import { VcMultivalue } from "@ui/components/molecules/vc-multivalue";
-import { VcSwitch } from "@ui/components/molecules/vc-switch";
-import { VcTable } from "@ui/components/organisms/vc-table";
-import { VcRating } from "@ui/components/molecules/vc-rating";
-import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
-
-export const ControlBaseProps = ({
-  rules = undefined,
-  label = undefined,
-  placeholder = undefined,
-  disabled = false,
-  required = false,
-  name = undefined,
-  tooltip = undefined,
-  key = undefined,
-  classNames = undefined,
-  ...rest
-}: IControlBaseProps): IControlBaseProps => ({
-  key,
-  rules,
-  label,
-  placeholder,
-  disabled,
-  required,
-  name,
-  tooltip,
-  classNames,
-  ...rest,
-});
-
-export const MultivalueField = ({ props, slots }: IMultivalueField): IMultivalueField => ({
-  component: markRaw(VcMultivalue),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const SelectField = ({ props, slots }: ISelectField): ISelectField => ({
-  component: markRaw(VcSelect) as any,
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const StatusField = ({ props, slots }: IStatusField): IStatusField => ({
-  component: markRaw(VcStatus),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const InputField = ({ props, slots }: IInputField): IInputField => ({
-  component: markRaw(VcInput),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const TextareaField = ({ props }: ITextareaField): ITextareaField => ({
-  component: markRaw(VcTextarea),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const ContentField = ({ props }: IContentField): IContentField => ({
-  component: markRaw(VcField),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const ImageField = ({ props }: IImageField): IImageField => ({
-  component: markRaw(VcImage),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const VideoField = ({ props }: IInputField): IVideoField => ({
-  component: markRaw(VcVideo),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const InputCurrency = ({ props }: IInputCurrency): IInputCurrency => ({
-  component: markRaw(VcInputCurrency),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const CardCollection = ({ props, slots }: ICardCollection): ICardCollection => ({
-  component: markRaw(VcCard),
-  props: {
-    ...props,
-    ...ControlBaseProps(props),
-  },
-
-  slots,
-});
-
-export const DynamicProperties = ({ props }: IDynamicProperties): IDynamicProperties => ({
-  component: markRaw(VcDynamicProperty),
-  props: {
-    ...props,
-    ...ControlBaseProps(props),
-  },
-});
-
-export const EditorField = ({ props }: IEditorField): IEditorField => ({
-  component: markRaw(VcEditor),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Gallery = ({ props }: IGallery): IGallery => ({
-  component: markRaw(VcGallery),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Checkbox = ({ props, slots }: ICheckbox): ICheckbox => ({
-  component: markRaw(VcCheckbox),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const RadioButton = ({ props }: IRadioButton): IRadioButton => ({
-  component: markRaw(VcRadioButton),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Button = ({ props, slots }: IButton): IButton => ({
-  component: markRaw(VcButton),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  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

@@ -1,44 +0,0 @@
-import { Component, ExtractPropTypes, computed, h, mergeProps, unref } from "vue";
-import { Button } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { ButtonSchema } from "@shared/modules/dynamic/types";
-import { useI18n } from "vue-i18n";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "ButtonEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: ButtonSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-    return () => {
-      const field = Button({
-        props: Object.assign(
-          {},
-          {
-            small: props.element.small,
-            icon: props.element?.icon,
-            iconSize: props.element?.iconSize,
-            text: props.element?.text,
-            variant: props.element?.variant,
-            raised: props.element?.raised,
-            outline: props.element?.outline,
-            onClick: () => {
-              unref(props.bladeContext.scope)?.[props.element.method]();
-            },
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        slots: props.element.content
-          ? {
-              default: () => unref(computed(() => (props.element.content && t(props.element.content)) ?? undefined)),
-            }
-          : undefined,
-      });
-
-      return h(field.component as Component, mergeProps(field.props, { class: "tw-self-start" }), field.slots);
-    };
-  },
-};

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

@@ -1,119 +0,0 @@
-import {
-  ExtractPropTypes,
-  h,
-  toValue,
-  VNodeChild,
-  VNodeNormalizedChildren,
-  Component,
-  ref,
-  onMounted,
-  onUpdated,
-} from "vue";
-import { CardCollection } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { CardSchema } from "@shared/modules/dynamic/types";
-import { nodeBuilder } from "@shared/modules/dynamic/helpers/nodeBuilder";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "CardEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: CardSchema }) {
-    const hasNoComment = ref(true);
-
-    onMounted(() => {
-      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
-    });
-
-    onUpdated(() => {
-      hasNoComment.value = hasNoCommentNodes(toValue(props.fields));
-    });
-
-    const hasNoCommentNodes = (components: (VNodeChild | VNodeNormalizedChildren)[]): boolean => {
-      const vnodeIterable = Array.isArray(components) ? components : [components];
-      const commentCounter = ref(0);
-
-      for (const component of vnodeIterable) {
-        if (Array.isArray(component) && component.length > 0) {
-          if (!hasNoCommentNodes(component)) {
-            commentCounter.value++;
-            break;
-          }
-        } else if (component && typeof component === "object" && !Array.isArray(component)) {
-          if (Array.isArray(component.children) && component.children.length > 0) {
-            // Recursive check for nested components
-            if (!hasNoCommentNodes(component.children)) {
-              commentCounter.value++;
-              break;
-            }
-          }
-
-          if (component.el && (component.el as HTMLElement).nodeType === Node.COMMENT_NODE) {
-            commentCounter.value++;
-            break;
-          }
-        }
-      }
-
-      return commentCounter.value !== vnodeIterable.length;
-    };
-
-    return () => {
-      const field = CardCollection({
-        props: Object.assign(
-          {},
-          {
-            variant: props.element.variant,
-            header: toValue(props.baseProps.label),
-            isCollapsable: props.element.collapsible,
-            isCollapsed: restoreCollapsed(props.element.id) || props.element.collapsed,
-            "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-
-        slots: {
-          default: () =>
-            h(
-              "div",
-              {
-                class: {
-                  "tw-flex": true,
-                  "tw-flex-col": true,
-                  "tw-p-4": !props.element.removePadding,
-                  "tw-gap-4": true,
-                },
-              },
-              toValue(props.fields),
-            ),
-          actions: () => {
-            if (props.element.action) {
-              const elem = nodeBuilder({
-                controlSchema: props.element.action,
-                parentId: `${props.element.id}`,
-                internalContext: props.fieldContext ?? {},
-                bladeContext: props.bladeContext,
-                currentLocale: props.currentLocale ?? "en",
-                formData: props.formData,
-              });
-              return elem;
-            }
-          },
-        },
-      });
-
-      function handleCollapsed(key: string, value: boolean): void {
-        localStorage?.setItem(key, `${value}`);
-      }
-
-      function restoreCollapsed(key: string): boolean {
-        return localStorage?.getItem(key) === "true";
-      }
-
-      return hasNoComment.value ? h(field.component as Component, field.props, field.slots) : null;
-    };
-  },
-};

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

@@ -1,53 +0,0 @@
-import { ExtractPropTypes, h, Component, unref, computed } from "vue";
-import { Checkbox } 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 { CheckboxSchema } from "@shared/modules/dynamic/types";
-import { unwrapInterpolation } from "@shared/modules/dynamic/helpers/unwrapInterpolation";
-import { toValue } from "@vueuse/core";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { useI18n } from "vue-i18n";
-
-export default {
-  name: "Checkbox",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: CheckboxSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-    return () => {
-      const field = Checkbox({
-        props: Object.assign(
-          {},
-          {
-            trueValue: props.element.trueValue,
-            falseValue: props.element.falseValue,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        slots: {
-          default: () =>
-            unref(computed(() => t(unwrapInterpolation(props.element.content, toValue(props.fieldContext!))))),
-        },
-      });
-
-      const render = h(field.component as Component, field.props, field.slots);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            slots: field.slots,
-            index: props.elIndex,
-            rows: props.rows,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};

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

@@ -1,33 +0,0 @@
-import { ExtractPropTypes, h, Component } from "vue";
-import { ContentField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { FieldSchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "ContentField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: FieldSchema }) {
-    return () => {
-      const field = ContentField({
-        props: Object.assign(
-          {},
-          {
-            type: props.element.variant,
-            copyable: props.element.copyable || false,
-            orientation: props.element.orientation,
-            aspectRatio: props.element.aspectRatio,
-          },
-          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/CustomComponent.ts

@@ -1,29 +0,0 @@
-import { CustomComponentSchema } from "@shared/modules/dynamic/types";
-import { ExtractPropTypes, resolveComponent, h } from "vue";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-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,
-            Object.assign(
-              {},
-              {
-                context: props.bladeContext,
-              },
-              {
-                class: unrefNested(props.baseProps).classNames ?? "",
-              },
-            ),
-          )
-        : null;
-    };
-  },
-};

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

@@ -1,154 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ExtractPropTypes, computed, h, ref, toValue, watch, UnwrapNestedRefs, Component } from "vue";
-import { DynamicProperties } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { reactify, reactiveComputed } from "@vueuse/core";
-import * as _ from "lodash-es";
-import { DynamicPropertiesSchema } from "@shared/modules/dynamic/types";
-import { setModel } from "@shared/modules/dynamic/helpers/setters";
-import { IDynamicProperties } from "@shared/modules/dynamic/types/models";
-
-interface IProperty {
-  [x: string]: unknown;
-  type: string;
-  required: boolean;
-  multivalue?: boolean;
-  multilanguage?: boolean;
-  valueType: string;
-  dictionary?: boolean;
-  name: string;
-  displayNames: { name?: string; languageCode?: string }[];
-  validationRule?: {
-    charCountMin: number;
-    charCountMax: number;
-    regExp: string;
-  };
-}
-
-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(toValue(newVal), internalModel.value)) {
-          internalModel.value = _.cloneDeep(toValue(newVal));
-        }
-      },
-      { deep: true, immediate: true },
-    );
-
-    const filteredProps = reactify(
-      (prop: IProperty[], { include, exclude }: { include?: string[]; exclude?: string[] }) => {
-        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 initialProps = _.cloneDeep(dynamicProps.value);
-
-    const properties: UnwrapNestedRefs<IDynamicProperties[]> = reactiveComputed(() => {
-      return (dynamicProps.value || [])?.map((prop) =>
-        DynamicProperties({
-          props: {
-            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 ?? "en-US"),
-              ),
-            ),
-            optionsGetter: props.bladeContext.scope?.dynamicProperties?.loadDictionaries as (
-              propertyId: string,
-              keyword?: string | undefined,
-              locale?: string | undefined,
-            ) => Promise<Record<string, any>[]>,
-            measurementsGetter: props.bladeContext.scope?.dynamicProperties?.loadMeasurements as (
-              measureId: string,
-              locale?: string | undefined,
-            ) => Promise<Record<string, any>[]>,
-            "onUpdate:model-value": (args: {
-              value: any;
-              unitOfMeasureId?: string;
-              dictionary?: Record<string, any>[];
-              locale?: string;
-            }) => {
-              let finalValue = args.value;
-              if (prop.valueType === "Measure") {
-                finalValue = {
-                  value: args.value,
-                  unitOfMeasureId: args.unitOfMeasureId,
-                };
-              }
-              props.bladeContext.scope?.dynamicProperties?.setPropertyValue({
-                property: prop,
-                value: finalValue,
-                dictionary: args.dictionary,
-                locale: args.locale,
-                initialProp: _.cloneDeep(initialProps?.find((x) => x.id === prop.id)),
-              });
-
-              if (props.fieldContext) {
-                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,
-          },
-        }),
-      );
-    });
-
-    return () => {
-      return properties && properties.length
-        ? properties.map((field) =>
-            h(field.component as Component, {
-              ...unrefNested(field.props),
-              class: unrefNested(props.baseProps).classNames ?? "",
-              key: field.props.key,
-            }),
-          )
-        : null;
-    };
-  },
-};