pukaad-ui-lib 1.209.0 → 1.210.0

package/dist/module.json

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

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

@@ -9,46 +9,54 @@ export interface DataTableProps {
     disabledPagination?: boolean;
     totalPage?: number;
     loading?: boolean;
+    selectable?: boolean;
+    selectKey?: string;
 }
 type __VLS_Props = DataTableProps;
 type __VLS_ModelProps = {
     "page"?: number;
+    "selected"?: Record<string, any>[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_13: {
+declare var __VLS_1: {
+    selected: Record<string, any>[];
+}, __VLS_15: {
     item: TableHeader[];
-}, __VLS_28: `header-${string}`, __VLS_29: {
+}, __VLS_43: `header-${string}`, __VLS_44: {
     header: TableHeader;
     onSort: () => void;
     isSorted: boolean;
     sortDesc: boolean;
-}, __VLS_36: {
+}, __VLS_51: {
     items: Record<string, any>[];
     header: TableHeader[];
-}, __VLS_69: {
+}, __VLS_99: {
     item: Record<string, any>;
     header: TableHeader[];
     index: number;
-}, __VLS_78: `item-${string}`, __VLS_79: {
+}, __VLS_108: `item-${string}`, __VLS_109: {
     item: Record<string, any>;
-}, __VLS_81: {}, __VLS_89: {};
+}, __VLS_111: {}, __VLS_119: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+    [K in NonNullable<typeof __VLS_43>]?: (props: typeof __VLS_44) => any;
 } & {
-    [K in NonNullable<typeof __VLS_78>]?: (props: typeof __VLS_79) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
-    header?: (props: typeof __VLS_13) => any;
+    'selection-actions'?: (props: typeof __VLS_1) => any;
 } & {
-    body?: (props: typeof __VLS_36) => any;
+    header?: (props: typeof __VLS_15) => any;
 } & {
-    item?: (props: typeof __VLS_69) => any;
+    body?: (props: typeof __VLS_51) => any;
 } & {
-    empty?: (props: typeof __VLS_81) => any;
+    item?: (props: typeof __VLS_99) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_89) => any;
+    empty?: (props: typeof __VLS_111) => any;
+} & {
+    'empty-content'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
+    "update:selected": (value: Record<string, any>[]) => any;
 } & {
     "select-page": (value: number) => any;
     "change-page": (value: number) => any;
@@ -60,6 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
     "onChange-item-per-page"?: ((value: number) => any) | undefined;
     "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:selected"?: ((value: Record<string, any>[]) => any) | undefined;
 }>, {
     loading: boolean;
     items: Record<string, any>[];
@@ -70,6 +79,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     cellAlignment: TableHeaderAlignment;
     disabledHeader: boolean;
     disabledSort: boolean;
+    selectable: boolean;
+    selectKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -20,11 +20,47 @@ const props = defineProps({
   disabledSort: { type: Boolean, required: false, default: false },
   disabledPagination: { type: Boolean, required: false, default: false },
   totalPage: { type: Number, required: false, default: 1 },
-  loading: { type: Boolean, required: false, default: false }
+  loading: { type: Boolean, required: false, default: false },
+  selectable: { type: Boolean, required: false, default: false },
+  selectKey: { type: String, required: false, default: "id" }
 });
 const page = defineModel("page", { type: Number, ...{
   default: 1
 } });
+const selected = defineModel("selected", { type: Array, ...{
+  default: () => []
+} });
+const isAllSelected = computed(() => {
+  if (sortedItems.value.length === 0) return false;
+  return sortedItems.value.every((item) => isSelected(item));
+});
+const isIndeterminate = computed(() => {
+  return selected.value.length > 0 && !isAllSelected.value;
+});
+const isSelected = (item) => {
+  const key = props.selectKey;
+  return selected.value.some((s) => s[key] === item[key]);
+};
+const toggleAll = () => {
+  if (isAllSelected.value) {
+    const pageKeys = sortedItems.value.map((i) => i[props.selectKey]);
+    selected.value = selected.value.filter(
+      (s) => !pageKeys.includes(s[props.selectKey])
+    );
+  } else {
+    const toAdd = sortedItems.value.filter((item) => !isSelected(item));
+    selected.value = [...selected.value, ...toAdd];
+  }
+};
+const toggleRow = (item) => {
+  if (isSelected(item)) {
+    selected.value = selected.value.filter(
+      (s) => s[props.selectKey] !== item[props.selectKey]
+    );
+  } else {
+    selected.value = [...selected.value, item];
+  }
+};
 const sortkey = ref("");
 const sortDesc = ref(false);
 const itemPerPage = ref(10);
@@ -78,6 +114,17 @@ const getJustifyClass = (alignment = "start") => {
 
 <template>
   <div class="bg-white rounded-lg h-full flex flex-col">
+    <!-- Selection Action Bar -->
+    <div
+      v-if="props.selectable && selected.length > 0"
+      class="flex items-center gap-3 px-4 py-2 bg-primary rounded-t-lg"
+    >
+      <span class="font-body-medium text-white">
+        เลือก {{ selected.length }} รายการ
+      </span>
+      <slot name="selection-actions" :selected="selected" />
+    </div>
+
     <!-- Table Container -->
     <div class="flex-1 overflow-auto">
       <ShadTable>
@@ -85,6 +132,16 @@ const getJustifyClass = (alignment = "start") => {
         <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"
@@ -151,8 +208,19 @@ const getJustifyClass = (alignment = "start") => {
                 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"

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

@@ -9,46 +9,54 @@ export interface DataTableProps {
     disabledPagination?: boolean;
     totalPage?: number;
     loading?: boolean;
+    selectable?: boolean;
+    selectKey?: string;
 }
 type __VLS_Props = DataTableProps;
 type __VLS_ModelProps = {
     "page"?: number;
+    "selected"?: Record<string, any>[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_13: {
+declare var __VLS_1: {
+    selected: Record<string, any>[];
+}, __VLS_15: {
     item: TableHeader[];
-}, __VLS_28: `header-${string}`, __VLS_29: {
+}, __VLS_43: `header-${string}`, __VLS_44: {
     header: TableHeader;
     onSort: () => void;
     isSorted: boolean;
     sortDesc: boolean;
-}, __VLS_36: {
+}, __VLS_51: {
     items: Record<string, any>[];
     header: TableHeader[];
-}, __VLS_69: {
+}, __VLS_99: {
     item: Record<string, any>;
     header: TableHeader[];
     index: number;
-}, __VLS_78: `item-${string}`, __VLS_79: {
+}, __VLS_108: `item-${string}`, __VLS_109: {
     item: Record<string, any>;
-}, __VLS_81: {}, __VLS_89: {};
+}, __VLS_111: {}, __VLS_119: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+    [K in NonNullable<typeof __VLS_43>]?: (props: typeof __VLS_44) => any;
 } & {
-    [K in NonNullable<typeof __VLS_78>]?: (props: typeof __VLS_79) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
-    header?: (props: typeof __VLS_13) => any;
+    'selection-actions'?: (props: typeof __VLS_1) => any;
 } & {
-    body?: (props: typeof __VLS_36) => any;
+    header?: (props: typeof __VLS_15) => any;
 } & {
-    item?: (props: typeof __VLS_69) => any;
+    body?: (props: typeof __VLS_51) => any;
 } & {
-    empty?: (props: typeof __VLS_81) => any;
+    item?: (props: typeof __VLS_99) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_89) => any;
+    empty?: (props: typeof __VLS_111) => any;
+} & {
+    'empty-content'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
+    "update:selected": (value: Record<string, any>[]) => any;
 } & {
     "select-page": (value: number) => any;
     "change-page": (value: number) => any;
@@ -60,6 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
     "onChange-item-per-page"?: ((value: number) => any) | undefined;
     "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:selected"?: ((value: Record<string, any>[]) => any) | undefined;
 }>, {
     loading: boolean;
     items: Record<string, any>[];
@@ -70,6 +79,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     cellAlignment: TableHeaderAlignment;
     disabledHeader: boolean;
     disabledSort: boolean;
+    selectable: boolean;
+    selectKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

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

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

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

package/dist/runtime/components/ui/table/TableRow.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 <template>
   <tr
     data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-info border-b transition-colors', props.class)"
   >
     <slot />
   </tr>

package/package.json

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