@finema/core 1.4.220 → 2.1.0

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

@@ -1,178 +0,0 @@
-<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 v-if="value && value.length === 0" :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 v-else :class="ui.imageItemWrapper">
-            <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)"
-            />
-            <itemUpload v-bind="$props" is-adding-btn :ui="ui" @add="handleOpenFile" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useDropZone } from '@vueuse/core'
-import { type IUploadDropzoneImageAutoMultipleProps } from './types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import { _get, computed, ref, toRef, StringHelper, useUI, useUiConfig, ArrayHelper } from '#imports'
-import { uploadFileDropzoneImage } from '#core/ui.config'
-import ItemUpload from './ItemUpload.vue'
-import ItemView from './ItemView.vue'
-import type { IFileValue } from '#core/components/Form/types'
-
-const config = useUiConfig<typeof uploadFileDropzoneImage>(
-  uploadFileDropzoneImage,
-  'uploadFileDropzoneImage'
-)
-
-const props = withDefaults(defineProps<IUploadDropzoneImageAutoMultipleProps>(), {
-  accept: 'image/*',
-  bodyKey: 'file',
-  responseURL: 'url',
-  responsePath: 'path',
-  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
-  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
-  uploadAddLabel: 'อัพโหลด',
-})
-
-const emits = defineEmits(['change', 'success', 'delete'])
-const selectedFiles = ref<Array<{ file: File; key: string }>>([])
-
-const { wrapperProps, handleChange: onChange, value } = useFieldHOC<IFileValue[]>(props)
-
-const { ui } = useUI('uploadFileDropzoneImage', 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 = [
-      ...selectedFiles.value,
-      {
-        file,
-        key: StringHelper.genString(),
-      },
-    ]
-
-    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 = [
-      ...selectedFiles.value,
-      {
-        file,
-        key: StringHelper.genString(),
-      },
-    ]
-
-    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/types.d.ts

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

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

@@ -1,95 +0,0 @@
-<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>

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

@@ -1,13 +0,0 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
-export interface IUploadFileClassicFieldProps extends IFieldProps {
-    selectFileLabel?: string;
-    accept?: string[] | string;
-    maxSize?: number;
-    leadingIcon?: string;
-    trailingIcon?: string;
-    icon?: string;
-    loadingIcon?: string;
-}
-export type IUploadFileClassicField = IFormFieldBase<INPUT_TYPES.UPLOAD_FILE_CLASSIC, IUploadFileClassicFieldProps, {
-    change?: (value: Event) => void;
-}>;

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

@@ -1,151 +0,0 @@
-<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>

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

@@ -1,18 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
-export interface IUploadFileProps extends IFieldProps {
-    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
-        baseURL: string;
-    };
-    uploadPathURL?: string;
-    selectFileLabel?: string;
-    accept?: string[] | string;
-    bodyKey?: string;
-    responseURL?: string;
-    responsePath?: string;
-    maxSize?: number;
-    imagePreviewURL?: string;
-}
-export type IUploadFileField = IFormFieldBase<INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO, IUploadFileProps, {
-    success?: (res: any) => void;
-}>;