globuswebcomponents 2.10.4 → 2.10.6
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 +73 -98
- package/dist/cjs/gb-toast.cjs.entry.js +3 -1
- package/dist/cjs/gb-toast.entry.cjs.js.map +1 -1
- 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 +74 -101
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/collection/components/gb-toast/gb-toast.js +3 -1
- package/dist/collection/components/gb-toast/gb-toast.js.map +1 -1
- package/dist/components/gb-table.js +74 -100
- package/dist/components/gb-table.js.map +1 -1
- package/dist/components/gb-toast.js +3 -1
- package/dist/components/gb-toast.js.map +1 -1
- package/dist/docs.json +5 -5
- package/dist/esm/gb-avatar_44.entry.js +73 -98
- package/dist/esm/gb-toast.entry.js +3 -1
- package/dist/esm/gb-toast.entry.js.map +1 -1
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/gb-toast.entry.esm.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-6ccc11b8.entry.js → p-8dad7535.entry.js} +2 -2
- package/dist/globuscomponents/p-8dad7535.entry.js.map +1 -0
- package/dist/globuscomponents/{p-eb087176.entry.js → p-f3bd7944.entry.js} +2 -2
- package/dist/globuscomponents/p-f3bd7944.entry.js.map +1 -0
- package/dist/types/components/gb-table/gb-table.d.ts +0 -2
- package/dist/types/components.d.ts +4 -4
- package/package.json +3 -2
- package/dist/globuscomponents/p-6ccc11b8.entry.js.map +0 -1
- package/dist/globuscomponents/p-eb087176.entry.js.map +0 -1
|
@@ -4,68 +4,68 @@ 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
70
|
this.tableHeaderConfig = {
|
|
71
71
|
tableHeading: false,
|
|
@@ -134,11 +134,10 @@ export class GbTable {
|
|
|
134
134
|
this.draggedIndex = null;
|
|
135
135
|
this.handlePageChange = ({ detail }) => {
|
|
136
136
|
const { pageNumber, pageSize } = detail;
|
|
137
|
+
// Update these state variables to trigger a re-render
|
|
137
138
|
this.internalPageSize = pageSize;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
else {
|
|
139
|
+
this.internalCurrentPage = pageNumber;
|
|
140
|
+
if (this.paginationConfig.paginationMode === 'external') {
|
|
142
141
|
this.pageItemSelected.emit(detail);
|
|
143
142
|
}
|
|
144
143
|
};
|
|
@@ -355,13 +354,11 @@ export class GbTable {
|
|
|
355
354
|
this.selectionChanged.emit(selected);
|
|
356
355
|
}
|
|
357
356
|
get displayedData() {
|
|
358
|
-
if (!this.paginationConfig) {
|
|
359
|
-
return this.sortedData;
|
|
360
|
-
}
|
|
361
|
-
if (this.paginationConfig.paginationMode === 'external') {
|
|
362
|
-
return this.sortedData;
|
|
357
|
+
if (!this.paginationConfig || this.paginationConfig.paginationMode === 'external') {
|
|
358
|
+
return this.sortedData; // In external mode, we show what the parent sent
|
|
363
359
|
}
|
|
364
|
-
//
|
|
360
|
+
// INTERNAL MODE:
|
|
361
|
+
// This calculation must run every time internalCurrentPage changes
|
|
365
362
|
const start = (this.internalCurrentPage - 1) * this.internalPageSize;
|
|
366
363
|
const end = start + this.internalPageSize;
|
|
367
364
|
return this.sortedData.slice(start, end);
|
|
@@ -371,25 +368,9 @@ export class GbTable {
|
|
|
371
368
|
if (!this.paginationConfig)
|
|
372
369
|
return 1;
|
|
373
370
|
const pageSize = this.internalPageSize || 1;
|
|
374
|
-
|
|
375
|
-
// For external mode, rely on the provided totalItems prop
|
|
376
|
-
const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.data.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
371
|
+
const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.sortedData.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
377
372
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
378
373
|
}
|
|
379
|
-
// Inside your GbTable class in gb-table.tsx
|
|
380
|
-
get paginatedData() {
|
|
381
|
-
var _a;
|
|
382
|
-
// If mode is external, return all data (parent handles slicing)
|
|
383
|
-
if (((_a = this.paginationConfig) === null || _a === void 0 ? void 0 : _a.paginationMode) !== 'internal') {
|
|
384
|
-
return this.data;
|
|
385
|
-
}
|
|
386
|
-
// If mode is internal, slice the array locally
|
|
387
|
-
const pageSize = this.paginationConfig.pageSize || 10;
|
|
388
|
-
const currentPage = this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage;
|
|
389
|
-
const startIndex = (currentPage - 1) * pageSize;
|
|
390
|
-
const endIndex = startIndex + pageSize;
|
|
391
|
-
return this.data.slice(startIndex, endIndex);
|
|
392
|
-
}
|
|
393
374
|
onDataChange() {
|
|
394
375
|
this.internalCurrentPage = 1;
|
|
395
376
|
}
|
|
@@ -452,11 +433,6 @@ export class GbTable {
|
|
|
452
433
|
}
|
|
453
434
|
this.initializeColumns(newCols);
|
|
454
435
|
}
|
|
455
|
-
handlePaginationChange(newValue, oldValue) {
|
|
456
|
-
if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
|
|
457
|
-
this.internalCurrentPage = 1;
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
436
|
emitRowData(row) {
|
|
461
437
|
this.rowClicked.emit(row);
|
|
462
438
|
}
|
|
@@ -520,16 +496,16 @@ export class GbTable {
|
|
|
520
496
|
window.removeEventListener('resize', this.checkViewport);
|
|
521
497
|
}
|
|
522
498
|
render() {
|
|
523
|
-
return (h("div", { key: '
|
|
499
|
+
return (h("div", { key: '07df297969e67ed22e9d2d7e8c40fd5a6dac6707', class: `table_wrapper` }, h("gb-table-header", { key: 'd5993f9be3b3a5020faf6623cb87fa7343a13e23', 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: 'd253eeebb0b8719fa97b40ef29fbbefcc272adaf', class: "dialog", style: {
|
|
524
500
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
525
|
-
} }, h("div", { key: '
|
|
501
|
+
} }, h("div", { key: '0dbd61a4c32db9438e75ee572eae38ee5c86363b', class: "column-modal" }, h("div", { key: '68aa572c50074639ec5171ae14414d9ac6dc346d', class: "modal_header" }, h("div", { key: 'eb4aecd8a24bb9639687cceb67d5b8314d5398bf', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'cc9256ceb87d3ad3b543018c0d4527c06d4c8f2a', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'aad187ffbc9feb260242ee2c44d3d0ee848980e4', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '4ee5788dbfae79213a80285c82f5cff1c489d846', class: "content_wrapper" }, h("div", { key: '7d10619ad0bf91cf3a8ad3adf2ff3da256999ec5', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
526
502
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
527
503
|
this.reorderColumns(this.draggedIndex, index);
|
|
528
504
|
}
|
|
529
505
|
this.draggedIndex = null;
|
|
530
506
|
} }, 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 => {
|
|
531
507
|
this.toggleColumn(e, col.key);
|
|
532
|
-
} })))), h("div", { key: '
|
|
508
|
+
} })))), h("div", { key: 'aa4f1d22ced84032f6eee15ee122c9c04a27b85e', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '827e7f937361246a0abb7216b81a1277578e84c2', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '0e0db3a616282d8132d56ca2627da014222d3467', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
|
|
533
509
|
e.stopPropagation();
|
|
534
510
|
this.closeFilterModal();
|
|
535
511
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -568,7 +544,7 @@ export class GbTable {
|
|
|
568
544
|
// ✅ No loading + no data = empty state
|
|
569
545
|
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" }))) : (
|
|
570
546
|
// ✅ Has data + not loading
|
|
571
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
547
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '8fffdd4354947793a3c0f62c6d2687e64270b828', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
|
|
572
548
|
}
|
|
573
549
|
static get is() { return "gb-table"; }
|
|
574
550
|
static get encapsulation() { return "shadow"; }
|
|
@@ -626,7 +602,7 @@ export class GbTable {
|
|
|
626
602
|
},
|
|
627
603
|
"getter": false,
|
|
628
604
|
"setter": false,
|
|
629
|
-
"defaultValue": "[\r\n
|
|
605
|
+
"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 ]"
|
|
630
606
|
},
|
|
631
607
|
"data": {
|
|
632
608
|
"type": "unknown",
|
|
@@ -644,7 +620,7 @@ export class GbTable {
|
|
|
644
620
|
},
|
|
645
621
|
"getter": false,
|
|
646
622
|
"setter": false,
|
|
647
|
-
"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
|
|
623
|
+
"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 ]"
|
|
648
624
|
},
|
|
649
625
|
"tableHeaderConfig": {
|
|
650
626
|
"type": "unknown",
|
|
@@ -1103,9 +1079,6 @@ export class GbTable {
|
|
|
1103
1079
|
}, {
|
|
1104
1080
|
"propName": "columns",
|
|
1105
1081
|
"methodName": "validateMobilePositions"
|
|
1106
|
-
}, {
|
|
1107
|
-
"propName": "paginationConfig",
|
|
1108
|
-
"methodName": "handlePaginationChange"
|
|
1109
1082
|
}];
|
|
1110
1083
|
}
|
|
1111
1084
|
static get listeners() {
|