pukaad-ui-lib 1.282.2 → 1.284.0

package/dist/runtime/components/display/display-rating-summary.vue

@@ -1,38 +1,38 @@
 <template>
-  <div class="flex gap-[24px] items-center">
-    <!-- Left: คะแนนรวม -->
-    <div class="flex flex-col items-center text-primary flex-shrink-0 w-[100px]">
-      <div class="text-[56px] font-bold leading-none">
-        {{ Number(props.rating).toFixed(1) }}
-      </div>
-      <div class="font-body-large mt-[4px]">
-        {{ convertNumber(Number(props.totalReviews)) }} รีวิว
-      </div>
-    </div>
-
-    <!-- Right: แถบการกระจายคะแนน -->
-    <div class="flex flex-col gap-[8px] flex-1">
-      <div v-for="(item, idx) in sortedDistribution" :key="item.stars" class="flex items-center gap-[12px]">
-        <!-- badge แสดงบน row แรก (5 ดาว) -->
-        <div class="relative flex-shrink-0">
-          <InputRating :size="16" readonly :model-value="item.stars" />
-          <div v-if="idx === 0 && props.badge != null"
-            class="absolute -top-[10px] -left-[10px] min-w-[22px] h-[22px] px-[4px] rounded-full bg-error flex items-center justify-center">
-            <span class="text-white text-[11px] font-bold leading-none">{{ props.badge }}</span>
-          </div>
-        </div>
-
-        <div class="flex-1 max-w-[260px]">
-          <ProgressBar :value="maxCount > 0 ? item.count / maxCount * 100 : 0" full-width :height="8"
-            color-active="#FBC02D" color-background="#E0E0E0" />
-        </div>
-
-        <div class="text-gray font-body-large w-[72px]">
-          {{ convertNumber(item.count) }}
-        </div>
-      </div>
-    </div>
-  </div>
+  <div class="flex gap-[24px] items-center">
+    <!-- Left: คะแนนรวม -->
+    <div class="flex flex-col items-center text-primary flex-shrink-0 w-[100px]">
+      <div class="text-[56px] font-bold leading-none">
+        {{ Number(props.rating).toFixed(1) }}
+      </div>
+      <div class="font-body-large mt-[4px]">
+        {{ convertNumber(Number(props.totalReviews)) }} รีวิว
+      </div>
+    </div>
+
+    <!-- Right: แถบการกระจายคะแนน -->
+    <div class="flex flex-col gap-[8px] flex-1">
+      <div v-for="(item, idx) in sortedDistribution" :key="item.stars" class="flex items-center gap-[12px]">
+        <!-- badge แสดงบน row แรก (5 ดาว) -->
+        <div class="relative flex-shrink-0">
+          <InputRating :size="16" readonly :model-value="item.stars" />
+          <div v-if="idx === 0 && props.badge != null"
+            class="absolute -top-[10px] -left-[10px] min-w-[22px] h-[22px] px-[4px] rounded-full bg-error flex items-center justify-center">
+            <span class="text-white text-[11px] font-bold leading-none">{{ props.badge }}</span>
+          </div>
+        </div>
+
+        <div class="flex-1 max-w-[260px]">
+          <ProgressBar :value="maxCount > 0 ? item.count / maxCount * 100 : 0" full-width :height="8"
+            color-active="#FBC02D" color-background="#E0E0E0" />
+        </div>
+
+        <div class="text-gray font-body-large w-[72px]">
+          {{ convertNumber(item.count) }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/divider.vue

@@ -1,23 +1,23 @@
 <template>
-  <div
+  <div
     :style="{
   paddingLeft: props.width && `${props.width}px`,
   paddingRight: props.width && `${props.width}px`,
   paddingTop: props.height && `${props.height}px`,
   paddingBottom: props.height && `${props.height}px`
-}"
-  >
-    <hr
-      :class="[props.alignment === 'vertical' ? 'h-full' : 'w-full']"
+}"
+  >
+    <hr
+      :class="[props.alignment === 'vertical' ? 'h-full' : 'w-full']"
       :style="{
   border: 0,
   borderLeft: props.alignment === 'vertical' ? `${props.size}px` : '',
   borderBottom: props.alignment === 'horizontal' ? `${props.size}px` : '',
   borderStyle: props.style,
   borderColor: color
-}"
-    />
-  </div>
+}"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/draggable.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-bind="$attrs">
-    <div
-      v-for="(n, i) in items"
-      :key="i"
-      class="cursor-grab active:cursor-grabbing"
-      draggable="true"
-      @dragstart="onDragStart($event, i)"
-      @dragover.prevent="onDragOver($event, i)"
-      @dragend="onDragEnd($event, i)"
-      @dragenter.prevent
-      @dragleave.prevent
-    >
-      <slot name="item" :item="n" :index="i"></slot>
-    </div>
-  </div>
+  <div v-bind="$attrs">
+    <div
+      v-for="(n, i) in items"
+      :key="i"
+      class="cursor-grab active:cursor-grabbing"
+      draggable="true"
+      @dragstart="onDragStart($event, i)"
+      @dragover.prevent="onDragOver($event, i)"
+      @dragend="onDragEnd($event, i)"
+      @dragenter.prevent
+      @dragleave.prevent
+    >
+      <slot name="item" :item="n" :index="i"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -1,74 +1,74 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <InputTextField
-        name="title"
-        label="หัวข้อ"
-        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-        showCounter
-        :limit="180"
-        v-model="form.title"
-        disabled-border
-        required
-      />
-
-      <InputContent
-        placeholder="อยากเล่าอะไร"
-        :height="288"
-        v-model="form.content"
-      />
-
-      <InputTag
-        v-model="form.tags"
-        name="tags"
-        label="แท็ก"
-        placeholder="เพิ่มแท็ก"
-        :limit="5"
-      />
-
-      <!-- <InputCheckbox
-        name="disableComment"
-        label="ไม่อนุญาตให้แสดงความคิดเห็น"
-        v-model="form.disableComment"
-      /> -->
-
-      <div class="flex flex-col gap-[8px]">
-        <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile
-          :limit="1"
-          name="coverImage"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.coverImage"
-        />
-        <div class="flex flex-col text-gray font-body-small">
-          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-          <div>ขนาดไม่เกิน 30 mb</div>
-        </div>
-      </div>
-    </div>
-
-    <template #footer="{ meta }">
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose">ยกเลิก</Button>
-        <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="!meta.valid || isLoading"
-        >
-          <span v-if="isLoading">กำลังบันทึก...</span>
-          <span v-else>เผยแพร่</span>
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <InputTextField
+        name="title"
+        label="หัวข้อ"
+        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+        showCounter
+        :limit="180"
+        v-model="form.title"
+        disabled-border
+        required
+      />
+
+      <InputContent
+        placeholder="อยากเล่าอะไร"
+        :height="288"
+        v-model="form.content"
+      />
+
+      <InputTag
+        v-model="form.tags"
+        name="tags"
+        label="แท็ก"
+        placeholder="เพิ่มแท็ก"
+        :limit="5"
+      />
+
+      <!-- <InputCheckbox
+        name="disableComment"
+        label="ไม่อนุญาตให้แสดงความคิดเห็น"
+        v-model="form.disableComment"
+      /> -->
+
+      <div class="flex flex-col gap-[8px]">
+        <div class="text-gray font-body-large">ภาพหน้าปก</div>
+        <InputFile
+          :limit="1"
+          name="coverImage"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไม่เกิน 30 mb</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer="{ meta }">
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose">ยกเลิก</Button>
+        <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="!meta.valid || loading"
+        >
+          <span v-if="loading">กำลังบันทึก...</span>
+          <span v-else>เผยแพร่</span>
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>
@@ -77,6 +77,8 @@ import { useNuxtApp, useRuntimeConfig, useCookie } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 const { $alert, $toast } = useNuxtApp();
 const api = useApi();
+const config = useRuntimeConfig();
+const isOffice = config.public.APP_TYPE === "OFFICE";
 const emit = defineEmits(["submit", "success", "saveDraft"]);
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({
@@ -95,11 +97,14 @@ function cloneItem(item) {
   };
 }
 const form = ref(cloneItem(props.item));
-const isLoading = ref(false);
+const loading = ref(false);
 const isOpen = defineModel({ type: Boolean, ...{
   default: false
 } });
-const isEditMode = computed(() => !!props.item?.id);
+const isEditMode = computed(() => {
+  const id = props.item?.id;
+  return !!id && !String(id).startsWith("draft_");
+});
 const drawerTitle = computed(() => {
   return isEditMode.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E25\u0E47\u0E2D\u0E01" : "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E1A\u0E25\u0E47\u0E2D\u0E01";
 });
@@ -108,6 +113,19 @@ watch(isOpen, (newVal) => {
     form.value = cloneItem(props.item);
   }
 });
+const deleteDraftFromIndexedDB = (draftId) => {
+  try {
+    const req = indexedDB.open("PukaadDraftsDB", 1);
+    req.onsuccess = (e) => {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains("blogDrafts")) return;
+      const tx = db.transaction("blogDrafts", "readwrite");
+      tx.objectStore("blogDrafts").delete(draftId);
+    };
+  } catch (e) {
+    console.error("Failed to delete draft:", e);
+  }
+};
 const onClose = async () => {
   const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
   if (isModified) {
@@ -120,6 +138,8 @@ const onClose = async () => {
       showCancelBtn: true
     });
     if (isConfirmed) {
+      const draftId = form.value.id && String(form.value.id).startsWith("draft_") ? form.value.id : null;
+      if (draftId) deleteDraftFromIndexedDB(draftId);
       isOpen.value = false;
     }
   } else {
@@ -127,10 +147,8 @@ const onClose = async () => {
   }
 };
 const onSaveDraft = async () => {
-  const config = useRuntimeConfig();
-  const isOffice = config.public.APP_TYPE === "OFFICE";
   if (isOffice) {
-    isLoading.value = true;
+    loading.value = true;
     try {
       let coverImageUrl = "";
       if (form.value.coverImage?.[0]?.file) {
@@ -160,13 +178,12 @@ const onSaveDraft = async () => {
         error?.data?.message?.description || "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E41\u0E1A\u0E1A\u0E23\u0E48\u0E32\u0E07\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"
       );
     } finally {
-      isLoading.value = false;
+      loading.value = false;
     }
   } else {
     try {
       const rawCoverImage = form.value.coverImage?.map((img) => ({
         file: img.file,
-        // File object is not a proxy, safe to copy reference
         url: img.url
       })) || [];
       const draftData = {
@@ -207,7 +224,6 @@ const onSaveDraft = async () => {
 };
 const uploadImage = async (file) => {
   try {
-    const config = useRuntimeConfig();
     const baseURL = config.public.BASE_URL_API;
     const res = await $fetch(`${baseURL}/storage/presigned-urls`, {
       method: "POST",
@@ -216,13 +232,10 @@ const uploadImage = async (file) => {
       },
       body: JSON.stringify({
         file_name: [file.name],
-        state: config.public.APP_TYPE === "OFFICE" ? "office-blog-cover" : "blog-cover"
+        state: isOffice ? "office-blog-cover" : "blog-cover"
       }),
       onRequest({ options }) {
-        const { APP_TYPE } = config.public;
-        const secId = useCookie(
-          APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID"
-        );
+        const secId = useCookie(isOffice ? "OFFICE_SEC_ID" : "SEC_ID");
         if (secId.value) {
           options.headers = new Headers(options.headers);
           options.headers.set("Authorization", `Bearer ${secId.value}`);
@@ -247,7 +260,7 @@ const uploadImage = async (file) => {
   }
 };
 const onSubmit = async () => {
-  isLoading.value = true;
+  loading.value = true;
   try {
     let coverImageUrl = "";
     if (form.value.coverImage && form.value.coverImage.length > 0) {
@@ -258,31 +271,33 @@ const onSubmit = async () => {
         coverImageUrl = fileItem.url;
       }
     }
-    const payload = {
-      title: form.value.title,
-      content: JSON.stringify(form.value.content),
-      tags: form.value.tags.map((t) => t.name || t),
-      cover_image_url: coverImageUrl
-    };
-    const config = useRuntimeConfig();
-    const isOffice = config.public.APP_TYPE === "OFFICE";
     const createEndpoint = isOffice ? "/office/blogs" : "/profiles/me/blog";
     const res = await api(isEditMode.value ? `/blogs/${form.value.id}` : createEndpoint, {
       method: isEditMode.value ? "PUT" : "POST",
-      body: payload
+      body: {
+        title: form.value.title,
+        content: JSON.stringify(form.value.content),
+        tags: form.value.tags.map((t) => t.name || t),
+        cover_image_url: coverImageUrl
+      }
     });
     $toast.success(
       isEditMode.value ? "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" : "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"
     );
+    const draftId = props.item?.id;
+    if (draftId && String(draftId).startsWith("draft_")) {
+      deleteDraftFromIndexedDB(draftId);
+    }
     emit("submit", form.value);
     emit("success", res.data);
     isOpen.value = false;
   } catch (error) {
-    const msg = error?.data?.message?.description || error?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21";
-    $toast.error(msg);
+    $toast.error(
+      error?.data?.message?.description || error?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21"
+    );
     console.error("Submit error:", error);
   } finally {
-    isLoading.value = false;
+    loading.value = false;
   }
 };
 </script>

package/dist/runtime/components/drawer/drawer-post-review.vue

@@ -1,71 +1,71 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[16px]">
-        <div
-          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
-        >
-          <Image
-            v-if="form.coverImage"
-            :src="form.coverImage"
-            width="auto"
-            height="auto"
-            fit="cover"
-          />
-        </div>
-        <div class="flex flex-col gap-[4px]">
-          <div class="font-body-large-prominent">
-            {{ form.placeName }}
-          </div>
-          <div class="font-body-small text-gray">
-            {{ form.address }}
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center justify-center">
-        <InputRating v-model="form.rating" :size="40" />
-      </div>
-      <InputTextarea
-        name="description"
-        label="คำอธิบาย"
-        placeholder="เขียนรีวิวของคุณ"
-        showCounter
-        v-model="form.description"
-        class="min-h-[120px]"
-      />
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[4px]">
-          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
-          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
-        </div>
-        <InputFile
-          :limit="9"
-          name="photos"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.photos"
-        />
-        <div class="flex flex-col text-gray font-body-small">
-          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-          <div>ขนาดไฟล์สูงสุด 30 mb</div>
-        </div>
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose">ยกเลิก</Button>
-        <Button type="submit" color="primary" :disabled="form.rating === 0">
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[16px]">
+        <div
+          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
+        >
+          <Image
+            v-if="form.coverImage"
+            :src="form.coverImage"
+            width="auto"
+            height="auto"
+            fit="cover"
+          />
+        </div>
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large-prominent">
+            {{ form.placeName }}
+          </div>
+          <div class="font-body-small text-gray">
+            {{ form.address }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center">
+        <InputRating v-model="form.rating" :size="40" />
+      </div>
+      <InputTextarea
+        name="description"
+        label="คำอธิบาย"
+        placeholder="เขียนรีวิวของคุณ"
+        showCounter
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[4px]">
+          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
+          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
+        </div>
+        <InputFile
+          :limit="9"
+          name="photos"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.photos"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไฟล์สูงสุด 30 mb</div>
+        </div>
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose">ยกเลิก</Button>
+        <Button type="submit" color="primary" :disabled="form.rating === 0">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>