pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -116,172 +116,172 @@ 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">
-              <template v-for="(item, i_body) in sortedItems" :key="i_body">
-                <ShadTableRow
-                  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">
+              <template v-for="(item, i_body) in sortedItems" :key="i_body">
+                <ShadTableRow
+                  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>
-
-                <!-- แถวเสริมเต็มความกว้าง แทรกใต้แถวนี้ — ใช้กับกรณีเช่น banner "กำลังโอนสิทธิ์" (Figma 2779-278256) -->
-                <!-- ไม่ระบุ slot นี้ = ไม่มีอะไร render เพิ่ม, consumer เป็นคนคุม v-if ว่าจะโชว์กับ item ไหน -->
-                <slot
-                  name="row-banner"
-                  :item="item"
-                  :index="i_body"
-                  :colspan="totalColumns"
-                />
-              </template>
-            </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>
+
+                <!-- แถวเสริมเต็มความกว้าง แทรกใต้แถวนี้ — ใช้กับกรณีเช่น banner "กำลังโอนสิทธิ์" (Figma 2779-278256) -->
+                <!-- ไม่ระบุ slot นี้ = ไม่มีอะไร render เพิ่ม, consumer เป็นคนคุม v-if ว่าจะโชว์กับ item ไหน -->
+                <slot
+                  name="row-banner"
+                  :item="item"
+                  :index="i_body"
+                  :colspan="totalColumns"
+                />
+              </template>
+            </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>