pukaad-ui-lib 1.2.0 → 1.3.2

package/dist/runtime/components/chip.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
+  <div
     :class="[
   'rounded-full px-[8px] py-[4px] font-body-large inline-flex gap-[4px] justify-center items-center',
   !props.flat && 'border-[1px]',
   props.autoHeight ? 'break-all' : height,
   color,
   size
-]"
-  >
-    <slot name="default" />
-    <div
-      v-if="props.closable"
-      class="flex justify-center items-center cursor-pointer"
-      @click="emit('closable')"
-    >
-      <Icon name="fa6-solid:xmark" size="16" />
-    </div>
-  </div>
+]"
+  >
+    <slot name="default" />
+    <div
+      v-if="props.closable"
+      class="flex justify-center items-center cursor-pointer"
+      @click="emit('closable')"
+    >
+      <Icon name="fa6-solid:xmark" size="16" />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,46 +1,46 @@
 <template>
-  <div class="flex flex-col">
-    <div
-      v-for="(item, i_item) in props.items"
-      :key="i_item"
-      class="flex flex-col"
-    >
-      <div class="flex gap-[16px] select-none">
-        <div class="w-[20px] flex items-center justify-center relative">
-          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
-          <div
-            @click="handleShow(i_item)"
-            class="absolute bg-white text-primary cursor-pointer"
-            :style="{ top: toggleIconPosition(i_item) + 'px' }"
-          >
-            <Icon
+  <div class="flex flex-col">
+    <div
+      v-for="(item, i_item) in props.items"
+      :key="i_item"
+      class="flex flex-col"
+    >
+      <div class="flex gap-[16px] select-none">
+        <div class="w-[20px] flex items-center justify-center relative">
+          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
+          <div
+            @click="handleShow(i_item)"
+            class="absolute bg-white text-primary cursor-pointer"
+            :style="{ top: toggleIconPosition(i_item) + 'px' }"
+          >
+            <Icon
               :name="
   !arrShow.includes(i_item) ? 'lucide:square-chevron-right' : 'lucide:square-chevron-down'
-"
-              size="20"
-            />
-          </div>
-        </div>
-        <div class="flex flex-col w-full mb-[16px]">
+"
+              size="20"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col w-full mb-[16px]">
           <div :ref="(el) => {
   labelRef[i_item] = el;
-}">
-            <slot name="title" :label="item.label" :item="item" />
-          </div>
-          <div
-            v-if="arrShow.includes(i_item)"
-            class="flex flex-col gap-[16px] mt-[16px] pl-[32px]"
-          >
-            <slot name="children" :items="item.children">
-              <div v-for="(cill, i_child) in item.children" :key="i_child">
-                <slot name="children-item" :label="cill.label" :item="cill" />
-              </div>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+}">
+            <slot name="title" :label="item.label" :item="item" />
+          </div>
+          <div
+            v-if="arrShow.includes(i_item)"
+            class="flex flex-col gap-[16px] mt-[16px] pl-[32px]"
+          >
+            <slot name="children" :items="item.children">
+              <div v-for="(cill, i_child) in item.children" :key="i_child">
+                <slot name="children-item" :label="cill.label" :item="cill" />
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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 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 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,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>