@finema/core 1.4.201 → 1.4.203

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

@@ -1,170 +1,170 @@
-<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>
-      <ItemView
-        v-for="(file, index) in value"
-        :key="file.url"
-        v-bind="$props"
-        :ui="ui"
-        :selected-file="file"
-        @delete="handleDeleteFileView(index)"
-      />
-      <ItemUpload
-        v-for="(file, index) in selectedFiles"
-        :key="file.key"
-        v-bind="$props"
-        :ui="ui"
-        :selected-file="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, StringHelper, ArrayHelper } from '#imports'
-import { uploadFileDropzone } from '#core/ui.config'
-import ItemView from './ItemView.vue'
-import ItemUpload from './ItemUpload.vue'
-import type { IFileValue } from '#core/components/Form/types'
-
-const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
-const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {
-  bodyKey: 'file',
-  responseURL: 'url',
-  responsePath: 'path',
-  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
-  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
-  retryLabel: 'ลองอีกครั้ง',
-  uploadingLabel: 'กำลังอัพโหลด...',
-  uploadFailedLabel: 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง',
-})
-
-const emits = defineEmits(['change', 'success', 'delete'])
-const selectedFiles = ref<Array<{ file: File; key: string }>>([])
-const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<IFileValue[]>(props)
-
-const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
-
-const fileInputRef = ref<HTMLInputElement | null>()
-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,
-        key: StringHelper.genString(),
-      },
-      ...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,
-        key: StringHelper.genString(),
-      },
-      ...selectedFiles.value,
-    ]
-
-    emits('change', value.value)
-  }
-
-  fileInputRef.value?.value && (fileInputRef.value.value = '')
-}
-
-const handleOpenFile = () => {
-  fileInputRef.value?.click()
-}
-
-const handleDeleteFile = (index: number) => {
-  const updatedValue = [...selectedFiles.value]
-
-  updatedValue.splice(index, 1)
-  selectedFiles.value = updatedValue
-}
-
-const handleDeleteFileView = (index: number) => {
-  const updatedValue = [...value.value]
-
-  updatedValue.splice(index, 1)
-  value.value = updatedValue
-  emits('delete')
-}
-
-const handleError = (index: number, error: any) => {}
-
-const handleSuccess = (index: number, res: any) => {
-  value.value = [
-    {
-      url: _get(res, props.responseURL),
-      path: _get(res, props.responsePath),
-      name: res.name,
-      size: res.size,
-    },
-    ...ArrayHelper.toArray(value.value),
-  ]
-
-  selectedFiles.value.splice(index, 1)
-  emits('change', value.value)
-  emits('success', value.value)
-}
-</script>
+<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>
+      <ItemView
+        v-for="(file, index) in value"
+        :key="file.url"
+        v-bind="$props"
+        :ui="ui"
+        :selected-file="file"
+        @delete="handleDeleteFileView(index)"
+      />
+      <ItemUpload
+        v-for="(file, index) in selectedFiles"
+        :key="file.key"
+        v-bind="$props"
+        :ui="ui"
+        :selected-file="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, StringHelper, ArrayHelper } from '#imports'
+import { uploadFileDropzone } from '#core/ui.config'
+import ItemView from './ItemView.vue'
+import ItemUpload from './ItemUpload.vue'
+import type { IFileValue } from '#core/components/Form/types'
+
+const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
+const props = withDefaults(defineProps<IUploadDropzoneAutoMultipleProps>(), {
+  bodyKey: 'file',
+  responseURL: 'url',
+  responsePath: 'path',
+  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
+  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
+  retryLabel: 'ลองอีกครั้ง',
+  uploadingLabel: 'กำลังอัพโหลด...',
+  uploadFailedLabel: 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง',
+})
+
+const emits = defineEmits(['change', 'success', 'delete'])
+const selectedFiles = ref<Array<{ file: File; key: string }>>([])
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<IFileValue[]>(props)
+
+const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
+
+const fileInputRef = ref<HTMLInputElement | null>()
+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,
+        key: StringHelper.genString(),
+      },
+      ...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,
+        key: StringHelper.genString(),
+      },
+      ...selectedFiles.value,
+    ]
+
+    emits('change', value.value)
+  }
+
+  fileInputRef.value?.value && (fileInputRef.value.value = '')
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = (index: number) => {
+  const updatedValue = [...selectedFiles.value]
+
+  updatedValue.splice(index, 1)
+  selectedFiles.value = updatedValue
+}
+
+const handleDeleteFileView = (index: number) => {
+  const updatedValue = [...value.value]
+
+  updatedValue.splice(index, 1)
+  value.value = updatedValue
+  emits('delete')
+}
+
+const handleError = (index: number, error: any) => {}
+
+const handleSuccess = (index: number, res: any) => {
+  value.value = [
+    {
+      url: _get(res, props.responseURL),
+      path: _get(res, props.responsePath),
+      name: res.name,
+      size: res.size,
+    },
+    ...ArrayHelper.toArray(value.value),
+  ]
+
+  selectedFiles.value.splice(index, 1)
+  emits('change', value.value)
+  emits('success', value.value)
+}
+</script>

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

@@ -1,161 +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[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>
+<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>