@finema/core 3.21.0 → 3.23.2

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

@@ -1,211 +1,126 @@
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import PreviewModal from "./PreviewModal.vue";
-import { ArrayHelper, computed, ref, useOverlay, watch } from "#imports";
+import { useFilePicker } from "./useFilePicker.js";
+import { toFileValue, toUploadFormData, UploadState, validateFile } from "#core/helpers/uploadCore";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { useUploadLoader } from "#core/composables/useUpload";
-import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
+import { useFileProgress } from "#core/helpers/componentHelper";
 import { StringHelper } from "#core/utils/StringHelper";
-import { _get } from "#core/utils/lodash";
-export var UploadState = /* @__PURE__ */ ((UploadState2) => {
-  UploadState2["EMPTY"] = "empty";
-  UploadState2["UPLOADING"] = "uploading";
-  UploadState2["SUCCESS"] = "success";
-  UploadState2["ERROR"] = "error";
-  return UploadState2;
-})(UploadState || {});
-export const useUploadStateMultiple = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
-  const overlay = useOverlay();
-  const previewModal = overlay.create(PreviewModal);
+import { ArrayHelper, computed, ref, watch } from "#imports";
+export { UploadState };
+export const useUploadStateMultiple = (context) => {
+  const {
+    props,
+    emits,
+    onChange,
+    setErrors,
+    value
+  } = context;
+  const {
+    messages,
+    format
+  } = useCoreMessages();
   const fileItems = ref([]);
-  const fileAllocate = useFileAllocate(computed(() => fileItems.value[0]?.file), props);
-  const validateFile = (file) => {
-    if (props.accept && fileAllocate.acceptFile.value) {
-      const acceptedTypes = fileAllocate.acceptFile.value;
-      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
-      const fileExtension = file.name.toLowerCase().split(".").pop();
-      const isValidFileType = acceptedTypesList.some((acceptedType) => {
-        if (acceptedType.startsWith(".")) {
-          return fileExtension === acceptedType.slice(1).toLowerCase();
-        }
-        if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
-          return fileExtension === acceptedType.toLowerCase();
-        }
-        if (acceptedType.endsWith("/*")) {
-          return file.type.startsWith(acceptedType.slice(0, -2) + "/");
-        }
-        return file.type === acceptedType;
-      });
-      if (!isValidFileType) {
-        return {
-          valid: false,
-          error: `\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E40\u0E09\u0E1E\u0E32\u0E30 ${acceptedTypesList.join(", ")})`
-        };
-      }
-    }
-    if (props.maxSize) {
-      const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
-      if (file.size > maxSizeBytes) {
-        const sizeLabel = fileAllocate.isAcceptFileUseMb.value ? `${fileAllocate.acceptFileSizeMb.value} MB` : `${fileAllocate.acceptFileSizeKb.value} KB`;
-        return {
-          valid: false,
-          error: `\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${sizeLabel}`
-        };
-      }
-    }
-    return {
-      valid: true
-    };
+  let nextId = 0;
+  const updateFileItem = (id, updates) => {
+    fileItems.value = fileItems.value.map((item) => item.id === id ? {
+      ...item,
+      ...updates
+    } : item);
+  };
+  const removeFileItem = (id) => {
+    fileItems.value = fileItems.value.filter((item) => item.id !== id);
   };
-  const updateFileItem = (index, updates) => {
-    fileItems.value = fileItems.value.map(
-      (item, i) => i === index ? {
-        ...item,
-        ...updates
-      } : item
-    );
+  const isFull = () => !!props.maxFiles && fileItems.value.length >= props.maxFiles;
+  const setMaxFilesError = () => {
+    setErrors(format(messages.value.upload.maxFiles, {
+      max: props.maxFiles
+    }));
   };
-  const setupUpload = (fileItem, index) => {
+  const uploadFile = async (id, file) => {
     const {
       percent,
       onDownloadProgress,
       onUploadProgress
     } = useFileProgress();
-    const request = {
+    const uploadLoader = useUploadLoader({
       requestOptions: {
         ...props.requestOptions,
         onDownloadProgress,
         onUploadProgress
       },
       pathURL: props.uploadPathURL
-    };
-    const uploadLoader = useUploadLoader(request);
-    updateFileItem(index, {
-      uploadLoader,
-      percentRef: percent
     });
-    const stopProgressWatch = watch(percent, (newProgress) => {
-      updateFileItem(index, {
-        progress: newProgress
+    const stopProgressWatch = watch(percent, (progress) => updateFileItem(id, {
+      progress
+    }));
+    try {
+      await uploadLoader.run({
+        data: toUploadFormData(props.bodyKey, file)
       });
-    });
-    updateFileItem(index, {
-      cleanupWatchers: [stopProgressWatch]
-    });
-    return uploadLoader;
-  };
-  const processFile = (file) => {
-    processFileAsync(file).catch((error) => {
-      console.error("Error processing file:", error);
+    } finally {
+      stopProgressWatch();
+    }
+    if (uploadLoader.status.value.isSuccess && uploadLoader.data.value) {
+      const fileValue = toFileValue(uploadLoader.data.value, props, file);
+      removeFileItem(id);
+      onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
+      emits("success", fileValue);
+      return;
+    }
+    updateFileItem(id, {
+      state: UploadState.ERROR,
+      error: format(messages.value.upload.error, {
+        message: StringHelper.getError(uploadLoader.status.value.errorData, messages.value.common.somethingWentWrong)
+      })
     });
   };
-  const processFileAsync = async (file) => {
-    const validation = validateFile(file);
-    if (!validation.valid) {
-      setErrors(validation.error || "Invalid file");
+  const processFile = async (file) => {
+    const error = validateFile(file, props, messages.value.upload);
+    if (error) {
+      setErrors(error);
       return;
     }
-    if (props.maxFiles && fileItems.value.length >= props.maxFiles) {
-      setErrors(`\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.maxFiles} \u0E44\u0E1F\u0E25\u0E4C`);
+    if (isFull()) {
+      setMaxFilesError();
       return;
     }
     setErrors("");
-    const fileItem = {
-      file,
-      state: "uploading" /* UPLOADING */,
-      progress: 0
-    };
-    fileItems.value = [...fileItems.value, fileItem];
-    const newIndex = fileItems.value.length - 1;
-    const uploadLoader = setupUpload(fileItem, newIndex);
-    const formData = new FormData();
-    formData.append(props.bodyKey, file);
-    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
-      });
-    });
+    const id = nextId++;
+    fileItems.value = [
+      ...fileItems.value,
+      {
+        id,
+        file,
+        state: UploadState.UPLOADING,
+        progress: 0
+      }
+    ];
+    await uploadFile(id, file);
     emits("change", fileItems.value.map((item) => item.file));
   };
-  const handleFileDrop = async (files) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
-    for (const file of files) {
-      await processFileAsync(file);
-    }
-  };
-  const fileDialog = useFileDialog({
-    accept: acceptedFileTypes.value || "",
-    directory: false,
-    multiple: true
-  });
-  const dropzone = useDropZone(dropzoneRef, {
-    onDrop: handleFileDrop,
+  const picker = useFilePicker(context, {
     multiple: true,
-    preventDefaultForUnhandled: false
+    onFiles: async (files) => {
+      for (const file of files) {
+        await processFile(file);
+      }
+    }
   });
   const isEmpty = computed(() => fileItems.value.length === 0);
   const hasUploading = computed(
-    () => fileItems.value.some((item) => item.state === "uploading" /* UPLOADING */)
+    () => fileItems.value.some((item) => item.state === UploadState.UPLOADING)
   );
   const allSuccess = computed(
-    () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === "success" /* SUCCESS */)
+    () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === UploadState.SUCCESS)
   );
-  fileDialog.onChange(async (files) => {
-    if (files?.length) {
-      for (const file of Array.from(files)) {
-        await processFileAsync(file);
-      }
-      fileDialog.reset();
-    }
-  });
   const handleOpenFile = () => {
-    if (props.maxFiles && fileItems.value.length >= props.maxFiles) {
-      setErrors(`\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.maxFiles} \u0E44\u0E1F\u0E25\u0E4C`);
+    if (isFull()) {
+      setMaxFilesError();
       return;
     }
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    fileDialog.open();
+    picker.handleOpenFile();
   };
   const handleDeleteFile = (index) => {
-    const fileItem = fileItems.value[index];
-    if (fileItem?.cleanupWatchers) {
-      fileItem.cleanupWatchers.forEach((cleanup) => cleanup());
-    }
-    fileItems.value.splice(index, 1);
+    fileItems.value = fileItems.value.filter((_, itemIndex) => itemIndex !== index);
     if (fileItems.value.length === 0) {
       setErrors("");
     }
@@ -214,60 +129,12 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
   const handleRetryUpload = async (index) => {
     const fileItem = fileItems.value[index];
     if (!fileItem) return;
-    updateFileItem(index, {
-      state: "uploading" /* UPLOADING */,
+    updateFileItem(fileItem.id, {
+      state: UploadState.UPLOADING,
       error: void 0,
       progress: 0
     });
-    const uploadLoader = setupUpload(fileItem, index);
-    const formData = new FormData();
-    formData.append(props.bodyKey, fileItem.file);
-    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) => {
-    previewModal.open({
-      value: fileValue
-    });
+    await uploadFile(fileItem.id, fileItem.file);
   };
   return {
     // State
@@ -276,11 +143,11 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     hasUploading,
     allSuccess,
     // Upload utilities
-    dropzone,
+    dropzone: picker.dropzone,
     // Handlers
     handleOpenFile,
     handleDeleteFile,
     handleRetryUpload,
-    handlePreview
+    handlePreview: picker.openPreview
   };
 };

package/dist/runtime/components/Form/index.vue

@@ -1,5 +1,5 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>

package/dist/runtime/components/Form/types.d.ts

@@ -71,6 +71,8 @@ export interface IFieldProps {
     required?: boolean;
     help?: string;
     ui?: object | any;
+    /** Classes for the FormField wrapper (label, hint, error); set by FormFields from the field's `ui` */
+    containerUi?: object | any;
 }
 export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
     type: I;

package/dist/runtime/components/Image.vue

@@ -1,32 +1,32 @@
 <template>
-  <UseImage v-bind="$props">
-    <template #loading>
-      <slot name="loading">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <Loader
-            :loading="true"
-          />
-        </div>
-      </slot>
-    </template>
-
-    <template #error>
-      <slot name="error">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <p class="text-error-400">
-            <Icon
-              name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
-            />
-          </p>
-        </div>
-      </slot>
-    </template>
-  </UseImage>
+  <UseImage v-bind="$props">
+    <template #loading>
+      <slot name="loading">
+        <div
+          class="flex h-full w-full items-center justify-center"
+        >
+          <Loader
+            :loading="true"
+          />
+        </div>
+      </slot>
+    </template>
+
+    <template #error>
+      <slot name="error">
+        <div
+          class="flex h-full w-full items-center justify-center"
+        >
+          <p class="text-error-400">
+            <Icon
+              name="i-heroicons:exclamation-circle-solid"
+              class="text-error-400 size-8"
+            />
+          </p>
+        </div>
+      </slot>
+    </template>
+  </UseImage>
 </template>
 
 <script setup>

package/dist/runtime/components/Loader.d.vue.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
 };
 type __VLS_Slots = {
     loading: () => any;
+    default: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;

package/dist/runtime/components/Loader.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
 };
 type __VLS_Slots = {
     loading: () => any;
+    default: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;

package/dist/runtime/components/Table/Base.d.vue.ts

@@ -7,7 +7,21 @@ type __VLS_Props = {
     target?: string | ((row: any) => string | undefined);
     preserveQuery?: boolean;
 };
-declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: any, __VLS_64: string, __VLS_65: any;
+declare var __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_44: `${string}-cell`, __VLS_45: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+}, __VLS_64: string, __VLS_65: {
+    cell: import("@tanstack/table-core").Cell<any, unknown>;
+    column: import("@tanstack/table-core").Column<any, unknown>;
+    getValue: import("@tanstack/table-core").Getter<unknown>;
+    renderValue: import("@tanstack/table-core").Getter<unknown>;
+    row: import("@tanstack/table-core").Row<any>;
+    table: import("@tanstack/table-core").Table<any>;
+};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_44>]?: (props: typeof __VLS_45) => any;
 } & {