mertani-web-toolkit 0.1.38 → 0.1.39
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.
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
totalItems = 0,
|
|
22
22
|
onPageChange,
|
|
23
23
|
onItemsPerPageChange,
|
|
24
|
-
defaultBadgeStatusMappings
|
|
24
|
+
defaultBadgeStatusMappings,
|
|
25
|
+
emptyMessage = 'Tidak ada data'
|
|
25
26
|
}: {
|
|
26
27
|
columns?: Column[];
|
|
27
28
|
data?: any[];
|
|
@@ -37,16 +38,9 @@
|
|
|
37
38
|
onPageChange?: (page: number) => void;
|
|
38
39
|
onItemsPerPageChange?: (itemsPerPage: number) => void;
|
|
39
40
|
defaultBadgeStatusMappings?: BadgeStatusMapping[];
|
|
41
|
+
emptyMessage?: string;
|
|
40
42
|
} = $props();
|
|
41
43
|
|
|
42
|
-
const EMPTY_MESSAGE = 'Tidak ada data';
|
|
43
|
-
const HEADER_BASE_CLASS =
|
|
44
|
-
'bg-bg-surface-subtle px-4 py-3 text-left text-xs font-bold whitespace-nowrap text-text-primary';
|
|
45
|
-
const CELL_BASE_CLASS =
|
|
46
|
-
'px-4 py-3 text-sm whitespace-nowrap text-text-primary bg-bg-surface group-hover:bg-bg-surface-subtle';
|
|
47
|
-
const ROW_BASE_CLASS =
|
|
48
|
-
'group border-b border-border-outline bg-bg-surface hover:bg-bg-surface-subtle';
|
|
49
|
-
|
|
50
44
|
let scrollContainer: HTMLElement | null = $state(null);
|
|
51
45
|
let internalHasHorizontalScroll = $state(false);
|
|
52
46
|
let isMobile = $state(false);
|
|
@@ -191,7 +185,9 @@
|
|
|
191
185
|
}
|
|
192
186
|
|
|
193
187
|
function getHeaderClasses(column: Column): string {
|
|
194
|
-
const classes: string[] = [
|
|
188
|
+
const classes: string[] = [
|
|
189
|
+
'bg-bg-surface-subtle px-4 py-3 text-left text-xs font-bold whitespace-nowrap text-text-primary'
|
|
190
|
+
];
|
|
195
191
|
if (column.borderRight) classes.push('border-r border-border-outline');
|
|
196
192
|
if (column.headerClass) classes.push(column.headerClass);
|
|
197
193
|
return classes.join(' ');
|
|
@@ -205,7 +201,9 @@
|
|
|
205
201
|
}
|
|
206
202
|
|
|
207
203
|
function getCellClasses(column: Column): string {
|
|
208
|
-
const classes: string[] = [
|
|
204
|
+
const classes: string[] = [
|
|
205
|
+
'px-4 py-3 text-sm whitespace-nowrap text-text-primary bg-bg-surface group-hover:bg-bg-surface-subtle'
|
|
206
|
+
];
|
|
209
207
|
if (column.borderRight) classes.push('border-r border-border-outline');
|
|
210
208
|
if (column.cellClass) classes.push(column.cellClass);
|
|
211
209
|
return classes.join(' ');
|
|
@@ -219,7 +217,9 @@
|
|
|
219
217
|
}
|
|
220
218
|
|
|
221
219
|
function getRowClasses(): string {
|
|
222
|
-
const classes: string[] = [
|
|
220
|
+
const classes: string[] = [
|
|
221
|
+
'group border-b border-border-outline bg-bg-surface hover:bg-bg-surface-subtle'
|
|
222
|
+
];
|
|
223
223
|
if (onRowClick !== undefined) classes.push('cursor-pointer');
|
|
224
224
|
return classes.join(' ');
|
|
225
225
|
}
|
|
@@ -303,7 +303,7 @@
|
|
|
303
303
|
{@const shouldShowBorder =
|
|
304
304
|
childColumn.borderRight || (column.borderRight && isLastChild)}
|
|
305
305
|
<th
|
|
306
|
-
class="
|
|
306
|
+
class="bg-bg-surface-subtle px-4 py-3 text-left text-xs font-bold whitespace-nowrap text-text-primary {shouldShowBorder
|
|
307
307
|
? 'border-r border-border-outline'
|
|
308
308
|
: ''} {childColumn.headerClass || ''}"
|
|
309
309
|
data-shadow={!isMobile && childColumn.sticky === 'left' && hasHorizontalScroll
|
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
{:else if data.length === 0}
|
|
349
349
|
<tr>
|
|
350
350
|
<td colspan={totalColumnCount} class="px-4 py-8 text-center text-sm text-text-tertiary">
|
|
351
|
-
{
|
|
351
|
+
{emptyMessage}
|
|
352
352
|
</td>
|
|
353
353
|
</tr>
|
|
354
354
|
{:else}
|
|
@@ -14,6 +14,7 @@ type $$ComponentProps = {
|
|
|
14
14
|
onPageChange?: (page: number) => void;
|
|
15
15
|
onItemsPerPageChange?: (itemsPerPage: number) => void;
|
|
16
16
|
defaultBadgeStatusMappings?: BadgeStatusMapping[];
|
|
17
|
+
emptyMessage?: string;
|
|
17
18
|
};
|
|
18
19
|
declare const Table: import("svelte").Component<$$ComponentProps, {
|
|
19
20
|
Column: typeof Column;
|