pukaad-ui-lib 1.343.0 → 1.344.0

package/dist/module.json

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

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

@@ -16,11 +16,17 @@ export interface ContactChannel {
     channel_type: string;
     value: string;
 }
+export interface SpecialDay {
+    date: string | Date;
+    isOpen: boolean;
+    timeSlots?: TimeSlot[];
+}
 export interface PlaceDetailItem {
     description?: string;
     categories?: Category[];
     open_status?: string;
     opening_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
     phone?: string;
     contact_channels?: ContactChannel[];
 }

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

@@ -34,11 +34,27 @@
           <div
             v-for="(hour, index) in businessHours"
             :key="index"
-            class="flex items-center justify-between"
+            class="flex items-start justify-between"
           >
             <span>{{ hour.day }}</span>
-            <span>{{ hour.time_range }}</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 class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
       </div>
@@ -80,6 +96,7 @@
 
 <script setup>
 import { computed } from "vue";
+import dayjs from "#pukaad-ui/runtime/utils/dayjs";
 const DAY_NAMES = [
   "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C",
   "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C",
@@ -96,10 +113,16 @@ const toArray = (value) => Array.isArray(value) ? value : [];
 const categoryText = computed(
   () => toArray(props.item.categories).filter((c) => c?.category_name).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_range: !h.isOpen ? "\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23" : h.isAllDay ? "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21." : toArray(h.timeSlots).map((t) => `${t.start} - ${t.end}`).join(", ") || "\u0E40\u0E1B\u0E34\u0E14"
+    time_lines: getTimeLines(h.isOpen, h.timeSlots, h.isAllDay)
   }))
 );
 const socialLinks = computed(
@@ -108,6 +131,17 @@ const socialLinks = computed(
     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-place-detail.vue.d.ts

@@ -16,11 +16,17 @@ export interface ContactChannel {
     channel_type: string;
     value: string;
 }
+export interface SpecialDay {
+    date: string | Date;
+    isOpen: boolean;
+    timeSlots?: TimeSlot[];
+}
 export interface PlaceDetailItem {
     description?: string;
     categories?: Category[];
     open_status?: string;
     opening_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
     phone?: string;
     contact_channels?: ContactChannel[];
 }

package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue

@@ -228,6 +228,7 @@ const onSubmit = async () => {
         extra_phones: d.extraPhones ?? [],
         contact_channels: d.contactChannels ?? [],
         opening_hours: d.openingHours ?? null,
+        special_days: d.specialDays ?? null,
         categories: categoryIds,
         is_review: d.isReview ?? false,
         rating: d.rating ?? 0,

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.d.vue.ts

@@ -1,5 +1,6 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
 import type { LocalizedNameItem } from "#pukaad-ui/types/components/input/input-localized-name";
+import type { SpecialDaySchedule } from "#pukaad-ui/runtime/components/input/input-date-opening-special.vue";
 interface FileItem {
     file?: File;
     url: string;
@@ -23,6 +24,7 @@ export interface SuggestPlaceData {
     }[];
     description?: string;
     openingHours?: Record<string, unknown>;
+    specialDays?: SpecialDaySchedule[];
     phone?: string;
     extraPhones?: string[];
     isReview?: boolean;

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue

@@ -51,6 +51,11 @@
           name="openingHours"
           v-model="modelValue.openingHours"
         />
+        <InputDateOpeningSpecial
+          v-if="props.state === 'business' && isOpeningHoursCompleted"
+          name="specialDays"
+          v-model="modelValue.specialDays"
+        />
         <div class="flex flex-col gap-[8px]">
           <InputTextField
             name="phone"
@@ -189,6 +194,10 @@ const isAddressCompleted = computed(() => {
   const v = modelValue.address || {};
   return !!(v.province_id && v.amphur_id && v.tambon_id && v.zipcode);
 });
+const isOpeningHoursCompleted = computed(() => {
+  const hours = modelValue.openingHours;
+  return Array.isArray(hours) && hours.some((s) => s?.isOpen);
+});
 watch(
   () => modelValue.isReview,
   (newVal) => {

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue.d.ts

@@ -1,5 +1,6 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
 import type { LocalizedNameItem } from "#pukaad-ui/types/components/input/input-localized-name";
+import type { SpecialDaySchedule } from "#pukaad-ui/runtime/components/input/input-date-opening-special.vue";
 interface FileItem {
     file?: File;
     url: string;
@@ -23,6 +24,7 @@ export interface SuggestPlaceData {
     }[];
     description?: string;
     openingHours?: Record<string, unknown>;
+    specialDays?: SpecialDaySchedule[];
     phone?: string;
     extraPhones?: string[];
     isReview?: boolean;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-date-opening-special.d.vue.ts

@@ -0,0 +1,32 @@
+export interface SpecialDayTimeSlot {
+    start: string;
+    end: string;
+}
+export interface SpecialDaySchedule {
+    date: Date | undefined;
+    isOpen: boolean;
+    timeSlots: SpecialDayTimeSlot[];
+}
+export interface InputDateOpeningSpecialProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+}
+type __VLS_Props = InputDateOpeningSpecialProps;
+type __VLS_ModelProps = {
+    modelValue?: SpecialDaySchedule[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SpecialDaySchedule[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SpecialDaySchedule[]) => any) | undefined;
+}>, {
+    label: string;
+    name: string;
+    required: boolean;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-date-opening-special.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="flex flex-col gap-[4px]">
+    <label v-if="props.label" class="font-body-large-prominent text-gray">
+      {{ props.label }}
+      <span v-if="props.required" class="text-destructive">*</span>
+    </label>
+    <div
+      class="border-input relative flex w-full rounded-md border-[1px] bg-white px-[12px] py-[5px] gap-2 cursor-pointer"
+      @click="openModal"
+    >
+      <span
+        v-if="!isConfirmed"
+        class="flex-1 text-muted-foreground font-body-large"
+      >
+        {{ props.placeholder }}
+      </span>
+      <div v-else class="flex-1 flex flex-col gap-[4px]">
+        <div
+          v-for="(item, i) in modelValue"
+          :key="i"
+          class="flex justify-between font-body-large"
+        >
+          <span>{{ formatDate(item.date) }}</span>
+          <div class="text-right flex flex-col items-end gap-1">
+            <span v-if="!item.isOpen">หยุดทำการ</span>
+            <span v-else-if="item.timeSlots.length === 0">เปิดตลอด 24 ชม.</span>
+            <div v-else class="flex flex-col gap-1">
+              <span v-for="(slot, i) in item.timeSlots" :key="i"
+                >{{ slot.start }} - {{ slot.end }} น.</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <Icon
+        name="lucide:chevron-right"
+        :size="16"
+        class="shrink-0 self-center"
+      />
+    </div>
+  </div>
+
+  <Modal
+    v-model="isOpenModal"
+    title="วันทำการพิเศษ"
+    @close="closeModal"
+    class="w-[512px]"
+    :content-max-height="450"
+  >
+    <div class="flex flex-col gap-[24px]">
+      <div
+        v-for="(day, dayIndex) in workingDays"
+        :key="day.id"
+        class="flex flex-col gap-[16px]"
+      >
+        <InputDatePicker
+          :name="`special-date-${day.id}`"
+          v-model="day.date"
+          label="วันที่"
+          placeholder="เลือกวันที่"
+          :min-value="today"
+        />
+
+        <div class="flex gap-6">
+          <InputCheckbox
+            label="เปิดตลอด 24 ชม."
+            :model-value="day.isAllDay"
+            @update:model-value="(v) => setAllDay(day, v)"
+          />
+          <InputCheckbox
+            label="หยุดทำการ"
+            :model-value="day.isClosed"
+            @update:model-value="(v) => setClosed(day, v)"
+          />
+        </div>
+
+        <div
+          v-if="!day.isClosed && !day.isAllDay"
+          class="flex flex-col gap-[8px]"
+        >
+          <div
+            v-for="(timeSlot, slotIndex) in day.timeSlots"
+            :key="timeSlot.id"
+            class="flex items-end justify-between gap-2"
+          >
+            <InputSelect
+              :name="`special-time-start-${timeSlot.id}`"
+              v-model="timeSlot.start"
+              label="เวลาเปิด"
+              :options="timeOptions"
+              placeholder="00:00"
+            />
+            <InputSelect
+              :name="`special-time-end-${timeSlot.id}`"
+              v-model="timeSlot.end"
+              label="เวลาปิด"
+              :options="timeOptions"
+              placeholder="00:00"
+            />
+
+            <PickerOptionMenu
+              :items="getTimeSlotMenuItems(dayIndex, slotIndex)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Button
+        variant="text"
+        color="primary"
+        size="sm"
+        class="justify-start"
+        @click="addDay"
+      >
+        <Icon name="lucide:plus" :size="16" />
+        เพิ่มวันที่
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <Button color="primary" :disabled="!isScheduleValid" @click="saveDays"
+          >บันทึก</Button
+        >
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import dayjs from "#pukaad-ui/runtime/utils/dayjs";
+const props = defineProps({
+  name: { type: String, required: false, default: "date-opening-special" },
+  label: { type: String, required: false, default: "\u0E27\u0E31\u0E19\u0E17\u0E33\u0E01\u0E32\u0E23\u0E1E\u0E34\u0E40\u0E28\u0E29" },
+  placeholder: { type: String, required: false, default: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E27\u0E31\u0E19 \u0E40\u0E27\u0E25\u0E32\u0E17\u0E33\u0E01\u0E32\u0E23" },
+  required: { type: Boolean, required: false, default: false }
+});
+const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
+let idCounter = 0;
+const isOpenModal = ref(false);
+const workingDays = ref([]);
+const today = dayjs().startOf("day").toDate();
+const isConfirmed = computed(() => modelValue.value.length > 0);
+const isScheduleValid = computed(() => {
+  if (workingDays.value.length === 0) return false;
+  const validDays = workingDays.value.filter((d) => {
+    if (!d.date) return false;
+    if (d.isClosed || d.isAllDay) return true;
+    return d.timeSlots.some((slot) => slot.start && slot.end);
+  });
+  if (validDays.length === 0) return false;
+  return workingDays.value.every((d) => {
+    if (!d.date) return true;
+    if (d.isClosed || d.isAllDay) return true;
+    return d.timeSlots.some((slot) => slot.start && slot.end);
+  });
+});
+function formatDate(date) {
+  if (!date) return "";
+  return dayjs(date).locale("th").format("D MMMM BBBB");
+}
+function createEmptyDay() {
+  return {
+    id: idCounter++,
+    date: void 0,
+    isClosed: false,
+    isAllDay: false,
+    timeSlots: [{ id: idCounter++, start: "", end: "" }]
+  };
+}
+function openModal() {
+  workingDays.value = modelValue.value.length > 0 ? modelValue.value.map((d) => {
+    const slots = d.timeSlots ?? [];
+    return {
+      id: idCounter++,
+      date: d.date,
+      isClosed: !d.isOpen,
+      isAllDay: d.isOpen && slots.length === 0,
+      timeSlots: slots.length > 0 ? slots.map((slot) => ({ id: idCounter++, ...slot })) : [{ id: idCounter++, start: "", end: "" }]
+    };
+  }) : [createEmptyDay()];
+  isOpenModal.value = true;
+}
+function closeModal() {
+  isOpenModal.value = false;
+}
+function addDay() {
+  workingDays.value.push(createEmptyDay());
+}
+function setAllDay(day, value) {
+  day.isAllDay = value;
+  if (value) day.isClosed = false;
+}
+function setClosed(day, value) {
+  day.isClosed = value;
+  if (value) day.isAllDay = false;
+}
+function addTimeSlot(dayIndex) {
+  workingDays.value[dayIndex].timeSlots.push({
+    id: idCounter++,
+    start: "",
+    end: ""
+  });
+}
+function removeTimeSlot(dayIndex, slotIndex) {
+  const day = workingDays.value[dayIndex];
+  if (day.timeSlots.length === 1) {
+    workingDays.value.splice(dayIndex, 1);
+  } else {
+    day.timeSlots.splice(slotIndex, 1);
+  }
+}
+function getTimeSlotMenuItems(dayIndex, slotIndex) {
+  return [
+    {
+      label: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E27\u0E25\u0E32\u0E17\u0E33\u0E01\u0E32\u0E23",
+      name: "add",
+      icon: "lucide:plus",
+      action: () => addTimeSlot(dayIndex)
+    },
+    {
+      label: "\u0E25\u0E1A\u0E40\u0E27\u0E25\u0E32",
+      name: "delete",
+      icon: "lucide:trash-2",
+      action: () => removeTimeSlot(dayIndex, slotIndex)
+    }
+  ];
+}
+function saveDays() {
+  modelValue.value = workingDays.value.filter((d) => {
+    if (!d.date) return false;
+    if (d.isClosed || d.isAllDay) return true;
+    return d.timeSlots.some((slot) => slot.start && slot.end);
+  }).map((d) => ({
+    date: d.date,
+    isOpen: !d.isClosed,
+    timeSlots: d.isClosed || d.isAllDay ? [] : d.timeSlots.filter((slot) => slot.start && slot.end).map((slot) => ({ start: slot.start, end: slot.end }))
+  }));
+  isOpenModal.value = false;
+}
+const timeOptions = Array.from({ length: 48 }, (_, i) => {
+  const t = dayjs().startOf("day").add(i * 30, "minute").format("HH:mm");
+  return { label: t, value: t };
+});
+</script>

package/dist/runtime/components/input/input-date-opening-special.vue.d.ts

@@ -0,0 +1,32 @@
+export interface SpecialDayTimeSlot {
+    start: string;
+    end: string;
+}
+export interface SpecialDaySchedule {
+    date: Date | undefined;
+    isOpen: boolean;
+    timeSlots: SpecialDayTimeSlot[];
+}
+export interface InputDateOpeningSpecialProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+}
+type __VLS_Props = InputDateOpeningSpecialProps;
+type __VLS_ModelProps = {
+    modelValue?: SpecialDaySchedule[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SpecialDaySchedule[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SpecialDaySchedule[]) => any) | undefined;
+}>, {
+    label: string;
+    name: string;
+    required: boolean;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

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