pukaad-ui-lib 1.360.0 → 1.362.0

package/dist/module.json

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

package/dist/runtime/components/carousel.d.vue.ts

@@ -1,4 +1,5 @@
 export interface CarouselItem {
+    id?: string | number;
     url: string;
     description?: string;
 }

package/dist/runtime/components/carousel.vue.d.ts

@@ -1,4 +1,5 @@
 export interface CarouselItem {
+    id?: string | number;
     url: string;
     description?: string;
 }

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

@@ -1,4 +1,6 @@
+import { type HTMLAttributes } from "vue";
 export interface MediaItem {
+    id?: string | number;
     url: string;
     description?: string;
 }
@@ -8,6 +10,8 @@ type __VLS_Props = {
     variant?: "featured" | "album";
     state?: "personal" | "office" | "business";
     title?: string;
+    placeId?: string | number;
+    class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;

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

@@ -2,7 +2,7 @@
   <!-- Personal state → Featured layout — 1 รูป: w-full -->
   <div
     v-if="layoutMode === 'featured' && photos.length === 1"
-    class="h-[360px]"
+    :class="cn('h-[360px]', props.class)"
   >
     <div
       class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer"
@@ -20,7 +20,7 @@
   <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
   <div
     v-else-if="layoutMode === 'featured' && photos.length === 2"
-    class="flex gap-[8px] h-[360px]"
+    :class="cn('flex gap-[8px] h-[360px]', props.class)"
   >
     <div
       class="flex-1 rounded-[8px] overflow-hidden cursor-pointer"
@@ -47,7 +47,10 @@
   </div>
 
   <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
-  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
+  <div
+    v-else-if="layoutMode === 'featured'"
+    :class="cn('flex gap-[8px] h-[360px]', props.class)"
+  >
     <div
       v-if="photos[0]"
       class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
@@ -140,7 +143,10 @@
   </div>
 
   <!-- Office / Business state → Album layout -->
-  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
+  <div
+    v-else-if="layoutMode === 'album'"
+    :class="cn('grid grid-cols-5 gap-[10px]', props.class)"
+  >
     <!-- Row 1: photos[0..3] -->
     <div
       v-for="(photo, i) in galleryRow1"
@@ -222,19 +228,24 @@
     :title="props.title"
     :start-index="mediaStartIndex"
     :uploader-label="uploaderLabel"
+    :place-id="props.placeId"
   />
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
 import { useConvert } from "../../composables/useConvert";
+import { cn } from "../../plugins/shadcn";
+defineOptions({ inheritAttrs: false });
 const { convertNumber } = useConvert();
 const props = defineProps({
   photos: { type: Array, required: false, default: () => [] },
   videos: { type: Array, required: false, default: () => [] },
   variant: { type: String, required: false },
   state: { type: String, required: false, default: "personal" },
-  title: { type: String, required: false, default: "" }
+  title: { type: String, required: false, default: "" },
+  placeId: { type: [String, Number], required: false },
+  class: { type: null, required: false }
 });
 const layoutMode = computed(() => {
   if (props.variant) return props.variant;

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

@@ -1,4 +1,6 @@
+import { type HTMLAttributes } from "vue";
 export interface MediaItem {
+    id?: string | number;
     url: string;
     description?: string;
 }
@@ -8,6 +10,8 @@ type __VLS_Props = {
     variant?: "featured" | "album";
     state?: "personal" | "office" | "business";
     title?: string;
+    placeId?: string | number;
+    class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;

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

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

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

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

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

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

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

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

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

@@ -19,9 +19,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    description: string;
     labelKey: string;
     placeholder: string;
-    description: string;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -19,9 +19,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    description: string;
     labelKey: string;
     placeholder: string;
-    description: string;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

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

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

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

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

@@ -8,6 +8,8 @@ export interface ModalMediaViewProps {
     review?: CardReviewProps;
     /** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
     uploaderLabel?: string;
+    /** placeId ของสถานที่เจ้าของสื่อนี้ — ใช้ยิง POST /suggest-places/:id/reports ตอนกดรายงาน */
+    placeId?: string | number;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {

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

@@ -174,22 +174,44 @@
 
 <script setup>
 import { ref, computed } from "vue";
+import { useNuxtApp } from "nuxt/app";
 import { useConvert } from "../../composables/useConvert";
+import { useApi } from "../../composables/useApi";
 const { convertNumber, convertDateTorelativeText } = useConvert();
+const api = useApi();
+const { $toast } = useNuxtApp();
 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 },
-  uploaderLabel: { type: String, required: false, default: "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A" }
+  uploaderLabel: { type: String, required: false, default: "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A" },
+  placeId: { type: [String, Number], required: false }
 });
 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);
+const onReportSubmit = async (payload) => {
+  if (!props.placeId || !currentItem.value?.id) {
+    isOpenModalReport.value = false;
+    return;
+  }
+  try {
+    await api(`/suggest-places/${props.placeId}/reports`, {
+      method: "post",
+      body: {
+        media_id: String(currentItem.value.id),
+        reason_code: payload.value,
+        description: payload.description
+      }
+    });
+    $toast?.success("\u0E2A\u0E48\u0E07\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+  } catch (error) {
+    console.error(error);
+    $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 !");
+  }
   isOpenModalReport.value = false;
 };
 </script>

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

@@ -8,6 +8,8 @@ export interface ModalMediaViewProps {
     review?: CardReviewProps;
     /** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
     uploaderLabel?: string;
+    /** placeId ของสถานที่เจ้าของสื่อนี้ — ใช้ยิง POST /suggest-places/:id/reports ตอนกดรายงาน */
+    placeId?: string | number;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {

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

@@ -11,7 +11,7 @@
       <div
         v-for="(item, i) in items"
         :key="i"
-        class="flex flex-col border-bright px-[8px] py-[6px] border-b"
+        class="flex flex-col border-bright px-[8px] py-[6px] border-b last:border-b-0"
       >
         <InputRadio
           name="report_value"
@@ -58,7 +58,7 @@ const props = defineProps({
 });
 const placeEditOptions = [
   { 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: "\u0E44\u0E21\u0E48\u0E21\u0E35\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: "\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" }
@@ -67,7 +67,10 @@ 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" },
   { label: "\u0E04\u0E38\u0E13\u0E20\u0E32\u0E1E\u0E15\u0E48\u0E33", value: "low_quality" },
-  { label: "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E17\u0E35\u0E48\u0E21\u0E38\u0E48\u0E07\u0E23\u0E49\u0E32\u0E22 \u0E40\u0E1B\u0E47\u0E19\u0E2D\u0E31\u0E19\u0E15\u0E23\u0E32\u0E22 \u0E2B\u0E23\u0E37\u0E2D\u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E23\u0E38\u0E19\u0E41\u0E23\u0E07", value: "harmful" },
+  {
+    label: "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E17\u0E35\u0E48\u0E21\u0E38\u0E48\u0E07\u0E23\u0E49\u0E32\u0E22 \u0E40\u0E1B\u0E47\u0E19\u0E2D\u0E31\u0E19\u0E15\u0E23\u0E32\u0E22 \u0E2B\u0E23\u0E37\u0E2D\u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E23\u0E38\u0E19\u0E41\u0E23\u0E07",
+    value: "harmful"
+  },
   { 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" }
 ];

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

@@ -44,7 +44,7 @@ const isOpenModalReport = ref(false);
 const isOpenModalProfileEdit = ref(false);
 const reportState = ref("place-edit");
 const onReportSubmit = (payload) => {
-  console.log(payload);
+  emit("report-submit", payload);
   isOpenModalReport.value = false;
 };
 const menu = [

package/package.json

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