pukaad-ui-lib 1.21.1 → 1.23.0

package/dist/runtime/components/comment.vue

@@ -1,220 +1,220 @@
 <template>
-  <!-- <div class="flex flex-col gap-[16px] py-[16px]">
-    <div class="flex gap-[8px]">
-      <div class="font-title-medium-prominent">ความคิดเห็น</div>
-      <div class="font-title-medium text-gray">{{ comments.length }}</div>
-    </div>
-    <div class="gap-[8px] flex flex-col w-full">
-      <div class="flex gap-[8px] items-start w-full">
-        <div>
-          <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
-        </div>
-        <div class="flex-1" @click="showButtons = true">
-          <InputComment v-model="draft" />
-        </div>
-      </div>
-      <div v-if="showButtons" class="flex justify-end items-center w-full">
-        <div class="flex gap-[8px]">
-          <div class="w-[64px]">
-            <Button
-              full-rounded
-              variant="flat-outline"
-              full-width
-              size="small"
-              @click="resetDraft"
-            >
-              ยกเลิก
-            </Button>
-          </div>
-          <div class="w-[64px]">
-            <Button
-              full-rounded
-              color="primary"
-              full-width
-              size="small"
-              :disabled="!draft.trim()"
-              @click="submitDraft"
-            >
-              ส่ง
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col gap-[16px]">
-      <div
-        v-for="(comment, commentIndex) in comments"
-        :key="comment.id"
-        class="flex flex-col gap-[16px]"
-      >
-        <div class="flex flex-col gap-[4px]">
-          <div class="flex gap-[8px] w-full">
-            <div>
-              <Avatar :src="comment.user.avatar" :alt="comment.user.name" />
-            </div>
-            <div
-              class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
-            >
-              <div class="font-body-large-prominent">
-                {{ comment.user.name }}
-              </div>
-              <ReadMoreText :text="comment.content" :max-line="2" />
-            </div>
-          </div>
-          <div class="pl-[38px] flex gap-[16px]">
-            <div class="text-gray font-body-large">
-              {{ comment.created_at }}
-            </div>
-            <Button
-              type="text"
-              :variant="comment.liked ? 'primary' : 'black'"
-              :icon-size="20"
-              size="tiny"
-              :prepend-icon="
-                comment.liked
-                  ? 'pukaad:thumbs-up-solid'
-                  : 'pukaad:thumbs-up-regular'
-              "
-              :aria-pressed="comment.liked"
-              @click="toggleLikeComment(comment)"
-              disabled-padding
-            >
-              <div>
-                {{ comment.like_count }}
-              </div>
-            </Button>
-            <Button
-              variant="text"
-              disabled-padding
-              @click="toggleReplyInput(comment.id, comment.user)"
-            >
-              ตอบกลับ
-            </Button>
-          </div>
-          <div
-            v-if="comment.replies && comment.replies.length > 0"
-            @click="toggleShowComments(commentIndex)"
-            class="text-primary font-body-large cursor-pointer pl-[38px] flex items-center gap-[4px]"
-          >
-            <div>ดูการตอบกลับ {{ comment.replies.length }} รายการ</div>
-            <Icon
-              :name="
-                showCommentsState[commentIndex]
-                  ? 'lucide:chevron-up'
-                  : 'lucide:chevron-down'
-              "
-              :size="16"
-            />
-          </div>
-        </div>
-
-        <div
-          v-for="reply in comment.replies"
-          :key="reply.id"
-          v-if="
-            comment.replies &&
-            comment.replies.length > 0 &&
-            showCommentsState[commentIndex]
-          "
-          class="flex flex-col gap-[16px] pl-[38px]"
-        >
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex gap-[8px] w-full">
-              <div>
-                <Avatar :src="reply.user.avatar" :alt="reply.user.name" />
-              </div>
-              <div
-                class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
-              >
-                <div class="font-body-large-prominent">
-                  {{ reply.user.name }}
-                </div>
-                <ReadMoreText :text="reply.content" :max-line="1">
-                  <span class="font-body-large-prominent text-primary"
-                    >เห้ย</span
-                  >
-                </ReadMoreText>
-              </div>
-            </div>
-            <div class="flex gap-[16px]">
-              <div class="text-gray font-body-large">
-                {{ reply.created_at }}
-              </div>
-              <Button
-                type="text"
-                :variant="reply.liked ? 'primary' : 'black'"
-                :icon-size="20"
-                size="tiny"
-                :prepend-icon="
-                  reply.liked
-                    ? 'pukaad:thumbs-up-solid'
-                    : 'pukaad:thumbs-up-regular'
-                "
-                :aria-pressed="reply.liked"
-                @click="toggleLikeComment(reply)"
-                disabled-padding
-              >
-                <div>
-                  {{ reply.like_count }}
-                </div>
-              </Button>
-              <Button
-                variant="text"
-                disabled-padding
-                @click="toggleReplyInput(comment.id, reply.user)"
-              >
-                ตอบกลับ
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-if="showReplyInput[comment.id]"
-          class="pl-[38px] flex flex-col gap-[8px]"
-        >
-          <div class="flex gap-[8px] items-start w-full">
-            <div>
-              <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
-            </div>
-            <div class="flex-1">
-              <InputComment
-                v-model="replyDrafts[comment.id]"
-                :user-reply="replyTargets[comment.id] || comment.user"
-              />
-            </div>
-          </div>
-          <div class="flex justify-end items-center w-full">
-            <div class="flex gap-[8px]">
-              <div class="w-[64px]">
-                <Button
-                  full-rounded
-                  variant="flat-outline"
-                  full-width
-                  size="small"
-                  @click="cancelReply(comment.id)"
-                >
-                  ยกเลิก
-                </Button>
-              </div>
-              <div class="w-[64px]">
-                <Button
-                  full-rounded
-                  color="primary"
-                  full-width
-                  size="small"
-                  :disabled="!replyDrafts[comment.id]?.trim()"
-                  @click="submitReply(comment.id)"
-                >
-                  ส่ง
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
+  <!-- <div class="flex flex-col gap-[16px] py-[16px]">
+    <div class="flex gap-[8px]">
+      <div class="font-title-medium-prominent">ความคิดเห็น</div>
+      <div class="font-title-medium text-gray">{{ comments.length }}</div>
+    </div>
+    <div class="gap-[8px] flex flex-col w-full">
+      <div class="flex gap-[8px] items-start w-full">
+        <div>
+          <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
+        </div>
+        <div class="flex-1" @click="showButtons = true">
+          <InputComment v-model="draft" />
+        </div>
+      </div>
+      <div v-if="showButtons" class="flex justify-end items-center w-full">
+        <div class="flex gap-[8px]">
+          <div class="w-[64px]">
+            <Button
+              full-rounded
+              variant="flat-outline"
+              full-width
+              size="small"
+              @click="resetDraft"
+            >
+              ยกเลิก
+            </Button>
+          </div>
+          <div class="w-[64px]">
+            <Button
+              full-rounded
+              color="primary"
+              full-width
+              size="small"
+              :disabled="!draft.trim()"
+              @click="submitDraft"
+            >
+              ส่ง
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-[16px]">
+      <div
+        v-for="(comment, commentIndex) in comments"
+        :key="comment.id"
+        class="flex flex-col gap-[16px]"
+      >
+        <div class="flex flex-col gap-[4px]">
+          <div class="flex gap-[8px] w-full">
+            <div>
+              <Avatar :src="comment.user.avatar" :alt="comment.user.name" />
+            </div>
+            <div
+              class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
+            >
+              <div class="font-body-large-prominent">
+                {{ comment.user.name }}
+              </div>
+              <ReadMoreText :text="comment.content" :max-line="2" />
+            </div>
+          </div>
+          <div class="pl-[38px] flex gap-[16px]">
+            <div class="text-gray font-body-large">
+              {{ comment.created_at }}
+            </div>
+            <Button
+              type="text"
+              :variant="comment.liked ? 'primary' : 'black'"
+              :icon-size="20"
+              size="tiny"
+              :prepend-icon="
+                comment.liked
+                  ? 'pukaad:thumbs-up-solid'
+                  : 'pukaad:thumbs-up-regular'
+              "
+              :aria-pressed="comment.liked"
+              @click="toggleLikeComment(comment)"
+              disabled-padding
+            >
+              <div>
+                {{ comment.like_count }}
+              </div>
+            </Button>
+            <Button
+              variant="text"
+              disabled-padding
+              @click="toggleReplyInput(comment.id, comment.user)"
+            >
+              ตอบกลับ
+            </Button>
+          </div>
+          <div
+            v-if="comment.replies && comment.replies.length > 0"
+            @click="toggleShowComments(commentIndex)"
+            class="text-primary font-body-large cursor-pointer pl-[38px] flex items-center gap-[4px]"
+          >
+            <div>ดูการตอบกลับ {{ comment.replies.length }} รายการ</div>
+            <Icon
+              :name="
+                showCommentsState[commentIndex]
+                  ? 'lucide:chevron-up'
+                  : 'lucide:chevron-down'
+              "
+              :size="16"
+            />
+          </div>
+        </div>
+
+        <div
+          v-for="reply in comment.replies"
+          :key="reply.id"
+          v-if="
+            comment.replies &&
+            comment.replies.length > 0 &&
+            showCommentsState[commentIndex]
+          "
+          class="flex flex-col gap-[16px] pl-[38px]"
+        >
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex gap-[8px] w-full">
+              <div>
+                <Avatar :src="reply.user.avatar" :alt="reply.user.name" />
+              </div>
+              <div
+                class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
+              >
+                <div class="font-body-large-prominent">
+                  {{ reply.user.name }}
+                </div>
+                <ReadMoreText :text="reply.content" :max-line="1">
+                  <span class="font-body-large-prominent text-primary"
+                    >เห้ย</span
+                  >
+                </ReadMoreText>
+              </div>
+            </div>
+            <div class="flex gap-[16px]">
+              <div class="text-gray font-body-large">
+                {{ reply.created_at }}
+              </div>
+              <Button
+                type="text"
+                :variant="reply.liked ? 'primary' : 'black'"
+                :icon-size="20"
+                size="tiny"
+                :prepend-icon="
+                  reply.liked
+                    ? 'pukaad:thumbs-up-solid'
+                    : 'pukaad:thumbs-up-regular'
+                "
+                :aria-pressed="reply.liked"
+                @click="toggleLikeComment(reply)"
+                disabled-padding
+              >
+                <div>
+                  {{ reply.like_count }}
+                </div>
+              </Button>
+              <Button
+                variant="text"
+                disabled-padding
+                @click="toggleReplyInput(comment.id, reply.user)"
+              >
+                ตอบกลับ
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="showReplyInput[comment.id]"
+          class="pl-[38px] flex flex-col gap-[8px]"
+        >
+          <div class="flex gap-[8px] items-start w-full">
+            <div>
+              <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
+            </div>
+            <div class="flex-1">
+              <InputComment
+                v-model="replyDrafts[comment.id]"
+                :user-reply="replyTargets[comment.id] || comment.user"
+              />
+            </div>
+          </div>
+          <div class="flex justify-end items-center w-full">
+            <div class="flex gap-[8px]">
+              <div class="w-[64px]">
+                <Button
+                  full-rounded
+                  variant="flat-outline"
+                  full-width
+                  size="small"
+                  @click="cancelReply(comment.id)"
+                >
+                  ยกเลิก
+                </Button>
+              </div>
+              <div class="w-[64px]">
+                <Button
+                  full-rounded
+                  color="primary"
+                  full-width
+                  size="small"
+                  :disabled="!replyDrafts[comment.id]?.trim()"
+                  @click="submitReply(comment.id)"
+                >
+                  ส่ง
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> -->
 </template>
 
 <script setup>

package/dist/runtime/components/data-table.d.vue.ts

@@ -0,0 +1,76 @@
+import type { TableHeader, TableHeaderAlignment } from "@/types/components/table";
+export interface DataTableProps {
+    items?: Record<string, any>[];
+    itemHeader?: TableHeader[];
+    headerAlinement?: TableHeaderAlignment;
+    cellAlinement?: TableHeaderAlignment;
+    height?: number | string;
+    maxHeight?: number | string;
+    fullHeight?: boolean;
+    disabledHeader?: boolean;
+    disabledSort?: boolean;
+    disabledPagination?: boolean;
+    totalPage?: number;
+}
+type __VLS_Props = DataTableProps;
+type __VLS_ModelProps = {
+    "page"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_11: {
+    item: TableHeader[];
+}, __VLS_28: {
+    items: any;
+    header: any;
+}, __VLS_43: {
+    item: any;
+    header: any;
+    index: number;
+}, __VLS_51: `item-${any}`, __VLS_52: {
+    item: any;
+}, __VLS_54: {}, __VLS_61: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_28) => any;
+} & {
+    item?: (props: typeof __VLS_43) => any;
+} & {
+    empty?: (props: typeof __VLS_54) => any;
+} & {
+    'empty-content'?: (props: typeof __VLS_61) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+} & {
+    "select-page": (value: number) => any;
+    "change-page": (value: number) => any;
+    "click-row": (item: Record<string, any>, index: number) => any;
+    "change-item-per-page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((value: number) => any) | undefined;
+    "onChange-page"?: ((value: number) => any) | undefined;
+    "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
+    "onChange-item-per-page"?: ((value: number) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    items: Record<string, any>[];
+    fullHeight: boolean;
+    itemHeader: TableHeader[];
+    headerAlinement: TableHeaderAlignment;
+    cellAlinement: TableHeaderAlignment;
+    disabledHeader: boolean;
+    disabledSort: boolean;
+    disabledPagination: boolean;
+    totalPage: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};