@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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

@@ -1,70 +1,70 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IBladeToolbar } from "../../../../../core/types";
-import * as _ from "lodash-es";
-import { SettingsSchema, ToolbarSchema } from "../../types";
-import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../../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 [];
-  });
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IBladeToolbar } from "../../../../../core/types";
+import * as _ from "lodash-es";
+import { SettingsSchema, ToolbarSchema } from "../../types";
+import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../../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 [];
+  });
+};

package/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -1,144 +1,144 @@
-import { ComputedRef, MaybeRef, computed, ref, watch } from "vue";
-import * as _ from "lodash-es";
-import { useForm, useIsFormValid } from "vee-validate";
-import { useAsync, useLoading } from "../../../../../core/composables";
-import type { ItemId, IValidationState, UseDetails } from "../types";
-import { createUnrefFn } from "@vueuse/core";
-
-export interface UseDetailsFactoryParams<Item> {
-  load: (args?: ItemId) => Promise<Item | undefined> | Item | undefined;
-  saveChanges?: (details: Item) => Promise<Item | void> | Item | void;
-  remove?: (args: ItemId) => Promise<void> | void;
-}
-
-export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: UseDetailsFactoryParams<Item>) => {
-  return function useDetails(): UseDetails<Item> {
-    const { setFieldError, setErrors, validate, setFieldValue, setValues, errorBag } = useForm({
-      validateOnMount: false,
-    });
-    const item = ref<Item>();
-    const itemTemp = ref<Item>();
-    const isModified = ref(false);
-    const isFormValid = useIsFormValid();
-    const isDisabled = computed(() => !isModified.value || !isFormValid.value);
-
-    const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args?: ItemId) => {
-      const res = await factoryParams.load(args);
-
-      if (res) {
-        item.value = res;
-        item.value && resetModified(item.value);
-      }
-    });
-
-    const { loading: manageLoading, action: saveChanges } = useAsync<Item, Item | undefined>(async (itemToSave) => {
-      if (validationState.value.valid) {
-        const res = await factoryParams.saveChanges?.(itemToSave as Item);
-        isModified.value = false;
-
-        const id = itemToSave?.id ?? res?.id;
-
-        if (id) {
-          await load({ id });
-        }
-
-        if (res) return res;
-      } else throw new Error("Form is not valid");
-    });
-
-    const { loading: removeLoading, action: remove } = useAsync<ItemId | Item>(async (args) => {
-      await factoryParams.remove?.(args as ItemId);
-    });
-
-    const loading = useLoading(itemLoading, manageLoading, removeLoading);
-
-    const validationState = computed(
-      (): IValidationState<Item> => ({
-        /**
-         * @deprecated `dirty` - use `modified` instead
-         */
-        dirty: isModified.value,
-        valid: isFormValid.value,
-        modified: isModified.value,
-        disabled: isDisabled.value,
-        validated: !isDisabled.value && isModified.value,
-        cachedValue: itemTemp.value,
-        errorBag: errorBag.value,
-        setFieldError,
-        setErrors,
-        setFieldValue,
-        setValues,
-        resetModified,
-        resetValidationState,
-        validate,
-        setModifiedState,
-      }),
-    );
-
-    function setModifiedState(value: boolean) {
-      isModified.value = value;
-    }
-
-    function normalizeData(data: unknown): unknown {
-      if (
-        data === null ||
-        data === undefined ||
-        data === "" ||
-        (Array.isArray(data) && data.length === 0) ||
-        (typeof data === "object" && data !== null && Object.keys(data).length === 0)
-      ) {
-        return undefined;
-      }
-
-      if (Array.isArray(data)) {
-        return data.map((item) => normalizeData(item));
-      }
-
-      if (typeof data === "object") {
-        const normalizedObj: Record<string, unknown> = {};
-        for (const key in data) {
-          if (Object.prototype.hasOwnProperty.call(data, key)) {
-            normalizedObj[key] = normalizeData(data[key as keyof typeof data]);
-          }
-        }
-        return normalizedObj;
-      }
-
-      return data;
-    }
-
-    watch(
-      [() => item.value, () => itemTemp.value],
-      ([state, stateCopy]) => {
-        const normalizedState = normalizeData(state);
-        const normalizedStateCopy = normalizeData(stateCopy);
-
-        isModified.value = !_.isEqual(normalizedState, normalizedStateCopy);
-      },
-      { deep: true },
-    );
-
-    const resetModified = createUnrefFn((data: Item, updateInitial = false) => {
-      if (updateInitial) {
-        item.value = data;
-
-        resetValidationState();
-      }
-
-      itemTemp.value = _.cloneDeep(data);
-    }) as (data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>, updateInitial?: MaybeRef<boolean>) => void;
-
-    const resetValidationState = () => {
-      isModified.value = false;
-    };
-
-    return {
-      load,
-      saveChanges,
-      remove,
-      loading,
-      item,
-      validationState,
-    };
-  };
-};
+import { ComputedRef, MaybeRef, computed, ref, watch } from "vue";
+import * as _ from "lodash-es";
+import { useForm, useIsFormValid } from "vee-validate";
+import { useAsync, useLoading } from "../../../../../core/composables";
+import type { ItemId, IValidationState, UseDetails } from "../types";
+import { createUnrefFn } from "@vueuse/core";
+
+export interface UseDetailsFactoryParams<Item> {
+  load: (args?: ItemId) => Promise<Item | undefined> | Item | undefined;
+  saveChanges?: (details: Item) => Promise<Item | void> | Item | void;
+  remove?: (args: ItemId) => Promise<void> | void;
+}
+
+export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: UseDetailsFactoryParams<Item>) => {
+  return function useDetails(): UseDetails<Item> {
+    const { setFieldError, setErrors, validate, setFieldValue, setValues, errorBag } = useForm({
+      validateOnMount: false,
+    });
+    const item = ref<Item>();
+    const itemTemp = ref<Item>();
+    const isModified = ref(false);
+    const isFormValid = useIsFormValid();
+    const isDisabled = computed(() => !isModified.value || !isFormValid.value);
+
+    const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args?: ItemId) => {
+      const res = await factoryParams.load(args);
+
+      if (res) {
+        item.value = res;
+        item.value && resetModified(item.value);
+      }
+    });
+
+    const { loading: manageLoading, action: saveChanges } = useAsync<Item, Item | undefined>(async (itemToSave) => {
+      if (validationState.value.valid) {
+        const res = await factoryParams.saveChanges?.(itemToSave as Item);
+        isModified.value = false;
+
+        const id = itemToSave?.id ?? res?.id;
+
+        if (id) {
+          await load({ id });
+        }
+
+        if (res) return res;
+      } else throw new Error("Form is not valid");
+    });
+
+    const { loading: removeLoading, action: remove } = useAsync<ItemId | Item>(async (args) => {
+      await factoryParams.remove?.(args as ItemId);
+    });
+
+    const loading = useLoading(itemLoading, manageLoading, removeLoading);
+
+    const validationState = computed(
+      (): IValidationState<Item> => ({
+        /**
+         * @deprecated `dirty` - use `modified` instead
+         */
+        dirty: isModified.value,
+        valid: isFormValid.value,
+        modified: isModified.value,
+        disabled: isDisabled.value,
+        validated: !isDisabled.value && isModified.value,
+        cachedValue: itemTemp.value,
+        errorBag: errorBag.value,
+        setFieldError,
+        setErrors,
+        setFieldValue,
+        setValues,
+        resetModified,
+        resetValidationState,
+        validate,
+        setModifiedState,
+      }),
+    );
+
+    function setModifiedState(value: boolean) {
+      isModified.value = value;
+    }
+
+    function normalizeData(data: unknown): unknown {
+      if (
+        data === null ||
+        data === undefined ||
+        data === "" ||
+        (Array.isArray(data) && data.length === 0) ||
+        (typeof data === "object" && data !== null && Object.keys(data).length === 0)
+      ) {
+        return undefined;
+      }
+
+      if (Array.isArray(data)) {
+        return data.map((item) => normalizeData(item));
+      }
+
+      if (typeof data === "object") {
+        const normalizedObj: Record<string, unknown> = {};
+        for (const key in data) {
+          if (Object.prototype.hasOwnProperty.call(data, key)) {
+            normalizedObj[key] = normalizeData(data[key as keyof typeof data]);
+          }
+        }
+        return normalizedObj;
+      }
+
+      return data;
+    }
+
+    watch(
+      [() => item.value, () => itemTemp.value],
+      ([state, stateCopy]) => {
+        const normalizedState = normalizeData(state);
+        const normalizedStateCopy = normalizeData(stateCopy);
+
+        isModified.value = !_.isEqual(normalizedState, normalizedStateCopy);
+      },
+      { deep: true },
+    );
+
+    const resetModified = createUnrefFn((data: Item, updateInitial = false) => {
+      if (updateInitial) {
+        item.value = data;
+
+        resetValidationState();
+      }
+
+      itemTemp.value = _.cloneDeep(data);
+    }) as (data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>, updateInitial?: MaybeRef<boolean>) => void;
+
+    const resetValidationState = () => {
+      isModified.value = false;
+    };
+
+    return {
+      load,
+      saveChanges,
+      remove,
+      loading,
+      item,
+      validationState,
+    };
+  };
+};

package/shared/modules/dynamic/factories/base/useListFactory.ts

@@ -1,68 +1,68 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref, computed, ref } from "vue";
-import { CustomQuery, UseList } from "../types";
-import { useAsync, useLoading } from "../../../../../core/composables";
-
-interface ISearchResult<T> {
-  totalCount?: number;
-  results?: T;
-}
-
-export interface UseListFactoryParams<Items extends Record<string, any>[], Query extends IQuery> {
-  load?: (query: Query, ...args: any[]) => Promise<ISearchResult<Items>> | ISearchResult<Items>;
-  remove?: (query: Query, customQuery: CustomQuery, ...args: any[]) => Promise<void> | void;
-}
-
-export interface IQuery {
-  [x: string]: any;
-  take?: number;
-  sort?: string;
-  skip?: number;
-  keyword?: string;
-}
-
-export interface IUseListOptions extends Pick<IQuery, "sort"> {
-  pageSize?: number;
-}
-
-export const useListFactory = <Items extends Record<string, any>[], Query extends IQuery>(
-  factoryParams: UseListFactoryParams<Items, Query>,
-) => {
-  return function useList(options?: IUseListOptions): UseList<Items, Query> {
-    const pageSize = options?.pageSize || 20;
-    const searchResult = ref<ISearchResult<Items>>();
-    const searchQuery = ref({
-      take: pageSize,
-      sort: options?.sort,
-    }) as Ref<Query>;
-
-    const { loading: itemsLoading, action: load } = useAsync<Query>(async (query, ...rest) => {
-      searchQuery.value = { ...searchQuery.value, ...query };
-      searchResult.value = await factoryParams.load?.(query as Query, ...rest);
-    });
-
-    const { loading: itemsDelete, action: remove } = useAsync<CustomQuery>(async (customQuery, ...rest) => {
-      await factoryParams.remove?.(searchQuery.value, customQuery as CustomQuery, ...rest);
-    });
-
-    const loading = useLoading(itemsLoading, itemsDelete);
-
-    const pagination = computed(() => ({
-      currentPage: (searchQuery.value?.skip || 0) / Math.max(1, searchQuery?.value.take || 20) + 1,
-      totalCount: searchResult.value?.totalCount || 0,
-      pageSize: pageSize,
-      get pages() {
-        return Math.ceil(this.totalCount / this.pageSize);
-      },
-    }));
-
-    return {
-      items: computed(() => searchResult.value?.results as Items),
-      query: searchQuery,
-      loading,
-      pagination,
-      load,
-      remove,
-    };
-  };
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Ref, computed, ref } from "vue";
+import { CustomQuery, UseList } from "../types";
+import { useAsync, useLoading } from "../../../../../core/composables";
+
+interface ISearchResult<T> {
+  totalCount?: number;
+  results?: T;
+}
+
+export interface UseListFactoryParams<Items extends Record<string, any>[], Query extends IQuery> {
+  load?: (query: Query, ...args: any[]) => Promise<ISearchResult<Items>> | ISearchResult<Items>;
+  remove?: (query: Query, customQuery: CustomQuery, ...args: any[]) => Promise<void> | void;
+}
+
+export interface IQuery {
+  [x: string]: any;
+  take?: number;
+  sort?: string;
+  skip?: number;
+  keyword?: string;
+}
+
+export interface IUseListOptions extends Pick<IQuery, "sort"> {
+  pageSize?: number;
+}
+
+export const useListFactory = <Items extends Record<string, any>[], Query extends IQuery>(
+  factoryParams: UseListFactoryParams<Items, Query>,
+) => {
+  return function useList(options?: IUseListOptions): UseList<Items, Query> {
+    const pageSize = options?.pageSize || 20;
+    const searchResult = ref<ISearchResult<Items>>();
+    const searchQuery = ref({
+      take: pageSize,
+      sort: options?.sort,
+    }) as Ref<Query>;
+
+    const { loading: itemsLoading, action: load } = useAsync<Query>(async (query, ...rest) => {
+      searchQuery.value = { ...searchQuery.value, ...query };
+      searchResult.value = await factoryParams.load?.(query as Query, ...rest);
+    });
+
+    const { loading: itemsDelete, action: remove } = useAsync<CustomQuery>(async (customQuery, ...rest) => {
+      await factoryParams.remove?.(searchQuery.value, customQuery as CustomQuery, ...rest);
+    });
+
+    const loading = useLoading(itemsLoading, itemsDelete);
+
+    const pagination = computed(() => ({
+      currentPage: (searchQuery.value?.skip || 0) / Math.max(1, searchQuery?.value.take || 20) + 1,
+      totalCount: searchResult.value?.totalCount || 0,
+      pageSize: pageSize,
+      get pages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+      },
+    }));
+
+    return {
+      items: computed(() => searchResult.value?.results as Items),
+      query: searchQuery,
+      loading,
+      pagination,
+      load,
+      remove,
+    };
+  };
+};

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

@@ -1,4 +1,4 @@
-export { useDetailsFactory } from "./base/useDetailsFactory";
-export { useListFactory } from "./base/useListFactory";
-
-export * from "./types";
+export { useDetailsFactory } from "./base/useDetailsFactory";
+export { useListFactory } from "./base/useListFactory";
+
+export * from "./types";