pukaad-ui-lib 1.357.0 → 1.359.0

package/dist/module.json

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

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

@@ -1,58 +1,139 @@
 <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
+    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
+    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
+      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
+      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
+      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]">
+      <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>
+          <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]">
+      <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]">
+      <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>
+          <span class="font-body-large"
+            >รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span
+          >
         </div>
       </div>
     </div>
@@ -61,34 +142,73 @@
   <!-- 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
+      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"
+    <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]">
+      @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>
+        <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
+      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]">
+    <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>
@@ -96,7 +216,13 @@
   </div>
 
   <!-- Lightbox modal -->
-  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
+  <ModalMediaView
+    v-model="isMediaOpen"
+    :items="mediaItems"
+    :title="props.title"
+    :start-index="mediaStartIndex"
+    :uploader-label="uploaderLabel"
+  />
 </template>
 
 <script setup>
@@ -115,6 +241,9 @@ const layoutMode = computed(() => {
   if (props.state === "office" || props.state === "business") return "album";
   return "featured";
 });
+const uploaderLabel = computed(
+  () => props.state === "business" ? "\u0E1D\u0E48\u0E32\u0E22\u0E08\u0E31\u0E14\u0E01\u0E32\u0E23" : "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A"
+);
 const photos = computed(() => props.photos.filter((p) => !!p.url));
 const videos = computed(() => props.videos.filter((p) => !!p.url));
 const featuredPhoto2Overflow = computed(() => {
@@ -135,7 +264,9 @@ const galleryCountPhoto = computed(
 const isMediaOpen = ref(false);
 const mediaType = ref("photo");
 const mediaStartIndex = ref(0);
-const mediaItems = computed(() => mediaType.value === "photo" ? photos.value : videos.value);
+const mediaItems = computed(
+  () => mediaType.value === "photo" ? photos.value : videos.value
+);
 const openLightbox = (type, index) => {
   mediaType.value = type;
   mediaStartIndex.value = index;

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

@@ -48,14 +48,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    options: AutocompleteOption[] | string[] | number[];
-    description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    options: AutocompleteOption[] | string[] | number[];
+    description: 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

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

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

@@ -55,8 +55,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -55,8 +55,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

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

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

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    limit: number;
     showCounter: boolean;
+    limit: number;
     format: "legacy" | "contact_channel";
     defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    limit: number;
     showCounter: boolean;
+    limit: number;
     format: "legacy" | "contact_channel";
     defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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

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

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

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

@@ -19,13 +19,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    description: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -19,13 +19,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    description: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

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

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

@@ -25,9 +25,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
+    placeholder: string;
     state: "user" | "admin";
     limit: number;
-    placeholder: string;
     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, {
     id: string;
     name: string;
     required: boolean;
-    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, {
     id: string;
     name: string;
     required: boolean;
-    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,11 +46,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    limit: number;
     rows: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    limit: number;
     readonly: boolean;
     heightScroll: boolean;
     spaceToComma: boolean;

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

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

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

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

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

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

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

@@ -6,6 +6,8 @@ export interface ModalMediaViewProps {
     startIndex?: number;
     /** ข้อมูล review เต็ม สำหรับแสดง overlay รีวิว */
     review?: CardReviewProps;
+    /** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
+    uploaderLabel?: string;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {
@@ -20,6 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     title: string;
     items: CarouselItem[];
     startIndex: number;
+    uploaderLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -15,10 +15,25 @@
       <div
         v-if="!props.review && currentItem?.description"
         class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+        style="
+          background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.75) 0%,
+            transparent 100%
+          );
+        "
       >
-        <div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
-          <div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
+        <div
+          class="p-[16px] h-[125px] flex flex-col gap-[8px] text-white font-body-large"
+        >
+          <div class="flex justify-between items-center">
+            <div class="font-body-large-prominent">{{ props.uploaderLabel }}</div>
+            <Icon
+              name="lucide:flag"
+              class="cursor-pointer"
+              @click="isOpenModalReport = true"
+            />
+          </div>
           <div>{{ currentItem.description }}</div>
         </div>
       </div>
@@ -27,7 +42,13 @@
       <div
         v-if="props.review"
         class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+        style="
+          background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.75) 0%,
+            transparent 100%
+          );
+        "
       >
         <div class="flex flex-col w-full">
           <div
@@ -65,7 +86,11 @@
                       :model-value="props.review.review.rating"
                     />
                     <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                      {{
+                        convertDateTorelativeText(
+  props.review.review.created_at ?? ""
+)
+                      }}
                     </span>
                   </div>
                 </div>
@@ -118,7 +143,11 @@
                       :model-value="props.review.review.rating"
                     />
                     <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                      {{
+                        convertDateTorelativeText(
+  props.review.review.created_at ?? ""
+)
+                      }}
                     </span>
                   </div>
                 </div>
@@ -135,6 +164,12 @@
       </div>
     </div>
   </Modal>
+
+  <ModalReport
+    v-model="isOpenModalReport"
+    state="media"
+    @submit="onReportSubmit"
+  />
 </template>
 
 <script setup>
@@ -145,10 +180,16 @@ const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
   title: { type: String, required: false, default: "" },
   startIndex: { type: Number, required: false, default: 0 },
-  review: { type: Object, required: false }
+  review: { type: Object, required: false },
+  uploaderLabel: { type: String, required: false, default: "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A" }
 });
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const showMoreDescription = ref(false);
 const currentIndex = ref(props.startIndex ?? 0);
+const isOpenModalReport = ref(false);
 const currentItem = computed(() => props.items[currentIndex.value] ?? null);
+const onReportSubmit = (payload) => {
+  console.log("report payload:", payload);
+  isOpenModalReport.value = false;
+};
 </script>

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

@@ -6,6 +6,8 @@ export interface ModalMediaViewProps {
     startIndex?: number;
     /** ข้อมูล review เต็ม สำหรับแสดง overlay รีวิว */
     review?: CardReviewProps;
+    /** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
+    uploaderLabel?: string;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {
@@ -20,6 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     title: string;
     items: CarouselItem[];
     startIndex: number;
+    uploaderLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-report.vue

@@ -63,24 +63,6 @@ const placeEditOptions = [
   { label: "\u0E22\u0E49\u0E32\u0E22\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E15\u0E33\u0E41\u0E2B\u0E19\u0E48\u0E07\u0E17\u0E35\u0E48\u0E15\u0E31\u0E49\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E41\u0E25\u0E49\u0E27", value: "relocated" },
   { label: "\u0E2D\u0E37\u0E48\u0E19\u0E46", value: "other" }
 ];
-const placeCloseDuplicateOptions = [
-  { label: "\u0E1B\u0E34\u0E14\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E22\u0E38\u0E14\u0E01\u0E34\u0E08\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27", value: "closed" },
-  { label: "\u0E44\u0E21\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48", value: "not_exist" },
-  { label: "\u0E0B\u0E49\u0E33\u0E01\u0E31\u0E1A\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E2D\u0E37\u0E48\u0E19", value: "duplicate" },
-  { label: "\u0E2D\u0E37\u0E48\u0E19\u0E46", value: "other" }
-];
-const placeReportOptions = [
-  { label: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07", value: "invalid_info" },
-  { label: "\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2D\u0E22\u0E39\u0E48\u0E08\u0E23\u0E34\u0E07", value: "fake_place" },
-  { label: "\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E0B\u0E49\u0E33", value: "duplicate_place" },
-  { label: "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07", value: "invalid_category" },
-  { label: "\u0E1E\u0E34\u0E01\u0E31\u0E14\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07", value: "invalid_location" },
-  { label: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E18\u0E38\u0E23\u0E01\u0E34\u0E08\u0E40\u0E1B\u0E47\u0E19\u0E40\u0E17\u0E47\u0E08\u0E2B\u0E23\u0E37\u0E2D\u0E41\u0E2D\u0E1A\u0E2D\u0E49\u0E32\u0E07", value: "impersonation_business" },
-  { label: "\u0E0A\u0E37\u0E48\u0E2D\u0E2B\u0E23\u0E37\u0E2D\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E21\u0E35\u0E2A\u0E41\u0E1B\u0E21\u0E2B\u0E23\u0E37\u0E2D\u0E42\u0E06\u0E29\u0E13\u0E32", value: "spam_advertising" },
-  { label: "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E2B\u0E23\u0E37\u0E2D\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E25\u0E30\u0E40\u0E21\u0E34\u0E14\u0E25\u0E34\u0E02\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C", value: "copyright_infringement" },
-  { label: "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E44\u0E21\u0E48\u0E40\u0E2B\u0E21\u0E32\u0E30\u0E2A\u0E21\u0E2B\u0E23\u0E37\u0E2D\u0E1C\u0E34\u0E14\u0E01\u0E0E\u0E2B\u0E21\u0E32\u0E22", value: "inappropriate_illegal" },
-  { label: "\u0E2D\u0E37\u0E48\u0E19\u0E46", value: "other" }
-];
 const mediaOptions = [
   { label: "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E2B\u0E23\u0E37\u0E2D\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E44\u0E21\u0E48\u0E40\u0E2B\u0E21\u0E32\u0E30\u0E2A\u0E21", value: "inappropriate" },
   { label: "\u0E02\u0E49\u0E2D\u0E01\u0E31\u0E07\u0E27\u0E25\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E01\u0E31\u0E1A\u0E04\u0E27\u0E32\u0E21\u0E40\u0E1B\u0E47\u0E19\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27", value: "privacy" },
@@ -89,37 +71,12 @@ const mediaOptions = [
   { label: "\u0E44\u0E21\u0E48\u0E43\u0E0A\u0E48\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E2B\u0E23\u0E37\u0E2D\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E02\u0E2D\u0E07\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49", value: "wrong_place" },
   { label: "\u0E2D\u0E37\u0E48\u0E19\u0E46", value: "other" }
 ];
-const reviewOptions = [
-  { label: "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E44\u0E21\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07", value: "irrelevant" },
-  { label: "\u0E2B\u0E22\u0E32\u0E1A\u0E04\u0E32\u0E22 / \u0E44\u0E21\u0E48\u0E40\u0E2B\u0E21\u0E32\u0E30\u0E2A\u0E21", value: "inappropriate" },
-  { label: "\u0E25\u0E32\u0E21\u0E01\u0E2D\u0E19\u0E32\u0E08\u0E32\u0E23", value: "pornographic" },
-  { label: "\u0E04\u0E27\u0E32\u0E21\u0E23\u0E38\u0E19\u0E41\u0E23\u0E07", value: "violence" },
-  { label: "\u0E02\u0E48\u0E21\u0E02\u0E39\u0E48 \u0E04\u0E38\u0E01\u0E04\u0E32\u0E21", value: "harassment" },
-  { label: "\u0E01\u0E25\u0E31\u0E48\u0E19\u0E41\u0E01\u0E25\u0E49\u0E07", value: "bullying" },
-  { label: "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E04\u0E27\u0E32\u0E21\u0E40\u0E01\u0E25\u0E35\u0E22\u0E14\u0E0A\u0E31\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E02\u0E31\u0E14\u0E41\u0E22\u0E49\u0E07", value: "hate_speech" },
-  { label: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E0B\u0E49\u0E33\u0E2B\u0E23\u0E37\u0E2D\u0E2A\u0E41\u0E1B\u0E21", value: "spam" },
-  { label: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E17\u0E47\u0E08", value: "fake_info" },
-  { label: "\u0E25\u0E30\u0E40\u0E21\u0E34\u0E14\u0E17\u0E23\u0E31\u0E1E\u0E22\u0E4C\u0E2A\u0E34\u0E19\u0E17\u0E32\u0E07\u0E1B\u0E31\u0E0D\u0E0D\u0E32", value: "copyright" },
-  { label: "\u0E25\u0E30\u0E40\u0E21\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E15\u0E01\u0E25\u0E07\u0E01\u0E32\u0E23\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19", value: "terms_violation" },
-  { label: "\u0E1C\u0E34\u0E14\u0E01\u0E0E\u0E2B\u0E21\u0E32\u0E22", value: "illegal" },
-  { label: "\u0E2A\u0E48\u0E07\u0E1C\u0E25\u0E01\u0E23\u0E30\u0E17\u0E1A\u0E15\u0E48\u0E2D\u0E1A\u0E38\u0E04\u0E04\u0E25", value: "personal_impact" },
-  { label: "\u0E40\u0E02\u0E49\u0E32\u0E02\u0E48\u0E32\u0E22\u0E2B\u0E25\u0E2D\u0E01\u0E25\u0E27\u0E07", value: "scam" },
-  { label: "\u0E2D\u0E37\u0E48\u0E19\u0E46", value: "other" }
-];
 const title = computed(() => {
   if (props.state === "place-edit") return "\u0E41\u0E08\u0E49\u0E07\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49";
-  if (props.state === "place-close-duplicate") return "\u0E41\u0E08\u0E49\u0E07\u0E1B\u0E34\u0E14\u0E2B\u0E23\u0E37\u0E2D\u0E0B\u0E49\u0E33";
-  if (props.state === "place") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49";
   if (props.state === "media") return "\u0E41\u0E08\u0E49\u0E07\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E37\u0E48\u0E2D\u0E19\u0E35\u0E49";
-  if (props.state === "review") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27\u0E19\u0E35\u0E49";
   return "";
 });
-const placeholderText = computed(() => {
-  if (props.state === "place" || props.state === "review") {
-    return "\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E01\u0E32\u0E23\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19";
-  }
-  return "\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07";
-});
+const placeholderText = computed(() => "\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07");
 const modelValue = defineModel({ type: Boolean, ...{
   default: false
 } });
@@ -131,18 +88,9 @@ const currentOptions = computed(() => {
   if (props.state === "place-edit") {
     return placeEditOptions;
   }
-  if (props.state === "place-close-duplicate") {
-    return placeCloseDuplicateOptions;
-  }
-  if (props.state === "place") {
-    return placeReportOptions;
-  }
   if (props.state === "media") {
     return mediaOptions;
   }
-  if (props.state === "review") {
-    return reviewOptions;
-  }
   return [];
 });
 const items = computed(() => {

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.d.vue.ts

@@ -1,4 +1,5 @@
 import type { PickerOptionMenuUserProps } from "#pukaad-ui/types/components/picker/picker-option-menu/picker-option-menu-user";
+import type { ModalReportSubmitPayload } from "#pukaad-ui/types/components/modal/modal-report";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "blog-edit": () => any;
     "report-announce": () => any;
@@ -12,7 +13,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-reply": () => any;
     "reply-edit": () => any;
     "profile-name-updated": (name: string) => any;
-    "place-close-duplicate": () => any;
     "profile-edit": () => any;
     "profile-share": () => any;
     "profile-follower-delete": () => any;
@@ -20,7 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "report-blog": () => any;
     "report-place": () => any;
     "report-profile": () => any;
+    "place-close-duplicate": () => any;
     archive: () => any;
+    "report-submit": (payload: ModalReportSubmitPayload) => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
     "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
@@ -34,7 +36,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onReview-reply"?: (() => any) | undefined;
     "onReply-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
-    "onPlace-close-duplicate"?: (() => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;
     "onProfile-follower-delete"?: (() => any) | undefined;
@@ -42,7 +43,9 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onReport-blog"?: (() => any) | undefined;
     "onReport-place"?: (() => any) | undefined;
     "onReport-profile"?: (() => any) | undefined;
+    "onPlace-close-duplicate"?: (() => any) | undefined;
     onArchive?: (() => any) | undefined;
+    "onReport-submit"?: ((payload: ModalReportSubmitPayload) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -11,7 +11,11 @@
   />
 
   <ModalShare v-model="isOpenModalShare" />
-  <ModalReport state v-model="isOpenModalReport" />
+  <ModalReport
+    :state="reportState"
+    v-model="isOpenModalReport"
+    @submit="onReportSubmit"
+  />
   <ModalProfileEdit
     v-model="isOpenModalProfileEdit"
     :profile-detail="props.profileDetail"
@@ -21,7 +25,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "review-reply", "reply-edit", "reply-delete", "archive", "profile-name-updated"]);
+const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "review-reply", "reply-edit", "reply-delete", "archive", "profile-name-updated", "report-submit"]);
 const props = defineProps({
   state: { type: String, required: false },
   profileDetail: { type: Object, required: false },
@@ -38,7 +42,11 @@ const props = defineProps({
 const isOpenModalShare = ref(false);
 const isOpenModalReport = ref(false);
 const isOpenModalProfileEdit = ref(false);
-const reportState = ref();
+const reportState = ref("place-edit");
+const onReportSubmit = (payload) => {
+  console.log(payload);
+  isOpenModalReport.value = false;
+};
 const menu = [
   {
     label: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",
@@ -135,12 +143,12 @@ const menu = [
     }
   },
   {
-    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19",
+    label: "\u0E41\u0E08\u0E49\u0E07\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49",
     name: "report-place",
-    icon: "lsicon:circle-information-outline",
+    icon: "lucide:flag",
     action: () => {
       isOpenModalReport.value = true;
-      reportState.value = "place";
+      reportState.value = "place-edit";
       emit("report-place");
     }
   },
@@ -183,7 +191,7 @@ const menu = [
     }
   },
   {
-    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27",
     name: "review-edit",
     icon: "lucide:square-pen",
     action: () => {
@@ -191,16 +199,15 @@ const menu = [
     }
   },
   {
-    label: "\u0E25\u0E1A",
+    label: "\u0E25\u0E1A\u0E23\u0E35\u0E27\u0E34\u0E27\u0E19\u0E35\u0E49",
     name: "review-delete",
     icon: "lucide:trash-2",
     action: () => {
       emit("review-delete");
     }
   },
-  // เมนูของกล่อง "การตอบกลับจาก ..." ที่ธุรกิจตอบไว้ (Figma 2456:88751)
   {
-    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E01\u0E32\u0E23\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A",
     name: "reply-edit",
     icon: "lucide:square-pen",
     action: () => {
@@ -208,7 +215,7 @@ const menu = [
     }
   },
   {
-    label: "\u0E25\u0E1A",
+    label: "\u0E25\u0E1A\u0E01\u0E32\u0E23\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A",
     name: "reply-delete",
     icon: "lucide:trash-2",
     action: () => {
@@ -227,6 +234,11 @@ const items = computed(() => {
       (fil) => ["profile-edit", "profile-share", "archive"].includes(fil.name)
     );
   }
+  if (props.state === "report-review") {
+    return menu.filter(
+      (item) => ["report-review"].includes(item.name)
+    );
+  }
   if (props.state === "my-review") {
     return menu.filter(
       (fil) => ["review-edit", "review-delete"].includes(fil.name)
@@ -255,30 +267,23 @@ const items = computed(() => {
     );
   }
   if (props.state === "place") {
-    return menu.filter(
-      (item) => ["report-place", "place-close-duplicate"].includes(item.name)
-    );
+    return [
+      {
+        label: "\u0E41\u0E08\u0E49\u0E07\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49",
+        name: "report-place",
+        icon: "lucide:flag",
+        action: () => {
+          reportState.value = "place-edit";
+          isOpenModalReport.value = true;
+        }
+      }
+    ];
   }
   if (props.state === "report-announce") {
     return menu.filter(
       (item) => ["report-announce"].includes(item.name)
     );
   }
-  if (props.state === "report-review") {
-    return menu.filter(
-      (item) => ["report-review"].includes(item.name)
-    );
-  }
-  if (props.state === "business-review") {
-    return menu.filter(
-      (item) => ["review-reply", "report-review"].includes(item.name)
-    );
-  }
-  if (props.state === "my-reply") {
-    return menu.filter(
-      (item) => ["reply-edit", "reply-delete"].includes(item.name)
-    );
-  }
-  return menu;
+  return [];
 });
 </script>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue.d.ts

@@ -1,4 +1,5 @@
 import type { PickerOptionMenuUserProps } from "#pukaad-ui/types/components/picker/picker-option-menu/picker-option-menu-user";
+import type { ModalReportSubmitPayload } from "#pukaad-ui/types/components/modal/modal-report";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "blog-edit": () => any;
     "report-announce": () => any;
@@ -12,7 +13,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-reply": () => any;
     "reply-edit": () => any;
     "profile-name-updated": (name: string) => any;
-    "place-close-duplicate": () => any;
     "profile-edit": () => any;
     "profile-share": () => any;
     "profile-follower-delete": () => any;
@@ -20,7 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "report-blog": () => any;
     "report-place": () => any;
     "report-profile": () => any;
+    "place-close-duplicate": () => any;
     archive: () => any;
+    "report-submit": (payload: ModalReportSubmitPayload) => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
     "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
@@ -34,7 +36,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onReview-reply"?: (() => any) | undefined;
     "onReply-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
-    "onPlace-close-duplicate"?: (() => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;
     "onProfile-follower-delete"?: (() => any) | undefined;
@@ -42,7 +43,9 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onReport-blog"?: (() => any) | undefined;
     "onReport-place"?: (() => any) | undefined;
     "onReport-profile"?: (() => any) | undefined;
+    "onPlace-close-duplicate"?: (() => any) | undefined;
     onArchive?: (() => any) | undefined;
+    "onReport-submit"?: ((payload: ModalReportSubmitPayload) => any) | undefined;
 }>, {}, {}, {}, {}, 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.357.0",
+  "version": "1.359.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",