@finema/core 3.4.0 → 3.5.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.4.0",
+  "version": "3.5.2",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "3.4.0";
+const version = "3.5.2";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.d.vue.ts

@@ -2,11 +2,11 @@ import type { IUploadDropzoneAutoMultipleProps } from './types.js';
 import type { IFileValue } from '#core/components/Form/types';
 declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMultipleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     success: (res: IFileValue) => any;
-    delete: (index: number) => any;
+    delete: (index: number, value: IFileValue) => any;
     change: (value: File[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoMultipleProps> & Readonly<{
     onSuccess?: ((res: IFileValue) => any) | undefined;
-    onDelete?: ((index: number) => any) | undefined;
+    onDelete?: ((index: number, value: IFileValue) => any) | undefined;
     onChange?: ((value: File[] | undefined) => any) | undefined;
 }>, {
     selectFileLabel: string;

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

@@ -29,14 +29,34 @@
       @delete="uploadState.handleDeleteFile"
       @retry="uploadState.handleRetryUpload"
     />
+
+    <!-- Success State -->
+    <div
+      v-for="(item, index) in value"
+      :key="index"
+      :class="theme.multipleFilesWrapper()"
+    >
+      <div :class="theme.fileItemWrapper()">
+        <SuccessState
+          :theme="theme"
+          :value="item"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview(item)"
+          @download="handleDownloadFile(item)"
+          @delete="handleDeleteFile(index, item)"
+        />
+      </div>
+    </div>
   </FieldWrapper>
 </template>
 
 <script setup>
 import EmptyState from "../fileState/EmptyState.vue";
 import MultipleFilesState from "../fileState/MultipleFilesState.vue";
+import SuccessState from "../fileState/SuccessState.vue";
 import { useUploadStateMultiple } from "../fileState/useUploadStateMultiple";
-import { computed, useTemplateRef } from "#imports";
+import { computed, DialogType, useDialog, useTemplateRef } from "#imports";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
@@ -81,6 +101,7 @@ const {
   setErrors,
   value
 } = useFieldHOC(props);
+const dialog = useDialog();
 const acceptedFileTypes = computed(
   () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
 );
@@ -107,4 +128,14 @@ const handleDownloadFile = (fileValue) => {
     downloadFileFromURL(fileValue.url, fileValue.name);
   }
 };
+const handleDeleteFile = (index, fileValue) => {
+  dialog.confirm({
+    type: DialogType.ERROR,
+    title: "\u0E25\u0E1A\u0E44\u0E1F\u0E25\u0E4C",
+    description: `\u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E1A\u0E44\u0E1F\u0E25\u0E4C ${fileValue.name} \u0E43\u0E0A\u0E48\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48`
+  }).then(() => {
+    emits("delete", index, fileValue);
+    value.value?.splice(index, 1);
+  });
+};
 </script>

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue.d.ts

@@ -2,11 +2,11 @@ import type { IUploadDropzoneAutoMultipleProps } from './types.js';
 import type { IFileValue } from '#core/components/Form/types';
 declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMultipleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     success: (res: IFileValue) => any;
-    delete: (index: number) => any;
+    delete: (index: number, value: IFileValue) => any;
     change: (value: File[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoMultipleProps> & Readonly<{
     onSuccess?: ((res: IFileValue) => any) | undefined;
-    onDelete?: ((index: number) => any) | undefined;
+    onDelete?: ((index: number, value: IFileValue) => any) | undefined;
     onChange?: ((value: File[] | undefined) => any) | undefined;
 }>, {
     selectFileLabel: string;

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

@@ -1,5 +1,5 @@
 import type { AxiosRequestConfig } from 'axios';
-import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '../types.js';
+import type { IFieldProps, IFileValue, IFormFieldBase, INPUT_TYPES } from '../types.js';
 export interface IUploadDropzoneAutoMultipleProps extends IFieldProps {
     requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
         baseURL: string;
@@ -23,5 +23,5 @@ export interface IUploadDropzoneAutoMultipleProps extends IFieldProps {
 export type IUploadDropzoneAutoMultipleField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE, IUploadDropzoneAutoMultipleProps, {
     change: (value: File[] | undefined) => void;
     success: (res: any) => void;
-    delete: (index: number) => void;
+    delete: (index: number, value: IFileValue) => void;
 }>;

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

@@ -34,76 +34,6 @@
         </div>
       </div>
 
-      <!-- Success State -->
-      <div
-        v-else-if="item.state === UploadState.SUCCESS && item.value"
-        :class="theme.successItemWrapper()"
-      >
-        <div
-          v-if="isImageFromPath(item.value.path)"
-          :class="theme.successImgWrapper()"
-        >
-          <img
-            :src="item.value.url"
-            :class="theme.successImgClass()"
-            alt="img-preview"
-          />
-        </div>
-        <div
-          v-else
-          :class="theme.successFileWrapper()"
-        >
-          <Icon
-            :name="icons.filePreviewIcon"
-            :class="theme.successFileClass()"
-          />
-        </div>
-        <div :class="theme.successTextWrapper()">
-          <div class="truncate">
-            <h1 class="truncate font-bold">
-              {{ item.value.name }}
-            </h1>
-            <p class="truncate text-sm font-light text-gray-400">
-              {{ getFileSizeFromValue(item.value) }}
-            </p>
-          </div>
-          <div :class="theme.actionWrapper()">
-            <a
-              v-if="isPDFFromPath(item.value.path)"
-              :href="item.value.url"
-              target="_blank"
-              class="flex"
-            >
-              <Icon
-                :name="icons.actionPreviewIcon"
-                :class="theme.actionIconClass()"
-                title="ดูตัวอย่าง"
-              />
-            </a>
-            <Icon
-              v-if="isImageFromPath(item.value.path) || isVideoFromPath(item.value.path)"
-              :name="icons.actionPreviewIcon"
-              :class="theme.actionIconClass()"
-              title="ดูตัวอย่าง"
-              @click="$emit('preview', item.value)"
-            />
-            <Icon
-              :name="icons.actionDownloadIcon"
-              :class="theme.actionIconClass()"
-              title="ดาวน์โหลดไฟล์"
-              @click="$emit('download', item.value)"
-            />
-            <Icon
-              v-if="!disabled && !readonly"
-              :name="icons.actionDeleteIcon"
-              :class="theme.actionIconClass()"
-              title="ลบไฟล์"
-              @click="$emit('delete', index)"
-            />
-          </div>
-        </div>
-      </div>
-
       <!-- Error State -->
       <div
         v-else-if="item.state === UploadState.ERROR"
@@ -147,12 +77,6 @@
 </template>
 
 <script setup>
-import {
-  isImageFromPath,
-  isPDFFromPath,
-  isVideoFromPath,
-  useFileSize
-} from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
 import { UploadState } from "./useUploadStateMultiple";
 defineEmits(["preview", "download", "delete", "retry"]);
@@ -165,8 +89,4 @@ defineProps({
   retryLabel: { type: String, required: false }
 });
 const icons = useUiIconConfig("uploadFileDropzone");
-const getFileSizeFromValue = (fileValue) => {
-  const allocate = useFileSize(fileValue.size || 0);
-  return allocate.isSelectedFileUseMb.value ? `${allocate.selectedFileSizeMb.value} MB` : `${allocate.selectedFileSizeKb.value} KB`;
-};
 </script>

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

@@ -1,6 +1,6 @@
 import { useDropZone, useFileDialog } from "@vueuse/core";
 import PreviewModal from "./PreviewModal.vue";
-import { computed, ref, useOverlay, watch } from "#imports";
+import { ArrayHelper, computed, ref, useOverlay, watch } from "#imports";
 import { useUploadLoader } from "#core/composables/useUpload";
 import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
 import { StringHelper } from "#core/utils/StringHelper";
@@ -98,11 +98,8 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
             size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
             id: _get(uploadLoader.data.value, props.responseID)
           };
-          updateFileItem(index, {
-            value: fileValue,
-            state: "success" /* SUCCESS */
-          });
-          updateFormValue();
+          fileItems.value.splice(index, 1);
+          onChange([fileValue, ...ArrayHelper.toArray(value.value)]);
           emits("success", fileValue);
           stopProgressWatch();
           stopSuccessWatch();
@@ -154,10 +151,6 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     });
     emits("change", fileItems.value.map((item) => item.file));
   };
-  const updateFormValue = () => {
-    const successfulFiles = fileItems.value.filter((item) => item.state === "success" /* SUCCESS */ && item.value).map((item) => item.value);
-    onChange(successfulFiles.length > 0 ? successfulFiles : void 0);
-  };
   const handleFileDrop = (files) => {
     if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
     files.forEach((file) => processFile(file));
@@ -195,7 +188,6 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
   };
   const handleDeleteFile = (index) => {
     fileItems.value.splice(index, 1);
-    updateFormValue();
     if (fileItems.value.length === 0) {
       setErrors("");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.4.0",
+  "version": "3.5.2",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",