pukaad-ui-lib 1.459.0 → 1.461.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/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/card-recommend-place.vue

@@ -1,60 +1,60 @@
 <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
-          v-if="item.image"
-          :src="item.image"
-          width="100"
-          height="56"
-          class="rounded-[4px]"
-        />
-        <div
-          v-else
-          class="w-[100px] h-[56px] bg-cloud flex items-center justify-center rounded-[4px]"
-        >
-          <Icon
-            name="pukaad:map-location-dot"
-            size="24"
-            class="text-gray shrink-0"
-          />
-        </div>
-        <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" />
-            {{ $convert.convertNumber(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
+          v-if="item.image"
+          :src="item.image"
+          width="100"
+          height="56"
+          class="rounded-[4px]"
+        />
+        <div
+          v-else
+          class="w-[100px] h-[56px] bg-cloud flex items-center justify-center rounded-[4px]"
+        >
+          <Icon
+            name="pukaad:map-location-dot"
+            size="24"
+            class="text-gray shrink-0"
+          />
+        </div>
+        <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" />
+            {{ $convert.convertNumber(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/card-recommend-profile.vue

@@ -1,51 +1,51 @@
 <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">
-            กำลังเผยแพร่ {{ $convert.convertNumber(item.post_count) }} •
-            ผู้ติดตาม
-            {{ $convert.convertNumber(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">
+            กำลังเผยแพร่ {{ $convert.convertNumber(item.post_count) }} •
+            ผู้ติดตาม
+            {{ $convert.convertNumber(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-refer.vue

@@ -1,90 +1,90 @@
 <template>
-  <div
-    class="flex gap-[16px] bg-bright p-[8px] rounded-[6px] w-full items-center cursor-pointer"
-    @click="onClick"
-  >
-    <!-- post-it -->
-    <div
-      v-if="isPost && props.item.content_type === 'post_it'"
-      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
-    >
-      <Icon name="fa6-solid:message" size="24" class="text-primary" />
-    </div>
-
-    <!-- Image -->
-    <Image
-      v-else-if="isPost && props.item.content_type === 'image'"
-      :src="props.item.image_url"
-      :width="50"
-      :height="50"
-      class="shrink-0 rounded-[4px]"
-    />
-
-    <!-- video -->
-    <div
-      v-else-if="isPost && props.item.content_type === 'video'"
-      class="relative w-[50px] h-[50px] shrink-0"
-    >
-      <Image
-        :src="props.item.image_url"
-        :width="50"
-        :height="50"
-        class="rounded-[4px]"
-      />
-      <div
-        class="absolute inset-0 m-auto bg-black/50 w-[24px] h-[24px] rounded-full flex items-center justify-center"
-      >
-        <Icon name="lucide:play" size="16" class="text-white" />
-      </div>
-    </div>
-
-    <!-- Blog -->
-    <Image
-      v-else-if="props.item.mention_type === 'blog'"
-      :src="props.item.image_url"
-      :width="89"
-      :height="50"
-      class="shrink-0 rounded-[4px]"
-    />
-
-    <!-- Link -->
-    <div
-      v-else-if="props.item.mention_type === 'link'"
-      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
-    >
-      <Icon name="fa6-solid:link" size="24" class="text-primary" />
-    </div>
-
-    <!-- ปลายทางถูกลบ / campaign ที่ยัง resolve ไม่ได้ — ไม่มีรูปให้โชว์ -->
-    <div
-      v-else
-      class="w-[50px] h-[50px] shrink-0 bg-mercury rounded-sm flex items-center justify-center"
-    >
-      <Icon name="lucide:file-question" size="24" class="text-gray" />
-    </div>
-
-    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
-      <div class="font-body-large-prominent w-full truncate">
-        {{ displayTitle }}
-      </div>
-
-      <!-- บล็อกโชว์ผู้เขียน อย่างอื่นโชว์บรรทัดรองตาม type -->
-      <div
-        v-if="props.item.mention_type === 'blog' && props.item.author_name"
-        class="flex gap-[4px] items-center"
-      >
-        <Avatar :src="props.item.author_avatar" :size="16" />
-        <div class="font-body-small text-gray truncate">
-          {{ props.item.author_name }}
-        </div>
-      </div>
-      <div v-else-if="subTitle" class="font-body-small text-gray w-full truncate">
-        {{ subTitle }}
-      </div>
-    </div>
-
-    <Icon name="lucide:chevron-right" size="24" class="shrink-0" />
-  </div>
+  <div
+    class="flex gap-[16px] bg-bright p-[8px] rounded-[6px] w-full items-center cursor-pointer"
+    @click="onClick"
+  >
+    <!-- post-it -->
+    <div
+      v-if="isPost && props.item.content_type === 'post_it'"
+      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:message" size="24" class="text-primary" />
+    </div>
+
+    <!-- Image -->
+    <Image
+      v-else-if="isPost && props.item.content_type === 'image'"
+      :src="props.item.image_url"
+      :width="50"
+      :height="50"
+      class="shrink-0 rounded-[4px]"
+    />
+
+    <!-- video -->
+    <div
+      v-else-if="isPost && props.item.content_type === 'video'"
+      class="relative w-[50px] h-[50px] shrink-0"
+    >
+      <Image
+        :src="props.item.image_url"
+        :width="50"
+        :height="50"
+        class="rounded-[4px]"
+      />
+      <div
+        class="absolute inset-0 m-auto bg-black/50 w-[24px] h-[24px] rounded-full flex items-center justify-center"
+      >
+        <Icon name="lucide:play" size="16" class="text-white" />
+      </div>
+    </div>
+
+    <!-- Blog -->
+    <Image
+      v-else-if="props.item.mention_type === 'blog'"
+      :src="props.item.image_url"
+      :width="89"
+      :height="50"
+      class="shrink-0 rounded-[4px]"
+    />
+
+    <!-- Link -->
+    <div
+      v-else-if="props.item.mention_type === 'link'"
+      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:link" size="24" class="text-primary" />
+    </div>
+
+    <!-- ปลายทางถูกลบ / campaign ที่ยัง resolve ไม่ได้ — ไม่มีรูปให้โชว์ -->
+    <div
+      v-else
+      class="w-[50px] h-[50px] shrink-0 bg-mercury rounded-sm flex items-center justify-center"
+    >
+      <Icon name="lucide:file-question" size="24" class="text-gray" />
+    </div>
+
+    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
+      <div class="font-body-large-prominent w-full truncate">
+        {{ displayTitle }}
+      </div>
+
+      <!-- บล็อกโชว์ผู้เขียน อย่างอื่นโชว์บรรทัดรองตาม type -->
+      <div
+        v-if="props.item.mention_type === 'blog' && props.item.author_name"
+        class="flex gap-[4px] items-center"
+      >
+        <Avatar :src="props.item.author_avatar" :size="16" />
+        <div class="font-body-small text-gray truncate">
+          {{ props.item.author_name }}
+        </div>
+      </div>
+      <div v-else-if="subTitle" class="font-body-small text-gray w-full truncate">
+        {{ subTitle }}
+      </div>
+    </div>
+
+    <Icon name="lucide:chevron-right" size="24" class="shrink-0" />
+  </div>
 </template>
 
 <script setup>