@finema/core 3.14.3 → 3.14.5

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.3",
+  "version": "3.14.5",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "3.14.3";
+const version = "3.14.5";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.d.ts

@@ -1,7 +1,6 @@
-import type { Ref, TemplateRef } from 'vue';
+import type { TemplateRef } from 'vue';
 import type { IUploadDropzoneAutoMultipleProps } from '../InputUploadDropzoneAutoMultiple/types.js';
 import type { IFileValue } from '#core/components/Form/types';
-import { useUploadLoader } from '#core/composables/useUpload';
 export declare enum UploadState {
     EMPTY = "empty",
     UPLOADING = "uploading",
@@ -14,11 +13,12 @@ export interface FileUploadItem {
     progress: number;
     value?: IFileValue;
     error?: string;
-    uploadLoader?: ReturnType<typeof useUploadLoader>;
-    percentRef?: Ref<number>;
+    uploadLoader?: any;
+    percentRef?: any;
+    cleanupWatchers?: (() => void)[];
 }
 export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultipleProps, emits: any, onChange: (value: IFileValue[] | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
-    fileItems: Ref<{
+    fileItems: import("vue").Ref<{
         file: {
             readonly lastModified: number;
             readonly name: string;
@@ -56,16 +56,9 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
             id?: string | undefined;
         } | undefined;
         error?: string | undefined;
-        uploadLoader?: {
-            status: import("#imports").IStatus;
-            data: any;
-            options: import("#imports").IAPIOptions;
-            run: (payload?: import("../../../helpers/apiObjectHelper.js").IObjectRunLoaderOptions<any, any> | undefined) => Promise<void>;
-            clear: () => void;
-            setLoading: () => void;
-            setData: (data: any) => void;
-        } | undefined;
-        percentRef?: number | undefined;
+        uploadLoader?: any;
+        percentRef?: any;
+        cleanupWatchers?: (() => void)[] | undefined;
     }[], FileUploadItem[] | {
         file: {
             readonly lastModified: number;
@@ -104,16 +97,9 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
             id?: string | undefined;
         } | undefined;
         error?: string | undefined;
-        uploadLoader?: {
-            status: import("#imports").IStatus;
-            data: any;
-            options: import("#imports").IAPIOptions;
-            run: (payload?: import("../../../helpers/apiObjectHelper.js").IObjectRunLoaderOptions<any, any> | undefined) => Promise<void>;
-            clear: () => void;
-            setLoading: () => void;
-            setData: (data: any) => void;
-        } | undefined;
-        percentRef?: number | undefined;
+        uploadLoader?: any;
+        percentRef?: any;
+        cleanupWatchers?: (() => void)[] | undefined;
     }[]>;
     isEmpty: import("vue").ComputedRef<boolean>;
     hasUploading: import("vue").ComputedRef<boolean>;
@@ -121,6 +107,6 @@ export declare const useUploadStateMultiple: (props: IUploadDropzoneAutoMultiple
     dropzone: import("@vueuse/core").UseDropZoneReturn;
     handleOpenFile: () => void;
     handleDeleteFile: (index: number) => void;
-    handleRetryUpload: (index: number) => void;
+    handleRetryUpload: (index: number) => Promise<void>;
     handlePreview: (fileValue: IFileValue) => void;
 };

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.js

@@ -87,45 +87,17 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
         progress: newProgress
       });
     });
-    const stopSuccessWatch = watch(
-      () => uploadLoader.status.value.isSuccess,
-      (isSuccess) => {
-        if (isSuccess && uploadLoader.data.value) {
-          const fileValue = {
-            url: _get(uploadLoader.data.value, props.responseURL),
-            path: _get(uploadLoader.data.value, props.responsePath),
-            name: _get(uploadLoader.data.value, props.responseName) || fileItem.file.name,
-            size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
-            id: _get(uploadLoader.data.value, props.responseID)
-          };
-          fileItems.value.splice(index, 1);
-          onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
-          emits("success", fileValue);
-          stopProgressWatch();
-          stopSuccessWatch();
-          stopErrorWatch();
-        }
-      }
-    );
-    const stopErrorWatch = watch(
-      () => uploadLoader.status.value.isError,
-      (isError) => {
-        if (isError) {
-          updateFileItem(index, {
-            state: "error" /* ERROR */,
-            error: "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(
-              uploadLoader.status.value.errorData
-            )
-          });
-          stopProgressWatch();
-          stopSuccessWatch();
-          stopErrorWatch();
-        }
-      }
-    );
+    updateFileItem(index, {
+      cleanupWatchers: [stopProgressWatch]
+    });
     return uploadLoader;
   };
   const processFile = (file) => {
+    processFileAsync(file).catch((error) => {
+      console.error("Error processing file:", error);
+    });
+  };
+  const processFileAsync = async (file) => {
     const validation = validateFile(file);
     if (!validation.valid) {
       setErrors(validation.error || "Invalid file");
@@ -146,14 +118,54 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     const uploadLoader = setupUpload(fileItem, newIndex);
     const formData = new FormData();
     formData.append(props.bodyKey, file);
-    uploadLoader.run({
-      data: formData
+    await new Promise((resolve, reject) => {
+      const stopSuccessWatch = watch(
+        () => uploadLoader.status.value.isSuccess,
+        (isSuccess) => {
+          if (isSuccess && uploadLoader.data.value) {
+            const fileValue = {
+              url: _get(uploadLoader.data.value, props.responseURL),
+              path: _get(uploadLoader.data.value, props.responsePath),
+              name: _get(uploadLoader.data.value, props.responseName) || fileItem.file.name,
+              size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
+              id: _get(uploadLoader.data.value, props.responseID)
+            };
+            fileItems.value = fileItems.value.filter((_, i) => i !== newIndex);
+            onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
+            emits("success", fileValue);
+            stopSuccessWatch();
+            stopErrorWatch();
+            resolve();
+          }
+        }
+      );
+      const stopErrorWatch = watch(
+        () => uploadLoader.status.value.isError,
+        (isError) => {
+          if (isError) {
+            updateFileItem(newIndex, {
+              state: "error" /* ERROR */,
+              error: "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(
+                uploadLoader.status.value.errorData
+              )
+            });
+            stopSuccessWatch();
+            stopErrorWatch();
+            reject(new Error("Upload failed"));
+          }
+        }
+      );
+      uploadLoader.run({
+        data: formData
+      });
     });
     emits("change", fileItems.value.map((item) => item.file));
   };
-  const handleFileDrop = (files) => {
+  const handleFileDrop = async (files) => {
     if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
-    files.forEach((file) => processFile(file));
+    for (const file of files) {
+      await processFileAsync(file);
+    }
   };
   const fileDialog = useFileDialog({
     accept: acceptedFileTypes.value || "",
@@ -172,9 +184,11 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
   const allSuccess = computed(
     () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === "success" /* SUCCESS */)
   );
-  fileDialog.onChange((files) => {
+  fileDialog.onChange(async (files) => {
     if (files?.length) {
-      Array.from(files).forEach((file) => processFile(file));
+      for (const file of Array.from(files)) {
+        await processFileAsync(file);
+      }
       fileDialog.reset();
     }
   });
@@ -187,13 +201,17 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     fileDialog.open();
   };
   const handleDeleteFile = (index) => {
+    const fileItem = fileItems.value[index];
+    if (fileItem?.cleanupWatchers) {
+      fileItem.cleanupWatchers.forEach((cleanup) => cleanup());
+    }
     fileItems.value.splice(index, 1);
     if (fileItems.value.length === 0) {
       setErrors("");
     }
     emits("delete", index);
   };
-  const handleRetryUpload = (index) => {
+  const handleRetryUpload = async (index) => {
     const fileItem = fileItems.value[index];
     if (!fileItem) return;
     updateFileItem(index, {
@@ -204,8 +222,46 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     const uploadLoader = setupUpload(fileItem, index);
     const formData = new FormData();
     formData.append(props.bodyKey, fileItem.file);
-    uploadLoader.run({
-      data: formData
+    await new Promise((resolve, reject) => {
+      const stopSuccessWatch = watch(
+        () => uploadLoader.status.value.isSuccess,
+        (isSuccess) => {
+          if (isSuccess && uploadLoader.data.value) {
+            const fileValue = {
+              url: _get(uploadLoader.data.value, props.responseURL),
+              path: _get(uploadLoader.data.value, props.responsePath),
+              name: _get(uploadLoader.data.value, props.responseName) || fileItem.file.name,
+              size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
+              id: _get(uploadLoader.data.value, props.responseID)
+            };
+            fileItems.value = fileItems.value.filter((_, i) => i !== index);
+            onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
+            emits("success", fileValue);
+            stopSuccessWatch();
+            stopErrorWatch();
+            resolve();
+          }
+        }
+      );
+      const stopErrorWatch = watch(
+        () => uploadLoader.status.value.isError,
+        (isError) => {
+          if (isError) {
+            updateFileItem(index, {
+              state: "error" /* ERROR */,
+              error: "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(
+                uploadLoader.status.value.errorData
+              )
+            });
+            stopSuccessWatch();
+            stopErrorWatch();
+            reject(new Error("Upload failed"));
+          }
+        }
+      );
+      uploadLoader.run({
+        data: formData
+      });
     });
   };
   const handlePreview = (fileValue) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.3",
+  "version": "3.14.5",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",