pukaad-ui-lib 1.19.0 → 1.21.1

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/dialog/dialog-2FA-generate.vue

@@ -1,62 +1,62 @@
 <template>
-  <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent class="w-[540px]">
-      <ShadDialogHeader class="flex justify-center">
-        <ShadDialogTitle class="text-center">คำแนะนำการตั้งค่า</ShadDialogTitle>
-      </ShadDialogHeader>
-      <div class="flex flex-col gap-[16px]">
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            1.ดาวน์โหลดแอพยืนยันตัวตน
-          </div>
-          <div>
-            เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
-          </div>
-        </div>
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
-          </div>
-          <div>
-            สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
-            ยืนยันตัวตน
-          </div>
-        </div>
-        <div class="flex justify-center items-center">
-          <div class="flex items-center gap-[32px]">
-            <Image width="146" height="145" :src="barcode2FA" />
-            <div class="w-[168px] gap-[8px] flex flex-col justify-between">
-              <div class="font-body-large-prominent">
-                {{ key }}
-              </div>
-              <div
-                class="cursor-pointer text-primary font-body-large"
-                @click="copyToClipboard(key)"
-              >
-                คัดลอกคีย์
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
-          </div>
-          <div>
-            หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
-            แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
-            ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
-          </div>
-        </div>
-      </div>
-
-      <ShadDialogFooter>
-        <Button class="w-full" @click="onComplete">
-          {{ props.confirmedText }}
-        </Button>
-      </ShadDialogFooter>
-    </ShadDialogContent>
-  </ShadDialog>
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent class="w-[540px]">
+      <ShadDialogHeader class="flex justify-center">
+        <ShadDialogTitle class="text-center">คำแนะนำการตั้งค่า</ShadDialogTitle>
+      </ShadDialogHeader>
+      <div class="flex flex-col gap-[16px]">
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            1.ดาวน์โหลดแอพยืนยันตัวตน
+          </div>
+          <div>
+            เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
+          </div>
+          <div>
+            สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
+            ยืนยันตัวตน
+          </div>
+        </div>
+        <div class="flex justify-center items-center">
+          <div class="flex items-center gap-[32px]">
+            <Image width="146" height="145" :src="barcode2FA" />
+            <div class="w-[168px] gap-[8px] flex flex-col justify-between">
+              <div class="font-body-large-prominent">
+                {{ key }}
+              </div>
+              <div
+                class="cursor-pointer text-primary font-body-large"
+                @click="copyToClipboard(key)"
+              >
+                คัดลอกคีย์
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
+          </div>
+          <div>
+            หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
+            แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
+            ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
+          </div>
+        </div>
+      </div>
+
+      <ShadDialogFooter>
+        <Button class="w-full" @click="onComplete">
+          {{ props.confirmedText }}
+        </Button>
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
 </template>
 
 <script setup>

package/dist/runtime/components/dialog/dialog-2FA.vue

@@ -1,24 +1,24 @@
 <template>
-  <Dialog v-model:open="isOpen">
-    <DialogContent class="w-[425px]">
-      <Form v-slot="{ meta }" @submit="onVerify2FA">
-        <div class="flex flex-col gap-[24px]">
-          <DialogHeader class="flex justify-center">
-            <ShadDialogTitle>การยืนยันตัวตนแบบสองชั้น</ShadDialogTitle>
-            <DialogDescription>
-              ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
-            </DialogDescription>
-          </DialogHeader>
-          <InputOTP ref="twoFaRef" v-model="valueOTP" />
-          <DialogFooter>
-            <Button class="w-full" type="submit" :disabled="!meta.valid">
-              {{ props.confirmedText }}
-            </Button>
-          </DialogFooter>
-        </div>
-      </Form>
-    </DialogContent>
-  </Dialog>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="w-[425px]">
+      <Form v-slot="{ meta }" @submit="onVerify2FA">
+        <div class="flex flex-col gap-[24px]">
+          <DialogHeader class="flex justify-center">
+            <ShadDialogTitle>การยืนยันตัวตนแบบสองชั้น</ShadDialogTitle>
+            <DialogDescription>
+              ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
+            </DialogDescription>
+          </DialogHeader>
+          <InputOTP ref="twoFaRef" v-model="valueOTP" />
+          <DialogFooter>
+            <Button class="w-full" type="submit" :disabled="!meta.valid">
+              {{ props.confirmedText }}
+            </Button>
+          </DialogFooter>
+        </div>
+      </Form>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>

package/dist/runtime/components/dialog/dialog-email-OTP.d.vue.ts

@@ -7,12 +7,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    close: () => any;
     complete: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onClose?: (() => any) | undefined;
     onComplete?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;