pukaad-ui-lib 1.355.0 → 1.357.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.355.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/drawer/drawer-notification.vue

@@ -1,152 +1,152 @@
 <template>
-  <Drawer v-model="modelValue" title="การแจ้งเตือน" class="w-[748px]">
-    <div class="flex justify-between items-center mb-[16px]">
-      <ShadTabs v-model="selectedTab" class="w-full">
-        <div class="flex justify-between items-center w-full">
-          <ShadTabsList>
-            <ShadTabsTrigger
-              v-for="tab in tabs"
-              :key="tab.value"
-              :value="tab.value"
-              class="px-4 py-2"
-            >
-              <Icon name="lucide:layers" />
-              <div class="flex">
-                {{ tab.label }}
-                <div
+  <Drawer v-model="modelValue" title="การแจ้งเตือน" class="w-[748px]">
+    <div class="flex justify-between items-center mb-[16px]">
+      <ShadTabs v-model="selectedTab" class="w-full">
+        <div class="flex justify-between items-center w-full">
+          <ShadTabsList>
+            <ShadTabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="px-4 py-2"
+            >
+              <Icon name="lucide:layers" />
+              <div class="flex">
+                {{ tab.label }}
+                <div
                   v-if="
   tab.value === 'general' ? hasUnreadGeneral : hasUnreadSystem
-"
-                  class="bg-destructive rounded-full w-[10px] h-[10px] m-[2px] shrink-0"
-                />
-              </div>
-            </ShadTabsTrigger>
-          </ShadTabsList>
-
-          <div
-            v-if="notifications.length > 0"
-            class="text-primary font-body-medium cursor-pointer"
-            @click="markAllRead"
-          >
-            อ่านทั้งหมด
-          </div>
-        </div>
-
-        <ShadTabsContent value="general" class="flex flex-col gap-[8px]">
-          <template v-if="isLoading && notifications.length === 0">
-            <div class="flex justify-center py-[40px]">
-              <Icon
-                name="lucide:loader-2"
-                size="24"
-                class="animate-spin text-gray"
-              />
-            </div>
-          </template>
-
-          <template v-else-if="notifications.length === 0">
-            <div
-              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
-            >
-              <Icon name="lucide:bell-off" size="40" class="text-gray" />
-              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือน</div>
-            </div>
-          </template>
-
-          <template v-else>
-            <Card
-              v-for="item in notifications"
-              :key="item.id"
-              variant="outline"
-              class="cursor-pointer transition-colors"
-              :class="{ 'bg-bright': !item.is_read }"
-              @click="onClickNotification(item)"
-            >
-              <div class="flex gap-[8px] items-center">
-                <div class="flex gap-[8px] items-center w-full">
-                  <Avatar :size="30" :src="item.actor?.avatar ?? void 0" />
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-medium">
-                      <span
-                        v-if="item.actor"
-                        class="font-body-medium-prominent"
-                      >
-                        {{ item.actor.name }}
-                      </span>
-                      {{ item.message }}
-                      <span
-                        v-if="item.grouped_count && item.grouped_count > 1"
-                        class="text-gray font-body-small"
-                      >
-                        ({{ item.grouped_count }} คน)
-                      </span>
-                    </div>
-                    <div class="text-gray font-body-small">
-                      {{ formatRelativeTime(item.created_at) }}
-                    </div>
-                  </div>
-                </div>
-                <div
-                  v-if="!item.is_read"
-                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
-                />
-              </div>
-            </Card>
-          </template>
-        </ShadTabsContent>
-
-        <ShadTabsContent value="system" class="flex flex-col gap-[8px]">
-          <template v-if="isLoading && notifications.length === 0">
-            <div class="flex justify-center py-[40px]">
-              <Icon
-                name="lucide:loader-2"
-                size="24"
-                class="animate-spin text-gray"
-              />
-            </div>
-          </template>
-
-          <template v-else-if="notifications.length === 0">
-            <div
-              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
-            >
-              <Icon name="lucide:bell-off" size="40" class="text-gray" />
-              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือนระบบ</div>
-            </div>
-          </template>
-
-          <template v-else>
-            <Card
-              v-for="item in notifications"
-              :key="item.id"
-              variant="outline"
-              class="cursor-pointer transition-colors"
-              :class="{ 'bg-bright': !item.is_read }"
-              @click="onClickNotification(item)"
-            >
-              <div class="flex gap-[8px] items-center">
-                <div class="flex gap-[8px] items-center w-full">
-                  <Icon
-                    name="pukaad:memsg-square"
-                    class="w-[40px] h-[40px] shrink-0"
-                  />
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-medium">{{ item.message }}</div>
-                    <div class="text-gray font-body-small">
-                      {{ formatRelativeTime(item.created_at) }}
-                    </div>
-                  </div>
-                </div>
-                <div
-                  v-if="!item.is_read"
-                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
-                />
-              </div>
-            </Card>
-          </template>
-        </ShadTabsContent>
-      </ShadTabs>
-    </div>
-  </Drawer>
+"
+                  class="bg-destructive rounded-full w-[10px] h-[10px] m-[2px] shrink-0"
+                />
+              </div>
+            </ShadTabsTrigger>
+          </ShadTabsList>
+
+          <div
+            v-if="notifications.length > 0"
+            class="text-primary font-body-medium cursor-pointer"
+            @click="markAllRead"
+          >
+            อ่านทั้งหมด
+          </div>
+        </div>
+
+        <ShadTabsContent value="general" class="flex flex-col gap-[8px]">
+          <template v-if="isLoading && notifications.length === 0">
+            <div class="flex justify-center py-[40px]">
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
+            </div>
+          </template>
+
+          <template v-else-if="notifications.length === 0">
+            <div
+              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
+            >
+              <Icon name="lucide:bell-off" size="40" class="text-gray" />
+              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือน</div>
+            </div>
+          </template>
+
+          <template v-else>
+            <Card
+              v-for="item in notifications"
+              :key="item.id"
+              variant="outline"
+              class="cursor-pointer transition-colors"
+              :class="{ 'bg-bright': !item.is_read }"
+              @click="onClickNotification(item)"
+            >
+              <div class="flex gap-[8px] items-center">
+                <div class="flex gap-[8px] items-center w-full">
+                  <Avatar :size="30" :src="item.actor?.avatar ?? void 0" />
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-medium">
+                      <span
+                        v-if="item.actor"
+                        class="font-body-medium-prominent"
+                      >
+                        {{ item.actor.name }}
+                      </span>
+                      {{ item.message }}
+                      <span
+                        v-if="item.grouped_count && item.grouped_count > 1"
+                        class="text-gray font-body-small"
+                      >
+                        ({{ item.grouped_count }} คน)
+                      </span>
+                    </div>
+                    <div class="text-gray font-body-small">
+                      {{ formatRelativeTime(item.created_at) }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="!item.is_read"
+                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
+                />
+              </div>
+            </Card>
+          </template>
+        </ShadTabsContent>
+
+        <ShadTabsContent value="system" class="flex flex-col gap-[8px]">
+          <template v-if="isLoading && notifications.length === 0">
+            <div class="flex justify-center py-[40px]">
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
+            </div>
+          </template>
+
+          <template v-else-if="notifications.length === 0">
+            <div
+              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
+            >
+              <Icon name="lucide:bell-off" size="40" class="text-gray" />
+              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือนระบบ</div>
+            </div>
+          </template>
+
+          <template v-else>
+            <Card
+              v-for="item in notifications"
+              :key="item.id"
+              variant="outline"
+              class="cursor-pointer transition-colors"
+              :class="{ 'bg-bright': !item.is_read }"
+              @click="onClickNotification(item)"
+            >
+              <div class="flex gap-[8px] items-center">
+                <div class="flex gap-[8px] items-center w-full">
+                  <Icon
+                    name="pukaad:memsg-square"
+                    class="w-[40px] h-[40px] shrink-0"
+                  />
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-medium">{{ item.message }}</div>
+                    <div class="text-gray font-body-small">
+                      {{ formatRelativeTime(item.created_at) }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="!item.is_read"
+                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
+                />
+              </div>
+            </Card>
+          </template>
+        </ShadTabsContent>
+      </ShadTabs>
+    </div>
+  </Drawer>
 </template>
 
 <script setup>

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

@@ -48,11 +48,11 @@ 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;
     limit: number;
+    labelKey: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -48,11 +48,11 @@ 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;
     limit: number;
+    labelKey: string;
+    placeholder: string;
     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

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
     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

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

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

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

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

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

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-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/label/label-card-content.d.vue.ts

@@ -2,8 +2,6 @@ import type { HTMLAttributes } from "vue";
 export type LabelCardContentOverflow = "slide" | "ellipsis";
 export type LabelCardContentItem = {
     text: string;
-    color: string;
-    isSpecial?: boolean;
 };
 export interface LabelCardContentProps {
     class?: HTMLAttributes["class"];

package/dist/runtime/components/label/label-card-content.vue

@@ -10,12 +10,10 @@
         v-for="(item, index) in labels"
         :key="`${item.text}-${index}`"
         :class="[
-  'inline-flex items-center rounded-[2px] border-2 border-solid px-[6px] py-[2px] font-title-small-prominent',
-  item.isSpecial === false ? 'bg-white' : 'text-white',
+  'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large',
   isEllipsis ? 'min-w-0' : 'shrink-0',
   props.clickable && 'cursor-pointer'
 ]"
-        :style="itemStyles(item)"
         @click="props.clickable && emit('click', item)"
       >
         <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
@@ -70,10 +68,6 @@ const labels = computed(
 );
 const isEllipsis = computed(() => props.overflow === "ellipsis");
 const canSlide = computed(() => !isEllipsis.value);
-const itemStyles = (item) => {
-  const color = item.color?.startsWith("#") ? item.color : `#${item.color}`;
-  return item.isSpecial === false ? { color, borderColor: color } : { backgroundColor: color, borderColor: color };
-};
 const scroller = ref(null);
 const canScrollLeft = ref(false);
 const canScrollRight = ref(false);

package/dist/runtime/components/label/label-card-content.vue.d.ts

@@ -2,8 +2,6 @@ import type { HTMLAttributes } from "vue";
 export type LabelCardContentOverflow = "slide" | "ellipsis";
 export type LabelCardContentItem = {
     text: string;
-    color: string;
-    isSpecial?: boolean;
 };
 export interface LabelCardContentProps {
     class?: HTMLAttributes["class"];

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.355.0",
+  "version": "1.357.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",