pukaad-ui-lib 1.339.0 → 1.341.0

package/dist/module.json

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

package/dist/runtime/components/button.vue

@@ -4,16 +4,16 @@
   props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
-    :disabled="props.loading || props.disabled">
-    <span class="inline-grid place-items-center">
-      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }">
-        <slot />
-      </span>
-      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
-    </span>
-  </ShadButton>
+]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
+    :disabled="props.loading || props.disabled">
+    <span class="inline-grid place-items-center">
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
+        <slot />
+      </span>
+      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
+    </span>
+  </ShadButton>
 </template>
 
 <script setup>

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

@@ -24,8 +24,8 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

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

@@ -24,8 +24,8 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

package/dist/runtime/components/carousel.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="relative w-full h-full">
-    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
-      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
-        <span class="text-white text-sm font-medium tracking-widest">
-          {{ currentIndex + 1 }} / {{ props.items.length }}
-        </span>
-      </div>
-    </div>
-
-    <ShadCarousel
-      :opts="{ startIndex: props.selectIndex }"
-      class="carousel-media w-full h-full"
-      @init-api="onInitApi"
-    >
-      <ShadCarouselContent class="h-full">
-        <ShadCarouselItem
-          v-for="(item, i) in props.items"
-          :key="i"
-          class="h-full flex items-center justify-center"
-        >
-          <img
-            :src="item.url"
-            class="w-full h-full object-contain select-none"
-            draggable="false"
-          />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
-      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
-    </ShadCarousel>
-  </div>
+  <div class="relative w-full h-full">
+    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
+      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
+        <span class="text-white text-sm font-medium tracking-widest">
+          {{ currentIndex + 1 }} / {{ props.items.length }}
+        </span>
+      </div>
+    </div>
+
+    <ShadCarousel
+      :opts="{ startIndex: props.selectIndex }"
+      class="carousel-media w-full h-full"
+      @init-api="onInitApi"
+    >
+      <ShadCarouselContent class="h-full">
+        <ShadCarouselItem
+          v-for="(item, i) in props.items"
+          :key="i"
+          class="h-full flex items-center justify-center"
+        >
+          <img
+            :src="item.url"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
+      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chart/chart-approval-activity.d.vue.ts

@@ -1,4 +1,4 @@
-export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export type ApprovalStatusKey = "suggested" | "verified";
 export interface ApprovalSeriesPoint {
     date: string | Date;
     value: number;
@@ -12,9 +12,8 @@ export interface ApprovalSeries {
     summary?: number;
 }
 type __VLS_Props = {
-    pending?: ApprovalSeries;
-    approved?: ApprovalSeries;
-    rejected?: ApprovalSeries;
+    suggested?: ApprovalSeries;
+    verified?: ApprovalSeries;
     /** locale ของชื่อเดือน (default en-US ตาม Figma) */
     locale?: string;
     /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */

package/dist/runtime/components/chart/chart-approval-activity.vue

@@ -3,31 +3,27 @@ import { computed } from "vue";
 import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
 import { ChartContainer } from "#pukaad-ui/runtime/components/ui/chart";
 const props = defineProps({
-  pending: { type: Object, required: false },
-  approved: { type: Object, required: false },
-  rejected: { type: Object, required: false },
+  suggested: { type: Object, required: false },
+  verified: { type: Object, required: false },
   locale: { type: String, required: false, default: "en-US" },
   height: { type: [String, Number], required: false }
 });
 const emit = defineEmits(["change", "prev", "next"]);
 const rows = [
-  { key: "pending", title: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#FEF3C7" },
-  { key: "approved", title: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#E3F5E3" },
-  { key: "rejected", title: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#FDE3E3" }
+  { key: "suggested", title: "\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E41\u0E19\u0E30\u0E19\u0E33", color: "#FEF3C7" },
+  { key: "verified", title: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#E3F5E3" }
 ];
 const summaryMeta = [
-  { key: "pending", label: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#F9A825" },
-  { key: "approved", label: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#43A047" },
-  { key: "rejected", label: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#D32F2F" }
+  { key: "suggested", label: "\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E41\u0E19\u0E30\u0E19\u0E33", color: "#F9A825" },
+  { key: "verified", label: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#43A047" }
 ];
 const chartConfig = {};
 const seriesByKey = computed(() => ({
-  pending: props.pending ?? {},
-  approved: props.approved ?? {},
-  rejected: props.rejected ?? {}
+  suggested: props.suggested ?? {},
+  verified: props.verified ?? {}
 }));
 const normalizedByKey = computed(() => {
-  const out = { pending: [], approved: [], rejected: [] };
+  const out = { suggested: [], verified: [] };
   for (const r of rows) {
     out[r.key] = (seriesByKey.value[r.key].data ?? []).map((d) => ({
       _date: d.date instanceof Date ? d.date : new Date(d.date),

package/dist/runtime/components/chart/chart-approval-activity.vue.d.ts

@@ -1,4 +1,4 @@
-export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export type ApprovalStatusKey = "suggested" | "verified";
 export interface ApprovalSeriesPoint {
     date: string | Date;
     value: number;
@@ -12,9 +12,8 @@ export interface ApprovalSeries {
     summary?: number;
 }
 type __VLS_Props = {
-    pending?: ApprovalSeries;
-    approved?: ApprovalSeries;
-    rejected?: ApprovalSeries;
+    suggested?: ApprovalSeries;
+    verified?: ApprovalSeries;
     /** locale ของชื่อเดือน (default en-US ตาม Figma) */
     locale?: string;
     /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */

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

@@ -12,9 +12,9 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;
     variant: "featured" | "album";
+    state: "personal" | "office" | "business";
     photos: MediaItem[];
     videos: MediaItem[];
-    state: "personal" | "office" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,102 +1,102 @@
 <template>
-  <!-- Personal state → Featured layout — 1 รูป: w-full -->
-  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
-    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
-  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-  </div>
-
-  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
-  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
-    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 0)">
-      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
-      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
-      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 2)">
-        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto2Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
-        </div>
-      </div>
-
-      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('video', 0)">
-        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:video" :size="42" />
-          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
-        </div>
-      </div>
-      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
-        @click="openLightbox('photo', 3)">
-        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="featuredPhoto3Overflow > 0"
-          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-          <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Office / Business state → Album layout -->
-  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
-    <!-- Row 1: photos[0..3] -->
-    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 1 col 5: image count overlay -->
-    <div v-show="galleryCountPhoto != null"
-      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('photo', 8)">
-      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
-        height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:image" :size="35" />
-        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
-      </div>
-    </div>
-
-    <!-- Row 2: photos[4..7] -->
-    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
-      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
-      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 2 col 5: video overlay -->
-    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
-      @click="openLightbox('video', 0)">
-      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
-      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
-        <Icon name="fa6-solid:video" :size="35" />
-        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Lightbox modal -->
-  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
+  <!-- Personal state → Featured layout — 1 รูป: w-full -->
+  <div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
+    <div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
+  <div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+    <div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+  </div>
+
+  <!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
+  <div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
+    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 0)">
+      <Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 2)">
+        <Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto2Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
+        </div>
+      </div>
+
+      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('video', 0)">
+        <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:video" :size="42" />
+          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
+        </div>
+      </div>
+      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 3)">
+        <Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto3Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Office / Business state → Album layout -->
+  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
+    <!-- Row 1: photos[0..3] -->
+    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 1 col 5: image count overlay -->
+    <div v-show="galleryCountPhoto != null"
+      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 8)">
+      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
+        height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:image" :size="35" />
+        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
+      </div>
+    </div>
+
+    <!-- Row 2: photos[4..7] -->
+    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
+      <Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 2 col 5: video overlay -->
+    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('video', 0)">
+      <Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:video" :size="35" />
+        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lightbox modal -->
+  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
 </template>
 
 <script setup>

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

@@ -12,9 +12,9 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;
     variant: "featured" | "album";
+    state: "personal" | "office" | "business";
     photos: MediaItem[];
     videos: MediaItem[];
-    state: "personal" | "office" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

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

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

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

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

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

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

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

package/dist/runtime/components/input/input-rating.vue

@@ -1,10 +1,10 @@
 <template>
-  <!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
-  <div
-    class="inline-flex items-center gap-0"
-    v-html="starsHtml"
-    @click="handleClick"
-  />
+  <!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
+  <div
+    class="inline-flex items-center gap-0"
+    v-html="starsHtml"
+    @click="handleClick"
+  />
 </template>
 
 <script setup>

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

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

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

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

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;
-    limit: number;
     rows: number;
+    limit: 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;
-    limit: number;
     rows: number;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

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

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

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

package/dist/runtime/components/modal/modal-email-OTP.vue

@@ -99,16 +99,20 @@ const handleSendEmail = async () => {
     isLoading.value = false;
   }
 };
-watch(isOpen, (v) => {
-  if (v) {
-    valueOTP.value = "";
-    if (props.initialExpiredTime) {
-      timeExp.value = props.initialExpiredTime;
+watch(
+  isOpen,
+  (v) => {
+    if (v) {
+      valueOTP.value = "";
+      if (props.initialExpiredTime) {
+        timeExp.value = props.initialExpiredTime;
+      } else {
+        handleSendEmail();
+      }
     } else {
-      handleSendEmail();
+      timeExp.value = "";
     }
-  } else {
-    timeExp.value = "";
-  }
-});
+  },
+  { immediate: true }
+);
 </script>

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

@@ -1,140 +1,140 @@
 <template>
-  <Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
-    <template #header>
-      <ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
-    </template>
-    <div class="relative h-[824px] bg-black overflow-hidden">
-      <Carousel
-        :items="props.items"
-        :select-index="props.startIndex"
-        class="h-full"
-        @update:current-index="currentIndex = $event"
-      />
-
-      <!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
-      <div
-        v-if="!props.review && currentItem?.description"
-        class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
-      >
-        <div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
-          <div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
-          <div>{{ currentItem.description }}</div>
-        </div>
-      </div>
-
-      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
-      <div
-        v-if="props.review"
-        class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
-      >
-        <div class="flex flex-col w-full">
-          <div
-            v-if="!showMoreDescription"
-            class="flex gap-[16px] p-[16px] w-full text-white"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon name="lucide:flag" />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large line-clamp-1 cursor-pointer"
-                @click="showMoreDescription = true"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-          <div
-            v-if="showMoreDescription"
-            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon
-                    name="lucide:x"
-                    class="cursor-pointer"
-                    @click="showMoreDescription = false"
-                  />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large max-h-[280px] overflow-y-auto"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
+  <Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
+    <template #header>
+      <ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
+    </template>
+    <div class="relative h-[824px] bg-black overflow-hidden">
+      <Carousel
+        :items="props.items"
+        :select-index="props.startIndex"
+        class="h-full"
+        @update:current-index="currentIndex = $event"
+      />
+
+      <!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
+      <div
+        v-if="!props.review && currentItem?.description"
+        class="absolute bottom-0 w-full z-10"
+        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+      >
+        <div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
+          <div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
+          <div>{{ currentItem.description }}</div>
+        </div>
+      </div>
+
+      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
+      <div
+        v-if="props.review"
+        class="absolute bottom-0 w-full z-10"
+        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+      >
+        <div class="flex flex-col w-full">
+          <div
+            v-if="!showMoreDescription"
+            class="flex gap-[16px] p-[16px] w-full text-white"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon name="lucide:flag" />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large line-clamp-1 cursor-pointer"
+                @click="showMoreDescription = true"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+          <div
+            v-if="showMoreDescription"
+            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon
+                    name="lucide:x"
+                    class="cursor-pointer"
+                    @click="showMoreDescription = false"
+                  />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large max-h-[280px] overflow-y-auto"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -132,18 +132,22 @@ const onVerifyOTP = async () => {
     isLoading.value = false;
   }
 };
-watch(isOpen, (value) => {
-  textRef.value = "";
-  valueOTP.value = "";
-  otpError.value = "";
-  if (value) {
-    if (props.initialExpiredTime) {
-      expireAt.value = props.initialExpiredTime;
+watch(
+  isOpen,
+  (value) => {
+    textRef.value = "";
+    valueOTP.value = "";
+    otpError.value = "";
+    if (value) {
+      if (props.initialExpiredTime) {
+        expireAt.value = props.initialExpiredTime;
+      } else {
+        handleSendOTP();
+      }
     } else {
-      handleSendOTP();
+      expireAt.value = "";
     }
-  } else {
-    expireAt.value = "";
-  }
-});
+  },
+  { immediate: true }
+);
 </script>

package/package.json

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