@finema/core 3.22.0 → 3.24.0

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

@@ -27,9 +27,7 @@
                 :style="{ width: `${item.progress}%` }"
               />
             </div>
-            <p class="text-sm text-gray-400">
-              {{ item.progress }}%
-            </p>
+            <p class="text-sm text-gray-400">{{ item.progress }}%</p>
           </div>
         </div>
       </div>
@@ -49,7 +47,7 @@
           <h1 class="truncate font-bold">
             {{ item.file.name }}
           </h1>
-          <p class="text-error-500 text-sm">
+          <p class="text-sm text-error-500">
             {{ item.error || uploadFailedLabel }}
           </p>
         </div>
@@ -67,7 +65,7 @@
             v-if="!disabled && !readonly"
             :name="icons.actionDeleteIcon"
             :class="theme.actionIconClass()"
-            title="ลบไฟล์"
+            :title="messages.upload.remove"
             @click="$emit('delete', index)"
           />
         </div>
@@ -77,6 +75,7 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import { useUiIconConfig } from "#core/composables/useConfig";
 import { UploadState } from "./useUploadStateMultiple";
 defineEmits(["preview", "download", "delete", "retry"]);
@@ -89,4 +88,5 @@ defineProps({
   retryLabel: { type: String, required: false }
 });
 const icons = useUiIconConfig("uploadFileDropzone");
+const { messages } = useCoreMessages();
 </script>

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

@@ -17,14 +17,14 @@ interface Props {
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (index: number) => any;
-    download: (value: IFileValue) => any;
-    preview: (value: IFileValue) => any;
     retry: (index: number) => any;
+    preview: (value: IFileValue) => any;
+    download: (value: IFileValue) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDelete?: ((index: number) => any) | undefined;
-    onDownload?: ((value: IFileValue) => any) | undefined;
-    onPreview?: ((value: IFileValue) => any) | undefined;
     onRetry?: ((index: number) => any) | undefined;
+    onPreview?: ((value: IFileValue) => any) | undefined;
+    onDownload?: ((value: IFileValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -7,12 +7,12 @@ interface Props {
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: () => any;
-    download: () => any;
     preview: () => any;
+    download: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDelete?: (() => any) | undefined;
-    onDownload?: (() => any) | undefined;
     onPreview?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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()"
@@ -44,27 +42,27 @@
           <Icon
             :name="icons.actionPreviewIcon"
             :class="theme.actionIconClass()"
-            title="ดูตัวอย่าง"
+            :title="messages.upload.preview"
           />
         </a>
         <Icon
           v-if="isImageFromPath(value.path) || isVideoFromPath(value.path)"
           :name="icons.actionPreviewIcon"
           :class="theme.actionIconClass()"
-          title="ดูตัวอย่าง"
+          :title="messages.upload.preview"
           @click="$emit('preview')"
         />
         <Icon
           :name="icons.actionDownloadIcon"
           :class="theme.actionIconClass()"
-          title="ดาวน์โหลดไฟล์"
+          :title="messages.upload.download"
           @click="$emit('download')"
         />
         <Icon
           v-if="!disabled && !readonly"
           :name="icons.actionDeleteIcon"
           :class="theme.actionIconClass()"
-          title="ลบไฟล์"
+          :title="messages.upload.remove"
           @click="$emit('delete')"
         />
       </div>
@@ -73,12 +71,8 @@
 </template>
 
 <script setup>
-import {
-  isImageFromPath,
-  isPDFFromPath,
-  isVideoFromPath,
-  useFileSize
-} from "#core/helpers/componentHelper";
+import { useCoreMessages } from "#core/composables/useMessages";
+import { isImageFromPath, isPDFFromPath, isVideoFromPath, useFileSize } from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
 defineEmits(["preview", "download", "delete"]);
 defineProps({
@@ -92,4 +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();
 </script>

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

@@ -7,12 +7,12 @@ interface Props {
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: () => any;
-    download: () => any;
     preview: () => any;
+    download: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDelete?: (() => any) | undefined;
-    onDownload?: (() => any) | undefined;
     onPreview?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form/fileState/useFilePicker.d.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, Ref, TemplateRef } from 'vue';
+import type { IFieldProps, IFileValue } from '#core/components/Form/types';
+/**
+ * What an upload field hands to its state composable
+ */
+export interface IUploadFieldContext<Props, Value> {
+    props: Props;
+    emits: (event: any, ...args: any[]) => void;
+    onChange: (value: Value | undefined) => void;
+    setErrors: (error: string) => void;
+    value: Ref<any>;
+    acceptedFileTypes: ComputedRef<string | undefined>;
+    wrapperProps: ComputedRef<IFieldProps>;
+    dropzoneRef: TemplateRef<HTMLDivElement | undefined>;
+}
+interface IFilePickerOptions {
+    multiple: boolean;
+    defaultAccept?: string;
+    /** Dropped files are ignored while this is false (e.g. a single-file field that already has a file) */
+    canDrop?: () => boolean;
+    onFiles: (files: File[]) => void | Promise<void>;
+}
+/**
+ * The part every upload field shares: file dialog, dropzone, preview, and the disabled/readonly guard
+ */
+export declare const useFilePicker: (context: Pick<IUploadFieldContext<unknown, unknown>, "acceptedFileTypes" | "wrapperProps" | "dropzoneRef">, options: IFilePickerOptions) => {
+    fileDialog: import("@vueuse/core").UseFileDialogReturn;
+    dropzone: import("@vueuse/core").UseDropZoneReturn;
+    isLocked: () => boolean;
+    handleInputChange: (event: Event) => void;
+    handleOpenFile: () => void;
+    openPreview: (fileValue: IFileValue | File) => void;
+};
+export {};

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

@@ -0,0 +1,48 @@
+import { useDropZone, useFileDialog } from "@vueuse/core";
+import PreviewModal from "./PreviewModal.vue";
+import { useOverlay } from "#imports";
+export const useFilePicker = (context, options) => {
+  const previewModal = useOverlay().create(PreviewModal);
+  const isLocked = () => !!(context.wrapperProps.value.disabled || context.wrapperProps.value.readonly);
+  const pick = (files) => options.onFiles(options.multiple ? files : files.slice(0, 1));
+  const fileDialog = useFileDialog({
+    accept: context.acceptedFileTypes.value || options.defaultAccept || "",
+    directory: false,
+    multiple: options.multiple
+  });
+  const dropzone = useDropZone(context.dropzoneRef, {
+    onDrop: (files) => {
+      if (isLocked() || !files?.length || options.canDrop?.() === false) return;
+      pick(files);
+    },
+    multiple: options.multiple,
+    preventDefaultForUnhandled: false
+  });
+  fileDialog.onChange(async (files) => {
+    if (!files?.length) return;
+    await pick(Array.from(files));
+    if (options.multiple) fileDialog.reset();
+  });
+  const handleInputChange = (event) => {
+    if (isLocked()) return;
+    const files = event.target.files;
+    if (files?.length) pick(Array.from(files));
+  };
+  const handleOpenFile = () => {
+    if (isLocked()) return;
+    fileDialog.open();
+  };
+  const openPreview = (fileValue) => {
+    previewModal.open({
+      value: fileValue
+    });
+  };
+  return {
+    fileDialog,
+    dropzone,
+    isLocked,
+    handleInputChange,
+    handleOpenFile,
+    openPreview
+  };
+};

package/dist/runtime/components/Form/fileState/useFileState.d.ts

@@ -1,13 +1,11 @@
-import type { TemplateRef } from 'vue';
 import type { IUploadDropzoneProps } from '../InputUploadDropzone/types.js';
-import type { IFileValue } from '#core/components/Form/types';
-export declare enum UploadState {
-    EMPTY = "empty",
-    UPLOADING = "uploading",
-    SUCCESS = "success",
-    ERROR = "error"
-}
-export declare const useFileState: (props: IUploadDropzoneProps, emits: any, onChange: (value: IFileValue | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+import { type IUploadFieldContext } from './useFilePicker.js';
+import { UploadState } from '#core/helpers/uploadCore';
+export { UploadState };
+/**
+ * Keeps the picked `File` itself as the field value (nothing is uploaded)
+ */
+export declare const useFileState: (context: IUploadFieldContext<IUploadDropzoneProps, File>) => {
     currentState: import("vue").ComputedRef<UploadState.EMPTY | UploadState.SUCCESS>;
     isEmpty: import("vue").ComputedRef<boolean>;
     isSuccess: import("vue").ComputedRef<boolean>;

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

@@ -1,138 +1,50 @@
-import { useDropZone, useFileDialog } from "@vueuse/core";
-import PreviewModal from "../fileState/PreviewModal.vue";
-import { computed, ref, useOverlay } from "#imports";
-import { useFileAllocate } from "#core/helpers/componentHelper";
-const overlay = useOverlay();
-const previewModal = overlay.create(PreviewModal);
-export var UploadState = /* @__PURE__ */ ((UploadState2) => {
-  UploadState2["EMPTY"] = "empty";
-  UploadState2["UPLOADING"] = "uploading";
-  UploadState2["SUCCESS"] = "success";
-  UploadState2["ERROR"] = "error";
-  return UploadState2;
-})(UploadState || {});
-export const useFileState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
+import { useFilePicker } from "./useFilePicker.js";
+import { UploadState, validateFile } from "#core/helpers/uploadCore";
+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 selectedFile = ref();
   const currentObjectUrl = ref("");
-  const fileAllocate = useFileAllocate(selectedFile, props);
-  const validateFile = (file) => {
-    if (props.accept && fileAllocate.acceptFile.value) {
-      const acceptedTypes = fileAllocate.acceptFile.value;
-      const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
-      const fileExtension = file.name.toLowerCase().split(".").pop();
-      const isValidFileType = acceptedTypesList.some((acceptedType) => {
-        if (acceptedType.startsWith(".")) {
-          const extension = acceptedType.slice(1).toLowerCase();
-          return fileExtension === extension;
-        } else if (!acceptedType.includes("/") && !acceptedType.includes("*")) {
-          return fileExtension === acceptedType.toLowerCase();
-        }
-        if (acceptedType.endsWith("/*")) {
-          const baseType = acceptedType.slice(0, -2);
-          return file.type.startsWith(baseType + "/");
-        }
-        return file.type === acceptedType;
-      });
-      if (!isValidFileType) {
-        setErrors("\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 (\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E40\u0E09\u0E1E\u0E32\u0E30 " + acceptedTypesList.join(", ") + ")");
-        return false;
-      }
-    }
-    if (props.maxSize) {
-      const maxSizeBytes = (fileAllocate.acceptFileSizeKb.value || 0) * 1024;
-      if (file.size > maxSizeBytes) {
-        if (fileAllocate.isAcceptFileUseMb.value) {
-          setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeMb.value} MB`);
-        } else {
-          setErrors(`\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${fileAllocate.acceptFileSizeKb.value} KB`);
-        }
-        return false;
-      }
-    }
-    setErrors("");
-    return true;
+  const currentState = computed(() => value.value ? UploadState.SUCCESS : UploadState.EMPTY);
+  const isEmpty = computed(() => currentState.value === UploadState.EMPTY);
+  const isSuccess = computed(() => currentState.value === UploadState.SUCCESS);
+  const cleanup = () => {
+    if (!currentObjectUrl.value) return;
+    URL.revokeObjectURL(currentObjectUrl.value);
+    currentObjectUrl.value = "";
   };
   const processFile = (file) => {
-    if (!validateFile(file)) return;
+    const error = validateFile(file, props, messages.value.upload);
+    setErrors(error ?? "");
+    if (error) return;
     selectedFile.value = file;
     emits("change", file);
-    if (currentObjectUrl.value) {
-      URL.revokeObjectURL(currentObjectUrl.value);
-    }
-    const objectUrl = URL.createObjectURL(file);
-    currentObjectUrl.value = objectUrl;
+    cleanup();
+    currentObjectUrl.value = URL.createObjectURL(file);
     value.value = file;
     emits("success", file);
   };
-  const handleFileDrop = (files) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length || !isEmpty.value) return;
-    const file = files[0];
-    if (file) {
-      processFile(file);
-    }
-  };
-  const fileDialog = useFileDialog({
-    accept: acceptedFileTypes.value || "",
-    directory: false,
-    multiple: false
-  });
-  const dropzone = useDropZone(dropzoneRef, {
-    onDrop: handleFileDrop,
-    // dataTypes: typeof props.accept === 'string' ? [props.accept] : props.accept,
+  const picker = useFilePicker(context, {
     multiple: false,
-    preventDefaultForUnhandled: false
-  });
-  const currentState = computed(() => {
-    if (value.value) return "success" /* SUCCESS */;
-    return "empty" /* EMPTY */;
-  });
-  const isEmpty = computed(() => currentState.value === "empty" /* EMPTY */);
-  const isSuccess = computed(() => currentState.value === "success" /* SUCCESS */);
-  const handleInputChange = (event) => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    const file = event.target.files?.[0];
-    if (file) {
-      processFile(file);
-    }
-  };
-  fileDialog.onChange((files) => {
-    if (files?.length) {
-      processFile(files[0]);
+    canDrop: () => isEmpty.value,
+    onFiles: ([file]) => {
+      if (file) processFile(file);
     }
   });
-  const handleOpenFile = () => {
-    if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
-    fileDialog.open();
-  };
   const handleDeleteFile = () => {
-    fileDialog.reset();
-    if (currentObjectUrl.value) {
-      URL.revokeObjectURL(currentObjectUrl.value);
-      currentObjectUrl.value = "";
-    }
+    picker.fileDialog.reset();
+    cleanup();
     selectedFile.value = void 0;
     onChange(void 0);
     emits("delete");
   };
   const handleRetryUpload = () => {
-    if (selectedFile.value) {
-      processFile(selectedFile.value);
-    }
-  };
-  const handlePreview = () => {
-    previewModal.open({
-      value: value.value
-    });
-  };
-  const cleanup = () => {
-    if (currentObjectUrl.value) {
-      URL.revokeObjectURL(currentObjectUrl.value);
-      currentObjectUrl.value = "";
-    }
+    if (selectedFile.value) processFile(selectedFile.value);
   };
-  if (typeof window !== "undefined") {
-    window.addEventListener("beforeunload", cleanup);
-  }
+  onScopeDispose(cleanup);
   return {
     // State
     currentState,
@@ -141,13 +53,13 @@ export const useFileState = (props, emits, onChange, setErrors, value, acceptedF
     selectedFile,
     currentObjectUrl,
     // Upload utilities
-    dropzone,
+    dropzone: picker.dropzone,
     // Handlers
-    handleInputChange,
-    handleOpenFile,
+    handleInputChange: picker.handleInputChange,
+    handleOpenFile: picker.handleOpenFile,
     handleDeleteFile,
     handleRetryUpload,
-    handlePreview,
+    handlePreview: () => picker.openPreview(value.value),
     // Cleanup
     cleanup
   };

package/dist/runtime/components/Form/fileState/useUploadImageState.d.ts

@@ -1,13 +1,12 @@
-import type { TemplateRef } from 'vue';
 import type { IUploadImageAutoProps } from '../InputUploadImageAuto/types.js';
+import type { IUploadFieldContext } from './useFilePicker.js';
+import { UploadState } from './useUploadState.js';
 import type { IFileValue } from '#core/components/Form/types';
-export declare enum UploadState {
-    EMPTY = "empty",
-    UPLOADING = "uploading",
-    SUCCESS = "success",
-    ERROR = "error"
-}
-export declare const useUploadImageState: (props: IUploadImageAutoProps, emits: any, onChange: (value: IFileValue | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+export { UploadState };
+/**
+ * `useUploadState` for images: defaults to `image/*` and checks `props.dimensions` before uploading
+ */
+export declare const useUploadImageState: (context: IUploadFieldContext<IUploadImageAutoProps, IFileValue>) => {
     currentState: import("vue").ComputedRef<UploadState>;
     isEmpty: import("vue").ComputedRef<boolean>;
     isUploading: import("vue").ComputedRef<boolean>;