pukaad-ui-lib 1.2.0 → 1.3.2

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

@@ -1,54 +1,54 @@
 <template>
-  <!-- <Card full-width variant="outline">
-    <template #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">เกี่ยวกับ</div>
-        <Button
-          v-if="props.isEdit"
-          variant="text"
-          color="primary"
-          prependIcon="lucide:square-pen"
-          :iconSize="20"
-          @click="isShowEdit = true"
-        >
-          แก้ไข
-        </Button>
-      </div>
-    </template>
-    <div class="flex flex-col gap-[8px] font-body-large">
-      <div v-for="(item, i) in itemDetail" :key="i" class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon :name="item.icon" :size="20" class="text-primary" />
-        </div>
-        <div :class="item.isDefault ? 'text-cloud' : ''">
-          {{ item.value }}
-        </div>
-      </div>
-
-      <div
-        v-for="(linkItem, i) in props.item.links"
-        :key="i"
-        class="flex gap-[8px]"
-        v-if="props.item.links.length > 0"
-      >
-        <div class="pt-[3px]">
-          <Icon
-            :name="`pukaad-social:${linkItem.name}`"
-            :size="20"
-            class="text-primary"
-          />
-        </div>
-        <div
-          class="cursor-pointer hover:underline"
-          @click="onClickLink(linkItem.link)"
-        >
-          {{ linkItem.link }}
-        </div>
-      </div>
-    </div>
-  </Card>
-
-  <DrawerProfileAbout @submit="onSubmit" :item="item" v-model="isShowEdit" /> -->
+  <!-- <Card full-width variant="outline">
+    <template #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">เกี่ยวกับ</div>
+        <Button
+          v-if="props.isEdit"
+          variant="text"
+          color="primary"
+          prependIcon="lucide:square-pen"
+          :iconSize="20"
+          @click="isShowEdit = true"
+        >
+          แก้ไข
+        </Button>
+      </div>
+    </template>
+    <div class="flex flex-col gap-[8px] font-body-large">
+      <div v-for="(item, i) in itemDetail" :key="i" class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon :name="item.icon" :size="20" class="text-primary" />
+        </div>
+        <div :class="item.isDefault ? 'text-cloud' : ''">
+          {{ item.value }}
+        </div>
+      </div>
+
+      <div
+        v-for="(linkItem, i) in props.item.links"
+        :key="i"
+        class="flex gap-[8px]"
+        v-if="props.item.links.length > 0"
+      >
+        <div class="pt-[3px]">
+          <Icon
+            :name="`pukaad-social:${linkItem.name}`"
+            :size="20"
+            class="text-primary"
+          />
+        </div>
+        <div
+          class="cursor-pointer hover:underline"
+          @click="onClickLink(linkItem.link)"
+        >
+          {{ linkItem.link }}
+        </div>
+      </div>
+    </div>
+  </Card>
+
+  <DrawerProfileAbout @submit="onSubmit" :item="item" v-model="isShowEdit" /> -->
 </template>
 
 <script setup>

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

@@ -1,98 +1,98 @@
 <template>
-  <!-- <div
-    :class="[
-      'flex gap-[16px] items-center justify-between',
-      !props.disabledPadding && 'py-[16px]',
-    ]"
-  >
-    <Avatar
-      :src="props.item.profile_image.url"
-      size="40"
-      class="cursor-pointer"
-      @click="onProfileClick"
-    />
-    <div class="flex-1 flex flex-col gap-[4px]">
-      <div class="flex gap-[4px] font-body-large-prominent items-center">
-        <div class="cursor-pointer" @click="onProfileClick">
-          {{ props.item.profile_name }}
-        </div>
-        <Icon
-          v-if="props.item.profile_verified"
-          name="pukaad-verify"
-          size="16"
-        />
-        <div v-if="!props.actionsHidden">•</div>
-
-        <Button
-          type="text"
-          variant="primary"
-          @click="!props.preview ? toggleFollow() : null"
-          v-if="!props.actionsHidden"
-          :disabled="props.preview"
-          disabled-padding
-        >
-          {{ isFollowing ? "เลิกติดตาม" : "ติดตาม" }}
-        </Button>
-      </div>
-
-      <div v-if="props.type !== 'media'">
-        <div
-          v-if="type === 'article'"
-          class="text-gray font-body-large flex gap-[4px]"
-        >
-          {{ props.item.time }} • {{ props.item.view }}
-        </div>
-        <div v-else class="flex gap-[16px] font-body-large">
-          <div class="text-gray flex gap-[4px]">
-            ผู้ติดตาม
-            <div class="text-black">{{ props.item.profile_follower }}</div>
-          </div>
-          <div class="text-gray flex gap-[4px]">
-            กำลังเผยแพร่
-            <div class="text-black">{{ props.item.profile_following }}</div>
-          </div>
-          <div class="text-gray flex gap-[4px]">
-            อัตราตอบแชท
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
-            สั่งซื้อสำเร็จ
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
-            ผู้ขายยกเลิก
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="!actionsHidden && type !== 'media'" class="flex gap-[16px]">
-      <Button
-        prepend-icon="lucide:message-circle"
-        full-rounded
-        :icon-size="20"
-        @click="onChat"
-        :disabled="props.preview"
-      >
-        แชท
-      </Button>
-      <PickerOptionMenuUser
-        :variant="optionMenuButtonType"
-        circle
-        :state="profileType"
-        :disabled="props.preview"
-      />
-    </div>
-
-    <PickerOptionMenuUser
-      v-else-if="!actionsHidden"
-      :variant="optionMenuButtonType"
-      circle
-      :state="profileType"
-      :disabled="props.preview"
-    />
-  </div> -->
+  <!-- <div
+    :class="[
+      'flex gap-[16px] items-center justify-between',
+      !props.disabledPadding && 'py-[16px]',
+    ]"
+  >
+    <Avatar
+      :src="props.item.profile_image.url"
+      size="40"
+      class="cursor-pointer"
+      @click="onProfileClick"
+    />
+    <div class="flex-1 flex flex-col gap-[4px]">
+      <div class="flex gap-[4px] font-body-large-prominent items-center">
+        <div class="cursor-pointer" @click="onProfileClick">
+          {{ props.item.profile_name }}
+        </div>
+        <Icon
+          v-if="props.item.profile_verified"
+          name="pukaad-verify"
+          size="16"
+        />
+        <div v-if="!props.actionsHidden">•</div>
+
+        <Button
+          type="text"
+          variant="primary"
+          @click="!props.preview ? toggleFollow() : null"
+          v-if="!props.actionsHidden"
+          :disabled="props.preview"
+          disabled-padding
+        >
+          {{ isFollowing ? "เลิกติดตาม" : "ติดตาม" }}
+        </Button>
+      </div>
+
+      <div v-if="props.type !== 'media'">
+        <div
+          v-if="type === 'article'"
+          class="text-gray font-body-large flex gap-[4px]"
+        >
+          {{ props.item.time }} • {{ props.item.view }}
+        </div>
+        <div v-else class="flex gap-[16px] font-body-large">
+          <div class="text-gray flex gap-[4px]">
+            ผู้ติดตาม
+            <div class="text-black">{{ props.item.profile_follower }}</div>
+          </div>
+          <div class="text-gray flex gap-[4px]">
+            กำลังเผยแพร่
+            <div class="text-black">{{ props.item.profile_following }}</div>
+          </div>
+          <div class="text-gray flex gap-[4px]">
+            อัตราตอบแชท
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
+            สั่งซื้อสำเร็จ
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
+            ผู้ขายยกเลิก
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!actionsHidden && type !== 'media'" class="flex gap-[16px]">
+      <Button
+        prepend-icon="lucide:message-circle"
+        full-rounded
+        :icon-size="20"
+        @click="onChat"
+        :disabled="props.preview"
+      >
+        แชท
+      </Button>
+      <PickerOptionMenuUser
+        :variant="optionMenuButtonType"
+        circle
+        :state="profileType"
+        :disabled="props.preview"
+      />
+    </div>
+
+    <PickerOptionMenuUser
+      v-else-if="!actionsHidden"
+      :variant="optionMenuButtonType"
+      circle
+      :state="profileType"
+      :disabled="props.preview"
+    />
+  </div> -->
 </template>
 
 <script setup>

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"
-        :class="[
-          'flex items-center gap-[4px] justify-center w-full',
-          react.action && 'cursor-pointer hover:bg-bright',
-          props.disabled && 'pointer-events-none',
-        ]"
-        :style="{
-          padding: `${props.padding}px`,
-        }"
-        :aria-disabledd="props.disabled || !react.action"
-        @click="react.action"
-      >
-        <Icon
-          :name="react.reacted ? react.iconReacted : react.icon"
-          :size="props.size"
-        />
-        <div :class="[react.reacted && 'text-primary']">
-          {{ react.count }}
-        </div>
-      </div>
-    </div>
-    <Divider v-if="!props.disabledDividerBottom" :height="0" />
-  </div>
-  <ModalShare v-model="isOpenModalShare" /> -->
+  <!-- <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: `${props.padding}px`,
+        }"
+        :aria-disabledd="props.disabled || !react.action"
+        @click="react.action"
+      >
+        <Icon
+          :name="react.reacted ? react.iconReacted : react.icon"
+          :size="props.size"
+        />
+        <div :class="[react.reacted && 'text-primary']">
+          {{ react.count }}
+        </div>
+      </div>
+    </div>
+    <Divider v-if="!props.disabledDividerBottom" :height="0" />
+  </div>
+  <ModalShare v-model="isOpenModalShare" /> -->
 </template>
 
 <script setup>

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

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

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

@@ -1,54 +1,54 @@
 <template>
-  <Card column-gap="8" variant="outline" width="380">
-    <template #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ที่ไหนน่าสนใจ</div>
-        <Button
-          color="primary"
-          variant="text"
-          disabled-padding
-          size="tiny"
-          append-icon="lucide:chevron-right"
-          :icon-size="16"
-          @click="emit('view-all')"
-        >
-          ดูทั้งหมด
-        </Button>
-      </div>
-    </template>
-    <div v-if="!props.items || props.items.length === 0">
-      <div
-        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
-      >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-    <div
-      v-else
-      v-for="item in props.items"
-      :key="item.id"
-      class="flex items-center gap-[16px] cursor-pointer py-[8px]"
-      @click="handleClickCard(item)"
-    >
-      <Image
-        :src="item.image"
-        alt="image"
-        width="100"
-        height="56"
-        class="rounded-[4px]"
-      />
-      <div class="flex flex-col gap-[4px]">
-        <div class="font-body-large max-w-[232px] truncate">
-          {{ item.title }}
-        </div>
-        <div class="flex gap-[8px] text-gray font-body-medium">
-          <InputRating v-model="item.rating" readonly :rating-size="14" />
-          {{ item.review_count }} พัน
-        </div>
-      </div>
-    </div>
-  </Card>
+  <Card column-gap="8" variant="outline" width="380">
+    <template #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ที่ไหนน่าสนใจ</div>
+        <Button
+          color="primary"
+          variant="text"
+          disabled-padding
+          size="tiny"
+          append-icon="lucide:chevron-right"
+          :icon-size="16"
+          @click="emit('view-all')"
+        >
+          ดูทั้งหมด
+        </Button>
+      </div>
+    </template>
+    <div v-if="!props.items || props.items.length === 0">
+      <div
+        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
+      >
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+      </div>
+    </div>
+    <div
+      v-else
+      v-for="item in props.items"
+      :key="item.id"
+      class="flex items-center gap-[16px] cursor-pointer py-[8px]"
+      @click="handleClickCard(item)"
+    >
+      <Image
+        :src="item.image"
+        alt="image"
+        width="100"
+        height="56"
+        class="rounded-[4px]"
+      />
+      <div class="flex flex-col gap-[4px]">
+        <div class="font-body-large max-w-[232px] truncate">
+          {{ item.title }}
+        </div>
+        <div class="flex gap-[8px] text-gray font-body-medium">
+          <InputRating v-model="item.rating" readonly :rating-size="14" />
+          {{ item.review_count }} พัน
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>