pukaad-ui-lib 1.271.2 → 1.272.0

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

@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <Divider v-if="!props.disabledDividerTop" :height="0" />
-    <div class="flex justify-between w-full font-body-large text-gray">
-      <div
-        v-for="(react, i) in listReaction"
-        :key="i"
+  <div>
+    <Divider v-if="!props.disabledDividerTop" :height="0" />
+    <div class="flex justify-between w-full font-body-large text-gray">
+      <div
+        v-for="(react, i) in listReaction"
+        :key="i"
         :class="[
   'flex items-center gap-[4px] justify-center w-full',
   react.action && 'cursor-pointer hover:bg-bright',
   props.disabled && 'pointer-events-none'
-]"
+]"
         :style="{
   padding: `${computedPadding}px`
-}"
-        :aria-disabled="props.disabled || !react.action"
-        @click="react.action"
-      >
-        <Icon
-          :name="react.reacted ? react.iconReacted : react.icon"
-          :size="props.iconSize"
-        />
-        <div :class="[react.reacted && 'text-primary']">
-          {{ $convert.convertNumber(react.count) }}
-        </div>
-      </div>
-    </div>
-    <Divider v-if="!props.disabledDividerBottom" :height="0" />
-    <ModalShare v-model="isOpenModalShare" />
-  </div>
+}"
+        :aria-disabled="props.disabled || !react.action"
+        @click="react.action"
+      >
+        <Icon
+          :name="react.reacted ? react.iconReacted : react.icon"
+          :size="props.iconSize"
+        />
+        <div :class="[react.reacted && 'text-primary']">
+          {{ $convert.convertNumber(react.count) }}
+        </div>
+      </div>
+    </div>
+    <Divider v-if="!props.disabledDividerBottom" :height="0" />
+    <ModalShare v-model="isOpenModalShare" />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,46 +1,46 @@
 <template>
-  <Card title="เรื่องอื่นๆ ที่เกี่ยวข้อง" class="w-[380px]" variant="outline">
-    <div class="min-h-[440px]">
-      <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
-        <div v-for="(item, index) in props.items" :key="index">
-          <div v-if="item.image" class="flex gap-[8px]">
-            <Image
-              width="100"
-              height="100"
-              :src="item.image"
-              class="rounded-[4px]"
-            />
-            <div class="flex flex-col gap-[4px]">
-              <div class="line-clamp-3 font-body-large-prominent">
-                {{ item.title }}
-              </div>
-              <div class="text-primary font-body-small cursor-pointer">
-                {{ item.name }}
-              </div>
-            </div>
-          </div>
-          <div v-else class="flex flex-col gap-[4px]">
-            <div class="font-body-large-prominent line-clamp-2">
-              {{ item.title }}
-            </div>
-            <div class="text-primary font-body-small cursor-pointer">
-              {{ item.name }}
-            </div>
-            <div class="text-gray font-body-medium line-clamp-1">
-              {{ item.description }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else
-        class="flex flex-col gap-[8px] items-center justify-center h-[440px]"
-      >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-  </Card>
+  <Card title="เรื่องอื่นๆ ที่เกี่ยวข้อง" class="w-[380px]" variant="outline">
+    <div class="min-h-[440px]">
+      <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
+        <div v-for="(item, index) in props.items" :key="index">
+          <div v-if="item.image" class="flex gap-[8px]">
+            <Image
+              width="100"
+              height="100"
+              :src="item.image"
+              class="rounded-[4px]"
+            />
+            <div class="flex flex-col gap-[4px]">
+              <div class="line-clamp-3 font-body-large-prominent">
+                {{ item.title }}
+              </div>
+              <div class="text-primary font-body-small cursor-pointer">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div v-else class="flex flex-col gap-[4px]">
+            <div class="font-body-large-prominent line-clamp-2">
+              {{ item.title }}
+            </div>
+            <div class="text-primary font-body-small cursor-pointer">
+              {{ item.name }}
+            </div>
+            <div class="text-gray font-body-medium line-clamp-1">
+              {{ item.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="flex flex-col gap-[8px] items-center justify-center h-[440px]"
+      >
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-recommend-place.vue

@@ -1,49 +1,49 @@
 <template>
-  <Card title="ที่ไหนน่าสนใจ" class="w-[380px]" variant="outline">
-    <template v-if="props.items.length > 0" #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ที่ไหนน่าสนใจ</div>
-        <Button color="primary" variant="text" @click="onViewAll">
-          <div class="flex items-center gap-[2px] font-body-small">
-            ดูทั้งหมด
-            <Icon name="lucide:chevron-right" size="16" />
-          </div>
-        </Button>
-      </div>
-    </template>
-
-    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
-      <div
-        v-for="item in props.items"
-        :key="item.id"
-        class="flex items-center gap-[16px] cursor-pointer"
-        @click="handleClickCard(item)"
-      >
-        <Image
-          :src="item.image"
-          width="100"
-          height="56"
-          class="rounded-[4px]"
-        />
-        <div class="flex flex-col gap-[4px]">
-          <div class="font-body-large w-[232px] truncate">
-            {{ item.title }}
-          </div>
-          <div class="flex items-center gap-[4px] text-gray font-body-small">
-            <InputRating v-model="item.rating" readonly :rating-size="10" />
-            {{ $format.number(item.review_count) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-else
-      class="flex flex-col gap-[8px] items-center justify-center h-[334px]"
-    >
-      <Icon name="pukaad:page-not-found" size="60" />
-      <div class="font-body-large text-gray">ไม่พบสถานที่</div>
-    </div>
-  </Card>
+  <Card title="ที่ไหนน่าสนใจ" class="w-[380px]" variant="outline">
+    <template v-if="props.items.length > 0" #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ที่ไหนน่าสนใจ</div>
+        <Button color="primary" variant="text" @click="onViewAll">
+          <div class="flex items-center gap-[2px] font-body-small">
+            ดูทั้งหมด
+            <Icon name="lucide:chevron-right" size="16" />
+          </div>
+        </Button>
+      </div>
+    </template>
+
+    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
+      <div
+        v-for="item in props.items"
+        :key="item.id"
+        class="flex items-center gap-[16px] cursor-pointer"
+        @click="handleClickCard(item)"
+      >
+        <Image
+          :src="item.image"
+          width="100"
+          height="56"
+          class="rounded-[4px]"
+        />
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large w-[232px] truncate">
+            {{ item.title }}
+          </div>
+          <div class="flex items-center gap-[4px] text-gray font-body-small">
+            <InputRating v-model="item.rating" readonly :rating-size="10" />
+            {{ $format.number(item.review_count) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-col gap-[8px] items-center justify-center h-[334px]"
+    >
+      <Icon name="pukaad:page-not-found" size="60" />
+      <div class="font-body-large text-gray">ไม่พบสถานที่</div>
+    </div>
+  </Card>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-recommend-profile.vue

@@ -1,50 +1,50 @@
 <template>
-  <Card title="ติดตามใครดี" variant="outline" class="w-[380px]">
-    <template v-if="props.items.length > 0" #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ติดตามใครดี</div>
-        <Button color="primary" variant="text" @click="onViewAll">
-          <div class="flex items-center gap-[2px] font-body-small">
-            ดูทั้งหมด<Icon name="lucide:chevron-right" size="16" />
-          </div>
-        </Button>
-      </div>
-    </template>
-    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
-      <div
-        v-for="item in props.items"
-        :key="item.id"
-        class="flex items-center gap-[16px] cursor-pointer"
-        @click="handleClickCard(item)"
-      >
-        <Avatar :src="item.image" alt="image" size="40" />
-        <div class="flex flex-col gap-[4px]">
-          <div class="flex items-center gap-[4px]">
-            <div class="font-body-large max-w-[272px] truncate">
-              {{ item.name }}
-            </div>
-            <Icon
-              v-if="item.verified === true"
-              name="pukaad-verify"
-              :size="13"
-            />
-          </div>
-          <div class="text-gray font-body-small">
-            กำลังเผยแพร่ {{ $format.number(item.post_count) }} • ผู้ติดตาม
-            {{ $format.number(item.follower_count) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else>
-      <div
-        class="flex flex-col items-center justify-center h-[310px] gap-[10px]"
-      >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-  </Card>
+  <Card title="ติดตามใครดี" variant="outline" class="w-[380px]">
+    <template v-if="props.items.length > 0" #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ติดตามใครดี</div>
+        <Button color="primary" variant="text" @click="onViewAll">
+          <div class="flex items-center gap-[2px] font-body-small">
+            ดูทั้งหมด<Icon name="lucide:chevron-right" size="16" />
+          </div>
+        </Button>
+      </div>
+    </template>
+    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
+      <div
+        v-for="item in props.items"
+        :key="item.id"
+        class="flex items-center gap-[16px] cursor-pointer"
+        @click="handleClickCard(item)"
+      >
+        <Avatar :src="item.image" alt="image" size="40" />
+        <div class="flex flex-col gap-[4px]">
+          <div class="flex items-center gap-[4px]">
+            <div class="font-body-large max-w-[272px] truncate">
+              {{ item.name }}
+            </div>
+            <Icon
+              v-if="item.verified === true"
+              name="pukaad-verify"
+              :size="13"
+            />
+          </div>
+          <div class="text-gray font-body-small">
+            กำลังเผยแพร่ {{ $format.number(item.post_count) }} • ผู้ติดตาม
+            {{ $format.number(item.follower_count) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div
+        class="flex flex-col items-center justify-center h-[310px] gap-[10px]"
+      >
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>

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

@@ -1,61 +1,61 @@
 <template>
-  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
-    <div v-if="props.item.user.avatar">
-      <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 @click="NavigateToProfile(props.item.user.path_name)" class="font-body-large cursor-pointer">
-                {{ props.item.user?.name }}
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <Button variant="text" :color="liked ? 'primary' : 'default'" :disabled="props.disabledLike"
-                  :aria-pressed="liked" @click="toggleLike">
-                  <Icon :name="liked ? 'fa6-solid:thumbs-up' : 'fa6-regular:thumbs-up'" :size="20" />
-                  {{ convertNumber(likeCount) }}
-                </Button>
-                <PickerOptionMenuUser v-if="!props.disabledMenu" :state="menuType" disabled-padding />
-              </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="16" readonly :model-value="props.item.review?.rating" />
-            <div class="text-gray font-body-small">
-              {{ 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="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
-          <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <ModalMediaView v-model="isOpen" :items="props.item.review?.images" :start-index="startIndex" title="รูปภาพรีวิว" />
+  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
+    <div v-if="props.item.user.avatar">
+      <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 @click="NavigateToProfile(props.item.user.path_name)" class="font-body-large cursor-pointer">
+                {{ props.item.user?.name }}
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <Button variant="text" :color="liked ? 'primary' : 'default'" :disabled="props.disabledLike"
+                  :aria-pressed="liked" @click="toggleLike">
+                  <Icon :name="liked ? 'fa6-solid:thumbs-up' : 'fa6-regular:thumbs-up'" :size="20" />
+                  {{ convertNumber(likeCount) }}
+                </Button>
+                <PickerOptionMenuUser v-if="!props.disabledMenu" :state="menuType" disabled-padding />
+              </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="16" readonly :model-value="props.item.review?.rating" />
+            <div class="text-gray font-body-small">
+              {{ 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="props.item.replies">
+        <div class="p-[16px] rounded-sm bg-bright">
+          <div class="text-gray font-body-large">
+            การตอบกลับจาก {{ props.item.replies?.author }}
+          </div>
+          <div class="font-body-large">
+            {{ props.item.replies?.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ModalMediaView v-model="isOpen" :items="props.item.review?.images" :start-index="startIndex" title="รูปภาพรีวิว" />
 </template>
 
 <script setup>

package/dist/runtime/components/card/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' : 'report-announce'
-"
-        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>