@finema/core 1.4.51 → 1.4.53

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.4.51";
+const version = "1.4.53";
 
 const colors = {
   black: "#20243E",

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

@@ -56,7 +56,7 @@
 <script lang="ts" setup>
 import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneProps } from './types'
-import { isImage, generateURL, checkMaxSize } from '#core/helpers/componentHelper'
+import { isImage, generateURL, checkMaxSize, checkFileType } 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'
@@ -100,7 +100,7 @@ const onDrop = (files: File[] | null) => {
   }
 }
 
-const { isOverDropZone } = useDropZone(dropzoneRef, {
+const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
   onDrop,
 })
 
@@ -130,6 +130,14 @@ const handleDeleteFile = () => {
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
+  const fileType = checkFileType(file, acceptFile.value ?? '')
+
+  if (!fileType) {
+    setErrors(i18next.t('custom:invalid_file_type'))
+
+    return false
+  }
+
   const maxSize = checkMaxSize(file, acceptFileSizeKb.value ?? 0)
 
   if (!maxSize) {

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

@@ -28,26 +28,22 @@
       <div :class="[ui.wrapper]">
         <div v-if="selectedFile" :class="[ui.preview.wrapper]">
           <div
-            v-if="isImage(selectedFile) && upload.status.value.isSuccess"
+            v-if="isImage(selectedFile) && upload.status.value.isLoaded"
             :class="[ui.preview.image.wrapper]"
           >
             <img
-              :src="upload.data.value[props.responseKey || 'url']"
+              :src="upload.data.value[responseKey || 'url']"
               :class="[ui.preview.image.img]"
               alt="file"
             />
           </div>
-          <Icon
-            v-else-if="!isImage(selectedFile) && upload.status.value.isSuccess"
-            :name="ui.default.filePreviewIcon"
-            :class="[ui.preview.icon]"
-          />
+          <Icon v-else :name="ui.default.filePreviewIcon" :class="[ui.preview.icon]" />
           <div :class="[ui.preview.filename]">
             <p class="truncate">{{ selectedFile.name }}</p>
           </div>
           <div class="flex items-center space-x-1">
             <Badge size="xs" variant="outline" class="mt-1">
-              {{ isSelectedFileUseMb ? `${selectedFileSizeMb} Mb` : `${selectedFileSizeKb} Kb` }}
+              {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
             </Badge>
             <div>
               <Icon
@@ -63,7 +59,7 @@
             </div>
           </div>
         </div>
-        <div v-if="selectedFile" :class="[ui.uploadStatus.wrapper]">
+        <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]">
@@ -84,7 +80,7 @@
 <script lang="ts" setup>
 import { useDropZone } from '@vueuse/core'
 import { type IUploadDropzoneAutoProps } from './types'
-import { isImage, checkMaxSize } from '#core/helpers/componentHelper'
+import { isImage, checkMaxSize, checkFileType } from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'
 import {
@@ -119,7 +115,6 @@ 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)
 
@@ -155,7 +150,7 @@ const onDrop = (files: File[] | null) => {
   }
 }
 
-const { isOverDropZone } = useDropZone(dropzoneRef, {
+const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
   onDrop,
 })
 
@@ -190,6 +185,14 @@ const handleDeleteFile = () => {
 const handleCheckFileCondition = (file: File | undefined): boolean => {
   if (!file) return false
 
+  const fileType = checkFileType(file, acceptFile.value ?? '')
+
+  if (!fileType) {
+    setErrors(i18next.t('custom:invalid_file_type'))
+
+    return false
+  }
+
   const maxSize = checkMaxSize(file, acceptFileSizeKb.value ?? 0)
 
   if (!maxSize) {

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

@@ -1,3 +1,4 @@
 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;

package/dist/runtime/helpers/componentHelper.mjs

@@ -4,6 +4,29 @@ export const checkMaxSize = (file, acceptFileSize) => {
   }
   return true;
 };
+export const checkFileType = (file, acceptFileType) => {
+  if (!acceptFileType || Array.isArray(acceptFileType) && acceptFileType.length === 0)
+    return true;
+  const result = [];
+  const acceptedTypes = Array.isArray(acceptFileType) ? acceptFileType : acceptFileType.split(",");
+  for (const acceptedType of acceptedTypes) {
+    if (acceptedType.startsWith(".")) {
+      const fileExtension = `.${file.name.split(".").pop()}`;
+      if (fileExtension.toLowerCase() === acceptedType.toLowerCase())
+        result.push(true);
+    } else {
+      const fileType = acceptedType.split("/");
+      const fileExtension = file.type.split("/");
+      if (fileType.length === 2 && fileExtension.length === 2) {
+        if (fileType[1] === "*") {
+          result.push(fileType[0].toLowerCase() === fileExtension[0].toLowerCase());
+        }
+        result.push(acceptedType.toLowerCase() === file.type.toLowerCase());
+      }
+    }
+  }
+  return result.includes(true);
+};
 export const generateURL = (file) => {
   const fileSrc = URL.createObjectURL(file);
   setTimeout(() => {

package/dist/runtime/utils/StringHelper.mjs

@@ -26,9 +26,9 @@ export class StringHelper {
     return newStr;
   };
   static getError = (errorData, defaultErrorMessage = "\u0E21\u0E35\u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14") => {
-    let msg = errorData?.message;
+    let msg = errorData?.message || defaultErrorMessage;
     if (!errorData.code || !msg) {
-      return defaultErrorMessage;
+      return msg;
     }
     if (errorData.code !== "INVALID_PARAMS" && !errorData.fields) {
       return msg;

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

@@ -106,6 +106,15 @@ export declare const _fromPairs: {
     (pairs: import("lodash").List<any[]> | null | undefined): import("lodash").Dictionary<any>;
 };
 export declare const _xor: <T>(...arrays: (import("lodash").List<T> | null | undefined)[]) => T[];
+export declare const _omit: {
+    <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
+    <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
+    <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
+};
+export declare const _pick: {
+    <T extends object, U extends keyof T>(object: T, ...props: import("lodash").Many<U>[]): Pick<T, U>;
+    <T_1>(object: T_1 | null | undefined, ...props: import("lodash").Many<import("lodash").PropertyPath>[]): Partial<T_1>;
+};
 export declare const _clone: (object: any) => any;
 export declare const _debounce: <T extends (...args: any[]) => any>(func: T, wait?: number) => import("lodash").DebouncedFunc<T>;
 export declare const _deepMerge: (target: any, ...sources: any[]) => any;

package/dist/runtime/utils/lodash.mjs

@@ -27,7 +27,9 @@ import {
   xor,
   debounce,
   intersection,
-  get
+  get,
+  omit,
+  pick
 } from "lodash-es";
 export const _get = get;
 export const _range = range;
@@ -57,6 +59,8 @@ export const _toPairs = toPairs;
 export const _orderBy = orderBy;
 export const _fromPairs = fromPairs;
 export const _xor = xor;
+export const _omit = omit;
+export const _pick = pick;
 export const _clone = (object) => {
   try {
     return JSON.parse(JSON.stringify(object || {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.51",
+  "version": "1.4.53",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -66,7 +66,7 @@
     "happy-dom": "^13.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "nuxt": "^3.10.0",
+    "nuxt": "^3.10.1",
     "playwright-core": "^1.40.1",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",
@@ -76,9 +76,6 @@
     "stylelint-config-standard-scss": "^13.0.0",
     "vitest": "^1.2.2"
   },
-  "resolutions": {
-    "vue": "3.3.13"
-  },
   "lint-staged": {
     "*.{ts,vue,tsx,js}": "eslint --fix --cache",
     "*.{html,json}": "prettier --write"