@finema/core 2.12.3 → 2.13.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.12.3",
+  "version": "2.13.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.12.3";
+const version = "2.13.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/FlexDeck/Base.vue

@@ -40,7 +40,7 @@
     <div class="flex h-60 items-center justify-center">
       <Icon
         name="i-svg-spinners:180-ring-with-bg"
-        class="size-8 text-primary"
+        class="text-primary size-8"
       />
     </div>
   </slot>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/EmptyState.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="theme.placeholderWrapper()">
+    <Icon
+      :name="themeStatic.uploadIcon"
+      :class="theme.labelIcon()"
+    />
+    <div :class="theme.labelWrapper()">
+      <p
+        class="text-primary cursor-pointer font-bold"
+        @click="$emit('openFile')"
+      >
+        {{ selectFileLabel }}
+      </p>
+      <p>{{ selectFileSubLabel }}</p>
+    </div>
+    <p
+      v-if="placeholder"
+      :class="theme.placeholder()"
+    >
+      {{ placeholder }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useUiConfigStatic } from "#imports";
+defineProps({
+  theme: { type: null, required: true },
+  selectFileLabel: { type: String, required: true },
+  selectFileSubLabel: { type: String, required: true },
+  placeholder: { type: String, required: false }
+});
+defineEmits(["openFile"]);
+const themeStatic = useUiConfigStatic("uploadFileDropzone");
+</script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/EmptyState.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    theme: any;
+    selectFileLabel: string;
+    selectFileSubLabel: string;
+    placeholder?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openFile: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onOpenFile?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/FailedState.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :class="theme.onFailedWrapper()">
+    <div :class="theme.onFailedFailedImgWrapper()">
+      <Icon
+        :name="getFileIcon(selectedFile)"
+        :class="theme.onFailedFailedIconClass()"
+      />
+    </div>
+    <div :class="theme.onFailedTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ selectedFile.name }}
+        </h1>
+        <p class="text-error truncate font-light">
+          {{ uploadFailedLabel }}
+        </p>
+        <Button
+          variant="link"
+          :icon="themeStatic.actionRetryIcon"
+          :class="theme.actionRetryBtnClass()"
+          color="primary"
+          @click="$emit('retry')"
+        >
+          {{ retryLabel }}
+        </Button>
+      </div>
+      <Icon
+        :name="themeStatic.actionDeleteIcon"
+        :class="theme.actionDeleteIconClass()"
+        title="ลบไฟล์"
+        @click="$emit('delete')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isImage } from "#core/helpers/componentHelper";
+import { useUiConfigStatic } from "#imports";
+const props = defineProps({
+  theme: { type: null, required: true },
+  selectedFile: { type: null, required: true },
+  uploadFailedLabel: { type: String, required: true },
+  retryLabel: { type: String, required: true }
+});
+defineEmits(["retry", "delete"]);
+const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const getFileIcon = (file) => {
+  if (isImage(file)) {
+    return themeStatic.placeholderImgIcon;
+  }
+  return themeStatic.filePreviewIcon;
+};
+</script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/FailedState.vue.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    theme: any;
+    selectedFile: File;
+    uploadFailedLabel: string;
+    retryLabel: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/LoadingState.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :class="theme.onLoadingWrapper()">
+    <div :class="theme.onLoadingPlaceholderWrapper()">
+      <Icon
+        :name="getFileIcon(selectedFile)"
+        :class="theme.onLoadingPlaceholderIconClass()"
+      />
+    </div>
+    <div :class="theme.onLoadingTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ selectedFile.name }}
+        </h1>
+        <p class="truncate font-light text-gray-400">
+          {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
+        </p>
+      </div>
+      <div>
+        <Icon
+          :name="themeStatic.loadingIcon"
+          :class="theme.onLoadingLoadingIconClass()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isImage } from "#core/helpers/componentHelper";
+import { useUiConfigStatic } from "#imports";
+const props = defineProps({
+  theme: { type: null, required: true },
+  selectedFile: { type: null, required: true },
+  percent: { type: Number, required: true },
+  uploadingLabel: { type: String, required: true }
+});
+const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const getFileIcon = (file) => {
+  if (isImage(file)) {
+    return themeStatic.placeholderImgIcon;
+  }
+  return themeStatic.filePreviewIcon;
+};
+const getFileSize = (file) => {
+  const size = file.size;
+  const useMb = size > 1024 * 1024;
+  if (useMb) {
+    const sizeMb = (size / (1024 * 1024)).toFixed(2);
+    return `${sizeMb} MB`;
+  }
+  const sizeKb = (size / 1024).toFixed(2);
+  return `${sizeKb} KB`;
+};
+</script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/LoadingState.vue.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    theme: any;
+    selectedFile: File;
+    percent: number;
+    uploadingLabel: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/PreviewModal.vue

@@ -0,0 +1,35 @@
+<template>
+  <Modal
+    :close="{ onClick: () => emits('close', false) }"
+    :dismissible="false"
+    :title="value?.name"
+    :ui="{
+  content: 'max-w-3xl'
+}"
+  >
+    <template #body>
+      <div class="flex justify-center">
+        <img
+          v-if="value && isImageFromPath(value.path)"
+          :src="value.url"
+          alt="img-preview"
+          class="max-h-96 max-w-full rounded-lg"
+        />
+        <video
+          v-else-if="value && isVideoFromPath(value.path)"
+          :src="value.url"
+          controls
+          class="max-h-96 max-w-full"
+        />
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { isImageFromPath, isVideoFromPath } from "#core/helpers/componentHelper";
+defineProps({
+  value: { type: Object, required: false }
+});
+const emits = defineEmits(["close"]);
+</script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/PreviewModal.vue.d.ts

@@ -0,0 +1,10 @@
+import type { IFileValue } from '#core/components/Form/types';
+interface Props {
+    value?: IFileValue;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/SuccessState.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :class="theme.onPreviewWrapper()">
+    <div :class="theme.onPreviewPreviewImgWrapper()">
+      <div
+        v-if="isImageFromPath(value.path)"
+        class="size-full overflow-hidden"
+      >
+        <img
+          :src="value.url"
+          :class="theme.onPreviewPreviewImgClass()"
+          alt="img-preview"
+        />
+      </div>
+      <div v-else>
+        <Icon
+          :name="themeStatic.filePreviewIcon"
+          :class="theme.onPreviewPreviewFileClass()"
+        />
+      </div>
+    </div>
+    <div :class="theme.onPreviewTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ value.name }}
+        </h1>
+        <p class="truncate text-sm font-light text-gray-400">
+          {{ getFileSizeFromValue(value) }}
+        </p>
+      </div>
+      <div :class="theme.actionWrapper()">
+        <a
+          v-if="isPDFFromPath(value.path)"
+          :href="value.url"
+          target="_blank"
+          class="flex"
+        >
+          <Icon
+            :name="themeStatic.actionPreviewIcon"
+            :class="theme.actionIconClass()"
+            title="ดูตัวอย่าง"
+          />
+        </a>
+        <Icon
+          v-if="isImageFromPath(value.path) || isVideoFromPath(value.path)"
+          :name="themeStatic.actionPreviewIcon"
+          :class="theme.actionIconClass()"
+          title="ดูตัวอย่าง"
+          @click="$emit('preview')"
+        />
+        <Icon
+          :name="themeStatic.actionDownloadIcon"
+          :class="theme.actionIconClass()"
+          title="ดาวน์โหลดไฟล์"
+          @click="$emit('download')"
+        />
+        <Icon
+          v-if="!disabled && !readonly"
+          :name="themeStatic.actionDeleteIcon"
+          :class="theme.actionIconClass()"
+          title="ลบไฟล์"
+          @click="$emit('delete')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  isImageFromPath,
+  isPDFFromPath,
+  isVideoFromPath,
+  useFileSize
+} from "#core/helpers/componentHelper";
+import { useUiConfigStatic } from "#imports";
+defineProps({
+  theme: { type: null, required: true },
+  value: { type: Object, required: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false }
+});
+defineEmits(["preview", "download", "delete"]);
+const themeStatic = useUiConfigStatic("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/InputUploadDropzoneAuto/SuccessState.vue.d.ts

@@ -0,0 +1,17 @@
+import type { IFileValue } from '#core/components/Form/types';
+interface Props {
+    theme: any;
+    value: IFileValue;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    preview: () => any;
+    download: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onPreview?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,60 +1,83 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropZoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <div
-          v-if="!selectedFile && !value"
-          :class="[theme.placeholderWrapper()]"
-        >
-          <Icon
-            :name="useUiConfigStatic('uploadFileDropzone').uploadIcon"
-            :class="[theme.labelIcon()]"
-          />
-          <div :class="[theme.labelWrapper()]">
-            <p
-              class="text-primary bg-primary-50 cursor-pointer"
-              @click="fileDialog.open"
-            >
-              {{ selectFileLabel }}
-            </p>
-            <p>{{ selectFileSubLabel }}</p>
-          </div>
-          <p
-            v-if="placeholder"
-            :class="theme.placeholder()"
-          >
-            {{ placeholder }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Loading State -->
+        <LoadingState
+          v-if="uploadState.isUploading.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :percent="uploadState.percent.value"
+          :uploading-label="uploadingLabel"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+
+        <!-- Failed State -->
+        <FailedState
+          v-if="uploadState.isError.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :upload-failed-label="uploadFailedLabel"
+          :retry-label="retryLabel"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import { computed, ref, useTemplateRef } from "vue";
+import EmptyState from "./EmptyState.vue";
+import LoadingState from "./LoadingState.vue";
+import SuccessState from "./SuccessState.vue";
+import FailedState from "./FailedState.vue";
+import { useUploadState } from "./useUploadState";
+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, useUiConfigStatic } from "#core/composables/useConfig";
-import { useFileAllocate, useFileProgress, useFileSize } from "#core/helpers/componentHelper";
+import { useUiConfig } from "#core/composables/useConfig";
+import { downloadFileFromURL } from "#core/helpers/componentHelper";
 const props = defineProps({
   requestOptions: { type: Object, required: true },
   uploadPathURL: { type: String, 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 },
-  accept: { type: [Array, 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" },
+  accept: { type: [Array, String], required: false },
   maxSize: { 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 },
@@ -77,38 +100,30 @@ const {
   setErrors,
   value
 } = useFieldHOC(props);
-const dropZoneRef = useTemplateRef("dropZoneRef");
-const theme = computed(() => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
-  dragover: dropzone.isOverDropZone.value
-}));
-const fileDialog = useFileDialog({
-  accept: typeof props.accept === "string" ? props.accept : props.accept?.join(","),
-  // Set to accept only image files
-  directory: false
-  // Select directories instead of files if set true
-});
-const selectedFile = ref();
-const isPreviewOpen = ref(false);
-const {
-  onUploadProgress,
-  onDownloadProgress,
-  percent
-} = useFileProgress();
-const fileAllocate = useFileAllocate(selectedFile, props);
-const fileAllocateFromPath = computed(() => useFileSize(value.value?.size));
-fileDialog.onChange((files) => {
-  console.log("Selected files:", files);
-});
-const onDrop = (files) => {
-  console.log("Selected files drop:", files);
+const acceptedFileTypes = computed(
+  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
+);
+const dropzoneRef = useTemplateRef("dropzoneRef");
+const uploadState = useUploadState(
+  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: uploadState.upload.status.value.isError
+  })
+);
+const handleDownloadFile = () => {
+  if (value.value?.url && value.value?.name) {
+    downloadFileFromURL(value.value.url, value.value.name);
+  }
 };
-const dropzone = useDropZone(dropZoneRef, {
-  onDrop,
-  // specify the types of data to be received.
-  dataTypes: typeof props.accept === "string" ? [props.accept] : props.accept,
-  // control multi-file drop
-  multiple: false,
-  // whether to prevent default behavior for unhandled events
-  preventDefaultForUnhandled: false
-});
 </script>

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

@@ -1,19 +1,23 @@
 import type { IUploadDropzoneAutoProps } from './types.js';
+import type { IFileValue } from '#core/components/Form/types';
 declare const _default: import("vue").DefineComponent<IUploadDropzoneAutoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    success: (...args: any[]) => void;
-    delete: (...args: any[]) => void;
-    change: (...args: any[]) => void;
+    success: (res: IFileValue) => any;
+    delete: () => any;
+    change: (value: File | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoProps> & Readonly<{
-    onSuccess?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
+    onSuccess?: ((res: IFileValue) => any) | undefined;
+    onDelete?: (() => 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;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -5,16 +5,18 @@ export interface IUploadDropzoneAutoProps extends IFieldProps {
         baseURL: string;
     };
     uploadPathURL?: string;
+    bodyKey?: string;
+    responseURL?: string;
+    responsePath?: string;
+    responseName?: string;
+    responseSize?: string;
+    accept?: string[] | string;
+    maxSize?: number;
     selectFileLabel?: string;
     selectFileSubLabel?: string;
     uploadingLabel?: string;
     uploadFailedLabel?: string;
     retryLabel?: string;
-    accept?: string[] | string;
-    bodyKey?: string;
-    responseURL?: string;
-    responsePath?: string;
-    maxSize?: number;
 }
 export type IUploadDropzoneAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO, IUploadDropzoneAutoProps, {
     change: (value: File | undefined) => void;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/useUploadState.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateRef } from 'vue';
+import type { IUploadDropzoneAutoProps } from './types.js';
+import type { IFileValue } from '#core/components/Form/types';
+export declare enum UploadState {
+    EMPTY = "empty",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export declare const useUploadState: (props: IUploadDropzoneAutoProps, emits: any, onChange: (value: IFileValue | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+    currentState: import("vue").ComputedRef<UploadState>;
+    isEmpty: import("vue").ComputedRef<boolean>;
+    isUploading: import("vue").ComputedRef<boolean>;
+    isSuccess: import("vue").ComputedRef<boolean>;
+    isError: import("vue").ComputedRef<boolean>;
+    selectedFile: import("vue").Ref<File | undefined, File | undefined>;
+    upload: import("../../../helpers/apiObjectHelper.js").IUseObjectLoader<any, any, Record<string, any>>;
+    dropzone: import("@vueuse/core").UseDropZoneReturn;
+    percent: import("vue").Ref<number, number>;
+    handleInputChange: (event: Event) => void;
+    handleOpenFile: () => void;
+    handleDeleteFile: () => void;
+    handleRetryUpload: () => void;
+    handlePreview: () => void;
+};

package/dist/runtime/components/Form/InputUploadDropzoneAuto/useUploadState.js

@@ -0,0 +1,187 @@
+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";
+const overlay = useOverlay();
+const previewModal = overlay.create(PreviewModal);
+export var UploadState = /* @__PURE__ */ ((UploadState2) => {
+  UploadState2["EMPTY"] = "empty";
+  UploadState2["UPLOADING"] = "uploading";
+  UploadState2["SUCCESS"] = "success";
+  UploadState2["ERROR"] = "error";
+  return UploadState2;
+})(UploadState || {});
+export const useUploadState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
+  const selectedFile = ref();
+  const fileAllocate = useFileAllocate(selectedFile, props);
+  const {
+    percent,
+    onDownloadProgress,
+    onUploadProgress
+  } = useFileProgress();
+  const request = {
+    requestOptions: {
+      ...props.requestOptions,
+      onDownloadProgress,
+      onUploadProgress
+    },
+    pathURL: props.uploadPathURL
+  };
+  const upload = useUploadLoader(request);
+  const validateFile = (file) => {
+    const acceptedTypes = fileAllocate.acceptFile.value;
+    if (acceptedTypes) {
+      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
+      const fileExtension = file.name.toLowerCase().split(".").pop();
+      const isValidFileType = acceptedTypesList.some((acceptedType) => {
+        if (acceptedType.startsWith(".")) {
+          const extension = acceptedType.slice(1).toLowerCase();
+          return fileExtension === extension;
+        } else if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
+          return fileExtension === acceptedType.toLowerCase();
+        }
+        if (acceptedType.endsWith("/*")) {
+          const baseType = acceptedType.slice(0, -2);
+          return file.type.startsWith(baseType + "/");
+        }
+        return file.type === acceptedType;
+      });
+      if (!isValidFileType) {
+        setErrors("\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(", ") + ")");
+        return false;
+      }
+    }
+    const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
+    if (file.size > maxSizeBytes) {
+      if (fileAllocate.isAcceptFileUseMb.value) {
+        setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeMb.value} MB`);
+      } else {
+        setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeKb.value} KB`);
+      }
+      return false;
+    }
+    setErrors("");
+    return true;
+  };
+  const processFile = (file) => {
+    if (!validateFile(file)) return;
+    selectedFile.value = file;
+    emits("change", file);
+    const formData = new FormData();
+    formData.append(props.bodyKey || "file", file);
+    upload.run({
+      data: formData
+    });
+  };
+  const handleFileDrop = (files) => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length || !isEmpty.value) return;
+    const file = files[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+  const fileDialog = useFileDialog({
+    accept: acceptedFileTypes.value || "",
+    directory: false,
+    multiple: false
+  });
+  const dropzone = useDropZone(dropzoneRef, {
+    onDrop: handleFileDrop,
+    // dataTypes: typeof props.accept === 'string' ? [props.accept] : props.accept,
+    multiple: false,
+    preventDefaultForUnhandled: false
+  });
+  const currentState = computed(() => {
+    if (value.value) return "success" /* SUCCESS */;
+    if (selectedFile.value && upload.status.value.isLoading) return "uploading" /* UPLOADING */;
+    if (selectedFile.value && upload.status.value.isError) return "error" /* ERROR */;
+    return "empty" /* EMPTY */;
+  });
+  const isEmpty = computed(() => currentState.value === "empty" /* EMPTY */);
+  const isUploading = computed(() => currentState.value === "uploading" /* UPLOADING */);
+  const isSuccess = computed(() => currentState.value === "success" /* SUCCESS */);
+  const isError = computed(() => currentState.value === "error" /* ERROR */);
+  const handleInputChange = (event) => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
+    const file = event.target.files?.[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+  const handleOpenFile = () => {
+    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
+    fileDialog.open();
+  };
+  const handleDeleteFile = () => {
+    fileDialog.reset();
+    upload.clear();
+    selectedFile.value = void 0;
+    onChange(void 0);
+    emits("delete");
+  };
+  const handleRetryUpload = () => {
+    if (selectedFile.value) {
+      const formData = new FormData();
+      formData.append(props.bodyKey || "file", selectedFile.value);
+      upload.run(formData);
+    }
+  };
+  const handlePreview = () => {
+    previewModal.open({
+      value: value.value
+    });
+  };
+  watch(
+    () => fileDialog.files.value,
+    (files) => {
+      if (files?.length) {
+        processFile(files[0]);
+      }
+    }
+  );
+  watch(
+    () => upload.status.value.isSuccess,
+    (isSuccess2) => {
+      if (isSuccess2 && upload.data.value) {
+        const fileValue = {
+          url: _get(upload.data.value, props.responseURL),
+          path: _get(upload.data.value, props.responsePath),
+          name: _get(upload.data.value, props.responseName) || selectedFile.value?.name,
+          size: Number(_get(upload.data.value, props.responseSize) || selectedFile.value?.size)
+        };
+        value.value = fileValue;
+        emits("success", fileValue);
+      }
+    }
+  );
+  watch(
+    () => upload.status.value.isError,
+    (isError2) => {
+      if (isError2) {
+        setErrors(StringHelper.getError(upload.status.value.errorData));
+      }
+    }
+  );
+  return {
+    // State
+    currentState,
+    isEmpty,
+    isUploading,
+    isSuccess,
+    isError,
+    selectedFile,
+    // Upload utilities
+    upload,
+    dropzone,
+    percent,
+    // Handlers
+    handleInputChange,
+    handleOpenFile,
+    handleDeleteFile,
+    handleRetryUpload,
+    handlePreview
+  };
+};

package/dist/runtime/components/Image.vue

@@ -20,7 +20,7 @@
           <p class="text-error-400">
             <Icon
               name="i-heroicons:exclamation-circle-solid"
-              class="size-8 text-error-400"
+              class="text-error-400 size-8"
             />
           </p>
         </div>

package/dist/runtime/composables/useUpload.js

@@ -3,14 +3,12 @@ export const useUploadLoader = (request) => {
   return useObjectLoader({
     method: "post",
     url: request.pathURL || "",
-    getRequestOptions: (_data, opts) => ({
+    getRequestOptions: () => ({
       ...request.requestOptions,
       headers: {
         ...request.requestOptions.headers,
         "Content-Type": "multipart/form-data"
-      },
-      onDownloadProgress: opts.data?.onDownloadProgress,
-      onUploadProgress: opts.data?.onUploadProgress
+      }
     })
   });
 };

package/dist/runtime/helpers/componentHelper.d.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import type { AxiosProgressEvent } from 'axios';
 export declare const checkMaxSize: (file: File, acceptFileSize?: number) => boolean;
 export declare const checkFileType: (file: File, acceptFileType: string | string[]) => boolean;
 export declare const generateURL: (file: File) => string;
@@ -25,7 +26,7 @@ export declare const useFileSize: (size?: number) => {
 };
 export declare const useFileProgress: () => {
     percent: Ref<number, number>;
-    onUploadProgress: (progressEvent: ProgressEvent) => void;
-    onDownloadProgress: (progressEvent: ProgressEvent) => void;
+    onUploadProgress: (progressEvent: AxiosProgressEvent) => void;
+    onDownloadProgress: (progressEvent: AxiosProgressEvent) => void;
 };
 export declare const downloadFileFromURL: (url: string, filename?: string) => Promise<void>;

package/dist/runtime/helpers/componentHelper.js

@@ -86,6 +86,10 @@ export const useFileSize = (size = 0) => {
 export const useFileProgress = () => {
   const percent = ref(0);
   const onUploadProgress = (progressEvent) => {
+    if (!progressEvent.total || progressEvent.total === 0) {
+      percent.value = 100;
+      return;
+    }
     percent.value = Number.parseFloat(
       StringHelper.withFixed(
         (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.8
@@ -93,13 +97,13 @@ export const useFileProgress = () => {
     );
   };
   const onDownloadProgress = (progressEvent) => {
-    if (progressEvent.total === 0) {
+    if (!progressEvent.total || progressEvent.total === 0) {
       percent.value = 100;
       return;
     }
     percent.value = Number.parseFloat(
       StringHelper.withFixed(
-        (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.2 + 80
+        Math.floor(progressEvent.loaded * 100 / progressEvent.total) * 0.2 + 80
       )
     );
   };

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

@@ -13,6 +13,28 @@ export declare const uploadFileDropzoneTheme: {
         failedImgIcon: string;
         loadingIcon: string;
         labelIcon: string;
+        onLoadingWrapper: string;
+        onLoadingPlaceholderWrapper: string;
+        onLoadingPlaceholderIconClass: string;
+        onLoadingTextWrapper: string;
+        onLoadingLoadingIconClass: string;
+        onPreviewWrapper: string;
+        onPreviewPreviewImgWrapper: string;
+        onPreviewPreviewImgClass: string;
+        onPreviewPreviewFileClass: string;
+        onPreviewTextWrapper: string;
+        onFailedWrapper: string;
+        onFailedFailedImgWrapper: string;
+        onFailedFailedIconClass: string;
+        onFailedTextWrapper: string;
+        actionWrapper: string;
+        actionIconClass: string;
+        actionDeleteIconClass: string;
+        actionPreviewIcon: string;
+        actionDownloadIcon: string;
+        actionDeleteIcon: string;
+        actionRetryIcon: string;
+        actionRetryBtnClass: string;
     };
     variants: {
         dragover: {
@@ -20,5 +42,15 @@ export declare const uploadFileDropzoneTheme: {
                 base: string;
             };
         };
+        disabled: {
+            true: {
+                base: string;
+            };
+        };
+        failed: {
+            true: {
+                base: string;
+            };
+        };
     };
 };

package/dist/runtime/theme/uploadFileDropzone.js

@@ -1,23 +1,59 @@
 export const uploadFileDropzoneTheme = {
   slots: {
-    base: "relative w-full p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
+    base: "relative w-full text-base p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
     wrapper: "flex flex-col items-center w-full",
     disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
-    failed: "border-danger",
+    failed: "border-error",
     placeholderWrapper: "py-4 flex flex-col items-center justify-center",
     placeholder: "text-gray-400 text-center font-light text-sm truncate",
     labelWrapper: "flex items-center space-x-2 text-gray-400 text-center",
     filePreviewIcon: "i-heroicons:document-text-solid",
-    uploadIcon: "i-ph:cloud-arrow-up",
+    uploadIcon: "ri:upload-cloud-2-line",
     placeholderImgIcon: "i-material-symbols:imagesmode-outline",
     failedImgIcon: "i-material-symbols:imagesmode-outline",
     loadingIcon: "i-svg-spinners:180-ring-with-bg",
-    labelIcon: "w-6 h-6 text-gray-400 text-center mb-4"
+    labelIcon: "size-6 text-gray-400 text-center mb-3",
+    // Loading state
+    onLoadingWrapper: "flex items-center space-x-4 w-full",
+    onLoadingPlaceholderWrapper: "flex-shrink-0",
+    onLoadingPlaceholderIconClass: "size-12 text-gray-400",
+    onLoadingTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    onLoadingLoadingIconClass: "size-10 text-primary animate-spin",
+    // Preview state
+    onPreviewWrapper: "flex items-center space-x-4 rounded-lg w-full",
+    onPreviewPreviewImgWrapper: "flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-100",
+    onPreviewPreviewImgClass: "w-full h-full object-cover",
+    onPreviewPreviewFileClass: "size-8 text-gray-400 m-auto mt-4",
+    onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    // Failed state
+    onFailedWrapper: "flex items-start space-x-4 w-full rounded-lg",
+    onFailedFailedImgWrapper: "flex-shrink-0",
+    onFailedFailedIconClass: "size-12",
+    onFailedTextWrapper: "flex-1 min-w-0 flex items-start justify-between",
+    // Actions
+    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",
+    actionPreviewIcon: "ic:outline-remove-red-eye",
+    actionDownloadIcon: "material-symbols:download",
+    actionDeleteIcon: "material-symbols:delete",
+    actionRetryIcon: "stash:arrow-retry",
+    actionRetryBtnClass: "px-0"
   },
   variants: {
     dragover: {
       true: {
-        base: "ring-primary bg-primary-50"
+        base: "ring-primary bg-(--ui-color-primary-50)"
+      }
+    },
+    disabled: {
+      true: {
+        base: "bg-gray-100 border-none grayscale cursor-not-allowed"
+      }
+    },
+    failed: {
+      true: {
+        base: "ring-(--ui-color-error-500) bg-(--ui-color-error-50)"
       }
     }
   }

package/package.json

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