pukaad-ui-lib 1.282.2 → 1.284.0

package/dist/runtime/components/data-table.vue

@@ -113,163 +113,163 @@ const getJustifyClass = (alignment = "start") => {
 </script>
 
 <template>
-  <div class="bg-white rounded-lg h-full flex flex-col">
-    <!-- Selection Action Bar -->
-
-    <!-- Table Container -->
-    <div class="flex-1 overflow-auto">
-      <ShadTable>
-        <!-- Header -->
-        <ShadTableHeader v-if="!props.disabledHeader">
-          <slot name="header" :item="props.itemHeader">
-            <ShadTableRow>
-              <!-- Checkbox select-all -->
-              <ShadTableHead v-if="props.selectable" class="w-12">
-                <div class="flex items-center justify-center">
-                  <InputCheckbox
+  <div class="bg-white rounded-lg h-full flex flex-col">
+    <!-- Selection Action Bar -->
+
+    <!-- Table Container -->
+    <div class="flex-1 overflow-auto">
+      <ShadTable>
+        <!-- Header -->
+        <ShadTableHeader v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <ShadTableRow>
+              <!-- Checkbox select-all -->
+              <ShadTableHead v-if="props.selectable" class="w-12">
+                <div class="flex items-center justify-center">
+                  <InputCheckbox
                     :model-value="
   isIndeterminate ? 'indeterminate' : isAllSelected
-"
-                    @update:model-value="() => toggleAll()"
-                  />
-                </div>
-              </ShadTableHead>
-
-              <ShadTableHead
-                v-for="(header, i) in itemHeaders"
-                :key="i"
+"
+                    @update:model-value="() => toggleAll()"
+                  />
+                </div>
+              </ShadTableHead>
+
+              <ShadTableHead
+                v-for="(header, i) in itemHeaders"
+                :key="i"
                 :class="
   getAlignmentClass(header.alignment || props.headerAlignment)
-"
+"
                 :style="{
   width: header.width ? typeof header.width === 'number' ? `${header.width}px` : header.width : void 0,
   minWidth: header.minWidth ? typeof header.minWidth === 'number' ? `${header.minWidth}px` : header.minWidth : void 0
-}"
-              >
-                <slot
-                  :name="`header-${header.key}`"
-                  :header="header"
-                  :on-sort="() => onSortBy(header.key)"
-                  :is-sorted="sortkey === header.key"
-                  :sort-desc="sortDesc"
-                >
-                  <div
+}"
+              >
+                <slot
+                  :name="`header-${header.key}`"
+                  :header="header"
+                  :on-sort="() => onSortBy(header.key)"
+                  :is-sorted="sortkey === header.key"
+                  :sort-desc="sortDesc"
+                >
+                  <div
                     :class="[
   'flex items-center gap-2 text-gray font-body-medium',
   getJustifyClass(
     header.alignment || props.headerAlignment
   )
-]"
-                  >
-                    <span>{{ header.label }}</span>
-                    <button
-                      v-if="header.sort !== false && !props.disabledSort"
-                      type="button"
+]"
+                  >
+                    <span>{{ header.label }}</span>
+                    <button
+                      v-if="header.sort !== false && !props.disabledSort"
+                      type="button"
                       :class="[
   'flex items-center justify-center cursor-pointer hover:text-primary transition-colors',
   sortkey === header.key && 'text-primary'
-]"
-                      @click="onSortBy(header.key)"
-                    >
-                      <Icon name="fa6-solid:sort" size="14" />
-                    </button>
-                  </div>
-                </slot>
-              </ShadTableHead>
-            </ShadTableRow>
-          </slot>
-        </ShadTableHeader>
-
-        <!-- Body -->
-        <slot name="body" :items="sortedItems" :header="itemHeaders">
-          <ShadTableBody>
-            <!-- Loading Skeleton -->
-            <template v-if="props.loading">
-              <ShadTableRow v-for="row in itemPerPage" :key="`skeleton-${row}`">
-                <ShadTableCell
-                  v-for="(header, i_header) in itemHeaders"
-                  :key="`skeleton-cell-${row}-${i_header}`"
-                >
-                  <Skeleton class="h-4 w-full" />
-                </ShadTableCell>
-              </ShadTableRow>
-            </template>
-
-            <!-- Data Rows -->
-            <template v-else-if="sortedItems.length > 0">
-              <ShadTableRow
-                v-for="(item, i_body) in sortedItems"
-                :key="i_body"
-                class="cursor-pointer"
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="14" />
+                    </button>
+                  </div>
+                </slot>
+              </ShadTableHead>
+            </ShadTableRow>
+          </slot>
+        </ShadTableHeader>
+
+        <!-- Body -->
+        <slot name="body" :items="sortedItems" :header="itemHeaders">
+          <ShadTableBody>
+            <!-- Loading Skeleton -->
+            <template v-if="props.loading">
+              <ShadTableRow v-for="row in itemPerPage" :key="`skeleton-${row}`">
+                <ShadTableCell
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="`skeleton-cell-${row}-${i_header}`"
+                >
+                  <Skeleton class="h-4 w-full" />
+                </ShadTableCell>
+              </ShadTableRow>
+            </template>
+
+            <!-- Data Rows -->
+            <template v-else-if="sortedItems.length > 0">
+              <ShadTableRow
+                v-for="(item, i_body) in sortedItems"
+                :key="i_body"
+                class="cursor-pointer"
                 :data-state="
   props.selectable && isSelected(item) ? 'selected' : void 0
-"
-                @click="emit('click-row', item, i_body)"
-              >
-                <!-- Checkbox per row -->
-                <ShadTableCell v-if="props.selectable" @click.stop>
-                  <div class="flex items-center justify-center">
-                    <InputCheckbox
-                      :model-value="isSelected(item)"
-                      @update:model-value="() => toggleRow(item)"
-                    />
-                  </div>
-                </ShadTableCell>
-
-                <slot
-                  name="item"
-                  :item="item"
-                  :header="itemHeaders"
-                  :index="i_body"
-                >
-                  <ShadTableCell
-                    v-for="(header, i_header) in itemHeaders"
-                    :key="i_header"
+"
+                @click="emit('click-row', item, i_body)"
+              >
+                <!-- Checkbox per row -->
+                <ShadTableCell v-if="props.selectable" @click.stop>
+                  <div class="flex items-center justify-center">
+                    <InputCheckbox
+                      :model-value="isSelected(item)"
+                      @update:model-value="() => toggleRow(item)"
+                    />
+                  </div>
+                </ShadTableCell>
+
+                <slot
+                  name="item"
+                  :item="item"
+                  :header="itemHeaders"
+                  :index="i_body"
+                >
+                  <ShadTableCell
+                    v-for="(header, i_header) in itemHeaders"
+                    :key="i_header"
                     :class="
   getAlignmentClass(header.alignment || props.cellAlignment)
-"
+"
                     :style="{
   width: header.width ? typeof header.width === 'number' ? `${header.width}px` : header.width : void 0,
   minWidth: header.minWidth ? typeof header.minWidth === 'number' ? `${header.minWidth}px` : header.minWidth : void 0,
   maxWidth: header.maxWidth ? typeof header.maxWidth === 'number' ? `${header.maxWidth}px` : header.maxWidth : header.width ? typeof header.width === 'number' ? `${header.width}px` : header.width : header.minWidth ? typeof header.minWidth === 'number' ? `${header.minWidth}px` : header.minWidth : void 0
-}"
-                  >
-                    <slot :name="`item-${header.key}`" :item="item">
-                      {{ item[header.key] }}
-                    </slot>
-                  </ShadTableCell>
-                </slot>
-              </ShadTableRow>
-            </template>
-
-            <!-- Empty State -->
-            <template v-else>
-              <slot name="empty">
-                <ShadTableEmpty :colspan="itemHeaders?.length || 1">
-                  <slot name="empty-content" />
-                </ShadTableEmpty>
-              </slot>
-            </template>
-          </ShadTableBody>
-        </slot>
-      </ShadTable>
-    </div>
-
-    <!-- Pagination -->
-    <div
-      v-if="sortedItems.length > 0 && !props.disabledPagination"
-      class="p-4 flex justify-center items-center border-t"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        v-model="page"
+}"
+                  >
+                    <slot :name="`item-${header.key}`" :item="item">
+                      {{ item[header.key] }}
+                    </slot>
+                  </ShadTableCell>
+                </slot>
+              </ShadTableRow>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else>
+              <slot name="empty">
+                <ShadTableEmpty :colspan="itemHeaders?.length || 1">
+                  <slot name="empty-content" />
+                </ShadTableEmpty>
+              </slot>
+            </template>
+          </ShadTableBody>
+        </slot>
+      </ShadTable>
+    </div>
+
+    <!-- Pagination -->
+    <div
+      v-if="sortedItems.length > 0 && !props.disabledPagination"
+      class="p-4 flex justify-center items-center border-t"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        v-model="page"
         @change-item-per-page="
   (val) => {
     itemPerPage = val;
     emit('change-item-per-page', val);
   }
-"
-      />
-    </div>
-  </div>
+"
+      />
+    </div>
+  </div>
 </template>

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

@@ -8,9 +8,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: string[];
     videos: string[];
-    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,92 +1,92 @@
 <template>
-  <!-- Personal state → Featured layout -->
-  <div v-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]" 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]" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
-      <!-- photos[2] — top-right slot
-           มีวิดีโอ: overlay ถ้า photos.length > 3 (photos[3+] ถูกซ่อน)
-           ไม่มีวิดีโอ: โชว์สะอาดเสมอ (photos[3] ไปโชว์ที่ slot ล่าง) -->
-      <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]" 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>
-
-      <!-- bottom-right slot
-           มีวิดีโอ    : videos[0] thumbnail + overlay วิดีโอ
-           ไม่มีวิดีโอ : photos[3] — overlay "รูปภาพ (N)" เมื่อ photos.length > 4
-                         (N = photos.length - 3 นับรวม photos[3] ด้วย) -->
-      <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]" 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]" 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" class="w-full h-full object-cover" width="auto" height="auto" />
-    </div>
-
-    <!-- Row 1 col 5: image count overlay (v-show keeps grid slot) -->
-    <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" 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" 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]" 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 -->
+  <div v-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]" 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]" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <!-- photos[2] — top-right slot
+           มีวิดีโอ: overlay ถ้า photos.length > 3 (photos[3+] ถูกซ่อน)
+           ไม่มีวิดีโอ: โชว์สะอาดเสมอ (photos[3] ไปโชว์ที่ slot ล่าง) -->
+      <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]" 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>
+
+      <!-- bottom-right slot
+           มีวิดีโอ    : videos[0] thumbnail + overlay วิดีโอ
+           ไม่มีวิดีโอ : photos[3] — overlay "รูปภาพ (N)" เมื่อ photos.length > 4
+                         (N = photos.length - 3 นับรวม photos[3] ด้วย) -->
+      <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]" 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]" 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" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 1 col 5: image count overlay (v-show keeps grid slot) -->
+    <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" 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" 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]" 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

@@ -8,9 +8,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: string[];
     videos: string[];
-    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-review.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="inline-flex gap-[8px]">
-    <div v-for="(img, i_img) in props.items?.slice(0, props.limit)" :key="i_img" class="relative cursor-pointer"
-      @click="emit('select', i_img)">
-      <Image :src="img" :height="100" :width="100" class="rounded-[4px]" />
-      <div v-if="props.limit === i_img + 1 && numberMore > 0"
-        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]">
-        <div class="font-headline-medium">+{{ convertNumber(numberMore ?? 0) }}</div>
-      </div>
-    </div>
-  </div>
+  <div class="inline-flex gap-[8px]">
+    <div v-for="(img, i_img) in props.items?.slice(0, props.limit)" :key="i_img" class="relative cursor-pointer"
+      @click="emit('select', i_img)">
+      <Image :src="img" :height="100" :width="100" class="rounded-[4px]" />
+      <div v-if="props.limit === i_img + 1 && numberMore > 0"
+        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]">
+        <div class="font-headline-medium">+{{ convertNumber(numberMore ?? 0) }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,55 +1,55 @@
 <template>
-  <div
-    class="flex gap-[8px] max-w-[844px]"
+  <div
+    class="flex gap-[8px] max-w-[844px]"
     :style="{
   height: `${heightBox}px`
-}"
-  >
-    <div
-      v-if="props.items && props.items?.length <= 2"
-      v-for="(item, i_item) in props.items"
-      :key="i_item"
-      class="w-full flex justify-center bg-black rounded-[8px] cursor-pointer"
-      @click="onSelect(i_item)"
-    >
-      <Image :src="getSrc(item)" height="auto" />
-    </div>
-    <div v-else class="flex gap-[8px] w-full">
-      <div class="flex rounded-[8px] cursor-pointer" @click="onSelect(0)">
-        <Image
-          :src="getSrc((props.items ?? [])[0])"
-          class="rounded-[8px]"
-          width="720"
-          height="auto"
-        />
-      </div>
-      <div class="flex flex-col gap-[8px]">
-        <div
-          v-for="(item, i_item) in props.items?.slice(1, 5)"
-          :key="i_item"
-          class="relative cursor-pointer"
-          @click="onSelect(i_item + 1)"
-        >
-          <Image
-            :src="getSrc(item)"
-            class="rounded-[8px]"
-            :width="widthSubImg"
-            :height="heightSubImg"
-          />
-
-          <div
-            v-if="showMore && i_item === 3"
-            class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[8px]"
-          >
-            <div class="flex flex-col gap-[6px] items-center">
-              <Icon name="fa6-solid:image" size="48" />
-              <div class="font-body-large">รูปภาพ ({{ numberMore }})</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+}"
+  >
+    <div
+      v-if="props.items && props.items?.length <= 2"
+      v-for="(item, i_item) in props.items"
+      :key="i_item"
+      class="w-full flex justify-center bg-black rounded-[8px] cursor-pointer"
+      @click="onSelect(i_item)"
+    >
+      <Image :src="getSrc(item)" height="auto" />
+    </div>
+    <div v-else class="flex gap-[8px] w-full">
+      <div class="flex rounded-[8px] cursor-pointer" @click="onSelect(0)">
+        <Image
+          :src="getSrc((props.items ?? [])[0])"
+          class="rounded-[8px]"
+          width="720"
+          height="auto"
+        />
+      </div>
+      <div class="flex flex-col gap-[8px]">
+        <div
+          v-for="(item, i_item) in props.items?.slice(1, 5)"
+          :key="i_item"
+          class="relative cursor-pointer"
+          @click="onSelect(i_item + 1)"
+        >
+          <Image
+            :src="getSrc(item)"
+            class="rounded-[8px]"
+            :width="widthSubImg"
+            :height="heightSubImg"
+          />
+
+          <div
+            v-if="showMore && i_item === 3"
+            class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[8px]"
+          >
+            <div class="flex flex-col gap-[6px] items-center">
+              <Icon name="fa6-solid:image" size="48" />
+              <div class="font-body-large">รูปภาพ ({{ numberMore }})</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>