@finema/core 3.0.2 → 3.2.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "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.0.2";
+const version = "3.2.0";
 
 const nuxtAppOptions = {
   head: {

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

@@ -37,6 +37,7 @@ import FormInputTime from "./InputTime/index.vue";
 import FormInputMonth from "./InputMonth/index.vue";
 import FormInputDateTimeRange from "./InputDateTimeRange/index.vue";
 import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
+import FormInputUploadDropzoneAutoMultiple from "./InputUploadDropzoneAutoMultiple/index.vue";
 import FormInputUploadDropzone from "./InputUploadDropzone/index.vue";
 import FormInputTag from "./InputTags/index.vue";
 import FormInputWYSIWYG from "./InputWYSIWYG/index.vue";
@@ -150,7 +151,10 @@ const componentMap = {
     component: FormInputUploadDropzoneAuto,
     props: {}
   },
-  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: {
+    component: FormInputUploadDropzoneAutoMultiple,
+    props: {}
+  },
   [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.WYSIWYG]: {
     component: FormInputWYSIWYG,

package/dist/runtime/components/Form/InputSelect/index.d.vue.ts

@@ -5,6 +5,10 @@ declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {},
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     clearIcon: string;
+    searchInput: {
+        placeholder?: string;
+        icon?: string;
+    } | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,7 +6,7 @@
       :placeholder="wrapperProps.placeholder"
       :disabled="wrapperProps.disabled"
       :loading="loading"
-      :search-input="searchInput"
+      :search-input="searchInput ?? void 0"
       :selected-icon="selectedIcon"
       value-key="value"
       label-key="label"
@@ -60,7 +60,7 @@ const props = defineProps({
   trailingIcon: { type: String, required: false },
   clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
   selectedIcon: { type: String, required: false },
-  searchInput: { type: [Object, Boolean], required: false },
+  searchInput: { type: [Object, Boolean], required: false, default: void 0 },
   clearable: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   options: { type: Array, required: true },

package/dist/runtime/components/Form/InputSelect/index.vue.d.ts

@@ -5,6 +5,10 @@ declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {},
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     clearIcon: string;
+    searchInput: {
+        placeholder?: string;
+        icon?: string;
+    } | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.d.vue.ts

@@ -0,0 +1,25 @@
+import type { IUploadDropzoneAutoMultipleProps } from './types.js';
+import type { IFileValue } from '#core/components/Form/types';
+declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMultipleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (res: IFileValue) => any;
+    delete: (index: number) => any;
+    change: (value: File[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoMultipleProps> & Readonly<{
+    onSuccess?: ((res: IFileValue) => any) | undefined;
+    onDelete?: ((index: number) => any) | undefined;
+    onChange?: ((value: File[] | undefined) => any) | undefined;
+}>, {
+    selectFileLabel: string;
+    selectFileSubLabel: string;
+    uploadingLabel: string;
+    uploadFailedLabel: string;
+    retryLabel: string;
+    bodyKey: string;
+    responseURL: string;
+    responsePath: string;
+    responseName: string;
+    responseSize: string;
+    responseID: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,110 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+      </div>
+    </div>
+    <!-- Multiple Files State -->
+    <MultipleFilesState
+      v-if="!uploadState.isEmpty.value"
+      :theme="theme"
+      :file-items="uploadState.fileItems.value"
+      :disabled="wrapperProps.disabled"
+      :readonly="wrapperProps.readonly"
+      :upload-failed-label="uploadFailedLabel"
+      :retry-label="retryLabel"
+      @preview="uploadState.handlePreview"
+      @download="handleDownloadFile"
+      @delete="uploadState.handleDeleteFile"
+      @retry="uploadState.handleRetryUpload"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import EmptyState from "../fileState/EmptyState.vue";
+import MultipleFilesState from "../fileState/MultipleFilesState.vue";
+import { useUploadStateMultiple } from "../fileState/useUploadStateMultiple";
+import { computed, useTemplateRef } from "#imports";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
+import { useUiConfig } from "#core/composables/useConfig";
+import { downloadFileFromURL } from "#core/helpers/componentHelper";
+const emits = defineEmits(["change", "success", "delete"]);
+const props = defineProps({
+  requestOptions: { type: Object, required: true },
+  uploadPathURL: { type: String, required: false },
+  bodyKey: { type: String, required: false, default: "file" },
+  responseURL: { type: String, required: false, default: "url" },
+  responsePath: { type: String, required: false, default: "path" },
+  responseName: { type: String, required: false, default: "name" },
+  responseSize: { type: String, required: false, default: "size" },
+  responseID: { type: String, required: false, default: "id" },
+  accept: { type: [Array, String], required: false },
+  maxSize: { type: Number, required: false },
+  maxFiles: { type: Number, required: false },
+  selectFileLabel: { type: String, required: false, default: "\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C" },
+  selectFileSubLabel: { type: String, required: false, default: "\u0E2B\u0E23\u0E37\u0E2D \u0E25\u0E32\u0E01\u0E41\u0E25\u0E30\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48" },
+  uploadingLabel: { type: String, required: false, default: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14..." },
+  uploadFailedLabel: { type: String, required: false, default: "\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27, \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  retryLabel: { type: String, required: false, default: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  wrapperProps,
+  handleChange: onChange,
+  setErrors,
+  value
+} = useFieldHOC(props);
+const acceptedFileTypes = computed(
+  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
+);
+const dropzoneRef = useTemplateRef("dropzoneRef");
+const uploadState = useUploadStateMultiple(
+  props,
+  emits,
+  onChange,
+  setErrors,
+  value,
+  acceptedFileTypes,
+  wrapperProps,
+  dropzoneRef
+);
+const theme = computed(
+  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+    dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
+    disabled: wrapperProps.value.disabled,
+    failed: false
+  })
+);
+const handleDownloadFile = (fileValue) => {
+  if (fileValue?.url && fileValue?.name) {
+    downloadFileFromURL(fileValue.url, fileValue.name);
+  }
+};
+</script>

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue.d.ts

@@ -0,0 +1,25 @@
+import type { IUploadDropzoneAutoMultipleProps } from './types.js';
+import type { IFileValue } from '#core/components/Form/types';
+declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMultipleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (res: IFileValue) => any;
+    delete: (index: number) => any;
+    change: (value: File[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoMultipleProps> & Readonly<{
+    onSuccess?: ((res: IFileValue) => any) | undefined;
+    onDelete?: ((index: number) => any) | undefined;
+    onChange?: ((value: File[] | undefined) => any) | undefined;
+}>, {
+    selectFileLabel: string;
+    selectFileSubLabel: string;
+    uploadingLabel: string;
+    uploadFailedLabel: string;
+    retryLabel: string;
+    bodyKey: string;
+    responseURL: string;
+    responsePath: string;
+    responseName: string;
+    responseSize: string;
+    responseID: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { AxiosRequestConfig } from 'axios';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '../types.js';
+export interface IUploadDropzoneAutoMultipleProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    bodyKey?: string;
+    responseURL?: string;
+    responsePath?: string;
+    responseName?: string;
+    responseSize?: string;
+    responseID?: string;
+    accept?: string[] | string;
+    maxSize?: number;
+    maxFiles?: number;
+    selectFileLabel?: string;
+    selectFileSubLabel?: string;
+    uploadingLabel?: string;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
+}
+export type IUploadDropzoneAutoMultipleField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE, IUploadDropzoneAutoMultipleProps, {
+    change: (value: File[] | undefined) => void;
+    success: (res: any) => void;
+    delete: (index: number) => void;
+}>;

package/dist/runtime/components/Form/fileState/MultipleFilesState.d.vue.ts

@@ -0,0 +1,30 @@
+import type { IFileValue } from '#core/components/Form/types';
+import { UploadState } from './useUploadStateMultiple.js';
+interface FileUploadItem {
+    file: File;
+    state: UploadState;
+    progress: number;
+    value?: IFileValue;
+    error?: string;
+}
+interface Props {
+    theme: any;
+    fileItems: FileUploadItem[];
+    disabled?: boolean;
+    readonly?: boolean;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (index: number) => any;
+    preview: (value: IFileValue) => any;
+    download: (value: IFileValue) => any;
+    retry: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: ((index: number) => any) | undefined;
+    onPreview?: ((value: IFileValue) => any) | undefined;
+    onDownload?: ((value: IFileValue) => any) | undefined;
+    onRetry?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form/fileState/MultipleFilesState.vue

@@ -0,0 +1,172 @@
+<template>
+  <div :class="theme.multipleFilesWrapper()">
+    <div
+      v-for="(item, index) in fileItems"
+      :key="index"
+      :class="theme.fileItemWrapper()"
+    >
+      <!-- Uploading State -->
+      <div
+        v-if="item.state === UploadState.UPLOADING"
+        :class="theme.uploadingItemWrapper()"
+      >
+        <div :class="theme.uploadingIconWrapper()">
+          <Icon
+            :name="icons.filePreviewIcon"
+            :class="theme.uploadingIconClass()"
+          />
+        </div>
+        <div :class="theme.uploadingTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <div class="flex items-center gap-2">
+            <div :class="theme.progressBarWrapper()">
+              <div
+                :class="theme.progressBarFill()"
+                :style="{ width: `${item.progress}%` }"
+              />
+            </div>
+            <p class="text-sm text-gray-400">
+              {{ item.progress }}%
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Success State -->
+      <div
+        v-else-if="item.state === UploadState.SUCCESS && item.value"
+        :class="theme.successItemWrapper()"
+      >
+        <div
+          v-if="isImageFromPath(item.value.path)"
+          :class="theme.successImgWrapper()"
+        >
+          <img
+            :src="item.value.url"
+            :class="theme.successImgClass()"
+            alt="img-preview"
+          />
+        </div>
+        <div
+          v-else
+          :class="theme.successFileWrapper()"
+        >
+          <Icon
+            :name="icons.filePreviewIcon"
+            :class="theme.successFileClass()"
+          />
+        </div>
+        <div :class="theme.successTextWrapper()">
+          <div class="truncate">
+            <h1 class="truncate font-bold">
+              {{ item.value.name }}
+            </h1>
+            <p class="truncate text-sm font-light text-gray-400">
+              {{ getFileSizeFromValue(item.value) }}
+            </p>
+          </div>
+          <div :class="theme.actionWrapper()">
+            <a
+              v-if="isPDFFromPath(item.value.path)"
+              :href="item.value.url"
+              target="_blank"
+              class="flex"
+            >
+              <Icon
+                :name="icons.actionPreviewIcon"
+                :class="theme.actionIconClass()"
+                title="ดูตัวอย่าง"
+              />
+            </a>
+            <Icon
+              v-if="isImageFromPath(item.value.path) || isVideoFromPath(item.value.path)"
+              :name="icons.actionPreviewIcon"
+              :class="theme.actionIconClass()"
+              title="ดูตัวอย่าง"
+              @click="$emit('preview', item.value)"
+            />
+            <Icon
+              :name="icons.actionDownloadIcon"
+              :class="theme.actionIconClass()"
+              title="ดาวน์โหลดไฟล์"
+              @click="$emit('download', item.value)"
+            />
+            <Icon
+              v-if="!disabled && !readonly"
+              :name="icons.actionDeleteIcon"
+              :class="theme.actionIconClass()"
+              title="ลบไฟล์"
+              @click="$emit('delete', index)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div
+        v-else-if="item.state === UploadState.ERROR"
+        :class="theme.errorItemWrapper()"
+      >
+        <div :class="theme.errorIconWrapper()">
+          <Icon
+            :name="icons.errorIcon"
+            :class="theme.errorIconClass()"
+          />
+        </div>
+        <div :class="theme.errorTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <p class="text-error-500 text-sm">
+            {{ item.error || uploadFailedLabel }}
+          </p>
+        </div>
+        <div :class="theme.errorActionWrapper()">
+          <Button
+            variant="link"
+            :icon="icons.actionRetryIcon"
+            :class="theme.actionRetryBtnClass()"
+            color="primary"
+            @click="$emit('retry', index)"
+          >
+            {{ retryLabel }}
+          </Button>
+          <Icon
+            v-if="!disabled && !readonly"
+            :name="icons.actionDeleteIcon"
+            :class="theme.actionIconClass()"
+            title="ลบไฟล์"
+            @click="$emit('delete', index)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  isImageFromPath,
+  isPDFFromPath,
+  isVideoFromPath,
+  useFileSize
+} from "#core/helpers/componentHelper";
+import { useUiIconConfig } from "#core/composables/useConfig";
+import { UploadState } from "./useUploadStateMultiple";
+defineEmits(["preview", "download", "delete", "retry"]);
+defineProps({
+  theme: { type: null, required: true },
+  fileItems: { type: Array, required: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  uploadFailedLabel: { type: String, required: false },
+  retryLabel: { type: String, required: false }
+});
+const icons = useUiIconConfig("uploadFileDropzone");
+const getFileSizeFromValue = (fileValue) => {
+  const allocate = useFileSize(fileValue.size || 0);
+  return allocate.isSelectedFileUseMb.value ? `${allocate.selectedFileSizeMb.value} MB` : `${allocate.selectedFileSizeKb.value} KB`;
+};
+</script>

package/dist/runtime/components/Form/fileState/MultipleFilesState.vue.d.ts

@@ -0,0 +1,30 @@
+import type { IFileValue } from '#core/components/Form/types';
+import { UploadState } from './useUploadStateMultiple.js';
+interface FileUploadItem {
+    file: File;
+    state: UploadState;
+    progress: number;
+    value?: IFileValue;
+    error?: string;
+}
+interface Props {
+    theme: any;
+    fileItems: FileUploadItem[];
+    disabled?: boolean;
+    readonly?: boolean;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (index: number) => any;
+    preview: (value: IFileValue) => any;
+    download: (value: IFileValue) => any;
+    retry: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: ((index: number) => any) | undefined;
+    onPreview?: ((value: IFileValue) => any) | undefined;
+    onDownload?: ((value: IFileValue) => any) | undefined;
+    onRetry?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,126 @@
+import type { Ref, 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",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export interface FileUploadItem {
+    file: File;
+    state: UploadState;
+    progress: number;
+    value?: IFileValue;
+    error?: string;
+    uploadLoader?: ReturnType<typeof useUploadLoader>;
+    percentRef?: Ref<number>;
+}
+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<{
+        file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        state: UploadState;
+        progress: number;
+        value?: {
+            url: string;
+            path?: string | undefined;
+            name?: string | undefined;
+            size?: number | undefined;
+            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;
+    }[], FileUploadItem[] | {
+        file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        state: UploadState;
+        progress: number;
+        value?: {
+            url: string;
+            path?: string | undefined;
+            name?: string | undefined;
+            size?: number | undefined;
+            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;
+    }[]>;
+    isEmpty: import("vue").ComputedRef<boolean>;
+    hasUploading: import("vue").ComputedRef<boolean>;
+    allSuccess: import("vue").ComputedRef<boolean>;
+    dropzone: import("@vueuse/core").UseDropZoneReturn;
+    handleOpenFile: () => void;
+    handleDeleteFile: (index: number) => void;
+    handleRetryUpload: (index: number) => void;
+    handlePreview: (fileValue: IFileValue) => void;
+};

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

@@ -0,0 +1,238 @@
+import { useDropZone, useFileDialog } from "@vueuse/core";
+import PreviewModal from "./PreviewModal.vue";
+import { computed, ref, useOverlay, watch } from "#imports";
+import { useUploadLoader } from "#core/composables/useUpload";
+import { useFileAllocate, 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);
+  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
+    };
+  };
+  const updateFileItem = (index, updates) => {
+    fileItems.value = fileItems.value.map(
+      (item, i) => i === index ? {
+        ...item,
+        ...updates
+      } : item
+    );
+  };
+  const setupUpload = (fileItem, index) => {
+    const {
+      percent,
+      onDownloadProgress,
+      onUploadProgress
+    } = useFileProgress();
+    const request = {
+      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 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)
+          };
+          updateFileItem(index, {
+            value: fileValue,
+            state: "success" /* SUCCESS */
+          });
+          updateFormValue();
+          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();
+        }
+      }
+    );
+    return uploadLoader;
+  };
+  const processFile = (file) => {
+    const validation = validateFile(file);
+    if (!validation.valid) {
+      setErrors(validation.error || "Invalid file");
+      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`);
+      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);
+    uploadLoader.run({
+      data: formData
+    });
+    emits("change", fileItems.value.map((item) => item.file));
+  };
+  const updateFormValue = () => {
+    const successfulFiles = fileItems.value.filter((item) => item.state === "success" /* SUCCESS */ && item.value).map((item) => item.value);
+    onChange(successfulFiles.length > 0 ? successfulFiles : void 0);
+  };
+  const handleFileDrop = (files) => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
+    files.forEach((file) => processFile(file));
+  };
+  const fileDialog = useFileDialog({
+    accept: acceptedFileTypes.value || "",
+    directory: false,
+    multiple: true
+  });
+  const dropzone = useDropZone(dropzoneRef, {
+    onDrop: handleFileDrop,
+    multiple: true,
+    preventDefaultForUnhandled: false
+  });
+  const isEmpty = computed(() => fileItems.value.length === 0);
+  const hasUploading = computed(
+    () => fileItems.value.some((item) => item.state === "uploading" /* UPLOADING */)
+  );
+  const allSuccess = computed(
+    () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === "success" /* SUCCESS */)
+  );
+  fileDialog.onChange((files) => {
+    if (files?.length) {
+      Array.from(files).forEach((file) => processFile(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`);
+      return;
+    }
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
+    fileDialog.open();
+  };
+  const handleDeleteFile = (index) => {
+    fileItems.value.splice(index, 1);
+    updateFormValue();
+    if (fileItems.value.length === 0) {
+      setErrors("");
+    }
+    emits("delete", index);
+  };
+  const handleRetryUpload = (index) => {
+    const fileItem = fileItems.value[index];
+    if (!fileItem) return;
+    updateFileItem(index, {
+      state: "uploading" /* UPLOADING */,
+      error: void 0,
+      progress: 0
+    });
+    const uploadLoader = setupUpload(fileItem, index);
+    const formData = new FormData();
+    formData.append(props.bodyKey, fileItem.file);
+    uploadLoader.run({
+      data: formData
+    });
+  };
+  const handlePreview = (fileValue) => {
+    previewModal.open({
+      value: fileValue
+    });
+  };
+  return {
+    // State
+    fileItems,
+    isEmpty,
+    hasUploading,
+    allSuccess,
+    // Upload utilities
+    dropzone,
+    // Handlers
+    handleOpenFile,
+    handleDeleteFile,
+    handleRetryUpload,
+    handlePreview
+  };
+};

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

@@ -2,6 +2,7 @@ import type { Component } from '@nuxt/schema';
 import type { FormContext } from 'vee-validate';
 import type { IUploadDropzoneField } from './InputUploadDropzone/types.js';
 import type { IUploadDropzoneAutoField } from './InputUploadDropzoneAuto/types.js';
+import type { IUploadDropzoneAutoMultipleField } from './InputUploadDropzoneAutoMultiple/types.js';
 import type { IDateTimeRangeField } from './InputDateTimeRange/date_range_time_field.types.js';
 import type { ITextField } from '#core/components/Form/InputText/types';
 import type { ISearchField } from '#core/components/Form/InputSearch/types';
@@ -75,7 +76,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | ISearchField | INumberField | ICurrencyField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | ISearchField | INumberField | ICurrencyField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/theme/uploadFileDropzone.d.ts

@@ -9,6 +9,7 @@ export declare const uploadFileDropzoneTheme: {
         actionDownloadIcon: string;
         actionDeleteIcon: string;
         actionRetryIcon: string;
+        errorIcon: string;
     };
     slots: {
         base: string;
@@ -38,6 +39,28 @@ export declare const uploadFileDropzoneTheme: {
         actionIconClass: string;
         actionDeleteIconClass: string;
         actionRetryBtnClass: string;
+        multipleFilesWrapper: string;
+        fileItemWrapper: string;
+        uploadingItemWrapper: string;
+        uploadingIconWrapper: string;
+        uploadingIconClass: string;
+        uploadingTextWrapper: string;
+        progressBarWrapper: string;
+        progressBarFill: string;
+        successItemWrapper: string;
+        successImgWrapper: string;
+        successImgClass: string;
+        successFileWrapper: string;
+        successFileClass: string;
+        successTextWrapper: string;
+        errorItemWrapper: string;
+        errorIconWrapper: string;
+        errorIconClass: string;
+        errorTextWrapper: string;
+        errorActionWrapper: string;
+        addMoreWrapper: string;
+        addMoreButton: string;
+        addMoreIcon: string;
     };
     variants: {
         dragover: {

package/dist/runtime/theme/uploadFileDropzone.js

@@ -8,7 +8,8 @@ export const uploadFileDropzoneTheme = {
     actionPreviewIcon: "ic:outline-remove-red-eye",
     actionDownloadIcon: "material-symbols:download",
     actionDeleteIcon: "material-symbols:delete",
-    actionRetryIcon: "stash:arrow-retry"
+    actionRetryIcon: "stash:arrow-retry",
+    errorIcon: "i-heroicons:exclamation-circle-solid"
   },
   slots: {
     base: "relative w-full text-base p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-accented",
@@ -28,7 +29,7 @@ export const uploadFileDropzoneTheme = {
     // Preview state
     onPreviewWrapper: "flex items-center space-x-4 rounded-lg w-full",
     onPreviewImgWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden bg-gray-100",
-    onPreviewImgClass: "w-full h-full object-cover",
+    onPreviewImgClass: "w-full h-full object-fit",
     onPreviewFileWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden",
     onPreviewFileClass: "size-8 text-gray-400 m-auto",
     onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
@@ -41,7 +42,34 @@ export const uploadFileDropzoneTheme = {
     actionWrapper: "flex items-center space-x-2",
     actionIconClass: "size-6 text-dimmed hover:text-dimmed-600 cursor-pointer transition-colors",
     actionDeleteIconClass: "size-6 text-(--ui-color-error-500) hover:text-(--ui-color-error-600) cursor-pointer transition-colors",
-    actionRetryBtnClass: "px-0"
+    actionRetryBtnClass: "px-0",
+    // Multiple files
+    multipleFilesWrapper: "flex flex-col gap-3 w-full mt-4",
+    fileItemWrapper: "w-full ring-1 bg-white ring-accented rounded-lg p-3",
+    // Uploading item
+    uploadingItemWrapper: "flex items-center space-x-4 w-full",
+    uploadingIconWrapper: "flex-shrink-0",
+    uploadingIconClass: "size-12 text-gray-400",
+    uploadingTextWrapper: "flex-1 min-w-0",
+    progressBarWrapper: "w-full bg-gray-200 rounded-full h-2 overflow-hidden",
+    progressBarFill: "bg-primary h-full transition-all duration-300",
+    // Success item
+    successItemWrapper: "flex items-center space-x-4 rounded-lg w-full",
+    successImgWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden bg-gray-100",
+    successImgClass: "w-full h-full object-fit",
+    successFileWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden",
+    successFileClass: "size-8 text-gray-400 m-auto",
+    successTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    // Error item
+    errorItemWrapper: "flex items-center space-x-4 w-full rounded-lg bg-(--ui-color-error-50) p-3",
+    errorIconWrapper: "flex-shrink-0",
+    errorIconClass: "size-12 text-(--ui-color-error-500)",
+    errorTextWrapper: "flex-1 min-w-0",
+    errorActionWrapper: "flex items-center space-x-2",
+    // Add more button
+    addMoreWrapper: "w-full mt-3 pt-3 border-t border-gray-200",
+    addMoreButton: "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm text-primary border border-primary rounded-lg hover:bg-primary-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+    addMoreIcon: "size-4"
   },
   variants: {
     dragover: {

package/package.json

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