pukaad-ui-lib 1.370.0 → 1.372.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.370.0",
+  "version": "1.372.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -0,0 +1,16 @@
+import type { OpeningHour, SpecialDay } from "#pukaad-ui/runtime/utils/opening-hours";
+export type { OpeningHour, SpecialDay, TimeSlot, } from "#pukaad-ui/runtime/utils/opening-hours";
+type __VLS_Props = {
+    items?: OpeningHour[];
+    specialDays?: SpecialDay[];
+    openStatus?: string;
+    filterUpcomingSpecialDays?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    items: OpeningHour[];
+    specialDays: SpecialDay[];
+    openStatus: string;
+    filterUpcomingSpecialDays: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,90 @@
+<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
+      v-if="
+  !lines.length && !formattedSpecialDays.length && props.openStatus !== 'temporarily_closed'
+"
+      class="text-cloud"
+    >
+      ไม่มีข้อมูลเวลาทำการ
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import dayjs from "#pukaad-ui/runtime/utils/dayjs";
+import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
+import {
+  toDayLines,
+  getTimeLines
+} from "#pukaad-ui/runtime/utils/opening-hours";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  specialDays: { type: Array, required: false, default: () => [] },
+  openStatus: { type: String, required: false, default: void 0 },
+  filterUpcomingSpecialDays: { type: Boolean, required: false, default: true }
+});
+const { convertDate } = useConvert();
+const toArray = (value) => Array.isArray(value) ? value : [];
+const lines = computed(() => toDayLines(props.items));
+const sortedSpecialDays = computed(() => {
+  const allSpecial = toArray(props.specialDays).filter(
+    (s) => !!s?.date
+  );
+  if (!props.filterUpcomingSpecialDays) return allSpecial;
+  const today = dayjs().startOf("day");
+  const maxDate = today.add(30, "day").endOf("day");
+  return allSpecial.map((s) => ({ ...s, parsedDate: dayjs(s.date) })).filter((s) => s.parsedDate.isValid()).filter(
+    (s) => !s.parsedDate.isBefore(today) && !s.parsedDate.isAfter(maxDate)
+  ).sort((a, b) => a.parsedDate.valueOf() - b.parsedDate.valueOf());
+});
+const formattedSpecialDays = computed(
+  () => sortedSpecialDays.value.map((s) => ({
+    date_label: convertDate(s.date),
+    time_lines: getTimeLines(s.isOpen, s.timeSlots)
+  }))
+);
+</script>

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

@@ -0,0 +1,16 @@
+import type { OpeningHour, SpecialDay } from "#pukaad-ui/runtime/utils/opening-hours";
+export type { OpeningHour, SpecialDay, TimeSlot, } from "#pukaad-ui/runtime/utils/opening-hours";
+type __VLS_Props = {
+    items?: OpeningHour[];
+    specialDays?: SpecialDay[];
+    openStatus?: string;
+    filterUpcomingSpecialDays?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    items: OpeningHour[];
+    specialDays: SpecialDay[];
+    openStatus: string;
+    filterUpcomingSpecialDays: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -30,50 +30,13 @@
   props.item.open_status === 'temporarily_closed' ? 'text-destructive' : 'text-primary '
 ]"
         />
-        <div v-if="businessHours.length" class="flex flex-col gap-[4px] flex-1">
-          <div
-            v-if="props.item.open_status === 'temporarily_closed'"
-            class="font-body-large-prominent text-error"
-          >
-            ปิดชั่วคราว
-          </div>
-          <div
-            v-for="(hour, index) in businessHours"
-            :key="index"
-            class="flex items-start justify-between"
-          >
-            <span>{{ hour.day }}</span>
-            <div class="flex flex-col items-end">
-              <span v-for="(line, li) in hour.time_lines" :key="li">{{
-                line
-              }}</span>
-            </div>
-          </div>
-
-          <template v-if="upcomingSpecialDays.length">
-            <div class="font-body-large-prominent text-warning">
-              วันทำการพิเศษ
-            </div>
-            <div
-              v-for="(special, index) in upcomingSpecialDays"
-              :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="(line, li) in special.time_lines" :key="li">{{
-                  line
-                }}</span>
-              </div>
-            </div>
-          </template>
-        </div>
-        <div v-else-if="props.item.open_status === 'temporarily_closed'">
-          <div class="font-body-large-prominent text-destructive">
-            ปิดชั่วคราว
-          </div>
+        <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 v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
       </div>
 
       <div class="flex gap-[12px]">
@@ -85,25 +48,27 @@
         <div v-if="props.item.phone">{{ props.item.phone }}</div>
         <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
       </div>
-      <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 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]">
@@ -127,6 +92,7 @@
       </div>
     </div>
     <ModalSuggestEditPlace
+      v-if="!props.item.owner_profile_id"
       v-model="isOpenModalSuggestEdit"
       :item="props.item"
     />
@@ -153,35 +119,12 @@ const toArray = (value) => Array.isArray(value) ? value : [];
 const categoryText = computed(
   () => props.item.categories?.map((c) => c.category_name).join(", ") ?? ""
 );
-const getTimeLines = (isOpen, timeSlots, isAllDay) => {
-  if (!isOpen) return ["\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23"];
-  const slots = toArray(timeSlots);
-  if (isAllDay || slots.length === 0) return ["\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21."];
-  return slots.map((t) => `${t.start} - ${t.end} \u0E19.`);
-};
-const businessHours = computed(
-  () => toArray(props.item.opening_hours).filter((h) => !!h).map((h) => ({
-    day: DAY_NAMES[h.day] ?? "",
-    time_lines: getTimeLines(h.isOpen, h.timeSlots, h.isAllDay)
-  }))
-);
 const socialLinks = computed(
   () => toArray(props.item.contact_channels).filter((ch) => ch?.value).map((ch) => ({
     name: ch.channel_type ?? "link",
     link: ch.value
   }))
 );
-const sortedSpecialDays = computed(() => {
-  const today = dayjs().startOf("day");
-  const maxDate = today.add(30, "day").endOf("day");
-  return toArray(props.item.special_days).filter((s) => !!s?.date).map((s) => ({ ...s, date: dayjs(s.date) })).filter((s) => s.date.isValid()).filter((s) => !s.date.isBefore(today) && !s.date.isAfter(maxDate)).sort((a, b) => a.date.valueOf() - b.date.valueOf());
-});
-const upcomingSpecialDays = computed(
-  () => sortedSpecialDays.value.map((s) => ({
-    date_label: s.date.locale("th").format("D MMMM BBBB"),
-    time_lines: getTimeLines(s.isOpen, s.timeSlots)
-  }))
-);
 const onClickLink = (link) => {
   window.open(link, "_blank");
 };

package/dist/runtime/components/card/card-profile-header.d.vue.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-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;
-    disabledPadding: boolean;
     state: string;
+    disabledPadding: boolean;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

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;
-    disabledPadding: boolean;
     state: string;
+    disabledPadding: boolean;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

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

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-image-place.d.vue.ts

@@ -15,9 +15,9 @@ 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<{}>, {
     title: string;
-    state: "personal" | "office" | "business";
     photos: MediaItem[];
     videos: MediaItem[];
+    state: "personal" | "office" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-image-place.vue.d.ts

@@ -15,9 +15,9 @@ 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<{}>, {
     title: string;
-    state: "personal" | "office" | "business";
     photos: MediaItem[];
     videos: MediaItem[];
+    state: "personal" | "office" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -48,11 +48,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    options: AutocompleteOption[] | string[] | number[];
     description: string;
     labelKey: string;
     placeholder: string;
     limit: number;
+    options: AutocompleteOption[] | string[] | number[];
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -48,11 +48,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    options: AutocompleteOption[] | string[] | number[];
     description: string;
     labelKey: string;
     placeholder: string;
     limit: number;
+    options: AutocompleteOption[] | string[] | number[];
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    options: InputSelectItem[];
     placeholder: string;
     limit: number;
+    options: InputSelectItem[];
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    options: InputSelectItem[];
     placeholder: string;
     limit: number;
+    options: InputSelectItem[];
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-typed-field.d.vue.ts

@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     required: boolean;
-    options: import("../../../types/components/input/input-select.js").InputSelectItem[];
     limit: number;
+    options: import("../../../types/components/input/input-select.js").InputSelectItem[];
     showCounter: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/input/input-typed-field.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     required: boolean;
-    options: import("../../../types/components/input/input-select.js").InputSelectItem[];
     limit: number;
+    options: import("../../../types/components/input/input-select.js").InputSelectItem[];
     showCounter: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/modal/modal-media-view.d.vue.ts

@@ -23,8 +23,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     items: CarouselItem[];
-    startIndex: number;
     uploaderLabel: string;
+    startIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-media-view.vue.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     items: CarouselItem[];
-    startIndex: number;
     uploaderLabel: string;
+    startIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/suggest-edit-place/modal-suggest-edit-place.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal class="w-[512px]" v-model="isOpen" :loading="false" @submit="onSubmit">
+  <Modal class="w-[512px]" v-model="isOpen" :loading="isSubmitting" @submit="onSubmit">
     <template #header>
       <div v-if="activeField === 'list'" class="font-title-medium-prominent">
         แนะนำให้แก้ไข
@@ -396,79 +396,164 @@ const openLinkEditField = (channel) => {
 const cancelEdit = () => {
   activeField.value = "list";
 };
-const onSubmit = () => {
-  if (activeField.value === "place_name") {
-    emit("submit-field", {
-      field: "place_name",
-      editType: editType.value,
-      value: newName.value,
-      localizedNames: localizedNames.value
-    });
-  }
-  if (activeField.value === "address") {
-    emit("submit-field", {
-      field: "address",
-      editType: addressEditType.value,
-      addressValue: addressValue.value,
-      latLng: addressLatLng.value
-    });
-  }
-  if (activeField.value === "category") {
-    emit("submit-field", {
-      field: "category",
-      editType: categoryEditType.value,
-      categories: categories.value
-    });
-  }
-  if (activeField.value === "description") {
-    emit("submit-field", {
-      field: "description",
-      editType: descriptionEditType.value,
-      value: descriptionValue.value
-    });
-  }
-  if (activeField.value === "dateopening") {
-    emit("submit-field", {
-      field: "dateopening",
-      editType: dateOpeningEditType.value,
-      openingHours: newOpeningHours.value,
-      specialDays: newSpecialDays.value
-    });
-  }
-  if (activeField.value === "phone") {
-    emit("submit-field", {
-      field: "phone",
-      value: phoneValue.value
-    });
+const isSubmitting = ref(false);
+const buildSuggestEditBody = () => {
+  switch (activeField.value) {
+    case "place_name":
+      return {
+        topic_key: "name",
+        edit_type: editType.value,
+        name: newName.value,
+        localized_names: localizedNames.value.filter((r) => r.editType === "new" && r.newName.trim()).map((r) => ({ language: r.language, name: r.newName }))
+      };
+    case "address":
+      return {
+        topic_key: "address",
+        edit_type: addressEditType.value,
+        address: addressValue.value,
+        latLng: addressLatLng.value ?? void 0
+      };
+    case "category":
+      return {
+        topic_key: "category",
+        edit_type: categoryEditType.value,
+        categories: categories.value
+      };
+    case "description":
+      return {
+        topic_key: "description",
+        edit_type: descriptionEditType.value,
+        description: descriptionValue.value
+      };
+    case "dateopening":
+      return {
+        topic_key: "opening_hours",
+        edit_type: dateOpeningEditType.value,
+        opening_hours: newOpeningHours.value,
+        special_days: newSpecialDays.value
+      };
+    case "phone":
+      return {
+        topic_key: "phone",
+        edit_type: "add",
+        value: phoneValue.value
+      };
+    case "phone_edit":
+      return {
+        topic_key: "phone",
+        edit_type: phoneEditType.value,
+        target_value: editingPhone.value,
+        value: editPhoneValue.value
+      };
+    case "link":
+      return {
+        topic_key: "contact_channels",
+        edit_type: "add",
+        contact_channels: newContactChannels.value
+      };
+    case "link_edit":
+      return {
+        topic_key: "contact_channels",
+        edit_type: linkEditType.value,
+        target_channel_id: editingChannel.value?.id,
+        target_value: editingChannel.value?.value,
+        value: editChannelValue.value
+      };
+    default:
+      return null;
   }
-  if (activeField.value === "phone_edit") {
-    emit("submit-field", {
-      field: "phone_edit",
-      currentPhone: editingPhone.value,
-      editType: phoneEditType.value,
-      value: editPhoneValue.value
+};
+const onSubmit = async () => {
+  const body = buildSuggestEditBody();
+  if (!body || isSubmitting.value) return;
+  isSubmitting.value = true;
+  try {
+    await api(`/suggest-places/${props.item.id}/suggest-edits`, {
+      method: "post",
+      body
     });
-  }
-  if (activeField.value === "link") {
-    emit("submit-field", {
-      field: "link",
-      channels: newContactChannels.value
+    if (activeField.value === "place_name") {
+      emit("submit-field", {
+        field: "place_name",
+        editType: editType.value,
+        value: newName.value,
+        localizedNames: localizedNames.value
+      });
+    }
+    if (activeField.value === "address") {
+      emit("submit-field", {
+        field: "address",
+        editType: addressEditType.value,
+        addressValue: addressValue.value,
+        latLng: addressLatLng.value
+      });
+    }
+    if (activeField.value === "category") {
+      emit("submit-field", {
+        field: "category",
+        editType: categoryEditType.value,
+        categories: categories.value
+      });
+    }
+    if (activeField.value === "description") {
+      emit("submit-field", {
+        field: "description",
+        editType: descriptionEditType.value,
+        value: descriptionValue.value
+      });
+    }
+    if (activeField.value === "dateopening") {
+      emit("submit-field", {
+        field: "dateopening",
+        editType: dateOpeningEditType.value,
+        openingHours: newOpeningHours.value,
+        specialDays: newSpecialDays.value
+      });
+    }
+    if (activeField.value === "phone") {
+      emit("submit-field", {
+        field: "phone",
+        value: phoneValue.value
+      });
+    }
+    if (activeField.value === "phone_edit") {
+      emit("submit-field", {
+        field: "phone_edit",
+        currentPhone: editingPhone.value,
+        editType: phoneEditType.value,
+        value: editPhoneValue.value
+      });
+    }
+    if (activeField.value === "link") {
+      emit("submit-field", {
+        field: "link",
+        channels: newContactChannels.value
+      });
+    }
+    if (activeField.value === "link_edit") {
+      emit("submit-field", {
+        field: "link_edit",
+        currentChannel: editingChannel.value,
+        editType: linkEditType.value,
+        value: editChannelValue.value
+      });
+    }
+    activeField.value = "list";
+    $alert.show({
+      type: "success",
+      title: "\u0E02\u0E2D\u0E1A\u0E04\u0E38\u0E13\u0E17\u0E35\u0E48\u0E41\u0E08\u0E49\u0E07\u0E43\u0E2B\u0E49\u0E40\u0E23\u0E32\u0E17\u0E23\u0E32\u0E1A !",
+      description: "\u0E40\u0E23\u0E32\u0E08\u0E30\u0E43\u0E0A\u0E49\u0E40\u0E27\u0E25\u0E32\u0E2A\u0E2D\u0E07\u0E2A\u0E32\u0E21\u0E27\u0E31\u0E19\u0E43\u0E19\u0E01\u0E32\u0E23\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13"
     });
-  }
-  if (activeField.value === "link_edit") {
-    emit("submit-field", {
-      field: "link_edit",
-      currentChannel: editingChannel.value,
-      editType: linkEditType.value,
-      value: editChannelValue.value
+  } catch (error) {
+    console.error(error);
+    $alert.show({
+      type: "error",
+      title: "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
+      description: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07 !"
     });
+  } finally {
+    isSubmitting.value = false;
   }
-  activeField.value = "list";
-  $alert.show({
-    type: "success",
-    title: "\u0E02\u0E2D\u0E1A\u0E04\u0E38\u0E13\u0E17\u0E35\u0E48\u0E41\u0E08\u0E49\u0E07\u0E43\u0E2B\u0E49\u0E40\u0E23\u0E32\u0E17\u0E23\u0E32\u0E1A !",
-    description: "\u0E40\u0E23\u0E32\u0E08\u0E30\u0E43\u0E0A\u0E49\u0E40\u0E27\u0E25\u0E32\u0E2A\u0E2D\u0E07\u0E2A\u0E32\u0E21\u0E27\u0E31\u0E19\u0E43\u0E19\u0E01\u0E32\u0E23\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13"
-  });
 };
 const canSubmit = computed(() => {
   switch (activeField.value) {

package/dist/runtime/components/modal/suggest-edit-place/place-dateopening.vue

@@ -6,51 +6,11 @@
     </div>
     <div class="flex flex-col gap-[8px]">
       <div class="font-body-large-prominent text-gray">วัน เวลาทำการเดิม</div>
-      <div v-if="businessHours.length" class="flex flex-col gap-[4px]">
-        <div
-          v-if="props.currentOpenStatus === 'temporarily_closed'"
-          class="font-body-large-prominent text-error"
-        >
-          ปิดชั่วคราว
-        </div>
-        <div
-          v-for="(hour, index) in businessHours"
-          :key="index"
-          class="flex items-start justify-between font-body-large"
-        >
-          <span>{{ hour.day }}</span>
-          <div class="flex flex-col items-end">
-            <span v-for="(line, li) in hour.time_lines" :key="li">{{
-              line
-            }}</span>
-          </div>
-        </div>
-
-        <template v-if="upcomingSpecialDays.length">
-          <div class="font-body-large-prominent text-warning">
-            วันทำการพิเศษ
-          </div>
-          <div
-            v-for="(special, index) in upcomingSpecialDays"
-            :key="index"
-            class="flex items-start justify-between text-warning font-body-large"
-          >
-            <span>{{ special.date_label }}</span>
-            <div class="flex flex-col items-end">
-              <span v-for="(line, li) in special.time_lines" :key="li">{{
-                line
-              }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div
-        v-else-if="props.currentOpenStatus === 'temporarily_closed'"
-        class="font-body-large-prominent text-destructive"
-      >
-        ปิดชั่วคราว
-      </div>
-      <div v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
+      <CardOpeningHours
+        :items="props.currentOpeningHours"
+        :special-days="props.currentSpecialDays"
+        :open-status="props.currentOpenStatus"
+      />
     </div>
 
     <InputSelect
@@ -92,39 +52,6 @@ const editTypeOptions = [
   { label: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E2B\u0E21\u0E48", value: "new" },
   { label: "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A \u0E41\u0E15\u0E48\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07", value: "incorrect" }
 ];
-const DAY_NAMES = [
-  "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C",
-  "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C",
-  "\u0E27\u0E31\u0E19\u0E2D\u0E31\u0E07\u0E04\u0E32\u0E23",
-  "\u0E27\u0E31\u0E19\u0E1E\u0E38\u0E18",
-  "\u0E27\u0E31\u0E19\u0E1E\u0E24\u0E2B\u0E31\u0E2A\u0E1A\u0E14\u0E35",
-  "\u0E27\u0E31\u0E19\u0E28\u0E38\u0E01\u0E23\u0E4C",
-  "\u0E27\u0E31\u0E19\u0E40\u0E2A\u0E32\u0E23\u0E4C"
-];
-const toArray = (value) => Array.isArray(value) ? value : [];
-const getTimeLines = (isOpen, timeSlots, isAllDay) => {
-  if (!isOpen) return ["\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23"];
-  const slots = toArray(timeSlots);
-  if (isAllDay || slots.length === 0) return ["\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21."];
-  return slots.map((t) => `${t.start} - ${t.end} \u0E19.`);
-};
-const businessHours = computed(
-  () => toArray(props.currentOpeningHours).filter((h) => !!h).map((h) => ({
-    day: DAY_NAMES[h.day] ?? "",
-    time_lines: getTimeLines(h.isOpen, h.timeSlots, h.isAllDay)
-  }))
-);
-const sortedSpecialDays = computed(() => {
-  const today = dayjs().startOf("day");
-  const maxDate = today.add(30, "day").endOf("day");
-  return toArray(props.currentSpecialDays).filter((s) => !!s?.date).map((s) => ({ ...s, date: dayjs(s.date) })).filter((s) => s.date.isValid()).filter((s) => !s.date.isBefore(today) && !s.date.isAfter(maxDate)).sort((a, b) => a.date.valueOf() - b.date.valueOf());
-});
-const upcomingSpecialDays = computed(
-  () => sortedSpecialDays.value.map((s) => ({
-    date_label: s.date.locale("th").format("D MMMM BBBB"),
-    time_lines: getTimeLines(s.isOpen, s.timeSlots)
-  }))
-);
 const isNewOpeningHoursCompleted = computed(
   () => Array.isArray(newOpeningHours.value) && newOpeningHours.value.some((s) => s.isOpen)
 );

package/dist/runtime/components/timeline.d.vue.ts

@@ -1,9 +1,18 @@
+import type { OpeningHour, SpecialDay } from "#pukaad-ui/runtime/components/card/card-opening-hours.vue";
 export interface TimelineItem {
     id?: string | number;
     avatar?: string;
     name?: string;
     time?: string | Date;
     description?: string;
+    value?: string;
+    suggested_value?: string;
+    hours?: OpeningHour[];
+    opening_hours?: OpeningHour[];
+    suggested_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
+    suggested_special_days?: SpecialDay[];
+    [key: string]: any;
 }
 type __VLS_Props = {
     items: TimelineItem[];
@@ -11,9 +20,14 @@ type __VLS_Props = {
 declare var __VLS_1: {
     item: TimelineItem;
     index: number;
+}, __VLS_8: {
+    item: TimelineItem;
+    index: number;
 };
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/timeline.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col w-full">
     <div
       v-for="(item, index) in props.items"
       :key="item.id ?? index"
-      class="flex gap-[8px]"
+      class="flex gap-[8px] w-full"
     >
       <!-- dot + connecting line (โครงของ component เอง) -->
       <div class="flex flex-col items-center w-[8px]">
@@ -15,22 +15,40 @@
 
       <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
       <div
-        class="flex flex-col gap-[8px]"
+        class="flex flex-col gap-[8px] flex-1 min-w-0"
         :class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
       >
         <slot name="content" :item="item" :index="index">
-          <div class="flex gap-[8px]">
+          <div class="flex gap-[8px] w-full">
             <Avatar :src="item.avatar" :alt="item.name" :size="30" />
-            <div class="flex flex-col gap-[8px]">
+            <div class="flex flex-col gap-[8px] flex-1 min-w-0">
               <div class="flex flex-col gap-[4px]">
                 <span class="font-body-large text-gray">{{ item.name }}</span>
-                <span class="font-body-small text-gray"
-                  >{{ convertDateTime(item.time) }} น.</span
+                <span
+                  v-if="item.time"
+                  class="font-body-small text-gray"
                 >
+                  {{ convertDateTime(item.time) }} น.
+                </span>
               </div>
-              <p class="font-body-large text-gray">
-                {{ item.description }}
-              </p>
+              <slot name="description" :item="item" :index="index">
+                <CardOpeningHours
+                  v-if="
+  item.opening_hours || item.suggested_hours || item.hours
+"
+                  :items="
+  item.opening_hours || item.suggested_hours || item.hours
+"
+                  :special-days="
+  item.special_days || item.suggested_special_days
+"
+                  :open-status="item.open_status"
+                  class="text-gray w-full"
+                />
+                <p v-else class="font-body-large text-gray">
+                  {{ item.description }}
+                </p>
+              </slot>
             </div>
           </div>
         </slot>
@@ -41,6 +59,7 @@
 
 <script setup>
 import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
+import CardOpeningHours from "#pukaad-ui/runtime/components/card/card-opening-hours.vue";
 const props = defineProps({
   items: { type: Array, required: true }
 });

package/dist/runtime/components/timeline.vue.d.ts

@@ -1,9 +1,18 @@
+import type { OpeningHour, SpecialDay } from "#pukaad-ui/runtime/components/card/card-opening-hours.vue";
 export interface TimelineItem {
     id?: string | number;
     avatar?: string;
     name?: string;
     time?: string | Date;
     description?: string;
+    value?: string;
+    suggested_value?: string;
+    hours?: OpeningHour[];
+    opening_hours?: OpeningHour[];
+    suggested_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
+    suggested_special_days?: SpecialDay[];
+    [key: string]: any;
 }
 type __VLS_Props = {
     items: TimelineItem[];
@@ -11,9 +20,14 @@ type __VLS_Props = {
 declare var __VLS_1: {
     item: TimelineItem;
     index: number;
+}, __VLS_8: {
+    item: TimelineItem;
+    index: number;
 };
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/utils/opening-hours.d.ts

@@ -0,0 +1,21 @@
+export interface TimeSlot {
+    start: string;
+    end: string;
+}
+export interface OpeningHour {
+    day: number;
+    isOpen: boolean;
+    isAllDay?: boolean;
+    timeSlots?: TimeSlot[];
+}
+export interface SpecialDay {
+    date: string | Date;
+    isOpen: boolean;
+    timeSlots?: TimeSlot[];
+}
+export declare const DAY_NAMES: string[];
+export declare const getTimeLines: (isOpen: boolean, timeSlots?: TimeSlot[], isAllDay?: boolean) => string[];
+export declare const toDayLines: (hours?: OpeningHour[]) => {
+    day: string;
+    time_lines: string[];
+}[];

package/dist/runtime/utils/opening-hours.js

@@ -0,0 +1,20 @@
+export const DAY_NAMES = [
+  "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C",
+  "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C",
+  "\u0E27\u0E31\u0E19\u0E2D\u0E31\u0E07\u0E04\u0E32\u0E23",
+  "\u0E27\u0E31\u0E19\u0E1E\u0E38\u0E18",
+  "\u0E27\u0E31\u0E19\u0E1E\u0E24\u0E2B\u0E31\u0E2A\u0E1A\u0E14\u0E35",
+  "\u0E27\u0E31\u0E19\u0E28\u0E38\u0E01\u0E23\u0E4C",
+  "\u0E27\u0E31\u0E19\u0E40\u0E2A\u0E32\u0E23\u0E4C"
+];
+const toArray = (value) => Array.isArray(value) ? value : [];
+export const getTimeLines = (isOpen, timeSlots, isAllDay) => {
+  if (!isOpen) return ["\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23"];
+  const slots = toArray(timeSlots);
+  if (isAllDay || slots.length === 0) return ["\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21."];
+  return slots.map((t) => `${t.start} - ${t.end} \u0E19.`);
+};
+export const toDayLines = (hours) => toArray(hours).filter((h) => !!h).map((h) => ({
+  day: DAY_NAMES[h.day] ?? "",
+  time_lines: getTimeLines(h.isOpen, h.timeSlots, h.isAllDay)
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.370.0",
+  "version": "1.372.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",