pukaad-ui-lib 1.147.0 → 1.149.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.147.0",
+  "version": "1.149.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -138,7 +138,7 @@ const uploadImage = async (file) => {
       },
       body: JSON.stringify({
         file_name: [file.name],
-        state: "blog"
+        state: "blog-cover"
       }),
       onRequest({ options }) {
         const { APP_TYPE } = config.public;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-content.d.vue.ts

@@ -8,6 +8,7 @@ export interface InputContentProps {
     placeholder?: string;
     disabledBorder?: boolean;
     disableMedia?: boolean;
+    state?: "personal" | "business";
 }
 type __VLS_Props = InputContentProps;
 type __VLS_ModelProps = {
@@ -31,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    state: "personal" | "business";
     disableMedia: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/input-content.vue

@@ -38,7 +38,9 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
 const { $quill } = useNuxtApp();
+const api = useApi();
 const contentRef = ref(null);
 let quillEditor = null;
 const props = defineProps({
@@ -50,7 +52,8 @@ const props = defineProps({
   height: { type: [String, Number], required: false, default: 288 },
   placeholder: { type: String, required: false },
   disabledBorder: { type: Boolean, required: false },
-  disableMedia: { type: Boolean, required: false, default: false }
+  disableMedia: { type: Boolean, required: false, default: false },
+  state: { type: String, required: false, default: "personal" }
 });
 const modelValue = defineModel();
 const isDraggingMedia = ref(false);
@@ -69,6 +72,66 @@ defineExpose({
   validate,
   fieldRef
 });
+const getUploadState = () => {
+  return props.state === "business" ? "business-blog-media" : "blog-media";
+};
+const uploadImageToPresigned = async (file) => {
+  const res = await api("/storage/presigned-urls", {
+    method: "POST",
+    body: {
+      file_name: [file.name],
+      state: getUploadState()
+    }
+  });
+  if (res.code !== 200 || !res.data?.items?.[0]) {
+    throw new Error(res.message || "Failed to generate upload URL");
+  }
+  const item = res.data.items[0];
+  await fetch(item.upload_url, {
+    method: "PUT",
+    body: file,
+    headers: {
+      "Content-Type": file.type
+    }
+  });
+  return item.public_url;
+};
+const insertUploadedImage = async (file) => {
+  if (!quillEditor) return;
+  try {
+    const url = await uploadImageToPresigned(file);
+    const range = quillEditor.getSelection(true);
+    quillEditor.insertEmbed(range.index, "image", url, "user");
+    quillEditor.setSelection(range.index + 1, 0);
+  } catch (error) {
+    console.error("Image upload failed:", error);
+  }
+};
+const handlePasteImage = (e) => {
+  if (props.disableMedia) return;
+  const clipboardData = e.clipboardData;
+  if (!clipboardData) return;
+  const imageFiles = Array.from(clipboardData.files).filter(
+    (file) => file.type.startsWith("image/")
+  );
+  if (imageFiles.length > 0) {
+    e.preventDefault();
+    imageFiles.forEach((file) => insertUploadedImage(file));
+  }
+};
+const handleDropUpload = (e) => {
+  if (props.disableMedia) return;
+  const dataTransfer = e.dataTransfer;
+  if (!dataTransfer) return;
+  const imageFiles = Array.from(dataTransfer.files).filter(
+    (file) => file.type.startsWith("image/")
+  );
+  if (imageFiles.length > 0) {
+    e.preventDefault();
+    e.stopPropagation();
+    imageFiles.forEach((file) => insertUploadedImage(file));
+  }
+};
 onMounted(() => {
   if (contentRef.value) {
     const toolbarOptions = [
@@ -79,40 +142,59 @@ onMounted(() => {
       [{ indent: "-1" }, { indent: "+1" }],
       [{ color: [] }, { background: [] }],
       [{ align: [] }],
-      props.disableMedia ? ["link"] : ["link", "image", "video"]
+      props.disableMedia ? ["link"] : ["link", "image"]
     ];
     const modules = {
-      toolbar: toolbarOptions
-    };
-    if (props.disableMedia) {
-      modules.clipboard = {
+      toolbar: toolbarOptions,
+      clipboard: {
         matchers: [
           [
-            "IMG",
+            "VIDEO",
             () => {
               return { ops: [] };
             }
           ],
           [
-            "VIDEO",
-            () => {
-              return { ops: [] };
+            "IMG",
+            (node, delta) => {
+              if (props.disableMedia) {
+                return { ops: [] };
+              }
+              const src = node.getAttribute("src");
+              if (src && src.startsWith("data:")) {
+                return { ops: [] };
+              }
+              return delta;
             }
           ]
         ]
-      };
-    }
+      }
+    };
     quillEditor = new $quill(contentRef.value, {
       theme: "snow",
       placeholder: props.placeholder,
       modules
     });
-    if (props.disableMedia) {
-      const toolbar = quillEditor.getModule("toolbar");
-      if (toolbar && toolbar.addHandler) {
+    const toolbar = quillEditor.getModule("toolbar");
+    if (toolbar && toolbar.addHandler) {
+      if (props.disableMedia) {
         toolbar.addHandler("image", () => {
         });
-        toolbar.addHandler("video", () => {
+      } else {
+        toolbar.addHandler("image", () => {
+          const fileInput = document.createElement("input");
+          fileInput.setAttribute("type", "file");
+          fileInput.setAttribute(
+            "accept",
+            "image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          );
+          fileInput.addEventListener("change", () => {
+            const file = fileInput.files?.[0];
+            if (file) {
+              insertUploadedImage(file);
+            }
+          });
+          fileInput.click();
         });
       }
     }
@@ -123,10 +205,18 @@ onMounted(() => {
       if (source === "user") {
         if (!quillEditor) return;
         const currentDeltaJson = quillEditor.getContents();
-        if (props.disableMedia && currentDeltaJson.ops) {
+        if (currentDeltaJson.ops) {
           const filteredOps = currentDeltaJson.ops.filter((op) => {
             if (op.insert && typeof op.insert === "object") {
-              return !op.insert.image && !op.insert.video;
+              const isVideo = !!op.insert.video;
+              const isImage = !!op.insert.image;
+              if (props.disableMedia) {
+                return !isVideo && !isImage;
+              }
+              if (isImage && typeof op.insert.image === "string" && op.insert.image.startsWith("data:")) {
+                return false;
+              }
+              return !isVideo;
             }
             return true;
           });
@@ -141,12 +231,15 @@ onMounted(() => {
         }
       }
     });
+    quillEditor.root.addEventListener("paste", handlePasteImage);
     if (props.disableMedia) {
       const editorRoot = quillEditor.root;
       editorRoot.addEventListener("dragenter", handleDragEnter);
       editorRoot.addEventListener("dragover", handleDragOver);
       editorRoot.addEventListener("dragleave", handleDragLeave);
       editorRoot.addEventListener("drop", handleDrop);
+    } else {
+      quillEditor.root.addEventListener("drop", handleDropUpload);
     }
   }
 });
@@ -184,12 +277,15 @@ const handleDrop = (e) => {
 onUnmounted(() => {
   if (quillEditor && contentRef.value) {
     quillEditor.off("text-change");
+    quillEditor.root.removeEventListener("paste", handlePasteImage);
     if (props.disableMedia) {
       const editorRoot = quillEditor.root;
       editorRoot.removeEventListener("dragenter", handleDragEnter);
       editorRoot.removeEventListener("dragover", handleDragOver);
       editorRoot.removeEventListener("dragleave", handleDragLeave);
       editorRoot.removeEventListener("drop", handleDrop);
+    } else {
+      quillEditor.root.removeEventListener("drop", handleDropUpload);
     }
     const toolbar = contentRef.value.previousElementSibling;
     if (toolbar && toolbar.classList.contains("ql-toolbar")) {

package/dist/runtime/components/input/input-content.vue.d.ts

@@ -8,6 +8,7 @@ export interface InputContentProps {
     placeholder?: string;
     disabledBorder?: boolean;
     disableMedia?: boolean;
+    state?: "personal" | "business";
 }
 type __VLS_Props = InputContentProps;
 type __VLS_ModelProps = {
@@ -31,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    state: "personal" | "business";
     disableMedia: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-slider.d.vue.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-slider.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/useConvert.d.ts

@@ -6,17 +6,17 @@ export declare class Convert {
     convertNumber: (num: number) => string;
     /**
      * Convert date to Thai format
-     * @example convertDate("2024-01-01") => "1 ม.ค. 2567"
+     * @example convertDate("2024-01-01") => "1 มกราคม 2567"
      */
     convertDate: (date: string | Date | null | undefined, format?: string) => string;
     /**
      * Convert date time to Thai format
-     * @example convertDateTime("2024-01-01 12:00") => "1 ม.ค. 2567 12:00"
+     * @example convertDateTime("2024-01-01 12:00") => "1 มกราคม 2567 12:00"
      */
     convertDateTime: (date: string | Date | null | undefined, format?: string) => string;
     /**
      * Convert date to relative text
-     * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 ก.พ. 2569, 13:19"
+     * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 กุมภาพันธ์ 2569, 13:19"
      */
     convertDateTorelativeText: (date: string | Date | null | undefined) => string;
 }

package/dist/runtime/composables/useConvert.js

@@ -25,23 +25,23 @@ export class Convert {
   };
   /**
    * Convert date to Thai format
-   * @example convertDate("2024-01-01") => "1 ม.ค. 2567"
+   * @example convertDate("2024-01-01") => "1 มกราคม 2567"
    */
-  convertDate = (date, format = "D MMM BBBB") => {
+  convertDate = (date, format = "D MMMM BBBB") => {
     if (!date) return "-";
     return dayjs(date).format(format);
   };
   /**
    * Convert date time to Thai format
-   * @example convertDateTime("2024-01-01 12:00") => "1 ม.ค. 2567 12:00"
+   * @example convertDateTime("2024-01-01 12:00") => "1 มกราคม 2567 12:00"
    */
-  convertDateTime = (date, format = "D MMM BBBB, HH:mm") => {
+  convertDateTime = (date, format = "D MMMM BBBB, HH:mm") => {
     if (!date) return "-";
     return dayjs(date).format(format);
   };
   /**
    * Convert date to relative text
-   * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 ก.พ. 2569, 13:19"
+   * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 กุมภาพันธ์ 2569, 13:19"
    */
   convertDateTorelativeText = (date) => {
     if (!date) return "-";
@@ -58,7 +58,7 @@ export class Convert {
     if (diffHour < 24) {
       return `${diffHour} \u0E0A\u0E31\u0E48\u0E27\u0E42\u0E21\u0E07\u0E17\u0E35\u0E48\u0E1C\u0E48\u0E32\u0E19\u0E21\u0E32`;
     }
-    return this.convertDateTime(date, "D MMM BBBB, HH:mm");
+    return this.convertDateTime(date, "D MMMM BBBB, HH:mm");
   };
 }
 const convertInstance = new Convert();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.147.0",
+  "version": "1.149.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",