pukaad-ui-lib 1.22.2 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
3
  "configKey": "pukaadUI",
4
- "version": "1.22.2",
4
+ "version": "1.24.0",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
@@ -41,11 +41,11 @@
41
41
  <div
42
42
  v-for="(cill, i_child) in item.children"
43
43
  :key="i_child"
44
- :class="
45
- divider ? 'border-b border-silver pl-[24px]' : 'pl-[24px]'
46
- "
44
+ :class="divider ? 'border-b border-silver' : ''"
47
45
  >
48
- <slot name="children-item" :label="cill.label" :item="cill" />
46
+ <div class="pl-[24px]">
47
+ <slot name="children-item" :label="cill.label" :item="cill" />
48
+ </div>
49
49
  </div>
50
50
  </slot>
51
51
  </div>
@@ -0,0 +1,76 @@
1
+ import type { TableHeader, TableHeaderAlignment } from "@/types/components/table";
2
+ export interface DataTableProps {
3
+ items?: Record<string, any>[];
4
+ itemHeader?: TableHeader[];
5
+ headerAlinement?: TableHeaderAlignment;
6
+ cellAlinement?: TableHeaderAlignment;
7
+ height?: number | string;
8
+ maxHeight?: number | string;
9
+ fullHeight?: boolean;
10
+ disabledHeader?: boolean;
11
+ disabledSort?: boolean;
12
+ disabledPagination?: boolean;
13
+ totalPage?: number;
14
+ }
15
+ type __VLS_Props = DataTableProps;
16
+ type __VLS_ModelProps = {
17
+ "page"?: number;
18
+ };
19
+ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
20
+ declare var __VLS_11: {
21
+ item: TableHeader[];
22
+ }, __VLS_28: {
23
+ items: any;
24
+ header: any;
25
+ }, __VLS_43: {
26
+ item: any;
27
+ header: any;
28
+ index: number;
29
+ }, __VLS_51: `item-${any}`, __VLS_52: {
30
+ item: any;
31
+ }, __VLS_54: {}, __VLS_61: {};
32
+ type __VLS_Slots = {} & {
33
+ [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
34
+ } & {
35
+ header?: (props: typeof __VLS_11) => any;
36
+ } & {
37
+ body?: (props: typeof __VLS_28) => any;
38
+ } & {
39
+ item?: (props: typeof __VLS_43) => any;
40
+ } & {
41
+ empty?: (props: typeof __VLS_54) => any;
42
+ } & {
43
+ 'empty-content'?: (props: typeof __VLS_61) => any;
44
+ };
45
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
46
+ "update:page": (value: number) => any;
47
+ } & {
48
+ "select-page": (value: number) => any;
49
+ "change-page": (value: number) => any;
50
+ "click-row": (item: Record<string, any>, index: number) => any;
51
+ "change-item-per-page": (value: number) => any;
52
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
53
+ "onSelect-page"?: ((value: number) => any) | undefined;
54
+ "onChange-page"?: ((value: number) => any) | undefined;
55
+ "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
56
+ "onChange-item-per-page"?: ((value: number) => any) | undefined;
57
+ "onUpdate:page"?: ((value: number) => any) | undefined;
58
+ }>, {
59
+ items: Record<string, any>[];
60
+ fullHeight: boolean;
61
+ itemHeader: TableHeader[];
62
+ headerAlinement: TableHeaderAlignment;
63
+ cellAlinement: TableHeaderAlignment;
64
+ disabledHeader: boolean;
65
+ disabledSort: boolean;
66
+ disabledPagination: boolean;
67
+ totalPage: number;
68
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
69
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
70
+ declare const _default: typeof __VLS_export;
71
+ export default _default;
72
+ type __VLS_WithSlots<T, S> = T & {
73
+ new (): {
74
+ $slots: S;
75
+ };
76
+ };
@@ -0,0 +1,170 @@
1
+ <script setup>
2
+ import { ref, computed } from "vue";
3
+ import {
4
+ Table as ShadTable,
5
+ TableHeader as ShadTableHeader,
6
+ TableBody as ShadTableBody,
7
+ TableRow as ShadTableRow,
8
+ TableHead as ShadTableHead,
9
+ TableCell as ShadTableCell,
10
+ TableEmpty as ShadTableEmpty
11
+ } from "@/runtime/components/ui/table";
12
+ const emit = defineEmits(["select-page", "change-page", "click-row", "change-item-per-page"]);
13
+ const props = defineProps({
14
+ items: { type: Array, required: false, default: () => [] },
15
+ itemHeader: { type: Array, required: false, default: () => [] },
16
+ headerAlinement: { type: String, required: false, default: "start" },
17
+ cellAlinement: { type: String, required: false, default: "start" },
18
+ height: { type: [Number, String], required: false },
19
+ maxHeight: { type: [Number, String], required: false },
20
+ fullHeight: { type: Boolean, required: false, default: false },
21
+ disabledHeader: { type: Boolean, required: false, default: false },
22
+ disabledSort: { type: Boolean, required: false, default: false },
23
+ disabledPagination: { type: Boolean, required: false, default: false },
24
+ totalPage: { type: Number, required: false, default: 1 }
25
+ });
26
+ const page = defineModel("page", { type: Number, ...{
27
+ default: 1
28
+ } });
29
+ const sortkey = ref("");
30
+ const sortDesc = ref(false);
31
+ const itemHeaders = computed(() => {
32
+ if (props.itemHeader.length > 0) return props.itemHeader;
33
+ if (props.items.length === 0) return [];
34
+ const header = Object.keys(props.items[0] || {}).map(
35
+ (key) => ({
36
+ label: key,
37
+ key,
38
+ sort: true
39
+ })
40
+ );
41
+ return header;
42
+ });
43
+ const sortedItems = computed(() => {
44
+ return props.items.slice().sort((a, b) => {
45
+ if (!sortkey.value) return 0;
46
+ const valueA = a[sortkey.value];
47
+ const valueB = b[sortkey.value];
48
+ if (valueA === valueB) return 0;
49
+ const comparison = valueA > valueB ? 1 : -1;
50
+ return sortDesc.value ? -comparison : comparison;
51
+ });
52
+ });
53
+ const onSortBy = (key) => {
54
+ if (sortkey.value === key) {
55
+ sortDesc.value = !sortDesc.value;
56
+ } else {
57
+ sortkey.value = key;
58
+ sortDesc.value = false;
59
+ }
60
+ };
61
+ const getAlignmentClass = (alignment = "start") => {
62
+ const alignmentClasses = {
63
+ start: "text-left",
64
+ center: "text-center",
65
+ end: "text-right"
66
+ };
67
+ return alignmentClasses[alignment];
68
+ };
69
+ </script>
70
+
71
+ <template>
72
+ <div class="bg-white rounded-lg h-full flex flex-col">
73
+ <!-- Table Container -->
74
+ <div
75
+ class="flex-1 overflow-auto"
76
+ :style="{
77
+ height: props.fullHeight ? '100%' : props.height ? `${props.height}px` : 'auto',
78
+ maxHeight: props.maxHeight ? `${props.maxHeight}px` : void 0
79
+ }"
80
+ >
81
+ <ShadTable>
82
+ <!-- Header -->
83
+ <ShadTableHeader v-if="!props.disabledHeader">
84
+ <slot name="header" :item="props.itemHeader">
85
+ <ShadTableRow>
86
+ <ShadTableHead
87
+ v-for="(header, i) in itemHeaders"
88
+ :key="i"
89
+ :class="
90
+ getAlignmentClass(header.alinement || props.headerAlinement)
91
+ "
92
+ >
93
+ <div class="flex items-center gap-2">
94
+ <span>{{ header.label }}</span>
95
+ <button
96
+ v-if="header.sort !== false && !props.disabledSort"
97
+ type="button"
98
+ :class="[
99
+ 'flex items-center justify-center cursor-pointer hover:text-primary transition-colors',
100
+ sortkey === header.key && 'text-primary'
101
+ ]"
102
+ @click="onSortBy(header.key)"
103
+ >
104
+ <Icon name="fa6-solid:sort" size="14" />
105
+ </button>
106
+ </div>
107
+ </ShadTableHead>
108
+ </ShadTableRow>
109
+ </slot>
110
+ </ShadTableHeader>
111
+
112
+ <!-- Body -->
113
+ <slot name="body" :items="sortedItems" :header="itemHeaders">
114
+ <ShadTableBody>
115
+ <template v-if="sortedItems.length > 0">
116
+ <ShadTableRow
117
+ v-for="(item, i_body) in sortedItems"
118
+ :key="i_body"
119
+ class="cursor-pointer"
120
+ @click="emit('click-row', item, i_body)"
121
+ >
122
+ <slot
123
+ name="item"
124
+ :item="item"
125
+ :header="itemHeaders"
126
+ :index="i_body"
127
+ >
128
+ <ShadTableCell
129
+ v-for="(header, i_header) in itemHeaders"
130
+ :key="i_header"
131
+ :class="
132
+ getAlignmentClass(header.alinement || props.cellAlinement)
133
+ "
134
+ >
135
+ <slot :name="`item-${header.key}`" :item="item">
136
+ {{ item[header.key] }}
137
+ </slot>
138
+ </ShadTableCell>
139
+ </slot>
140
+ </ShadTableRow>
141
+ </template>
142
+
143
+ <!-- Empty State -->
144
+ <template v-else>
145
+ <slot name="empty">
146
+ <ShadTableEmpty :colspan="itemHeaders?.length || 1">
147
+ <slot name="empty-content" />
148
+ </ShadTableEmpty>
149
+ </slot>
150
+ </template>
151
+ </ShadTableBody>
152
+ </slot>
153
+ </ShadTable>
154
+ </div>
155
+
156
+ <!-- Pagination -->
157
+ <div
158
+ v-if="sortedItems.length > 0 && !props.disabledPagination"
159
+ class="p-4 flex justify-center items-center border-t"
160
+ >
161
+ <Pagination
162
+ :totalPage="props.totalPage"
163
+ v-model="page"
164
+ @change-item-per-page="
165
+ (val) => emit('change-item-per-page', val)
166
+ "
167
+ />
168
+ </div>
169
+ </div>
170
+ </template>
@@ -0,0 +1,76 @@
1
+ import type { TableHeader, TableHeaderAlignment } from "@/types/components/table";
2
+ export interface DataTableProps {
3
+ items?: Record<string, any>[];
4
+ itemHeader?: TableHeader[];
5
+ headerAlinement?: TableHeaderAlignment;
6
+ cellAlinement?: TableHeaderAlignment;
7
+ height?: number | string;
8
+ maxHeight?: number | string;
9
+ fullHeight?: boolean;
10
+ disabledHeader?: boolean;
11
+ disabledSort?: boolean;
12
+ disabledPagination?: boolean;
13
+ totalPage?: number;
14
+ }
15
+ type __VLS_Props = DataTableProps;
16
+ type __VLS_ModelProps = {
17
+ "page"?: number;
18
+ };
19
+ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
20
+ declare var __VLS_11: {
21
+ item: TableHeader[];
22
+ }, __VLS_28: {
23
+ items: any;
24
+ header: any;
25
+ }, __VLS_43: {
26
+ item: any;
27
+ header: any;
28
+ index: number;
29
+ }, __VLS_51: `item-${any}`, __VLS_52: {
30
+ item: any;
31
+ }, __VLS_54: {}, __VLS_61: {};
32
+ type __VLS_Slots = {} & {
33
+ [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
34
+ } & {
35
+ header?: (props: typeof __VLS_11) => any;
36
+ } & {
37
+ body?: (props: typeof __VLS_28) => any;
38
+ } & {
39
+ item?: (props: typeof __VLS_43) => any;
40
+ } & {
41
+ empty?: (props: typeof __VLS_54) => any;
42
+ } & {
43
+ 'empty-content'?: (props: typeof __VLS_61) => any;
44
+ };
45
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
46
+ "update:page": (value: number) => any;
47
+ } & {
48
+ "select-page": (value: number) => any;
49
+ "change-page": (value: number) => any;
50
+ "click-row": (item: Record<string, any>, index: number) => any;
51
+ "change-item-per-page": (value: number) => any;
52
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
53
+ "onSelect-page"?: ((value: number) => any) | undefined;
54
+ "onChange-page"?: ((value: number) => any) | undefined;
55
+ "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
56
+ "onChange-item-per-page"?: ((value: number) => any) | undefined;
57
+ "onUpdate:page"?: ((value: number) => any) | undefined;
58
+ }>, {
59
+ items: Record<string, any>[];
60
+ fullHeight: boolean;
61
+ itemHeader: TableHeader[];
62
+ headerAlinement: TableHeaderAlignment;
63
+ cellAlinement: TableHeaderAlignment;
64
+ disabledHeader: boolean;
65
+ disabledSort: boolean;
66
+ disabledPagination: boolean;
67
+ totalPage: number;
68
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
69
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
70
+ declare const _default: typeof __VLS_export;
71
+ export default _default;
72
+ type __VLS_WithSlots<T, S> = T & {
73
+ new (): {
74
+ $slots: S;
75
+ };
76
+ };
@@ -35,9 +35,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
35
35
  required: boolean;
36
36
  id: string;
37
37
  name: string;
38
+ placeholder: string;
38
39
  description: string;
39
40
  options: AutocompleteOption[] | string[] | number[];
40
- placeholder: string;
41
41
  limit: number;
42
42
  disabledErrorMessage: boolean;
43
43
  disabledBorder: boolean;
@@ -35,9 +35,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
35
35
  required: boolean;
36
36
  id: string;
37
37
  name: string;
38
+ placeholder: string;
38
39
  description: string;
39
40
  options: AutocompleteOption[] | string[] | number[];
40
- placeholder: string;
41
41
  limit: number;
42
42
  disabledErrorMessage: boolean;
43
43
  disabledBorder: boolean;
@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
11
11
  } & {
12
12
  "change-item-per-page": (value: number) => any;
13
13
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
14
- "onUpdate:modelValue"?: ((value: number) => any) | undefined;
15
14
  "onChange-item-per-page"?: ((value: number) => any) | undefined;
15
+ "onUpdate:modelValue"?: ((value: number) => any) | undefined;
16
16
  }>, {
17
17
  totalPage: number;
18
18
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
11
11
  } & {
12
12
  "change-item-per-page": (value: number) => any;
13
13
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
14
- "onUpdate:modelValue"?: ((value: number) => any) | undefined;
15
14
  "onChange-item-per-page"?: ((value: number) => any) | undefined;
15
+ "onUpdate:modelValue"?: ((value: number) => any) | undefined;
16
16
  }>, {
17
17
  totalPage: number;
18
18
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -31,10 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
31
31
  variant: TabVariant;
32
32
  color: TabColor;
33
33
  items: Item[];
34
+ disabledHeader: boolean;
34
35
  tabButtonSize: import("@/types/components/tab").TabButtonSize;
35
36
  tabButtonGap: string | number;
36
37
  changeTabContentReset: boolean;
37
- disabledHeader: boolean;
38
38
  disabledHeaderDivider: boolean;
39
39
  disabledContent: boolean;
40
40
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -31,10 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
31
31
  variant: TabVariant;
32
32
  color: TabColor;
33
33
  items: Item[];
34
+ disabledHeader: boolean;
34
35
  tabButtonSize: import("@/types/components/tab").TabButtonSize;
35
36
  tabButtonGap: string | number;
36
37
  changeTabContentReset: boolean;
37
- disabledHeader: boolean;
38
38
  disabledHeaderDivider: boolean;
39
39
  disabledContent: boolean;
40
40
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -41,11 +41,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
41
41
  }>, {
42
42
  items: Record<string, any>[];
43
43
  fullHeight: false;
44
- totalPage: number;
45
- disabledHeader: false;
46
44
  itemHeader: TableHeader[];
47
45
  headerAlinement: "start" | "center" | "end";
46
+ disabledHeader: false;
48
47
  disabledSort: false;
48
+ totalPage: number;
49
49
  paginationVisible: number;
50
50
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
51
51
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -41,11 +41,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
41
41
  }>, {
42
42
  items: Record<string, any>[];
43
43
  fullHeight: false;
44
- totalPage: number;
45
- disabledHeader: false;
46
44
  itemHeader: TableHeader[];
47
45
  headerAlinement: "start" | "center" | "end";
46
+ disabledHeader: false;
48
47
  disabledSort: false;
48
+ totalPage: number;
49
49
  paginationVisible: number;
50
50
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
51
51
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
- "version": "1.22.2",
3
+ "version": "1.24.0",
4
4
  "description": "pukaad-ui for MeMSG",
5
5
  "repository": {
6
6
  "type": "git",