pukaad-ui-lib 1.209.0 → 1.210.1

package/dist/module.json

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

package/dist/runtime/assets/svg/map-location-dot.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none">
+  <g clip-path="url(#clip0_6644_10663)">
+    <path d="M14.1667 3.98438C14.1667 5.79727 11.6285 9.02793 10.5139 10.3594C10.2465 10.6781 9.75 10.6781 9.48611 10.3594C8.37153 9.02793 5.83333 5.79727 5.83333 3.98438C5.83333 1.78301 7.69792 0 10 0C12.3021 0 14.1667 1.78301 14.1667 3.98438ZM14.4444 6.65391C14.566 6.42481 14.6771 6.1957 14.7778 5.96992C14.7951 5.93008 14.8125 5.88691 14.8299 5.84707L18.8576 4.30645C19.4062 4.09727 20 4.48242 20 5.04688V14.0383C20 14.3637 19.7917 14.6559 19.4757 14.7787L14.4444 16.7012V6.65391ZM4.77778 4.59199C4.86111 5.06016 5.02778 5.53164 5.22222 5.96992C5.32292 6.1957 5.43403 6.42481 5.55556 6.65391V15.0012L1.14236 16.6912C0.59375 16.9004 0 16.5152 0 15.9508V6.95938C0 6.63399 0.208333 6.3418 0.524306 6.21895L4.78125 4.59199H4.77778ZM11.3819 11.0234C11.8646 10.4457 12.6215 9.50606 13.3333 8.4668V16.7443L6.66667 14.9215V8.4668C7.37847 9.50606 8.13542 10.4457 8.61806 11.0234C9.32986 11.8734 10.6701 11.8734 11.3819 11.0234ZM10 5.04688C10.3684 5.04688 10.7216 4.90695 10.9821 4.65788C11.2426 4.4088 11.3889 4.07099 11.3889 3.71875C11.3889 3.36651 11.2426 3.0287 10.9821 2.77962C10.7216 2.53055 10.3684 2.39063 10 2.39063C9.63164 2.39063 9.27837 2.53055 9.01791 2.77962C8.75744 3.0287 8.61111 3.36651 8.61111 3.71875C8.61111 4.07099 8.75744 4.4088 9.01791 4.65788C9.27837 4.90695 9.63164 5.04688 10 5.04688Z" fill="#1976B8"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_6644_10663">
+      <rect width="20" height="17" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

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/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    state: "user" | "admin";
     placeholder: string;
+    state: "user" | "admin";
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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.1",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",