@finema/core 1.4.90 → 1.4.92

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

@@ -1,174 +1,174 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div :class="[ui.base]">
-      <input
-        ref="fileInput"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @change="handleChange"
-      />
-      <div :class="[ui.wrapper]">
-        <div :class="[ui.selectFileBox]">
-          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
-          <p :class="ui.placeholder">
-            {{ selectedFile?.name ?? placeholder ?? 'No file chosen' }}
-          </p>
-          <Badge v-if="selectedFile" size="xs" variant="outline">
-            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} 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,
-  computed,
-  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'
-
-const config = useUiConfig<typeof uploadFileInputClassicAuto>(
-  uploadFileInputClassicAuto,
-  'uploadFileInputClassicAuto'
-)
-
-const emits = defineEmits(['success'])
-const props = withDefaults(defineProps<IUploadFileProps>(), {})
-
-const { wrapperProps, setErrors, value } = useFieldHOC<string>(props)
-
-const request: IUploadRequest = {
-  pathURL: props.uploadPathURL,
-  requestOptions: props.requestOptions,
-}
-
-const upload = useUploadLoader(request)
-
-const fileInput = ref<HTMLInputElement>()
-const selectedFile = ref<File | undefined>()
-const percent = ref<number>(0)
-
-const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() =>
-  ((selectedFile.value?.size || 0) / 1000 / 1000).toFixed(2)
-)
-
-const isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1000 > 1024)
-
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2))
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
-const acceptFile = computed(() =>
-  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
-)
-
-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', file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-
-  const maxSize = checkMaxSize(file)
-
-  if (!maxSize) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
-    } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
-    }
-
-    return false
-  }
-
-  setErrors('')
-
-  return true
-}
-
-const checkMaxSize = (file: File): boolean => {
-  if (acceptFileSizeKb.value) {
-    return file.size / 1000 <= acceptFileSizeKb.value
-  }
-
-  return true
-}
-
-const onUploadProgress = (progressEvent: ProgressEvent) => {
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
-}
-
-const onDownloadProgress = (progressEvent: ProgressEvent) => {
-  if (progressEvent.total === 0) {
-    percent.value = 100
-
-    return
-  }
-
-  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
-}
-
-useWatchTrue(
-  () => upload.status.value.isSuccess,
-  () => {
-    value.value = _get(upload.data.value, props.responseKey || 'url')
-    emits('success', upload.data.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="acceptFile"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <div :class="[ui.selectFileBox]">
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
+          <p :class="ui.placeholder">
+            {{ selectedFile?.name ?? placeholder ?? 'No file chosen' }}
+          </p>
+          <Badge v-if="selectedFile" size="xs" variant="outline">
+            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} 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,
+  computed,
+  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'
+
+const config = useUiConfig<typeof uploadFileInputClassicAuto>(
+  uploadFileInputClassicAuto,
+  'uploadFileInputClassicAuto'
+)
+
+const emits = defineEmits(['success'])
+const props = withDefaults(defineProps<IUploadFileProps>(), {})
+
+const { wrapperProps, setErrors, value } = useFieldHOC<string>(props)
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const upload = useUploadLoader(request)
+
+const fileInput = ref<HTMLInputElement>()
+const selectedFile = ref<File | undefined>()
+const percent = ref<number>(0)
+
+const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1000).toFixed(2))
+const selectedFileSizeMb = computed(() =>
+  ((selectedFile.value?.size || 0) / 1000 / 1000).toFixed(2)
+)
+
+const isSelectedFileUseMb = computed(() => (selectedFile.value?.size || 0) / 1000 > 1024)
+
+const acceptFileSizeKb = computed(() => props.maxSize)
+const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2))
+const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+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', file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const maxSize = checkMaxSize(file)
+
+  if (!maxSize) {
+    if (isAcceptFileUseMb.value) {
+      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    } else {
+      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+    }
+
+    return false
+  }
+
+  setErrors('')
+
+  return true
+}
+
+const checkMaxSize = (file: File): boolean => {
+  if (acceptFileSizeKb.value) {
+    return file.size / 1000 <= acceptFileSizeKb.value
+  }
+
+  return true
+}
+
+const onUploadProgress = (progressEvent: ProgressEvent) => {
+  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.8
+}
+
+const onDownloadProgress = (progressEvent: ProgressEvent) => {
+  if (progressEvent.total === 0) {
+    percent.value = 100
+
+    return
+  }
+
+  percent.value = (Math.floor((progressEvent.loaded * 100) / progressEvent.total) || 0) * 0.2 + 80
+}
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    value.value = _get(upload.data.value, props.responseKey || 'url')
+    emits('success', upload.data.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    setErrors(StringHelper.getError(upload.status.value.errorData))
+  }
+)
+</script>

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

@@ -1,6 +1,6 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
-<script lang="ts" setup></script>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>

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

@@ -13,6 +13,7 @@ import { type IUploadFileField } from '#core/components/Form/InputUploadFileClas
 import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
 import { type IUploadDropzoneAutoField } from '#core/components/Form/InputUploadDropzoneAuto/types';
 import type { INumberField } from '#core/components/Form/InputNumber/types';
+import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -29,7 +30,8 @@ export declare const enum INPUT_TYPES {
     UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
     UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
     UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
-    UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO"
+    UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO",
+    UPLOAD_DROPZONE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_AUTO_MULTIPLE"
 }
 export interface IFieldProps {
     form?: FormContext;
@@ -58,4 +60,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField;
+export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField;

package/dist/runtime/components/Form/types.mjs

@@ -15,5 +15,6 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO"] = "UPLOAD_DROPZONE_AUTO";
+  INPUT_TYPES2["UPLOAD_DROPZONE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_AUTO_MULTIPLE";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

package/dist/runtime/components/Icon.vue

@@ -1,23 +1,23 @@
-<template>
-  <UIcon :name="name" :dynamic="dynamicValue" />
-</template>
-
-<script lang="ts" setup>
-import { computed, useUiConfig } from '#imports'
-import { icon } from '#core/ui.config'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  dynamic: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const config = useUiConfig<typeof icon>(icon, 'icon')
-
-const dynamicValue = computed(() => props.dynamic || config.dynamic)
-</script>
+<template>
+  <UIcon :name="name" :dynamic="dynamicValue" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useUiConfig } from '#imports'
+import { icon } from '#core/ui.config'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  dynamic: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useUiConfig<typeof icon>(icon, 'icon')
+
+const dynamicValue = computed(() => props.dynamic || config.dynamic)
+</script>

package/dist/runtime/components/Image.vue

@@ -1,36 +1,36 @@
-<template>
-  <img :src="getSrc" />
-</template>
-<script lang="ts" setup>
-import { useImage } from '@vueuse/core'
-import { computed } from 'vue'
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  loadingSrc: {
-    type: String,
-    default: '',
-  },
-  errorSrc: {
-    type: String,
-    default: '',
-  },
-})
-
-const { isLoading, error } = useImage({ src: props.src })
-
-const getSrc = computed(() => {
-  if (isLoading.value) {
-    return props.loadingSrc
-  }
-
-  if (error.value) {
-    return props.errorSrc
-  }
-
-  return props.src
-})
-</script>
+<template>
+  <img :src="getSrc" />
+</template>
+<script lang="ts" setup>
+import { useImage } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  loadingSrc: {
+    type: String,
+    default: '',
+  },
+  errorSrc: {
+    type: String,
+    default: '',
+  },
+})
+
+const { isLoading, error } = useImage({ src: props.src })
+
+const getSrc = computed(() => {
+  if (isLoading.value) {
+    return props.loadingSrc
+  }
+
+  if (error.value) {
+    return props.errorSrc
+  }
+
+  return props.src
+})
+</script>

package/dist/runtime/components/Loader.vue

@@ -1,27 +1,27 @@
-<template>
-  <div
-    v-if="isLoading"
-    :class="[
-      'flex  items-center justify-center',
-      $attrs.class,
-      {
-        'min-h-[200px]': !$attrs.class,
-      },
-    ]"
-  >
-    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
-  </div>
-  <slot v-else />
-</template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
+<template>
+  <div
+    v-if="isLoading"
+    :class="[
+      'flex  items-center justify-center',
+      $attrs.class,
+      {
+        'min-h-[200px]': !$attrs.class,
+      },
+    ]"
+  >
+    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+  </div>
+  <slot v-else />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>