@finema/core 1.4.216 → 1.4.217

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

@@ -1,151 +1,151 @@
-<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">
-            {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
-          </p>
-          <Badge v-if="selectedFile" size="xs" variant="outline">
-            {{
-              fileAllocate.isSelectedFileUseMb.value
-                ? `${fileAllocate.selectedFileSizeMb.value} MB`
-                : `${fileAllocate.selectedFileSizeKb.value} KB`
-            }}
-          </Badge>
-        </div>
-        <div v-if="selectedFile">
-          <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"
-          />
-          <Icon
-            v-if="upload.status.value.isLoading"
-            name="i-svg-spinners:180-ring-with-bg"
-            class="text-primary"
-          />
-        </div>
-      </div>
-    </div>
-    <img v-if="imagePreviewURL && value" :src="imagePreviewURL" alt="" :class="ui.previewURL" />
-  </FieldWrapper>
-</template>
-
-<script lang="tsx" setup>
-import { _get, ref, StringHelper, toRef, useUI, useUiConfig, useWatchTrue } from '#imports'
-import { type IUploadFileProps } from './types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import { type IUploadRequest, useUploadLoader } from '#core/composables/useUpload'
-import { uploadFileInputClassicAuto } from '#core/ui.config'
-import i18next from 'i18next'
-import { checkMaxSize, useFileAllocate, useFileProgress } from '#core/helpers/componentHelper'
-import type { IFileValue } from '#core/components/Form/types'
-
-const config = useUiConfig<typeof uploadFileInputClassicAuto>(
-  uploadFileInputClassicAuto,
-  'uploadFileInputClassicAuto'
-)
-
-const emits = defineEmits(['success'])
-const props = withDefaults(defineProps<IUploadFileProps>(), {
-  bodyKey: 'file',
-  responseURL: 'url',
-  responsePath: 'path',
-  selectFileLabel: 'เลือกไฟล์',
-})
-
-const { wrapperProps, setErrors, value } = useFieldHOC<IFileValue>(props)
-
-const request: IUploadRequest = {
-  pathURL: props.uploadPathURL,
-  requestOptions: props.requestOptions,
-}
-
-const upload = useUploadLoader(request)
-
-const fileInput = ref<HTMLInputElement>()
-const selectedFile = ref<File | undefined>()
-
-const fileAllocate = useFileAllocate(selectedFile, props)
-const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
-const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
-
-const handleOpenFile = () => {
-  fileInput.value?.click()
-}
-
-const handleChange = (e: Event) => {
-  const file = (e.target as HTMLInputElement).files?.[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result && file) {
-    selectedFile.value = file
-    const formData = new FormData()
-
-    formData.append(props.bodyKey, file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-
-  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
-
-  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
-}
-
-useWatchTrue(
-  () => upload.status.value.isSuccess,
-  () => {
-    value.value = {
-      url: _get(upload.data.value, props.responseURL),
-      path: _get(upload.data.value, props.responsePath),
-      name: upload.data.value.name,
-      size: upload.data.value.size,
-    }
-
-    emits('success', value.value)
-  }
-)
-
-useWatchTrue(
-  () => upload.status.value.isError,
-  () => {
-    setErrors(StringHelper.getError(upload.status.value.errorData))
-  }
-)
-</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">
+            {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
+          </p>
+          <Badge v-if="selectedFile" size="xs" variant="outline">
+            {{
+              fileAllocate.isSelectedFileUseMb.value
+                ? `${fileAllocate.selectedFileSizeMb.value} MB`
+                : `${fileAllocate.selectedFileSizeKb.value} KB`
+            }}
+          </Badge>
+        </div>
+        <div v-if="selectedFile">
+          <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"
+          />
+          <Icon
+            v-if="upload.status.value.isLoading"
+            name="i-svg-spinners:180-ring-with-bg"
+            class="text-primary"
+          />
+        </div>
+      </div>
+    </div>
+    <img v-if="imagePreviewURL && value" :src="imagePreviewURL" alt="" :class="ui.previewURL" />
+  </FieldWrapper>
+</template>
+
+<script lang="tsx" setup>
+import { _get, ref, StringHelper, toRef, useUI, useUiConfig, useWatchTrue } from '#imports'
+import { type IUploadFileProps } from './types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { type IUploadRequest, useUploadLoader } from '#core/composables/useUpload'
+import { uploadFileInputClassicAuto } from '#core/ui.config'
+import i18next from 'i18next'
+import { checkMaxSize, useFileAllocate, useFileProgress } from '#core/helpers/componentHelper'
+import type { IFileValue } from '#core/components/Form/types'
+
+const config = useUiConfig<typeof uploadFileInputClassicAuto>(
+  uploadFileInputClassicAuto,
+  'uploadFileInputClassicAuto'
+)
+
+const emits = defineEmits(['success'])
+const props = withDefaults(defineProps<IUploadFileProps>(), {
+  bodyKey: 'file',
+  responseURL: 'url',
+  responsePath: 'path',
+  selectFileLabel: 'เลือกไฟล์',
+})
+
+const { wrapperProps, setErrors, value } = useFieldHOC<IFileValue>(props)
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const upload = useUploadLoader(request)
+
+const fileInput = ref<HTMLInputElement>()
+const selectedFile = ref<File | undefined>()
+
+const fileAllocate = useFileAllocate(selectedFile, props)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
+
+const handleOpenFile = () => {
+  fileInput.value?.click()
+}
+
+const handleChange = (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    selectedFile.value = file
+    const formData = new FormData()
+
+    formData.append(props.bodyKey, file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
+
+  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
+}
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    value.value = {
+      url: _get(upload.data.value, props.responseURL),
+      path: _get(upload.data.value, props.responsePath),
+      name: upload.data.value.name,
+      size: upload.data.value.size,
+    }
+
+    emits('success', value.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    setErrors(StringHelper.getError(upload.status.value.errorData))
+  }
+)
+</script>