pukaad-ui-lib 1.300.0 → 1.302.0

package/dist/module.json

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

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

@@ -4,22 +4,37 @@ type __VLS_Props = {
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
+    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    place?: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: CardReviewProps) => any;
     edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
+    "review-updated": (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
+    "onReview-updated"?: ((data: unknown) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    place: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,106 +1,121 @@
 <template>
-  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
-    <div v-if="props.item.user.avatar">
-      <Avatar
-        :src="props.item.user.avatar"
-        alt="profile_myProfile"
-        :size="30"
-        class="cursor-pointer"
-        @click="navigateToProfile(props.item.user.path_name)"
-      />
-    </div>
-    <div class="flex flex-col gap-[24px] w-full">
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[6px]">
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex justify-between items-center">
-              <div
-                class="font-body-large cursor-pointer"
-                @click="navigateToProfile(props.item.user.path_name)"
-              >
-                {{ props.item.user?.name }}
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <Button
-                  variant="text"
-                  :color="liked ? 'primary' : 'default'"
-                  :disabled="props.disabledLike"
-                  :aria-pressed="liked"
-                  @click="toggleLike"
-                >
-                  <Icon
+  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
+    <div v-if="props.item.user.avatar">
+      <Avatar
+        :src="props.item.user.avatar"
+        alt="profile_myProfile"
+        :size="30"
+        class="cursor-pointer"
+        @click="navigateToProfile(props.item.user.path_name)"
+      />
+    </div>
+    <div class="flex flex-col gap-[24px] w-full">
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[6px]">
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex justify-between items-center">
+              <div
+                class="font-body-large cursor-pointer"
+                @click="navigateToProfile(props.item.user.path_name)"
+              >
+                {{ props.item.user?.name }}
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <Button
+                  variant="text"
+                  :color="liked ? 'primary' : 'default'"
+                  :disabled="props.disabledLike || isLikeLoading"
+                  :aria-pressed="liked"
+                  @click="toggleLike"
+                >
+                  <Icon
                     :name="
   liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-"
-                    :size="20"
-                  />
-                  {{ convertNumber(likeCount) }}
-                </Button>
-                <PickerOptionMenuUser
-                  v-if="!props.disabledMenu"
-                  :state="menuType"
-                  disabled-padding
-                  @review-edit="emit('edit', props.item)"
-                  @review-delete="emit('delete', props.item)"
-                />
-              </div>
-            </div>
-            <div class="text-gray font-body-small">
-              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
-              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
-            </div>
-          </div>
-          <div class="flex gap-[8px] items-center">
-            <InputRating
-              :size="11"
-              readonly
-              :model-value="props.item.review?.rating"
-            />
-            <div class="text-gray font-body-small">
-              {{ convertDateTime(props.item.review?.created_at ?? "") }}
-            </div>
-          </div>
-        </div>
-
-        <div v-if="props.item.review?.description" class="font-body-large">
-          {{ props.item.review?.description }}
-        </div>
-
-        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
-          <DisplayImageReview
-            :items="props.item.review?.images"
-            @select="selectImage"
-          />
-        </div>
-      </div>
-
-      <div v-if="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
-          <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <ModalMediaView
-    v-model="isOpen"
-    :items="props.item.review?.images"
-    :start-index="startIndex"
-    title="รูปภาพรีวิว"
-  />
+"
+                    :size="20"
+                  />
+                  {{ convertNumber(likeCount) }}
+                </Button>
+                <PickerOptionMenuUser
+                  v-if="!props.disabledMenu"
+                  :state="menuType"
+                  disabled-padding
+                  @review-edit="onEdit"
+                  @review-delete="emit('delete', props.item)"
+                />
+              </div>
+            </div>
+            <div class="text-gray font-body-small">
+              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
+              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
+            </div>
+          </div>
+          <div class="flex gap-[8px] items-center">
+            <InputRating
+              :size="11"
+              readonly
+              :model-value="props.item.review?.rating"
+            />
+            <div class="text-gray font-body-small">
+              {{
+                convertDateTorelativeText(props.item.review?.created_at ?? "")
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.item.review?.description" class="font-body-large">
+          {{ props.item.review?.description }}
+        </div>
+
+        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
+          <DisplayImageReview
+            :items="props.item.review?.images"
+            @select="selectImage"
+          />
+        </div>
+      </div>
+
+      <div v-if="props.item.replies">
+        <div class="p-[16px] rounded-sm bg-bright">
+          <div class="text-gray font-body-large">
+            การตอบกลับจาก {{ props.item.replies?.author }}
+          </div>
+          <div class="font-body-large">
+            {{ props.item.replies?.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ModalMediaView
+    v-model="isOpen"
+    :items="props.item.review?.images"
+    :start-index="startIndex"
+    title="รูปภาพรีวิว"
+  />
+
+  <!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
+  <DrawerPostReview
+    v-if="props.place?.id"
+    v-model="isDrawerOpen"
+    :item="drawerItem"
+    @success="onReviewSuccess"
+  />
 </template>
 
 <script setup>
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useNuxtApp } from "nuxt/app";
 import { useConvert } from "../../composables/useConvert";
+import { useApi } from "../../composables/useApi";
 const router = useRouter();
-const { convertNumber, convertDateTime } = useConvert();
+const { convertNumber, convertDateTorelativeText } = useConvert();
+const api = useApi();
+const nuxtApp = useNuxtApp();
+const $toast = nuxtApp.$toast;
 const props = defineProps({
   item: { type: Object, required: true, default: () => ({
     review_id: "0",
@@ -129,13 +144,15 @@ const props = defineProps({
   }) },
   isProfile: { type: Boolean, required: true, default: false },
   disabledLike: { type: Boolean, required: false, default: false },
-  disabledMenu: { type: Boolean, required: false, default: false }
+  disabledMenu: { type: Boolean, required: false, default: false },
+  place: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["toggle-like", "select-image", "edit", "delete"]);
+const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated"]);
 const isOpen = ref(false);
 const startIndex = ref(0);
 const liked = ref(props.item.review?.liked ?? false);
 const likeCount = ref(props.item.review?.like_count ?? 0);
+const isLikeLoading = ref(false);
 watch(
   () => props.item.review?.liked,
   (val) => {
@@ -148,6 +165,16 @@ watch(
     likeCount.value = val ?? 0;
   }
 );
+const isDrawerOpen = ref(false);
+const drawerItem = computed(() => ({
+  placeId: String(props.place?.id ?? ""),
+  placeName: props.place?.name ?? "",
+  address: props.place?.address ?? "",
+  coverImage: props.place?.cover ?? "",
+  rating: props.item.review?.rating ?? 0,
+  description: props.item.review?.description ?? "",
+  photos: (props.item.review?.images ?? []).map((url) => ({ url }))
+}));
 const menuType = computed(
   () => props.item.user?.is_my_review ? "my-review" : "report-review"
 );
@@ -155,15 +182,41 @@ const navigateToProfile = (pathName) => {
   if (!pathName) return;
   router.push(`/@${pathName}`);
 };
-const toggleLike = () => {
-  if (liked.value) {
-    likeCount.value -= 1;
-    liked.value = false;
+const toggleLike = async () => {
+  if (isLikeLoading.value) return;
+  const newLiked = !liked.value;
+  liked.value = newLiked;
+  likeCount.value += newLiked ? 1 : -1;
+  emit("toggle-like", props.item, newLiked);
+  if (!props.place?.id) return;
+  isLikeLoading.value = true;
+  try {
+    const method = newLiked ? "post" : "delete";
+    const res = await api(
+      `/personal/suggest-places/${props.place.id}/reviews/${props.item.review_id}/like`,
+      { method }
+    );
+    if (res?.data) {
+      liked.value = res.data.liked ?? newLiked;
+      likeCount.value = res.data.like_count ?? likeCount.value;
+    }
+  } catch {
+    liked.value = !newLiked;
+    likeCount.value += newLiked ? -1 : 1;
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+  } finally {
+    isLikeLoading.value = false;
+  }
+};
+const onEdit = () => {
+  if (props.place?.id) {
+    isDrawerOpen.value = true;
   } else {
-    likeCount.value += 1;
-    liked.value = true;
+    emit("edit", props.item);
   }
-  emit("toggle-like", props.item, liked.value);
+};
+const onReviewSuccess = (data) => {
+  emit("review-updated", data);
 };
 const selectImage = (index) => {
   startIndex.value = index;

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

@@ -4,22 +4,37 @@ type __VLS_Props = {
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
+    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    place?: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: CardReviewProps) => any;
     edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
+    "review-updated": (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
+    "onReview-updated"?: ((data: unknown) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    place: {
+        id: string | number;
+        name?: string;
+        address?: string;
+        cover?: string;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -7,6 +7,7 @@ export interface DisplayRatingSummaryProps {
     totalReviews?: number | string;
     distribution?: RatingDistribution[];
     badge?: number;
+    hasReviewed?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "write-review": () => any;
@@ -16,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryPr
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];
+    hasReviewed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -12,7 +12,7 @@
           {{ convertNumber(Number(props.totalReviews)) }} รีวิว
         </div>
       </div>
-      <Button color="primary" @click="emit('write-review')">
+      <Button v-if="!props.hasReviewed" color="primary" @click="emit('write-review')">
         <Icon name="pukaad:write-review" /> เขียนรีวิว
       </Button>
     </div>
@@ -63,7 +63,8 @@ const props = defineProps({
   rating: { type: [Number, String], required: false, default: 0 },
   totalReviews: { type: [Number, String], required: false, default: 0 },
   distribution: { type: Array, required: false, default: () => [] },
-  badge: { type: Number, required: false }
+  badge: { type: Number, required: false },
+  hasReviewed: { type: Boolean, required: false, default: false }
 });
 const sortedDistribution = computed(
   () => [...props.distribution].sort((a, b) => b.stars - a.stars)

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

@@ -7,6 +7,7 @@ export interface DisplayRatingSummaryProps {
     totalReviews?: number | string;
     distribution?: RatingDistribution[];
     badge?: number;
+    hasReviewed?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "write-review": () => any;
@@ -16,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryPr
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];
+    hasReviewed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,74 +1,78 @@
 <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 py-[16px]">
-        <InputRating v-model="form.rating" :size="28" />
-      </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>
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose" :disabled="isSubmitting">ยกเลิก</Button>
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="form.rating === 0 || isSubmitting"
-          :loading="isSubmitting"
-        >
-          ยืนยัน
-        </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
+          v-if="form.coverImage"
+          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
+        >
+          <Image
+            :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 py-[16px]">
+        <InputRating v-model="form.rating" :size="28" />
+      </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>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose" :disabled="isSubmitting"
+          >ยกเลิก</Button
+        >
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="form.rating === 0 || isSubmitting"
+          :loading="isSubmitting"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>
@@ -114,7 +118,9 @@ watch(isOpen, (newVal) => {
   }
 });
 const isEdit = computed(() => (props.item?.rating ?? 0) > 0);
-const drawerTitle = computed(() => isEdit.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27");
+const drawerTitle = computed(
+  () => isEdit.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27"
+);
 const hasChanges = () => {
   const orig = props.item;
   if (form.value.rating !== orig.rating) return true;

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

@@ -1,130 +1,130 @@
 <template>
-  <div class="flex gap-[16px] w-full">
-    <!-- กรอกข้อมูล -->
-    <div class="flex flex-col gap-[16px] w-[490px]">
-      <InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
-      <template v-if="isAddressCompleted">
-        <div class="font-body-large-prominent">รายละเอียด</div>
-        <div class="flex flex-col gap-[4px]">
-          <InputAutocomplete
-            name="businessName"
-            v-model="modelValue.businessName"
-            label="ชื่อสถานที่ธุรกิจ"
-            placeholder="กรอกชื่อสถานที่"
-            required
-            show-counter
-            :limit="180"
-            :free-text="true"
-            :fetch-fn="fetchApprovedPlaces"
-            value-key="business_name"
-            label-key="business_name"
-          />
-          <InputTextField
-            v-if="extraNameCount >= 1"
-            name="nameTh"
-            v-model="modelValue.nameTh"
-            label="ชื่อภาษาไทย"
-            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
-            show-counter
-            :limit="180"
-          />
-          <InputTextField
-            v-if="extraNameCount >= 2"
-            name="nameEn"
-            v-model="modelValue.nameEn"
-            label="ชื่อภาษาอังกฤษ"
-            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
-            show-counter
-            :limit="180"
-          />
-          <Button v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
-            <Icon name="lucide:plus" />
-            เพิ่มชื่อสถานที่
-          </Button>
-        </div>
-        <InputCombobox
-          name="categories"
-          v-model="modelValue.categories"
-          label="หมวดหมู่"
-          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
-          :limit="3"
-          show-counter
-          :options="categoryOptions"
-          required
-          multiple
-        />
-        <InputTextarea
-          name="description"
-          v-model="modelValue.description"
-          label="คำอธิบาย"
-          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
-          :limit="220"
-          show-counter
-        />
-        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
-        <div class="flex flex-col gap-[8px]">
-          <InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
-          <InputTextField
-            v-for="(_, index) in modelValue.extraPhones"
-            :key="index"
-            :name="`extraPhone-${index}`"
-            label="เบอร์โทรศัพท์"
-            placeholder="กรอกเบอร์โทรศัพท์"
-            v-model="modelValue.extraPhones[index]"
-          />
-          <Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
-            <Icon name="lucide:plus" />
-            เพิ่มเบอร์โทรศัพท์
-          </Button>
-          <InputLink name="contactChannels" format="contact_channel" default-first v-model="modelValue.contactChannels" />
-        </div>
-        <template v-if="props.state === 'personal'">
-          <div class="flex flex-col gap-[16px]">
-            <InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
-            <template v-if="modelValue.isReview">
-              <InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
-              <InputTextarea
-                name="reviewDescription"
-                v-model="modelValue.reviewDescription"
-                label="คำอธิบาย"
-                placeholder="คำอธิบายเกี่ยวกับสถานที่"
-                show-counter
-              />
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex flex-col gap-[4px]">
-                  <div class="font-body-large-prominent text-gray">เพิ่มภาพถ่าย</div>
-                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
-                </div>
-                <InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
-                <div class="font-body-small text-gray w-[250px]">
-                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน 30 mb
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-    </div>
-
-    <!-- แสดง polygon -->
-    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
-      <SuggestPlaceMap
-        :province-id="modelValue.address?.province_id"
-        :amphur-id="modelValue.address?.amphur_id"
-        :tambon-id="modelValue.address?.tambon_id"
-        @update:lat-lng="modelValue.latLng = $event"
-      />
-      <InputTextField
-        name="latitude-longitude"
-        icon-prepend="lucide:locate-fixed"
-        readonly
-        placeholder="ละติจูด, ลองจิจูด"
+  <div class="flex gap-[16px] w-full">
+    <!-- กรอกข้อมูล -->
+    <div class="flex flex-col gap-[16px] w-[490px]">
+      <InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
+      <template v-if="isAddressCompleted">
+        <div class="font-body-large-prominent">รายละเอียด</div>
+        <div class="flex flex-col gap-[4px]">
+          <InputAutocomplete
+            name="businessName"
+            v-model="modelValue.businessName"
+            label="ชื่อสถานที่ธุรกิจ"
+            placeholder="กรอกชื่อสถานที่"
+            required
+            show-counter
+            :limit="180"
+            :free-text="true"
+            :fetch-fn="fetchApprovedPlaces"
+            value-key="business_name"
+            label-key="business_name"
+          />
+          <InputTextField
+            v-if="extraNameCount >= 1"
+            name="nameTh"
+            v-model="modelValue.nameTh"
+            label="ชื่อภาษาไทย"
+            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
+            show-counter
+            :limit="180"
+          />
+          <InputTextField
+            v-if="extraNameCount >= 2"
+            name="nameEn"
+            v-model="modelValue.nameEn"
+            label="ชื่อภาษาอังกฤษ"
+            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
+            show-counter
+            :limit="180"
+          />
+          <Button v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
+            <Icon name="lucide:plus" />
+            เพิ่มชื่อสถานที่
+          </Button>
+        </div>
+        <InputCombobox
+          name="categories"
+          v-model="modelValue.categories"
+          label="หมวดหมู่"
+          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
+          :limit="3"
+          show-counter
+          :options="categoryOptions"
+          required
+          multiple
+        />
+        <InputTextarea
+          name="description"
+          v-model="modelValue.description"
+          label="คำอธิบาย"
+          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
+          :limit="220"
+          show-counter
+        />
+        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
+        <div class="flex flex-col gap-[8px]">
+          <InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
+          <InputTextField
+            v-for="(_, index) in modelValue.extraPhones"
+            :key="index"
+            :name="`extraPhone-${index}`"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+            v-model="modelValue.extraPhones[index]"
+          />
+          <Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
+            <Icon name="lucide:plus" />
+            เพิ่มเบอร์โทรศัพท์
+          </Button>
+          <InputLink name="contactChannels" format="contact_channel" default-first v-model="modelValue.contactChannels" />
+        </div>
+        <template v-if="props.state === 'personal'">
+          <div class="flex flex-col gap-[16px]">
+            <InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
+            <template v-if="modelValue.isReview">
+              <InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
+              <InputTextarea
+                name="reviewDescription"
+                v-model="modelValue.reviewDescription"
+                label="คำอธิบาย"
+                placeholder="คำอธิบายเกี่ยวกับสถานที่"
+                show-counter
+              />
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex flex-col gap-[4px]">
+                  <div class="font-body-large-prominent text-gray">เพิ่มภาพถ่าย</div>
+                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
+                </div>
+                <InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
+                <div class="font-body-small text-gray w-[250px]">
+                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน 30 mb
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- แสดง polygon -->
+    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
+      <SuggestPlaceMap
+        :province-id="modelValue.address?.province_id"
+        :amphur-id="modelValue.address?.amphur_id"
+        :tambon-id="modelValue.address?.tambon_id"
+        @update:lat-lng="modelValue.latLng = $event"
+      />
+      <InputTextField
+        name="latitude-longitude"
+        icon-prepend="lucide:locate-fixed"
+        readonly
+        placeholder="ละติจูด, ลองจิจูด"
         :model-value="
   modelValue.latLng ? `${modelValue.latLng.lat.toFixed(6)}, ${modelValue.latLng.lng.toFixed(6)}` : ''
-"
-      />
-    </div>
-  </div>
+"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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-autocomplete.d.vue.ts

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

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

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

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

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

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

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

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -46,10 +46,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     resize: "none" | "both" | "horizontal" | "vertical";
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

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

@@ -46,10 +46,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     resize: "none" | "both" | "horizontal" | "vertical";
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

package/package.json

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