@finema/core 3.22.0 → 3.24.0

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

@@ -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.selectImage"
+          :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({
@@ -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,19 +95,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 = useUploadImageState(
+const uploadState = useUploadImageState({
   props,
   emits,
   onChange,
@@ -115,9 +111,12 @@ const uploadState = useUploadImageState(
   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/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/EditorImagePasteExtension.js

@@ -39,14 +39,15 @@ export const ImagePaste = Extension.create({
                   console.warn("ImagePaste: requestOptions is not configured");
                   continue;
                 }
-                const {
-                  schema
-                } = view.state;
+                const { schema } = view.state;
                 const pos = view.state.selection.from;
                 if (schema.nodes.imageUpload) {
-                  const transaction = view.state.tr.insert(pos, schema.nodes.imageUpload.create({
-                    loading: true
-                  }));
+                  const transaction = view.state.tr.insert(
+                    pos,
+                    schema.nodes.imageUpload.create({
+                      loading: true
+                    })
+                  );
                   view.dispatch(transaction);
                 }
                 const request = {

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadExtension.js

@@ -10,25 +10,26 @@ export const ImageUpload = Node.create({
     return {};
   },
   parseHTML() {
-    return [{
-      tag: 'div[data-type="image-upload"]'
-    }];
+    return [
+      {
+        tag: 'div[data-type="image-upload"]'
+      }
+    ];
   },
-  renderHTML({
-    HTMLAttributes
-  }) {
-    return ["div", mergeAttributes(HTMLAttributes, {
-      "data-type": "image-upload"
-    })];
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-type": "image-upload"
+      })
+    ];
   },
   addNodeView() {
     return VueNodeViewRenderer(ImageUploadNodeComponent);
   },
   addCommands() {
     return {
-      insertImageUpload: () => ({
-        commands
-      }) => {
+      insertImageUpload: () => ({ commands }) => {
         return commands.insertContent({
           type: this.name
         });

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

@@ -38,7 +38,9 @@ const props = defineProps({
   extension: { type: Object, required: true },
   HTMLAttributes: { type: Object, required: true }
 });
-const options = computed(() => props.extension.options);
+const options = computed(
+  () => props.extension.options
+);
 const file = ref(null);
 const loading = ref(false);
 watch(file, async (newFile) => {

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

@@ -9,27 +9,27 @@ const url = ref("");
 const active = computed(() => props.editor.isActive("link"));
 const disabled = computed(() => {
   if (!props.editor.isEditable) return true;
-  const {
-    selection
-  } = props.editor.state;
+  const { selection } = props.editor.state;
   return selection.empty && !props.editor.isActive("link");
 });
-watch(() => props.editor, (editor, _, onCleanup) => {
-  if (!editor) return;
-  const updateUrl = () => {
-    const {
-      href
-    } = editor.getAttributes("link");
-    url.value = href || "";
-  };
-  updateUrl();
-  editor.on("selectionUpdate", updateUrl);
-  onCleanup(() => {
-    editor.off("selectionUpdate", updateUrl);
-  });
-}, {
-  immediate: true
-});
+watch(
+  () => props.editor,
+  (editor, _, onCleanup) => {
+    if (!editor) return;
+    const updateUrl = () => {
+      const { href } = editor.getAttributes("link");
+      url.value = href || "";
+    };
+    updateUrl();
+    editor.on("selectionUpdate", updateUrl);
+    onCleanup(() => {
+      editor.off("selectionUpdate", updateUrl);
+    });
+  },
+  {
+    immediate: true
+  }
+);
 watch(active, (isActive) => {
   if (isActive && props.autoOpen) {
     open.value = true;
@@ -37,9 +37,7 @@ watch(active, (isActive) => {
 });
 const setLink = () => {
   if (!url.value) return;
-  const {
-    selection
-  } = props.editor.state;
+  const { selection } = props.editor.state;
   const isEmpty = selection.empty;
   const hasCode = props.editor.isActive("code");
   let chain = props.editor.chain().focus();

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

@@ -18,7 +18,7 @@
 ]"
         :ui="{
   content: '',
-  base: ['min-h-[200px] w-full sm:px-3 py-1']
+  base: ['min-h-[200px] w-full py-1 sm:px-3']
 }"
         :handlers="customHandlers"
       >
@@ -38,9 +38,11 @@
           :editor="editor"
           :items="imageToolbarItems(editor)"
           layout="bubble"
-          :should-show="({ editor: editor2, view }) => {
-  return editor2.isActive('image') && view.hasFocus();
-}"
+          :should-show="
+  ({ editor: editor2, view }) => {
+    return editor2.isActive('image') && view.hasFocus();
+  }
+"
         />
 
         <EditorSuggestionMenu
@@ -87,12 +89,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 ui = computed(() => useUiConfig(wysiwygTheme, "wysiwyg")({}));
 const appendToBody = false ? () => document.body : void 0;
 const customHandlers = {
@@ -109,35 +109,38 @@ const customHandlers = {
 };
 const imageToolbarItems = (editor) => {
   const node = editor.state.doc.nodeAt(editor.state.selection.from);
-  return [[{
-    icon: "i-lucide-download",
-    to: node?.attrs?.src,
-    download: true,
-    tooltip: {
-      text: "Download"
-    }
-  }], [{
-    icon: "i-lucide-trash",
-    tooltip: {
-      text: "Delete"
-    },
-    onClick: () => {
-      const {
-        state
-      } = editor;
-      const {
-        selection
-      } = state;
-      const pos = selection.from;
-      const node2 = state.doc.nodeAt(pos);
-      if (node2 && node2.type.name === "image") {
-        editor.chain().focus().deleteRange({
-          from: pos,
-          to: pos + node2.nodeSize
-        }).run();
+  return [
+    [
+      {
+        icon: "i-lucide-download",
+        to: node?.attrs?.src,
+        download: true,
+        tooltip: {
+          text: "Download"
+        }
       }
-    }
-  }]];
+    ],
+    [
+      {
+        icon: "i-lucide-trash",
+        tooltip: {
+          text: "Delete"
+        },
+        onClick: () => {
+          const { state } = editor;
+          const { selection } = state;
+          const pos = selection.from;
+          const node2 = state.doc.nodeAt(pos);
+          if (node2 && node2.type.name === "image") {
+            editor.chain().focus().deleteRange({
+              from: pos,
+              to: pos + node2.nodeSize
+            }).run();
+          }
+        }
+      }
+    ]
+  ];
 };
 const toolbarItems = [
   // Block types
@@ -150,27 +153,32 @@ const toolbarItems = [
       content: {
         align: "start"
       },
-      items: [{
-        kind: "heading",
-        level: 1,
-        icon: "i-lucide-heading-1",
-        label: "Heading 1"
-      }, {
-        kind: "heading",
-        level: 2,
-        icon: "i-lucide-heading-2",
-        label: "Heading 2"
-      }, {
-        kind: "heading",
-        level: 3,
-        icon: "i-lucide-heading-3",
-        label: "Heading 3"
-      }, {
-        kind: "heading",
-        level: 4,
-        icon: "i-lucide-heading-4",
-        label: "Heading 4"
-      }]
+      items: [
+        {
+          kind: "heading",
+          level: 1,
+          icon: "i-lucide-heading-1",
+          label: "Heading 1"
+        },
+        {
+          kind: "heading",
+          level: 2,
+          icon: "i-lucide-heading-2",
+          label: "Heading 2"
+        },
+        {
+          kind: "heading",
+          level: 3,
+          icon: "i-lucide-heading-3",
+          label: "Heading 3"
+        },
+        {
+          kind: "heading",
+          level: 4,
+          icon: "i-lucide-heading-4",
+          label: "Heading 4"
+        }
+      ]
     },
     // Text alignment
     {
@@ -216,15 +224,18 @@ const toolbarItems = [
       content: {
         align: "start"
       },
-      items: [{
-        kind: "bulletList",
-        icon: "i-lucide-list",
-        label: "Bullet List"
-      }, {
-        kind: "orderedList",
-        icon: "i-lucide-list-ordered",
-        label: "Ordered List"
-      }]
+      items: [
+        {
+          kind: "bulletList",
+          icon: "i-lucide-list",
+          label: "Bullet List"
+        },
+        {
+          kind: "orderedList",
+          icon: "i-lucide-list-ordered",
+          label: "Ordered List"
+        }
+      ]
     },
     {
       kind: "blockquote",
@@ -249,66 +260,77 @@ const toolbarItems = [
     }
   ],
   // Text formatting
-  [{
-    kind: "mark",
-    mark: "bold",
-    icon: "i-lucide-bold",
-    tooltip: {
-      text: "Bold"
-    }
-  }, {
-    kind: "mark",
-    mark: "italic",
-    icon: "i-lucide-italic",
-    tooltip: {
-      text: "Italic"
-    }
-  }, {
-    kind: "mark",
-    mark: "underline",
-    icon: "i-lucide-underline",
-    tooltip: {
-      text: "Underline"
-    }
-  }, {
-    kind: "mark",
-    mark: "strike",
-    icon: "i-lucide-strikethrough",
-    tooltip: {
-      text: "Strikethrough"
-    }
-  }, {
-    kind: "mark",
-    mark: "code",
-    icon: "i-lucide-code",
-    tooltip: {
-      text: "Code"
+  [
+    {
+      kind: "mark",
+      mark: "bold",
+      icon: "i-lucide-bold",
+      tooltip: {
+        text: "Bold"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "italic",
+      icon: "i-lucide-italic",
+      tooltip: {
+        text: "Italic"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "underline",
+      icon: "i-lucide-underline",
+      tooltip: {
+        text: "Underline"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "strike",
+      icon: "i-lucide-strikethrough",
+      tooltip: {
+        text: "Strikethrough"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "code",
+      icon: "i-lucide-code",
+      tooltip: {
+        text: "Code"
+      }
     }
-  }],
+  ],
   // Link & image
   [
     {
       slot: "link"
     },
-    ...props.image?.requestOptions ? [{
-      kind: "imageUpload",
-      icon: "i-lucide-image"
-    }] : []
+    ...props.image?.requestOptions ? [
+      {
+        kind: "imageUpload",
+        icon: "i-lucide-image"
+      }
+    ] : []
   ],
   // History controls
-  [{
-    kind: "undo",
-    icon: "i-lucide-undo",
-    tooltip: {
-      text: "Undo"
-    }
-  }, {
-    kind: "redo",
-    icon: "i-lucide-redo",
-    tooltip: {
-      text: "Redo"
+  [
+    {
+      kind: "undo",
+      icon: "i-lucide-undo",
+      tooltip: {
+        text: "Undo"
+      }
+    },
+    {
+      kind: "redo",
+      icon: "i-lucide-redo",
+      tooltip: {
+        text: "Redo"
+      }
     }
-  }]
+  ]
 ];
 const suggestionItems = [
   [

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

@@ -6,7 +6,7 @@
     />
     <div :class="theme.labelWrapper()">
       <p
-        class="text-primary cursor-pointer font-bold"
+        class="cursor-pointer font-bold text-primary"
         @click="$emit('openFile')"
       >
         {{ selectFileLabel }}

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

@@ -11,7 +11,7 @@
         <h1 class="truncate font-bold">
           {{ selectedFile.name }}
         </h1>
-        <p class="text-error truncate font-light">
+        <p class="truncate font-light text-error">
           {{ uploadFailedLabel }}
         </p>
         <Button
@@ -27,7 +27,7 @@
       <Icon
         :name="icons.actionDeleteIcon"
         :class="theme.actionDeleteIconClass()"
-        title="ลบไฟล์"
+        :title="messages.upload.remove"
         @click="$emit('delete')"
       />
     </div>
@@ -35,6 +35,7 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import { isImage } from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
 defineEmits(["retry", "delete"]);
@@ -51,4 +52,5 @@ const getFileIcon = (file) => {
   }
   return icons.filePreviewIcon;
 };
+const { messages } = useCoreMessages();
 </script>

package/dist/runtime/components/Form/fileState/MultipleFilesState.d.vue.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;