@finema/core 1.4.98 → 1.4.100

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

@@ -1,198 +1,167 @@
-<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>
+<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,
+  useFileAllocate,
+  useFileProgress,
+} from '#core/helpers/componentHelper'
+import { type uploadFileDropzoneImage } from '#core/ui.config'
+import type { IUploadDropzoneImageAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types'
+import { type IUploadRequest, onMounted, ref, toRef, 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 upload = useUploadLoader(request)
+const errMsg = ref<string>('')
+
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const fileAllocate = useFileAllocate(toRef(props.selectedFile), props)
+
+const handleDeleteFile = () => {
+  emits('delete')
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const fileType = checkFileType(file, fileAllocate.acceptFile.value ?? '')
+
+  if (!fileType) {
+    errMsg.value = i18next.t('custom:invalid_file_type')
+
+    return false
+  }
+
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
+
+  if (!maxSize) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
+      errMsg.value = i18next.t('custom:invalid_file_size_mb', {
+        size: fileAllocate.acceptFileSizeMb.value,
+      })
+    } else {
+      errMsg.value = i18next.t('custom:invalid_file_size_kb', {
+        size: fileAllocate.acceptFileSizeKb.value,
+      })
+    }
+
+    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/InputUploadFileClassic/index.vue

@@ -1,103 +1,95 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div :class="[ui.base]">
-      <input
-        ref="fileInput"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @change="handleChange"
-      />
-      <div :class="[ui.wrapper]">
-        <div :class="[ui.selectFileBox]">
-          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
-          <p :class="ui.placeholder">
-            {{ value?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
-          </p>
-          <Badge v-if="value" size="xs" variant="outline">
-            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
-          </Badge>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type IUploadFileClassicFieldProps } from '#core/components/Form/InputUploadFileClassic/types'
-import { useUiConfig } from '#core/composables/useConfig'
-import { uploadFileInputClassicAuto } from '#core/ui.config'
-import { computed, ref, toRef, useUI } from '#imports'
-import i18next from 'i18next'
-
-const config = useUiConfig<typeof uploadFileInputClassicAuto>(
-  uploadFileInputClassicAuto,
-  'uploadFileInputClassicAuto'
-)
-
-const emits = defineEmits(['change'])
-const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {
-  selectFileLabel: 'เลือกไฟล์',
-})
-
-const { value, wrapperProps, setErrors } = useFieldHOC<File | undefined>(props)
-const selectedFileSizeKb = computed(() => ((value.value?.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() => ((value.value?.size || 0) / 1000 / 1000).toFixed(2))
-
-const isSelectedFileUseMb = computed(() => (value.value?.size || 0) / 1000 > 1024)
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2))
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFile = computed(() =>
-  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
-)
-
-const fileInput = ref<HTMLInputElement>()
-
-const handleOpenFile = () => {
-  fileInput.value?.click()
-}
-
-const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
-
-const checkMaxSize = (file: File): boolean => {
-  if (acceptFileSizeKb.value) {
-    return file.size / 1000 <= acceptFileSizeKb.value
-  }
-
-  return true
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-
-  const maxSize = checkMaxSize(file)
-
-  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 handleChange = (e: Event) => {
-  const file = (e.target as HTMLInputElement).files?.[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result && file) {
-    value.value = file
-    emits('change', file)
-  }
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div :class="[ui.base]">
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :name="name"
+        :accept="fileAllocate.acceptFile.value"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <div :class="[ui.selectFileBox]">
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
+          <p :class="ui.placeholder">
+            {{ value?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
+          </p>
+          <Badge v-if="value" size="xs" variant="outline">
+            {{
+              fileAllocate.isSelectedFileUseMb.value
+                ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                : `${fileAllocate.selectedFileSizeKb.value} KB`
+            }}
+          </Badge>
+        </div>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { type IUploadFileClassicFieldProps } from '#core/components/Form/InputUploadFileClassic/types'
+import { useUiConfig } from '#core/composables/useConfig'
+import { uploadFileInputClassicAuto } from '#core/ui.config'
+import { ref, toRef, useUI } from '#imports'
+import i18next from 'i18next'
+import { checkMaxSize, useFileAllocate } from '#core/helpers/componentHelper'
+
+const config = useUiConfig<typeof uploadFileInputClassicAuto>(
+  uploadFileInputClassicAuto,
+  'uploadFileInputClassicAuto'
+)
+
+const emits = defineEmits(['change'])
+const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {
+  selectFileLabel: 'เลือกไฟล์',
+})
+
+const { value, wrapperProps, setErrors } = useFieldHOC<File | undefined>(props)
+const fileAllocate = useFileAllocate(value, props)
+
+const fileInput = ref<HTMLInputElement>()
+
+const handleOpenFile = () => {
+  fileInput.value?.click()
+}
+
+const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const maxSize = checkMaxSize(file, props.maxSize)
+
+  if (!maxSize) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
+      setErrors(
+        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
+      )
+    } else {
+      setErrors(
+        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
+      )
+    }
+
+    return false
+  }
+
+  setErrors('')
+
+  return true
+}
+
+const handleChange = (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    value.value = file
+    emits('change', file)
+  }
+}
+</script>