pukaad-ui-lib 1.459.0 → 1.461.0

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

@@ -1,49 +1,49 @@
 <template>
-  <!-- vertical: กล่องไฟล์ในช่องอัปโหลด (Input - File) -->
-  <div
-    v-if="isVertical"
+  <!-- vertical: กล่องไฟล์ในช่องอัปโหลด (Input - File) -->
+  <div
+    v-if="isVertical"
     :class="
   cn(
     'bg-white border border-mercury rounded-[6px] size-[100px] p-[8px] flex flex-col items-center justify-center gap-[8px] cursor-pointer',
     props.class
   )
-"
-    :title="props.fileName"
-  >
-    <div class="size-[32px] shrink-0 flex items-center justify-center">
-      <Icon :name="fileIcon" class="w-[24px] h-[32px]" />
-    </div>
-    <span class="font-body-small text-black text-center w-full truncate">
-      {{ props.fileName }}
-    </span>
-  </div>
-
-  <!-- horizontal: การ์ดไฟล์แนบ (Card FDF Chat) -->
-  <div
-    v-else
+"
+    :title="props.fileName"
+  >
+    <div class="size-[32px] shrink-0 flex items-center justify-center">
+      <Icon :name="fileIcon" class="w-[24px] h-[32px]" />
+    </div>
+    <span class="font-body-small text-black text-center w-full truncate">
+      {{ props.fileName }}
+    </span>
+  </div>
+
+  <!-- horizontal: การ์ดไฟล์แนบ (Card FDF Chat) -->
+  <div
+    v-else
     :class="
   cn(
     'bg-white shadow-sm flex items-center gap-[8px] p-[8px] rounded-[8px] w-fit cursor-pointer',
     props.class
   )
-"
-    :title="props.fileName"
-  >
-    <div class="size-[40px] shrink-0 flex items-center justify-center">
-      <Icon :name="fileIcon" class="w-[30px] h-[40px]" />
-    </div>
-
-    <div class="flex flex-col gap-[4px] items-start justify-center">
-      <span
-        class="font-body-medium-prominent text-black max-w-[300px] truncate"
-      >
-        {{ props.fileName }}
-      </span>
-      <span v-if="displaySize" class="font-body-small text-gray">
-        {{ displaySize }}
-      </span>
-    </div>
-  </div>
+"
+    :title="props.fileName"
+  >
+    <div class="size-[40px] shrink-0 flex items-center justify-center">
+      <Icon :name="fileIcon" class="w-[30px] h-[40px]" />
+    </div>
+
+    <div class="flex flex-col gap-[4px] items-start justify-center">
+      <span
+        class="font-body-medium-prominent text-black max-w-[300px] truncate"
+      >
+        {{ props.fileName }}
+      </span>
+      <span v-if="displaySize" class="font-body-small text-gray">
+        {{ displaySize }}
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup>

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,11 +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,88 +1,88 @@
 <template>
-  <div class="flex gap-[8px] items-center w-full min-w-0 contain-inline-size">
-    <template v-if="isPost">
-      <div
-        v-if="props.item.contentType === 'post-it'"
-        class="w-[40px] h-[40px] shrink-0 bg-info rounded-sm flex items-center justify-center"
-      >
-        <Icon name="fa6-solid:message" size="24" class="text-primary" />
-      </div>
-      <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>
 import { computed } from "vue";
+import CardColorPostIt from "../card-color-post-it.vue";
 const props = defineProps({
   item: { type: Object, required: true },
   selected: { type: Boolean, required: false, default: false },
@@ -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,11 +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>