@bexis2/bexis2-core-ui 0.4.21 → 0.4.22
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/README.md +7 -0
- package/dist/components/Facets/ShowMore.svelte +32 -52
- package/dist/components/Table/ColumnsMenu.svelte +2 -1
- package/dist/components/Table/TableContent.svelte +13 -0
- package/dist/components/Table/TableFilter.svelte +1 -1
- package/dist/components/Table/TablePagination.svelte +2 -2
- package/package.json +1 -1
- package/src/lib/components/Facets/ShowMore.svelte +35 -55
- package/src/lib/components/Table/ColumnsMenu.svelte +2 -1
- package/src/lib/components/Table/TableContent.svelte +13 -0
- package/src/lib/components/Table/TableFilter.svelte +1 -1
- package/src/lib/components/Table/TablePagination.svelte +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
# bexis-core-ui
|
|
2
|
+
## 0.4.22
|
|
3
|
+
- Facets
|
|
4
|
+
- Replace column class function with more efficient solution
|
|
5
|
+
- Sort options in ShowMore alphabetically
|
|
6
|
+
Table
|
|
7
|
+
- Add titles for components for better accessibility
|
|
8
|
+
- Remove z-index from pagination buttons
|
|
2
9
|
|
|
3
10
|
## 0.4.21
|
|
4
11
|
- change footer position in page component
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script>export let group;
|
|
2
2
|
export let handleApply;
|
|
3
3
|
export let handleCancel;
|
|
4
|
-
let selected =
|
|
4
|
+
let selected = Object.keys(group.children).sort((a, b) => group.children[a].displayName.localeCompare(group.children[b].displayName)).map((key) => ({ [key]: { ...group.children[key] } })).reduce((acc, val) => ({ ...acc, ...val }), {});
|
|
5
5
|
const selectAll = () => {
|
|
6
6
|
Object.keys(selected).forEach((key) => selected[key].selected = true);
|
|
7
7
|
};
|
|
@@ -15,64 +15,44 @@ const onApply = () => {
|
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
const onCancel = () => {
|
|
18
|
-
console.log(selected, group.children);
|
|
19
18
|
selected = structuredClone(group.children);
|
|
20
19
|
handleCancel(group.name);
|
|
21
20
|
};
|
|
22
|
-
const gridClass = (items) => {
|
|
23
|
-
const ceil = Math.ceil(Math.sqrt(items.length));
|
|
24
|
-
const max = Math.max(ceil, Math.floor(items.length / 3));
|
|
25
|
-
const classes = [
|
|
26
|
-
"grid-rows-1",
|
|
27
|
-
"grid-rows-2",
|
|
28
|
-
"grid-rows-3",
|
|
29
|
-
"grid-rows-4",
|
|
30
|
-
"grid-rows-5",
|
|
31
|
-
"grid-rows-6",
|
|
32
|
-
"grid-rows-7",
|
|
33
|
-
"grid-rows-8",
|
|
34
|
-
"grid-rows-9",
|
|
35
|
-
"grid-rows-10",
|
|
36
|
-
"grid-rows-11",
|
|
37
|
-
"grid-rows-12"
|
|
38
|
-
];
|
|
39
|
-
if (max > 12) {
|
|
40
|
-
return "grid-rows-12";
|
|
41
|
-
} else return classes[max - 1 || 1];
|
|
42
|
-
};
|
|
43
21
|
</script>
|
|
44
22
|
|
|
45
|
-
<div class="
|
|
46
|
-
|
|
47
|
-
|
|
23
|
+
<div class="w-full flex justify-center max-w-[800px]">
|
|
24
|
+
<div class="grow max-h-[500px]">
|
|
25
|
+
<div
|
|
26
|
+
class="p-5 rounded-md w-full bg-surface-50 dark:bg-surface-800 border-primary-500 border-2"
|
|
27
|
+
>
|
|
28
|
+
<!-- Header -->
|
|
29
|
+
<h2 class="text-xl font-semibold">{group.displayName}</h2>
|
|
48
30
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
>
|
|
63
|
-
</label>
|
|
64
|
-
{/each}
|
|
65
|
-
</div>
|
|
31
|
+
<!-- Items -->
|
|
32
|
+
<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
|
|
33
|
+
{#each Object.keys(selected) as key}
|
|
34
|
+
<label class="flex gap-3 items-center w-48">
|
|
35
|
+
<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
|
|
36
|
+
<span
|
|
37
|
+
title={selected[key].displayName}
|
|
38
|
+
class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
|
|
39
|
+
>{selected[key].displayName}</span
|
|
40
|
+
>
|
|
41
|
+
</label>
|
|
42
|
+
{/each}
|
|
43
|
+
</div>
|
|
66
44
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
45
|
+
<!-- Footer -->
|
|
46
|
+
<div class="flex w-full justify-between gap-5">
|
|
47
|
+
<div class="flex gap-3">
|
|
48
|
+
<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
|
|
49
|
+
<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="flex gap-3">
|
|
52
|
+
<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
|
|
53
|
+
<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
76
56
|
</div>
|
|
77
57
|
</div>
|
|
78
58
|
</div>
|
|
@@ -24,10 +24,11 @@ const popupCombobox = {
|
|
|
24
24
|
<div class="flex gap-3 items-center">
|
|
25
25
|
<label for={column.id} class="cursor-pointer" title={column.label}></label>
|
|
26
26
|
<input
|
|
27
|
-
aria-label=
|
|
27
|
+
aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
|
|
28
28
|
type="checkbox"
|
|
29
29
|
id = {column.id}
|
|
30
30
|
bind:checked={column.visible}
|
|
31
|
+
title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
|
|
31
32
|
disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
|
|
32
33
|
/>
|
|
33
34
|
<span>{column.label}</span>
|
|
@@ -337,6 +337,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
337
337
|
title="Search within all table rows"
|
|
338
338
|
bind:value={searchValue}
|
|
339
339
|
placeholder="Search rows..."
|
|
340
|
+
aria-label="Searchbox for searching rows"
|
|
340
341
|
id="{tableId}-search"
|
|
341
342
|
/><button
|
|
342
343
|
type="reset"
|
|
@@ -361,6 +362,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
361
362
|
title="Search"
|
|
362
363
|
id="{tableId}-searchSubmit"
|
|
363
364
|
class="btn variant-filled-primary"
|
|
365
|
+
aria-label="Search"
|
|
364
366
|
on:click|preventDefault={() => {
|
|
365
367
|
if (serverSide && !sendModel) {
|
|
366
368
|
throw new Error('Server-side configuration is missing');
|
|
@@ -389,6 +391,10 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
389
391
|
size="sm"
|
|
390
392
|
checked={fitToScreen}
|
|
391
393
|
id="{tableId}-toggle"
|
|
394
|
+
title={fitToScreen ? 'Fit table data to screen' : `Don't fit table data to screen`}
|
|
395
|
+
aria-label={fitToScreen
|
|
396
|
+
? 'Fit table data to screen'
|
|
397
|
+
: `Don't fit table data to screen`}
|
|
392
398
|
on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
|
|
393
399
|
>
|
|
394
400
|
{/if}
|
|
@@ -400,6 +406,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
400
406
|
type="button"
|
|
401
407
|
title="Reset column and row sizing"
|
|
402
408
|
class="btn btn-sm variant-filled-primary rounded-full order-last"
|
|
409
|
+
aria-label="Reset sizing of columns and rows"
|
|
403
410
|
on:click|preventDefault={() =>
|
|
404
411
|
resetResize($headerRows, $pageRows, tableId, columns, resizable)}
|
|
405
412
|
>Reset sizing</button
|
|
@@ -410,6 +417,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
410
417
|
type="button"
|
|
411
418
|
title="Export table data as CSV"
|
|
412
419
|
class="btn btn-sm variant-filled-primary rounded-full order-last"
|
|
420
|
+
aria-label="Export table data as CSV"
|
|
413
421
|
on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
|
|
414
422
|
>Export as CSV</button
|
|
415
423
|
>
|
|
@@ -458,6 +466,11 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
458
466
|
class:cursor-pointer={!props.sort.disabled}
|
|
459
467
|
on:click={props.sort.toggle}
|
|
460
468
|
on:keydown={props.sort.toggle}
|
|
469
|
+
title={props.sort.order === 'asc'
|
|
470
|
+
? `Sort by ${cell.label} column in descending order`
|
|
471
|
+
: props.sort.order === 'desc'
|
|
472
|
+
? `Remove sorting by ${cell.label} column`
|
|
473
|
+
: `Sort by ${cell.label} column in ascending order`}
|
|
461
474
|
>
|
|
462
475
|
{cell.render()}
|
|
463
476
|
</span>
|
|
@@ -39,7 +39,7 @@ $: goToPreviousPageDisabled = !$hasPreviousPage;
|
|
|
39
39
|
$: $pageSize = pageSizeDropdownValue;
|
|
40
40
|
</script>
|
|
41
41
|
|
|
42
|
-
<div class="flex justify-between w-full items-stretch gap-10
|
|
42
|
+
<div class="flex justify-between w-full items-stretch gap-10">
|
|
43
43
|
<div class="flex justify-start">
|
|
44
44
|
<!-- <select
|
|
45
45
|
name="pageSize"
|
|
@@ -53,7 +53,7 @@ $: $pageSize = pageSizeDropdownValue;
|
|
|
53
53
|
</select> -->
|
|
54
54
|
|
|
55
55
|
<button
|
|
56
|
-
aria-label="Open menu to select number of items per page"
|
|
56
|
+
aria-label="Open menu to select number of items to display per page"
|
|
57
57
|
class="btn variant-filled-primary w-20 justify-between"
|
|
58
58
|
use:popup={pageSizePopup}
|
|
59
59
|
>
|
package/package.json
CHANGED
|
@@ -5,7 +5,10 @@
|
|
|
5
5
|
export let handleApply: (group: SelectedFacetGroup) => {};
|
|
6
6
|
export let handleCancel: (groupName: string) => {};
|
|
7
7
|
|
|
8
|
-
let selected =
|
|
8
|
+
let selected = Object.keys(group.children)
|
|
9
|
+
.sort((a, b) => group.children[a].displayName.localeCompare(group.children[b].displayName))
|
|
10
|
+
.map((key) => ({ [key]: { ...group.children[key] } }))
|
|
11
|
+
.reduce((acc, val) => ({ ...acc, ...val }), {});
|
|
9
12
|
|
|
10
13
|
const selectAll = () => {
|
|
11
14
|
Object.keys(selected).forEach((key) => (selected[key].selected = true));
|
|
@@ -23,67 +26,44 @@
|
|
|
23
26
|
};
|
|
24
27
|
|
|
25
28
|
const onCancel = () => {
|
|
26
|
-
console.log(selected, group.children);
|
|
27
29
|
selected = structuredClone(group.children);
|
|
28
30
|
handleCancel(group.name);
|
|
29
31
|
};
|
|
30
|
-
|
|
31
|
-
const gridClass = (items: any[]) => {
|
|
32
|
-
const ceil = Math.ceil(Math.sqrt(items.length));
|
|
33
|
-
const max = Math.max(ceil, Math.floor(items.length / 3));
|
|
34
|
-
|
|
35
|
-
const classes = [
|
|
36
|
-
'grid-rows-1',
|
|
37
|
-
'grid-rows-2',
|
|
38
|
-
'grid-rows-3',
|
|
39
|
-
'grid-rows-4',
|
|
40
|
-
'grid-rows-5',
|
|
41
|
-
'grid-rows-6',
|
|
42
|
-
'grid-rows-7',
|
|
43
|
-
'grid-rows-8',
|
|
44
|
-
'grid-rows-9',
|
|
45
|
-
'grid-rows-10',
|
|
46
|
-
'grid-rows-11',
|
|
47
|
-
'grid-rows-12'
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
if (max > 12) {
|
|
51
|
-
return 'grid-rows-12';
|
|
52
|
-
} else return classes[max - 1 || 1];
|
|
53
|
-
};
|
|
54
32
|
</script>
|
|
55
33
|
|
|
56
|
-
<div class="
|
|
57
|
-
|
|
58
|
-
|
|
34
|
+
<div class="w-full flex justify-center max-w-[800px]">
|
|
35
|
+
<div class="grow max-h-[500px]">
|
|
36
|
+
<div
|
|
37
|
+
class="p-5 rounded-md w-full bg-surface-50 dark:bg-surface-800 border-primary-500 border-2"
|
|
38
|
+
>
|
|
39
|
+
<!-- Header -->
|
|
40
|
+
<h2 class="text-xl font-semibold">{group.displayName}</h2>
|
|
59
41
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
>
|
|
74
|
-
</label>
|
|
75
|
-
{/each}
|
|
76
|
-
</div>
|
|
42
|
+
<!-- Items -->
|
|
43
|
+
<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
|
|
44
|
+
{#each Object.keys(selected) as key}
|
|
45
|
+
<label class="flex gap-3 items-center w-48">
|
|
46
|
+
<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
|
|
47
|
+
<span
|
|
48
|
+
title={selected[key].displayName}
|
|
49
|
+
class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
|
|
50
|
+
>{selected[key].displayName}</span
|
|
51
|
+
>
|
|
52
|
+
</label>
|
|
53
|
+
{/each}
|
|
54
|
+
</div>
|
|
77
55
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
56
|
+
<!-- Footer -->
|
|
57
|
+
<div class="flex w-full justify-between gap-5">
|
|
58
|
+
<div class="flex gap-3">
|
|
59
|
+
<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
|
|
60
|
+
<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="flex gap-3">
|
|
63
|
+
<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
|
|
64
|
+
<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
87
67
|
</div>
|
|
88
68
|
</div>
|
|
89
69
|
</div>
|
|
@@ -28,10 +28,11 @@
|
|
|
28
28
|
<div class="flex gap-3 items-center">
|
|
29
29
|
<label for={column.id} class="cursor-pointer" title={column.label}></label>
|
|
30
30
|
<input
|
|
31
|
-
aria-label=
|
|
31
|
+
aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
|
|
32
32
|
type="checkbox"
|
|
33
33
|
id = {column.id}
|
|
34
34
|
bind:checked={column.visible}
|
|
35
|
+
title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
|
|
35
36
|
disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
|
|
36
37
|
/>
|
|
37
38
|
<span>{column.label}</span>
|
|
@@ -405,6 +405,7 @@
|
|
|
405
405
|
title="Search within all table rows"
|
|
406
406
|
bind:value={searchValue}
|
|
407
407
|
placeholder="Search rows..."
|
|
408
|
+
aria-label="Searchbox for searching rows"
|
|
408
409
|
id="{tableId}-search"
|
|
409
410
|
/><button
|
|
410
411
|
type="reset"
|
|
@@ -429,6 +430,7 @@
|
|
|
429
430
|
title="Search"
|
|
430
431
|
id="{tableId}-searchSubmit"
|
|
431
432
|
class="btn variant-filled-primary"
|
|
433
|
+
aria-label="Search"
|
|
432
434
|
on:click|preventDefault={() => {
|
|
433
435
|
if (serverSide && !sendModel) {
|
|
434
436
|
throw new Error('Server-side configuration is missing');
|
|
@@ -457,6 +459,10 @@
|
|
|
457
459
|
size="sm"
|
|
458
460
|
checked={fitToScreen}
|
|
459
461
|
id="{tableId}-toggle"
|
|
462
|
+
title={fitToScreen ? 'Fit table data to screen' : `Don't fit table data to screen`}
|
|
463
|
+
aria-label={fitToScreen
|
|
464
|
+
? 'Fit table data to screen'
|
|
465
|
+
: `Don't fit table data to screen`}
|
|
460
466
|
on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
|
|
461
467
|
>
|
|
462
468
|
{/if}
|
|
@@ -468,6 +474,7 @@
|
|
|
468
474
|
type="button"
|
|
469
475
|
title="Reset column and row sizing"
|
|
470
476
|
class="btn btn-sm variant-filled-primary rounded-full order-last"
|
|
477
|
+
aria-label="Reset sizing of columns and rows"
|
|
471
478
|
on:click|preventDefault={() =>
|
|
472
479
|
resetResize($headerRows, $pageRows, tableId, columns, resizable)}
|
|
473
480
|
>Reset sizing</button
|
|
@@ -478,6 +485,7 @@
|
|
|
478
485
|
type="button"
|
|
479
486
|
title="Export table data as CSV"
|
|
480
487
|
class="btn btn-sm variant-filled-primary rounded-full order-last"
|
|
488
|
+
aria-label="Export table data as CSV"
|
|
481
489
|
on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
|
|
482
490
|
>Export as CSV</button
|
|
483
491
|
>
|
|
@@ -526,6 +534,11 @@
|
|
|
526
534
|
class:cursor-pointer={!props.sort.disabled}
|
|
527
535
|
on:click={props.sort.toggle}
|
|
528
536
|
on:keydown={props.sort.toggle}
|
|
537
|
+
title={props.sort.order === 'asc'
|
|
538
|
+
? `Sort by ${cell.label} column in descending order`
|
|
539
|
+
: props.sort.order === 'desc'
|
|
540
|
+
? `Remove sorting by ${cell.label} column`
|
|
541
|
+
: `Sort by ${cell.label} column in ascending order`}
|
|
529
542
|
>
|
|
530
543
|
{cell.render()}
|
|
531
544
|
</span>
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
$: $pageSize = pageSizeDropdownValue;
|
|
50
50
|
</script>
|
|
51
51
|
|
|
52
|
-
<div class="flex justify-between w-full items-stretch gap-10
|
|
52
|
+
<div class="flex justify-between w-full items-stretch gap-10">
|
|
53
53
|
<div class="flex justify-start">
|
|
54
54
|
<!-- <select
|
|
55
55
|
name="pageSize"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</select> -->
|
|
64
64
|
|
|
65
65
|
<button
|
|
66
|
-
aria-label="Open menu to select number of items per page"
|
|
66
|
+
aria-label="Open menu to select number of items to display per page"
|
|
67
67
|
class="btn variant-filled-primary w-20 justify-between"
|
|
68
68
|
use:popup={pageSizePopup}
|
|
69
69
|
>
|