pukaad-ui-lib 1.317.0 → 1.318.0

package/dist/module.json

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

package/dist/module.mjs

@@ -95,6 +95,11 @@ const module$1 = defineNuxtModule({
             prefix: "pukaad-social",
             dir: resolver.resolve("./runtime/assets/svg/socials"),
             normalizeIconName: false
+          },
+          {
+            prefix: "pukaad-flag",
+            dir: resolver.resolve("./runtime/assets/svg/flags"),
+            normalizeIconName: false
           }
         ]
       });

package/dist/runtime/assets/svg/flags/cn.svg

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8131_652)">
+<path d="M0 0H16V16H0V0Z" fill="#EE1C25"/>
+<path d="M6.39998 4.21748L2.31998 6.85748L3.99998 2.53748L5.43998 6.85748L1.59998 4.21748H6.39998Z" fill="#FFFF00"/>
+<path d="M7.393 1.97026L8.84678 2.68229L7.32506 2.94376L8.3115 1.79144L8.21651 3.3408L7.393 1.97026Z" fill="#FFFF00"/>
+<path d="M9.24584 3.38149L10.3087 4.60393L8.80415 4.25241L10.1622 3.57431L9.47128 4.96553L9.24584 3.38149Z" fill="#FFFF00"/>
+<path d="M9.58044 5.7041L10.0517 7.2548L8.82121 6.31908L10.3385 6.25456L9.13918 7.24294L9.58044 5.7041Z" fill="#FFFF00"/>
+<path d="M8.31278 7.36347L8.14918 8.97427L7.37598 7.63747L8.79918 8.16307L7.31278 8.61147L8.31278 7.36347Z" fill="#FFFF00"/>
+</g>
+<defs>
+<clipPath id="clip0_8131_652">
+<rect width="16" height="16" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/runtime/assets/svg/flags/th.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8131_1050)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="#F4F5F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.4187H16V10.75H0V5.4187Z" fill="#2D2A4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V2.75H0V0ZM0 13.3344H16V16H0V13.3344Z" fill="#A51931"/>
+</g>
+<defs>
+<clipPath id="clip0_8131_1050">
+<rect width="16" height="16" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/runtime/components/button.vue

@@ -4,16 +4,16 @@
   props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
-    :disabled="props.loading || props.disabled">
-    <span class="inline-grid place-items-center">
-      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }">
-        <slot />
-      </span>
-      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
-    </span>
-  </ShadButton>
+]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
+    :disabled="props.loading || props.disabled">
+    <span class="inline-grid place-items-center">
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
+        <slot />
+      </span>
+      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
+    </span>
+  </ShadButton>
 </template>
 
 <script setup>

package/dist/runtime/components/carousel.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="relative w-full h-full">
-    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
-      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
-        <span class="text-white text-sm font-medium tracking-widest">
-          {{ currentIndex + 1 }} / {{ props.items.length }}
-        </span>
-      </div>
-    </div>
-
-    <ShadCarousel
-      :opts="{ startIndex: props.selectIndex }"
-      class="carousel-media w-full h-full"
-      @init-api="onInitApi"
-    >
-      <ShadCarouselContent class="h-full">
-        <ShadCarouselItem
-          v-for="(item, i) in props.items"
-          :key="i"
-          class="h-full flex items-center justify-center"
-        >
-          <img
-            :src="item.url"
-            class="w-full h-full object-contain select-none"
-            draggable="false"
-          />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
-      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
-    </ShadCarousel>
-  </div>
+  <div class="relative w-full h-full">
+    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
+      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
+        <span class="text-white text-sm font-medium tracking-widest">
+          {{ currentIndex + 1 }} / {{ props.items.length }}
+        </span>
+      </div>
+    </div>
+
+    <ShadCarousel
+      :opts="{ startIndex: props.selectIndex }"
+      class="carousel-media w-full h-full"
+      @init-api="onInitApi"
+    >
+      <ShadCarouselContent class="h-full">
+        <ShadCarouselItem
+          v-for="(item, i) in props.items"
+          :key="i"
+          class="h-full flex items-center justify-center"
+        >
+          <img
+            :src="item.url"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
+      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,102 +1,102 @@
 <template>
-  <!-- Personal state → Featured layout — 1 รูป: w-full -->
-  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
-    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
-  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
-  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
-    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
-      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 2)">
-        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto2Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
-        </div>
-      </div>
-
-      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('video', 0)">
-        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:video" :size="42" />
-          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
-        </div>
-      </div>
-      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 3)">
-        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto3Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Office / Business state → Album layout -->
-  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
-    <!-- Row 1: photos[0..3] -->
-    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 1 col 5: image count overlay -->
-    <div v-show="galleryCountPhoto != null"
-      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 8)">
-      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
-        height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:image" :size="35" />
-        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
-      </div>
-    </div>
-
-    <!-- Row 2: photos[4..7] -->
-    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 2 col 5: video overlay -->
-    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('video', 0)">
-      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:video" :size="35" />
-        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Lightbox modal -->
-  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
+  <!-- Personal state → Featured layout — 1 รูป: w-full -->
+  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
+    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
+  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
+  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
+    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 2)">
+        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto2Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
+        </div>
+      </div>
+
+      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('video', 0)">
+        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:video" :size="42" />
+          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
+        </div>
+      </div>
+      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 3)">
+        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto3Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Office / Business state → Album layout -->
+  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
+    <!-- Row 1: photos[0..3] -->
+    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 1 col 5: image count overlay -->
+    <div v-show="galleryCountPhoto != null"
+      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 8)">
+      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
+        height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:image" :size="35" />
+        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
+      </div>
+    </div>
+
+    <!-- Row 2: photos[4..7] -->
+    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 2 col 5: video overlay -->
+    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('video', 0)">
+      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:video" :size="35" />
+        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lightbox modal -->
+  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
 </template>
 
 <script setup>

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

@@ -152,6 +152,7 @@ watch(isOpen, (val) => {
         extraPhones: [],
         contactChannels: [],
         categories: [],
+        localizedNames: [],
         reviewPhotos: []
       };
     }, 300);
@@ -189,8 +190,7 @@ const onSubmit = async () => {
       method,
       body: {
         business_name: d.businessName ?? "",
-        name_th: d.nameTh ?? "",
-        name_en: d.nameEn ?? "",
+        localized_names: (d.localizedNames ?? []).map((ln) => ({ language: ln.language, name: ln.name })),
         description: d.description ?? "",
         address: {
           province_id: d.address?.province_id,

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

@@ -1,4 +1,5 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
+import type { LocalizedNameItem } from "#pukaad-ui/types/components/input/input-localized-name";
 interface FileItem {
     file?: File;
     url: string;
@@ -14,8 +15,7 @@ export interface SuggestPlaceData {
         lng: number;
     } | null;
     businessName?: string;
-    nameTh?: string;
-    nameEn?: string;
+    localizedNames?: LocalizedNameItem[];
     categories?: {
         id?: string;
         value?: string;

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

@@ -2,11 +2,15 @@
   <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" />
+      <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
+          <InputSuggest
             name="businessName"
             v-model="modelValue.businessName"
             label="ชื่อสถานที่ธุรกิจ"
@@ -14,33 +18,14 @@
             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"
+          <InputLocalizedName
+            name="localizedNames"
+            v-model="modelValue.localizedNames"
           />
-          <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"
@@ -61,9 +46,17 @@
           :limit="220"
           show-counter
         />
-        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
+        <InputDateOpening
+          name="openingHours"
+          v-model="modelValue.openingHours"
+        />
         <div class="flex flex-col gap-[8px]">
-          <InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
+          <InputTextField
+            name="phone"
+            v-model="modelValue.phone"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+          />
           <InputTextField
             v-for="(_, index) in modelValue.extraPhones"
             :key="index"
@@ -72,17 +65,35 @@
             placeholder="กรอกเบอร์โทรศัพท์"
             v-model="modelValue.extraPhones[index]"
           />
-          <Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
+          <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" />
+          <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="คุณต้องการรีวิวสถานที่นี้" />
+            <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" />
+              <InputRating
+                name="rating"
+                v-model="modelValue.rating"
+                class="flex py-4 justify-center"
+              />
               <InputTextarea
                 name="reviewDescription"
                 v-model="modelValue.reviewDescription"
@@ -92,12 +103,20 @@
               />
               <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-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" />
+                <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
+                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
+                  ขนาดไฟล์ไม่เกิน 30 mb
                 </div>
               </div>
             </template>
@@ -128,9 +147,10 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, reactive } from "vue";
+import { computed, onMounted, watch, reactive, ref } from "vue";
 import { useApi } from "#pukaad-ui/runtime/composables/useApi";
 import SuggestPlaceMap from "./suggest-place-map.vue";
+import InputLocalizedName from "../../input/input-localized-name.vue";
 const props = defineProps({
   state: { type: String, required: false, default: "personal" },
   fixedProvinceId: { type: Number, required: false }
@@ -141,18 +161,26 @@ const modelValue = reactive({
   address: {},
   extraPhones: [],
   categories: [],
+  localizedNames: [],
   reviewPhotos: [],
   photos: [],
   videos: [],
   ..._model.value
 });
-watch(_model, (val) => {
-  if (val) Object.assign(modelValue, val);
-}, { deep: false });
-watch(modelValue, (val) => {
-  _model.value = { ...val };
-}, { deep: true });
-const extraNameCount = ref(modelValue.nameEn ? 2 : modelValue.nameTh ? 1 : 0);
+watch(
+  _model,
+  (val) => {
+    if (val) Object.assign(modelValue, val);
+  },
+  { deep: false }
+);
+watch(
+  modelValue,
+  (val) => {
+    _model.value = { ...val };
+  },
+  { deep: true }
+);
 const isAddressCompleted = computed(() => {
   const v = modelValue.address || {};
   return !!(v.province_id && v.amphur_id && v.tambon_id && v.zipcode);
@@ -180,7 +208,12 @@ const categoryEndpointMap = {
 const fetchApprovedPlaces = async (page, pageSize, search) => {
   const base = listEndpointMap[props.state] ?? "/personal/suggest-places";
   const res = await api(base, {
-    query: { q: search ?? "", status: "PENDING,APPROVED", page, page_size: pageSize }
+    query: {
+      q: search ?? "",
+      status: "PENDING,APPROVED",
+      page,
+      page_size: pageSize
+    }
   });
   const data = (res.data ?? []).map((item) => ({
     ...item,
@@ -195,7 +228,9 @@ const categoryOptions = ref([]);
 onMounted(async () => {
   try {
     const endpoint = categoryEndpointMap[props.state] ?? "/personal/suggest-places/categories";
-    const res = await api(endpoint);
+    const res = await api(
+      endpoint
+    );
     categoryOptions.value = (res.data ?? []).map((c) => ({
       label: c.category_name,
       value: c.id

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

@@ -1,4 +1,5 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
+import type { LocalizedNameItem } from "#pukaad-ui/types/components/input/input-localized-name";
 interface FileItem {
     file?: File;
     url: string;
@@ -14,8 +15,7 @@ export interface SuggestPlaceData {
         lng: number;
     } | null;
     businessName?: string;
-    nameTh?: string;
-    nameEn?: string;
+    localizedNames?: LocalizedNameItem[];
     categories?: {
         id?: string;
         value?: string;

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

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
+    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
+    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;