pukaad-ui-lib 1.340.0 → 1.342.0

package/dist/module.json

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

package/dist/runtime/assets/css/core.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--error:var(--red);--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

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/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/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/input/input-address.d.vue.ts

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: 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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: 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-autocomplete.d.vue.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/runtime/components/modal/modal-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-password-confirmed.d.vue.ts

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

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/dist/runtime/components/modal/modal-province-domain.d.vue.ts

@@ -1,3 +1,4 @@
+import { type Province } from "#pukaad-ui/runtime/composables/useThaiAddress";
 import type { ModalProviceDomainProps } from "#pukaad-ui/types/components/modal/modal-province-domain";
 type __VLS_Props = ModalProviceDomainProps;
 type __VLS_ModelProps = {
@@ -7,10 +8,10 @@ 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;
 } & {
-    confirmed: (value: string) => any;
+    confirmed: (province: Province) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onConfirmed?: ((value: string) => any) | undefined;
+    onConfirmed?: ((province: Province) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-province-domain.vue

@@ -1,23 +1,25 @@
 <template>
   <Modal
     title="เลือกจังหวัดที่คุณต้องการใช้งาน"
-    :column-gap="24"
+    description="เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ
+      เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง"
+    class="w-[425px]"
     v-model="modelValue"
   >
-    <div class="flex flex-col gap-[16px] w-full">
-      <div class="flex flex-col font-body-large text-center">
-        <div>เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ</div>
-        <div>เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง</div>
-      </div>
-      <InputAutocomplete
-        :items="provinces"
-        full-width
-        placeholder="เลือกจังหวัด"
-        v-model="selected"
-      />
-    </div>
+    <InputCombobox
+      placeholder="เลือกจังหวัด"
+      label="จังหวัด"
+      :options="provinceOptions"
+      v-model="selected"
+      placeholder-search="ค้นหาจังหวัด"
+    />
     <template #footer>
-      <Button full-width color="primary" :disabled="!selected" @click="onNext">
+      <Button
+        class="w-full"
+        color="primary"
+        :disabled="!selected"
+        @click="onNext"
+      >
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -25,31 +27,38 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
+import {
+  useThaiAddress
+} from "#pukaad-ui/runtime/composables/useThaiAddress";
 const emit = defineEmits(["confirmed"]);
 const props = defineProps({
   confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
 });
+const { loadProvinces } = useThaiAddress();
 const selected = ref("");
-const provinces = ref([
-  {
-    label: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E\u0E21\u0E2B\u0E32\u0E19\u0E04\u0E23",
-    value: "https://www.someting_eie.com"
-  },
-  {
-    label: "\u0E1A\u0E38\u0E23\u0E35\u0E23\u0E31\u0E21\u0E22\u0E4C",
-    value: "https://www.someting_eie.com"
-  },
-  {
-    label: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48",
-    value: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48"
-  }
-]);
+const provincesData = ref([]);
+const activeProvinces = computed(
+  () => provincesData.value.filter((province) => province.is_active)
+);
+const provinceOptions = computed(
+  () => activeProvinces.value.map((province) => ({
+    label: province.name_th,
+    value: String(province.id)
+  }))
+);
+onMounted(async () => {
+  provincesData.value = await loadProvinces();
+});
 const modelValue = defineModel({ type: Boolean, ...{
   default: false
 } });
 const onNext = () => {
-  emit("confirmed", selected.value);
+  const province = activeProvinces.value.find(
+    (p) => String(p.id) === selected.value
+  );
+  if (!province) return;
+  emit("confirmed", province);
   modelValue.value = false;
 };
 </script>

package/dist/runtime/components/modal/modal-province-domain.vue.d.ts

@@ -1,3 +1,4 @@
+import { type Province } from "#pukaad-ui/runtime/composables/useThaiAddress";
 import type { ModalProviceDomainProps } from "#pukaad-ui/types/components/modal/modal-province-domain";
 type __VLS_Props = ModalProviceDomainProps;
 type __VLS_ModelProps = {
@@ -7,10 +8,10 @@ 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;
 } & {
-    confirmed: (value: string) => any;
+    confirmed: (province: Province) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onConfirmed?: ((value: string) => any) | undefined;
+    onConfirmed?: ((province: Province) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,4 @@
+import type { Province } from "./useThaiAddress.js";
+export declare function useProvinceRedirect(): {
+    goToProvinceDomain: (province: Province, path?: string) => any;
+};

package/dist/runtime/composables/useProvinceRedirect.js

@@ -0,0 +1,8 @@
+import { navigateTo } from "#imports";
+export function useProvinceRedirect() {
+  const goToProvinceDomain = (province, path = "") => {
+    if (!province?.domain) return;
+    return navigateTo(`//${province.domain}${path}`, { external: true });
+  };
+  return { goToProvinceDomain };
+}

package/package.json

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