pukaad-ui-lib 1.282.2 → 1.284.0

package/dist/runtime/components/card/card-profile-header.vue.d.ts

@@ -7,9 +7,9 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    preview: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
+    preview: boolean;
     disabledPadding: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -24,8 +24,8 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

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-reaction.vue.d.ts

@@ -24,8 +24,8 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

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>