pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/card/card-place/card-place-search-row.vue

@@ -1,42 +1,42 @@
 <template>
-  <div
-    class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-md hover:bg-bright cursor-pointer"
-    @click="emit('select', props.item)"
-  >
-    <!-- thumbnail -->
-    <Image
-      v-if="props.item.image_cover"
-      :src="props.item.image_cover"
-      :width="71"
-      :height="40"
-      class="shrink-0 rounded-[4px] object-cover"
-    />
-    <div
-      v-else
-      class="w-[71px] h-[40px] bg-cloud shrink-0 rounded-[4px] flex items-center justify-center"
-    >
-      <Icon name="fa6-solid:map-location-dot" :size="20" class="text-gray" />
-    </div>
-
-    <!-- content -->
-    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
-      <div class="font-body-medium text-black truncate">
-        {{ props.item.business_name }}
-      </div>
-      <div class="flex items-center gap-[4px] min-w-0">
-        <InputRating :model-value="props.item.rating ?? 0" readonly :size="14" />
-        <template v-if="props.item.review_count != null">
-          <span class="font-body-small text-gray shrink-0">
-            {{ $convert.convertNumber(props.item.review_count) }}
-          </span>
-          <span class="font-body-small text-gray shrink-0">•</span>
-        </template>
-        <span class="font-body-small text-gray truncate">
-          {{ props.item.address?.full_address }}
-        </span>
-      </div>
-    </div>
-  </div>
+  <div
+    class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-md hover:bg-bright cursor-pointer"
+    @click="emit('select', props.item)"
+  >
+    <!-- thumbnail -->
+    <Image
+      v-if="props.item.image_cover"
+      :src="props.item.image_cover"
+      :width="71"
+      :height="40"
+      class="shrink-0 rounded-[4px] object-cover"
+    />
+    <div
+      v-else
+      class="w-[71px] h-[40px] bg-cloud shrink-0 rounded-[4px] flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:map-location-dot" :size="20" class="text-gray" />
+    </div>
+
+    <!-- content -->
+    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
+      <div class="font-body-medium text-black truncate">
+        {{ props.item.business_name }}
+      </div>
+      <div class="flex items-center gap-[4px] min-w-0">
+        <InputRating :model-value="props.item.rating ?? 0" readonly :size="14" />
+        <template v-if="props.item.review_count != null">
+          <span class="font-body-small text-gray shrink-0">
+            {{ $convert.convertNumber(props.item.review_count) }}
+          </span>
+          <span class="font-body-small text-gray shrink-0">•</span>
+        </template>
+        <span class="font-body-small text-gray truncate">
+          {{ props.item.address?.full_address }}
+        </span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,46 +1,46 @@
 <template>
-  <div class="flex gap-[16px] items-center">
-    <Image
-      v-if="coverImage"
-      :src="coverImage"
-      width="227"
-      height="128"
-      class="rounded-[4px] flex-shrink-0 object-cover"
-    />
-    <div
-      v-else
-      class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center"
-    >
-      <Icon name="pukaad:map-location-dot" :size="36" class="text-gray" />
-    </div>
-    <div class="flex flex-col gap-[4px]">
-      <div v-if="placeName" class="font-title-small-promient">
-        {{ placeName }}
-      </div>
-
-      <div class="flex items-center gap-[4px] font-body-medium text-gray">
-        <InputRating
-          :size="10"
-          readonly
-          :model-value="props.item?.rating || 0"
-        />
-        <template v-if="props.item?.like_count !== void 0">
-          <span>•</span>
-          <span>ถูกใจ {{ convertNumber(props.item.like_count) }}</span>
-        </template>
-      </div>
-
-      <div v-if="placeAddress" class="font-body-medium text-gray">
-        {{ placeAddress }}
-      </div>
-      <div
-        v-if="props.item?.description"
-        class="font-body-medium text-gray line-clamp-2"
-      >
-        {{ props.item.description }}
-      </div>
-    </div>
-  </div>
+  <div class="flex gap-[16px] items-center">
+    <Image
+      v-if="coverImage"
+      :src="coverImage"
+      width="227"
+      height="128"
+      class="rounded-[4px] flex-shrink-0 object-cover"
+    />
+    <div
+      v-else
+      class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center"
+    >
+      <Icon name="pukaad:map-location-dot" :size="36" class="text-gray" />
+    </div>
+    <div class="flex flex-col gap-[4px]">
+      <div v-if="placeName" class="font-title-small-promient">
+        {{ placeName }}
+      </div>
+
+      <div class="flex items-center gap-[4px] font-body-medium text-gray">
+        <InputRating
+          :size="10"
+          readonly
+          :model-value="props.item?.rating || 0"
+        />
+        <template v-if="props.item?.like_count !== void 0">
+          <span>•</span>
+          <span>ถูกใจ {{ convertNumber(props.item.like_count) }}</span>
+        </template>
+      </div>
+
+      <div v-if="placeAddress" class="font-body-medium text-gray">
+        {{ placeAddress }}
+      </div>
+      <div
+        v-if="props.item?.description"
+        class="font-body-medium text-gray line-clamp-2"
+      >
+        {{ props.item.description }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,85 +1,85 @@
 <template>
-  <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]" variant="outline">
-    <template v-if="props.isMyProfile && !isEmpty" #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
-        <Button variant="text" color="primary" @click="isShowEdit = true">
-          <Icon name="lucide:square-pen" :size="20" class="text-primary" />
-          แก้ไข
-        </Button>
-      </div>
-    </template>
-    <div
-      v-if="props.isMyProfile && isEmpty"
-      class="flex flex-col gap-[8px] font-body-large"
-    >
-      <Button class="w-full" @click="isShowEdit = true">
-        <Icon name="lucide:plus" :size="20" />
-        เพิ่มข้อมูลทั่วไป
-      </Button>
-    </div>
-    <div v-else class="flex flex-col gap-[8px] font-body-large">
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:circle-alert" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.description ? 'text-cloud' : ''">
-          {{ item.description || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22" }}
-        </div>
-      </div>
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:book-user" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.category?.name ? 'text-cloud' : ''">
-          {{ item.category?.name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }}
-        </div>
-      </div>
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:map-pin" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.address ? 'text-cloud' : ''">
-          {{ item.address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
-        </div>
-      </div>
-
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:phone" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.contact_phone ? 'text-cloud' : ''">
-          {{ item.contact_phone || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C" }}
-        </div>
-      </div>
-      <div
-        v-for="(linkItem, i) in item.contact_channels"
-        :key="i"
-        class="flex gap-[8px]"
-        v-if="item.contact_channels.length > 0"
-      >
-        <div class="pt-[3px]">
-          <Icon
-            :name="`pukaad-social:${linkItem.channel_type}`"
-            :size="20"
-            class="text-primary"
-          />
-        </div>
-        <a
-          :href="linkItem.value"
-          target="_blank"
-          class="cursor-pointer hover:underline truncate"
-        >
-          {{ linkItem.value }}
-        </a>
-      </div>
-    </div>
-  </Card>
-  <DrawerProfileAbout
-    :item="item"
-    v-model="isShowEdit"
-    @submit="onUpdateAbout"
-  />
+  <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]" variant="outline">
+    <template v-if="props.isMyProfile && !isEmpty" #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
+        <Button variant="text" color="primary" @click="isShowEdit = true">
+          <Icon name="lucide:square-pen" :size="20" class="text-primary" />
+          แก้ไข
+        </Button>
+      </div>
+    </template>
+    <div
+      v-if="props.isMyProfile && isEmpty"
+      class="flex flex-col gap-[8px] font-body-large"
+    >
+      <Button class="w-full" @click="isShowEdit = true">
+        <Icon name="lucide:plus" :size="20" />
+        เพิ่มข้อมูลทั่วไป
+      </Button>
+    </div>
+    <div v-else class="flex flex-col gap-[8px] font-body-large">
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:circle-alert" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.description ? 'text-cloud' : ''">
+          {{ item.description || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:book-user" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.category?.name ? 'text-cloud' : ''">
+          {{ item.category?.name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:map-pin" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.address ? 'text-cloud' : ''">
+          {{ item.address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
+        </div>
+      </div>
+
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:phone" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.contact_phone ? 'text-cloud' : ''">
+          {{ item.contact_phone || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C" }}
+        </div>
+      </div>
+      <div
+        v-for="(linkItem, i) in item.contact_channels"
+        :key="i"
+        class="flex gap-[8px]"
+        v-if="item.contact_channels.length > 0"
+      >
+        <div class="pt-[3px]">
+          <Icon
+            :name="`pukaad-social:${linkItem.channel_type}`"
+            :size="20"
+            class="text-primary"
+          />
+        </div>
+        <a
+          :href="linkItem.value"
+          target="_blank"
+          class="cursor-pointer hover:underline truncate"
+        >
+          {{ linkItem.value }}
+        </a>
+      </div>
+    </div>
+  </Card>
+  <DrawerProfileAbout
+    :item="item"
+    v-model="isShowEdit"
+    @submit="onUpdateAbout"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-profile/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"
+  <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>