pukaad-ui-lib 1.282.2 → 1.284.0

package/dist/runtime/components/comment.vue

@@ -1,233 +1,233 @@
 <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>
-
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[8px] w-full">
-        <Avatar :size="30" :src="currentUser.avatar" />
-        <div ref="mainInputRef" contenteditable="true"
-          class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-          data-placeholder="เพิ่มความคิดเห็น" @focus="isShowMainActions = true" @input="onMainCommentInput"
-          @keydown.enter.exact.prevent="onSendComment" @keydown.shift.enter.prevent="onInsertLineBreak" />
-      </div>
-      <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
-        <Button variant="outline" class="w-[56px]" @click="onCancelComment">
-          ยกเลิก
-        </Button>
-        <Button color="primary" class="w-[56px]" :disabled="!mainCommentInput" @click="onSendComment">
-          ส่ง
-        </Button>
-      </div>
-    </div>
-    <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">
-            <div class="flex-1 flex flex-col gap-[4px]">
-              <div :ref="(el) => setEditInputRef(el, cmt.id)" contenteditable="true"
-                class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                @input="onEditInput($event, cmt.id)" @keydown.enter.exact.prevent="onSendEdit(cmt, 'comment')"
-                @keydown.shift.enter.prevent="onInsertLineBreak" />
-              <div class="flex justify-end gap-[8px]">
-                <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                  ยกเลิก
-                </Button>
-                <Button color="primary" class="w-[56px]" :disabled="!editTextMap[cmt.id]"
-                  @click="onSendEdit(cmt, 'comment')">
-                  ส่ง
-                </Button>
-              </div>
-            </div>
-          </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>
+
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[8px] w-full">
+        <Avatar :size="30" :src="currentUser.avatar" />
+        <div ref="mainInputRef" contenteditable="true"
+          class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
+          data-placeholder="เพิ่มความคิดเห็น" @focus="isShowMainActions = true" @input="onMainCommentInput"
+          @keydown.enter.exact.prevent="onSendComment" @keydown.shift.enter.prevent="onInsertLineBreak" />
+      </div>
+      <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
+        <Button variant="outline" class="w-[56px]" @click="onCancelComment">
+          ยกเลิก
+        </Button>
+        <Button color="primary" class="w-[56px]" :disabled="!mainCommentInput" @click="onSendComment">
+          ส่ง
+        </Button>
+      </div>
+    </div>
+    <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">
+            <div class="flex-1 flex flex-col gap-[4px]">
+              <div :ref="(el) => setEditInputRef(el, cmt.id)" contenteditable="true"
+                class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
+                @input="onEditInput($event, cmt.id)" @keydown.enter.exact.prevent="onSendEdit(cmt, 'comment')"
+                @keydown.shift.enter.prevent="onInsertLineBreak" />
+              <div class="flex justify-end gap-[8px]">
+                <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
+                  ยกเลิก
+                </Button>
+                <Button color="primary" class="w-[56px]" :disabled="!editTextMap[cmt.id]"
+                  @click="onSendEdit(cmt, 'comment')">
+                  ส่ง
+                </Button>
+              </div>
+            </div>
+          </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>
-      <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
-        <div class="flex gap-[8px] w-full">
-          <Avatar :size="30" :src="currentUser.avatar" />
-          <div class="flex-1">
-            <div :ref="(el) => setReplyInputRef(el, cmt.id)" contenteditable="true"
-              class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-              data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, cmt.id)"
-              @keydown.enter.exact.prevent="onSendReplyComment(cmt)" @keydown.shift.enter.prevent="onInsertLineBreak" />
-          </div>
-        </div>
-        <div class="flex justify-end gap-[8px]">
-          <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-            ยกเลิก
-          </Button>
-          <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[cmt.id]" @click="onSendReplyComment(cmt)">
-            ตอบกลับ
-          </Button>
-        </div>
-      </div>
+" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
+        <div class="flex gap-[8px] w-full">
+          <Avatar :size="30" :src="currentUser.avatar" />
+          <div class="flex-1">
+            <div :ref="(el) => setReplyInputRef(el, cmt.id)" contenteditable="true"
+              class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
+              data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, cmt.id)"
+              @keydown.enter.exact.prevent="onSendReplyComment(cmt)" @keydown.shift.enter.prevent="onInsertLineBreak" />
+          </div>
+        </div>
+        <div class="flex justify-end gap-[8px]">
+          <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
+            ยกเลิก
+          </Button>
+          <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[cmt.id]" @click="onSendReplyComment(cmt)">
+            ตอบกลับ
+          </Button>
+        </div>
+      </div>
       <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">
-                <div class="flex-1 flex flex-col gap-[4px]">
-                  <div :ref="(el) => setEditInputRef(el, reply.id)" contenteditable="true"
-                    class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                    @input="onEditInput($event, reply.id)" @keydown.enter.exact.prevent="onSendEdit(reply, 'reply')"
-                    @keydown.shift.enter.prevent="onInsertLineBreak" />
-                  <div class="flex justify-end gap-[8px]">
-                    <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                      ยกเลิก
-                    </Button>
-                    <Button color="primary" class="w-[56px]" :disabled="!editTextMap[reply.id]"
-                      @click="onSendEdit(reply, 'reply')">
-                      ส่ง
-                    </Button>
-                  </div>
-                </div>
-              </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">
+                <div class="flex-1 flex flex-col gap-[4px]">
+                  <div :ref="(el) => setEditInputRef(el, reply.id)" contenteditable="true"
+                    class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
+                    @input="onEditInput($event, reply.id)" @keydown.enter.exact.prevent="onSendEdit(reply, 'reply')"
+                    @keydown.shift.enter.prevent="onInsertLineBreak" />
+                  <div class="flex justify-end gap-[8px]">
+                    <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
+                      ยกเลิก
+                    </Button>
+                    <Button color="primary" class="w-[56px]" :disabled="!editTextMap[reply.id]"
+                      @click="onSendEdit(reply, 'reply')">
+                      ส่ง
+                    </Button>
+                  </div>
+                </div>
+              </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>
-          <div v-if="replyingToId === reply.id" class="flex flex-col gap-[16px]">
-            <div class="flex gap-[8px] w-full">
-              <Avatar :size="30" :src="currentUser.avatar" />
-              <div class="flex-1">
-                <div :ref="(el) => setReplyInputRef(el, reply.id)" contenteditable="true"
-                  class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-                  data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, reply.id)"
-                  @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
-                  @keydown.shift.enter.prevent="onInsertLineBreak" />
-              </div>
-            </div>
-            <div class="flex justify-end gap-[8px]">
-              <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-                ยกเลิก
-              </Button>
-              <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[reply.id]"
-                @click="onSendReplyComment(cmt)">
-                ตอบกลับ
-              </Button>
-            </div>
-          </div>
-        </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>
+          <div v-if="replyingToId === reply.id" class="flex flex-col gap-[16px]">
+            <div class="flex gap-[8px] w-full">
+              <Avatar :size="30" :src="currentUser.avatar" />
+              <div class="flex-1">
+                <div :ref="(el) => setReplyInputRef(el, reply.id)" contenteditable="true"
+                  class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
+                  data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, reply.id)"
+                  @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
+                  @keydown.shift.enter.prevent="onInsertLineBreak" />
+              </div>
+            </div>
+            <div class="flex justify-end gap-[8px]">
+              <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
+                ยกเลิก
+              </Button>
+              <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[reply.id]"
+                @click="onSendReplyComment(cmt)">
+                ตอบกลับ
+              </Button>
+            </div>
+          </div>
+        </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>

package/dist/runtime/components/data-list.vue

@@ -21,58 +21,58 @@ const page = defineModel("page", { type: Number, ...{
 </script>
 
 <template>
-  <div class="bg-white rounded-lg flex flex-col">
-    <!-- List Container -->
-    <div
-      class="flex-1 overflow-auto"
+  <div class="bg-white rounded-lg flex flex-col">
+    <!-- List Container -->
+    <div
+      class="flex-1 overflow-auto"
       :style="{
   height: props.fullHeight ? '100%' : props.height ? `${props.height}px` : 'auto',
   maxHeight: props.maxHeight ? `${props.maxHeight}px` : void 0
-}"
-    >
-      <ShadTable>
-        <slot name="body" :items="props.items">
-          <ShadTableBody>
-            <template v-if="props.items.length > 0">
-              <ShadTableRow
-                v-for="(item, index) in props.items"
-                :key="index"
-                class="cursor-pointer"
-                @click="emit('click-row', item, index)"
-              >
-                <ShadTableCell class="w-full">
-                  <slot name="item" :item="item" :index="index">
-                    {{ item }}
-                  </slot>
-                </ShadTableCell>
-              </ShadTableRow>
-            </template>
-
-            <!-- Empty State -->
-            <template v-else>
-              <slot name="empty">
-                <ShadTableEmpty :colspan="1">
-                  <slot name="empty-content" />
-                </ShadTableEmpty>
-              </slot>
-            </template>
-          </ShadTableBody>
-        </slot>
-      </ShadTable>
-    </div>
-
-    <!-- Pagination -->
-    <div
-      v-if="props.items.length > 0 && !props.disabledPagination"
-      class="p-4 flex justify-center items-center border-t"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        v-model="page"
+}"
+    >
+      <ShadTable>
+        <slot name="body" :items="props.items">
+          <ShadTableBody>
+            <template v-if="props.items.length > 0">
+              <ShadTableRow
+                v-for="(item, index) in props.items"
+                :key="index"
+                class="cursor-pointer"
+                @click="emit('click-row', item, index)"
+              >
+                <ShadTableCell class="w-full">
+                  <slot name="item" :item="item" :index="index">
+                    {{ item }}
+                  </slot>
+                </ShadTableCell>
+              </ShadTableRow>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else>
+              <slot name="empty">
+                <ShadTableEmpty :colspan="1">
+                  <slot name="empty-content" />
+                </ShadTableEmpty>
+              </slot>
+            </template>
+          </ShadTableBody>
+        </slot>
+      </ShadTable>
+    </div>
+
+    <!-- Pagination -->
+    <div
+      v-if="props.items.length > 0 && !props.disabledPagination"
+      class="p-4 flex justify-center items-center border-t"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        v-model="page"
         @change-item-per-page="
   (val) => emit('change-item-per-page', val)
-"
-      />
-    </div>
-  </div>
+"
+      />
+    </div>
+  </div>
 </template>