pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/card/card-review.vue

@@ -1,142 +1,142 @@
 <template>
-  <div
-    class="py-[16px] border-b-[1px] border-mercury last:border-b-0 flex gap-[16px] w-full"
-  >
-    <div>
-      <Avatar
-        :src="props.item.user.avatar"
-        alt="profile_myProfile"
-        :size="30"
-        class="cursor-pointer"
-        @click="navigateToProfile(props.item.user.path_name)"
-      />
-    </div>
-    <div class="flex flex-col gap-[24px] w-full">
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[6px]">
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex justify-between items-center">
-              <div
-                class="font-body-large cursor-pointer"
-                @click="navigateToProfile(props.item.user.path_name)"
-              >
-                {{ props.item.user?.name }}
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <Button
-                  variant="text"
-                  :color="liked ? 'primary' : 'default'"
-                  :disabled="props.disabledLike || isLikeLoading"
-                  :aria-pressed="liked"
-                  @click="toggleLike"
-                >
-                  <Icon
+  <div
+    class="py-[16px] border-b-[1px] border-mercury last:border-b-0 flex gap-[16px] w-full"
+  >
+    <div>
+      <Avatar
+        :src="props.item.user.avatar"
+        alt="profile_myProfile"
+        :size="30"
+        class="cursor-pointer"
+        @click="navigateToProfile(props.item.user.path_name)"
+      />
+    </div>
+    <div class="flex flex-col gap-[24px] w-full">
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[6px]">
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex justify-between items-center">
+              <div
+                class="font-body-large cursor-pointer"
+                @click="navigateToProfile(props.item.user.path_name)"
+              >
+                {{ props.item.user?.name }}
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <Button
+                  variant="text"
+                  :color="liked ? 'primary' : 'default'"
+                  :disabled="props.disabledLike || isLikeLoading"
+                  :aria-pressed="liked"
+                  @click="toggleLike"
+                >
+                  <Icon
                     :name="
   liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-"
-                    :size="20"
-                  />
-                  {{ convertNumber(likeCount) }}
-                </Button>
-                <PickerOptionMenuUser
-                  v-if="!props.disabledMenu"
-                  :state="menuType"
-                  disabled-padding
-                  @review-edit="onEdit"
-                  @review-delete="emit('delete', props.item)"
-                  @review-reply="openReplyForm"
-                />
-              </div>
-            </div>
-            <div class="text-gray font-body-small">
-              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
-              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
-            </div>
-          </div>
-          <div class="flex gap-[8px] items-center">
-            <InputRating
-              :size="11"
-              readonly
-              :model-value="props.item.review?.rating"
-            />
-            <div class="text-gray font-body-small">
-              {{
-                convertDateToRelativeText(props.item.review?.created_at ?? "")
-              }}
-            </div>
-          </div>
-        </div>
-
-        <div v-if="props.item.review?.description" class="font-body-large">
-          {{ props.item.review?.description }}
-        </div>
-
-        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
-          <DisplayImageReview
-            :items="props.item.review?.images"
-            @select="selectImage"
-          />
-        </div>
-      </div>
-
-      <div
-        v-if="localReplies && !isReplyOpen"
-        class="relative p-[16px] rounded-md bg-bright flex flex-col gap-[4px]"
-      >
-        <!-- หางบอลลูนชี้ขึ้นบน (Figma 2456:53435 Polygon 8) -->
-        <div
-          class="absolute -top-[9px] left-[8px] w-0 h-0 border-l-[9px] border-l-transparent border-r-[9px] border-r-transparent border-b-[12px] border-b-bright"
-        />
-        <div class="flex justify-between items-center">
-          <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ localReplies.author }}
-          </div>
-          <!-- เมนูจัดการคำตอบกลับของตัวเอง — เฉพาะ business (Figma 2456:88751) -->
-          <PickerOptionMenuUser
-            v-if="props.allowReply"
-            state="my-reply"
-            disabled-padding
-            @reply-edit="openReplyForm"
-            @reply-delete="emit('reply-delete', props.item)"
-          />
-        </div>
-        <!-- whitespace-pre-wrap ให้ \n จาก Shift+Enter แสดงจริง (เทียบ comment.vue) -->
-        <div class="font-body-large whitespace-pre-wrap break-words">
-          {{ normalizeContent(localReplies.description) }}
-        </div>
-      </div>
-
-      <!-- ฟอร์มตอบกลับ (business เท่านั้น) — Figma 2456:53296/53525
-           ไม่ส่ง reply-to → ชื่อคนอยู่ใน placeholder เฉยๆ ไม่ปนลงไปในข้อความที่ส่ง -->
-      <InputComment
-        v-if="isReplyOpen"
-        v-model="replyText"
-        :avatar="props.replyAvatar"
-        :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${props.item.user?.name ?? ''}`"
-        :loading="isSubmittingReply"
-        submit-text="ตอบกลับ"
-        autofocus
-        @submit="submitReply"
-        @cancel="isReplyOpen = false"
-      />
-    </div>
-  </div>
-
-  <ModalMediaView
-    v-model="isOpen"
-    :items="(props.item.review?.images ?? []).map((url) => ({ url }))"
-    :start-index="startIndex"
-    :review="props.item"
-    title="รูปภาพรีวิว"
-  />
-
-  <!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
-  <DrawerPostReview
-    v-if="props.place?.id"
-    v-model="isDrawerOpen"
-    :item="drawerItem"
-    @success="onReviewSuccess"
-  />
+"
+                    :size="20"
+                  />
+                  {{ convertNumber(likeCount) }}
+                </Button>
+                <PickerOptionMenuUser
+                  v-if="!props.disabledMenu"
+                  :state="menuType"
+                  disabled-padding
+                  @review-edit="onEdit"
+                  @review-delete="emit('delete', props.item)"
+                  @review-reply="openReplyForm"
+                />
+              </div>
+            </div>
+            <div class="text-gray font-body-small">
+              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
+              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
+            </div>
+          </div>
+          <div class="flex gap-[8px] items-center">
+            <InputRating
+              :size="11"
+              readonly
+              :model-value="props.item.review?.rating"
+            />
+            <div class="text-gray font-body-small">
+              {{
+                convertDateToRelativeText(props.item.review?.created_at ?? "")
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.item.review?.description" class="font-body-large">
+          {{ props.item.review?.description }}
+        </div>
+
+        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
+          <DisplayImageReview
+            :items="props.item.review?.images"
+            @select="selectImage"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="localReplies && !isReplyOpen"
+        class="relative p-[16px] rounded-md bg-bright flex flex-col gap-[4px]"
+      >
+        <!-- หางบอลลูนชี้ขึ้นบน (Figma 2456:53435 Polygon 8) -->
+        <div
+          class="absolute -top-[9px] left-[8px] w-0 h-0 border-l-[9px] border-l-transparent border-r-[9px] border-r-transparent border-b-[12px] border-b-bright"
+        />
+        <div class="flex justify-between items-center">
+          <div class="text-gray font-body-large">
+            การตอบกลับจาก {{ localReplies.author }}
+          </div>
+          <!-- เมนูจัดการคำตอบกลับของตัวเอง — เฉพาะ business (Figma 2456:88751) -->
+          <PickerOptionMenuUser
+            v-if="props.allowReply"
+            state="my-reply"
+            disabled-padding
+            @reply-edit="openReplyForm"
+            @reply-delete="emit('reply-delete', props.item)"
+          />
+        </div>
+        <!-- whitespace-pre-wrap ให้ \n จาก Shift+Enter แสดงจริง (เทียบ comment.vue) -->
+        <div class="font-body-large whitespace-pre-wrap break-words">
+          {{ normalizeContent(localReplies.description) }}
+        </div>
+      </div>
+
+      <!-- ฟอร์มตอบกลับ (business เท่านั้น) — Figma 2456:53296/53525
+           ไม่ส่ง reply-to → ชื่อคนอยู่ใน placeholder เฉยๆ ไม่ปนลงไปในข้อความที่ส่ง -->
+      <InputComment
+        v-if="isReplyOpen"
+        v-model="replyText"
+        :avatar="props.replyAvatar"
+        :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${props.item.user?.name ?? ''}`"
+        :loading="isSubmittingReply"
+        submit-text="ตอบกลับ"
+        autofocus
+        @submit="submitReply"
+        @cancel="isReplyOpen = false"
+      />
+    </div>
+  </div>
+
+  <ModalMediaView
+    v-model="isOpen"
+    :items="(props.item.review?.images ?? []).map((url) => ({ url }))"
+    :start-index="startIndex"
+    :review="props.item"
+    title="รูปภาพรีวิว"
+  />
+
+  <!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
+  <DrawerPostReview
+    v-if="props.place?.id"
+    v-model="isDrawerOpen"
+    :item="drawerItem"
+    @success="onReviewSuccess"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-spotlight.vue

@@ -1,22 +1,22 @@
 <template>
-  <div v-if="visibleItems.length > 0" class="flex w-full flex-col gap-[8px]">
-    <div class="flex w-full items-center justify-between">
-      <div class="font-title-medium-prominent">{{ title }}</div>
-      <Button variant="text" color="primary" @click="emit('view-all')"
-        >ดูทั้งหมด
-        <Icon name="lucide:chevron-right" size="16" />
-      </Button>
-    </div>
-
-    <div class="grid grid-cols-4 gap-[12px]">
-      <CardContent
-        v-for="item in visibleItems"
-        :key="item.id"
-        :item="item"
-        @click="emit('item-click', item)"
-      />
-    </div>
-  </div>
+  <div v-if="visibleItems.length > 0" class="flex w-full flex-col gap-[8px]">
+    <div class="flex w-full items-center justify-between">
+      <div class="font-title-medium-prominent">{{ title }}</div>
+      <Button variant="text" color="primary" @click="emit('view-all')"
+        >ดูทั้งหมด
+        <Icon name="lucide:chevron-right" size="16" />
+      </Button>
+    </div>
+
+    <div class="grid grid-cols-4 gap-[12px]">
+      <CardContent
+        v-for="item in visibleItems"
+        :key="item.id"
+        :item="item"
+        @click="emit('item-click', item)"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-user/card-user-blog.vue

@@ -1,88 +1,88 @@
 <template>
-  <div class="flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]">
-    <div class="flex gap-[16px] items-center w-full">
-      <div class="flex gap-[8px] items-center w-full">
-        <Avatar
-          :src="props.item.user.avatar"
-          :size="40"
-          class="cursor-pointer"
-          @click="onProfileClick"
-        />
-        <div class="flex flex-col gap-[4px]">
-          <div>
-            <span
-              class="font-body-large cursor-pointer"
-              @click="onProfileClick"
-              >{{ props.item.user.name }}</span
-            ><Icon
-              v-if="props.item.user.verified"
-              name="pukaad:verify"
-              :size="16"
-              class="inline-block align-middle ml-[8px]"
-            />
-          </div>
-          <div class="text-gray font-body-small flex gap-[4px] items-center">
-            <div>
-              {{ convertDateToRelativeText(props.item.create_at) }}
-            </div>
-            <div>•</div>
-            <div>{{ convertNumber(props.item.view_count) }} วิว</div>
-          </div>
-        </div>
-      </div>
-      <Icon v-if="isPinned" name="lucide:pin" :size="20" />
-      <PickerOptionMenuUser
+  <div class="flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]">
+    <div class="flex gap-[16px] items-center w-full">
+      <div class="flex gap-[8px] items-center w-full">
+        <Avatar
+          :src="props.item.user.avatar"
+          :size="40"
+          class="cursor-pointer"
+          @click="onProfileClick"
+        />
+        <div class="flex flex-col gap-[4px]">
+          <div>
+            <span
+              class="font-body-large cursor-pointer"
+              @click="onProfileClick"
+              >{{ props.item.user.name }}</span
+            ><Icon
+              v-if="props.item.user.verified"
+              name="pukaad:verify"
+              :size="16"
+              class="inline-block align-middle ml-[8px]"
+            />
+          </div>
+          <div class="text-gray font-body-small flex gap-[4px] items-center">
+            <div>
+              {{ convertDateToRelativeText(props.item.create_at) }}
+            </div>
+            <div>•</div>
+            <div>{{ convertNumber(props.item.view_count) }} วิว</div>
+          </div>
+        </div>
+      </div>
+      <Icon v-if="isPinned" name="lucide:pin" :size="20" />
+      <PickerOptionMenuUser
         :state="
   props.isMyProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'blog'
-"
-        disabled-padding
-        @blog-unpin="onBlogUnpin"
-        @blog-pin="onBlogPin"
-        @blog-edit="onBlogEdit"
-        @blog-delete="onBlogDelete"
-      />
-    </div>
-    <div class="flex flex-col gap-[16px] cursor-pointer" @click="onBlogClick">
-      <Image
-        v-if="props.item.image"
-        :src="props.item.image"
-        :width="668"
-        :height="376"
-        fit="fill"
-      />
-      <div class="font-title-medium-prominent">
-        {{ props.item.title }}
-      </div>
-      <div
-        v-if="!props.item.image"
-        class="text-gray font-body-large line-clamp-4"
-      >
-        {{ props.item.description }}
-      </div>
-    </div>
-    <CardReaction
-      disabled-divider-top
-      disabled-divider-bottom
-      :id="props.item.id"
+"
+        disabled-padding
+        @blog-unpin="onBlogUnpin"
+        @blog-pin="onBlogPin"
+        @blog-edit="onBlogEdit"
+        @blog-delete="onBlogDelete"
+      />
+    </div>
+    <div class="flex flex-col gap-[16px] cursor-pointer" @click="onBlogClick">
+      <Image
+        v-if="props.item.image"
+        :src="props.item.image"
+        :width="668"
+        :height="376"
+        fit="fill"
+      />
+      <div class="font-title-medium-prominent">
+        {{ props.item.title }}
+      </div>
+      <div
+        v-if="!props.item.image"
+        class="text-gray font-body-large line-clamp-4"
+      >
+        {{ props.item.description }}
+      </div>
+    </div>
+    <CardReaction
+      disabled-divider-top
+      disabled-divider-bottom
+      :id="props.item.id"
       :item-count="{
   liked: props.item.like_count,
   commented: props.item.comment_count,
   shared: props.item.share_count
-}"
+}"
       :itemActive="{
   liked: props.item.liked
-}"
-      state="blog"
-    />
-
-    <!-- Edit Blog Drawer — อยู่ใน root เดียวกันเพื่อหลีกเลี่ยง fragment -->
-    <DrawerPostBlog
-      v-if="editBlogItem"
-      v-model="isEditDrawerOpen"
-      :item="editBlogItem"
-      @success="onEditSuccess"
-    />
-  </div>
+}"
+      state="blog"
+    />
+
+    <!-- Edit Blog Drawer — อยู่ใน root เดียวกันเพื่อหลีกเลี่ยง fragment -->
+    <DrawerPostBlog
+      v-if="editBlogItem"
+      v-model="isEditDrawerOpen"
+      :item="editBlogItem"
+      @success="onEditSuccess"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-user/card-user-item.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="flex gap-[16px] items-center justify-between cursor-pointer transition-colors" @click="onClickCard">
-    <div class="flex gap-[8px]">
-      <Avatar :src="modelValue?.avatar" :alt="modelValue?.name" :size="40" />
-      <div class="flex flex-col gap-[4px]">
-        <div class="font-body-large-prominent flex items-center gap-[4px]">
-          {{ modelValue?.name }}
-        </div>
-        <div class="flex flex-col gap-[4px] font-body-small text-gray">
-          <div class="flex items-center gap-[4px]">
-            <div>ผู้ติดตาม {{ $convert.convertNumber(modelValue?.follower_count || 0) }}</div>
-            <div>•</div>
-            <div>กำลังเผยแพร่ {{ $convert.convertNumber(modelValue?.public_count || 0) }}</div>
-          </div>
-          <div v-if="modelValue?.description" class="line-clamp-2">
-            {{ modelValue?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <Button v-if="!modelValue?.is_my_profile" :variant="modelValue?.is_following ? 'default' : 'outline'"
-      :color="modelValue?.is_following ? 'default' : 'primary'" @click.stop="onFollowToggle">
-      {{ modelValue?.is_following ? "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27" : "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" }}
-    </Button>
-  </div>
+  <div class="flex gap-[16px] items-center justify-between cursor-pointer transition-colors" @click="onClickCard">
+    <div class="flex gap-[8px]">
+      <Avatar :src="modelValue?.avatar" :alt="modelValue?.name" :size="40" />
+      <div class="flex flex-col gap-[4px]">
+        <div class="font-body-large-prominent flex items-center gap-[4px]">
+          {{ modelValue?.name }}
+        </div>
+        <div class="flex flex-col gap-[4px] font-body-small text-gray">
+          <div class="flex items-center gap-[4px]">
+            <div>ผู้ติดตาม {{ $convert.convertNumber(modelValue?.follower_count || 0) }}</div>
+            <div>•</div>
+            <div>กำลังเผยแพร่ {{ $convert.convertNumber(modelValue?.public_count || 0) }}</div>
+          </div>
+          <div v-if="modelValue?.description" class="line-clamp-2">
+            {{ modelValue?.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <Button v-if="!modelValue?.is_my_profile" :variant="modelValue?.is_following ? 'default' : 'outline'"
+      :color="modelValue?.is_following ? 'default' : 'primary'" @click.stop="onFollowToggle">
+      {{ modelValue?.is_following ? "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27" : "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" }}
+    </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card.vue

@@ -1,33 +1,33 @@
 <template>
-  <ShadCard
-    v-slot="slotScope"
-    :class="props.variant === 'outline' && 'border-[1px] border-mecury'"
-  >
-    <ShadCardHeader
-      v-if="$slots.header || props.title || props.description"
-      v-bind="slotScope"
-      :hasGap="!!($slots.description || props.description)"
-    >
-      <slot name="header">
-        <ShadCardTitle v-if="props.title">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </ShadCardTitle>
-        <ShadCardDescription>
-          <slot name="description">
-            {{ props.description }}
-          </slot>
-        </ShadCardDescription>
-      </slot>
-    </ShadCardHeader>
-    <ShadCardContent>
-      <slot v-bind="slotScope" />
-    </ShadCardContent>
-    <ShadCardFooter v-if="$slots.footer">
-      <slot name="footer" v-bind="slotScope" />
-    </ShadCardFooter>
-  </ShadCard>
+  <ShadCard
+    v-slot="slotScope"
+    :class="props.variant === 'outline' && 'border-[1px] border-mecury'"
+  >
+    <ShadCardHeader
+      v-if="$slots.header || props.title || props.description"
+      v-bind="slotScope"
+      :hasGap="!!($slots.description || props.description)"
+    >
+      <slot name="header">
+        <ShadCardTitle v-if="props.title">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </ShadCardTitle>
+        <ShadCardDescription>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </ShadCardDescription>
+      </slot>
+    </ShadCardHeader>
+    <ShadCardContent>
+      <slot v-bind="slotScope" />
+    </ShadCardContent>
+    <ShadCardFooter v-if="$slots.footer">
+      <slot name="footer" v-bind="slotScope" />
+    </ShadCardFooter>
+  </ShadCard>
 </template>
 
 <script setup>