pukaad-ui-lib 1.460.0 → 1.461.0

package/dist/runtime/components/card/card-mention/card-mention-skeleton.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex gap-[8px] items-center w-full min-w-0">
-    <Skeleton
-      v-if="props.mentionType === 'post'"
-      class="w-[40px] h-[40px] shrink-0 rounded-[4px]"
-    />
-    <Skeleton
-      v-else-if="props.mentionType === 'blog'"
-      class="w-[71px] h-[40px] shrink-0 rounded-[4px]"
-    />
-    <div class="flex flex-col gap-[6px] min-w-0 flex-1">
-      <Skeleton class="h-[14px] w-3/4" />
-      <Skeleton class="h-[12px] w-1/2" />
-    </div>
-  </div>
+  <div class="flex gap-[8px] items-center w-full min-w-0">
+    <Skeleton
+      v-if="props.mentionType === 'post'"
+      class="w-[40px] h-[40px] shrink-0 rounded-[4px]"
+    />
+    <Skeleton
+      v-else-if="props.mentionType === 'blog'"
+      class="w-[71px] h-[40px] shrink-0 rounded-[4px]"
+    />
+    <div class="flex flex-col gap-[6px] min-w-0 flex-1">
+      <Skeleton class="h-[14px] w-3/4" />
+      <Skeleton class="h-[12px] w-1/2" />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,12 +1,13 @@
 export interface CardMentionItem {
     id: string;
-    mentionType: "post" | "blog" | "link";
+    mentionType: "post" | "blog" | "place" | "link";
     title: string;
     contentType?: string;
     coverColor?: string;
     image?: string | null;
     thumbnail?: string;
     placeName?: string;
+    address?: string;
     author?: {
         name: string;
         avatar?: string | null;

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

@@ -1,83 +1,83 @@
 <template>
-  <div class="flex gap-[8px] items-center w-full min-w-0 contain-inline-size">
-    <template v-if="isPost">
-      <CardColorPostIt
-        v-if="props.item.contentType === 'post-it'"
-        :color="props.item.coverColor"
-        class="shrink-0"
-      />
-      <div
-        v-else-if="props.item.contentType === 'video'"
-        class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]"
-      >
-        <Image
-          v-if="props.item.thumbnail"
-          :src="props.item.thumbnail"
-          :width="40"
-          :height="40"
-          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>
-      <Image
-        v-else-if="props.item.image"
-        :src="props.item.image"
-        :width="40"
-        :height="40"
-        class="shrink-0 rounded-[4px]"
-      />
-    </template>
-    <Image
-      v-else-if="props.item.mentionType === 'blog'"
-      :src="props.item.image ?? ''"
-      :width="71"
-      :height="40"
-      class="shrink-0 rounded-[4px]"
-    />
-
-    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
-      <div class="font-body-medium w-full truncate">{{ displayTitle }}</div>
-      <div
-        v-if="props.item.mentionType === 'blog' && props.item.author"
-        class="flex gap-[4px] items-center min-w-0"
-      >
-        <Avatar
-          :src="props.item.author.avatar ?? ''"
-          :size="16"
-          class="shrink-0"
-        />
-        <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
-      v-if="props.selected"
-      name="lucide:check"
-      size="16"
-      class="text-primary shrink-0"
-    />
-    <button
-      v-if="props.removable"
-      type="button"
-      aria-label="ลบการเอ่ยถึง"
-      class="shrink-0 flex cursor-pointer text-black"
-      @click.stop="emit('remove', props.item.id)"
-    >
-      <Icon name="lucide:x" size="16" />
-    </button>
-  </div>
+  <div class="flex gap-[8px] items-center w-full min-w-0 contain-inline-size">
+    <template v-if="isPost">
+      <CardColorPostIt
+        v-if="props.item.contentType === 'post-it'"
+        :color="props.item.coverColor"
+        class="shrink-0"
+      />
+      <div
+        v-else-if="props.item.contentType === 'video'"
+        class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]"
+      >
+        <Image
+          v-if="props.item.thumbnail"
+          :src="props.item.thumbnail"
+          :width="40"
+          :height="40"
+          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>
+      <Image
+        v-else-if="props.item.image"
+        :src="props.item.image"
+        :width="40"
+        :height="40"
+        class="shrink-0 rounded-[4px]"
+      />
+    </template>
+    <Image
+      v-else-if="props.item.mentionType === 'blog' || props.item.mentionType === 'place'"
+      :src="props.item.image ?? ''"
+      :width="71"
+      :height="40"
+      class="shrink-0 rounded-[4px] bg-cloud"
+    />
+
+    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
+      <div class="font-body-medium w-full truncate">{{ displayTitle }}</div>
+      <div
+        v-if="props.item.mentionType === 'blog' && props.item.author"
+        class="flex gap-[4px] items-center min-w-0"
+      >
+        <Avatar
+          :src="props.item.author.avatar ?? ''"
+          :size="16"
+          class="shrink-0"
+        />
+        <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
+      v-if="props.selected"
+      name="lucide:check"
+      size="16"
+      class="text-primary shrink-0"
+    />
+    <button
+      v-if="props.removable"
+      type="button"
+      aria-label="ลบการเอ่ยถึง"
+      class="shrink-0 flex cursor-pointer text-black"
+      @click.stop="emit('remove', props.item.id)"
+    >
+      <Icon name="lucide:x" size="16" />
+    </button>
+  </div>
 </template>
 
 <script setup>
@@ -98,6 +98,7 @@ const displayTitle = computed(() => {
 const subtitle = computed(() => {
   if (props.item.mentionType === "link") return props.item.url;
   if (isPost.value) return props.item.placeName;
+  if (props.item.mentionType === "place") return props.item.address;
   return "";
 });
 </script>

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

@@ -1,12 +1,13 @@
 export interface CardMentionItem {
     id: string;
-    mentionType: "post" | "blog" | "link";
+    mentionType: "post" | "blog" | "place" | "link";
     title: string;
     contentType?: string;
     coverColor?: string;
     image?: string | null;
     thumbnail?: string;
     placeName?: string;
+    address?: string;
     author?: {
         name: string;
         avatar?: string | null;

package/dist/runtime/components/card/card-opening-hours.vue

@@ -1,56 +1,56 @@
 <template>
-  <div class="font-body-large flex flex-col gap-[4px] w-full">
-    <!-- สถานะปิดชั่วคราว -->
-    <div
-      v-if="props.openStatus === 'temporarily_closed'"
-      class="font-body-large-prominent text-error"
-    >
-      ปิดชั่วคราว
-    </div>
-
-    <!-- เวลาทำการปกติ -->
-    <div
-      v-for="(line, index) in lines"
-      :key="index"
-      class="flex items-start justify-between"
-    >
-      <span>{{ line.day }}</span>
-      <div class="flex flex-col items-end">
-        <span v-for="(time, timeIndex) in line.time_lines" :key="timeIndex">
-          {{ time }}
-        </span>
-      </div>
-    </div>
-
-    <!-- วันทำการพิเศษ -->
-    <template v-if="formattedSpecialDays.length">
-      <div class="font-body-large-prominent text-warning">วันทำการพิเศษ</div>
-      <div
-        v-for="(special, index) in formattedSpecialDays"
-        :key="index"
-        class="flex items-start justify-between text-warning"
-      >
-        <span>{{ special.date_label }}</span>
-        <div class="flex flex-col items-end">
-          <span
-            v-for="(time, timeIndex) in special.time_lines"
-            :key="timeIndex"
-          >
-            {{ time }}
-          </span>
-        </div>
-      </div>
-    </template>
-
-    <div
+  <div class="font-body-large flex flex-col gap-[4px] w-full">
+    <!-- สถานะปิดชั่วคราว -->
+    <div
+      v-if="props.openStatus === 'temporarily_closed'"
+      class="font-body-large-prominent text-error"
+    >
+      ปิดชั่วคราว
+    </div>
+
+    <!-- เวลาทำการปกติ -->
+    <div
+      v-for="(line, index) in lines"
+      :key="index"
+      class="flex items-start justify-between"
+    >
+      <span>{{ line.day }}</span>
+      <div class="flex flex-col items-end">
+        <span v-for="(time, timeIndex) in line.time_lines" :key="timeIndex">
+          {{ time }}
+        </span>
+      </div>
+    </div>
+
+    <!-- วันทำการพิเศษ -->
+    <template v-if="formattedSpecialDays.length">
+      <div class="font-body-large-prominent text-warning">วันทำการพิเศษ</div>
+      <div
+        v-for="(special, index) in formattedSpecialDays"
+        :key="index"
+        class="flex items-start justify-between text-warning"
+      >
+        <span>{{ special.date_label }}</span>
+        <div class="flex flex-col items-end">
+          <span
+            v-for="(time, timeIndex) in special.time_lines"
+            :key="timeIndex"
+          >
+            {{ time }}
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <div
       v-if="
   !lines.length && !formattedSpecialDays.length && props.openStatus !== 'temporarily_closed'
-"
-      class="text-cloud"
-    >
-      ไม่มีข้อมูลเวลาทำการ
-    </div>
-  </div>
+"
+      class="text-cloud"
+    >
+      ไม่มีข้อมูลเวลาทำการ
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,102 +1,102 @@
 <template>
-  <Card variant="outline">
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:circle-alert"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="props.item.description">{{ props.item.description }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:tag"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="categoryText">{{ categoryText }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:clock"
-          :size="20"
+  <Card variant="outline">
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:circle-alert"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="props.item.description">{{ props.item.description }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:tag"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="categoryText">{{ categoryText }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:clock"
+          :size="20"
           :class="[
   'shrink-0 mt-[2px]',
   props.item.open_status === 'temporarily_closed' ? 'text-destructive' : 'text-primary '
-]"
-        />
-        <div class="flex-1 min-w-0">
-          <CardOpeningHours
-            :items="props.item.opening_hours"
-            :special-days="props.item.special_days"
-            :open-status="props.item.open_status"
-          />
-        </div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:phone"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="props.item.phone">{{ props.item.phone }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
-      </div>
-      <template v-if="!props.item.owner_profile_id">
-        <div class="flex gap-[12px]">
-          <Icon
-            name="lucide:shield-check"
-            :size="20"
-            class="text-primary shrink-0 mt-[2px]"
-          />
-          <div class="font-body-large">หากคุณเป็นเจ้าของธุรกิจนี้</div>
-        </div>
-        <div
-          class="flex gap-[12px] hover:cursor-pointer"
-          @click="isOpenModalSuggestEdit = true"
-        >
-          <Icon
-            name="lucide:square-pen"
-            :size="20"
-            class="text-primary shrink-0 mt-[2px]"
-          />
-          <div class="font-body-large">แนะนำให้แก้ไข</div>
-        </div>
-      </template>
-      <Divider />
-
-      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
-        <div
-          v-for="(linkItem, index) in socialLinks"
-          :key="index"
-          class="flex gap-[12px] items-center cursor-pointer hover:underline"
-          @click="onClickLink(linkItem.link)"
-        >
-          <Icon
-            :name="`pukaad-social:${linkItem.name}`"
-            :size="20"
-            class="shrink-0"
-          />
-          <span class="truncate">{{ linkItem.link }}</span>
-        </div>
-      </div>
-      <div v-else class="flex gap-[12px] items-center">
-        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
-      </div>
-    </div>
-    <ModalSuggestEditPlace
-      v-if="!props.item.owner_profile_id"
-      v-model="isOpenModalSuggestEdit"
-      :item="props.item"
-    />
-  </Card>
+]"
+        />
+        <div class="flex-1 min-w-0">
+          <CardOpeningHours
+            :items="props.item.opening_hours"
+            :special-days="props.item.special_days"
+            :open-status="props.item.open_status"
+          />
+        </div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:phone"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="props.item.phone">{{ props.item.phone }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
+      </div>
+      <template v-if="!props.item.owner_profile_id">
+        <div class="flex gap-[12px]">
+          <Icon
+            name="lucide:shield-check"
+            :size="20"
+            class="text-primary shrink-0 mt-[2px]"
+          />
+          <div class="font-body-large">หากคุณเป็นเจ้าของธุรกิจนี้</div>
+        </div>
+        <div
+          class="flex gap-[12px] hover:cursor-pointer"
+          @click="isOpenModalSuggestEdit = true"
+        >
+          <Icon
+            name="lucide:square-pen"
+            :size="20"
+            class="text-primary shrink-0 mt-[2px]"
+          />
+          <div class="font-body-large">แนะนำให้แก้ไข</div>
+        </div>
+      </template>
+      <Divider />
+
+      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
+        <div
+          v-for="(linkItem, index) in socialLinks"
+          :key="index"
+          class="flex gap-[12px] items-center cursor-pointer hover:underline"
+          @click="onClickLink(linkItem.link)"
+        >
+          <Icon
+            :name="`pukaad-social:${linkItem.name}`"
+            :size="20"
+            class="shrink-0"
+          />
+          <span class="truncate">{{ linkItem.link }}</span>
+        </div>
+      </div>
+      <div v-else class="flex gap-[12px] items-center">
+        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
+      </div>
+    </div>
+    <ModalSuggestEditPlace
+      v-if="!props.item.owner_profile_id"
+      v-model="isOpenModalSuggestEdit"
+      :item="props.item"
+    />
+  </Card>
 </template>
 
 <script setup>

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

@@ -1,57 +1,57 @@
 <template>
-  <div class="flex gap-[16px] items-start justify-between" @click="onClickCard">
-    <div class="flex gap-[8px] cursor-pointer flex-1 min-w-0">
-      <Image
-        v-if="modelValue?.cover_image"
-        :src="modelValue.cover_image"
-        width="114"
-        height="64"
-        class="rounded-[4px] object-cover flex-shrink-0"
-      />
-      <div
-        v-else
-        class="w-[114px] h-[64px] bg-mercury flex items-center justify-center rounded-[4px] flex-shrink-0"
-      >
-        <Icon name="fa6-solid:map-location-dot" size="24" class="text-gray" />
-      </div>
-
-      <div class="flex flex-col gap-[4px] min-w-0">
-        <div class="font-body-large-prominent truncate">
-          {{ modelValue?.name }}
-        </div>
-        <div
-          class="flex gap-[4px] items-center text-gray font-body-small flex-wrap"
-        >
-          <InputRating
-            :size="10"
-            readonly
-            :model-value="modelValue?.rating || 0"
-          />
-          <div>
-            {{ $convert.convertNumber(modelValue?.review_count || 0) }}
-          </div>
-          <div>•</div>
-          <div>
-            ถูกใจ {{ $convert.convertNumber(modelValue?.like_count || 0) }}
-          </div>
-          <div>•</div>
-          <div class="truncate">{{ modelValue?.address }}</div>
-        </div>
-        <div class="font-body-small text-gray line-clamp-2">
-          {{ modelValue?.description }}
-        </div>
-      </div>
-    </div>
-
-    <Button
-      :variant="modelValue?.is_liked ? 'default' : 'outline'"
-      :color="modelValue?.is_liked ? 'default' : 'primary'"
-      class="flex-shrink-0"
-      @click.stop="onLikeToggle"
-    >
-      {{ modelValue?.is_liked ? "\u0E16\u0E39\u0E01\u0E43\u0E08\u0E41\u0E25\u0E49\u0E27" : "\u0E16\u0E39\u0E01\u0E43\u0E08" }}
-    </Button>
-  </div>
+  <div class="flex gap-[16px] items-start justify-between" @click="onClickCard">
+    <div class="flex gap-[8px] cursor-pointer flex-1 min-w-0">
+      <Image
+        v-if="modelValue?.cover_image"
+        :src="modelValue.cover_image"
+        width="114"
+        height="64"
+        class="rounded-[4px] object-cover flex-shrink-0"
+      />
+      <div
+        v-else
+        class="w-[114px] h-[64px] bg-mercury flex items-center justify-center rounded-[4px] flex-shrink-0"
+      >
+        <Icon name="fa6-solid:map-location-dot" size="24" class="text-gray" />
+      </div>
+
+      <div class="flex flex-col gap-[4px] min-w-0">
+        <div class="font-body-large-prominent truncate">
+          {{ modelValue?.name }}
+        </div>
+        <div
+          class="flex gap-[4px] items-center text-gray font-body-small flex-wrap"
+        >
+          <InputRating
+            :size="10"
+            readonly
+            :model-value="modelValue?.rating || 0"
+          />
+          <div>
+            {{ $convert.convertNumber(modelValue?.review_count || 0) }}
+          </div>
+          <div>•</div>
+          <div>
+            ถูกใจ {{ $convert.convertNumber(modelValue?.like_count || 0) }}
+          </div>
+          <div>•</div>
+          <div class="truncate">{{ modelValue?.address }}</div>
+        </div>
+        <div class="font-body-small text-gray line-clamp-2">
+          {{ modelValue?.description }}
+        </div>
+      </div>
+    </div>
+
+    <Button
+      :variant="modelValue?.is_liked ? 'default' : 'outline'"
+      :color="modelValue?.is_liked ? 'default' : 'primary'"
+      class="flex-shrink-0"
+      @click.stop="onLikeToggle"
+    >
+      {{ modelValue?.is_liked ? "\u0E16\u0E39\u0E01\u0E43\u0E08\u0E41\u0E25\u0E49\u0E27" : "\u0E16\u0E39\u0E01\u0E43\u0E08" }}
+    </Button>
+  </div>
 </template>
 
 <script setup>