@finema/core 1.4.89 → 1.4.91

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.89",
+  "version": "1.4.91",
   "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.89";
+const version = "1.4.91";
 
 const colors = {
   black: "#20243E",
@@ -341,7 +341,8 @@ const module = defineNuxtModule({
         files: [
           ...tailwindConfig.content.files || [],
           resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-          resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
+          resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}"),
+          resolve(runtimeDir, "presets/**/*.{mjs,js,ts}")
         ]
       };
       tailwindConfig.theme.extend.colors = {

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

@@ -11,12 +11,6 @@
         },
       ]"
     >
-      <Icon
-        v-if="selectedFile"
-        :name="ui.default.closeIcon"
-        :class="[ui.button.delete]"
-        @click="handleDeleteFile"
-      />
       <input
         ref="fileInputRef"
         type="file"
@@ -27,18 +21,6 @@
         @change="handleChange"
       />
       <div :class="[ui.wrapper]">
-        <div v-if="selectedFile" :class="[ui.preview.wrapper]">
-          <div v-if="isImage(selectedFile)" :class="[ui.preview.image.wrapper]">
-            <img :src="generateURL(selectedFile)" :class="[ui.preview.image.img]" alt="file" />
-          </div>
-          <Icon v-else :name="ui.default.filePreviewIcon" :class="[ui.preview.icon]" />
-          <div :class="[ui.preview.filename]">
-            <p class="truncate">{{ selectedFile.name }}</p>
-          </div>
-          <Badge size="xs" variant="outline" class="mt-1">
-            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} Mb` : `${selectedFileSizeKb} Kb` }}
-          </Badge>
-        </div>
         <div v-if="!selectedFile" :class="[ui.placeholderWrapper]">
           <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
           <div :class="[ui.labelWrapper]">
@@ -49,6 +31,67 @@
           </div>
           <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
         </div>
+
+        <!-- Selected State -->
+        <div v-if="selectedFile" :class="[ui.onPreview.wrapper]">
+          <div :class="[ui.onPreview.previewImgWrapper]">
+            <div v-if="isImage(selectedFile)" class="size-full overflow-hidden">
+              <img
+                :src="generateURL(selectedFile)"
+                :class="[ui.onPreview.previewImgClass]"
+                alt="image-preview"
+              />
+            </div>
+            <div v-else>
+              <Icon
+                :name="ui.onPreview.previewFileIcon || ui.default.filePreviewIcon"
+                :class="[ui.onPreview.previewFileClass]"
+              />
+            </div>
+          </div>
+          <div :class="[ui.onPreview.textWrapper]">
+            <div class="truncate">
+              <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
+              <p class="truncate font-light text-gray-400">
+                {{
+                  fileAllocate.isSelectedFileUseMb
+                    ? `${fileAllocate.selectedFileSizeMb} MB`
+                    : `${fileAllocate.selectedFileSizeKb} KB`
+                }}
+              </p>
+            </div>
+            <div :class="[ui.action.wrapper]">
+              <PImage
+                v-if="isImage(selectedFile)"
+                alt="image-popup-preview"
+                preview
+                :pt="{ button: 'absolute opacity-0 inset-0' }"
+              >
+                <template #image>
+                  <Icon :name="ui.action.previewIcon" :class="[ui.action.iconClass]" />
+                </template>
+                <template #preview="slotProps">
+                  <img
+                    :src="generateURL(selectedFile)"
+                    alt="preview"
+                    :style="slotProps.style"
+                    @click="slotProps.previewCallback"
+                  />
+                </template>
+              </PImage>
+              <Icon
+                :name="ui.action.downloadIcon"
+                :class="[ui.action.iconClass]"
+                @click="handleDownloadFile"
+              />
+              <Icon
+                :name="ui.action.deleteIcon"
+                :class="[ui.action.iconClass]"
+                @click="handleDeleteFile"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </FieldWrapper>
@@ -57,7 +100,14 @@
 <script lang="ts" setup>
 import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneProps } from './types'
-import { isImage, generateURL, checkMaxSize, checkFileType } from '#core/helpers/componentHelper'
+import {
+  isImage,
+  generateURL,
+  checkMaxSize,
+  checkFileType,
+  getFileAllocate,
+  downloadFileFromURL,
+} from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
 import { computed, ref, toRef, useUI, useUiConfig } from '#imports'
@@ -80,13 +130,10 @@ const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value ?? 0) / 1024).toFixed(2))
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
+const fileAllocate = computed(() =>
+  getFileAllocate(props.maxSize ?? 0, selectedFile.value?.size ?? 0)
+)
 
-const selectedFileSizeKb = computed(() => ((value?.value.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() => ((value?.value.size || 0) / 1000 / 1000).toFixed(2))
-const isSelectedFileUseMb = computed(() => (value?.value.size || 0) / 1000 > 1024)
 const selectedFile = computed(() => value?.value)
 
 const onDrop = (files: File[] | null) => {
@@ -128,6 +175,10 @@ const handleDeleteFile = () => {
   emit('delete')
 }
 
+const handleDownloadFile = () => {
+  downloadFileFromURL(generateURL(selectedFile.value), selectedFile.value?.name)
+}
+
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
@@ -139,13 +190,17 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, acceptFileSizeKb.value ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
 
   if (!maxSize) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    if (fileAllocate.value.isAcceptFileUseMb) {
+      setErrors(
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.value.acceptFileSizeMb })
+      )
     } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+      setErrors(
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.value.acceptFileSizeKb })
+      )
     }
 
     return false

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

@@ -8,15 +8,10 @@
           [ui.disabled]: isDisabled,
           [ui.background.default]: !isOverDropZone && !isDisabled,
           [ui.background.dragover]: isOverDropZone && !isDisabled,
+          [ui.failed]: upload.status.value.isError,
         },
       ]"
     >
-      <Icon
-        v-if="selectedFile"
-        :name="ui.default.closeIcon"
-        :class="[ui.button.delete]"
-        @click="handleDeleteFile"
-      />
       <input
         ref="fileInputRef"
         type="file"
@@ -27,51 +22,141 @@
         @change="handleChange"
       />
       <div :class="[ui.wrapper]">
-        <div v-if="selectedFile" :class="[ui.preview.wrapper]">
-          <div
-            v-if="isImage(selectedFile) && upload.status.value.isLoaded"
-            :class="[ui.preview.image.wrapper]"
-          >
-            <img
-              :src="upload.data.value[responseKey || 'url']"
-              :class="[ui.preview.image.img]"
-              alt="file"
-            />
+        <div v-if="!selectedFile" :class="[ui.placeholderWrapper]">
+          <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
+          <div :class="[ui.labelWrapper]">
+            <p class="text-primary cursor-pointer" @click="handleOpenFile">
+              {{ selectFileLabel ?? 'คลิกเพื่อเลือกไฟล์' }}
+            </p>
+            <p>{{ selectFileSubLabel ?? 'หรือ ลากและวางที่นี่' }}</p>
           </div>
-          <Icon v-else :name="ui.default.filePreviewIcon" :class="[ui.preview.icon]" />
-          <div :class="[ui.preview.filename]">
-            <p class="truncate">{{ selectedFile.name }}</p>
+          <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
+        </div>
+
+        <!-- Loading State -->
+        <div v-if="selectedFile && upload.status.value.isLoading" :class="[ui.onLoading.wrapper]">
+          <div :class="[ui.onLoading.placeholderWrapper]">
+            <Icon
+              :name="
+                isImage(selectedFile)
+                  ? ui.onLoading.placeholderImgIcon || ui.default.placeholderImgIcon
+                  : ui.onLoading.placeholderFileIcon || ui.default.filePreviewIcon
+              "
+              :class="[ui.onLoading.placeholderIconClass]"
+            />
           </div>
-          <div class="flex items-center space-x-1">
-            <Badge size="xs" variant="outline" class="mt-1">
-              {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
-            </Badge>
+          <div :class="[ui.onLoading.textWrapper]">
+            <div class="truncate">
+              <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
+              <p class="truncate font-light text-gray-400">
+                {{
+                  fileAllocate.isSelectedFileUseMb
+                    ? `${fileAllocate.selectedFileSizeMb} MB`
+                    : `${fileAllocate.selectedFileSizeKb} KB`
+                }}
+                - {{ percent }}% {{ uploadingLabel ?? 'กำลังอัพโหลด...' }}
+              </p>
+            </div>
             <div>
               <Icon
-                v-if="upload.status.value.isSuccess"
-                name="heroicons:check-circle-20-solid"
-                class="text-success"
+                :name="ui.onLoading.loadingIcon || ui.default.loadingIcon"
+                :class="[ui.onLoading.loadingIconClass]"
               />
+            </div>
+          </div>
+        </div>
+
+        <!-- Success State -->
+        <div v-if="selectedFile && upload.status.value.isSuccess" :class="[ui.onPreview.wrapper]">
+          <div :class="[ui.onPreview.previewImgWrapper]">
+            <div v-if="isImage(selectedFile)" class="size-full overflow-hidden">
+              <img
+                :src="upload.data.value[responseKey || 'url']"
+                :class="[ui.onPreview.previewImgClass]"
+                alt="image-preview"
+              />
+            </div>
+            <div v-else>
               <Icon
-                v-if="upload.status.value.isError"
-                name="heroicons:x-circle-20-solid"
-                class="text-danger"
+                :name="ui.onPreview.previewFileIcon || ui.default.filePreviewIcon"
+                :class="[ui.onPreview.previewFileClass]"
               />
             </div>
           </div>
+          <div :class="[ui.onPreview.textWrapper]">
+            <div class="truncate">
+              <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`
+                }}
+              </p>
+            </div>
+            <div :class="[ui.action.wrapper]">
+              <Icon
+                v-if="isImage(selectedFile)"
+                :name="ui.action.previewIcon"
+                :class="[ui.action.iconClass]"
+                title="ดูตัวอย่าง"
+                @click="() => (isPreviewOpen = true)"
+              />
+              <Icon
+                :name="ui.action.downloadIcon"
+                :class="[ui.action.iconClass]"
+                title="ดาวน์โหลดไฟล์"
+                @click="handleDownloadFile"
+              />
+              <Icon
+                :name="ui.action.deleteIcon"
+                :class="[ui.action.iconClass]"
+                title="ลบไฟล์"
+                @click="handleDeleteFile"
+              />
+              <Modal v-model="isPreviewOpen" :title="selectedFile?.name">
+                <img :src="upload.data.value[responseKey || 'url']" alt="image-preview" />
+              </Modal>
+            </div>
+          </div>
         </div>
-        <div v-if="upload.status.value.isLoading" :class="[ui.uploadStatus.wrapper]">
-          <UProgress :class="[ui.uploadStatus.progressBar]" :value="100" />
-        </div>
-        <div v-if="!selectedFile" :class="[ui.placeholderWrapper]">
-          <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
-          <div :class="[ui.labelWrapper]">
-            <p class="text-primary cursor-pointer" @click="handleOpenFile">
-              {{ selectFileLabel ?? 'คลิกเพื่อเลือกไฟล์' }}
-            </p>
-            <p>{{ selectFileSubLabel ?? 'หรือ ลากและวางที่นี่' }}</p>
+
+        <!-- Failed State -->
+        <div v-if="selectedFile && upload.status.value.isError" :class="[ui.onFailed.wrapper]">
+          <div :class="[ui.onFailed.failedImgWrapper]">
+            <Icon
+              :name="
+                isImage(selectedFile)
+                  ? ui.onFailed.failedImgIcon || ui.default.placeholderImgIcon
+                  : ui.onFailed.failedFileIcon || ui.default.filePreviewIcon
+              "
+              :class="[ui.onFailed.failedIconClass]"
+            />
+          </div>
+          <div :class="[ui.onFailed.textWrapper]">
+            <div class="truncate">
+              <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
+              <p class="text-danger truncate font-light">
+                {{ uploadFailedLabel || 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง' }}
+              </p>
+              <Button
+                variant="ghost"
+                :label="retryLabel || 'ลองอีกครั้ง'"
+                :leading-icon="ui.action.retryIcon"
+                :class="[ui.action.retryBtnClass]"
+                size="sm"
+                @click="handleRetryUpload"
+              />
+            </div>
+            <div :class="[ui.action.wrapper]">
+              <Icon
+                title="ลบไฟล์"
+                :name="ui.action.deleteIcon"
+                :class="[ui.action.deleteIconClass]"
+                @click="handleDeleteFile"
+              />
+            </div>
           </div>
-          <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
         </div>
       </div>
     </div>
@@ -81,7 +166,13 @@
 <script lang="ts" setup>
 import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneAutoProps } from './types'
-import { isImage, checkMaxSize, checkFileType } from '#core/helpers/componentHelper'
+import {
+  checkMaxSize,
+  checkFileType,
+  isImage,
+  getFileAllocate,
+  downloadFileFromURL,
+} from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
 import {
@@ -118,23 +209,17 @@ 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>(0)
+const percent = ref<number | string>(0)
+const isPreviewOpen = ref<boolean>(false)
 
 const acceptFile = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
 )
 
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value ?? 0) / 1024).toFixed(2))
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
-
-const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() =>
-  ((selectedFile.value?.size || 0) / 1000 / 1000).toFixed(2)
+const fileAllocate = computed(() =>
+  getFileAllocate(props.maxSize ?? 0, selectedFile.value?.size ?? 0)
 )
 
-const isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1000 > 1024)
-
 const onDrop = (files: File[] | null) => {
   if (props.isDisabled || files?.length === 0 || !files) return
 
@@ -195,13 +280,17 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
     return false
   }
 
-  const maxSize = checkMaxSize(file, acceptFileSizeKb.value ?? 0)
+  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
 
   if (!maxSize) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    if (fileAllocate.value.isAcceptFileUseMb) {
+      setErrors(
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.value.acceptFileSizeMb })
+      )
     } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+      setErrors(
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.value.acceptFileSizeKb })
+      )
     }
 
     return false
@@ -212,8 +301,23 @@ const handleCheckFileCondition = (file: File | undefined): boolean => {
   return true
 }
 
+const handleDownloadFile = () => {
+  downloadFileFromURL(_get(upload.data.value, props.responseKey || 'url'), selectedFile.value?.name)
+}
+
+const handleRetryUpload = () => {
+  if (selectedFile.value) {
+    const formData = new FormData()
+
+    formData.append(props.bodyKey || 'file', selectedFile.value)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
 const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
+  percent.value = StringHelper.withFixed(
+    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
+  )
 }
 
 const onDownloadProgress = (progressEvent: ProgressEvent) => {
@@ -223,7 +327,9 @@ const onDownloadProgress = (progressEvent: ProgressEvent) => {
     return
   }
 
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
+  percent.value = StringHelper.withFixed(
+    (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
+  )
 }
 
 useWatchTrue(

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

@@ -7,6 +7,9 @@ export interface IUploadDropzoneAutoProps extends IFieldProps {
     uploadPathURL?: string;
     selectFileLabel?: string;
     selectFileSubLabel?: string;
+    uploadingLabel?: string;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
     accept?: string[] | string;
     bodyKey?: string;
     responseKey?: string;

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

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

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

@@ -2,3 +2,12 @@ export declare const checkMaxSize: (file: File, acceptFileSize: number) => boole
 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 downloadFileFromURL: (url: string, filename?: string) => Promise<void>;

package/dist/runtime/helpers/componentHelper.mjs

@@ -37,3 +37,33 @@ export const generateURL = (file) => {
 export const isImage = (file) => {
   return file.type.startsWith("image/");
 };
+export const getFileAllocate = (maxSize, selectedFileSize) => {
+  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
+  };
+};
+export const downloadFileFromURL = async (url, filename) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = "blob";
+    xhr.onload = () => {
+      const a = document.createElement("a");
+      const url2 = window.URL.createObjectURL(xhr.response);
+      a.href = url2;
+      a.download = filename || url2.split("/").pop() || (/* @__PURE__ */ new Date()).toISOString();
+      a.click();
+      window.URL.revokeObjectURL(url2);
+      resolve();
+    };
+    xhr.onerror = () => {
+      reject();
+    };
+    xhr.open("GET", url);
+    xhr.send();
+  });
+};

package/dist/runtime/ui.config/uploadFileDropzone.d.ts

@@ -2,33 +2,56 @@ export declare const uploadFileDropzone: {
     base: string;
     wrapper: string;
     disabled: string;
+    failed: string;
     placeholderWrapper: string;
     placeholder: string;
     labelWrapper: string;
-    preview: {
+    onLoading: {
         wrapper: string;
-        icon: string;
-        image: {
-            wrapper: string;
-            img: string;
-        };
-        filename: string;
+        placeholderWrapper: string;
+        placeholderImgIcon: string;
+        placeholderFileIcon: string;
+        placeholderIconClass: string;
+        textWrapper: string;
+        loadingIcon: string;
+        loadingIconClass: string;
     };
-    uploadStatus: {
+    onPreview: {
         wrapper: string;
-        progressBar: string;
+        previewImgWrapper: string;
+        previewImgClass: string;
+        previewFileIcon: string;
+        previewFileClass: string;
+        textWrapper: string;
+    };
+    onFailed: {
+        wrapper: string;
+        failedImgWrapper: string;
+        failedImgIcon: string;
+        failedFileIcon: string;
+        failedIconClass: string;
+        textWrapper: string;
+    };
+    action: {
+        wrapper: string;
+        iconClass: string;
+        deleteIconClass: string;
+        retryBtnClass: string;
+        previewIcon: string;
+        downloadIcon: string;
+        deleteIcon: string;
+        retryIcon: string;
     };
     background: {
         default: string;
         dragover: string;
     };
-    button: {
-        delete: string;
-    };
     labelIcon: string;
     default: {
-        closeIcon: string;
         filePreviewIcon: string;
         uploadIcon: string;
+        placeholderImgIcon: string;
+        failedImgIcon: string;
+        loadingIcon: string;
     };
 };

package/dist/runtime/ui.config/uploadFileDropzone.mjs

@@ -1,34 +1,57 @@
 export const uploadFileDropzone = {
-  base: "relative w-full p-8 transition rounded-lg flex items-center justify-center border-2 ring-0 min-h-[250px]",
+  base: "relative w-full p-4 transition rounded-lg flex items-center justify-center border-[1px] ring-0",
   wrapper: "flex flex-col items-center w-full",
-  disabled: "bg-gray-disabled cursor-not-allowed",
-  placeholderWrapper: "flex flex-col items-center justify-center",
+  disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
+  failed: "border-danger",
+  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",
-  preview: {
-    wrapper: "flex flex-col items-center w-full",
-    icon: "mb-2 h-10 w-10 text-gray-400",
-    image: {
-      wrapper: "flex justify-center mb-2 rounded overflow-hidden max-w-[300px]",
-      img: "w-full object-contain"
-    },
-    filename: "flex items-center justify-center w-full font-semibold truncate"
+  onLoading: {
+    wrapper: "w-full flex space-x-4",
+    placeholderWrapper: "flex size-12 items-center justify-center rounded-lg bg-gray-100",
+    placeholderImgIcon: "",
+    placeholderFileIcon: "",
+    placeholderIconClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-center justify-between",
+    loadingIcon: "",
+    loadingIconClass: "text-primary size-10"
   },
-  uploadStatus: {
-    wrapper: "w-full md:w-1/2 mt-2",
-    progressBar: ""
+  onPreview: {
+    wrapper: "w-full flex space-x-4",
+    previewImgWrapper: "flex size-12 items-center justify-center rounded-lg overflow-hidden bg-gray-100",
+    previewImgClass: "w-full h-full object-cover",
+    previewFileIcon: "",
+    previewFileClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-center justify-between"
+  },
+  onFailed: {
+    wrapper: "w-full flex space-x-4",
+    failedImgWrapper: "flex size-12 items-center justify-center rounded-lg bg-gray-100",
+    failedImgIcon: "",
+    failedFileIcon: "",
+    failedIconClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-start justify-between"
+  },
+  action: {
+    wrapper: "flex items-center space-x-4",
+    iconClass: "size-6 text-gray-400 cursor-pointer",
+    deleteIconClass: "size-6 text-danger cursor-pointer",
+    retryBtnClass: "px-0",
+    previewIcon: "i-ic:outline-remove-red-eye",
+    downloadIcon: "i-ic:outline-file-download",
+    deleteIcon: "ph:trash",
+    retryIcon: "ph:arrow-counter-clockwise"
   },
   background: {
     default: "bg-white border-gray-border",
     dragover: "bg-gray-100 border-primary"
   },
-  button: {
-    delete: "cursor-pointer w-5 h-5 ml-2 text-gray-400 hover:text-gray-300 absolute top-6 right-6 "
-  },
   labelIcon: "w-6 h-6 text-gray-400 text-center mb-4",
   default: {
-    closeIcon: "i-heroicons:trash-solid",
     filePreviewIcon: "i-heroicons:document-text-solid",
-    uploadIcon: "i-ph:cloud-arrow-up"
+    uploadIcon: "i-ph:cloud-arrow-up",
+    placeholderImgIcon: "i-material-symbols:imagesmode-outline",
+    failedImgIcon: "i-material-symbols:imagesmode-outline",
+    loadingIcon: "i-svg-spinners:180-ring-with-bg"
   }
 };

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

@@ -1,6 +1,7 @@
 export declare class StringHelper {
     static genString: (length?: number) => string;
     static withComma: (value?: number | string) => string;
+    static withFixed: (value?: number | string) => string;
     static split: (str: string | null | undefined, separator: string | RegExp) => string[];
     static joinURL: (...parts: string[]) => string;
     static truncate: (str: any, num?: number) => any;

package/dist/runtime/utils/StringHelper.mjs

@@ -12,6 +12,12 @@ export class StringHelper {
   static withComma = (value = 0) => {
     return (+(value || 0)).toLocaleString();
   };
+  static withFixed = (value = 0) => {
+    return (+(value || 0)).toLocaleString(void 0, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+  };
   static split = (str, separator) => {
     return `${str || ""}`.split(separator).filter((item) => item).map((item) => item.trim());
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.89",
+  "version": "1.4.91",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -34,17 +34,17 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.10.3",
-    "@nuxt/ui": "^2.14.1",
+    "@nuxt/ui": "^2.14.2",
     "@pinia/nuxt": "^0.5.1",
     "@vee-validate/nuxt": "^4.12.5",
     "@vee-validate/zod": "^4.12.5",
-    "@vuepic/vue-datepicker": "^8.1.1",
+    "@vuepic/vue-datepicker": "^8.2.0",
     "axios": "^1.6.7",
     "date-fns": "^3.3.1",
     "i18next": "^23.10.0",
     "maska": "^2.1.11",
     "nuxt-lodash": "^2.5.3",
-    "nuxt-security": "^1.2.0",
+    "nuxt-security": "^1.2.1",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
     "url-join": "^5.0.0",
@@ -64,17 +64,17 @@
     "changelogen": "^0.5.5",
     "eslint": "^8.56.0",
     "happy-dom": "^13.0.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "lint-staged": "^15.2.0",
     "nuxt": "^3.10.3",
-    "playwright-core": "^1.40.1",
+    "playwright-core": "^1.42.1",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",
     "sass": "^1.69.5",
     "stylelint": "^16.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
-    "vitest": "^1.2.2",
+    "vitest": "^1.3.1",
     "vue": "^3.4.21"
   },
   "lint-staged": {