@finema/core 1.4.97 → 1.4.99

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.97",
+  "version": "1.4.99",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.97";
+const version = "1.4.99";
 
 const colors = {
   black: "#20243E",
@@ -18,7 +18,9 @@ const colors = {
     DEFAULT: "#9095A6",
     disabled: "#C1C4D0",
     border: "#E2E4EA",
-    fill: "#F4F5FA"
+    fill: "#F4F5FA",
+    50: "#E0E0E0",
+    600: "#616161"
   },
   secondary: {
     DEFAULT: "#EE8B36",
@@ -38,7 +40,8 @@ const colors = {
     50: "#EBF6FF",
     100: "#EBF6FF",
     400: "#0D8CEE",
-    500: "#0D8CEE"
+    500: "#0D8CEE",
+    600: "#0D8CEE"
   },
   danger: {
     DEFAULT: "#F25555",

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

@@ -54,9 +54,9 @@
               <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
               <p class="truncate font-light text-gray-400">
                 {{
-                  fileAllocate.isSelectedFileUseMb
-                    ? `${fileAllocate.selectedFileSizeMb} MB`
-                    : `${fileAllocate.selectedFileSizeKb} KB`
+                  fileAllocate.isSelectedFileUseMb.value
+                    ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                    : `${fileAllocate.selectedFileSizeKb.value} KB`
                 }}
               </p>
             </div>
@@ -96,8 +96,8 @@ import {
   generateURL,
   checkMaxSize,
   checkFileType,
-  getFileAllocate,
   downloadFileFromURL,
+  useFileAllocate,
 } from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
@@ -122,11 +122,8 @@ const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const fileAllocate = computed(() =>
-  getFileAllocate(props.maxSize ?? 0, selectedFile.value?.size ?? 0)
-)
-
 const selectedFile = computed(() => value?.value)
+const fileAllocate = useFileAllocate(selectedFile, props)
 
 const onDrop = (files: File[] | null) => {
   if (props.isDisabled || files?.length === 0 || !files) return
@@ -182,16 +179,16 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
 
   if (!maxSize) {
-    if (fileAllocate.value.isAcceptFileUseMb) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
       setErrors(
-        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.value.acceptFileSizeMb })
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
       )
     } else {
       setErrors(
-        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.value.acceptFileSizeKb })
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
       )
     }
 

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

@@ -50,9 +50,9 @@
               <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
               <p class="truncate font-light text-gray-400">
                 {{
-                  fileAllocate.isSelectedFileUseMb
-                    ? `${fileAllocate.selectedFileSizeMb} MB`
-                    : `${fileAllocate.selectedFileSizeKb} KB`
+                  fileAllocate.isSelectedFileUseMb.value
+                    ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                    : `${fileAllocate.selectedFileSizeKb.value} KB`
                 }}
                 - {{ percent }}% {{ uploadingLabel ?? 'กำลังอัพโหลด...' }}
               </p>
@@ -88,9 +88,9 @@
               <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
               <p class="truncate text-sm font-light text-gray-400">
                 {{
-                  fileAllocate.isSelectedFileUseMb
-                    ? `${fileAllocate.selectedFileSizeMb} MB`
-                    : `${fileAllocate.selectedFileSizeKb} KB`
+                  fileAllocate.isSelectedFileUseMb.value
+                    ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                    : `${fileAllocate.selectedFileSizeKb.value} KB`
                 }}
               </p>
             </div>
@@ -170,8 +170,9 @@ import {
   checkMaxSize,
   checkFileType,
   isImage,
-  getFileAllocate,
   downloadFileFromURL,
+  useFileAllocate,
+  useFileProgress,
 } from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
@@ -215,16 +216,14 @@ const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
 const fileInputRef = ref<HTMLInputElement>()
 const dropzoneRef = ref<HTMLDivElement>()
 const selectedFile = ref<File | undefined>()
-const percent = ref<number | string>(0)
 const isPreviewOpen = ref<boolean>(false)
 
 const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const fileAllocate = computed(() =>
-  getFileAllocate(props.maxSize ?? 0, selectedFile.value?.size ?? 0)
-)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const fileAllocate = useFileAllocate(selectedFile, props)
 
 const onDrop = (files: File[] | null) => {
   if (props.isDisabled || files?.length === 0 || !files) return
@@ -286,16 +285,16 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
 
   if (!maxSize) {
-    if (fileAllocate.value.isAcceptFileUseMb) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
       setErrors(
-        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.value.acceptFileSizeMb })
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
       )
     } else {
       setErrors(
-        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.value.acceptFileSizeKb })
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
       )
     }
 
@@ -320,24 +319,6 @@ const handleRetryUpload = () => {
   }
 }
 
-const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
-  )
-}
-
-const onDownloadProgress = (progressEvent: ProgressEvent) => {
-  if (progressEvent.total === 0) {
-    percent.value = 100
-
-    return
-  }
-
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
-  )
-}
-
 useWatchTrue(
   () => upload.status.value.isSuccess,
   () => {

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

@@ -25,9 +25,9 @@
           <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
           <p class="truncate font-light text-gray-400">
             {{
-              fileAllocate.isSelectedFileUseMb
-                ? `${fileAllocate.selectedFileSizeMb} MB`
-                : `${fileAllocate.selectedFileSizeKb} KB`
+              fileAllocate.isSelectedFileUseMb.value
+                ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                : `${fileAllocate.selectedFileSizeKb.value} KB`
             }}
             - {{ percent }}% {{ uploadingLabel }}
           </p>
@@ -65,9 +65,9 @@
           </h1>
           <p class="truncate text-sm font-light text-gray-400">
             {{
-              fileAllocate.isSelectedFileUseMb
-                ? `${fileAllocate.selectedFileSizeMb} MB`
-                : `${fileAllocate.selectedFileSizeKb} KB`
+              fileAllocate.isSelectedFileUseMb.value
+                ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                : `${fileAllocate.selectedFileSizeKb.value} KB`
             }}
           </p>
         </div>
@@ -148,9 +148,10 @@ import {
   checkFileType,
   checkMaxSize,
   downloadFileFromURL,
-  getFileAllocate,
   generateURL,
   isImage,
+  useFileAllocate,
+  useFileProgress,
 } from '#core/helpers/componentHelper'
 import { type uploadFileDropzone } from '#core/ui.config'
 import type { IUploadDropzoneAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types'
@@ -159,6 +160,7 @@ import {
   type IUploadRequest,
   onMounted,
   ref,
+  toRef,
   StringHelper,
   useUploadLoader,
   useWatchTrue,
@@ -179,7 +181,6 @@ const request: IUploadRequest = {
 }
 
 const isPreviewOpen = ref<boolean>(false)
-const percent = ref<number | string>(0)
 const upload = useUploadLoader(request)
 const errMsg = ref<string>('')
 
@@ -187,9 +188,8 @@ const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const fileAllocate = computed(() =>
-  getFileAllocate(props.maxSize ?? 0, props.selectedFile?.size ?? 0)
-)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const fileAllocate = useFileAllocate(toRef(props.selectedFile), props)
 
 const handleDeleteFile = () => {
   emits('delete')
@@ -206,24 +206,6 @@ const handleDownloadFile = () => {
   downloadFileFromURL(URL.createObjectURL(props.selectedFile), props.selectedFile.name)
 }
 
-const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
-  )
-}
-
-const onDownloadProgress = (progressEvent: ProgressEvent) => {
-  if (progressEvent.total === 0) {
-    percent.value = 100
-
-    return
-  }
-
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
-  )
-}
-
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
@@ -235,16 +217,16 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
 
   if (!maxSize) {
-    if (fileAllocate.value.isAcceptFileUseMb) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
       errMsg.value = i18next.t('custom:invalid_file_size_mb', {
-        size: fileAllocate.value.acceptFileSizeMb,
+        size: fileAllocate.acceptFileSizeMb.value,
       })
     } else {
       errMsg.value = i18next.t('custom:invalid_file_size_kb', {
-        size: fileAllocate.value.acceptFileSizeKb,
+        size: fileAllocate.acceptFileSizeKb.value,
       })
     }
 

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

@@ -37,10 +37,10 @@
       </div>
       <Item
         v-for="(file, index) in selectedFiles"
-        :key="file.name + index"
+        :key="file.key"
         v-bind="$props"
         :ui="ui"
-        :selected-file="file"
+        :selected-file="file.file"
         @success="handleSuccess(index, $event)"
         @delete="handleDeleteFile(index)"
         @error="handleError(index, $event)"
@@ -54,12 +54,11 @@ import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneAutoMultipleProps } from './types'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
-import { _get, computed, ref, toRef, useUI, useUiConfig } from '#imports'
+import { _get, computed, ref, toRef, useUI, useUiConfig, StringHelper } from '#imports'
 import { uploadFileDropzone } from '#core/ui.config'
 import Item from './Item.vue'
 
 const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
-
 const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {
   bodyKey: 'file',
   responseKey: 'url',
@@ -71,13 +70,12 @@ const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {
 })
 
 const emits = defineEmits(['change', 'success', 'delete'])
-const selectedFiles = ref<File[]>([])
-
+const selectedFiles = ref<Array<{ file: File; key: string }>>([])
 const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File[]>(props)
 
 const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
 
-const fileInputRef = ref<HTMLInputElement>()
+const fileInputRef = ref<HTMLInputElement | null>()
 const dropzoneRef = ref<HTMLDivElement>()
 
 const acceptFile = computed(() =>
@@ -88,7 +86,14 @@ const onDrop = (files: File[] | null) => {
   if (props.isDisabled || files?.length === 0 || !files) return
 
   for (const file of files) {
-    selectedFiles.value = [file, ...selectedFiles.value]
+    selectedFiles.value = [
+      {
+        file,
+        key: StringHelper.genString(),
+      },
+      ...selectedFiles.value,
+    ]
+
     emits('change', value.value)
   }
 }
@@ -101,9 +106,20 @@ const handleChange = (e: Event) => {
   if (props.isDisabled) return
 
   for (const file of (e.target as HTMLInputElement).files ?? []) {
-    selectedFiles.value = [file, ...selectedFiles.value]
+    selectedFiles.value = [
+      {
+        file,
+        key: StringHelper.genString(),
+      },
+      ...selectedFiles.value,
+    ]
+
     emits('change', value.value)
   }
+
+  fileInputRef.value!.type = 'text'
+  fileInputRef.value!.type = 'file'
+  fileInputRef.value = null
 }
 
 const handleOpenFile = () => {

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

@@ -37,15 +37,14 @@
           <div v-else :class="ui.imageItemWrapper">
             <Item
               v-for="(file, index) in selectedFiles"
-              :key="file.name + index"
+              :key="file.key"
               v-bind="$props"
               :ui="ui"
-              :selected-file="file"
+              :selected-file="file.file"
               @success="handleSuccess(index, $event)"
               @delete="handleDeleteFile(index)"
               @error="handleError(index, $event)"
             />
-
             <Item v-bind="$props" is-adding-btn :ui="ui" @add="handleOpenFile" />
           </div>
         </div>
@@ -59,7 +58,7 @@ import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneImageAutoMultipleProps } from './types'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
-import { _get, computed, ref, toRef, useUI, useUiConfig } from '#imports'
+import { _get, computed, ref, toRef, StringHelper, useUI, useUiConfig } from '#imports'
 import { uploadFileDropzoneImage } from '#core/ui.config'
 import Item from './item.vue'
 
@@ -78,13 +77,13 @@ const props = withDefaults(defineProps<IUploadDropzoneImageAutoMultipleProps>(),
 })
 
 const emits = defineEmits(['change', 'success', 'delete'])
-const selectedFiles = ref<File[]>([])
+const selectedFiles = ref<Array<{ file: File; key: string }>>([])
 
 const { wrapperProps, handleChange: onChange, value } = useFieldHOC<File[]>(props)
 
 const { ui } = useUI('uploadFileDropzoneImage', toRef(props, 'ui'), config)
 
-const fileInputRef = ref<HTMLInputElement>()
+const fileInputRef = ref<HTMLInputElement | null>()
 const dropzoneRef = ref<HTMLDivElement>()
 
 const acceptFile = computed(() =>
@@ -95,7 +94,13 @@ const onDrop = (files: File[] | null) => {
   if (props.isDisabled || files?.length === 0 || !files) return
 
   for (const file of files) {
-    selectedFiles.value = [...selectedFiles.value, file]
+    selectedFiles.value = [
+      ...selectedFiles.value,
+      {
+        file,
+        key: StringHelper.genString(),
+      },
+    ]
 
     emits('change', value.value)
   }
@@ -109,9 +114,20 @@ const handleChange = (e: Event) => {
   if (props.isDisabled) return
 
   for (const file of (e.target as HTMLInputElement).files ?? []) {
-    selectedFiles.value = [...selectedFiles.value, file]
+    selectedFiles.value = [
+      ...selectedFiles.value,
+      {
+        file,
+        key: StringHelper.genString(),
+      },
+    ]
+
     emits('change', value.value)
   }
+
+  fileInputRef.value!.type = 'text'
+  fileInputRef.value!.type = 'file'
+  fileInputRef.value = null
 }
 
 const handleOpenFile = () => {

package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/item.vue

@@ -73,7 +73,8 @@ import {
   checkFileType,
   checkMaxSize,
   generateURL,
-  getFileAllocate,
+  useFileAllocate,
+  useFileProgress,
 } from '#core/helpers/componentHelper'
 import { type uploadFileDropzoneImage } from '#core/ui.config'
 import type { IUploadDropzoneImageAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types'
@@ -82,7 +83,7 @@ import {
   type IUploadRequest,
   onMounted,
   ref,
-  StringHelper,
+  toRef,
   useUploadLoader,
   useWatchTrue,
 } from '#imports'
@@ -103,7 +104,6 @@ const request: IUploadRequest = {
 }
 
 const isPreviewOpen = ref<boolean>(false)
-const percent = ref<number | string>(0)
 const upload = useUploadLoader(request)
 const errMsg = ref<string>('')
 
@@ -111,32 +111,13 @@ const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const fileAllocate = computed(() =>
-  getFileAllocate(props.maxSize ?? 0, props.selectedFile?.size ?? 0)
-)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const fileAllocate = useFileAllocate(toRef(props.selectedFile), props)
 
 const handleDeleteFile = () => {
   emits('delete')
 }
 
-const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
-  )
-}
-
-const onDownloadProgress = (progressEvent: ProgressEvent) => {
-  if (progressEvent.total === 0) {
-    percent.value = 100
-
-    return
-  }
-
-  percent.value = StringHelper.withFixed(
-    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
-  )
-}
-
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
@@ -148,16 +129,16 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
 
   if (!maxSize) {
-    if (fileAllocate.value.isAcceptFileUseMb) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
       errMsg.value = i18next.t('custom:invalid_file_size_mb', {
-        size: fileAllocate.value.acceptFileSizeMb,
+        size: fileAllocate.acceptFileSizeMb.value,
       })
     } else {
       errMsg.value = i18next.t('custom:invalid_file_size_kb', {
-        size: fileAllocate.value.acceptFileSizeKb,
+        size: fileAllocate.acceptFileSizeKb.value,
       })
     }
 

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

@@ -32,6 +32,7 @@ import { useUiConfig } from '#core/composables/useConfig'
 import { uploadFileInputClassicAuto } from '#core/ui.config'
 import { computed, ref, toRef, useUI } from '#imports'
 import i18next from 'i18next'
+import { checkMaxSize } from '#core/helpers/componentHelper'
 
 const config = useUiConfig<typeof uploadFileInputClassicAuto>(
   uploadFileInputClassicAuto,
@@ -63,18 +64,10 @@ const handleOpenFile = () => {
 
 const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
 
-const checkMaxSize = (file: File): boolean => {
-  if (acceptFileSizeKb.value) {
-    return file.size / 1000 <= acceptFileSizeKb.value
-  }
-
-  return true
-}
-
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
-  const maxSize = checkMaxSize(file)
+  const maxSize = checkMaxSize(file, props.maxSize)
 
   if (!maxSize) {
     if (isAcceptFileUseMb.value) {

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

@@ -6,7 +6,7 @@
         type="file"
         class="hidden"
         :name="name"
-        :accept="acceptFile"
+        :accept="fileAllocate.acceptFile.value"
         :disabled="isDisabled"
         @change="handleChange"
       />
@@ -17,7 +17,11 @@
             {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
           </p>
           <Badge v-if="selectedFile" size="xs" variant="outline">
-            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
+            {{
+              fileAllocate.isSelectedFileUseMb.value
+                ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                : `${fileAllocate.selectedFileSizeKb.value} KB`
+            }}
           </Badge>
         </div>
         <div v-if="selectedFile">
@@ -44,22 +48,14 @@
 </template>
 
 <script lang="tsx" setup>
-import {
-  _get,
-  computed,
-  ref,
-  StringHelper,
-  toRef,
-  useUI,
-  useUiConfig,
-  useWatchTrue,
-} from '#imports'
+import { _get, ref, StringHelper, toRef, useUI, useUiConfig, useWatchTrue } from '#imports'
 import { type IUploadFileProps } from './types'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
 import { type IUploadRequest, useUploadLoader } from '#core/composables/useUpload'
 import { uploadFileInputClassicAuto } from '#core/ui.config'
 import i18next from 'i18next'
+import { checkMaxSize, useFileAllocate, useFileProgress } from '#core/helpers/componentHelper'
 
 const config = useUiConfig<typeof uploadFileInputClassicAuto>(
   uploadFileInputClassicAuto,
@@ -84,22 +80,9 @@ const upload = useUploadLoader(request)
 
 const fileInput = ref<HTMLInputElement>()
 const selectedFile = ref<File | undefined>()
-const percent = ref<number>(0)
-
-const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() =>
-  ((selectedFile.value?.size || 0) / 1000 / 1000).toFixed(2)
-)
-
-const isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1000 > 1024)
-
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2))
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
-const acceptFile = computed(() =>
-  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
-)
 
+const fileAllocate = useFileAllocate(selectedFile, props)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
 const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
 
 const handleOpenFile = () => {
@@ -122,13 +105,17 @@ const handleChange = (e: Event) => {
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
-  const maxSize = checkMaxSize(file)
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
 
   if (!maxSize) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    if (fileAllocate.isAcceptFileUseMb.value) {
+      setErrors(
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
+      )
     } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+      setErrors(
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
+      )
     }
 
     return false
@@ -139,28 +126,6 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
   return true
 }
 
-const checkMaxSize = (file: File): boolean => {
-  if (acceptFileSizeKb.value) {
-    return file.size / 1000 <= acceptFileSizeKb.value
-  }
-
-  return true
-}
-
-const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
-}
-
-const onDownloadProgress = (progressEvent: ProgressEvent) => {
-  if (progressEvent.total === 0) {
-    percent.value = 100
-
-    return
-  }
-
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
-}
-
 useWatchTrue(
   () => upload.status.value.isSuccess,
   () => {

package/dist/runtime/components/QRCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <QrcodeVue :value="value" :level="level" :render-as="renderAs" class="h-[350px] w-[350px]" />
+  <QrcodeVue :value="value" :level="level" :render-as="renderAs" class="size-[350px]" />
 </template>
 <script lang="ts" setup>
 import QrcodeVue from 'qrcode.vue'

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

@@ -15,7 +15,7 @@
       <Icon
         v-if="!isHideCloseBtn"
         name="i-heroicons-x-mark"
-        class="h-6 w-6 cursor-pointer"
+        class="size-6 cursor-pointer"
         @click="close"
       />
     </div>

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

@@ -1,13 +1,23 @@
-export declare const checkMaxSize: (file: File, acceptFileSize: number) => boolean;
+import type { Ref } from 'vue';
+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;
 export declare const isImage: (file: File) => boolean;
-export declare const getFileAllocate: (maxSize: number, selectedFileSize: Blob['size']) => {
-    acceptFileSizeKb: number;
-    acceptFileSizeMb: string;
-    isAcceptFileUseMb: boolean;
-    selectedFileSizeKb: string;
-    selectedFileSizeMb: string;
-    isSelectedFileUseMb: boolean;
+export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null>, props: {
+    accept?: string | string[];
+    maxSize?: number;
+}) => {
+    selectedFileSizeKb: any;
+    selectedFileSizeMb: any;
+    isSelectedFileUseMb: any;
+    acceptFileSizeKb: any;
+    acceptFileSizeMb: any;
+    isAcceptFileUseMb: any;
+    acceptFile: any;
+};
+export declare const useFileProgress: () => {
+    percent: any;
+    onUploadProgress: (progressEvent: ProgressEvent) => void;
+    onDownloadProgress: (progressEvent: ProgressEvent) => void;
 };
 export declare const downloadFileFromURL: (url: string, filename?: string) => Promise<void>;

package/dist/runtime/helpers/componentHelper.mjs

@@ -1,4 +1,5 @@
-export const checkMaxSize = (file, acceptFileSize) => {
+import { computed, ref, StringHelper } from "#imports";
+export const checkMaxSize = (file, acceptFileSize = 0) => {
   if (acceptFileSize) {
     return file.size / 1e3 <= acceptFileSize;
   }
@@ -37,14 +38,52 @@ export const generateURL = (file) => {
 export const isImage = (file) => {
   return file.type.startsWith("image/");
 };
-export const getFileAllocate = (maxSize, selectedFileSize) => {
+export const useFileAllocate = (selectedFile, props) => {
+  const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1e3).toFixed(2));
+  const selectedFileSizeMb = computed(
+    () => ((selectedFile.value?.size || 0) / 1e3 / 1e3).toFixed(2)
+  );
+  const isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1e3 > 1024);
+  const acceptFileSizeKb = computed(() => props.maxSize || 0);
+  const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2));
+  const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024);
+  const acceptFile = computed(
+    () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
+  );
   return {
-    acceptFileSizeKb: maxSize,
-    acceptFileSizeMb: (maxSize / 1024).toFixed(2),
-    isAcceptFileUseMb: maxSize > 1024,
-    selectedFileSizeKb: (selectedFileSize / 1e3).toFixed(2),
-    selectedFileSizeMb: (selectedFileSize / 1e3 / 1e3).toFixed(2),
-    isSelectedFileUseMb: selectedFileSize / 1e3 > 1024
+    selectedFileSizeKb,
+    selectedFileSizeMb,
+    isSelectedFileUseMb,
+    acceptFileSizeKb,
+    acceptFileSizeMb,
+    isAcceptFileUseMb,
+    acceptFile
+  };
+};
+export const useFileProgress = () => {
+  const percent = ref(0);
+  const onUploadProgress = (progressEvent) => {
+    percent.value = parseFloat(
+      StringHelper.withFixed(
+        (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.8
+      )
+    );
+  };
+  const onDownloadProgress = (progressEvent) => {
+    if (progressEvent.total === 0) {
+      percent.value = 100;
+      return;
+    }
+    percent.value = parseFloat(
+      StringHelper.withFixed(
+        (Math.floor(progressEvent.loaded * 100 / progressEvent.total) || 0) * 0.2 + 80
+      )
+    );
+  };
+  return {
+    percent,
+    onUploadProgress,
+    onDownloadProgress
   };
 };
 export const downloadFileFromURL = async (url, filename) => {

package/dist/runtime/utils/ArrayHelper.spec.mjs

@@ -1,9 +1,5 @@
-import { get } from "lodash";
-import { describe, test, expect, vi } from "vitest";
+import { describe, test, expect } from "vitest";
 import { ArrayHelper } from "./ArrayHelper.mjs";
-vi.mock("#build/imports", () => ({
-  _get: get
-}));
 describe("ArrayHelper", () => {
   test("toOptions default attr", () => {
     const data = [

package/dist/runtime/utils/FileHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/FileHelper.spec.mjs

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { FileHelper } from "./FileHelper.mjs";
+describe("FileHelper", () => {
+  describe("dataURLtoFile", () => {
+    it("should convert a data URL to a File", async () => {
+      const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+      const filename = "test.png";
+      const file = await FileHelper.dataURLtoFile(dataUrl, filename);
+      expect(file).toBeInstanceOf(File);
+      expect(file.name).toBe(filename);
+      expect(file.type).toBe("image/png");
+    });
+  });
+});

package/dist/runtime/utils/ObjectHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/ObjectHelper.spec.mjs

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { ObjectHelper } from "./ObjectHelper.mjs";
+describe("ObjectHelper", () => {
+  describe("createOption", () => {
+    it("should create an option object with the provided value and label", () => {
+      const value = "value1";
+      const label = "Label 1";
+      const option = ObjectHelper.createOption(value, label);
+      expect(option).toEqual({ value, label });
+    });
+    it("should create an option object with an empty label if not provided", () => {
+      const value = "value1";
+      const option = ObjectHelper.createOption(value);
+      expect(option).toEqual({ value, label: "" });
+    });
+  });
+  describe("toOption", () => {
+    it("should create an option object from the provided data", () => {
+      const data = { id: 1, name: "Option 1" };
+      const option = ObjectHelper.toOption(data);
+      expect(option).toEqual({ value: 1, label: "Option 1" });
+    });
+    it("should use the provided value and label attributes", () => {
+      const data = { code: "CODE1", description: "Description 1" };
+      const option = ObjectHelper.toOption(data, "code", "description");
+      expect(option).toEqual({ value: "CODE1", label: "Description 1" });
+    });
+  });
+  describe("toErrorStatus", () => {
+    it("should create an error status object from the provided error", () => {
+      const error = {
+        response: {
+          status: 400,
+          request: {
+            response: JSON.stringify({ code: "INVALID_REQUEST", message: "Invalid request" })
+          }
+        }
+      };
+      const status = ObjectHelper.toErrorStatus({}, error);
+      expect(status.isError).toBe(true);
+      expect(status.isSuccess).toBe(false);
+      expect(status.errorData).toEqual({ code: "INVALID_REQUEST", message: "Invalid request" });
+    });
+    it("should create a network error status if the error response status is missing", () => {
+      const error = {};
+      const status = ObjectHelper.toErrorStatus({}, error);
+      expect(status.isError).toBe(true);
+      expect(status.isSuccess).toBe(false);
+      expect(status.errorData).toEqual({ code: "NETWORK_ERROR", message: "Network error" });
+    });
+  });
+});

package/dist/runtime/utils/ParamHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/ParamHelper.spec.mjs

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import { ParamHelper } from "./ParamHelper.mjs";
+describe("ParamHelper", () => {
+  describe("getParams", () => {
+    it("should merge params from opts and reqOptions", () => {
+      const opts = { params: { page: 1, limit: 10 } };
+      const reqOptions = { params: { sort: "name" } };
+      const result = ParamHelper.getParams(opts, reqOptions);
+      expect(result).toEqual({ page: 1, limit: 10, sort: "name" });
+    });
+    it("should return reqOptions.params if opts.params is not provided", () => {
+      const opts = {};
+      const reqOptions = { params: { sort: "name" } };
+      const result = ParamHelper.getParams(opts, reqOptions);
+      expect(result).toEqual({ sort: "name" });
+    });
+  });
+  describe("getBoolTrue", () => {
+    it("should return true for truthy values", () => {
+      expect(ParamHelper.getBoolTrue(true)).toBe(true);
+      expect(ParamHelper.getBoolTrue(1)).toBe(true);
+      expect(ParamHelper.getBoolTrue("true")).toBe(true);
+    });
+    it("should return false for falsy values", () => {
+      expect(ParamHelper.getBoolTrue(false)).toBe(false);
+      expect(ParamHelper.getBoolTrue(0)).toBe(false);
+      expect(ParamHelper.getBoolTrue("false")).toBe(false);
+    });
+    it("should return true for null value", () => {
+      expect(ParamHelper.getBoolTrue(null)).toBe(true);
+    });
+  });
+  describe("getBoolFalse", () => {
+    it("should return false for falsy values", () => {
+      expect(ParamHelper.getBoolFalse(false)).toBe(false);
+      expect(ParamHelper.getBoolFalse(0)).toBe(false);
+      expect(ParamHelper.getBoolFalse("false")).toBe(false);
+    });
+    it("should return true for truthy values", () => {
+      expect(ParamHelper.getBoolFalse(true)).toBe(true);
+      expect(ParamHelper.getBoolFalse(1)).toBe(true);
+      expect(ParamHelper.getBoolFalse("true")).toBe(true);
+    });
+    it("should return false for null value", () => {
+      expect(ParamHelper.getBoolFalse(null)).toBe(false);
+    });
+  });
+  describe("isNotFoundError", () => {
+    it('should return true if the error code is "NOT_FOUND"', () => {
+      const error = { code: "NOT_FOUND" };
+      expect(ParamHelper.isNotFoundError(error)).toBe(true);
+    });
+    it('should return false if the error code is not "NOT_FOUND"', () => {
+      const error = { code: "INTERNAL_SERVER_ERROR" };
+      expect(ParamHelper.isNotFoundError(error)).toBe(false);
+    });
+  });
+  describe("isChangeWithFalse", () => {
+    it("should return true if the value changes from true to false", () => {
+      expect(ParamHelper.isChangeWithFalse(false, true)).toBe(true);
+    });
+    it("should return false if the value does not change or changes to true", () => {
+      expect(ParamHelper.isChangeWithFalse(true, true)).toBe(false);
+      expect(ParamHelper.isChangeWithFalse(false, false)).toBe(false);
+      expect(ParamHelper.isChangeWithFalse(true, false)).toBe(false);
+    });
+  });
+  describe("isChangeWithTrue", () => {
+    it("should return true if the value changes from false to true", () => {
+      expect(ParamHelper.isChangeWithTrue(true, false)).toBe(true);
+    });
+    it("should return false if the value does not change or changes to false", () => {
+      expect(ParamHelper.isChangeWithTrue(false, false)).toBe(false);
+      expect(ParamHelper.isChangeWithTrue(true, true)).toBe(false);
+      expect(ParamHelper.isChangeWithTrue(false, true)).toBe(false);
+    });
+  });
+});

package/dist/runtime/utils/StringHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/StringHelper.spec.mjs

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import { StringHelper } from "./StringHelper.mjs";
+describe("StringHelper", () => {
+  describe("genString", () => {
+    it("should generate a random string of the specified length", () => {
+      const length = 10;
+      const result = StringHelper.genString(length);
+      expect(result).toHaveLength(length);
+      expect(typeof result).toBe("string");
+    });
+    it("should generate a random string of default length if not specified", () => {
+      const result = StringHelper.genString();
+      expect(result).toHaveLength(5);
+      expect(typeof result).toBe("string");
+    });
+  });
+  describe("withComma", () => {
+    it("should format a number with comma separator", () => {
+      expect(StringHelper.withComma(1e3)).toBe("1,000");
+      expect(StringHelper.withComma(1234.56)).toBe("1,234.56");
+    });
+    it('should return "0" for null or undefined values', () => {
+      expect(StringHelper.withComma(void 0)).toBe("0");
+    });
+  });
+  describe("withFixed", () => {
+    it("should format a number with comma separator and fixed decimal places", () => {
+      expect(StringHelper.withFixed(1e3)).toBe("1,000");
+      expect(StringHelper.withFixed(1234.56)).toBe("1,234.56");
+    });
+    it('should return "0" for null or undefined values', () => {
+      expect(StringHelper.withFixed(void 0)).toBe("0");
+    });
+  });
+  describe("split", () => {
+    it("should split a string into an array based on the specified separator", () => {
+      const str = "apple,banana,orange";
+      const separator = ",";
+      const result = StringHelper.split(str, separator);
+      expect(result).toEqual(["apple", "banana", "orange"]);
+    });
+    it("should return an empty array for null or undefined string", () => {
+      expect(StringHelper.split(null, ",")).toEqual([]);
+      expect(StringHelper.split(void 0, ",")).toEqual([]);
+    });
+  });
+  describe("joinURL", () => {
+    it("should join the provided URL parts", () => {
+      const result = StringHelper.joinURL("https://example.com", "path", "to", "resource");
+      expect(result).toBe("https://example.com/path/to/resource");
+    });
+  });
+  describe("truncate", () => {
+    it("should truncate a string if it exceeds the specified length", () => {
+      const str = "This is a long string that needs to be truncated";
+      const result = StringHelper.truncate(str, 20);
+      expect(result).toBe("This is a long strin...");
+    });
+    it("should return the original string if it does not exceed the specified length", () => {
+      const str = "Short string";
+      const result = StringHelper.truncate(str, 20);
+      expect(result).toBe("Short string");
+    });
+  });
+  describe("getError", () => {
+    it("should return the error message from the errorData", () => {
+      const errorData = { code: "ERROR_CODE", message: "Error message" };
+      const result = StringHelper.getError(errorData);
+      expect(result).toBe("Error message");
+    });
+    it("should return the default error message if the errorData is empty", () => {
+      const result = StringHelper.getError({}, "Default error message");
+      expect(result).toBe("Default error message");
+    });
+  });
+});

package/package.json

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