@finema/core 1.4.92 → 1.4.94

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

@@ -1,282 +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 || 'url']"
-            :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="URL.createObjectURL(props.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,
-  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 || 'file', 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 || 'file', 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>
+<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

@@ -27,9 +27,9 @@
             <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
             <div :class="[ui.labelWrapper]">
               <p class="text-primary cursor-pointer" @click="handleOpenFile">
-                {{ selectFileLabel ?? 'คลิกเพื่อเลือกไฟล์' }}
+                {{ selectFileLabel }}
               </p>
-              <p>{{ selectFileSubLabel ?? 'หรือ ลากและวางที่นี่' }}</p>
+              <p>{{ selectFileSubLabel }}</p>
             </div>
             <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
           </div>
@@ -60,7 +60,16 @@ import Item from './Item.vue'
 
 const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
 
-const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {})
+const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {
+  bodyKey: 'file',
+  responseKey: 'url',
+  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
+  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
+  retryLabel: 'ลองอีกครั้ง',
+  uploadingLabel: 'กำลังอัพโหลด...',
+  uploadFailedLabel: 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง',
+})
+
 const emits = defineEmits(['change', 'success', 'delete'])
 const selectedFiles = ref<File[]>([])
 
@@ -110,7 +119,7 @@ const handleDeleteFile = (index: number) => {
 const handleError = (index: number, error: any) => {}
 
 const handleSuccess = (index: number, any: any) => {
-  value.value = [_get(any, props.responseKey || 'url'), ...(value.value || [])]
+  value.value = [_get(any, props.responseKey), ...(value.value || [])]
   emits('change', value.value)
   emits('success', value.value)
 }