@finema/core 3.22.0 → 3.24.0

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

@@ -73,10 +73,7 @@
               v-for="(suggestion, index) in filteredSuggestions"
               :key="suggestion"
               :ref="(el) => setSuggestionItemRef(el, index)"
-              :class="[
-  theme.suggestionItem(),
-  { [theme.suggestionItemActive()]: index === selectedSuggestionIndex }
-]"
+              :class="[theme.suggestionItem(), { [theme.suggestionItemActive()]: index === selectedSuggestionIndex }]"
               @mousedown.prevent="selectSuggestion(suggestion, index)"
               @mouseenter="selectedSuggestionIndex = index"
             >
@@ -124,14 +121,11 @@ 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 theme = computed(() => useUiConfig(inputTheme, "input")());
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const isShowPassword = ref(false);
 const inputRef = ref();
 const showSuggestions = ref(false);
@@ -157,9 +151,7 @@ const filteredSuggestions = computed(() => {
     return props.suggestions || [];
   }
   const inputValue = value.value.toLowerCase();
-  return props.suggestions.filter(
-    (suggestion) => suggestion.toLowerCase().includes(inputValue)
-  );
+  return props.suggestions.filter((suggestion) => suggestion.toLowerCase().includes(inputValue));
 });
 const onFocus = () => {
   if (props.suggestions && props.suggestions.length > 0) {
@@ -193,7 +185,7 @@ const onKeydown = (event) => {
         return;
       }
       event.preventDefault();
-      if (selectedSuggestionIndex.value >= 0) {
+      if (filteredSuggestions.value[selectedSuggestionIndex.value] !== void 0) {
         selectSuggestion(filteredSuggestions.value[selectedSuggestionIndex.value], selectedSuggestionIndex.value);
       }
       break;
@@ -245,44 +237,42 @@ const scrollToSuggestionByIndex = (index) => {
     }
   }
 };
-const activeMaskOptions = computed(
-  () => {
-    if (props.maskOptions && Object.keys(props.maskOptions).length > 0) {
-      if (typeof props.maskOptions.mask === "string" && Object.keys(props.maskOptions).length === 1) {
-        return props.maskOptions.mask;
-      }
-      return props.maskOptions;
-    }
-    const options = {};
-    let hasIndividualProps = false;
-    if (props.mask !== void 0) {
-      options.mask = props.mask;
-      hasIndividualProps = true;
-    }
-    if (props.maskTokens !== void 0) {
-      options.tokens = props.maskTokens;
-      hasIndividualProps = true;
-    }
-    if (props.maskEager !== void 0) {
-      options.eager = props.maskEager;
-      hasIndividualProps = true;
+const activeMaskOptions = computed(() => {
+  if (props.maskOptions && Object.keys(props.maskOptions).length > 0) {
+    if (typeof props.maskOptions.mask === "string" && Object.keys(props.maskOptions).length === 1) {
+      return props.maskOptions.mask;
     }
-    if (props.maskReversed !== void 0) {
-      options.reversed = props.maskReversed;
-      hasIndividualProps = true;
-    }
-    if (props.maskTokensReplace !== void 0) {
-      options.tokensReplace = props.maskTokensReplace;
-      hasIndividualProps = true;
-    }
-    if (hasIndividualProps) {
-      const keys = Object.keys(options);
-      if (keys.length === 1 && keys[0] === "mask" && typeof options.mask === "string") {
-        return options.mask;
-      }
-      return options;
+    return props.maskOptions;
+  }
+  const options = {};
+  let hasIndividualProps = false;
+  if (props.mask !== void 0) {
+    options.mask = props.mask;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokens !== void 0) {
+    options.tokens = props.maskTokens;
+    hasIndividualProps = true;
+  }
+  if (props.maskEager !== void 0) {
+    options.eager = props.maskEager;
+    hasIndividualProps = true;
+  }
+  if (props.maskReversed !== void 0) {
+    options.reversed = props.maskReversed;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokensReplace !== void 0) {
+    options.tokensReplace = props.maskTokensReplace;
+    hasIndividualProps = true;
+  }
+  if (hasIndividualProps) {
+    const keys = Object.keys(options);
+    if (keys.length === 1 && keys[0] === "mask" && typeof options.mask === "string") {
+      return options.mask;
     }
-    return void 0;
+    return options;
   }
-);
+  return void 0;
+});
 </script>

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

@@ -43,13 +43,10 @@ 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 {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -4,8 +4,8 @@
       v-model="innerValue"
       :teleport="teleport"
       :disabled="wrapperProps.disabled"
-      :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
-      :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
       :locale="appConfig.core?.locale"
       time-picker
       :placeholder="wrapperProps.placeholder"
@@ -34,9 +34,11 @@
       <template #clear-icon="{ clear }">
         <Icon
           :name="clearIcon"
-          :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
+          :class="
+  theme.clearIcon({
+    class: [ui?.clearIcon]
+  })
+"
           @click.stop="clear"
         />
       </template>
@@ -45,7 +47,8 @@
 </template>
 
 <script setup>
-import Datepicker from "@vuepic/vue-datepicker";
+import { useCoreMessages } from "#core/composables/useMessages";
+import Datepicker, {} from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { computed, ref, useFieldHOC, useUiConfig, watch, useAppConfig } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
@@ -72,16 +75,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 appConfig = useAppConfig();
 const innerValue = ref(void 0);
 const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (value2) => {
   let timeText = void 0;
   if (value2) {
@@ -93,20 +93,25 @@ const onChange = (value2) => {
   handleChange(timeText);
   emits("change", timeText);
 };
-watch(value, (newValue) => {
-  if (newValue) {
-    const timeParts = newValue.split(":");
-    innerValue.value = {
-      hours: Number.parseInt(timeParts[0] || "0", 10),
-      minutes: Number.parseInt(timeParts[1] || "0", 10),
-      ...props.enableSeconds && timeParts[2] ? {
-        seconds: Number.parseInt(timeParts[2], 10)
-      } : {}
-    };
-  } else {
-    innerValue.value = void 0;
+watch(
+  value,
+  (newValue) => {
+    if (newValue) {
+      const timeParts = newValue.split(":");
+      innerValue.value = {
+        hours: Number.parseInt(timeParts[0] || "0", 10),
+        minutes: Number.parseInt(timeParts[1] || "0", 10),
+        ...props.enableSeconds && timeParts[2] ? {
+          seconds: Number.parseInt(timeParts[2], 10)
+        } : {}
+      };
+    } else {
+      innerValue.value = void 0;
+    }
+  },
+  {
+    immediate: true
   }
-}, {
-  immediate: true
-});
+);
+const { messages } = useCoreMessages();
 </script>

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

@@ -14,5 +14,5 @@ export interface ITimeFieldProps extends IFieldProps {
     teleport?: boolean | string | HTMLElement;
 }
 export type ITimeField = IFormFieldBase<INPUT_TYPES.TIME, ITimeFieldProps, {
-    change: (value: string) => void;
+    change?: (value: string) => void;
 }>;

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

@@ -38,12 +38,10 @@ 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 {
-  value,
-  wrapperProps
-} = useFieldHOC(props);
+const { value, wrapperProps } = useFieldHOC(props);
 const onChange = (bool) => {
   emit("change", bool);
   value.value = bool;

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

@@ -5,9 +5,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneProps,
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
-}>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -9,8 +9,8 @@
         <EmptyState
           v-if="uploadState.isEmpty.value"
           :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
           :placeholder="placeholder"
           @open-file="uploadState.handleOpenFile"
         />
@@ -40,12 +40,13 @@ 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";
 const emits = defineEmits(["change", "delete"]);
 const props = defineProps({
   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" },
+  selectFileLabel: { type: String, required: false },
+  selectFileSubLabel: { type: String, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -59,19 +60,14 @@ 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 {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const { messages } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
+const acceptedFileTypes = computed(() => typeof props.accept === "string" ? props.accept : props.accept?.join(","));
 const dropzoneRef = useTemplateRef("dropzoneRef");
-const uploadState = useFileState(
+const uploadState = useFileState({
   props,
   emits,
   onChange,
@@ -80,16 +76,22 @@ const uploadState = useFileState(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
-useWatchChange(() => value.value, (newValue) => {
-  if (typeof newValue === "object" && newValue !== null) {
-    onChange(newValue);
-  } else {
-    onChange(void 0);
-  }
 });
+useWatchChange(
+  () => value.value,
+  (newValue) => {
+    if (typeof newValue === "object" && newValue !== null) {
+      onChange(newValue);
+    } else {
+      onChange(void 0);
+    }
+  }
+);
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled
   })

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

@@ -5,9 +5,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneProps,
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
-}>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,6 +6,6 @@ export interface IUploadDropzoneProps extends IFieldProps {
     selectFileSubLabel?: string;
 }
 export type IUploadDropzoneField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE, IUploadDropzoneProps, {
-    change: (value: File | undefined) => void;
-    delete: () => void;
+    change?: (value: File | undefined) => void;
+    delete?: () => void;
 }>;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.d.vue.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/index.vue

@@ -9,8 +9,8 @@
         <EmptyState
           v-if="uploadState.isEmpty.value"
           :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
           :placeholder="placeholder"
           @open-file="uploadState.handleOpenFile"
         />
@@ -21,7 +21,7 @@
           :theme="theme"
           :selected-file="uploadState.selectedFile.value"
           :percent="uploadState.percent.value"
-          :uploading-label="uploadingLabel"
+          :uploading-label="uploadingLabel ?? messages.upload.uploading"
         />
 
         <!-- Success State -->
@@ -41,8 +41,8 @@
           v-if="uploadState.isError.value"
           :theme="theme"
           :selected-file="uploadState.selectedFile.value"
-          :upload-failed-label="uploadFailedLabel"
-          :retry-label="retryLabel"
+          :upload-failed-label="uploadFailedLabel ?? messages.upload.uploadFailed"
+          :retry-label="retryLabel ?? messages.upload.retry"
           @retry="uploadState.handleRetryUpload"
           @delete="uploadState.handleDeleteFile"
         />
@@ -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,19 +94,14 @@ 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 {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const { messages } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
+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,9 +110,12 @@ const uploadState = useUploadState(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled,
     failed: uploadState.upload.status.value.isError

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

@@ -8,8 +8,8 @@
         <!-- Empty State -->
         <EmptyState
           :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
           :placeholder="placeholder"
           @open-file="uploadState.handleOpenFile"
         />
@@ -22,8 +22,8 @@
       :file-items="uploadState.fileItems.value"
       :disabled="wrapperProps.disabled"
       :readonly="wrapperProps.readonly"
-      :upload-failed-label="uploadFailedLabel"
-      :retry-label="retryLabel"
+      :upload-failed-label="uploadFailedLabel ?? messages.upload.uploadFailed"
+      :retry-label="retryLabel ?? messages.upload.retry"
       @preview="uploadState.handlePreview"
       @download="handleDownloadFile"
       @delete="uploadState.handleDeleteFile"
@@ -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,20 +94,15 @@ 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 {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
+const { messages, format } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
 const dialog = useDialog();
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+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,9 +111,12 @@ const uploadState = useUploadStateMultiple(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled,
     failed: false
@@ -131,11 +130,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;