@finema/core 1.4.90 → 1.4.91

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

@@ -1,243 +1,349 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="[
-        ui.base,
-        {
-          [ui.disabled]: isDisabled,
-          [ui.background.default]: !isOverDropZone && !isDisabled,
-          [ui.background.dragover]: isOverDropZone && !isDisabled,
-        },
-      ]"
-    >
-      <Icon
-        v-if="selectedFile"
-        :name="ui.default.closeIcon"
-        :class="[ui.button.delete]"
-        @click="handleDeleteFile"
-      />
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @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>
-          <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` }}
-            </Badge>
-            <div>
-              <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"
-              />
-            </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>
-          </div>
-          <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useDropZone } from '@vueuse/core'
-import { type IUploadDropzoneAutoProps } from './types'
-import { isImage, checkMaxSize, checkFileType } from '#core/helpers/componentHelper'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import {
-  type IUploadRequest,
-  computed,
-  ref,
-  toRef,
-  useUI,
-  useUiConfig,
-  useUploadLoader,
-  useWatchTrue,
-  StringHelper,
-  _get,
-} from '#imports'
-import { uploadFileDropzone } from '#core/ui.config'
-import i18next from 'i18next'
-
-const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
-
-const props = withDefaults(defineProps<IUploadDropzoneAutoProps>(), {})
-const emits = defineEmits(['change', 'success', 'delete'])
-
-const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)
-
-const request: IUploadRequest = {
-  pathURL: props.uploadPathURL,
-  requestOptions: props.requestOptions,
-}
-
-const upload = useUploadLoader(request)
-
-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 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 isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1000 > 1024)
-
-const onDrop = (files: File[] | null) => {
-  if (props.isDisabled || files?.length === 0 || !files) return
-
-  const file = files[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result && file) {
-    selectedFile.value = file
-    const formData = new FormData()
-
-    emits('change', file)
-
-    formData.append(_get(props, props.bodyKey || 'file'), file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
-  onDrop,
-})
-
-const handleChange = (e: Event) => {
-  if (props.isDisabled) return
-
-  const file = (e.target as HTMLInputElement).files?.[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result && file) {
-    selectedFile.value = file
-    const formData = new FormData()
-
-    emits('change', file)
-
-    formData.append(props.bodyKey || 'file', file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const handleOpenFile = () => {
-  fileInputRef.value?.click()
-}
-
-const handleDeleteFile = () => {
-  fileInputRef.value?.value && (fileInputRef.value.value = '')
-  selectedFile.value = undefined
-  onChange(undefined)
-  emits('delete')
-}
-
-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) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
-    } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
-    }
-
-    return false
-  }
-
-  setErrors('')
-
-  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,
-  () => {
-    value.value = _get(upload.data.value, props.responseKey || 'url')
-    emits('success', upload.data.value)
-  }
-)
-
-useWatchTrue(
-  () => upload.status.value.isError,
-  () => {
-    setErrors(StringHelper.getError(upload.status.value.errorData))
-  }
-)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="[
+        ui.base,
+        {
+          [ui.disabled]: isDisabled,
+          [ui.background.default]: !isOverDropZone && !isDisabled,
+          [ui.background.dragover]: isOverDropZone && !isDisabled,
+          [ui.failed]: upload.status.value.isError,
+        },
+      ]"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="hidden"
+        :name="name"
+        :accept="acceptFile"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <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>
+          <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="[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">{{ 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>
+
+        <!-- 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>
+        </div>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useDropZone } from '@vueuse/core'
+import { type IUploadDropzoneAutoProps } from './types'
+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 {
+  type IUploadRequest,
+  computed,
+  ref,
+  toRef,
+  useUI,
+  useUiConfig,
+  useUploadLoader,
+  useWatchTrue,
+  StringHelper,
+  _get,
+} from '#imports'
+import { uploadFileDropzone } from '#core/ui.config'
+import i18next from 'i18next'
+
+const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
+
+const props = withDefaults(defineProps<IUploadDropzoneAutoProps>(), {})
+const emits = defineEmits(['change', 'success', 'delete'])
+
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const upload = useUploadLoader(request)
+
+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 | string>(0)
+const isPreviewOpen = ref<boolean>(false)
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const fileAllocate = computed(() =>
+  getFileAllocate(props.maxSize ?? 0, selectedFile.value?.size ?? 0)
+)
+
+const onDrop = (files: File[] | null) => {
+  if (props.isDisabled || files?.length === 0 || !files) return
+
+  const file = files[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    selectedFile.value = file
+    const formData = new FormData()
+
+    emits('change', file)
+
+    formData.append(_get(props, props.bodyKey || 'file'), file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
+  onDrop,
+})
+
+const handleChange = (e: Event) => {
+  if (props.isDisabled) return
+
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    selectedFile.value = file
+    const formData = new FormData()
+
+    emits('change', file)
+
+    formData.append(props.bodyKey || 'file', file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = () => {
+  fileInputRef.value?.value && (fileInputRef.value.value = '')
+  selectedFile.value = undefined
+  onChange(undefined)
+  emits('delete')
+}
+
+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, fileAllocate.value.acceptFileSizeKb ?? 0)
+
+  if (!maxSize) {
+    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: fileAllocate.value.acceptFileSizeKb })
+      )
+    }
+
+    return false
+  }
+
+  setErrors('')
+
+  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 = 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
+  )
+}
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    value.value = _get(upload.data.value, props.responseKey || 'url')
+    emits('success', upload.data.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    setErrors(StringHelper.getError(upload.status.value.errorData))
+  }
+)
+</script>

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;