pukaad-ui-lib 1.356.0 → 1.357.0

package/dist/module.json

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

package/dist/module.mjs

@@ -247,6 +247,7 @@ const module$1 = defineNuxtModule({
     _nuxt.options.runtimeConfig.public.RECAPTCHA_KEY ??= process.env.RECAPTCHA_KEY ?? "";
     _nuxt.hook("prepare:types", ({ references }) => {
       references.push({ path: resolver.resolve("./types/convert.d.ts") });
+      references.push({ path: resolver.resolve("./types/google-translate.d.ts") });
     });
   }
 });

package/dist/runtime/components/google-translate.client.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/google-translate.client.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="google_translate_element" class="hidden" />
+</template>
+
+<script setup>
+import { onMounted, nextTick } from "vue";
+import { useGoogleTranslate } from "#pukaad-ui/runtime/composables/useGoogleTranslate";
+const { activeLanguage, setLanguage } = useGoogleTranslate();
+const initGoogleTranslate = () => {
+  const googleTranslate = window.google?.translate;
+  if (!googleTranslate?.TranslateElement) return;
+  new googleTranslate.TranslateElement(
+    {
+      pageLanguage: "th",
+      includedLanguages: "th,en",
+      autoDisplay: false
+    },
+    "google_translate_element"
+  );
+  nextTick(() => setLanguage(activeLanguage.value));
+};
+onMounted(() => {
+  window.googleTranslateElementInit = initGoogleTranslate;
+  if (window.google?.translate) {
+    initGoogleTranslate();
+    return;
+  }
+  const existingScript = document.querySelector(
+    'script[src*="translate.google.com/translate_a/element.js"]'
+  );
+  if (existingScript) return;
+  const script = document.createElement("script");
+  script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+  script.async = true;
+  document.head.appendChild(script);
+});
+</script>
+
+<style>
+.goog-te-banner-frame.skiptranslate,iframe.skiptranslate{display:none!important}body{top:0!important}
+</style>

package/dist/runtime/components/google-translate.client.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     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;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

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

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

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

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

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

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: 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";
-    placeholder: string;
     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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { ModalReportProps } from "#pukaad-ui/types/components/modal/modal-report";
+import type { ModalReportProps, ModalReportSubmitPayload } from "#pukaad-ui/types/components/modal/modal-report";
 type __VLS_Props = ModalReportProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
@@ -7,15 +7,9 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    submit: (payload: {
-        value: string;
-        detail: string;
-    }) => any;
+    submit: (payload: ModalReportSubmitPayload) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((payload: {
-        value: string;
-        detail: string;
-    }) => any) | undefined;
+    onSubmit?: ((payload: ModalReportSubmitPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     loading: boolean;

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

@@ -17,33 +17,34 @@
           name="report_value"
           :label="item[0]?.label"
           :items="item"
-          v-model="formState.report_value"
+          v-model="formState.selectedValue"
         />
         <div
-          v-show="formState.report_value === item[0]?.value"
+          v-show="formState.selectedValue === item[0]?.value"
+          class="mt-[8px]"
         >
           <InputTextarea
             name="report_detail"
             rows="4"
             height-scroll
-            placeholder="คำอธิบายประกอบการรายงาน"
-            v-model="formState.report_detail"
+            :placeholder="placeholderText"
+            v-model="formState.description"
           />
         </div>
       </div>
     </div>
     <template #footer>
-        <Button class="w-full" variant="outline" type="button" @click="onCancel">
-          ยกเลิก
-        </Button>
-        <Button
-          class="w-full"
-          type="submit"
-          color="primary"
-          :disabled="formState.report_value === ''"
-        >
-          ส่ง
-        </Button>
+      <Button class="w-full" variant="outline" type="button" @click="onCancel">
+        ยกเลิก
+      </Button>
+      <Button
+        class="w-full"
+        type="submit"
+        color="primary"
+        :disabled="formState.selectedValue === ''"
+      >
+        ส่ง
+      </Button>
     </template>
   </Modal>
 </template>
@@ -55,46 +56,102 @@ const props = defineProps({
   state: { type: String, required: true },
   loading: { type: Boolean, required: false, default: false }
 });
-const initItems = [
-  "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E44\u0E21\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07",
-  "\u0E2B\u0E22\u0E32\u0E1A\u0E04\u0E32\u0E22 / \u0E44\u0E21\u0E48\u0E40\u0E2B\u0E21\u0E32\u0E30\u0E2A\u0E21",
-  "\u0E25\u0E32\u0E21\u0E01\u0E2D\u0E19\u0E32\u0E08\u0E32\u0E23",
-  "\u0E04\u0E27\u0E32\u0E21\u0E23\u0E38\u0E19\u0E41\u0E23\u0E07",
-  "\u0E02\u0E21\u0E02\u0E39\u0E48 \u0E04\u0E38\u0E01\u0E04\u0E32\u0E21",
-  "\u0E01\u0E25\u0E31\u0E48\u0E19\u0E41\u0E01\u0E25\u0E49\u0E07",
-  "\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",
-  "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E0B\u0E49\u0E33\u0E2B\u0E23\u0E37\u0E2D\u0E2A\u0E41\u0E1B\u0E21",
-  "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E17\u0E47\u0E08",
-  "\u0E25\u0E30\u0E40\u0E21\u0E34\u0E14\u0E17\u0E23\u0E31\u0E1E\u0E22\u0E4C\u0E2A\u0E34\u0E19\u0E17\u0E32\u0E07\u0E1B\u0E31\u0E0D\u0E0D\u0E32",
-  "\u0E25\u0E30\u0E40\u0E21\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E15\u0E01\u0E25\u0E07\u0E01\u0E32\u0E23\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19",
-  "\u0E1C\u0E34\u0E14\u0E01\u0E0E\u0E2B\u0E21\u0E32\u0E22",
-  "\u0E2A\u0E48\u0E07\u0E1C\u0E25\u0E01\u0E23\u0E30\u0E17\u0E1A\u0E15\u0E48\u0E2D\u0E1A\u0E38\u0E04\u0E04\u0E25",
-  "\u0E40\u0E02\u0E49\u0E32\u0E02\u0E48\u0E32\u0E22\u0E2B\u0E25\u0E2D\u0E01\u0E25\u0E27\u0E07",
-  "\u0E2D\u0E37\u0E48\u0E19\u0E46"
+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: "\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" }
+];
+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" },
+  { 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: "\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") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E19\u0E35\u0E49";
-  if (props.state === "profile") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E19\u0E35\u0E49";
-  if (props.state === "review") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E19\u0E35\u0E49";
-  if (props.state === "announce") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27\u0E19\u0E35\u0E49";
-  if (props.state === "blog") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E1A\u0E25\u0E47\u0E2D\u0E01\u0E19\u0E35\u0E49";
-  if (props.state === "comment") return "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E04\u0E2D\u0E21\u0E40\u0E21\u0E19\u0E19\u0E35\u0E49";
-  return "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E43\u0E19 ModalReport";
+  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 modelValue = defineModel({ type: Boolean, ...{
   default: false
 } });
 const formState = ref({
-  report_value: "",
-  report_detail: ""
+  selectedValue: "",
+  description: ""
+});
+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(() => {
-  return initItems.map((item) => [{ label: item, value: item }]);
+  return currentOptions.value.map((opt) => [opt]);
 });
 const reset = () => {
   formState.value = {
-    report_value: "",
-    report_detail: ""
+    selectedValue: "",
+    description: ""
   };
 };
 const onCancel = () => {
@@ -102,9 +159,13 @@ const onCancel = () => {
   modelValue.value = false;
 };
 const onSendReport = () => {
+  const selectedOpt = currentOptions.value.find(
+    (opt) => opt.value === formState.value.selectedValue
+  );
   emit("submit", {
-    value: formState.value.report_value,
-    detail: formState.value.report_detail
+    value: formState.value.selectedValue,
+    label: selectedOpt?.label || "",
+    description: formState.value.description
   });
 };
 watch(modelValue, (isOpen) => {

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

@@ -1,4 +1,4 @@
-import type { ModalReportProps } from "#pukaad-ui/types/components/modal/modal-report";
+import type { ModalReportProps, ModalReportSubmitPayload } from "#pukaad-ui/types/components/modal/modal-report";
 type __VLS_Props = ModalReportProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
@@ -7,15 +7,9 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    submit: (payload: {
-        value: string;
-        detail: string;
-    }) => any;
+    submit: (payload: ModalReportSubmitPayload) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((payload: {
-        value: string;
-        detail: string;
-    }) => any) | undefined;
+    onSubmit?: ((payload: ModalReportSubmitPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     loading: boolean;

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

@@ -12,6 +12,7 @@ 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;
@@ -19,7 +20,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "report-blog": () => any;
     "report-place": () => any;
     "report-profile": () => any;
-    "place-close-duplicate": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
     "onBlog-edit"?: (() => any) | undefined;
@@ -34,6 +34,7 @@ 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;
@@ -41,7 +42,6 @@ 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;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -12,6 +12,7 @@ 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;
@@ -19,7 +20,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "report-blog": () => any;
     "report-place": () => any;
     "report-profile": () => any;
-    "place-close-duplicate": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
     "onBlog-edit"?: (() => any) | undefined;
@@ -34,6 +34,7 @@ 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;
@@ -41,7 +42,6 @@ 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;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/useGoogleTranslate.d.ts

@@ -0,0 +1,4 @@
+export declare const useGoogleTranslate: () => {
+    activeLanguage: import("vue").Ref<string, string>;
+    setLanguage: (language: string) => void;
+};

package/dist/runtime/composables/useGoogleTranslate.js

@@ -0,0 +1,42 @@
+import { ref, nextTick } from "vue";
+const activeLanguage = ref("th");
+const GOOGLE_TRANSLATE_COOKIE = "googtrans";
+const getBrowserLanguage = () => {
+  if (import.meta.server) return "th";
+  return localStorage.getItem("google_translate_language") || "th";
+};
+const setTranslateCookie = (language) => {
+  if (import.meta.server) return;
+  const value = language === "th" ? "" : `/th/${language}`;
+  const expires = "expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  if (!value) {
+    document.cookie = `${GOOGLE_TRANSLATE_COOKIE}=; path=/; ${expires}`;
+    document.cookie = `${GOOGLE_TRANSLATE_COOKIE}=; path=/; domain=.${location.hostname}; ${expires}`;
+    return;
+  }
+  document.cookie = `${GOOGLE_TRANSLATE_COOKIE}=${value}; path=/`;
+};
+const applyGoogleTranslateLanguage = (language) => {
+  if (import.meta.server) return;
+  const select = document.querySelector(".goog-te-combo");
+  if (!select) return;
+  select.value = language;
+  select.dispatchEvent(new Event("change"));
+};
+export const useGoogleTranslate = () => {
+  const setLanguage = (language) => {
+    activeLanguage.value = language;
+    if (import.meta.client) {
+      localStorage.setItem("google_translate_language", language);
+      setTranslateCookie(language);
+      nextTick(() => applyGoogleTranslateLanguage(language));
+    }
+  };
+  if (import.meta.client && activeLanguage.value === "th") {
+    activeLanguage.value = getBrowserLanguage();
+  }
+  return {
+    activeLanguage,
+    setLanguage
+  };
+};

package/package.json

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