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

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

@@ -1,72 +0,0 @@
-import { ComponentSlots } from "@shared/utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
-import { SelectField } 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 { SelectSchema } from "@shared/modules/dynamic/types";
-import { VcSelect } from "@ui/components/molecules/vc-select";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-type TScope =
-  | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
-  | Parameters<ComponentSlots<typeof VcSelect>["selected-item"]>["0"];
-
-export default {
-  name: "SelectField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
-    return () => {
-      const field = SelectField({
-        props: Object.assign(
-          {},
-          {
-            optionValue: props.element.optionValue,
-            optionLabel: props.element.optionLabel,
-            emitValue: props.element.emitValue,
-            mapOptions: props.element.mapOptions,
-            options: props.bladeContext.scope?.[props.element.optionsMethod],
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            searchable: props.element.searchable || false,
-            multiple: props.element.multiple || false,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-
-        slots:
-          props.element.customTemplate &&
-          ["selected-item", "option"].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/StatusField.ts

@@ -1,110 +0,0 @@
-import { useI18n } from "vue-i18n";
-import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref } from "vue";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { StatusSchema } from "@shared/modules/dynamic/types";
-import { StatusField } from "@shared/modules/dynamic/components/factories";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import VcButton from "@ui/components/atoms/vc-button/vc-button.vue";
-
-export default {
-  name: "StatusField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: StatusSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-    const hasOverflow = ref(false);
-    const isExpanded = ref(false);
-    const contentRef = ref<HTMLElement | null>(null);
-
-    const toggle = () => {
-      isExpanded.value = !isExpanded.value;
-    };
-
-    const checkOverflow = () => {
-      if (contentRef.value) {
-        hasOverflow.value = contentRef.value.scrollHeight > 100;
-      }
-    };
-
-    onMounted(() => {
-      checkOverflow();
-    });
-
-    return () => {
-      const slotContent = computed(() => {
-        if (props.element.content && typeof props.element.content === "string") {
-          return t(props.element.content);
-        } else if (
-          typeof props.element.content === "object" &&
-          "method" in props.element.content &&
-          props.element.content?.method
-        ) {
-          const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
-          if (typeof method === "function") {
-            return method();
-          } else {
-            return method;
-          }
-        }
-
-        return null;
-      });
-
-      const field = StatusField({
-        props: Object.assign(
-          {
-            variant: props.element.variant,
-            outline: props.element.outline,
-            extend: props.element.extend,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        slots: {
-          default: () => {
-            return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
-              props.element.icon
-                ? h(VcIcon, {
-                    icon: props.element.icon,
-                    size: props.element.iconSize,
-                    variant: props.element.iconVariant,
-                    class: "tw-mr-3",
-                  })
-                : undefined,
-              h("div", { class: "tw-flex tw-flex-col", style: "text-align: start;" }, [
-                h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
-                h(
-                  "div",
-                  {
-                    class: {
-                      "tw-overflow-hidden": true,
-                      "tw-max-h-[100px] tw-line-clamp-4": !isExpanded.value,
-                      "tw-max-h-[100%]": isExpanded.value,
-                    },
-                    ref: contentRef,
-                  },
-                  slotContent.value,
-                ),
-                hasOverflow.value
-                  ? h(VcButton, { text: true, class: "tw-self-end", onClick: toggle }, () =>
-                      isExpanded.value
-                        ? t("COMPONENTS.ATOMS.VC_STATUS.SHOW_LESS")
-                        : t("COMPONENTS.ATOMS.VC_STATUS.SHOW_MORE"),
-                    )
-                  : undefined,
-              ]),
-            ]);
-          },
-        },
-      });
-
-      return h(
-        field.component as Component,
-        { ...field.props, class: props.element.extend ? "tw-w-full tw-box-border" : "tw-flex tw-self-start" },
-        field.slots,
-      );
-    };
-  },
-};

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

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

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

@@ -1,194 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useTableTemplates } from "@shared/modules/dynamic/composables";
-import { Component, ExtractPropTypes, computed, h, inject, toValue, unref } from "vue";
-import { Table } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { TableSchema } from "@shared/modules/dynamic/types";
-import { IsBladeEditableKey } from "@shared/modules/dynamic/keys";
-import { useI18n } from "vue-i18n";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { setModel } from "@shared/modules/dynamic/helpers/setters";
-import { IActionBuilderResult, ITableColumns } from "@core/types";
-
-type TableItemData<T> = {
-  name: string;
-  item: T;
-  cell: ITableColumns;
-  index: number;
-};
-
-export default {
-  name: "TableEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: TableSchema }) {
-    const { tableTemplates } = useTableTemplates(props.element);
-    const { t } = useI18n({ useScope: "global" });
-    const enableEdit = inject(IsBladeEditableKey, false);
-    const enableEditComputed = computed(() => unref(enableEdit));
-    const items = (unrefNested(props.baseProps).modelValue ?? []) as any[];
-
-    function disabledActionHandler(disabled: { method?: string } | boolean, item: (typeof items)[number]): boolean {
-      if (!disabled) return false;
-      if (typeof disabled === "boolean") return disabled;
-      else if (disabled.method && typeof toValue(props.bladeContext.scope)?.[disabled.method] === "function")
-        return toValue(props.bladeContext.scope)?.[disabled.method]({ item });
-      else if (disabled.method && toValue(props.bladeContext.scope)?.[disabled.method])
-        return toValue(props.bladeContext.scope)?.[disabled.method];
-      return false;
-    }
-
-    function actionBuilder(item: (typeof items)[number]): IActionBuilderResult[] | undefined {
-      const result = props.element?.actions?.reduce((arr, action) => {
-        const isDisabled = disabledActionHandler(action?.disabled ?? false, item);
-
-        if (!toValue(isDisabled)) {
-          arr.push({
-            icon: action.icon,
-            title: computed(() => t(action.title)),
-            type: action.type,
-            clickHandler: async (itemVal: (typeof items)[number], index: number) => {
-              try {
-                await toValue(props.bladeContext.scope)?.[action.method]?.(itemVal, index);
-              } catch (error) {
-                throw new Error(`Method ${action.method} is not defined in scope or toolbarOverrides`);
-              }
-            },
-          });
-        }
-        return arr;
-      }, [] as IActionBuilderResult[]);
-
-      return result;
-    }
-
-    return () => {
-      const field = Table({
-        props: Object.assign(
-          {},
-          {
-            addNewRowButton: props.element.addNewRowButton
-              ? {
-                  title: computed(() => t(props.element.addNewRowButton?.title ?? "")),
-                  show: props.element.addNewRowButton.show,
-                }
-              : undefined,
-            header: !!props.element.header,
-            footer: !!props.element.footer,
-            multiselect: !!props.element.multiselect,
-            columns: props.element.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) })),
-            items: unrefNested(props.baseProps).modelValue ?? [],
-            stateKey: props.element.id,
-            class: `!tw-flex-auto ${unrefNested(props.baseProps).classNames ?? ""}`,
-            editing: enableEditComputed.value,
-            enableItemActions: !!props.element.actions,
-            itemActionBuilder: actionBuilder,
-            get selectedItemId() {
-              if (
-                props.element.selectedItemId?.method &&
-                props.bladeContext.scope?.[props.element.selectedItemId?.method]
-              ) {
-                if (typeof props.bladeContext.scope?.[props.element.selectedItemId?.method] === "function") {
-                  return props.bladeContext.scope?.[props.element.selectedItemId?.method]?.();
-                } else {
-                  return props.bladeContext.scope?.[props.element.selectedItemId?.method];
-                }
-              }
-            },
-            get selectedItems() {
-              if (
-                props.element.selectedIds?.method &&
-                props.bladeContext.scope?.[props.element.selectedIds?.method] &&
-                typeof props.bladeContext.scope?.[props.element.selectedIds?.method] === "function"
-              ) {
-                return props.bladeContext.scope?.[props.element.selectedIds?.method]?.();
-              }
-              return [];
-            },
-            onItemClick: (item: (typeof items)[number]) => {
-              if (
-                props.element.onItemClick?.method &&
-                props.bladeContext.scope?.[props.element.onItemClick?.method] &&
-                typeof props.bladeContext.scope?.[props.element.onItemClick?.method] === "function"
-              ) {
-                props.bladeContext.scope?.[props.element.onItemClick?.method](item);
-              }
-            },
-            onOnEditComplete: (data: { event: { field: string; value: any }; index: number }) => {
-              if (props.fieldContext) {
-                setModel({
-                  context: props.fieldContext,
-                  property: `${props.element.property}.${data.index}.${data.event.field}`,
-                  value: data.event.value,
-                });
-              }
-            },
-            onOnAddNewRow: () => {
-              if (
-                props.element.addNewRowButton?.method &&
-                props.bladeContext.scope?.[props.element.addNewRowButton?.method] &&
-                typeof props.bladeContext.scope?.[props.element.addNewRowButton?.method] === "function"
-              ) {
-                props.bladeContext.scope?.[props.element.addNewRowButton?.method]?.();
-              }
-            },
-            onOnCellBlur: async (data: { row: number | undefined; field: string }) => {
-              if (props.element.columns) {
-                const column = props.element.columns.find((col) => col.id === data.field);
-                if (column && column.onCellBlur && column.onCellBlur.method) {
-                  if (
-                    props.bladeContext.scope?.[column.onCellBlur.method] &&
-                    typeof props.bladeContext.scope[column.onCellBlur.method] === "function"
-                  ) {
-                    await props.bladeContext.scope[column.onCellBlur.method](data);
-                  }
-                }
-              }
-            },
-          },
-          unrefNested(props.baseProps),
-        ),
-        slots: {
-          ...Object.entries(tableTemplates.templateOverrideComponents).reduce(
-            (obj, [key, value], index) => {
-              obj[`item_${key}`] = (itemData: TableItemData<(typeof items)[number]>) => {
-                return h(unref(value), {
-                  index: itemData.index,
-                  context: itemData,
-                  key: `template_override_${props.element.id}_${index}`,
-                  bladeContext: props.bladeContext,
-                  onEditComplete: (data: any) => {
-                    if (props.fieldContext) {
-                      setModel({
-                        context: props.fieldContext,
-                        property: `${props.element.property}.${itemData.index}.${key}`,
-                        value: data,
-                      });
-                    }
-                  },
-                });
-              };
-
-              return obj;
-            },
-            {} as Record<`item_${string}`, any>,
-          ),
-          notfound: tableTemplates?.notFound
-            ? () => h(tableTemplates.notFound as Component, { context: props.bladeContext })
-            : undefined,
-          "mobile-item": tableTemplates?.mobileView
-            ? (itemData: (typeof items)[number]) =>
-                h(tableTemplates.mobileView as Component, { context: itemData, bladeContext: props.bladeContext })
-            : undefined,
-          empty: tableTemplates?.empty
-            ? () => h(tableTemplates.empty as Component, { context: props.bladeContext })
-            : undefined,
-          footer: tableTemplates?.footer
-            ? () => h(tableTemplates.footer as Component, { context: props.bladeContext })
-            : undefined,
-        },
-      });
-
-      return h(field.component as unknown as Component, field.props, field.slots);
-    };
-  },
-};

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

@@ -1,46 +0,0 @@
-import { TextareaField } from "@shared/modules/dynamic/components/factories";
-import { TextareaSchema } from "@shared/modules/dynamic/types";
-import { ExtractPropTypes, h, Component } from "vue";
-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";
-
-export default {
-  name: "TextareaField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: TextareaSchema }) {
-    return () => {
-      const field = TextareaField({
-        props: Object.assign(
-          {},
-          {
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            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/ValidationField.ts

@@ -1,54 +0,0 @@
-import { computed, h, unref, useSlots, defineComponent, ComputedRef } from "vue";
-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: string) => {
-      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) > 1 && (props.index ?? 0) >= 0
-              ? props.props?.name + "_" + props.index
-              : props.props?.name,
-          ).value,
-        },
-        {
-          default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
-            return slots.default?.().map((slot) =>
-              h(slot, {
-                ...props.props,
-                error: !!errors.length,
-                errorMessage,
-                key: fieldKey.value + "_control",
-              }),
-            );
-          },
-        },
-      );
-  },
-});

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

@@ -1,30 +0,0 @@
-import { Component, ExtractPropTypes, h, toValue } from "vue";
-import { VideoField } from "@shared/modules/dynamic/components/factories";
-import componentProps from "@shared/modules/dynamic/components/fields/props";
-import { VideoSchema } from "@shared/modules/dynamic/types";
-import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-
-export default {
-  name: "VideoField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
-    return () => {
-      const field = VideoField({
-        props: Object.assign(
-          {},
-          {
-            source: toValue(props.baseProps.modelValue),
-          },
-          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/props.ts

@@ -1,39 +0,0 @@
-import { ComputedRef, PropType, ToRefs, UnwrapNestedRefs, VNode } from "vue";
-import { DetailsBladeContext } from "@shared/modules/dynamic/factories";
-import { IControlBaseProps } from "@shared/modules/dynamic/types/models";
-import { ControlSchema } from "@shared/modules/dynamic/types";
-
-export default {
-  baseProps: {
-    type: Object as PropType<ToRefs<IControlBaseProps>>,
-    default: () => ({}) as ToRefs<IControlBaseProps>,
-  },
-  element: {
-    type: Object as PropType<ControlSchema>,
-    default: () => ({}) as ControlSchema,
-  },
-  bladeContext: {
-    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
-    default: () => ({}) as DetailsBladeContext,
-  },
-  fields: {
-    type: Object as PropType<ComputedRef<VNode[][]>>,
-    default: () => ({}) as ComputedRef<VNode[][]>,
-  },
-  formData: {
-    type: Object as PropType<ToRefs<Record<string, unknown>>>,
-    default: () => ({}) as ToRefs<Record<string, unknown>>,
-  },
-  fieldContext: {
-    type: Object,
-  },
-  currentLocale: {
-    type: String,
-  },
-  elIndex: {
-    type: Number,
-  },
-  rows: {
-    type: Number,
-  },
-};

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

@@ -1,4 +0,0 @@
-import * as factories from "@shared/modules/dynamic/components/factories";
-import * as models from "@shared/modules/dynamic/types/models";
-
-export { factories, models };

package/shared/modules/dynamic/composables/index.ts

@@ -1,4 +0,0 @@
-export { default as useFilterBuilder } from "@shared/modules/dynamic/composables/useFilterBuilder";
-export { useTableTemplates } from "@shared/modules/dynamic/composables/useTableTemplates";
-export { useToolbarReducer } from "@shared/modules/dynamic/composables/useToolbarReducer";
-export { default as useDynamicViewsUtils } from "@shared/modules/dynamic/composables/useDynamicViewsUtils";

package/shared/modules/dynamic/composables/useDynamicViewsUtils/index.ts

@@ -1,46 +0,0 @@
-import { ref, WatchStopHandle, watch, onMounted, onUnmounted, getCurrentInstance, Ref } from "vue";
-import { ListBaseBladeScope, DetailsBaseBladeScope, DetailsBladeExposed, ListBladeExposed } from "@shared/modules/dynamic";
-
-export interface IUseDynamicViewsUtils {
-  getBladeExposedData: <BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>(
-    scope: BladeScope,
-  ) => BladeScope extends ListBaseBladeScope ? Ref<ListBladeExposed<BladeScope>> : Ref<DetailsBladeExposed<BladeScope>>;
-}
-
-export default () => {
-  const instance = getCurrentInstance();
-
-  function getBladeExposedData<BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>() {
-    const reactiveBlade = ref<BladeScope | null>(null);
-
-    const blade = ref(instance?.vnode);
-
-    let unwatch: WatchStopHandle | null = null;
-
-    const updateReactiveBlade = () => {
-      if (blade.value && blade.value.props?.navigation?.instance) {
-        reactiveBlade.value = blade.value.props.navigation.instance;
-      }
-    };
-
-    unwatch = watch(blade, updateReactiveBlade, { immediate: true, deep: true });
-
-    onMounted(() => {
-      updateReactiveBlade();
-    });
-
-    onUnmounted(() => {
-      if (unwatch) {
-        unwatch();
-      }
-    });
-
-    return reactiveBlade as unknown as BladeScope extends ListBaseBladeScope
-      ? Ref<ListBladeExposed<BladeScope>>
-      : Ref<DetailsBladeExposed<BladeScope>>;
-  }
-
-  return {
-    getBladeExposedData,
-  };
-};