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

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

@@ -1,441 +0,0 @@
-import { toReactive, createUnrefFn } from "@vueuse/core";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  h,
-  ref,
-  computed,
-  MaybeRef,
-  unref,
-  Component,
-  RendererElement,
-  RendererNode,
-  VNode,
-  ComputedRef,
-  readonly,
-  toValue,
-  Ref,
-  watchPostEffect,
-} from "vue";
-import * as _ from "lodash-es";
-import { Checkbox, InputField, Switch, SelectField, RadioButton } from "@shared/modules/dynamic/components/factories";
-import { AsyncAction } from "@core/composables/useAsync";
-import { VcButton } from "@ui/components/atoms/vc-button";
-import { VcCol } from "@ui/components/atoms/vc-col";
-import { VcContainer } from "@ui/components/atoms/vc-container";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { VcRow } from "@ui/components/atoms/vc-row";
-import { useI18n } from "vue-i18n";
-import { FilterBase, FilterCheckbox, FilterDateInput, FilterRadio, FilterSelect, FilterSwitch } from "@shared/modules/dynamic/types";
-
-interface Control {
-  title: string;
-  fields: Record<
-    string,
-    {
-      fields: Record<
-        string,
-        | ReturnType<typeof Checkbox>
-        | ReturnType<typeof InputField>
-        | ReturnType<typeof Switch>
-        | ReturnType<typeof SelectField>
-        | ReturnType<typeof RadioButton>
-      >;
-      label?: string | ComputedRef<string> | undefined;
-      tooltip?: string | ComputedRef<string> | undefined;
-    }
-  >;
-}
-
-export interface UseFilterBuilder {
-  filterComponent: (slotMethods: { close: () => void }) =>
-    | VNode<
-        RendererNode,
-        RendererElement,
-        {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          [key: string]: any;
-        }
-      >
-    | undefined;
-  activeFilterCount: ComputedRef<number>;
-  isFilterVisible: ComputedRef<boolean>;
-  reset: () => Promise<void>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly filter: Record<string, any>;
-}
-
-export default <Query>(args: {
-  data: FilterBase | undefined;
-  query: MaybeRef<Query>;
-  load: AsyncAction<Query>;
-  scope: Record<string, any> | undefined;
-}): UseFilterBuilder => {
-  const _search = args.load;
-  const _data = args.data;
-
-  const isFilterVisible = ref(true);
-  const filter: Ref<Record<string, unknown>> = ref({});
-  const { t } = useI18n({ useScope: "global" });
-
-  const controls = ref<Control[]>([]);
-
-  const appliedFilter = ref({});
-  const activeFilterCount = computed(() => Object.values(appliedFilter.value).filter((item) => !!item).length);
-
-  const isDisabled = createUnrefFn((filterObj: Record<string, unknown>) => {
-    const filterKeys = Object.keys(filterObj);
-    return filterKeys.length === 0 || filterKeys.every((key) => !filterObj[key]);
-  });
-
-  watchPostEffect(() => {
-    createFilterControls();
-  });
-
-  function isItemSelected(value: string, field: string) {
-    const item = filter.value[field];
-    if (Array.isArray(item) && typeof item !== "string") {
-      return item.some((x) => x === value);
-    } else {
-      return item === value;
-    }
-  }
-
-  function selectFilterItem(e: boolean, value: string, field: string, multiple = true) {
-    if (multiple) {
-      filter.value[field] = e
-        ? [...((filter.value[field] as string[]) || []), value]
-        : ((filter.value[field] as string[]) || []).filter((x) => x !== value);
-
-      if (!(filter.value[field] as string[]).length) filter.value[field] = undefined;
-    } else {
-      filter.value[field] = e ? value : undefined;
-    }
-  }
-
-  function createFilterControls() {
-    if (!_data?.columns) {
-      isFilterVisible.value = false;
-      return;
-    }
-    controls.value = _data.columns.map((item): Control => {
-      const ctr = item.controls.reduce(
-        (obj, control) => {
-          if (control.component === "vc-checkbox") {
-            const filterData = control.data;
-            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
-            const fields = createCheckboxFromData(filterDataFromScope, control);
-
-            if (fields) {
-              obj[control.field] = {
-                fields,
-                label: computed(() => t(control.label ?? "")),
-                tooltip: computed(() => t(control.tooltip ?? "")),
-              };
-            }
-          }
-
-          if (control.component === "vc-input") {
-            obj[control.field] = {
-              fields: {
-                [control.field]: createInput(control),
-              },
-            };
-          }
-
-          if (control.component === "vc-switch") {
-            const filterData = control.data;
-            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
-            const fields = createSwitchFromData(filterDataFromScope, control);
-
-            if (fields) {
-              obj[control.field] = {
-                fields,
-              };
-            }
-          }
-
-          if (control.component === "vc-select") {
-            const filterData = control.data;
-            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
-            const fields = createSelectFromData(filterDataFromScope, control);
-
-            if (fields) {
-              obj[control.field] = {
-                fields,
-              };
-            }
-          }
-
-          if (control.component === "vc-radio-button-group") {
-            const filterData = control.data;
-            const filterDataFromScope = unref(args.scope)?.[filterData] ?? [];
-            const fields = createRadioButtonGroupFromData(filterDataFromScope, control);
-
-            if (fields) {
-              obj[control.field] = {
-                fields,
-                label: computed(() => t(control.label ?? "")),
-                tooltip: computed(() => t(control.tooltip ?? "")),
-              };
-            }
-          }
-
-          return obj;
-        },
-        {} as Record<
-          string,
-          {
-            fields: Record<
-              string,
-              | ReturnType<typeof Checkbox>
-              | ReturnType<typeof InputField>
-              | ReturnType<typeof Switch>
-              | ReturnType<typeof SelectField>
-              | ReturnType<typeof RadioButton>
-            >;
-            label?: string | ComputedRef<string>;
-            tooltip?: string | ComputedRef<string>;
-          }
-        >,
-      );
-
-      return {
-        title: item.title ?? "",
-        fields: ctr,
-      };
-    });
-  }
-
-  function createRadioButtonGroupFromData(data: MaybeRef<Record<string, string>[]>, control: FilterRadio) {
-    if (!(toValue(data) && toValue(data).length)) return;
-    return toValue(data).reduce(
-      (obj, currC) => {
-        obj[currC[control.optionValue]] = {
-          ...RadioButton({
-            props: {
-              class: "tw-mb-2",
-              value: currC[control.optionValue],
-              label: currC[control.optionLabel],
-              modelValue: computed(() => filter.value[control.field]),
-              "onUpdate:modelValue": (e: string) => {
-                filter.value[control.field] = e;
-              },
-            },
-          }),
-        };
-
-        return obj;
-      },
-      {} as Record<string, ReturnType<typeof RadioButton>>,
-    );
-  }
-
-  function createSelectFromData(data: MaybeRef<Record<string, string>[]>, control: FilterSelect) {
-    if (!(toValue(data) && toValue(data).length)) return;
-
-    return {
-      [control.field]: SelectField({
-        props: {
-          class: "tw-mb-2",
-          label: computed(() => t(control.label ?? "")) as unknown as string,
-          tooltip: computed(() => t(control.tooltip ?? "")) as unknown as string,
-          options: toValue(data),
-          multiple: control.multiple,
-          optionLabel: control.optionLabel,
-          optionValue: control.optionValue,
-          clearable: false,
-          modelValue: computed(() => filter.value[control.field]),
-          "onUpdate:modelValue": (e: string | string[]) => {
-            if (Array.isArray(e) && e.length === 0) {
-              filter.value[control.field] = undefined;
-              return;
-            }
-            filter.value[control.field] = e;
-          },
-        },
-      }),
-    };
-  }
-
-  function createSwitchFromData(data: MaybeRef<Record<string, string>[]>, control: FilterSwitch) {
-    if (!(toValue(data) && toValue(data).length)) return;
-    return toValue(data).reduce(
-      (obj, currC) => {
-        obj[currC[control.optionValue]] = Switch({
-          props: {
-            class: "tw-mb-2",
-            label: toValue(currC[control.optionLabel]),
-            tooltip: computed(() => t(control.tooltip ?? "")) as unknown as string,
-            modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
-            "onUpdate:modelValue": (e: boolean) =>
-              selectFilterItem(e, currC[control.optionValue], control.field, control.multiple),
-          },
-        });
-
-        return obj;
-      },
-      {} as Record<string, ReturnType<typeof Switch>>,
-    );
-  }
-
-  function createCheckboxFromData(data: MaybeRef<Record<string, string>[]>, control: FilterCheckbox) {
-    if (!(toValue(data) && toValue(data).length)) return;
-    return toValue(data).reduce(
-      (obj, currC) => {
-        obj[currC[control.optionValue]] = {
-          ...Checkbox({
-            props: {
-              class: "tw-mb-2",
-              modelValue: computed(() => isItemSelected(currC[control.optionValue], control.field)),
-              "onUpdate:modelValue": (e: boolean) =>
-                selectFilterItem(e, currC[control.optionValue], control.field, control.multiple),
-            },
-            slots: {
-              default: () => toValue(currC[control.optionLabel]),
-            },
-          }),
-        };
-
-        return obj;
-      },
-      {} as Record<string, ReturnType<typeof Checkbox>>,
-    );
-  }
-
-  function createInput(control: FilterDateInput) {
-    return InputField({
-      props: {
-        type: "date",
-        class: "tw-mb-3",
-        label: toValue(computed(() => t(control.label ?? ""))),
-        tooltip: toValue(computed(() => t(control.tooltip ?? ""))),
-        modelValue: computed(() => filter.value[control.field]),
-        "onUpdate:modelValue": (e: unknown) => (filter.value[control.field] = e),
-      },
-    });
-  }
-
-  async function applyFilters(filterHandlerFn: () => void) {
-    appliedFilter.value = {
-      ...filter.value,
-    };
-    filterHandlerFn();
-    await _search({
-      ...(_.omit(unref(args.query) as object, "skip") as Query),
-      ...filter.value,
-    });
-  }
-
-  async function resetFilters(filterHandlerFn: () => void) {
-    filterHandlerFn();
-
-    await reset();
-
-    await _search({
-      ...unref(args.query),
-      ...filter.value,
-    });
-  }
-
-  function render(slotMethods: { close: () => void }) {
-    if (_.isEmpty(controls.value)) return;
-    return h(
-      VcContainer,
-      {
-        noPadding: true,
-        onVnodeBeforeMount: () => {
-          filter.value = { ...appliedFilter.value };
-        },
-      },
-      () => [
-        h(VcRow, () =>
-          Object.values(controls.value).map(({ title, fields }) => {
-            return h(VcCol, { class: "tw-px-5 tw-py-[10px]" }, () => [
-              title
-                ? h(
-                    "div",
-                    { class: "tw-mb-4 tw-text-secondary-500 tw-font-bold tw-text-[17px]" },
-                    unref(computed(() => t(title))),
-                  )
-                : undefined,
-              Object.values(fields)?.map((items) => {
-                return items.label
-                  ? h(
-                      VcLabel,
-                      {
-                        class: "tw-mb-2",
-                      },
-                      {
-                        default: () => items.label,
-                        tooltip: items.tooltip ? () => items.tooltip : undefined,
-                      },
-                    )
-                  : undefined;
-              }),
-              Object.values(fields)?.map((items) => {
-                return Object.values(items.fields).map((item) => {
-                  if ("component" in item && item.component) {
-                    return [
-                      h(
-                        item.component as Component,
-                        { ...item.props, class: item.props.class },
-                        "slots" in item && item.slots ? { ...item.slots } : {},
-                      ),
-                    ];
-                  } else {
-                    return item;
-                  }
-                });
-              }),
-            ]);
-          }),
-        ),
-        h(VcRow, () =>
-          h(
-            VcCol,
-            {
-              class: "tw-px-5 tw-py-[10px] !tw-flex-auto tw-border-t tw-border-solid tw-border-neutrals-200",
-            },
-            () =>
-              h("div", { class: "tw-flex tw-justify-start" }, [
-                h(
-                  VcButton,
-                  {
-                    class: "tw-mr-4",
-                    small: true,
-                    disabled: isDisabled(filter),
-                    onClick: () => applyFilters(slotMethods.close),
-                  },
-                  () => t("COMPONENTS.FILTERS.APPLY"),
-                ),
-                h(
-                  VcButton,
-                  {
-                    outline: true,
-                    small: true,
-                    disabled: isDisabled(appliedFilter),
-                    onClick: () => resetFilters(slotMethods.close),
-                  },
-                  () => t("COMPONENTS.FILTERS.RESET"),
-                ),
-              ]),
-          ),
-        ),
-      ],
-    );
-  }
-
-  async function reset() {
-    Object.keys(filter.value).forEach((key: string) => (filter.value[key] = undefined));
-
-    appliedFilter.value = {};
-  }
-
-  return {
-    filterComponent: render,
-    activeFilterCount,
-    filter: readonly(toReactive(filter)),
-    isFilterVisible: computed(() => isFilterVisible.value),
-    reset,
-  };
-};

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

@@ -1,67 +0,0 @@
-import { ConcreteComponent, MaybeRef, ShallowRef, reactive, resolveComponent, shallowRef, toValue } from "vue";
-import { ListContentSchema } from "@shared/modules/dynamic";
-
-export interface IUseTableTemplates {
-  tableTemplates: {
-    templateOverrideComponents: Record<string, ShallowRef<ConcreteComponent>>;
-    mobileView: ConcreteComponent | undefined;
-    notFound: ConcreteComponent | undefined;
-    empty: ConcreteComponent | undefined;
-    footer: ConcreteComponent | undefined;
-    header: ConcreteComponent | undefined;
-  };
-}
-
-export const useTableTemplates = (
-  tableSchema: MaybeRef<ListContentSchema | undefined> | undefined,
-): IUseTableTemplates => {
-  const tableTemplates = reactive({
-    templateOverrideComponents: templateOverrideComponents(),
-    mobileView: resolveTemplateComponent("mobileTemplate"),
-    notFound: resolveTemplateComponent("notFoundTemplate"),
-    empty: resolveTemplateComponent("emptyTemplate"),
-    footer: resolveTemplateComponent("footerTemplate"),
-    header: resolveTemplateComponent("headerTemplate"),
-  });
-
-  function resolveTemplateComponent(name: keyof ListContentSchema): ShallowRef<ConcreteComponent> | undefined {
-    if (!toValue(tableSchema)) return;
-    const value = toValue(tableSchema)?.[name];
-    if (value && typeof value === "object" && "component" in value) {
-      const componentName = value.component;
-      if (componentName) {
-        const component = resolveComponent(componentName);
-
-        if (component && typeof component !== "string") return shallowRef(component);
-      }
-    }
-  }
-
-  function templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
-    return {
-      ...toValue(tableSchema)?.columns?.reduce(
-        (acc, curr) => {
-          if ("customTemplate" in curr && curr.customTemplate) {
-            if (!("component" in curr.customTemplate)) {
-              throw new Error(
-                `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`,
-              );
-            } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
-              const component = resolveComponent(curr.customTemplate.component);
-
-              if (typeof component !== "string") {
-                acc[curr.id] = shallowRef(component);
-              }
-            }
-          }
-          return acc;
-        },
-        {} as Record<string, ShallowRef<ConcreteComponent>>,
-      ),
-    };
-  }
-
-  return {
-    tableTemplates,
-  };
-};

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

@@ -1,70 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { IBladeToolbar } from "@core/types";
-import * as _ from "lodash-es";
-import { SettingsSchema, ToolbarSchema } from "@shared/modules/dynamic/types";
-import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "@shared/modules/dynamic/factories/types";
-import { useI18n } from "vue-i18n";
-import { toValue } from "@vueuse/core";
-import { UnwrapNestedRefs, computed, ref, ComputedRef, unref } from "vue";
-
-export const useToolbarReducer = (args: {
-  defaultToolbarSchema: SettingsSchema["toolbar"];
-  defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
-  customToolbarConfig: BaseBladeScope["toolbarOverrides"];
-  context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
-}): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[] | IBladeToolbar[] | undefined>> | undefined => {
-  if (!args) return;
-
-  const { t } = useI18n({ useScope: "global" });
-
-  const toolbarMethodsMerge = _.merge(
-    ref({}),
-    ref(args.defaultToolbarBindings),
-    ref(toValue(args.customToolbarConfig)),
-  );
-
-  return computed(() => {
-    if (args.defaultToolbarSchema?.length !== 0) {
-      return args.defaultToolbarSchema?.reduce((acc, curr) => {
-        const toolbarItemCtx = toolbarMethodsMerge.value[curr.method as keyof typeof toolbarMethodsMerge.value] as
-          | IBladeToolbar
-          | IBladeToolbar[];
-        if (toolbarItemCtx && Array.isArray(toolbarItemCtx)) {
-          return acc.concat(
-            toolbarItemCtx.map((item) => {
-              return {
-                ...curr,
-                ...item,
-                title: t(curr.title || unref<string>(item.title ?? "")) as string,
-              };
-            }),
-          );
-        }
-        if (toolbarItemCtx && typeof toolbarItemCtx === "object") {
-          const context =
-            typeof toolbarItemCtx === "function"
-              ? {
-                  clickHandler: async () => await (toolbarItemCtx as (ctx: typeof args.context) => any)(args.context),
-                }
-              : {
-                  ...toolbarItemCtx,
-                  clickHandler() {
-                    return toolbarItemCtx.clickHandler?.call(null, args.context);
-                  },
-                };
-
-          acc.push({
-            ...curr,
-            ...context,
-            icon: curr.icon || toolbarItemCtx.icon,
-            title: t(curr.title || unref<string>(toolbarItemCtx.title ?? "")) as string,
-          });
-        }
-
-        return acc;
-      }, [] as IBladeToolbar[]);
-    }
-
-    return [];
-  });
-};