pukaad-ui-lib 1.200.0 → 1.202.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.200.0",
+  "version": "1.202.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/comment.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="flex flex-col gap-[16px]">
       <div class="flex gap-[8px] w-full">
-        <Avatar :size="30" />
+        <Avatar :size="30" :src="currentUser.avatar" />
         <div
           ref="mainInputRef"
           contenteditable="true"
@@ -40,6 +40,7 @@
         <div class="flex gap-[8px]">
           <Avatar
             :size="30"
+            :src="cmt.user.avatar"
             class="cursor-pointer"
             @click="onViewProfileComment(cmt.user.id)"
           />
@@ -121,7 +122,7 @@
       </div>
       <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
         <div class="flex gap-[8px] w-full">
-          <Avatar :size="30" />
+          <Avatar :size="30" :src="currentUser.avatar" />
           <div class="flex-1">
             <div
               :ref="(el) => setReplyInputRef(el, cmt.id)"
@@ -169,6 +170,7 @@
             <div class="flex gap-[8px]">
               <Avatar
                 :size="30"
+                :src="reply.user.avatar"
                 class="cursor-pointer"
                 @click="onViewProfileComment(reply.user.id)"
               />
@@ -242,7 +244,7 @@
             class="flex flex-col gap-[16px]"
           >
             <div class="flex gap-[8px] w-full">
-              <Avatar :size="30" />
+              <Avatar :size="30" :src="currentUser.avatar" />
               <div class="flex-1">
                 <div
                   :ref="(el) => setReplyInputRef(el, reply.id)"

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-slider.d.vue.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-slider.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.200.0",
+  "version": "1.202.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",

package/dist/runtime/components/comments/CommentSection.d.vue.ts

@@ -1,40 +0,0 @@
-interface ProfileData {
-    profile_name: string;
-    profile_path: {
-        path_name: string;
-    };
-    profile_image: {
-        image_url: string;
-    };
-}
-interface CommentData {
-    id: string | number;
-    content: string;
-    createdAt: string;
-    likeCount: number;
-    isLiked?: boolean;
-    profileData?: ProfileData;
-    comment_reply?: CommentData[];
-}
-type __VLS_Props = {
-    comments: CommentData[];
-    currentUser?: any;
-    isLoading?: boolean;
-    isSubmitting?: boolean;
-    isLoggedIn?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (text: string) => any;
-    reply: (commentId: string | number, text: string) => any;
-    like: (comment: CommentData) => any;
-    profileClick: (pathName: string) => any;
-    login: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: ((text: string) => any) | undefined;
-    onReply?: ((commentId: string | number, text: string) => any) | undefined;
-    onLike?: ((comment: CommentData) => any) | undefined;
-    onProfileClick?: ((pathName: string) => any) | undefined;
-    onLogin?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/comments/CommentSection.vue

@@ -1,316 +0,0 @@
-<template>
-  <div class="py-[16px] flex flex-col gap-[16px]">
-    <!-- Header Section -->
-    <div class="flex gap-[8px] items-center">
-      <div class="font-title-medium-prominent">ความคิดเห็น</div>
-      <div class="text-gray font-title-medium">
-        {{ props.comments?.length || 0 }}
-      </div>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="props.isLoading" class="flex justify-center py-4">
-      <Icon name="line-md:loading-loop" size="32" class="text-primary" />
-    </div>
-
-    <!-- Add Comment Form -->
-    <div v-if="props.isLoggedIn">
-      <form class="space-y-[8px]" @submit.prevent="handleLocalSubmit">
-        <div class="flex gap-[16px] items-center">
-          <Avatar
-            :size="30"
-            :src="props.currentUser?.profile_image?.image_url || 'https://avatar.iran.liara.run/public?random=1'"
-          />
-          <div class="w-auto flex-1" @click="isButtonComment = true">
-            <InputTextarea
-              v-model="commentText"
-              resize="none"
-              rows="1"
-              full-width
-              placeholder="เพิ่มความคิดเห็น"
-            />
-          </div>
-        </div>
-
-        <!-- Action Buttons -->
-        <div v-if="isButtonComment" class="flex justify-end">
-          <div class="flex gap-[8px] w-[140px]">
-            <Button
-              size="tiny"
-              full-width
-              full-rounded
-              color="black"
-              variant="outline"
-              @click="clearTextfields"
-            >
-              ยกเลิก
-            </Button>
-            <Button
-              full-width
-              size="tiny"
-              full-rounded
-              color="primary"
-              type="submit"
-              :loading="props.isSubmitting"
-              :disabled="!commentText.trim().length"
-            >
-              ส่ง
-            </Button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div v-else class="bg-bright p-4 rounded-lg text-center text-gray">
-      กรุณา<a class="text-primary cursor-pointer px-1" @click="emit('login')">เข้าสู่ระบบ</a>เพื่อแสดงความคิดเห็น
-    </div>
-
-    <!-- Comments List -->
-    <div
-      v-for="(comment, commentIndex) in props.comments"
-      :key="comment.id"
-      class="flex flex-col gap-[16px]"
-    >
-      <!-- Main Comment -->
-      <div
-        class="flex flex-col gap-[4px]"
-        @mouseenter="() => handleMouseEnter(commentIndex)"
-        @mouseleave="() => handleMouseLeave(commentIndex)"
-      >
-        <div class="flex gap-[8px]">
-          <div
-            class="cursor-pointer"
-            @click="emit('profileClick', comment.profileData?.profile_path?.path_name)"
-          >
-            <Avatar
-              :size="30"
-              :src="comment.profileData?.profile_image?.image_url"
-            />
-          </div>
-
-          <div class="flex flex-col w-full">
-            <Card
-              padding="8"
-              disabled-background
-              class="flex flex-col bg-bright gap-[4px]"
-            >
-              <div
-                class="font-body-large-prominent cursor-pointer"
-                @click="emit('profileClick', comment.profileData?.profile_path?.path_name)"
-              >
-                {{ comment.profileData?.profile_name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D" }}
-              </div>
-
-              <div class="font-body-large max-w-[768px] break-words">
-                {{ comment.content }}
-              </div>
-            </Card>
-          </div>
-        </div>
-
-        <!-- Comment Actions -->
-        <div
-          class="flex gap-[16px] ps-[38px] items-center text-gray font-body-large"
-        >
-          <div>{{ comment.createdAt }}</div>
-
-          <div class="flex gap-[4px]">
-            <Button
-              disabled-padding
-              prepend-icon="fa6-regular:thumbs-up"
-              variant="text"
-              :color="comment.isLiked ? 'primary' : 'black'"
-              :icon-size="20"
-              :loading="likeLoadingStates[comment.id]"
-              @click="emit('like', comment)"
-            />
-            <div>{{ comment.likeCount || 0 }}</div>
-          </div>
-
-          <div
-            v-if="props.isLoggedIn"
-            class="cursor-pointer"
-            @click="openReplyForm(comment)"
-          >
-            ตอบกลับ
-          </div>
-        </div>
-
-        <!-- Toggle Replies -->
-        <div
-          v-if="comment.comment_reply?.length"
-          class="flex gap-[8px] ps-[38px] items-center text-primary font-body-large cursor-pointer w-fit"
-          @click="showRepliesStates[commentIndex] = !showRepliesStates[commentIndex]"
-        >
-          <div>การตอบกลับ {{ comment.comment_reply.length }} รายการ</div>
-          <Icon
-            :name="
-  showRepliesStates[commentIndex] ? 'heroicons:chevron-up-solid' : 'heroicons:chevron-down-solid'
-"
-            size="20"
-          />
-        </div>
-      </div>
-
-      <!-- Replies -->
-      <div
-        v-if="showRepliesStates[commentIndex] && comment.comment_reply"
-        class="flex flex-col gap-[16px]"
-      >
-        <div
-          v-for="(reply, replyIndex) in comment.comment_reply"
-          :key="reply.id"
-          class="ps-[38px] flex flex-col gap-[4px]"
-        >
-          <div class="flex gap-[8px]">
-            <div>
-              <Avatar
-                :size="30"
-                :src="reply.profileData?.profile_image?.image_url"
-                class="cursor-pointer"
-                @click="emit('profileClick', reply.profileData?.profile_path?.path_name)"
-              />
-            </div>
-
-            <div class="flex flex-col w-full">
-              <Card
-                padding="8"
-                disabled-background
-                class="flex flex-col bg-bright gap-[4px]"
-              >
-                <div
-                  class="font-body-large-prominent cursor-pointer"
-                  @click="emit('profileClick', reply.profileData?.profile_path?.path_name)"
-                >
-                  {{ reply.profileData?.profile_name || "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D" }}
-                </div>
-
-                <div class="font-body-large max-w-[768px] break-words">
-                  {{ reply.content }}
-                </div>
-              </Card>
-            </div>
-          </div>
-
-          <!-- Reply Actions -->
-          <div
-            class="flex gap-[16px] ps-[38px] items-center text-gray font-body-large"
-          >
-            <div>{{ reply.createdAt }}</div>
-
-            <div class="flex gap-[4px]">
-              <Button
-                disabled-padding
-                prepend-icon="fa6-regular:thumbs-up"
-                variant="text"
-                :color="reply.isLiked ? 'primary' : 'black'"
-                :icon-size="20"
-                :loading="likeLoadingStates[reply.id]"
-                @click="emit('like', reply)"
-              />
-              <div>{{ reply.likeCount || 0 }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Reply Form (Inline) -->
-      <div
-        v-if="replyingTo === comment.id"
-        class="px-[38px] flex flex-col gap-[8px]"
-      >
-        <div class="flex gap-[16px]">
-          <Avatar
-            :size="30"
-            :src="props.currentUser?.profile_image?.image_url || 'https://avatar.iran.liara.run/public?random=1'"
-          />
-
-          <div class="w-auto flex-1">
-            <InputTextarea
-              ref="replyInput"
-              v-model="replyText"
-              resize="none"
-              rows="1"
-              full-width
-              :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${comment.profileData?.profile_name}...`"
-            />
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex gap-[8px] w-[140px]">
-            <Button
-              size="tiny"
-              full-width
-              full-rounded
-              color="black"
-              variant="outline"
-              @click="closeReplyForm"
-            >
-              ยกเลิก
-            </Button>
-            <Button
-              full-width
-              size="tiny"
-              full-rounded
-              color="primary"
-              :loading="replyLoadingStates[comment.id]"
-              :disabled="!replyText.trim().length"
-              @click="handleLocalReply(comment)"
-            >
-              ส่ง
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, nextTick } from "vue";
-const props = defineProps({
-  comments: { type: Array, required: true },
-  currentUser: { type: null, required: false },
-  isLoading: { type: Boolean, required: false },
-  isSubmitting: { type: Boolean, required: false },
-  isLoggedIn: { type: Boolean, required: false }
-});
-const emit = defineEmits(["submit", "reply", "like", "profileClick", "login"]);
-const commentText = ref("");
-const replyText = ref("");
-const replyingTo = ref(null);
-const isButtonComment = ref(false);
-const showRepliesStates = reactive({});
-const likeLoadingStates = reactive({});
-const replyLoadingStates = reactive({});
-const replyInput = ref();
-const handleLocalSubmit = () => {
-  if (!commentText.value.trim()) return;
-  emit("submit", commentText.value);
-  commentText.value = "";
-};
-const handleLocalReply = (comment) => {
-  if (!replyText.value.trim()) return;
-  emit("reply", comment.id, replyText.value);
-  replyText.value = "";
-  closeReplyForm();
-};
-const openReplyForm = async (comment) => {
-  replyingTo.value = comment.id;
-  replyText.value = comment.profileData?.profile_name ? `@${comment.profileData.profile_name} ` : "";
-  await nextTick();
-  replyInput.value?.focus();
-};
-const closeReplyForm = () => {
-  replyingTo.value = null;
-  replyText.value = "";
-};
-const clearTextfields = () => {
-  commentText.value = "";
-  isButtonComment.value = false;
-};
-const handleMouseEnter = (i) => {
-};
-const handleMouseLeave = (i) => {
-};
-</script>

package/dist/runtime/components/comments/CommentSection.vue.d.ts

@@ -1,40 +0,0 @@
-interface ProfileData {
-    profile_name: string;
-    profile_path: {
-        path_name: string;
-    };
-    profile_image: {
-        image_url: string;
-    };
-}
-interface CommentData {
-    id: string | number;
-    content: string;
-    createdAt: string;
-    likeCount: number;
-    isLiked?: boolean;
-    profileData?: ProfileData;
-    comment_reply?: CommentData[];
-}
-type __VLS_Props = {
-    comments: CommentData[];
-    currentUser?: any;
-    isLoading?: boolean;
-    isSubmitting?: boolean;
-    isLoggedIn?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (text: string) => any;
-    reply: (commentId: string | number, text: string) => any;
-    like: (comment: CommentData) => any;
-    profileClick: (pathName: string) => any;
-    login: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: ((text: string) => any) | undefined;
-    onReply?: ((commentId: string | number, text: string) => any) | undefined;
-    onLike?: ((comment: CommentData) => any) | undefined;
-    onProfileClick?: ((pathName: string) => any) | undefined;
-    onLogin?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;