@finema/core 3.23.2 → 3.24.0

package/dist/runtime/components/Form/fileState/MultipleFilesState.vue

@@ -1,79 +1,77 @@
 <template>
-  <div :class="theme.multipleFilesWrapper()">
-    <div
-      v-for="(item, index) in fileItems"
-      :key="index"
-      :class="theme.fileItemWrapper()"
-    >
-      <!-- Uploading State -->
-      <div
-        v-if="item.state === UploadState.UPLOADING"
-        :class="theme.uploadingItemWrapper()"
-      >
-        <div :class="theme.uploadingIconWrapper()">
-          <Icon
-            :name="icons.filePreviewIcon"
-            :class="theme.uploadingIconClass()"
-          />
-        </div>
-        <div :class="theme.uploadingTextWrapper()">
-          <h1 class="truncate font-bold">
-            {{ item.file.name }}
-          </h1>
-          <div class="flex items-center gap-2">
-            <div :class="theme.progressBarWrapper()">
-              <div
-                :class="theme.progressBarFill()"
-                :style="{ width: `${item.progress}%` }"
-              />
-            </div>
-            <p class="text-sm text-gray-400">
-              {{ item.progress }}%
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Error State -->
-      <div
-        v-else-if="item.state === UploadState.ERROR"
-        :class="theme.errorItemWrapper()"
-      >
-        <div :class="theme.errorIconWrapper()">
-          <Icon
-            :name="icons.errorIcon"
-            :class="theme.errorIconClass()"
-          />
-        </div>
-        <div :class="theme.errorTextWrapper()">
-          <h1 class="truncate font-bold">
-            {{ item.file.name }}
-          </h1>
-          <p class="text-error-500 text-sm">
-            {{ item.error || uploadFailedLabel }}
-          </p>
-        </div>
-        <div :class="theme.errorActionWrapper()">
-          <Button
-            variant="link"
-            :icon="icons.actionRetryIcon"
-            :class="theme.actionRetryBtnClass()"
-            color="primary"
-            @click="$emit('retry', index)"
-          >
-            {{ retryLabel }}
-          </Button>
-          <Icon
-            v-if="!disabled && !readonly"
-            :name="icons.actionDeleteIcon"
-            :class="theme.actionIconClass()"
-            :title="messages.upload.remove"
-            @click="$emit('delete', index)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <div :class="theme.multipleFilesWrapper()">
+    <div
+      v-for="(item, index) in fileItems"
+      :key="index"
+      :class="theme.fileItemWrapper()"
+    >
+      <!-- Uploading State -->
+      <div
+        v-if="item.state === UploadState.UPLOADING"
+        :class="theme.uploadingItemWrapper()"
+      >
+        <div :class="theme.uploadingIconWrapper()">
+          <Icon
+            :name="icons.filePreviewIcon"
+            :class="theme.uploadingIconClass()"
+          />
+        </div>
+        <div :class="theme.uploadingTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <div class="flex items-center gap-2">
+            <div :class="theme.progressBarWrapper()">
+              <div
+                :class="theme.progressBarFill()"
+                :style="{ width: `${item.progress}%` }"
+              />
+            </div>
+            <p class="text-sm text-gray-400">{{ item.progress }}%</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div
+        v-else-if="item.state === UploadState.ERROR"
+        :class="theme.errorItemWrapper()"
+      >
+        <div :class="theme.errorIconWrapper()">
+          <Icon
+            :name="icons.errorIcon"
+            :class="theme.errorIconClass()"
+          />
+        </div>
+        <div :class="theme.errorTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <p class="text-sm text-error-500">
+            {{ item.error || uploadFailedLabel }}
+          </p>
+        </div>
+        <div :class="theme.errorActionWrapper()">
+          <Button
+            variant="link"
+            :icon="icons.actionRetryIcon"
+            :class="theme.actionRetryBtnClass()"
+            color="primary"
+            @click="$emit('retry', index)"
+          >
+            {{ retryLabel }}
+          </Button>
+          <Icon
+            v-if="!disabled && !readonly"
+            :name="icons.actionDeleteIcon"
+            :class="theme.actionIconClass()"
+            :title="messages.upload.remove"
+            @click="$emit('delete', index)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -90,7 +88,5 @@ defineProps({
   retryLabel: { type: String, required: false }
 });
 const icons = useUiIconConfig("uploadFileDropzone");
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

package/dist/runtime/components/Form/fileState/PreviewModal.vue

@@ -1,29 +1,29 @@
 <template>
-  <Modal
-    :close="{ onClick: () => emits('close', false) }"
-    :dismissible="false"
-    :title="value?.name"
+  <Modal
+    :close="{ onClick: () => emits('close', false) }"
+    :dismissible="false"
+    :title="value?.name"
     :ui="{
   content: 'max-w-3xl'
-}"
-  >
-    <template #body>
-      <div class="flex justify-center">
-        <img
-          v-if="value && isImageFromPath(value.path)"
-          :src="value.url"
-          alt="img-preview"
-          class="max-h-96 max-w-full rounded-lg"
-        />
-        <video
-          v-else-if="value && isVideoFromPath(value.path)"
-          :src="value.url"
-          controls
-          class="max-h-96 max-w-full"
-        />
-      </div>
-    </template>
-  </Modal>
+}"
+  >
+    <template #body>
+      <div class="flex justify-center">
+        <img
+          v-if="value && isImageFromPath(value.path)"
+          :src="value.url"
+          alt="img-preview"
+          class="max-h-96 max-w-full rounded-lg"
+        />
+        <video
+          v-else-if="value && isVideoFromPath(value.path)"
+          :src="value.url"
+          controls
+          class="max-h-96 max-w-full"
+        />
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/fileState/SuccessState.vue

@@ -4,9 +4,7 @@
       v-if="isImageFromPath(value.path)"
       :class="theme.onPreviewImgWrapper()"
     >
-      <div
-        class="size-full overflow-hidden"
-      >
+      <div class="size-full overflow-hidden">
         <img
           :src="value.url"
           :class="theme.onPreviewImgClass()"
@@ -74,12 +72,7 @@
 
 <script setup>
 import { useCoreMessages } from "#core/composables/useMessages";
-import {
-  isImageFromPath,
-  isPDFFromPath,
-  isVideoFromPath,
-  useFileSize
-} from "#core/helpers/componentHelper";
+import { isImageFromPath, isPDFFromPath, isVideoFromPath, useFileSize } from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
 defineEmits(["preview", "download", "delete"]);
 defineProps({
@@ -93,7 +86,5 @@ const getFileSizeFromValue = (fileValue) => {
   const allocate = useFileSize(fileValue.size || 0);
   return allocate.isSelectedFileUseMb.value ? `${allocate.selectedFileSizeMb.value} MB` : `${allocate.selectedFileSizeKb.value} KB`;
 };
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

package/dist/runtime/components/Form/fileState/useFileState.js

@@ -4,16 +4,8 @@ import { useCoreMessages } from "#core/composables/useMessages";
 import { computed, onScopeDispose, ref } from "#imports";
 export { UploadState };
 export const useFileState = (context) => {
-  const {
-    props,
-    emits,
-    onChange,
-    setErrors,
-    value
-  } = context;
-  const {
-    messages
-  } = useCoreMessages();
+  const { props, emits, onChange, setErrors, value } = context;
+  const { messages } = useCoreMessages();
   const selectedFile = ref();
   const currentObjectUrl = ref("");
   const currentState = computed(() => value.value ? UploadState.SUCCESS : UploadState.EMPTY);

package/dist/runtime/components/Form/fileState/useUploadImageState.js

@@ -19,9 +19,7 @@ const readImageSize = (file) => new Promise((resolve) => {
   image.src = url;
 });
 export const useUploadImageState = (context) => {
-  const {
-    messages
-  } = useCoreMessages();
+  const { messages } = useCoreMessages();
   return useUploadState(context, {
     defaultAccept: "image/*",
     validateExtra: async (file) => {

package/dist/runtime/components/Form/fileState/useUploadState.js

@@ -8,23 +8,10 @@ import { StringHelper } from "#core/utils/StringHelper";
 import { computed, ref } from "#imports";
 export { UploadState };
 export const useUploadState = (context, options = {}) => {
-  const {
-    props,
-    emits,
-    onChange,
-    setErrors,
-    value
-  } = context;
-  const {
-    messages,
-    format
-  } = useCoreMessages();
+  const { props, emits, onChange, setErrors, value } = context;
+  const { messages, format } = useCoreMessages();
   const selectedFile = ref();
-  const {
-    percent,
-    onDownloadProgress,
-    onUploadProgress
-  } = useFileProgress();
+  const { percent, onDownloadProgress, onUploadProgress } = useFileProgress();
   const upload = useUploadLoader({
     requestOptions: {
       ...props.requestOptions,
@@ -86,9 +73,11 @@ export const useUploadState = (context, options = {}) => {
   useWatchTrue(
     () => upload.status.value.isError,
     () => {
-      setErrors(format(messages.value.upload.error, {
-        message: StringHelper.getError(upload.status.value.errorData, messages.value.common.somethingWentWrong)
-      }));
+      setErrors(
+        format(messages.value.upload.error, {
+          message: StringHelper.getError(upload.status.value.errorData, messages.value.common.somethingWentWrong)
+        })
+      );
     }
   );
   return {

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.js

@@ -7,40 +7,31 @@ import { StringHelper } from "#core/utils/StringHelper";
 import { ArrayHelper, computed, ref, watch } from "#imports";
 export { UploadState };
 export const useUploadStateMultiple = (context) => {
-  const {
-    props,
-    emits,
-    onChange,
-    setErrors,
-    value
-  } = context;
-  const {
-    messages,
-    format
-  } = useCoreMessages();
+  const { props, emits, onChange, setErrors, value } = context;
+  const { messages, format } = useCoreMessages();
   const fileItems = ref([]);
   let nextId = 0;
   const updateFileItem = (id, updates) => {
-    fileItems.value = fileItems.value.map((item) => item.id === id ? {
-      ...item,
-      ...updates
-    } : item);
+    fileItems.value = fileItems.value.map(
+      (item) => item.id === id ? {
+        ...item,
+        ...updates
+      } : item
+    );
   };
   const removeFileItem = (id) => {
     fileItems.value = fileItems.value.filter((item) => item.id !== id);
   };
   const isFull = () => !!props.maxFiles && fileItems.value.length >= props.maxFiles;
   const setMaxFilesError = () => {
-    setErrors(format(messages.value.upload.maxFiles, {
-      max: props.maxFiles
-    }));
+    setErrors(
+      format(messages.value.upload.maxFiles, {
+        max: props.maxFiles
+      })
+    );
   };
   const uploadFile = async (id, file) => {
-    const {
-      percent,
-      onDownloadProgress,
-      onUploadProgress
-    } = useFileProgress();
+    const { percent, onDownloadProgress, onUploadProgress } = useFileProgress();
     const uploadLoader = useUploadLoader({
       requestOptions: {
         ...props.requestOptions,
@@ -49,9 +40,12 @@ export const useUploadStateMultiple = (context) => {
       },
       pathURL: props.uploadPathURL
     });
-    const stopProgressWatch = watch(percent, (progress) => updateFileItem(id, {
-      progress
-    }));
+    const stopProgressWatch = watch(
+      percent,
+      (progress) => updateFileItem(id, {
+        progress
+      })
+    );
     try {
       await uploadLoader.run({
         data: toUploadFormData(props.bodyKey, file)
@@ -95,7 +89,10 @@ export const useUploadStateMultiple = (context) => {
       }
     ];
     await uploadFile(id, file);
-    emits("change", fileItems.value.map((item) => item.file));
+    emits(
+      "change",
+      fileItems.value.map((item) => item.file)
+    );
   };
   const picker = useFilePicker(context, {
     multiple: true,
@@ -106,9 +103,7 @@ export const useUploadStateMultiple = (context) => {
     }
   });
   const isEmpty = computed(() => fileItems.value.length === 0);
-  const hasUploading = computed(
-    () => fileItems.value.some((item) => item.state === UploadState.UPLOADING)
-  );
+  const hasUploading = computed(() => fileItems.value.some((item) => item.state === UploadState.UPLOADING));
   const allSuccess = computed(
     () => fileItems.value.length > 0 && fileItems.value.every((item) => item.state === UploadState.SUCCESS)
   );

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

@@ -1,5 +1,5 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>

package/dist/runtime/components/Image.vue

@@ -1,32 +1,26 @@
 <template>
-  <UseImage v-bind="$props">
-    <template #loading>
-      <slot name="loading">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <Loader
-            :loading="true"
-          />
-        </div>
-      </slot>
-    </template>
-
-    <template #error>
-      <slot name="error">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <p class="text-error-400">
-            <Icon
-              name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
-            />
-          </p>
-        </div>
-      </slot>
-    </template>
-  </UseImage>
+  <UseImage v-bind="$props">
+    <template #loading>
+      <slot name="loading">
+        <div class="flex h-full w-full items-center justify-center">
+          <Loader :loading="true" />
+        </div>
+      </slot>
+    </template>
+
+    <template #error>
+      <slot name="error">
+        <div class="flex h-full w-full items-center justify-center">
+          <p class="text-error-400">
+            <Icon
+              name="i-heroicons:exclamation-circle-solid"
+              class="size-8 text-error-400"
+            />
+          </p>
+        </div>
+      </slot>
+    </template>
+  </UseImage>
 </template>
 
 <script setup>

package/dist/runtime/components/Loader.d.vue.ts

@@ -2,7 +2,7 @@ import { loaderTheme } from '#core/theme/loader';
 type __VLS_Props = {
     loading?: boolean;
     icon?: string;
-    ui?: typeof loaderTheme['slots'];
+    ui?: (typeof loaderTheme)['slots'];
     class?: any;
 };
 type __VLS_Slots = {

package/dist/runtime/components/Loader.vue

@@ -4,16 +4,19 @@
     name="loading"
   >
     <div
-
-      :class="theme.base({
-  class: [ui?.base, props.class]
-})"
+      :class="
+  theme.base({
+    class: [ui?.base, props.class]
+  })
+"
     >
       <Icon
         :name="icon"
-        :class="[theme.icon({
-  class: [ui?.icon]
-})]"
+        :class="[
+  theme.icon({
+    class: [ui?.icon]
+  })
+]"
       />
     </div>
   </slot>

package/dist/runtime/components/Loader.vue.d.ts

@@ -2,7 +2,7 @@ import { loaderTheme } from '#core/theme/loader';
 type __VLS_Props = {
     loading?: boolean;
     icon?: string;
-    ui?: typeof loaderTheme['slots'];
+    ui?: (typeof loaderTheme)['slots'];
     class?: any;
 };
 type __VLS_Slots = {

package/dist/runtime/components/Log/LogItem.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="text-xs">
     <div class="mb-2 flex items-center justify-between">
-      <p
-        class="font-semibold"
-      >
+      <p class="font-semibold">
         {{ title || "Log" }}
       </p>
       <Icon

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

@@ -1,8 +1,6 @@
 <template>
   <DevOnly>
-    <TeleportSafe
-      to="#dev-logs"
-    >
+    <TeleportSafe to="#dev-logs">
       <LogItem
         v-if="typeof data !== 'undefined'"
         :data="data"