pukaad-ui-lib 1.456.0 → 1.458.0

package/dist/module.json

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

package/dist/runtime/components/chat/chat-conversation-item.d.vue.ts

@@ -27,12 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     avatar: string | null;
     muted: boolean;
     disabledMenu: boolean;
-    unreadCount: number;
-    pinned: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
+    unreadCount: number;
+    pinned: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/chat-conversation-item.vue.d.ts

@@ -27,12 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     avatar: string | null;
     muted: boolean;
     disabledMenu: boolean;
-    unreadCount: number;
-    pinned: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
+    unreadCount: number;
+    pinned: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/comment.d.vue.ts

@@ -35,6 +35,8 @@ type __VLS_Props = {
     currentUser: User;
     fetchFn?: (page: number, pageSize: number) => Promise<CommentFetchResult>;
     pageSize?: number;
+    /** ดูอย่างเดียว (เช่นหน้าพรีวิว) — ไม่มีช่องพิมพ์/เมนู กดถูกใจ/ตอบกลับ/ดูโปรไฟล์ไม่ได้ แต่ยังกดดูการตอบกลับ/ดูเพิ่มเติมได้ */
+    readonly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     addComment: (comment: CommentItem) => void;
@@ -67,6 +69,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     comments: CommentItem[];
     commentCount: number;
     pageSize: number;
+    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/comment.vue

@@ -8,7 +8,7 @@
     </div>
 
     <!-- กล่องคอมเมนต์หลัก — ปุ่มโผล่ตอนคลิกเข้าช่องพิมพ์ (actions-on-focus) -->
-    <InputComment ref="mainInputRef" v-model="mainCommentInput" :avatar="currentUser.avatar"
+    <InputComment v-if="!props.readonly" ref="mainInputRef" v-model="mainCommentInput" :avatar="currentUser.avatar"
       placeholder="เพิ่มความคิดเห็น" actions-on-focus @submit="onSendComment" />
     <div v-for="cmt in resolvedComments" :key="cmt.id" class="flex flex-col gap-[16px] w-full">
       <div class="flex flex-col gap-[4px] w-full">
@@ -40,7 +40,7 @@
                 </template>
               </div>
             </div>
-            <div class="self-center transition-opacity" :class="
+            <div v-if="!props.readonly" class="self-center transition-opacity" :class="
   isMenuVisible(cmt.id) ? 'opacity-100' : 'opacity-0 pointer-events-none'
 ">
               <PickerOptionMenu horizontal variant="ghost" circle size="icon-sm" icon-size="20"
@@ -49,7 +49,7 @@
             </div>
           </template>
         </div>
-        <div class="pl-[38px] flex gap-[16px] text-gray">
+        <div class="pl-[38px] flex gap-[16px] text-gray" :inert="props.readonly || void 0">
           <div class="font-body-large">
             {{ convertDateToRelativeText(cmt.created_at) }}
           </div>
@@ -119,7 +119,7 @@
                         @click="toggleContentExpand(`reply-${reply.id}`)">ดูเพิ่มเติม</span></template>
                   </div>
                 </div>
-                <div class="self-center transition-opacity" :class="
+                <div v-if="!props.readonly" class="self-center transition-opacity" :class="
   isMenuVisible(reply.id) ? 'opacity-100' : 'opacity-0 pointer-events-none'
 ">
                   <PickerOptionMenu horizontal variant="ghost" circle size="icon-xs" icon-size="20"
@@ -129,7 +129,7 @@
                 </div>
               </template>
             </div>
-            <div class="pl-[38px] flex gap-[16px] text-gray">
+            <div class="pl-[38px] flex gap-[16px] text-gray" :inert="props.readonly || void 0">
               <div class="font-body-large">
                 {{ convertDateToRelativeText(reply.created_at) }}
               </div>
@@ -177,7 +177,8 @@ const props = defineProps({
   commentCount: { type: Number, required: false, default: 0 },
   currentUser: { type: Object, required: true },
   fetchFn: { type: Function, required: false },
-  pageSize: { type: Number, required: false, default: 20 }
+  pageSize: { type: Number, required: false, default: 20 },
+  readonly: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["submit", "reply", "like-comment", "like-reply", "edit-comment", "edit-reply", "delete-comment", "delete-reply", "report-comment", "report-reply"]);
 const internalComments = ref([]);
@@ -343,6 +344,7 @@ const onToggleLikeReplyComment = (reply) => {
   emit("like-reply", reply);
 };
 const onViewProfileComment = (id) => {
+  if (props.readonly) return;
   if (id) router.push(`/@${id}`);
 };
 const onEditClick = (id, content, replyTo) => {

package/dist/runtime/components/comment.vue.d.ts

@@ -35,6 +35,8 @@ type __VLS_Props = {
     currentUser: User;
     fetchFn?: (page: number, pageSize: number) => Promise<CommentFetchResult>;
     pageSize?: number;
+    /** ดูอย่างเดียว (เช่นหน้าพรีวิว) — ไม่มีช่องพิมพ์/เมนู กดถูกใจ/ตอบกลับ/ดูโปรไฟล์ไม่ได้ แต่ยังกดดูการตอบกลับ/ดูเพิ่มเติมได้ */
+    readonly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     addComment: (comment: CommentItem) => void;
@@ -67,6 +69,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     comments: CommentItem[];
     commentCount: number;
     pageSize: number;
+    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-image.vue

@@ -19,7 +19,7 @@
         <Image
           :src="getSrc((props.items ?? [])[0])"
           class="rounded-[8px]"
-          width="720"
+          :width="widthMainImg"
           height="auto"
         />
       </div>
@@ -66,6 +66,11 @@ const heightBox = computed(() => {
   if (length > 1 && length <= 4) return 422;
   return 480;
 });
+const widthMainImg = computed(() => {
+  const length = props.items?.length ?? 0;
+  if (length === 3 || length === 4) return 633;
+  return 720;
+});
 const widthSubImg = computed(() => {
   const length = props.items?.length ?? 0;
   if (length === 0) return 0;

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

@@ -74,6 +74,9 @@
               </template>
             </InputFile>
           </div>
+          <div v-if="needsManualPoster" class="font-body-small text-destructive">
+            ไม่สามารถสร้างหน้าปกจากวิดีโอได้ กรุณาอัปโหลดภาพหน้าปก
+          </div>
           <div
             v-show="hasCoverText && !hasCoverFile"
             class="flex gap-[8px] py-[4px] px-[12px]"
@@ -190,6 +193,7 @@ const coverText = ref("");
 const coverFiles = ref([]);
 const posterFiles = ref([]);
 const generatedPoster = ref(null);
+const posterGenerationFailed = ref(false);
 const description = ref("");
 const fileColumns = ref(false);
 const selectedPlaces = ref([]);
@@ -245,6 +249,7 @@ watch(
   ([videoFile, manualPoster]) => {
     const generation = ++thumbnailGeneration;
     clearGeneratedPoster();
+    posterGenerationFailed.value = false;
     if (manualPoster || typeof File === "undefined" || !(videoFile instanceof File) || !videoFile.type.startsWith("video/")) {
       thumbnailPromise = Promise.resolve();
       return;
@@ -258,6 +263,9 @@ watch(
         mediaType: "image"
       };
     }).catch(() => {
+      if (generation === thumbnailGeneration) {
+        posterGenerationFailed.value = true;
+      }
     });
   },
   { immediate: true }
@@ -269,6 +277,9 @@ onBeforeUnmount(() => {
 const effectivePoster = computed(
   () => posterFiles.value[0] ?? generatedPoster.value
 );
+const needsManualPoster = computed(
+  () => coverFileType.value === "video" && !posterFiles.value[0] && (posterGenerationFailed.value || typeof File === "undefined" || !(coverFiles.value[0]?.file instanceof File))
+);
 const previewItem = computed(() => {
   if (hasCoverFile.value) {
     const file = coverFiles.value[0];
@@ -449,6 +460,13 @@ const submitContent = async (status) => {
     if (contentType === "video" && !posterFiles.value[0]) {
       await thumbnailPromise;
     }
+    if (contentType === "video" && status === "PUBLISHED" && !effectivePoster.value) {
+      posterGenerationFailed.value = true;
+      $toast?.error?.(
+        "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E20\u0E32\u0E1E\u0E2B\u0E19\u0E49\u0E32\u0E1B\u0E01\u0E02\u0E2D\u0E07\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D"
+      );
+      return;
+    }
     const [uploadedMedia, uploadedPoster] = await Promise.all([
       uploadFiles(coverFiles.value, "content-media"),
       contentType === "video" && effectivePoster.value ? uploadFiles([effectivePoster.value], "content-media") : Promise.resolve([])

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

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

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

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

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

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

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

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

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

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

@@ -47,10 +47,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     loading: boolean;
     disabled: boolean;
     placeholder: string;
+    cancelText: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;
-    cancelText: string;
     actionsOnFocus: boolean;
     disabledActions: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -47,10 +47,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     loading: boolean;
     disabled: boolean;
     placeholder: string;
+    cancelText: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;
-    cancelText: string;
     actionsOnFocus: boolean;
     disabledActions: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     removable: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     removable: boolean;
     showCounter: boolean;

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

@@ -10,10 +10,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     size: number;
+    readonly: boolean;
     borderColor: string;
     modelValue: number;
     backgroundColor: string;
-    readonly: boolean;
     ratingStep: number;
     borderSize: number;
     activeColor: string;

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

@@ -10,10 +10,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     size: number;
+    readonly: boolean;
     borderColor: string;
     modelValue: number;
     backgroundColor: string;
-    readonly: boolean;
     ratingStep: number;
     borderSize: number;
     activeColor: string;

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

@@ -33,11 +33,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     type: import("./input-text-field.vue.js").InputTextFieldType;
     icon: string;
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
     placeholder: string;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

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

@@ -33,11 +33,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     type: import("./input-text-field.vue.js").InputTextFieldType;
     icon: string;
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
     placeholder: string;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

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

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

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

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     profileScope: "personal" | "business";
     ignore: string[];

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     profileScope: "personal" | "business";
     ignore: string[];

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -56,11 +56,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     type: InputTextFieldType;
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -56,11 +56,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     type: InputTextFieldType;
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -40,6 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
@@ -48,7 +49,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     rows: number;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -40,6 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     disabled: boolean;
+    readonly: boolean;
     id: string;
     name: string;
     required: boolean;
@@ -48,7 +49,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     rows: number;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => 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, {},
     }) => 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-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    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-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    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/preview/preview-content.vue

@@ -36,6 +36,7 @@
             v-else-if="contentData.content_type === 'image'"
             :items="contentData.media"
             item-src="url"
+            @select="openImage"
           />
           <!-- Video -->
           <DisplayVideo
@@ -119,13 +120,12 @@
           </div>
 
           <!-- ส่งรายการเข้าไปเอง (ไม่ใช้ fetchFn) เพราะ fetchFn โหลดหน้าถัดไปจาก window scroll -->
-          <div inert>
-            <Comment
-              :comments="comments"
-              :comment-count="commentTotal"
-              :current-user="previewUser"
-            />
-          </div>
+          <Comment
+            :comments="comments"
+            :comment-count="commentTotal"
+            :current-user="previewUser"
+            readonly
+          />
 
           <div ref="sentinel" class="h-[1px]" />
           <div v-if="isLoadingComments" class="flex justify-center py-[16px]">
@@ -138,6 +138,8 @@
         </div>
       </div>
     </div>
+
+    <ModalDisplayImage v-model="isImageOpen" :src="selectedImage" />
   </div>
 </template>
 
@@ -172,6 +174,8 @@ const isLoadingComments = ref(false);
 const hasMoreComments = computed(
   () => commentPage.value < commentTotalPages.value
 );
+const isImageOpen = ref(false);
+const selectedImage = ref("");
 const previewUser = { id: "", name: "", avatar: "" };
 const labelItems = computed(
   () => (contentData.value.labels ?? []).map((label) => ({
@@ -289,6 +293,11 @@ const fetchComments = async (page = 1) => {
     if (requestId === commentRequestId) isLoadingComments.value = false;
   }
 };
+const openImage = (item) => {
+  if (!item?.url) return;
+  selectedImage.value = item.url;
+  isImageOpen.value = true;
+};
 const loadAll = () => {
   fetchContentData();
   fetchRecommendations();

package/dist/runtime/composables/store-chat.d.ts

@@ -121,7 +121,7 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     startRealtime: () => void;
     stopRealtime: () => void;
     resync: (activeConversationId?: string) => Promise<void>;
-}, "headers" | "isConnected" | "conversations" | "unreadFirst" | "hasMoreConversations" | "hasLoadedConversations" | "isLoadingConversations" | "peerLastRead" | "messages" | "hasOlder" | "isLoadingOlder" | "unreadChatCount">, Pick<{
+}, "headers" | "conversations" | "unreadFirst" | "hasMoreConversations" | "hasLoadedConversations" | "isLoadingConversations" | "peerLastRead" | "messages" | "hasOlder" | "isLoadingOlder" | "isConnected" | "unreadChatCount">, Pick<{
     conversations: import("vue").Ref<{
         id: string;
         profile: {
@@ -365,4 +365,4 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     startRealtime: () => void;
     stopRealtime: () => void;
     resync: (activeConversationId?: string) => Promise<void>;
-}, "reset" | "markRead" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "retryMessage" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;
+}, "reset" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "retryMessage" | "markRead" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;

package/dist/runtime/composables/store-notification.d.ts

@@ -215,4 +215,4 @@ export declare const useNotificationStore: import("pinia").StoreDefinition<"noti
     openDrawer: () => void;
     closeDrawer: () => void;
     toggleDrawer: () => void;
-}, "fetchList" | "loadMore" | "prefetch" | "markRead" | "markAllRead" | "fetchUnreadCount" | "initRealtime" | "closeRealtime" | "setUnreadCount" | "openDrawer" | "closeDrawer" | "toggleDrawer">>;
+}, "markRead" | "fetchList" | "loadMore" | "prefetch" | "markAllRead" | "fetchUnreadCount" | "initRealtime" | "closeRealtime" | "setUnreadCount" | "openDrawer" | "closeDrawer" | "toggleDrawer">>;

package/package.json

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