pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/collapse/collapse.vue

@@ -1,31 +1,31 @@
 <template>
-  <div
-    class="flex flex-col"
+  <div
+    class="flex flex-col"
     :style="{
   width: props.fullWidth ? '100%' : `${props.width}`
-}"
-  >
-    <slot name="title">
-      <div
-        class="flex justify-between items-center p-2 cursor-pointer"
-        @click="isOpen = !isOpen"
-      >
-        <slot name="title-text">
-          <div>{{ props.title }}</div>
-        </slot>
-        <slot name="title-toggle">
-          <Icon
+}"
+  >
+    <slot name="title">
+      <div
+        class="flex justify-between items-center p-2 cursor-pointer"
+        @click="isOpen = !isOpen"
+      >
+        <slot name="title-text">
+          <div>{{ props.title }}</div>
+        </slot>
+        <slot name="title-toggle">
+          <Icon
             :name="
   isOpen ? 'flowbite:angle-up-outline' : 'flowbite:angle-down-outline'
-"
-          />
-        </slot>
-      </div>
-    </slot>
-    <div v-if="isOpen">
-      <slot name="content"></slot>
-    </div>
-  </div>
+"
+          />
+        </slot>
+      </div>
+    </slot>
+    <div v-if="isOpen">
+      <slot name="content"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/comment.vue

@@ -1,163 +1,163 @@
 <template>
-  <div class="flex flex-col gap-[16px] w-full">
-    <div class="flex gap-[8px] items-center">
-      <div class="font-title-medium-prominent">ความคิดเห็น</div>
-      <div class="font-title-medium text-gray">
-        {{ $convert.convertNumber(resolvedCommentCount) }}
-      </div>
-    </div>
-
-    <!-- กล่องคอมเมนต์หลัก — ปุ่มโผล่ตอนคลิกเข้าช่องพิมพ์ (actions-on-focus) -->
-    <InputComment 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">
-        <div class="flex gap-[8px]" @mouseenter="hoveredId = cmt.id" @mouseleave="hoveredId = null">
-          <Avatar :size="30" :src="cmt.user.avatar" class="cursor-pointer" @click="onViewProfileComment(cmt.user.id)" />
-          <template v-if="editingId === cmt.id">
-            <!-- กล่องแก้ไข — อวาตาร์ใช้ของแถวข้างนอก เลย disabled-avatar -->
-            <InputComment v-model="editText" disabled-avatar autofocus class="flex-1 min-w-0"
-              @submit="onSendEdit(cmt, 'comment')" @cancel="onCancelEdit" />
-          </template>
-          <template v-else>
-            <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
-              <div class="font-body-large-prominent cursor-pointer" @click="onViewProfileComment(cmt.user.id)">
-                {{ cmt.user.name }}
-              </div>
+  <div class="flex flex-col gap-[16px] w-full">
+    <div class="flex gap-[8px] items-center">
+      <div class="font-title-medium-prominent">ความคิดเห็น</div>
+      <div class="font-title-medium text-gray">
+        {{ $convert.convertNumber(resolvedCommentCount) }}
+      </div>
+    </div>
+
+    <!-- กล่องคอมเมนต์หลัก — ปุ่มโผล่ตอนคลิกเข้าช่องพิมพ์ (actions-on-focus) -->
+    <InputComment 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">
+        <div class="flex gap-[8px]" @mouseenter="hoveredId = cmt.id" @mouseleave="hoveredId = null">
+          <Avatar :size="30" :src="cmt.user.avatar" class="cursor-pointer" @click="onViewProfileComment(cmt.user.id)" />
+          <template v-if="editingId === cmt.id">
+            <!-- กล่องแก้ไข — อวาตาร์ใช้ของแถวข้างนอก เลย disabled-avatar -->
+            <InputComment v-model="editText" disabled-avatar autofocus class="flex-1 min-w-0"
+              @submit="onSendEdit(cmt, 'comment')" @cancel="onCancelEdit" />
+          </template>
+          <template v-else>
+            <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
+              <div class="font-body-large-prominent cursor-pointer" @click="onViewProfileComment(cmt.user.id)">
+                {{ cmt.user.name }}
+              </div>
               <div :ref="
   (el) => registerContentRef(el, `comment-${cmt.id}`)
-" class="font-body-large whitespace-pre-wrap">
+" class="font-body-large whitespace-pre-wrap">
                 <template v-if="
   isContentExpanded(`comment-${cmt.id}`) || !isContentOverflowing(`comment-${cmt.id}`)
-">
-                  {{ normalizeContent(cmt.content) }}
-                </template>
-                <template v-else>
-                  {{ getTruncatedText(`comment-${cmt.id}`) }}...<span class="text-primary cursor-pointer"
-                    @click="toggleContentExpand(`comment-${cmt.id}`)">
-                    ดูเพิ่มเติม
-                  </span>
-                </template>
-              </div>
-            </div>
+">
+                  {{ normalizeContent(cmt.content) }}
+                </template>
+                <template v-else>
+                  {{ getTruncatedText(`comment-${cmt.id}`) }}...<span class="text-primary cursor-pointer"
+                    @click="toggleContentExpand(`comment-${cmt.id}`)">
+                    ดูเพิ่มเติม
+                  </span>
+                </template>
+              </div>
+            </div>
             <div 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"
-                :items="getCommentMenuItems(cmt)" :open="openMenuId === cmt.id"
-                @update:open="(v) => openMenuId = v ? cmt.id : null" />
-            </div>
-          </template>
-        </div>
-        <div class="pl-[38px] flex gap-[16px] text-gray">
-          <div class="font-body-large">
-            {{ convertDateToRelativeText(cmt.created_at) }}
-          </div>
-          <div class="flex gap-[4px] items-center cursor-pointer" @click="onToggleLikeComment(cmt)">
+">
+              <PickerOptionMenu horizontal variant="ghost" circle size="icon-sm" icon-size="20"
+                :items="getCommentMenuItems(cmt)" :open="openMenuId === cmt.id"
+                @update:open="(v) => openMenuId = v ? cmt.id : null" />
+            </div>
+          </template>
+        </div>
+        <div class="pl-[38px] flex gap-[16px] text-gray">
+          <div class="font-body-large">
+            {{ convertDateToRelativeText(cmt.created_at) }}
+          </div>
+          <div class="flex gap-[4px] items-center cursor-pointer" @click="onToggleLikeComment(cmt)">
             <Icon :name="
   cmt.is_liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-" :class="[cmt.is_liked && 'text-primary']" size="20" />
-            <div v-if="cmt.like_count > 0" :class="[cmt.is_liked && 'text-primary']">
-              {{ $convert.convertNumber(cmt.like_count) }}
-            </div>
-          </div>
-          <div class="font-body-large cursor-pointer" @click="onReplyComment(cmt.id, cmt.user)">
-            ตอบกลับ
-          </div>
-        </div>
-        <div v-if="getHiddenCount(cmt) > 0" class="pl-[38px] flex flex-col gap-[16px]">
-          <Button variant="text" class="justify-start text-primary h-auto gap-[4px] w-fit"
-            @click="onToggleReplyComment(cmt.id)">
-            <div class="font-body-large">
-              การตอบกลับ
-              {{ $convert.convertNumber(getHiddenCount(cmt)) }}
-              รายการ
-            </div>
+" :class="[cmt.is_liked && 'text-primary']" size="20" />
+            <div v-if="cmt.like_count > 0" :class="[cmt.is_liked && 'text-primary']">
+              {{ $convert.convertNumber(cmt.like_count) }}
+            </div>
+          </div>
+          <div class="font-body-large cursor-pointer" @click="onReplyComment(cmt.id, cmt.user)">
+            ตอบกลับ
+          </div>
+        </div>
+        <div v-if="getHiddenCount(cmt) > 0" class="pl-[38px] flex flex-col gap-[16px]">
+          <Button variant="text" class="justify-start text-primary h-auto gap-[4px] w-fit"
+            @click="onToggleReplyComment(cmt.id)">
+            <div class="font-body-large">
+              การตอบกลับ
+              {{ $convert.convertNumber(getHiddenCount(cmt)) }}
+              รายการ
+            </div>
             <Icon :name="
   openedComments.includes(cmt.id) ? 'lucide:chevron-up' : 'lucide:chevron-down'
-" />
-          </Button>
-        </div>
-      </div>
-      <!-- กล่องตอบกลับคอมเมนต์ — ชิป mention ผ่าน v-model:reply-to -->
-      <InputComment v-if="replyingToId === cmt.id" v-model="replyText" v-model:reply-to="replyToUser"
-        :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
-        @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
+" />
+          </Button>
+        </div>
+      </div>
+      <!-- กล่องตอบกลับคอมเมนต์ — ชิป mention ผ่าน v-model:reply-to -->
+      <InputComment v-if="replyingToId === cmt.id" v-model="replyText" v-model:reply-to="replyToUser"
+        :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+        @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
       <div v-if="cmt.reply.length > 0" v-show="
   openedComments.includes(cmt.id) || cmt.reply.some((r) => pinnedReplyIds.has(r.id))
-" class="pl-[38px] flex flex-col gap-[16px]">
-        <div v-for="reply in cmt.reply" v-show="isReplyVisible(cmt, reply)" :key="reply.id"
-          class="flex flex-col gap-[16px]">
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex gap-[8px]" @mouseenter="hoveredId = reply.id" @mouseleave="hoveredId = null">
-              <Avatar :size="30" :src="reply.user.avatar" class="cursor-pointer"
-                @click="onViewProfileComment(reply.user.id)" />
-              <template v-if="editingId === reply.id">
-                <!-- แก้ไข reply — ชิป reply_to โชว์ผ่าน v-model:reply-to (ข้อความที่ส่งไม่รวมชื่อ) -->
-                <InputComment v-model="editText" v-model:reply-to="editReplyTo" disabled-avatar autofocus
-                  class="flex-1 min-w-0" @submit="onSendEdit(reply, 'reply')" @cancel="onCancelEdit" />
-              </template>
-              <template v-else>
-                <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
-                  <div class="font-body-large-prominent cursor-pointer" @click="onViewProfileComment(reply.user.id)">
-                    {{ reply.user.name }}
-                  </div>
+" class="pl-[38px] flex flex-col gap-[16px]">
+        <div v-for="reply in cmt.reply" v-show="isReplyVisible(cmt, reply)" :key="reply.id"
+          class="flex flex-col gap-[16px]">
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex gap-[8px]" @mouseenter="hoveredId = reply.id" @mouseleave="hoveredId = null">
+              <Avatar :size="30" :src="reply.user.avatar" class="cursor-pointer"
+                @click="onViewProfileComment(reply.user.id)" />
+              <template v-if="editingId === reply.id">
+                <!-- แก้ไข reply — ชิป reply_to โชว์ผ่าน v-model:reply-to (ข้อความที่ส่งไม่รวมชื่อ) -->
+                <InputComment v-model="editText" v-model:reply-to="editReplyTo" disabled-avatar autofocus
+                  class="flex-1 min-w-0" @submit="onSendEdit(reply, 'reply')" @cancel="onCancelEdit" />
+              </template>
+              <template v-else>
+                <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
+                  <div class="font-body-large-prominent cursor-pointer" @click="onViewProfileComment(reply.user.id)">
+                    {{ reply.user.name }}
+                  </div>
                   <div :ref="
   (el) => registerContentRef(
     el,
     `reply-${reply.id}`
   )
-" class="font-body-large whitespace-pre-wrap">
+" class="font-body-large whitespace-pre-wrap">
                     <template v-if="
   isContentExpanded(`reply-${reply.id}`) || !isContentOverflowing(`reply-${reply.id}`)
-"><span v-if="reply.reply_to" @click="onViewProfileComment(reply.reply_to.id)"
-                        class="text-primary cursor-pointer mr-1">{{ reply.reply_to.name }}</span>{{
-                          normalizeContent(reply.content) }}</template>
-                    <template v-else><span v-if="reply.reply_to" @click="onViewProfileComment(reply.reply_to.id)"
-                        class="text-primary cursor-pointer mr-1">{{ reply.reply_to.name }}</span>{{
-                          getTruncatedText(`reply-${reply.id}`) }}...<span class="text-primary cursor-pointer"
-                        @click="toggleContentExpand(`reply-${reply.id}`)">ดูเพิ่มเติม</span></template>
-                  </div>
-                </div>
+"><span v-if="reply.reply_to" @click="onViewProfileComment(reply.reply_to.id)"
+                        class="text-primary cursor-pointer mr-1">{{ reply.reply_to.name }}</span>{{
+                          normalizeContent(reply.content) }}</template>
+                    <template v-else><span v-if="reply.reply_to" @click="onViewProfileComment(reply.reply_to.id)"
+                        class="text-primary cursor-pointer mr-1">{{ reply.reply_to.name }}</span>{{
+                          getTruncatedText(`reply-${reply.id}`) }}...<span class="text-primary cursor-pointer"
+                        @click="toggleContentExpand(`reply-${reply.id}`)">ดูเพิ่มเติม</span></template>
+                  </div>
+                </div>
                 <div 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"
+">
+                  <PickerOptionMenu horizontal variant="ghost" circle size="icon-xs" icon-size="20"
                     :items="getReplyMenuItems(reply)" :open="openMenuId === reply.id" @update:open="
   (v) => openMenuId = v ? reply.id : null
-" />
-                </div>
-              </template>
-            </div>
-            <div class="pl-[38px] flex gap-[16px] text-gray">
-              <div class="font-body-large">
-                {{ convertDateToRelativeText(reply.created_at) }}
-              </div>
-              <div class="flex gap-[4px] items-center cursor-pointer" @click="onToggleLikeReplyComment(reply)">
+" />
+                </div>
+              </template>
+            </div>
+            <div class="pl-[38px] flex gap-[16px] text-gray">
+              <div class="font-body-large">
+                {{ convertDateToRelativeText(reply.created_at) }}
+              </div>
+              <div class="flex gap-[4px] items-center cursor-pointer" @click="onToggleLikeReplyComment(reply)">
                 <Icon :name="
   reply.is_liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-" :class="[reply.is_liked && 'text-primary']" size="20" />
-                <div v-if="reply.like_count > 0" :class="[reply.is_liked && 'text-primary']">
-                  {{ $convert.convertNumber(reply.like_count) }}
-                </div>
-              </div>
-              <div class="font-body-large cursor-pointer" @click="onReplyComment(reply.id, reply.user)">
-                ตอบกลับ
-              </div>
-            </div>
-          </div>
-          <!-- ตอบกลับ reply — submit ยังผูกกับ comment แม่ (cmt) เหมือนเดิม -->
-          <InputComment v-if="replyingToId === reply.id" v-model="replyText" v-model:reply-to="replyToUser"
-            :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
-            @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
-        </div>
-      </div>
-    </div>
-    <!-- Loading indicator for pagination -->
-    <div v-if="fetchFn && paginationState.loading" class="flex justify-center py-4">
-      <Icon name="lucide:loader-2" class="animate-spin h-5 w-5 text-primary" />
-    </div>
-  </div>
+" :class="[reply.is_liked && 'text-primary']" size="20" />
+                <div v-if="reply.like_count > 0" :class="[reply.is_liked && 'text-primary']">
+                  {{ $convert.convertNumber(reply.like_count) }}
+                </div>
+              </div>
+              <div class="font-body-large cursor-pointer" @click="onReplyComment(reply.id, reply.user)">
+                ตอบกลับ
+              </div>
+            </div>
+          </div>
+          <!-- ตอบกลับ reply — submit ยังผูกกับ comment แม่ (cmt) เหมือนเดิม -->
+          <InputComment v-if="replyingToId === reply.id" v-model="replyText" v-model:reply-to="replyToUser"
+            :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+            @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
+        </div>
+      </div>
+    </div>
+    <!-- Loading indicator for pagination -->
+    <div v-if="fetchFn && paginationState.loading" class="flex justify-center py-4">
+      <Icon name="lucide:loader-2" class="animate-spin h-5 w-5 text-primary" />
+    </div>
+  </div>
 </template>
 
 <script setup>