@finema/core 1.4.115 → 1.4.116

package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{item.vue → ItemUpload.vue}

@@ -1,179 +1,161 @@
-<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 || 'url']"
-          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" size="xl">
-            <div class="absolute -top-8 left-0 flex w-full justify-between text-gray-600">
-              <p>{{ selectedFile?.name }}</p>
-              <Icon
-                name="i-heroicons-x-mark"
-                class="size-6 cursor-pointer hover:text-gray-400"
-                @click="() => (isPreviewOpen = false)"
-              />
-            </div>
-            <img
-              :src="upload.data.value[responseKey || 'url']"
-              alt="image-preview"
-              class="w-full rounded-lg"
-            />
-          </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>
+<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[responseURL!]"
+          alt="img"
+        />
+        <div :class="[ui.imageItem.onPreview.previewActionWrapper]">
+          <Icon
+            title="ลบไฟล์"
+            :name="ui.action.deleteIcon"
+            :class="[ui.imageItem.onPreview.actionBtnClass]"
+            @click="handleDeleteFile"
+          />
+        </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 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,
+      name: props.selectedFile?.name,
+      size: +(props.selectedFile?.size || 0),
+    })
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    emits('error', upload.status.value.errorData)
+  }
+)
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <div :class="[ui.imageItem.wrapper]">
+    <div class="w-full">
+      <div :class="[ui.imageItem.onPreview.wrapper]">
+        <img :class="[ui.imageItem.onPreview.previewImgClass]" :src="selectedFile.url" 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" size="xl">
+            <div class="absolute -top-8 left-0 flex w-full justify-between text-gray-600">
+              <p v-if="selectedFile?.name">{{ selectedFile?.name }}</p>
+              <Icon
+                name="i-heroicons-x-mark"
+                class="size-6 cursor-pointer hover:text-gray-400"
+                @click="() => (isPreviewOpen = false)"
+              />
+            </div>
+            <img
+              :src="selectedFile.url"
+              alt="image-preview"
+              class="mx-auto max-w-full rounded-lg"
+            />
+          </Modal>
+        </div>
+      </div>
+
+      <div :class="[ui.imageItem.onPreview.previewTextWrapper]">
+        <p :class="[ui.imageItem.onPreview.previewText]">{{ selectedFile.name }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type uploadFileDropzoneImage } from '#core/ui.config'
+import type { IUploadDropzoneImageAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types'
+import { ref } from '#imports'
+import type { IFileValue } from '#core/components/Form/types'
+
+const emits = defineEmits(['delete'])
+
+defineProps<
+  {
+    ui: typeof uploadFileDropzoneImage
+    selectedFile: IFileValue
+  } & IUploadDropzoneImageAutoMultipleProps
+>()
+
+const isPreviewOpen = ref<boolean>(false)
+
+const handleDeleteFile = () => {
+  emits('delete')
+}
+</script>