@finema/core 1.4.26 → 1.4.28

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.26",
+  "version": "1.4.28",
   "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.26";
+const version = "1.4.28";
 
 const colors = {
   black: "#20243E",
@@ -159,7 +159,8 @@ const table = {
       class: "-m-1.5 text-gray-700 font-normal"
     },
     loadingState: {
-      label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..."
+      label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14...",
+      icon: "i-svg-spinners:180-ring-with-bg"
     },
     emptyState: {
       label: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"

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

@@ -4,7 +4,7 @@
     :name="name"
     :description="description"
     :hint="hint"
-    :size="size"
+    :size="size as FormGroupSize"
     :data-testid="name"
     :help="help"
     :error="errorMessage"
@@ -14,8 +14,10 @@
     <slot />
   </UFormGroup>
 </template>
+
 <script lang="ts" setup>
 import { type IFieldProps } from '#core/components/Form/types'
+import { type FormGroupSize } from '#ui/types/form-group'
 
 defineProps<IFieldProps>()
 </script>

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

@@ -91,6 +91,13 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputUploadFileClassicAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
     </template>
   </div>
 </template>

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

@@ -0,0 +1,181 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div :class="[ui.base]">
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :accept="acceptFile"
+        :required="isRequired"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <div :class="[ui.selectFileBox]">
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
+          <p :class="ui.placeholder">
+            {{ selectedFile?.name ?? placeholder ?? 'No file chosen' }}
+          </p>
+          <Badge v-if="selectedFile" size="xs" variant="outline"> {{ selectedFileSize }} MB </Badge>
+        </div>
+        <div v-if="selectedFile">
+          <Icon
+            v-if="upload.status.value.isSuccess"
+            name="heroicons:check-circle-20-solid"
+            class="text-success"
+          />
+          <Icon
+            v-if="upload.status.value.isError"
+            name="heroicons:x-circle-20-solid"
+            class="text-danger"
+          />
+          <Icon
+            v-if="upload.status.value.isLoading"
+            name="i-svg-spinners:180-ring-with-bg"
+            class="text-primary"
+          />
+        </div>
+      </div>
+    </div>
+    <img v-if="imagePreviewURL && value" :src="imagePreviewURL" alt="" :class="ui.previewURL" />
+  </FieldWrapper>
+</template>
+
+<script lang="tsx" setup>
+import {
+  _isEmpty,
+  computed,
+  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'
+
+const config = useUiConfig<typeof uploadFileInputClassicAuto>(
+  uploadFileInputClassicAuto,
+  'uploadFileInput'
+)
+
+const props = withDefaults(defineProps<IUploadFileProps>(), {})
+
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<string>(props)
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const upload = useUploadLoader(request)
+
+const fileInput = ref<HTMLInputElement>()
+const selectedFile = ref<File | undefined>()
+const percent = ref<number>(0)
+
+const selectedFileSize = computed(() => ((selectedFile.value?.size || 0) / 1000 / 1000).toFixed(2))
+const acceptFileSize = computed(() => props.maxSize)
+const acceptFileSizeMb = computed(() => ((acceptFileSize.value || 0) / 1024).toFixed(2))
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const { ui } = useUI('breadcrumb', toRef(props, 'ui'), config)
+
+const handleOpenFile = () => {
+  fileInput.value?.click()
+}
+
+const handleChange = (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    selectedFile.value = file
+    const formData = new FormData()
+
+    formData.append('file', file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+  const accept = checkAcceptFile(file)
+
+  if (!accept) {
+    setErrors(i18next.t('custom:invalid_file_type'))
+
+    return false
+  }
+
+  const maxSize = checkMaxSize(file)
+
+  if (!maxSize) {
+    setErrors(i18next.t('custom:invalid_file_size', { size: acceptFileSizeMb.value }))
+
+    return false
+  }
+
+  setErrors('')
+
+  return true
+}
+
+const checkAcceptFile = (file: File): boolean => {
+  let fileType = ''
+
+  if (_isEmpty(file.type)) {
+    fileType = file.name.split('.').pop() || ''
+  } else {
+    fileType = file.type.split('/').pop() || ''
+  }
+
+  return acceptFile.value ? acceptFile.value.includes(fileType) : true
+}
+
+const checkMaxSize = (file: File): boolean => {
+  if (acceptFileSize.value) {
+    return file.size / 1000 <= acceptFileSize.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,
+  () => {
+    if (upload.data.value?.url) {
+      value.value = upload.data.value?.url
+      onChange(upload.data.value?.url)
+    }
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    setErrors(StringHelper.getError(upload.status.value.errorData))
+  }
+)
+</script>

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

@@ -0,0 +1,13 @@
+import { type AxiosRequestConfig } from 'axios';
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
+export interface IUploadFileProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL: string;
+    selectFileLabel?: string;
+    accept?: string[] | string;
+    maxSize?: number;
+    imagePreviewURL?: string;
+}
+export type IUploadFileField = IFormFieldBase<INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO, IUploadFileProps, never>;

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

@@ -9,6 +9,7 @@ import { type IToggleField } from '#core/components/Form/InputToggle/types';
 import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
 import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
 import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
+import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     TEXTAREA = "TEXTAREA",
@@ -21,7 +22,8 @@ export declare const enum INPUT_TYPES {
     CHECKBOX = "CHECKBOX",
     DATE_TIME = "DATE_TIME",
     DATE = "DATE",
-    UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC"
+    UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
+    UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO"
 }
 export interface IFieldProps {
     form?: FormContext;
@@ -50,4 +52,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField;
+export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField;

package/dist/runtime/components/Form/types.mjs

@@ -11,5 +11,6 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
   INPUT_TYPES2["DATE"] = "DATE";
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
+  INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

package/dist/runtime/composables/useUpload.d.ts

@@ -0,0 +1,15 @@
+import { type AxiosRequestConfig } from 'axios';
+export interface IUploadData {
+    name: string;
+    url: string;
+    path: string;
+    size: number;
+    content_type: string;
+}
+export interface IUploadRequest {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    pathURL: string;
+}
+export declare const useUploadLoader: (request: IUploadRequest) => import("../helpers/apiObjectHelper").IUseObjectLoader<IUploadData, any, Record<string, any>>;

package/dist/runtime/composables/useUpload.mjs

@@ -0,0 +1,16 @@
+import { useObjectLoader } from "./loaderObject.mjs";
+export const useUploadLoader = (request) => {
+  return useObjectLoader({
+    method: "post",
+    url: request.pathURL,
+    getRequestOptions: (_data, opts) => ({
+      ...request.requestOptions,
+      headers: {
+        ...request.requestOptions.headers,
+        "Content-Type": "multipart/form-data"
+      },
+      onDownloadProgress: opts.data?.onDownloadProgress,
+      onUploadProgress: opts.data?.onUploadProgress
+    })
+  });
+};

package/dist/runtime/plugin.mjs

@@ -121,7 +121,20 @@ export default defineNuxtPlugin((nuxtApp) => {
             set: "set"
           }
         },
+        custom: {
+          invalid_file_type: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
+          invalid_file_size: "\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E40\u0E01\u0E34\u0E19\u0E01\u0E27\u0E48\u0E32\u0E17\u0E35\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14 {{size}} Mb"
+        },
         en
+      },
+      en: {
+        zod: {
+          ...en
+        },
+        custom: {
+          invalid_file_type: "Invalid file type",
+          invalid_file_size: "Invalid exceed of file size {{size}} Mb"
+        }
       }
     }
   });

package/dist/runtime/types/config.d.ts

@@ -1 +1 @@
-export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination' | 'notification';
+export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination' | 'notification' | 'uploadFileInput';

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

@@ -9,3 +9,4 @@ export { icon } from './icon';
 export { modal } from './modal';
 export { slideover } from './slideover';
 export { breadcrumb } from './breadcrumb';
+export { uploadFileInputClassicAuto } from './uploadFileInputClassicAuto';

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

@@ -9,3 +9,4 @@ export { icon } from "./icon.mjs";
 export { modal } from "./modal.mjs";
 export { slideover } from "./slideover.mjs";
 export { breadcrumb } from "./breadcrumb.mjs";
+export { uploadFileInputClassicAuto } from "./uploadFileInputClassicAuto.mjs";

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

@@ -33,7 +33,8 @@ export const table = {
       class: "-m-1.5 text-gray-700 font-normal"
     },
     loadingState: {
-      label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..."
+      label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14...",
+      icon: "i-svg-spinners:180-ring-with-bg"
     },
     emptyState: {
       label: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"

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

@@ -0,0 +1,8 @@
+export declare const uploadFileInputClassicAuto: {
+    base: string;
+    wrapper: string;
+    selectFileBox: string;
+    placeholder: string;
+    previewURL: string;
+    default: {};
+};

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

@@ -0,0 +1,8 @@
+export const uploadFileInputClassicAuto = {
+  base: "rounded-lg ring-1 ring-inset ring-gray-300 shadow-sm bg-white px-3 py-2",
+  wrapper: "flex items-center justify-between gap-4",
+  selectFileBox: "flex items-center gap-2 truncate",
+  placeholder: "truncate text-gray-400 text-sm",
+  previewURL: "mt-4 max-w-[300px] rounded",
+  default: {}
+};

package/package.json

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