@finema/core 3.21.0 → 3.23.2

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

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Loading State -->
-        <LoadingState
-          v-if="uploadState.isUploading.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :percent="uploadState.percent.value"
-          :uploading-label="uploadingLabel"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-
-        <!-- Failed State -->
-        <FailedState
-          v-if="uploadState.isError.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :upload-failed-label="uploadFailedLabel"
-          :retry-label="retryLabel"
-          @retry="uploadState.handleRetryUpload"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Loading State -->
+        <LoadingState
+          v-if="uploadState.isUploading.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :percent="uploadState.percent.value"
+          :uploading-label="uploadingLabel ?? messages.upload.uploading"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+
+        <!-- Failed State -->
+        <FailedState
+          v-if="uploadState.isError.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :upload-failed-label="uploadFailedLabel ?? messages.upload.uploadFailed"
+          :retry-label="retryLabel ?? messages.upload.retry"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -62,6 +62,7 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { downloadFileFromURL } from "#core/helpers/componentHelper";
 const emits = defineEmits(["change", "success", "delete"]);
 const props = defineProps({
@@ -75,11 +76,11 @@ const props = defineProps({
   responseID: { type: String, required: false, default: "id" },
   accept: { type: [Array, String], required: false },
   maxSize: { type: Number, required: false },
-  selectFileLabel: { type: String, required: false, default: "\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C" },
-  selectFileSubLabel: { type: String, required: false, default: "\u0E2B\u0E23\u0E37\u0E2D \u0E25\u0E32\u0E01\u0E41\u0E25\u0E30\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48" },
-  uploadingLabel: { type: String, required: false, default: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14..." },
-  uploadFailedLabel: { type: String, required: false, default: "\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27, \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
-  retryLabel: { type: String, required: false, default: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  selectFileLabel: { type: String, required: false },
+  selectFileSubLabel: { type: String, required: false },
+  uploadingLabel: { type: String, required: false },
+  uploadFailedLabel: { type: String, required: false },
+  retryLabel: { type: String, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -93,8 +94,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
+const {
+  messages
+} = useCoreMessages();
 const {
   wrapperProps,
   handleChange: onChange,
@@ -105,7 +110,7 @@ const acceptedFileTypes = computed(
   () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
 );
 const dropzoneRef = useTemplateRef("dropzoneRef");
-const uploadState = useUploadState(
+const uploadState = useUploadState({
   props,
   emits,
   onChange,
@@ -114,7 +119,7 @@ const uploadState = useUploadState(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 const theme = computed(
   () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,

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

@@ -9,11 +9,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoPro
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;

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

@@ -20,7 +20,7 @@ export interface IUploadDropzoneAutoProps extends IFieldProps {
     retryLabel?: string;
 }
 export type IUploadDropzoneAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO, IUploadDropzoneAutoProps, {
-    change: (value: File | undefined) => void;
-    success: (res: any) => void;
-    delete: () => void;
+    change?: (value: File | undefined) => void;
+    success?: (res: any) => void;
+    delete?: () => void;
 }>;

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

@@ -9,11 +9,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMul
     onDelete?: ((index: number, value: IFileValue) => any) | undefined;
     onChange?: ((value: File[] | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;

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

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-      </div>
-    </div>
-    <!-- Multiple Files State -->
-    <MultipleFilesState
-      v-if="!uploadState.isEmpty.value"
-      :theme="theme"
-      :file-items="uploadState.fileItems.value"
-      :disabled="wrapperProps.disabled"
-      :readonly="wrapperProps.readonly"
-      :upload-failed-label="uploadFailedLabel"
-      :retry-label="retryLabel"
-      @preview="uploadState.handlePreview"
-      @download="handleDownloadFile"
-      @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>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          :theme="theme"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+      </div>
+    </div>
+    <!-- Multiple Files State -->
+    <MultipleFilesState
+      v-if="!uploadState.isEmpty.value"
+      :theme="theme"
+      :file-items="uploadState.fileItems.value"
+      :disabled="wrapperProps.disabled"
+      :readonly="wrapperProps.readonly"
+      :upload-failed-label="uploadFailedLabel ?? messages.upload.uploadFailed"
+      :retry-label="retryLabel ?? messages.upload.retry"
+      @preview="uploadState.handlePreview"
+      @download="handleDownloadFile"
+      @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>
@@ -61,6 +61,7 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { downloadFileFromURL } from "#core/helpers/componentHelper";
 const emits = defineEmits(["change", "success", "delete"]);
 const props = defineProps({
@@ -75,11 +76,11 @@ const props = defineProps({
   accept: { type: [Array, String], required: false },
   maxSize: { type: Number, required: false },
   maxFiles: { type: Number, required: false },
-  selectFileLabel: { type: String, required: false, default: "\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C" },
-  selectFileSubLabel: { type: String, required: false, default: "\u0E2B\u0E23\u0E37\u0E2D \u0E25\u0E32\u0E01\u0E41\u0E25\u0E30\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48" },
-  uploadingLabel: { type: String, required: false, default: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14..." },
-  uploadFailedLabel: { type: String, required: false, default: "\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27, \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
-  retryLabel: { type: String, required: false, default: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  selectFileLabel: { type: String, required: false },
+  selectFileSubLabel: { type: String, required: false },
+  uploadingLabel: { type: String, required: false },
+  uploadFailedLabel: { type: String, required: false },
+  retryLabel: { type: String, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -93,8 +94,13 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
+const {
+  messages,
+  format
+} = useCoreMessages();
 const {
   wrapperProps,
   handleChange: onChange,
@@ -106,7 +112,7 @@ const acceptedFileTypes = computed(
   () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
 );
 const dropzoneRef = useTemplateRef("dropzoneRef");
-const uploadState = useUploadStateMultiple(
+const uploadState = useUploadStateMultiple({
   props,
   emits,
   onChange,
@@ -115,7 +121,7 @@ const uploadState = useUploadStateMultiple(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 const theme = computed(
   () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
@@ -131,11 +137,14 @@ const handleDownloadFile = (fileValue) => {
 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`
+    title: messages.value.upload.remove,
+    description: format(messages.value.upload.removeConfirm, {
+      name: fileValue.name ?? ""
+    })
   }).then(() => {
     emits("delete", index, fileValue);
     value.value?.splice(index, 1);
+  }).catch(() => {
   });
 };
 </script>

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

@@ -9,11 +9,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoMul
     onDelete?: ((index: number, value: IFileValue) => any) | undefined;
     onChange?: ((value: File[] | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;

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

@@ -21,7 +21,7 @@ export interface IUploadDropzoneAutoMultipleProps extends IFieldProps {
     retryLabel?: string;
 }
 export type IUploadDropzoneAutoMultipleField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE, IUploadDropzoneAutoMultipleProps, {
-    change: (value: File[] | undefined) => void;
-    success: (res: any) => void;
-    delete: (index: number, value: IFileValue) => void;
+    change?: (value: File[] | undefined) => void;
+    success?: (res: any) => void;
+    delete?: (index: number, value: IFileValue) => void;
 }>;

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

@@ -9,18 +9,13 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadImageAutoProps,
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
+    accept: string[] | string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;
     responseName: string;
     responseSize: string;
     responseID: string;
-    accept: string[] | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Loading State -->
-        <LoadingState
-          v-if="uploadState.isUploading.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :percent="uploadState.percent.value"
-          :uploading-label="uploadingLabel"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-
-        <!-- Failed State -->
-        <FailedState
-          v-if="uploadState.isError.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :upload-failed-label="uploadFailedLabel"
-          :retry-label="retryLabel"
-          @retry="uploadState.handleRetryUpload"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel ?? messages.upload.selectImage"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Loading State -->
+        <LoadingState
+          v-if="uploadState.isUploading.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :percent="uploadState.percent.value"
+          :uploading-label="uploadingLabel ?? messages.upload.uploading"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+
+        <!-- Failed State -->
+        <FailedState
+          v-if="uploadState.isError.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :upload-failed-label="uploadFailedLabel ?? messages.upload.uploadFailed"
+          :retry-label="retryLabel ?? messages.upload.retry"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -62,6 +62,7 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
+import { useCoreMessages } from "#core/composables/useMessages";
 import { downloadFileFromURL } from "#core/helpers/componentHelper";
 const emits = defineEmits(["change", "success", "delete"]);
 const props = defineProps({
@@ -76,11 +77,11 @@ const props = defineProps({
   accept: { type: [Array, String], required: false, default: () => ["image/*"] },
   maxSize: { type: Number, required: false },
   dimensions: { type: Object, required: false },
-  selectFileLabel: { type: String, required: false, default: "\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E" },
-  selectFileSubLabel: { type: String, required: false, default: "\u0E2B\u0E23\u0E37\u0E2D \u0E25\u0E32\u0E01\u0E41\u0E25\u0E30\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48" },
-  uploadingLabel: { type: String, required: false, default: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14..." },
-  uploadFailedLabel: { type: String, required: false, default: "\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27, \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
-  retryLabel: { type: String, required: false, default: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  selectFileLabel: { type: String, required: false },
+  selectFileSubLabel: { type: String, required: false },
+  uploadingLabel: { type: String, required: false },
+  uploadFailedLabel: { type: String, required: false },
+  retryLabel: { type: String, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -94,8 +95,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
+const {
+  messages
+} = useCoreMessages();
 const {
   wrapperProps,
   handleChange: onChange,
@@ -106,7 +111,7 @@ const acceptedFileTypes = computed(
   () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
 );
 const dropzoneRef = useTemplateRef("dropzoneRef");
-const uploadState = useUploadImageState(
+const uploadState = useUploadImageState({
   props,
   emits,
   onChange,
@@ -115,7 +120,7 @@ const uploadState = useUploadImageState(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 const theme = computed(
   () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,

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

@@ -9,18 +9,13 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadImageAutoProps,
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
+    accept: string[] | string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;
     responseName: string;
     responseSize: string;
     responseID: string;
-    accept: string[] | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -31,7 +31,7 @@ export interface IUploadImageAutoProps extends IFieldProps {
     retryLabel?: string;
 }
 export type IUploadImageAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_IMAGE_AUTO, IUploadImageAutoProps, {
-    change: (value: File | undefined) => void;
-    success: (res: any) => void;
-    delete: () => void;
+    change?: (value: File | undefined) => void;
+    success?: (res: any) => void;
+    delete?: () => void;
 }>;

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue

@@ -1,22 +1,22 @@
 <template>
-  <NodeViewWrapper>
-    <FileUpload
-      v-model="file"
-      accept="image/*"
-      label="Upload an image"
-      description="SVG, PNG, JPG or GIF"
-      :preview="false"
-      class="min-h-48"
-    >
-      <template #leading>
-        <Avatar
-          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
-          size="xl"
-          :ui="{ icon: [loading && 'animate-spin'] }"
-        />
-      </template>
-    </FileUpload>
-  </NodeViewWrapper>
+  <NodeViewWrapper>
+    <FileUpload
+      v-model="file"
+      accept="image/*"
+      label="Upload an image"
+      description="SVG, PNG, JPG or GIF"
+      :preview="false"
+      class="min-h-48"
+    >
+      <template #leading>
+        <Avatar
+          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
+          size="xl"
+          :ui="{ icon: [loading && 'animate-spin'] }"
+        />
+      </template>
+    </FileUpload>
+  </NodeViewWrapper>
 </template>
 
 <script setup>