pukaad-ui-lib 1.200.0 → 1.201.0

package/dist/module.json

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

package/dist/runtime/components/comments/CommentSection.d.vue.ts

@@ -10,11 +10,16 @@ interface ProfileData {
 interface CommentData {
     id: string | number;
     content: string;
-    createdAt: string;
-    likeCount: number;
+    createdAt?: string;
+    created_at?: string;
+    likeCount?: number;
+    like_count?: number;
     isLiked?: boolean;
+    is_like?: boolean;
     profileData?: ProfileData;
+    user?: any;
     comment_reply?: CommentData[];
+    reply?: CommentData[];
 }
 type __VLS_Props = {
     comments: CommentData[];
@@ -26,12 +31,16 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (text: string) => any;
     reply: (commentId: string | number, text: string) => any;
+    "like-comment": (comment: CommentData) => any;
+    "like-reply": (reply: CommentData) => any;
     like: (comment: CommentData) => any;
     profileClick: (pathName: string) => any;
     login: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((text: string) => any) | undefined;
     onReply?: ((commentId: string | number, text: string) => any) | undefined;
+    "onLike-comment"?: ((comment: CommentData) => any) | undefined;
+    "onLike-reply"?: ((reply: CommentData) => any) | undefined;
     onLike?: ((comment: CommentData) => any) | undefined;
     onProfileClick?: ((pathName: string) => any) | undefined;
     onLogin?: (() => any) | undefined;

package/dist/runtime/components/comments/CommentSection.vue

@@ -19,7 +19,9 @@
         <div class="flex gap-[16px] items-center">
           <Avatar
             :size="30"
-            :src="props.currentUser?.profile_image?.image_url || 'https://avatar.iran.liara.run/public?random=1'"
+            :src="
+  props.currentUser?.profile_image?.image_url || props.currentUser?.avatar
+"
           />
           <div class="w-auto flex-1" @click="isButtonComment = true">
             <InputTextarea
@@ -61,7 +63,9 @@
       </form>
     </div>
     <div v-else class="bg-bright p-4 rounded-lg text-center text-gray">
-      กรุณา<a class="text-primary cursor-pointer px-1" @click="emit('login')">เข้าสู่ระบบ</a>เพื่อแสดงความคิดเห็น
+      กรุณา<a class="text-primary cursor-pointer px-1" @click="emit('login')"
+        >เข้าสู่ระบบ</a
+      >เพื่อแสดงความคิดเห็น
     </div>
 
     <!-- Comments List -->
@@ -79,11 +83,18 @@
         <div class="flex gap-[8px]">
           <div
             class="cursor-pointer"
-            @click="emit('profileClick', comment.profileData?.profile_path?.path_name)"
+            @click="
+  emit(
+    'profileClick',
+    comment.profileData?.profile_path?.path_name || comment.user?.path_name || comment.user?.id
+  )
+"
           >
             <Avatar
               :size="30"
-              :src="comment.profileData?.profile_image?.image_url"
+              :src="
+  comment.profileData?.profile_image?.image_url || comment.user?.avatar
+"
             />
           </div>
 
@@ -95,9 +106,16 @@
             >
               <div
                 class="font-body-large-prominent cursor-pointer"
-                @click="emit('profileClick', comment.profileData?.profile_path?.path_name)"
+                @click="
+  emit(
+    'profileClick',
+    comment.profileData?.profile_path?.path_name || comment.user?.path_name || comment.user?.id
+  )
+"
               >
-                {{ comment.profileData?.profile_name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D" }}
+                {{
+                  comment.profileData?.profile_name || comment.user?.name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D"
+                }}
               </div>
 
               <div class="font-body-large max-w-[768px] break-words">
@@ -111,19 +129,21 @@
         <div
           class="flex gap-[16px] ps-[38px] items-center text-gray font-body-large"
         >
-          <div>{{ comment.createdAt }}</div>
+          <div>{{ comment.createdAt || comment.created_at }}</div>
 
           <div class="flex gap-[4px]">
             <Button
               disabled-padding
               prepend-icon="fa6-regular:thumbs-up"
               variant="text"
-              :color="comment.isLiked ? 'primary' : 'black'"
+              :color="
+  comment.isLiked ?? comment.is_like ? 'primary' : 'black'
+"
               :icon-size="20"
               :loading="likeLoadingStates[comment.id]"
-              @click="emit('like', comment)"
+              @click="emit('like-comment', comment)"
             />
-            <div>{{ comment.likeCount || 0 }}</div>
+            <div>{{ comment.likeCount ?? comment.like_count ?? 0 }}</div>
           </div>
 
           <div
@@ -137,11 +157,16 @@
 
         <!-- Toggle Replies -->
         <div
-          v-if="comment.comment_reply?.length"
+          v-if="comment.comment_reply?.length || comment.reply?.length"
           class="flex gap-[8px] ps-[38px] items-center text-primary font-body-large cursor-pointer w-fit"
-          @click="showRepliesStates[commentIndex] = !showRepliesStates[commentIndex]"
+          @click="
+  showRepliesStates[commentIndex] = !showRepliesStates[commentIndex]
+"
         >
-          <div>การตอบกลับ {{ comment.comment_reply.length }} รายการ</div>
+          <div>
+            การตอบกลับ
+            {{ comment.comment_reply?.length || comment.reply?.length }} รายการ
+          </div>
           <Icon
             :name="
   showRepliesStates[commentIndex] ? 'heroicons:chevron-up-solid' : 'heroicons:chevron-down-solid'
@@ -153,11 +178,13 @@
 
       <!-- Replies -->
       <div
-        v-if="showRepliesStates[commentIndex] && comment.comment_reply"
+        v-if="
+  showRepliesStates[commentIndex] && (comment.comment_reply || comment.reply)
+"
         class="flex flex-col gap-[16px]"
       >
         <div
-          v-for="(reply, replyIndex) in comment.comment_reply"
+          v-for="(reply, replyIndex) in comment.comment_reply || comment.reply"
           :key="reply.id"
           class="ps-[38px] flex flex-col gap-[4px]"
         >
@@ -165,9 +192,16 @@
             <div>
               <Avatar
                 :size="30"
-                :src="reply.profileData?.profile_image?.image_url"
+                :src="
+  reply.profileData?.profile_image?.image_url || reply.user?.avatar
+"
                 class="cursor-pointer"
-                @click="emit('profileClick', reply.profileData?.profile_path?.path_name)"
+                @click="
+  emit(
+    'profileClick',
+    reply.profileData?.profile_path?.path_name || reply.user?.path_name || reply.user?.id
+  )
+"
               />
             </div>
 
@@ -179,9 +213,16 @@
               >
                 <div
                   class="font-body-large-prominent cursor-pointer"
-                  @click="emit('profileClick', reply.profileData?.profile_path?.path_name)"
+                  @click="
+  emit(
+    'profileClick',
+    reply.profileData?.profile_path?.path_name || reply.user?.path_name || reply.user?.id
+  )
+"
                 >
-                  {{ reply.profileData?.profile_name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D" }}
+                  {{
+                    reply.profileData?.profile_name || reply.user?.name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D"
+                  }}
                 </div>
 
                 <div class="font-body-large max-w-[768px] break-words">
@@ -195,19 +236,19 @@
           <div
             class="flex gap-[16px] ps-[38px] items-center text-gray font-body-large"
           >
-            <div>{{ reply.createdAt }}</div>
+            <div>{{ reply.createdAt || reply.created_at }}</div>
 
             <div class="flex gap-[4px]">
               <Button
                 disabled-padding
                 prepend-icon="fa6-regular:thumbs-up"
                 variant="text"
-                :color="reply.isLiked ? 'primary' : 'black'"
+                :color="reply.isLiked ?? reply.is_like ? 'primary' : 'black'"
                 :icon-size="20"
                 :loading="likeLoadingStates[reply.id]"
-                @click="emit('like', reply)"
+                @click="emit('like-reply', reply)"
               />
-              <div>{{ reply.likeCount || 0 }}</div>
+              <div>{{ reply.likeCount ?? reply.like_count ?? 0 }}</div>
             </div>
           </div>
         </div>
@@ -221,7 +262,9 @@
         <div class="flex gap-[16px]">
           <Avatar
             :size="30"
-            :src="props.currentUser?.profile_image?.image_url || 'https://avatar.iran.liara.run/public?random=1'"
+            :src="
+  props.currentUser?.profile_image?.image_url || props.currentUser?.avatar || 'https://avatar.iran.liara.run/public?random=1'
+"
           />
 
           <div class="w-auto flex-1">
@@ -231,7 +274,7 @@
               resize="none"
               rows="1"
               full-width
-              :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${comment.profileData?.profile_name}...`"
+              :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${comment.profileData?.profile_name || comment.user?.name || '\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D'}...`"
             />
           </div>
         </div>
@@ -275,7 +318,7 @@ const props = defineProps({
   isSubmitting: { type: Boolean, required: false },
   isLoggedIn: { type: Boolean, required: false }
 });
-const emit = defineEmits(["submit", "reply", "like", "profileClick", "login"]);
+const emit = defineEmits(["submit", "reply", "like", "like-comment", "like-reply", "profileClick", "login"]);
 const commentText = ref("");
 const replyText = ref("");
 const replyingTo = ref(null);
@@ -297,7 +340,8 @@ const handleLocalReply = (comment) => {
 };
 const openReplyForm = async (comment) => {
   replyingTo.value = comment.id;
-  replyText.value = comment.profileData?.profile_name ? `@${comment.profileData.profile_name} ` : "";
+  const targetName = comment.profileData?.profile_name || comment.user?.name;
+  replyText.value = targetName ? `@${targetName} ` : "";
   await nextTick();
   replyInput.value?.focus();
 };

package/dist/runtime/components/comments/CommentSection.vue.d.ts

@@ -10,11 +10,16 @@ interface ProfileData {
 interface CommentData {
     id: string | number;
     content: string;
-    createdAt: string;
-    likeCount: number;
+    createdAt?: string;
+    created_at?: string;
+    likeCount?: number;
+    like_count?: number;
     isLiked?: boolean;
+    is_like?: boolean;
     profileData?: ProfileData;
+    user?: any;
     comment_reply?: CommentData[];
+    reply?: CommentData[];
 }
 type __VLS_Props = {
     comments: CommentData[];
@@ -26,12 +31,16 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (text: string) => any;
     reply: (commentId: string | number, text: string) => any;
+    "like-comment": (comment: CommentData) => any;
+    "like-reply": (reply: CommentData) => any;
     like: (comment: CommentData) => any;
     profileClick: (pathName: string) => any;
     login: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((text: string) => any) | undefined;
     onReply?: ((commentId: string | number, text: string) => any) | undefined;
+    "onLike-comment"?: ((comment: CommentData) => any) | undefined;
+    "onLike-reply"?: ((reply: CommentData) => any) | undefined;
     onLike?: ((comment: CommentData) => any) | undefined;
     onProfileClick?: ((pathName: string) => any) | undefined;
     onLogin?: (() => any) | undefined;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/package.json

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