@finema/core 1.4.220 → 2.1.0

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

@@ -1,362 +0,0 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="[
-        ui.base,
-        {
-          [ui.disabled]: isDisabled,
-          [ui.background.default]: !isOverDropZone && !isDisabled,
-          [ui.background.dragover]: isOverDropZone && (!isDisabled || !isReadonly),
-          [ui.failed]: upload.status.value.isError,
-        },
-      ]"
-    >
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="fileAllocate.acceptFile.value"
-        :disabled="isDisabled || isReadonly"
-        @change="handleChange"
-      />
-      <div :class="[ui.wrapper]">
-        <div v-if="!selectedFile && !value" :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.value
-                    ? `${fileAllocate.selectedFileSizeMb.value} MB`
-                    : `${fileAllocate.selectedFileSizeKb.value} 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="value" :class="[ui.onPreview.wrapper]">
-          <div :class="[ui.onPreview.previewImgWrapper]">
-            <div v-if="isImageFromPath(value.path)" class="size-full overflow-hidden">
-              <img :src="value.url" :class="[ui.onPreview.previewImgClass]" alt="img-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">{{ value.name }}</h1>
-              <p class="truncate text-sm font-light text-gray-400">
-                {{
-                  fileAllocateFromPath.isSelectedFileUseMb.value
-                    ? `${fileAllocateFromPath.selectedFileSizeMb.value} MB`
-                    : `${fileAllocateFromPath.selectedFileSizeKb.value} KB`
-                }}
-              </p>
-            </div>
-            <div :class="[ui.action.wrapper]">
-              <a v-if="isPDFFromPath(value.path)" :href="value.url" target="_blank" class="flex">
-                <Icon
-                  :name="ui.action.previewIcon"
-                  :class="[ui.action.iconClass]"
-                  title="ดูตัวอย่าง"
-                />
-              </a>
-              <Icon
-                v-if="isImageFromPath(value.path) || isVideoFromPath(value.path)"
-                :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
-                v-if="!(isDisabled || isReadonly)"
-                :name="ui.action.deleteIcon"
-                :class="[ui.action.iconClass]"
-                title="ลบไฟล์"
-                @click="handleDeleteFile"
-              />
-              <Modal v-model="isPreviewOpen" :title="value.name">
-                <img
-                  v-if="isImageFromPath(value.path)"
-                  :src="value.url"
-                  alt="img-preview"
-                  class="mx-auto max-w-full rounded-lg"
-                />
-                <video
-                  v-else-if="isVideoFromPath(value.path)"
-                  :src="value.url"
-                  controls
-                  class="mx-auto max-w-full"
-                />
-              </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,
-  downloadFileFromURL,
-  useFileAllocate,
-  useFileProgress,
-  isImageFromPath,
-  useFileSize,
-  isPDFFromPath,
-  isVideoFromPath,
-} from '#core/helpers/componentHelper'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import {
-  type IUploadRequest,
-  ref,
-  computed,
-  toRef,
-  useUI,
-  useUiConfig,
-  useUploadLoader,
-  useWatchTrue,
-  StringHelper,
-  _get,
-} from '#imports'
-import { uploadFileDropzone } from '#core/ui.config'
-import i18next from 'i18next'
-import type { IFileValue } from '#core/components/Form/types'
-
-const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
-
-const props = withDefaults(defineProps<IUploadDropzoneAutoProps>(), {
-  bodyKey: 'file',
-  responseURL: 'url',
-  responsePath: 'path',
-  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
-  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
-  uploadingLabel: 'กำลังอัพโหลด...',
-  uploadFailedLabel: 'อัพโหลดล้มเหลว, กรุณาลองอีกครั้ง',
-})
-
-const emits = defineEmits(['change', 'success', 'delete'])
-
-const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<IFileValue>(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 isPreviewOpen = ref<boolean>(false)
-
-const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
-const fileAllocate = useFileAllocate(selectedFile, props)
-const fileAllocateFromPath = computed(() => useFileSize(value.value?.size))
-
-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(props.bodyKey, file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const { isOverDropZone } = useDropZone(dropzoneRef as unknown as HTMLElement, {
-  onDrop,
-})
-
-const handleChange = (e: Event) => {
-  if (props.isDisabled || props.isReadonly) 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)
-    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, fileAllocate.acceptFile.value ?? '')
-
-  if (!fileType) {
-    setErrors(i18next.t('custom:invalid_file_type'))
-
-    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
-}
-
-const handleDownloadFile = () => {
-  downloadFileFromURL(value.value?.url, value.value?.name)
-}
-
-const handleRetryUpload = () => {
-  if (selectedFile.value) {
-    const formData = new FormData()
-
-    formData.append(props.bodyKey, selectedFile.value)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-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.file_name,
-      size: upload.data.value.size,
-    }
-
-    emits('success', value.value)
-  }
-)
-
-useWatchTrue(
-  () => upload.status.value.isError,
-  () => {
-    setErrors(StringHelper.getError(upload.status.value.errorData))
-  }
-)
-</script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts

@@ -1,23 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
-export interface IUploadDropzoneAutoProps extends IFieldProps {
-    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
-        baseURL: string;
-    };
-    uploadPathURL?: string;
-    selectFileLabel?: string;
-    selectFileSubLabel?: string;
-    uploadingLabel?: string;
-    uploadFailedLabel?: string;
-    retryLabel?: string;
-    accept?: string[] | string;
-    bodyKey?: string;
-    responseURL?: string;
-    responsePath?: string;
-    maxSize?: number;
-}
-export type IUploadDropzoneAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO, IUploadDropzoneAutoProps, {
-    change: (value: File | undefined) => void;
-    success: (res: any) => void;
-    delete: () => void;
-}>;

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

@@ -1,241 +0,0 @@
-<template>
-  <div
-    :class="[
-      ui.base,
-      ui.background.default,
-      {
-        [ui.failed]: upload.status.value.isError || errMsg,
-      },
-    ]"
-  >
-    <!-- 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.value
-                ? `${fileAllocate.selectedFileSizeMb.value} MB`
-                : `${fileAllocate.selectedFileSizeKb.value} 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[responseURL!]"
-            :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" :title="selectedFile?.name">
-            {{ StringHelper.truncate(selectedFile?.name, 40) }}
-          </h1>
-          <p class="truncate text-sm font-light text-gray-400">
-            {{
-              fileAllocate.isSelectedFileUseMb.value
-                ? `${fileAllocate.selectedFileSizeMb.value} MB`
-                : `${fileAllocate.selectedFileSizeKb.value} KB`
-            }}
-          </p>
-        </div>
-        <div :class="[ui.action.wrapper]">
-          <Icon
-            :name="ui.action.deleteIcon"
-            :class="[ui.action.iconClass]"
-            title="ลบไฟล์"
-            @click="handleDeleteFile"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Failed State -->
-    <div
-      v-if="selectedFile && (upload.status.value.isError || errMsg)"
-      :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" :title="selectedFile?.name">
-            {{ StringHelper.truncate(selectedFile?.name, 40) }}
-          </h1>
-          <p class="text-danger truncate font-light">
-            {{ errMsg ? errMsg : uploadFailedLabel }}
-          </p>
-          <Button
-            v-if="upload.status.value.isError"
-            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>
-</template>
-<script lang="ts" setup>
-import {
-  checkFileType,
-  checkMaxSize,
-  isImage,
-  useFileAllocate,
-  useFileProgress,
-} from '#core/helpers/componentHelper'
-import { type uploadFileDropzone } from '#core/ui.config'
-import type { IUploadDropzoneAutoMultipleProps } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types'
-import {
-  type IUploadRequest,
-  onMounted,
-  ref,
-  toRef,
-  StringHelper,
-  useUploadLoader,
-  useWatchTrue,
-} from '#imports'
-import i18next from 'i18next'
-
-const emits = defineEmits(['success', 'error', 'delete'])
-const props = defineProps<
-  {
-    ui: typeof uploadFileDropzone
-    selectedFile: File
-  } & IUploadDropzoneAutoMultipleProps
->()
-
-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 handleRetryUpload = () => {
-  const formData = new FormData()
-
-  formData.append(props.bodyKey!, props.selectedFile)
-  upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-}
-
-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(() => {
-  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,
-    })
-  }
-)
-
-useWatchTrue(
-  () => upload.status.value.isError,
-  () => {
-    emits('error', upload.status.value.errorData)
-  }
-)
-</script>