globuswebcomponents 2.10.7 → 2.10.8
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/cjs/gb-avatar_44.cjs.entry.js +108 -71
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-table/gb-table.js +118 -76
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/components/gb-table.js +109 -71
- package/dist/components/gb-table.js.map +1 -1
- package/dist/docs.json +26 -8
- package/dist/esm/gb-avatar_44.entry.js +108 -71
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-8251390e.entry.js → p-b3160401.entry.js} +2 -2
- package/dist/globuscomponents/p-b3160401.entry.js.map +1 -0
- package/dist/types/components/gb-table/gb-table.d.ts +1 -0
- package/dist/types/components.d.ts +22 -4
- package/package.json +1 -1
- package/dist/globuscomponents/p-8251390e.entry.js.map +0 -1
|
@@ -4,69 +4,98 @@ export class GbTable {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.loading = false;
|
|
6
6
|
this.columns = [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
{ key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
|
|
8
|
+
{ key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
|
|
9
|
+
{ key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
|
|
10
|
+
{ key: 'role', label: 'Role' },
|
|
11
|
+
{ key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
|
|
12
|
+
{
|
|
13
|
+
key: 'status',
|
|
14
|
+
label: 'Status',
|
|
15
|
+
cellComponent: 'gb-badge',
|
|
16
|
+
cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
|
|
17
|
+
cellSlots: {
|
|
18
|
+
default: {
|
|
19
|
+
tag: 'p',
|
|
20
|
+
content: row => row.status,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
24
|
];
|
|
25
25
|
this.data = [
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
26
|
+
// {
|
|
27
|
+
// id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
|
|
28
|
+
// date: 'Jan 1, 2022',
|
|
29
|
+
// name: 'Emma Johnson',
|
|
30
|
+
// role: 'Frontend Developer',
|
|
31
|
+
// level: 'Today',
|
|
32
|
+
// customer: 'John Doe',
|
|
33
|
+
// amount: '$120.00',
|
|
34
|
+
// status: 'Completed',
|
|
35
|
+
// },
|
|
36
|
+
// { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
37
|
+
// { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
38
|
+
// { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
39
|
+
// { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
40
|
+
// { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
41
|
+
{ id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
|
|
42
|
+
{ id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
|
|
43
|
+
{ id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
|
|
44
|
+
{ id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
|
|
45
|
+
{ id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
|
|
46
|
+
{ id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
|
|
47
|
+
{ id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
|
|
48
|
+
{ id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
|
|
49
|
+
{ id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
|
|
50
|
+
{ id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
|
|
51
|
+
{ id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
|
|
52
|
+
{ id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
|
|
53
|
+
{ id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
|
|
54
|
+
{ id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
|
|
55
|
+
{ id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
|
|
56
|
+
{ id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
|
|
57
|
+
{ id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
|
|
58
|
+
{ id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
|
|
59
|
+
{ id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
|
|
60
|
+
{ id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
|
|
61
|
+
{ id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
|
|
62
|
+
{ id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
|
|
63
|
+
{ id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
|
|
64
|
+
{ id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
|
|
65
|
+
{ id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
|
|
66
|
+
{ id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
|
|
67
|
+
{ id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
|
|
68
|
+
{ id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
|
|
69
69
|
];
|
|
70
|
+
this.tableHeaderConfig = {
|
|
71
|
+
tableHeading: false,
|
|
72
|
+
tableHeadingLabel: 'Suspicious outflows',
|
|
73
|
+
showDateFilter: true,
|
|
74
|
+
showFilter: true,
|
|
75
|
+
showColumnOptions: true,
|
|
76
|
+
showSearch: true,
|
|
77
|
+
showExport: true,
|
|
78
|
+
showRefreshButton: false,
|
|
79
|
+
datePickerMode: 'range',
|
|
80
|
+
inputPlaceholder: 'Transaction reference',
|
|
81
|
+
};
|
|
82
|
+
this.paginationConfig = {
|
|
83
|
+
paginationMode: 'internal',
|
|
84
|
+
entriesDropdownMenuPosition: 'top',
|
|
85
|
+
currentPage: 1,
|
|
86
|
+
pageSize: 10,
|
|
87
|
+
};
|
|
88
|
+
this.emptyStateConfig = {
|
|
89
|
+
size: 'md',
|
|
90
|
+
background: true,
|
|
91
|
+
backgroundType: 'grid',
|
|
92
|
+
mainText: 'No data available',
|
|
93
|
+
supportingText: 'Try adjusting your filters or check back later.',
|
|
94
|
+
color: 'gray',
|
|
95
|
+
illustrationIcon: 'assets/alert-circle.svg',
|
|
96
|
+
illustrationStyle: 'box',
|
|
97
|
+
theme: 'light',
|
|
98
|
+
};
|
|
70
99
|
this.showActionsColumn = true;
|
|
71
100
|
this.rowActions = [
|
|
72
101
|
// { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
|
|
@@ -138,11 +167,6 @@ export class GbTable {
|
|
|
138
167
|
componentWillLoad() {
|
|
139
168
|
this.initializeColumns(this.columns);
|
|
140
169
|
this.internalLoading = this.loading;
|
|
141
|
-
// Initialize internal pagination state from config
|
|
142
|
-
if (this.paginationConfig) {
|
|
143
|
-
this.internalPageSize = this.paginationConfig.pageSize || 10;
|
|
144
|
-
this.internalCurrentPage = this.paginationConfig.currentPage || 1;
|
|
145
|
-
}
|
|
146
170
|
}
|
|
147
171
|
componentWillRender() {
|
|
148
172
|
this.checkViewport();
|
|
@@ -344,7 +368,19 @@ export class GbTable {
|
|
|
344
368
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
345
369
|
}
|
|
346
370
|
onDataChange() {
|
|
347
|
-
this.
|
|
371
|
+
if (this.paginationConfig.paginationMode === 'internal') {
|
|
372
|
+
this.internalCurrentPage = 1;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
handlePaginationConfigChange(newValue) {
|
|
376
|
+
if (newValue) {
|
|
377
|
+
if (newValue.pageSize !== undefined) {
|
|
378
|
+
this.internalPageSize = newValue.pageSize;
|
|
379
|
+
}
|
|
380
|
+
if (newValue.paginationMode === 'external' && newValue.currentPage) {
|
|
381
|
+
this.internalCurrentPage = newValue.currentPage;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
348
384
|
}
|
|
349
385
|
onLoadingChange(newValue, _oldValue) {
|
|
350
386
|
this.internalLoading = newValue;
|
|
@@ -390,7 +426,7 @@ export class GbTable {
|
|
|
390
426
|
sticky_right: this.stickyLastColumn,
|
|
391
427
|
has_border: this.isScrollable,
|
|
392
428
|
[`table_header_${this.tableHeadColor}`]: true,
|
|
393
|
-
} }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.internalColumns
|
|
429
|
+
} }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.internalColumns
|
|
394
430
|
.filter(col => col.visible)
|
|
395
431
|
.map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: () => this.handleAction(action.action, row) })))))), h(Fragment, null, this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: this.dropdownPlacement, anchorEl: this.currentAnchorEl, boundaryEl: this.scrollContainer, dropdownHeight: requestAnimationFrame(() => this.dropdownRef.scrollHeight), open: true }, h("div", { class: "portal_dropdown_wrapper", ref: el => (this.dropdownRef = el) }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
|
|
396
432
|
this.handleAction(action.action, row);
|
|
@@ -468,16 +504,16 @@ export class GbTable {
|
|
|
468
504
|
window.removeEventListener('resize', this.checkViewport);
|
|
469
505
|
}
|
|
470
506
|
render() {
|
|
471
|
-
return (h("div", { key: '
|
|
507
|
+
return (h("div", { key: '3bff3528f989d76c611a5a6235ea865718ce6ba4', class: `table_wrapper` }, h("gb-table-header", { key: 'fb5be5b8b7f4325bd09219868918549b7389c214', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '7c68c52733ab3e3ef55d26ffee712e791d4d4cd9', class: "dialog", style: {
|
|
472
508
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
473
|
-
} }, h("div", { key: '
|
|
509
|
+
} }, h("div", { key: '751f230fd260240daa80ac376c38fe61900aff0f', class: "column-modal" }, h("div", { key: '83dfbcddaf9d27ad70a7c30281a565a71eae0210', class: "modal_header" }, h("div", { key: 'afbed44ee72dbd0e7465a98d3dccb1a0b9c49aeb', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'ad7f0c5692e1d80c10f734669c6ed207b30ad05c', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '44f32b3e299b9bd6db9a00524382919fa1366703', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '00df07ffe52d61b62b4decf95c5b891b38451b6b', class: "content_wrapper" }, h("div", { key: 'ea9a1c920a8f8a61398c10d3756291b29bf1f9a8', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
474
510
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
475
511
|
this.reorderColumns(this.draggedIndex, index);
|
|
476
512
|
}
|
|
477
513
|
this.draggedIndex = null;
|
|
478
514
|
} }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
|
|
479
515
|
this.toggleColumn(e, col.key);
|
|
480
|
-
} })))), h("div", { key: '
|
|
516
|
+
} })))), h("div", { key: 'ab28da10858e6134c0c68e5ec90aef28eb972e33', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: 'd2e1e798808f99d767fcb0a0687d7d0610d7c492', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '1e5642a51b1f714aff962ea58125585babe3657f', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
|
|
481
517
|
e.stopPropagation();
|
|
482
518
|
this.closeFilterModal();
|
|
483
519
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -516,7 +552,7 @@ export class GbTable {
|
|
|
516
552
|
// ✅ No loading + no data = empty state
|
|
517
553
|
h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.emptyStateConfig.mainText, "supporting-text": this.emptyStateConfig.supportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "primary-button-icon-leading-swap": "assets/plus.svg", "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : (
|
|
518
554
|
// ✅ Has data + not loading
|
|
519
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
555
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'fbaa4fef24c0f945761971376c184cd49a8dfcbe', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
|
|
520
556
|
}
|
|
521
557
|
static get is() { return "gb-table"; }
|
|
522
558
|
static get encapsulation() { return "shadow"; }
|
|
@@ -574,7 +610,7 @@ export class GbTable {
|
|
|
574
610
|
},
|
|
575
611
|
"getter": false,
|
|
576
612
|
"setter": false,
|
|
577
|
-
"defaultValue": "[\r\n
|
|
613
|
+
"defaultValue": "[\r\n { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n { key: 'role', label: 'Role' },\r\n { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n {\r\n key: 'status',\r\n label: 'Status',\r\n cellComponent: 'gb-badge',\r\n cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n cellSlots: {\r\n default: {\r\n tag: 'p',\r\n content: row => row.status,\r\n },\r\n },\r\n },\r\n ]"
|
|
578
614
|
},
|
|
579
615
|
"data": {
|
|
580
616
|
"type": "unknown",
|
|
@@ -592,7 +628,7 @@ export class GbTable {
|
|
|
592
628
|
},
|
|
593
629
|
"getter": false,
|
|
594
630
|
"setter": false,
|
|
595
|
-
"defaultValue": "[\r\n // {\r\n // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n // date: 'Jan 1, 2022',\r\n // name: 'Emma Johnson',\r\n // role: 'Frontend Developer',\r\n // level: 'Today',\r\n // customer: 'John Doe',\r\n // amount: '$120.00',\r\n // status: 'Completed',\r\n // },\r\n // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n
|
|
631
|
+
"defaultValue": "[\r\n // {\r\n // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n // date: 'Jan 1, 2022',\r\n // name: 'Emma Johnson',\r\n // role: 'Frontend Developer',\r\n // level: 'Today',\r\n // customer: 'John Doe',\r\n // amount: '$120.00',\r\n // status: 'Completed',\r\n // },\r\n // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n ]"
|
|
596
632
|
},
|
|
597
633
|
"tableHeaderConfig": {
|
|
598
634
|
"type": "unknown",
|
|
@@ -609,7 +645,8 @@ export class GbTable {
|
|
|
609
645
|
"text": ""
|
|
610
646
|
},
|
|
611
647
|
"getter": false,
|
|
612
|
-
"setter": false
|
|
648
|
+
"setter": false,
|
|
649
|
+
"defaultValue": "{\r\n tableHeading: false,\r\n tableHeadingLabel: 'Suspicious outflows',\r\n showDateFilter: true,\r\n showFilter: true,\r\n showColumnOptions: true,\r\n showSearch: true,\r\n showExport: true,\r\n showRefreshButton: false,\r\n datePickerMode: 'range',\r\n inputPlaceholder: 'Transaction reference',\r\n }"
|
|
613
650
|
},
|
|
614
651
|
"paginationConfig": {
|
|
615
652
|
"type": "unknown",
|
|
@@ -626,7 +663,8 @@ export class GbTable {
|
|
|
626
663
|
"text": ""
|
|
627
664
|
},
|
|
628
665
|
"getter": false,
|
|
629
|
-
"setter": false
|
|
666
|
+
"setter": false,
|
|
667
|
+
"defaultValue": "{\r\n paginationMode: 'internal',\r\n entriesDropdownMenuPosition: 'top',\r\n currentPage: 1,\r\n pageSize: 10,\r\n }"
|
|
630
668
|
},
|
|
631
669
|
"emptyStateConfig": {
|
|
632
670
|
"type": "unknown",
|
|
@@ -679,7 +717,8 @@ export class GbTable {
|
|
|
679
717
|
"text": ""
|
|
680
718
|
},
|
|
681
719
|
"getter": false,
|
|
682
|
-
"setter": false
|
|
720
|
+
"setter": false,
|
|
721
|
+
"defaultValue": "{\r\n size: 'md',\r\n background: true,\r\n backgroundType: 'grid',\r\n mainText: 'No data available',\r\n supportingText: 'Try adjusting your filters or check back later.',\r\n color: 'gray',\r\n illustrationIcon: 'assets/alert-circle.svg',\r\n illustrationStyle: 'box',\r\n theme: 'light',\r\n }"
|
|
683
722
|
},
|
|
684
723
|
"filterConfig": {
|
|
685
724
|
"type": "unknown",
|
|
@@ -1042,6 +1081,9 @@ export class GbTable {
|
|
|
1042
1081
|
return [{
|
|
1043
1082
|
"propName": "data",
|
|
1044
1083
|
"methodName": "onDataChange"
|
|
1084
|
+
}, {
|
|
1085
|
+
"propName": "paginationConfig",
|
|
1086
|
+
"methodName": "handlePaginationConfigChange"
|
|
1045
1087
|
}, {
|
|
1046
1088
|
"propName": "loading",
|
|
1047
1089
|
"methodName": "onLoadingChange"
|