@finema/core 1.4.91 → 1.4.93

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.91",
+  "version": "1.4.93",
   "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.91";
+const version = "1.4.93";
 
 const colors = {
   black: "#20243E",

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

@@ -104,6 +104,7 @@
         v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
         :class="option.class"
         :form="form"
+        :request-options="option.props.requestOptions"
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
@@ -122,6 +123,22 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputUploadDropzoneAutoMultiple
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzoneImageAutoMultiple
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
     </template>
   </div>
 </template>

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

@@ -61,24 +61,12 @@
               </p>
             </div>
             <div :class="[ui.action.wrapper]">
-              <PImage
+              <Icon
                 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>
+                :name="ui.action.previewIcon"
+                :class="[ui.action.iconClass]"
+                @click="() => (isPreviewOpen = true)"
+              />
               <Icon
                 :name="ui.action.downloadIcon"
                 :class="[ui.action.iconClass]"
@@ -89,6 +77,9 @@
                 :class="[ui.action.iconClass]"
                 @click="handleDeleteFile"
               />
+              <Modal v-model="isPreviewOpen" :title="selectedFile?.name">
+                <img :src="generateURL(selectedFile)" alt="image-preview" />
+              </Modal>
             </div>
           </div>
         </div>
@@ -118,6 +109,7 @@ const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploa
 
 const props = withDefaults(defineProps<IUploadDropzoneProps>(), {})
 const emit = defineEmits(['change', 'delete'])
+const isPreviewOpen = ref<boolean>(false)
 
 const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)
 

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

@@ -192,7 +192,13 @@ import i18next from 'i18next'
 
 const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
 
-const props = withDefaults(defineProps<IUploadDropzoneAutoProps>(), {})
+const props = withDefaults(defineProps<IUploadDropzoneAutoProps>(), {
+  bodyKey: 'file',
+  responseKey: 'url',
+  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
+  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
+})
+
 const emits = defineEmits(['change', 'success', 'delete'])
 
 const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)

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

@@ -0,0 +1,283 @@
+<template>
+  <div
+    :class="[
+      ui.base,
+      ui.background.default,
+      {
+        [ui.failed]: upload.status.value.isError || errMsg,
+      },
+    ]"
+  >
+    <!-- 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="[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
+            :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]"
+            :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" :title="selectedFile?.name">
+            {{ StringHelper.truncate(selectedFile?.name, 40) }}
+          </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="generateURL(selectedFile)" alt="image-preview" />
+          </Modal>
+        </div>
+      </div>
+    </div>
+
+    <!-- Failed State -->
+    <div
+      v-if="selectedFile && (upload.status.value.isError || errMsg)"
+      :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" :title="selectedFile?.name">
+            {{ StringHelper.truncate(selectedFile?.name, 40) }}
+          </h1>
+          <p class="text-danger truncate font-light">
+            {{ errMsg ? errMsg : uploadFailedLabel }}
+          </p>
+          <Button
+            v-if="upload.status.value.isError"
+            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>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  checkFileType,
+  checkMaxSize,
+  downloadFileFromURL,
+  getFileAllocate,
+  generateURL,
+  isImage,
+} from '#core/helpers/componentHelper'
+import { type uploadFileDropzone } from '#core/ui.config'
+import type { IUploadDropzoneAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types'
+import {
+  computed,
+  type IUploadRequest,
+  onMounted,
+  ref,
+  StringHelper,
+  useUploadLoader,
+  useWatchTrue,
+} from '#imports'
+import i18next from 'i18next'
+
+const emits = defineEmits(['success', 'error', 'delete'])
+const props = defineProps<
+  {
+    ui: typeof uploadFileDropzone
+    selectedFile: File
+  } & IUploadDropzoneAutoMultipleProps
+>()
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const isPreviewOpen = ref<boolean>(false)
+const percent = ref<number | string>(0)
+const upload = useUploadLoader(request)
+const errMsg = ref<string>('')
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const fileAllocate = computed(() =>
+  getFileAllocate(props.maxSize ?? 0, props.selectedFile?.size ?? 0)
+)
+
+const handleDeleteFile = () => {
+  emits('delete')
+}
+
+const handleRetryUpload = () => {
+  const formData = new FormData()
+
+  formData.append(props.bodyKey!, props.selectedFile)
+  upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+}
+
+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
+
+  const fileType = checkFileType(file, acceptFile.value ?? '')
+
+  if (!fileType) {
+    errMsg.value = i18next.t('custom:invalid_file_type')
+
+    return false
+  }
+
+  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+
+  if (!maxSize) {
+    if (fileAllocate.value.isAcceptFileUseMb) {
+      errMsg.value = i18next.t('custom:invalid_file_size_mb', {
+        size: fileAllocate.value.acceptFileSizeMb,
+      })
+    } else {
+      errMsg.value = i18next.t('custom:invalid_file_size_kb', {
+        size: fileAllocate.value.acceptFileSizeKb,
+      })
+    }
+
+    return false
+  }
+
+  errMsg.value = ''
+
+  return true
+}
+
+onMounted(() => {
+  const result = handleCheckFileCondition(props.selectedFile)
+
+  if (result) {
+    const formData = new FormData()
+
+    formData.append(props.bodyKey!, props.selectedFile)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+})
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    emits('success', upload.data.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    emits('error', upload.status.value.errorData)
+  }
+)
+</script>

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

@@ -0,0 +1,126 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div class="space-y-3">
+      <div
+        ref="dropzoneRef"
+        :class="[
+          ui.base,
+          {
+            [ui.disabled]: isDisabled,
+            [ui.background.default]: !isOverDropZone && !isDisabled,
+            [ui.background.dragover]: isOverDropZone && !isDisabled,
+          },
+        ]"
+      >
+        <input
+          ref="fileInputRef"
+          type="file"
+          class="hidden"
+          :name="name"
+          :accept="acceptFile"
+          :disabled="isDisabled"
+          multiple
+          @change="handleChange"
+        />
+        <div :class="[ui.wrapper]">
+          <div :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>
+            <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
+          </div>
+        </div>
+      </div>
+      <Item
+        v-for="(file, index) in selectedFiles"
+        :key="file.name + index"
+        v-bind="$props"
+        :ui="ui"
+        :selected-file="file"
+        @success="handleSuccess(index, $event)"
+        @delete="handleDeleteFile(index)"
+        @error="handleError(index, $event)"
+      />
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+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 { 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',
+  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
+  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
+  retryLabel: 'ลองอีกครั้ง',
+  uploadingLabel: 'กำลังอัพโหลด...',
+  uploadFailedLabel: 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง',
+})
+
+const emits = defineEmits(['change', 'success', 'delete'])
+const selectedFiles = ref<File[]>([])
+
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File[]>(props)
+
+const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
+
+const fileInputRef = ref<HTMLInputElement>()
+const dropzoneRef = ref<HTMLDivElement>()
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const onDrop = (files: File[] | null) => {
+  if (props.isDisabled || files?.length === 0 || !files) return
+
+  for (const file of files) {
+    selectedFiles.value = [file, ...selectedFiles.value]
+    emits('change', value.value)
+  }
+}
+
+const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
+  onDrop,
+})
+
+const handleChange = (e: Event) => {
+  if (props.isDisabled) return
+
+  for (const file of (e.target as HTMLInputElement).files ?? []) {
+    selectedFiles.value = [file, ...selectedFiles.value]
+    emits('change', value.value)
+  }
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+  onChange(undefined)
+  emits('delete')
+}
+
+const handleError = (index: number, error: any) => {}
+
+const handleSuccess = (index: number, any: any) => {
+  value.value = [_get(any, props.responseKey), ...(value.value || [])]
+  emits('change', value.value)
+  emits('success', value.value)
+}
+</script>

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

@@ -0,0 +1,22 @@
+import { type AxiosRequestConfig } from 'axios';
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
+export interface IUploadDropzoneAutoMultipleProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    selectFileLabel?: string;
+    selectFileSubLabel?: string;
+    uploadingLabel?: string;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
+    accept?: string[] | string;
+    bodyKey?: string;
+    responseKey?: string;
+    maxSize?: number;
+}
+export type IUploadDropzoneAutoMultipleField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE, IUploadDropzoneAutoMultipleProps, {
+    change: (value: File[] | undefined) => void;
+    success: (res: any) => void;
+    delete: () => void;
+}>;

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

@@ -0,0 +1,134 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div class="space-y-3">
+      <div
+        ref="dropzoneRef"
+        :class="[
+          ui.base,
+          {
+            [ui.disabled]: isDisabled,
+            [ui.background.default]: !isOverDropZone && !isDisabled,
+            [ui.background.dragover]: isOverDropZone && !isDisabled,
+          },
+        ]"
+      >
+        <input
+          ref="fileInputRef"
+          type="file"
+          class="hidden"
+          :name="name"
+          :accept="acceptFile"
+          :disabled="isDisabled"
+          multiple
+          @change="handleChange"
+        />
+        <div :class="[ui.wrapper]">
+          <div v-if="selectedFiles.length === 0" :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>
+            <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
+          </div>
+
+          <div v-else :class="ui.imageItemWrapper">
+            <Item
+              v-for="(file, index) in selectedFiles"
+              :key="file.name + index"
+              v-bind="$props"
+              :ui="ui"
+              :selected-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>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+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 { uploadFileDropzoneImage } from '#core/ui.config'
+import Item from './item.vue'
+
+const config = useUiConfig<typeof uploadFileDropzoneImage>(
+  uploadFileDropzoneImage,
+  'uploadFileDropzoneImage'
+)
+
+const props = withDefaults(defineProps<IUploadDropzoneImageAutoMultipleProps>(), {
+  accept: 'image/*',
+  bodyKey: 'file',
+  responseKey: 'url',
+  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
+  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
+  uploadAddLabel: 'อัพโหลด',
+})
+
+const emits = defineEmits(['change', 'success', 'delete'])
+const selectedFiles = ref<File[]>([])
+
+const { wrapperProps, handleChange: onChange, value } = useFieldHOC<File[]>(props)
+
+const { ui } = useUI('uploadFileDropzoneImage', toRef(props, 'ui'), config)
+
+const fileInputRef = ref<HTMLInputElement>()
+const dropzoneRef = ref<HTMLDivElement>()
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const onDrop = (files: File[] | null) => {
+  if (props.isDisabled || files?.length === 0 || !files) return
+
+  for (const file of files) {
+    selectedFiles.value = [...selectedFiles.value, file]
+
+    emits('change', value.value)
+  }
+}
+
+const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
+  onDrop,
+})
+
+const handleChange = (e: Event) => {
+  if (props.isDisabled) return
+
+  for (const file of (e.target as HTMLInputElement).files ?? []) {
+    selectedFiles.value = [...selectedFiles.value, file]
+    emits('change', value.value)
+  }
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+  onChange(undefined)
+  emits('delete')
+}
+
+const handleError = (index: number, error: any) => {}
+
+const handleSuccess = (index: number, any: any) => {
+  value.value = [_get(any, props.responseKey), ...(value.value || [])]
+  emits('change', value.value)
+  emits('success', value.value)
+}
+</script>

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

@@ -0,0 +1,198 @@
+<template>
+  <div :class="[ui.imageItem.wrapper]">
+    <div v-if="isAddingBtn" class="w-full">
+      <div :class="[ui.action.addingWrapper]" @click="$emit('add')">
+        <Icon :name="ui.action.addingIcon" :class="[ui.action.addingBtnClass]" />
+        <p :class="[ui.action.addingTextClass]">{{ uploadAddLabel }}</p>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="selectedFile && upload.status.value.isLoading" class="w-full">
+      <div :class="[ui.imageItem.onLoading.wrapper]">
+        <div :class="[ui.imageItem.onLoading.percentClass]">{{ percent }}%</div>
+        <UProgress :value="percent" />
+      </div>
+    </div>
+
+    <!-- Success State -->
+    <div v-if="selectedFile && upload.status.value.isSuccess" class="w-full">
+      <div :class="[ui.imageItem.onPreview.wrapper]">
+        <img
+          :class="[ui.imageItem.onPreview.previewImgClass]"
+          :src="upload.data.value[responseKey]"
+          alt="img"
+        />
+        <div :class="[ui.imageItem.onPreview.previewActionWrapper]">
+          <Icon
+            title="ดูตัวอย่าง"
+            :name="ui.action.previewIcon"
+            :class="[ui.imageItem.onPreview.actionBtnClass]"
+            @click="() => (isPreviewOpen = true)"
+          />
+          <Icon
+            title="ลบไฟล์"
+            :name="ui.action.deleteIcon"
+            :class="[ui.imageItem.onPreview.actionBtnClass]"
+            @click="handleDeleteFile"
+          />
+          <Modal v-model="isPreviewOpen" :title="selectedFile?.name">
+            <img :src="upload.data.value[responseKey]" alt="image-preview" />
+          </Modal>
+        </div>
+      </div>
+
+      <div :class="[ui.imageItem.onPreview.previewTextWrapper]">
+        <p :class="[ui.imageItem.onPreview.previewText]">{{ selectedFile.name }}</p>
+      </div>
+    </div>
+
+    <!-- Failed State -->
+    <div v-if="selectedFile && upload.status.value.isError" class="w-full">
+      <div :class="[ui.imageItem.onFailed.wrapper]">
+        <img
+          :class="[ui.imageItem.onFailed.failedImgClass]"
+          :src="generateURL(selectedFile)"
+          alt="img"
+        />
+        <div :class="[ui.imageItem.onFailed.failedActionWrapper]">
+          <Icon
+            title="ลบไฟล์"
+            :name="ui.action.deleteIcon"
+            :class="[ui.imageItem.onFailed.actionBtnClass]"
+            @click="handleDeleteFile"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  checkFileType,
+  checkMaxSize,
+  generateURL,
+  getFileAllocate,
+} from '#core/helpers/componentHelper'
+import { type uploadFileDropzoneImage } from '#core/ui.config'
+import type { IUploadDropzoneImageAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types'
+import {
+  computed,
+  type IUploadRequest,
+  onMounted,
+  ref,
+  StringHelper,
+  useUploadLoader,
+  useWatchTrue,
+} from '#imports'
+import i18next from 'i18next'
+
+const emits = defineEmits(['success', 'error', 'delete', 'add'])
+const props = defineProps<
+  {
+    ui: typeof uploadFileDropzoneImage
+    selectedFile?: File
+    isAddingBtn?: boolean
+  } & IUploadDropzoneImageAutoMultipleProps
+>()
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const isPreviewOpen = ref<boolean>(false)
+const percent = ref<number | string>(0)
+const upload = useUploadLoader(request)
+const errMsg = ref<string>('')
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const fileAllocate = computed(() =>
+  getFileAllocate(props.maxSize ?? 0, props.selectedFile?.size ?? 0)
+)
+
+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
+
+  const fileType = checkFileType(file, acceptFile.value ?? '')
+
+  if (!fileType) {
+    errMsg.value = i18next.t('custom:invalid_file_type')
+
+    return false
+  }
+
+  const maxSize = checkMaxSize(file, fileAllocate.value.acceptFileSizeKb ?? 0)
+
+  if (!maxSize) {
+    if (fileAllocate.value.isAcceptFileUseMb) {
+      errMsg.value = i18next.t('custom:invalid_file_size_mb', {
+        size: fileAllocate.value.acceptFileSizeMb,
+      })
+    } else {
+      errMsg.value = i18next.t('custom:invalid_file_size_kb', {
+        size: fileAllocate.value.acceptFileSizeKb,
+      })
+    }
+
+    return false
+  }
+
+  errMsg.value = ''
+
+  return true
+}
+
+onMounted(() => {
+  if (props.isAddingBtn) return
+
+  const result = handleCheckFileCondition(props.selectedFile)
+
+  if (result) {
+    const formData = new FormData()
+
+    formData.append(props.bodyKey!, props.selectedFile!)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+})
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    emits('success', upload.data.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    emits('error', upload.status.value.errorData)
+  }
+)
+</script>

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

@@ -0,0 +1,20 @@
+import { type AxiosRequestConfig } from 'axios';
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
+export interface IUploadDropzoneImageAutoMultipleProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    selectFileLabel?: string;
+    selectFileSubLabel?: string;
+    uploadAddLabel?: string;
+    accept?: string[] | string;
+    bodyKey?: string;
+    responseKey?: string;
+    maxSize?: number;
+}
+export type IUploadDropzoneImageAutoMultipleField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE, IUploadDropzoneImageAutoMultipleProps, {
+    change: (value: File[] | undefined) => void;
+    success: (res: any) => void;
+    delete: () => void;
+}>;

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

@@ -12,9 +12,9 @@
       />
       <div :class="[ui.wrapper]">
         <div :class="[ui.selectFileBox]">
-          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
           <p :class="ui.placeholder">
-            {{ value?.name ?? placeholder ?? 'No file chosen' }}
+            {{ value?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
           </p>
           <Badge v-if="value" size="xs" variant="outline">
             {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
@@ -39,7 +39,9 @@ const config = useUiConfig<typeof uploadFileInputClassicAuto>(
 )
 
 const emits = defineEmits(['change'])
-const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {})
+const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {
+  selectFileLabel: 'เลือกไฟล์',
+})
 
 const { value, wrapperProps, setErrors } = useFieldHOC<File | undefined>(props)
 const selectedFileSizeKb = computed(() => ((value.value?.size || 0) / 1000).toFixed(2))

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

@@ -12,9 +12,9 @@
       />
       <div :class="[ui.wrapper]">
         <div :class="[ui.selectFileBox]">
-          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
           <p :class="ui.placeholder">
-            {{ selectedFile?.name ?? placeholder ?? 'No file chosen' }}
+            {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
           </p>
           <Badge v-if="selectedFile" size="xs" variant="outline">
             {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
@@ -67,7 +67,11 @@ const config = useUiConfig<typeof uploadFileInputClassicAuto>(
 )
 
 const emits = defineEmits(['success'])
-const props = withDefaults(defineProps<IUploadFileProps>(), {})
+const props = withDefaults(defineProps<IUploadFileProps>(), {
+  bodyKey: 'file',
+  responseKey: 'url',
+  selectFileLabel: 'เลือกไฟล์',
+})
 
 const { wrapperProps, setErrors, value } = useFieldHOC<string>(props)
 
@@ -110,7 +114,7 @@ const handleChange = (e: Event) => {
     selectedFile.value = file
     const formData = new FormData()
 
-    formData.append(props.bodyKey || 'file', file)
+    formData.append(props.bodyKey, file)
     upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
   }
 }
@@ -160,7 +164,7 @@ const onDownloadProgress = (progressEvent: ProgressEvent) => {
 useWatchTrue(
   () => upload.status.value.isSuccess,
   () => {
-    value.value = _get(upload.data.value, props.responseKey || 'url')
+    value.value = _get(upload.data.value, props.responseKey)
     emits('success', upload.data.value)
   }
 )

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

@@ -13,6 +13,8 @@ import { type IUploadFileField } from '#core/components/Form/InputUploadFileClas
 import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
 import { type IUploadDropzoneAutoField } from '#core/components/Form/InputUploadDropzoneAuto/types';
 import type { INumberField } from '#core/components/Form/InputNumber/types';
+import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types';
+import type { IUploadDropzoneImageAutoMultipleField } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -29,7 +31,9 @@ export declare const enum INPUT_TYPES {
     UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
     UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
     UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
-    UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO"
+    UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO",
+    UPLOAD_DROPZONE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_AUTO_MULTIPLE",
+    UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
 }
 export interface IFieldProps {
     form?: FormContext;
@@ -58,4 +62,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField;
+export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;

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

@@ -15,5 +15,7 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO"] = "UPLOAD_DROPZONE_AUTO";
+  INPUT_TYPES2["UPLOAD_DROPZONE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_AUTO_MULTIPLE";
+  INPUT_TYPES2["UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

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

@@ -0,0 +1,7 @@
+export declare const useNotification: () => {
+    info: (notification: Notification) => void;
+    success: (notification: Notification) => void;
+    warning: (notification: Notification) => void;
+    error: (notification: Notification) => void;
+    remove: any;
+};

package/dist/runtime/composables/useNotification.mjs

@@ -0,0 +1,39 @@
+import { useToast } from "#imports";
+export const useNotification = () => {
+  const toast = useToast();
+  const info = (notification) => {
+    toast.add({
+      icon: "ph:info",
+      color: "info",
+      ...notification
+    });
+  };
+  const success = (notification) => {
+    toast.add({
+      icon: "ph:check-circle",
+      color: "success",
+      ...notification
+    });
+  };
+  const warning = (notification) => {
+    toast.add({
+      icon: "ph:warning",
+      color: "warning",
+      ...notification
+    });
+  };
+  const error = (notification) => {
+    toast.add({
+      icon: "ph:x-circle",
+      color: "danger",
+      ...notification
+    });
+  };
+  return {
+    info,
+    success,
+    warning,
+    error,
+    remove: toast.remove
+  };
+};

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' | 'uploadFileInputClassicAuto' | 'uploadFileDropzone';
+export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination' | 'notification' | 'uploadFileInputClassicAuto' | 'uploadFileDropzone' | 'uploadFileDropzoneImage';

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

@@ -11,3 +11,4 @@ export { slideover } from './slideover';
 export { breadcrumb } from './breadcrumb';
 export { uploadFileInputClassicAuto } from './uploadFileInputClassicAuto';
 export { uploadFileDropzone } from './uploadFileDropzone';
+export { uploadFileDropzoneImage } from './uploadDropzoneImage';

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

@@ -11,3 +11,4 @@ export { slideover } from "./slideover.mjs";
 export { breadcrumb } from "./breadcrumb.mjs";
 export { uploadFileInputClassicAuto } from "./uploadFileInputClassicAuto.mjs";
 export { uploadFileDropzone } from "./uploadFileDropzone.mjs";
+export { uploadFileDropzoneImage } from "./uploadDropzoneImage.mjs";

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

@@ -0,0 +1,83 @@
+export declare const uploadFileDropzoneImage: {
+    imageItemWrapper: string;
+    imageItem: {
+        wrapper: string;
+        onLoading: {
+            wrapper: string;
+            percentClass: string;
+        };
+        onPreview: {
+            wrapper: string;
+            previewImgClass: string;
+            previewActionWrapper: string;
+            actionBtnClass: string;
+            previewTextWrapper: string;
+            previewText: string;
+        };
+        onFailed: {
+            wrapper: string;
+            failedImgClass: string;
+            failedActionWrapper: string;
+            actionBtnClass: string;
+        };
+    };
+    base: string;
+    wrapper: string;
+    disabled: string;
+    failed: string;
+    placeholderWrapper: string;
+    placeholder: string;
+    labelWrapper: string;
+    onLoading: {
+        wrapper: string;
+        placeholderWrapper: string;
+        placeholderImgIcon: string;
+        placeholderFileIcon: string;
+        placeholderIconClass: string;
+        textWrapper: string;
+        loadingIcon: string;
+        loadingIconClass: string;
+    };
+    onPreview: {
+        wrapper: 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;
+        addingWrapper: string;
+        iconClass: string;
+        deleteIconClass: string;
+        retryBtnClass: string;
+        addingBtnClass: string;
+        addingTextClass: string;
+        previewIcon: string;
+        downloadIcon: string;
+        deleteIcon: string;
+        retryIcon: string;
+        addingIcon: string;
+    };
+    background: {
+        default: string;
+        dragover: string;
+    };
+    labelIcon: string;
+    default: {
+        filePreviewIcon: string;
+        uploadIcon: string;
+        placeholderImgIcon: string;
+        failedImgIcon: string;
+        loadingIcon: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+import { uploadFileDropzone } from "./uploadFileDropzone.mjs";
+export const uploadFileDropzoneImage = {
+  ...uploadFileDropzone,
+  imageItemWrapper: "flex w-full flex-wrap gap-4",
+  imageItem: {
+    wrapper: "max-w-[96px]",
+    onLoading: {
+      wrapper: "flex size-24 flex-col items-center justify-center overflow-hidden rounded-lg border-[1px] border-dashed p-2",
+      percentClass: "text-primary"
+    },
+    onPreview: {
+      wrapper: "relative size-24 overflow-hidden rounded-lg ring-[1px] ring-gray-100",
+      previewImgClass: "size-full object-cover",
+      previewActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 opacity-0 transition hover:bg-black/50 hover:opacity-100",
+      actionBtnClass: "size-7 cursor-pointer text-white",
+      previewTextWrapper: "mt-2 truncate",
+      previewText: "truncate text-center text-sm"
+    },
+    onFailed: {
+      wrapper: "ring-danger relative size-24 overflow-hidden rounded-lg ring-[1px]",
+      failedImgClass: "size-full object-cover",
+      failedActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 bg-white/50",
+      actionBtnClass: "text-danger size-7 cursor-pointer"
+    }
+  }
+};

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

@@ -34,13 +34,17 @@ export declare const uploadFileDropzone: {
     };
     action: {
         wrapper: string;
+        addingWrapper: string;
         iconClass: string;
         deleteIconClass: string;
         retryBtnClass: string;
+        addingBtnClass: string;
+        addingTextClass: string;
         previewIcon: string;
         downloadIcon: string;
         deleteIcon: string;
         retryIcon: string;
+        addingIcon: string;
     };
     background: {
         default: string;

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

@@ -34,13 +34,17 @@ export const uploadFileDropzone = {
   },
   action: {
     wrapper: "flex items-center space-x-4",
+    addingWrapper: "flex size-24 flex-col items-center justify-center overflow-hidden rounded-lg border-[1px] border-dashed p-2 cursor-pointer transition hover:bg-gray-100",
     iconClass: "size-6 text-gray-400 cursor-pointer",
     deleteIconClass: "size-6 text-danger cursor-pointer",
     retryBtnClass: "px-0",
+    addingBtnClass: "size-7 text-gray-500",
+    addingTextClass: "text-center text-sm text-gray-500",
     previewIcon: "i-ic:outline-remove-red-eye",
     downloadIcon: "i-ic:outline-file-download",
     deleteIcon: "ph:trash",
-    retryIcon: "ph:arrow-counter-clockwise"
+    retryIcon: "ph:arrow-counter-clockwise",
+    addingIcon: "i-material-symbols:add"
   },
   background: {
     default: "bg-white border-gray-border",

package/package.json

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