pukaad-ui-lib 1.296.0 → 1.297.0

package/dist/module.json

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

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -6,11 +6,13 @@ type __VLS_Props = {
     disabledMenu?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
-    "select-image": (item: CardReviewProps, index: number, liked: boolean) => any;
+    "select-image": (item: CardReviewProps, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
-    "onSelect-image"?: ((item: CardReviewProps, index: number, liked: boolean) => any) | undefined;
+    "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;

package/dist/runtime/components/card/card-review.vue

@@ -1,70 +1,103 @@
 <template>
-  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
-    <div v-if="props.item.user.avatar">
-      <Avatar :src="props.item.user.avatar" alt="profile_myProfile" :size="30" class="cursor-pointer"
-        @click="NavigateToProfile(props.item.user.path_name)" />
-    </div>
-    <div class="flex flex-col gap-[24px] w-full">
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[6px]">
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex justify-between items-center">
-              <div @click="NavigateToProfile(props.item.user.path_name)" class="font-body-large cursor-pointer">
-                {{ props.item.user?.name }}
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <Button variant="text" :color="liked ? 'primary' : 'default'" :disabled="props.disabledLike"
-                  :aria-pressed="liked" @click="toggleLike">
-                  <Icon :name="liked ? 'fa6-solid:thumbs-up' : 'fa6-regular:thumbs-up'" :size="20" />
-                  {{ convertNumber(likeCount) }}
-                </Button>
-                <PickerOptionMenuUser v-if="!props.disabledMenu" :state="menuType" disabled-padding />
-              </div>
-            </div>
-            <div class="text-gray font-body-small">
-              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
-              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
-            </div>
-          </div>
-          <div class="flex gap-[8px] items-center">
-            <InputRating :size="16" readonly :model-value="props.item.review?.rating" />
-            <div class="text-gray font-body-small">
-              {{ props.item.review?.created_at }}
-            </div>
-          </div>
-        </div>
-
-        <div v-if="props.item.review?.description" class="font-body-large">
-          {{ props.item.review?.description }}
-        </div>
-
-        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
-          <DisplayImageReview :items="props.item.review?.images" @select="selectImage" />
-        </div>
-      </div>
-      <div v-if="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
-          <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <ModalMediaView v-model="isOpen" :items="props.item.review?.images" :start-index="startIndex" title="รูปภาพรีวิว" />
+  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
+    <div v-if="props.item.user.avatar">
+      <Avatar
+        :src="props.item.user.avatar"
+        alt="profile_myProfile"
+        :size="30"
+        class="cursor-pointer"
+        @click="navigateToProfile(props.item.user.path_name)"
+      />
+    </div>
+    <div class="flex flex-col gap-[24px] w-full">
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[6px]">
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex justify-between items-center">
+              <div
+                class="font-body-large cursor-pointer"
+                @click="navigateToProfile(props.item.user.path_name)"
+              >
+                {{ props.item.user?.name }}
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <Button
+                  v-if="props.item.user?.is_my_review"
+                  variant="text"
+                  color="default"
+                  disabled-padding
+                  @click="emit('edit', props.item)"
+                >
+                  <Icon name="lucide:pencil" :size="16" />
+                  แก้ไข
+                </Button>
+                <Button
+                  variant="text"
+                  :color="liked ? 'primary' : 'default'"
+                  :disabled="props.disabledLike"
+                  :aria-pressed="liked"
+                  @click="toggleLike"
+                >
+                  <Icon
+                    :name="liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'"
+                    :size="20"
+                  />
+                  {{ convertNumber(likeCount) }}
+                </Button>
+                <PickerOptionMenuUser
+                  v-if="!props.disabledMenu"
+                  :state="menuType"
+                  disabled-padding
+                />
+              </div>
+            </div>
+            <div class="text-gray font-body-small">
+              {{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
+              {{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
+            </div>
+          </div>
+          <div class="flex gap-[8px] items-center">
+            <InputRating :size="11" readonly :model-value="props.item.review?.rating" />
+            <div class="text-gray font-body-small">
+              {{ convertDate(props.item.review?.created_at ?? "") }}
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.item.review?.description" class="font-body-large">
+          {{ props.item.review?.description }}
+        </div>
+
+        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
+          <DisplayImageReview :items="props.item.review?.images" @select="selectImage" />
+        </div>
+      </div>
+
+      <div v-if="props.item.replies">
+        <div class="p-[16px] rounded-sm bg-bright">
+          <div class="text-gray font-body-large">
+            การตอบกลับจาก {{ props.item.replies?.author }}
+          </div>
+          <div class="font-body-large">{{ props.item.replies?.description }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ModalMediaView
+    v-model="isOpen"
+    :items="props.item.review?.images"
+    :start-index="startIndex"
+    title="รูปภาพรีวิว"
+  />
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useConvert } from "../../composables/useConvert";
 const router = useRouter();
-const { convertNumber } = useConvert();
-const isOpen = ref(false);
+const { convertNumber, convertDate } = useConvert();
 const props = defineProps({
   item: { type: Object, required: true, default: () => ({
     review_id: "0",
@@ -74,7 +107,8 @@ const props = defineProps({
       avatar: "",
       path_name: "",
       review_count: 0,
-      like_count: 0
+      like_count: 0,
+      is_my_review: false
     },
     review: {
       rating: 0,
@@ -94,15 +128,29 @@ const props = defineProps({
   disabledLike: { type: Boolean, required: false, default: false },
   disabledMenu: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["toggle-like", "select-image"]);
+const emit = defineEmits(["toggle-like", "select-image", "edit"]);
+const isOpen = ref(false);
+const startIndex = ref(0);
 const liked = ref(props.item.review?.liked ?? false);
 const likeCount = ref(props.item.review?.like_count ?? 0);
+watch(
+  () => props.item.review?.liked,
+  (val) => {
+    liked.value = val ?? false;
+  }
+);
+watch(
+  () => props.item.review?.like_count,
+  (val) => {
+    likeCount.value = val ?? 0;
+  }
+);
 const menuType = computed(() => props.isProfile ? "my-profile" : "profile");
-const NavigateToProfile = (pathName) => {
+const navigateToProfile = (pathName) => {
   if (!pathName) return;
-  router.push(`/${pathName}`);
+  router.push(`/@${pathName}`);
 };
-function toggleLike() {
+const toggleLike = () => {
   if (liked.value) {
     likeCount.value -= 1;
     liked.value = false;
@@ -111,11 +159,10 @@ function toggleLike() {
     liked.value = true;
   }
   emit("toggle-like", props.item, liked.value);
-}
-const startIndex = ref(0);
+};
 const selectImage = (index) => {
   startIndex.value = index;
   isOpen.value = true;
-  emit("select-image", props.item, index, liked.value);
+  emit("select-image", props.item, index);
 };
 </script>

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -6,11 +6,13 @@ type __VLS_Props = {
     disabledMenu?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (item: CardReviewProps) => any;
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
-    "select-image": (item: CardReviewProps, index: number, liked: boolean) => any;
+    "select-image": (item: CardReviewProps, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
-    "onSelect-image"?: ((item: CardReviewProps, index: number, liked: boolean) => any) | undefined;
+    "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;

package/dist/runtime/components/display/display-rating-summary.d.vue.ts

@@ -8,7 +8,11 @@ export interface DisplayRatingSummaryProps {
     distribution?: RatingDistribution[];
     badge?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "write-review": () => any;
+}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{
+    "onWrite-review"?: (() => any) | undefined;
+}>, {
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];

package/dist/runtime/components/display/display-rating-summary.vue

@@ -1,30 +1,49 @@
 <template>
   <div class="flex gap-[24px] items-center">
     <!-- Left: คะแนนรวม -->
-    <div class="flex flex-col items-center text-primary flex-shrink-0 w-[100px]">
-      <div class="text-[56px] font-bold leading-none">
-        {{ Number(props.rating).toFixed(1) }}
-      </div>
-      <div class="font-body-large mt-[4px]">
-        {{ convertNumber(Number(props.totalReviews)) }} รีวิว
+    <div class="flex flex-col gap-[8px] w-[214px] justify-center items-center">
+      <div
+        class="flex flex-col items-center text-primary flex-shrink-0 w-[100px]"
+      >
+        <div class="text-[56px] font-bold leading-none">
+          {{ Number(props.rating).toFixed(1) }}
+        </div>
+        <div class="font-body-large">
+          {{ convertNumber(Number(props.totalReviews)) }} รีวิว
+        </div>
       </div>
+      <Button color="primary" @click="emit('write-review')">
+        <Icon name="pukaad:write-review" /> เขียนรีวิว
+      </Button>
     </div>
-
     <!-- Right: แถบการกระจายคะแนน -->
     <div class="flex flex-col gap-[8px] flex-1">
-      <div v-for="(item, idx) in sortedDistribution" :key="item.stars" class="flex items-center gap-[12px]">
+      <div
+        v-for="(item, idx) in sortedDistribution"
+        :key="item.stars"
+        class="flex items-center gap-[12px]"
+      >
         <!-- badge แสดงบน row แรก (5 ดาว) -->
         <div class="relative flex-shrink-0">
           <InputRating :size="16" readonly :model-value="item.stars" />
-          <div v-if="idx === 0 && props.badge != null"
-            class="absolute -top-[10px] -left-[10px] min-w-[22px] h-[22px] px-[4px] rounded-full bg-error flex items-center justify-center">
-            <span class="text-white text-[11px] font-bold leading-none">{{ props.badge }}</span>
+          <div
+            v-if="idx === 0 && props.badge != null"
+            class="absolute -top-[10px] -left-[10px] min-w-[22px] h-[22px] px-[4px] rounded-full bg-error flex items-center justify-center"
+          >
+            <span class="text-white text-[11px] font-bold leading-none">{{
+              props.badge
+            }}</span>
           </div>
         </div>
 
         <div class="flex-1 max-w-[260px]">
-          <ProgressBar :value="maxCount > 0 ? item.count / maxCount * 100 : 0" full-width :height="8"
-            color-active="#FBC02D" color-background="#E0E0E0" />
+          <ProgressBar
+            :value="maxCount > 0 ? item.count / maxCount * 100 : 0"
+            full-width
+            :height="8"
+            color-active="#FBC02D"
+            color-background="#E0E0E0"
+          />
         </div>
 
         <div class="text-gray font-body-large w-[72px]">
@@ -39,6 +58,7 @@
 import { computed } from "vue";
 import { useConvert } from "../../composables/useConvert";
 const { convertNumber } = useConvert();
+const emit = defineEmits(["write-review"]);
 const props = defineProps({
   rating: { type: [Number, String], required: false, default: 0 },
   totalReviews: { type: [Number, String], required: false, default: 0 },

package/dist/runtime/components/display/display-rating-summary.vue.d.ts

@@ -8,7 +8,11 @@ export interface DisplayRatingSummaryProps {
     distribution?: RatingDistribution[];
     badge?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "write-review": () => any;
+}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{
+    "onWrite-review"?: (() => any) | undefined;
+}>, {
     rating: number | string;
     totalReviews: number | string;
     distribution: RatingDistribution[];

package/dist/runtime/components/drawer/drawer-post-review.d.vue.ts

@@ -12,20 +12,18 @@ export interface DrawerPostReviewItem {
     description: string;
     photos: IFileItem[];
 }
-export interface DrawerPostReviewProps {
+type __VLS_Props = {
     item?: DrawerPostReviewItem;
-}
-type __VLS_Props = DrawerPostReviewProps;
+};
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (data: unknown) => any;
     "update:modelValue": (value: boolean) => any;
-} & {
-    success: (data: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSuccess?: ((data: any) => any) | undefined;
+    onSuccess?: ((data: unknown) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     item: DrawerPostReviewItem;

package/dist/runtime/components/drawer/drawer-post-review.vue

@@ -1,87 +1,82 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[16px]">
-        <div
-          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
-        >
-          <Image
-            v-if="form.coverImage"
-            :src="form.coverImage"
-            width="auto"
-            height="auto"
-            fit="cover"
-          />
-        </div>
-        <div class="flex flex-col gap-[4px]">
-          <div class="font-body-large-prominent">
-            {{ form.placeName }}
-          </div>
-          <div class="font-body-small text-gray">
-            {{ form.address }}
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center justify-center py-[16px]">
-        <InputRating v-model="form.rating" :size="28" />
-      </div>
-      <InputTextarea
-        name="description"
-        label="คำอธิบาย"
-        placeholder="เขียนรีวิวของคุณ"
-        showCounter
-        v-model="form.description"
-        class="min-h-[120px]"
-      />
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[4px]">
-          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
-          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
-        </div>
-        <InputFile
-          :limit="9"
-          name="photos"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.photos"
-        />
-        <div class="flex flex-col text-gray font-body-small">
-          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-          <div>ขนาดไฟล์สูงสุด 30 mb</div>
-        </div>
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose" :disabled="isSubmitting"
-          >ยกเลิก</Button
-        >
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="form.rating === 0 || isSubmitting"
-          :loading="isSubmitting"
-        >
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[16px]">
+        <div class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0">
+          <Image
+            v-if="form.coverImage"
+            :src="form.coverImage"
+            width="auto"
+            height="auto"
+            fit="cover"
+          />
+        </div>
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large-prominent">{{ form.placeName }}</div>
+          <div class="font-body-small text-gray">{{ form.address }}</div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-center py-[16px]">
+        <InputRating v-model="form.rating" :size="28" />
+      </div>
+
+      <InputTextarea
+        name="description"
+        label="คำอธิบาย"
+        placeholder="เขียนรีวิวของคุณ"
+        showCounter
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[4px]">
+          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
+          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
+        </div>
+        <InputFile
+          :limit="9"
+          name="photos"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.photos"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไฟล์สูงสุด 30 mb</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose" :disabled="isSubmitting">ยกเลิก</Button>
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="form.rating === 0 || isSubmitting"
+          :loading="isSubmitting"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>
-import { useApi } from "../../composables/useApi";
 import { ref, watch, computed } from "vue";
 import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
 const { $alert } = useNuxtApp();
 const api = useApi();
-const emit = defineEmits(["success"]);
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({
     placeId: "",
@@ -93,6 +88,7 @@ const props = defineProps({
     photos: []
   }) }
 });
+const emit = defineEmits(["success"]);
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const isSubmitting = ref(false);
 const form = ref({
@@ -104,10 +100,6 @@ const form = ref({
   description: props.item.description,
   photos: props.item.photos ? [...props.item.photos] : []
 });
-const isEdit = computed(() => !!(props.item?.rating && props.item.rating > 0));
-const drawerTitle = computed(
-  () => isEdit.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27"
-);
 watch(isOpen, (newVal) => {
   if (newVal) {
     form.value = {
@@ -121,6 +113,8 @@ watch(isOpen, (newVal) => {
     };
   }
 });
+const isEdit = computed(() => (props.item?.rating ?? 0) > 0);
+const drawerTitle = computed(() => isEdit.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27");
 const hasChanges = () => {
   const orig = props.item;
   if (form.value.rating !== orig.rating) return true;
@@ -128,29 +122,17 @@ const hasChanges = () => {
   if (form.value.photos.length !== (orig.photos?.length ?? 0)) return true;
   return false;
 };
-const onClose = async () => {
-  if (hasChanges()) {
-    const { isConfirmed } = await $alert.show({
-      type: "warning",
-      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
-      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
-      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
-      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
-      showCancelBtn: true
-    });
-    if (isConfirmed) isOpen.value = false;
-  } else {
-    isOpen.value = false;
-  }
-};
 const uploadNewPhotos = async (items) => {
   const newItems = items.filter((it) => it.file);
   if (newItems.length === 0) return [];
   const fileNames = newItems.map((it) => it.file.name);
-  const presignedRes = await api("/storage/presigned-urls", {
-    method: "post",
-    body: { state: "suggest-place-review", file_name: fileNames }
-  });
+  const presignedRes = await api(
+    "/storage/presigned-urls",
+    {
+      method: "post",
+      body: { state: "suggest-place-review", file_name: fileNames }
+    }
+  );
   const uploadItems = presignedRes?.data?.items ?? [];
   if (uploadItems.length !== newItems.length) {
     throw new Error("\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2A\u0E23\u0E49\u0E32\u0E07 upload URL \u0E44\u0E14\u0E49 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
@@ -168,6 +150,21 @@ const uploadNewPhotos = async (items) => {
   );
   return uploadItems.map((u) => u.public_url);
 };
+const onClose = async () => {
+  if (hasChanges()) {
+    const { isConfirmed } = await $alert.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
+      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
+      showCancelBtn: true
+    });
+    if (isConfirmed) isOpen.value = false;
+  } else {
+    isOpen.value = false;
+  }
+};
 const onSubmit = async () => {
   if (isSubmitting.value) return;
   isSubmitting.value = true;
@@ -189,7 +186,8 @@ const onSubmit = async () => {
     emit("success", response?.data);
     isOpen.value = false;
   } catch (err) {
-    const msg = err?.data?.message || err?.message || "\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";
+    const apiErr = err;
+    const msg = apiErr?.data?.message || apiErr?.message || "\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";
     await $alert.show({
       type: "error",
       title: "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",

package/dist/runtime/components/drawer/drawer-post-review.vue.d.ts

@@ -12,20 +12,18 @@ export interface DrawerPostReviewItem {
     description: string;
     photos: IFileItem[];
 }
-export interface DrawerPostReviewProps {
+type __VLS_Props = {
     item?: DrawerPostReviewItem;
-}
-type __VLS_Props = DrawerPostReviewProps;
+};
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (data: unknown) => any;
     "update:modelValue": (value: boolean) => any;
-} & {
-    success: (data: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSuccess?: ((data: any) => any) | undefined;
+    onSuccess?: ((data: unknown) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     item: DrawerPostReviewItem;

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

@@ -201,8 +201,9 @@ const onSubmit = async () => {
     emit("submit", formData.value);
     isOpen.value = false;
   } catch (e) {
+    const apiErr = e;
     $toast?.error?.(
-      e?.data?.error || e?.data?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D"
+      apiErr?.data?.error || apiErr?.data?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D"
     );
   } finally {
     loading.value = false;

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

@@ -1,4 +1,12 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
+interface FileItem {
+    file?: File;
+    url: string;
+}
+interface ContactChannel {
+    type: string;
+    value: string;
+}
 export interface SuggestPlaceData {
     address?: InputAddressValue;
     latLng?: {
@@ -8,18 +16,22 @@ export interface SuggestPlaceData {
     businessName?: string;
     nameTh?: string;
     nameEn?: string;
-    categories?: any[];
+    categories?: {
+        id?: string;
+        value?: string;
+        label?: string;
+    }[];
     description?: string;
-    openingHours?: any;
+    openingHours?: Record<string, unknown>;
     phone?: string;
     extraPhones?: string[];
     isReview?: boolean;
     rating?: number;
     reviewDescription?: string;
-    reviewPhotos?: any[];
-    photos?: any[];
-    videos?: any[];
-    contactChannels?: any[];
+    reviewPhotos?: FileItem[];
+    photos?: FileItem[];
+    videos?: FileItem[];
+    contactChannels?: ContactChannel[];
 }
 type __VLS_Props = {
     state?: "personal" | "business" | "backoffice";

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

@@ -1,76 +1,130 @@
 <template>
-  <div class="flex gap-[16px] w-full">
-    <!-- กรอกข้อมูล -->
-    <div class="flex flex-col gap-[16px] w-[490px]">
-      <InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
-      <template v-if="isAddressCompleted">
-        <div class="font-body-large-prominent">รายละเอียด</div>
-        <div class="flex flex-col gap-[4px]">
-          <InputAutocomplete name="businessName" v-model="modelValue.businessName" label="ชื่อสถานที่ธุรกิจ"
-            placeholder="กรอกชื่อสถานที่" required show-counter :limit="180" :free-text="true" :fetch-fn="fetchApprovedPlaces"
-            value-key="business_name" label-key="business_name" />
-          <InputTextField v-if="extraNameCount >= 1" name="nameTh" v-model="modelValue.nameTh" label="ชื่อภาษาไทย"
-            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก" show-counter :limit="180" />
-          <InputTextField v-if="extraNameCount >= 2" name="nameEn" v-model="modelValue.nameEn" label="ชื่อภาษาอังกฤษ"
-            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก" show-counter :limit="180" />
-          <Button v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
-            <Icon name="lucide:plus" />
-            เพิ่มชื่อสถานที่
-          </Button>
-        </div>
-        <InputCombobox name="categories" v-model="modelValue.categories" label="หมวดหมู่"
-          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่" :limit="3" show-counter :options="categoryOptions" required
-          multiple />
-        <InputTextarea name="description" v-model="modelValue.description" label="คำอธิบาย"
-          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)" :limit="220" show-counter />
-        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
-        <div class="flex flex-col gap-[8px]">
-          <InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
-          <InputTextField v-for="(item, index) in modelValue.extraPhones" :key="index" :name="`extraPhone-${index}`"
-            label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" v-model="modelValue.extraPhones[index]" />
-          <Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
-            <Icon name="lucide:plus" />
-            เพิ่มเบอร์โทรศัพท์
-          </Button>
-          <InputLink name="contactChannels" format="contact_channel" default-first
-            v-model="modelValue.contactChannels" />
-        </div>
-        <template v-if="props.state === 'personal'">
-          <div class="flex flex-col gap-[16px]">
-            <InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
-            <template v-if="modelValue.isReview">
-              <InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
-              <InputTextarea name="reviewDescription" v-model="modelValue.reviewDescription" label="คำอธิบาย"
-                placeholder="คำอธิบายเกี่ยวกับสถานที่" show-counter />
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex flex-col gap-[4px]">
-                  <div class="font-body-large-prominent text-gray">
-                    เพิ่มภาพถ่าย
-                  </div>
-                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
-                </div>
-                <InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
-                <div class="font-body-small text-gray w-[250px]">
-                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
-                  ขนาดไฟล์ไม่เกิน 30 mb
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-    </div>
-
-    <!-- แสดง polygon -->
-    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
-      <SuggestPlaceMap :province-id="modelValue.address?.province_id" :amphur-id="modelValue.address?.amphur_id"
-        :tambon-id="modelValue.address?.tambon_id" @update:lat-lng="modelValue.latLng = $event" />
-      <InputTextField name="latitude-longitude" icon-prepend="lucide:locate-fixed" readonly
-        placeholder="ละติจูด, ลองจิจูด" :model-value="
+  <div class="flex gap-[16px] w-full">
+    <!-- กรอกข้อมูล -->
+    <div class="flex flex-col gap-[16px] w-[490px]">
+      <InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
+      <template v-if="isAddressCompleted">
+        <div class="font-body-large-prominent">รายละเอียด</div>
+        <div class="flex flex-col gap-[4px]">
+          <InputAutocomplete
+            name="businessName"
+            v-model="modelValue.businessName"
+            label="ชื่อสถานที่ธุรกิจ"
+            placeholder="กรอกชื่อสถานที่"
+            required
+            show-counter
+            :limit="180"
+            :free-text="true"
+            :fetch-fn="fetchApprovedPlaces"
+            value-key="business_name"
+            label-key="business_name"
+          />
+          <InputTextField
+            v-if="extraNameCount >= 1"
+            name="nameTh"
+            v-model="modelValue.nameTh"
+            label="ชื่อภาษาไทย"
+            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
+            show-counter
+            :limit="180"
+          />
+          <InputTextField
+            v-if="extraNameCount >= 2"
+            name="nameEn"
+            v-model="modelValue.nameEn"
+            label="ชื่อภาษาอังกฤษ"
+            placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
+            show-counter
+            :limit="180"
+          />
+          <Button v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
+            <Icon name="lucide:plus" />
+            เพิ่มชื่อสถานที่
+          </Button>
+        </div>
+        <InputCombobox
+          name="categories"
+          v-model="modelValue.categories"
+          label="หมวดหมู่"
+          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
+          :limit="3"
+          show-counter
+          :options="categoryOptions"
+          required
+          multiple
+        />
+        <InputTextarea
+          name="description"
+          v-model="modelValue.description"
+          label="คำอธิบาย"
+          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
+          :limit="220"
+          show-counter
+        />
+        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
+        <div class="flex flex-col gap-[8px]">
+          <InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
+          <InputTextField
+            v-for="(_, index) in modelValue.extraPhones"
+            :key="index"
+            :name="`extraPhone-${index}`"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+            v-model="modelValue.extraPhones[index]"
+          />
+          <Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
+            <Icon name="lucide:plus" />
+            เพิ่มเบอร์โทรศัพท์
+          </Button>
+          <InputLink name="contactChannels" format="contact_channel" default-first v-model="modelValue.contactChannels" />
+        </div>
+        <template v-if="props.state === 'personal'">
+          <div class="flex flex-col gap-[16px]">
+            <InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
+            <template v-if="modelValue.isReview">
+              <InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
+              <InputTextarea
+                name="reviewDescription"
+                v-model="modelValue.reviewDescription"
+                label="คำอธิบาย"
+                placeholder="คำอธิบายเกี่ยวกับสถานที่"
+                show-counter
+              />
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex flex-col gap-[4px]">
+                  <div class="font-body-large-prominent text-gray">เพิ่มภาพถ่าย</div>
+                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
+                </div>
+                <InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
+                <div class="font-body-small text-gray w-[250px]">
+                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน 30 mb
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- แสดง polygon -->
+    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
+      <SuggestPlaceMap
+        :province-id="modelValue.address?.province_id"
+        :amphur-id="modelValue.address?.amphur_id"
+        :tambon-id="modelValue.address?.tambon_id"
+        @update:lat-lng="modelValue.latLng = $event"
+      />
+      <InputTextField
+        name="latitude-longitude"
+        icon-prepend="lucide:locate-fixed"
+        readonly
+        placeholder="ละติจูด, ลองจิจูด"
+        :model-value="
   modelValue.latLng ? `${modelValue.latLng.lat.toFixed(6)}, ${modelValue.latLng.lng.toFixed(6)}` : ''
-" />
-    </div>
-  </div>
+"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -98,9 +152,7 @@ watch(_model, (val) => {
 watch(modelValue, (val) => {
   _model.value = { ...val };
 }, { deep: true });
-const extraNameCount = ref(
-  modelValue.nameEn ? 2 : modelValue.nameTh ? 1 : 0
-);
+const extraNameCount = ref(modelValue.nameEn ? 2 : modelValue.nameTh ? 1 : 0);
 const isAddressCompleted = computed(() => {
   const v = modelValue.address || {};
   return !!(v.province_id && v.amphur_id && v.tambon_id && v.zipcode);
@@ -120,15 +172,15 @@ const listEndpointMap = {
   business: "/business/suggest-places",
   backoffice: "/office/suggest-places"
 };
+const categoryEndpointMap = {
+  personal: "/personal/suggest-places/categories",
+  business: "/business/suggest-places/categories",
+  backoffice: "/office/suggest-places/categories"
+};
 const fetchApprovedPlaces = async (page, pageSize, search) => {
   const base = listEndpointMap[props.state] ?? "/personal/suggest-places";
   const res = await api(base, {
-    query: {
-      q: search ?? "",
-      status: "PENDING,APPROVED",
-      page,
-      page_size: pageSize
-    }
+    query: { q: search ?? "", status: "PENDING,APPROVED", page, page_size: pageSize }
   });
   const data = (res.data ?? []).map((item) => ({
     ...item,
@@ -140,17 +192,10 @@ const fetchApprovedPlaces = async (page, pageSize, search) => {
   };
 };
 const categoryOptions = ref([]);
-const categoryEndpointMap = {
-  personal: "/personal/suggest-places/categories",
-  business: "/business/suggest-places/categories",
-  backoffice: "/office/suggest-places/categories"
-};
 onMounted(async () => {
   try {
     const endpoint = categoryEndpointMap[props.state] ?? "/personal/suggest-places/categories";
-    const res = await api(
-      endpoint
-    );
+    const res = await api(endpoint);
     categoryOptions.value = (res.data ?? []).map((c) => ({
       label: c.category_name,
       value: c.id

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

@@ -1,4 +1,12 @@
 import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
+interface FileItem {
+    file?: File;
+    url: string;
+}
+interface ContactChannel {
+    type: string;
+    value: string;
+}
 export interface SuggestPlaceData {
     address?: InputAddressValue;
     latLng?: {
@@ -8,18 +16,22 @@ export interface SuggestPlaceData {
     businessName?: string;
     nameTh?: string;
     nameEn?: string;
-    categories?: any[];
+    categories?: {
+        id?: string;
+        value?: string;
+        label?: string;
+    }[];
     description?: string;
-    openingHours?: any;
+    openingHours?: Record<string, unknown>;
     phone?: string;
     extraPhones?: string[];
     isReview?: boolean;
     rating?: number;
     reviewDescription?: string;
-    reviewPhotos?: any[];
-    photos?: any[];
-    videos?: any[];
-    contactChannels?: any[];
+    reviewPhotos?: FileItem[];
+    photos?: FileItem[];
+    videos?: FileItem[];
+    contactChannels?: ContactChannel[];
 }
 type __VLS_Props = {
     state?: "personal" | "business" | "backoffice";

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,12 +64,12 @@ 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;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
     background: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,12 +64,12 @@ 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;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
     background: boolean;

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

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

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

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

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-phone-OTP.d.vue.ts

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((data?: any) => any) | undefined;
 }>, {
-    phone: string;
     confirmedText: string;
+    phone: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/modal-phone-OTP.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((data?: any) => any) | undefined;
 }>, {
-    phone: string;
     confirmedText: string;
+    phone: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/package.json

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