@bexis2/bexis2-core-ui 0.4.20 → 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 +10 -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/dist/components/page/Docs.svelte +1 -1
- package/dist/components/page/Page.svelte +22 -16
- package/dist/components/page/menu/MenuSublist.svelte +5 -7
- package/package.json +114 -114
- 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/src/lib/components/page/Docs.svelte +1 -1
- package/src/lib/components/page/Page.svelte +23 -17
- package/src/lib/components/page/menu/MenuSublist.svelte +8 -11
package/README.md
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
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
|
|
9
|
+
|
|
10
|
+
## 0.4.21
|
|
11
|
+
- change footer position in page component
|
|
2
12
|
|
|
3
13
|
## 0.4.20
|
|
4
14
|
- Add aria-label to Table and other components
|
|
@@ -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
|
>
|
|
@@ -29,7 +29,7 @@ const noteSettings = {
|
|
|
29
29
|
{/if}
|
|
30
30
|
|
|
31
31
|
{#each links as link}
|
|
32
|
-
<span class="chip variant-soft hover:variant-filled"
|
|
32
|
+
<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
|
|
33
33
|
<span>{link.label}</span>
|
|
34
34
|
</span>
|
|
35
35
|
{/each}
|
|
@@ -41,23 +41,23 @@ function scrollToTop() {
|
|
|
41
41
|
</script>
|
|
42
42
|
|
|
43
43
|
<div class="app" bind:this={app}>
|
|
44
|
-
<
|
|
44
|
+
<AppShell>
|
|
45
45
|
<!--header-->
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<Breadcrumb bind:title />
|
|
54
|
-
<Docs {links} {note} />
|
|
55
|
-
</div>
|
|
56
|
-
</header>
|
|
46
|
+
<svelte:fragment slot="header">
|
|
47
|
+
<AppBar padding="0" spacing="space-y-0" background="white">
|
|
48
|
+
<svelte:fragment slot="headline">
|
|
49
|
+
<Header />
|
|
50
|
+
{#if true}
|
|
51
|
+
<Menu />
|
|
52
|
+
{/if}
|
|
57
53
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
<div class="grid grid-cols-2">
|
|
55
|
+
<Breadcrumb bind:title />
|
|
56
|
+
<Docs {links} {note} />
|
|
57
|
+
</div>
|
|
58
|
+
</svelte:fragment>
|
|
59
|
+
</AppBar>
|
|
60
|
+
</svelte:fragment>
|
|
61
61
|
|
|
62
62
|
<slot name="description" />
|
|
63
63
|
|
|
@@ -94,5 +94,11 @@ function scrollToTop() {
|
|
|
94
94
|
<GoToTop/>
|
|
95
95
|
<HelpPopUp active={help} />
|
|
96
96
|
<Notification />
|
|
97
|
+
|
|
98
|
+
<svelte:fragment slot="footer">
|
|
99
|
+
<Footer />
|
|
100
|
+
</svelte:fragment>
|
|
101
|
+
|
|
102
|
+
</AppShell>
|
|
97
103
|
</div>
|
|
98
|
-
|
|
104
|
+
|
|
@@ -15,14 +15,12 @@ function isNewModule(module) {
|
|
|
15
15
|
return true;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
function clickFn(item
|
|
18
|
+
function clickFn(item) {
|
|
19
19
|
if (item.Title == "Log Off") {
|
|
20
20
|
logOffFn();
|
|
21
21
|
return;
|
|
22
|
-
} else if (newWindow == false) {
|
|
23
|
-
goTo(item.Url);
|
|
24
22
|
} else {
|
|
25
|
-
|
|
23
|
+
goTo(item.Url);
|
|
26
24
|
}
|
|
27
25
|
}
|
|
28
26
|
async function logOffFn() {
|
|
@@ -51,8 +49,8 @@ async function logOffFn() {
|
|
|
51
49
|
|
|
52
50
|
<ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
|
|
53
51
|
{#each items as item}
|
|
54
|
-
{#if isNewModule(item.Module)}<hr class="text-surface-800"/>{/if}
|
|
55
|
-
|
|
52
|
+
{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
|
|
53
|
+
|
|
56
54
|
<ListBoxItem
|
|
57
55
|
class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
|
|
58
56
|
bind:group={item.Title}
|
|
@@ -62,6 +60,6 @@ async function logOffFn() {
|
|
|
62
60
|
>
|
|
63
61
|
{item.Title}
|
|
64
62
|
</ListBoxItem>
|
|
65
|
-
|
|
63
|
+
|
|
66
64
|
{/each}
|
|
67
65
|
</ListBox>
|
package/package.json
CHANGED
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@bexis2/bexis2-core-ui",
|
|
3
|
-
"version": "0.4.
|
|
4
|
-
"private": false,
|
|
5
|
-
"scripts": {
|
|
6
|
-
"dev": "vite dev",
|
|
7
|
-
"build": "vite build",
|
|
8
|
-
"build package": "svelte-kit sync && svelte-package --watch",
|
|
9
|
-
"preview": "vite preview",
|
|
10
|
-
"test": "playwright test",
|
|
11
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
12
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
13
|
-
"test:unit": "vitest",
|
|
14
|
-
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
|
15
|
-
"format": "prettier --plugin-search-dir . --write .",
|
|
16
|
-
"check outdated": "npm outdated",
|
|
17
|
-
"upgrade all": "ncu --upgrade",
|
|
18
|
-
"1.npm - update package infos": "npm init --scope bexis2",
|
|
19
|
-
"2.npm - package": "svelte-package",
|
|
20
|
-
"3.npm - publish": "npm publish --access public"
|
|
21
|
-
},
|
|
22
|
-
"devDependencies": {
|
|
23
|
-
"@playwright/test": "^1.45.3",
|
|
24
|
-
"@skeletonlabs/skeleton": "^2.10.2",
|
|
25
|
-
"@skeletonlabs/tw-plugin": "^0.4.0",
|
|
26
|
-
"@sveltejs/adapter-auto": "^3.2.2",
|
|
27
|
-
"@sveltejs/adapter-static": "^3.0.2",
|
|
28
|
-
"@sveltejs/package": "^2.3.2",
|
|
29
|
-
"@tailwindcss/forms": "^0.5.7",
|
|
30
|
-
"@tailwindcss/typography": "^0.5.13",
|
|
31
|
-
"@types/node": "^22.0.2",
|
|
32
|
-
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
33
|
-
"@typescript-eslint/parser": "^8.0.0",
|
|
34
|
-
"autoprefixer": "^10.4.19",
|
|
35
|
-
"eslint": "^9.8.0",
|
|
36
|
-
"eslint-config-prettier": "^9.1.0",
|
|
37
|
-
"postcss": "^8.4.40",
|
|
38
|
-
"prettier": "^3.3.3",
|
|
39
|
-
"prettier-plugin-svelte": "^3.2.6",
|
|
40
|
-
"raw-loader": "^4.0.2",
|
|
41
|
-
"svelte": "^4.2.18",
|
|
42
|
-
"svelte-check": "^3.8.5",
|
|
43
|
-
"tailwindcss": "^3.4.7",
|
|
44
|
-
"tslib": "^2.6.3",
|
|
45
|
-
"typescript": "^5.5.4",
|
|
46
|
-
"vite": "^5.3.5",
|
|
47
|
-
"vitest": "^2.0.5"
|
|
48
|
-
},
|
|
49
|
-
"type": "module",
|
|
50
|
-
"module": "./src/lib/index.ts",
|
|
51
|
-
"types": "./src/lib/index.d.ts",
|
|
52
|
-
"description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
|
|
53
|
-
"main": "./src/lib/index.d.ts",
|
|
54
|
-
"directories": {
|
|
55
|
-
"test": "tests"
|
|
56
|
-
},
|
|
57
|
-
"files": [
|
|
58
|
-
"dist",
|
|
59
|
-
"src/lib"
|
|
60
|
-
],
|
|
61
|
-
"dependencies": {
|
|
62
|
-
"@codemirror/lang-html": "^6.4.9",
|
|
63
|
-
"@codemirror/lang-javascript": "^6.2.2",
|
|
64
|
-
"@codemirror/lang-json": "^6.0.1",
|
|
65
|
-
"@codemirror/lint": "^6.8.1",
|
|
66
|
-
"@codemirror/theme-one-dark": "^6.1.2",
|
|
67
|
-
"@floating-ui/dom": "^1.6.8",
|
|
68
|
-
"@fortawesome/fontawesome-free": "^6.6.0",
|
|
69
|
-
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
|
70
|
-
"@fortawesome/free-regular-svg-icons": "^6.6.0",
|
|
71
|
-
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
|
72
|
-
"@sveltejs/kit": "^2.5.19",
|
|
73
|
-
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
74
|
-
"axios": "^1.7.3",
|
|
75
|
-
"codemirror": "^6.0.1",
|
|
76
|
-
"dateformat": "^5.0.3",
|
|
77
|
-
"delay": "^6.0.0",
|
|
78
|
-
"dotenv": "^16.4.5",
|
|
79
|
-
"eslint4b-prebuilt": "^6.7.2",
|
|
80
|
-
"highlight.js": "^11.10.0",
|
|
81
|
-
"highlightjs-svelte": "^1.0.6",
|
|
82
|
-
"svelte": "^4.2.18",
|
|
83
|
-
"svelte-codemirror-editor": "^1.4.0",
|
|
84
|
-
"svelte-fa": "^4.0.2",
|
|
85
|
-
"svelte-file-dropzone": "^2.0.7",
|
|
86
|
-
"svelte-headless-table": "^0.18.2",
|
|
87
|
-
"svelte-select": "5.8.3",
|
|
88
|
-
"vest": "^5.4.0"
|
|
89
|
-
},
|
|
90
|
-
"author": "David Schöne",
|
|
91
|
-
"license": "ISC",
|
|
92
|
-
"repository": {
|
|
93
|
-
"type": "git",
|
|
94
|
-
"url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
|
|
95
|
-
},
|
|
96
|
-
"bugs": {
|
|
97
|
-
"url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
|
|
98
|
-
},
|
|
99
|
-
"homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
|
|
100
|
-
"keywords": [
|
|
101
|
-
"bexis2",
|
|
102
|
-
"libary"
|
|
103
|
-
],
|
|
104
|
-
"exports": {
|
|
105
|
-
".": {
|
|
106
|
-
"types": "./dist/index.d.ts",
|
|
107
|
-
"svelte": "./dist/index.js"
|
|
108
|
-
},
|
|
109
|
-
"./dist/index.css": {
|
|
110
|
-
"import": "./dist/index.css",
|
|
111
|
-
"require": "./dist/index.css"
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@bexis2/bexis2-core-ui",
|
|
3
|
+
"version": "0.4.22",
|
|
4
|
+
"private": false,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite dev",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"build package": "svelte-kit sync && svelte-package --watch",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"test": "playwright test",
|
|
11
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
12
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
13
|
+
"test:unit": "vitest",
|
|
14
|
+
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
|
15
|
+
"format": "prettier --plugin-search-dir . --write .",
|
|
16
|
+
"check outdated": "npm outdated",
|
|
17
|
+
"upgrade all": "ncu --upgrade",
|
|
18
|
+
"1.npm - update package infos": "npm init --scope bexis2",
|
|
19
|
+
"2.npm - package": "svelte-package",
|
|
20
|
+
"3.npm - publish": "npm publish --access public"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@playwright/test": "^1.45.3",
|
|
24
|
+
"@skeletonlabs/skeleton": "^2.10.2",
|
|
25
|
+
"@skeletonlabs/tw-plugin": "^0.4.0",
|
|
26
|
+
"@sveltejs/adapter-auto": "^3.2.2",
|
|
27
|
+
"@sveltejs/adapter-static": "^3.0.2",
|
|
28
|
+
"@sveltejs/package": "^2.3.2",
|
|
29
|
+
"@tailwindcss/forms": "^0.5.7",
|
|
30
|
+
"@tailwindcss/typography": "^0.5.13",
|
|
31
|
+
"@types/node": "^22.0.2",
|
|
32
|
+
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
33
|
+
"@typescript-eslint/parser": "^8.0.0",
|
|
34
|
+
"autoprefixer": "^10.4.19",
|
|
35
|
+
"eslint": "^9.8.0",
|
|
36
|
+
"eslint-config-prettier": "^9.1.0",
|
|
37
|
+
"postcss": "^8.4.40",
|
|
38
|
+
"prettier": "^3.3.3",
|
|
39
|
+
"prettier-plugin-svelte": "^3.2.6",
|
|
40
|
+
"raw-loader": "^4.0.2",
|
|
41
|
+
"svelte": "^4.2.18",
|
|
42
|
+
"svelte-check": "^3.8.5",
|
|
43
|
+
"tailwindcss": "^3.4.7",
|
|
44
|
+
"tslib": "^2.6.3",
|
|
45
|
+
"typescript": "^5.5.4",
|
|
46
|
+
"vite": "^5.3.5",
|
|
47
|
+
"vitest": "^2.0.5"
|
|
48
|
+
},
|
|
49
|
+
"type": "module",
|
|
50
|
+
"module": "./src/lib/index.ts",
|
|
51
|
+
"types": "./src/lib/index.d.ts",
|
|
52
|
+
"description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
|
|
53
|
+
"main": "./src/lib/index.d.ts",
|
|
54
|
+
"directories": {
|
|
55
|
+
"test": "tests"
|
|
56
|
+
},
|
|
57
|
+
"files": [
|
|
58
|
+
"dist",
|
|
59
|
+
"src/lib"
|
|
60
|
+
],
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"@codemirror/lang-html": "^6.4.9",
|
|
63
|
+
"@codemirror/lang-javascript": "^6.2.2",
|
|
64
|
+
"@codemirror/lang-json": "^6.0.1",
|
|
65
|
+
"@codemirror/lint": "^6.8.1",
|
|
66
|
+
"@codemirror/theme-one-dark": "^6.1.2",
|
|
67
|
+
"@floating-ui/dom": "^1.6.8",
|
|
68
|
+
"@fortawesome/fontawesome-free": "^6.6.0",
|
|
69
|
+
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
|
70
|
+
"@fortawesome/free-regular-svg-icons": "^6.6.0",
|
|
71
|
+
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
|
72
|
+
"@sveltejs/kit": "^2.5.19",
|
|
73
|
+
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
74
|
+
"axios": "^1.7.3",
|
|
75
|
+
"codemirror": "^6.0.1",
|
|
76
|
+
"dateformat": "^5.0.3",
|
|
77
|
+
"delay": "^6.0.0",
|
|
78
|
+
"dotenv": "^16.4.5",
|
|
79
|
+
"eslint4b-prebuilt": "^6.7.2",
|
|
80
|
+
"highlight.js": "^11.10.0",
|
|
81
|
+
"highlightjs-svelte": "^1.0.6",
|
|
82
|
+
"svelte": "^4.2.18",
|
|
83
|
+
"svelte-codemirror-editor": "^1.4.0",
|
|
84
|
+
"svelte-fa": "^4.0.2",
|
|
85
|
+
"svelte-file-dropzone": "^2.0.7",
|
|
86
|
+
"svelte-headless-table": "^0.18.2",
|
|
87
|
+
"svelte-select": "5.8.3",
|
|
88
|
+
"vest": "^5.4.0"
|
|
89
|
+
},
|
|
90
|
+
"author": "David Schöne",
|
|
91
|
+
"license": "ISC",
|
|
92
|
+
"repository": {
|
|
93
|
+
"type": "git",
|
|
94
|
+
"url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
|
|
95
|
+
},
|
|
96
|
+
"bugs": {
|
|
97
|
+
"url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
|
|
98
|
+
},
|
|
99
|
+
"homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
|
|
100
|
+
"keywords": [
|
|
101
|
+
"bexis2",
|
|
102
|
+
"libary"
|
|
103
|
+
],
|
|
104
|
+
"exports": {
|
|
105
|
+
".": {
|
|
106
|
+
"types": "./dist/index.d.ts",
|
|
107
|
+
"svelte": "./dist/index.js"
|
|
108
|
+
},
|
|
109
|
+
"./dist/index.css": {
|
|
110
|
+
"import": "./dist/index.css",
|
|
111
|
+
"require": "./dist/index.css"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -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
|
>
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
{/if}
|
|
40
40
|
|
|
41
41
|
{#each links as link}
|
|
42
|
-
<span class="chip variant-soft hover:variant-filled"
|
|
42
|
+
<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
|
|
43
43
|
<span>{link.label}</span>
|
|
44
44
|
</span>
|
|
45
45
|
{/each}
|
|
@@ -61,23 +61,23 @@ import type { helpItemType, helpStoreType } from '$models/Models';
|
|
|
61
61
|
</script>
|
|
62
62
|
|
|
63
63
|
<div class="app" bind:this={app}>
|
|
64
|
-
<
|
|
64
|
+
<AppShell>
|
|
65
65
|
<!--header-->
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
</
|
|
66
|
+
<svelte:fragment slot="header">
|
|
67
|
+
<AppBar padding="0" spacing="space-y-0" background="white">
|
|
68
|
+
<svelte:fragment slot="headline">
|
|
69
|
+
<Header />
|
|
70
|
+
{#if true}
|
|
71
|
+
<Menu />
|
|
72
|
+
{/if}
|
|
73
|
+
|
|
74
|
+
<div class="grid grid-cols-2">
|
|
75
|
+
<Breadcrumb bind:title />
|
|
76
|
+
<Docs {links} {note} />
|
|
77
|
+
</div>
|
|
78
|
+
</svelte:fragment>
|
|
79
|
+
</AppBar>
|
|
80
|
+
</svelte:fragment>
|
|
81
81
|
|
|
82
82
|
<slot name="description" />
|
|
83
83
|
|
|
@@ -114,5 +114,11 @@ import type { helpItemType, helpStoreType } from '$models/Models';
|
|
|
114
114
|
<GoToTop/>
|
|
115
115
|
<HelpPopUp active={help} />
|
|
116
116
|
<Notification />
|
|
117
|
+
|
|
118
|
+
<svelte:fragment slot="footer">
|
|
119
|
+
<Footer />
|
|
120
|
+
</svelte:fragment>
|
|
121
|
+
|
|
122
|
+
</AppShell>
|
|
117
123
|
</div>
|
|
118
|
-
|
|
124
|
+
|
|
@@ -23,27 +23,24 @@
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
function clickFn(item
|
|
26
|
+
function clickFn(item)
|
|
27
27
|
{
|
|
28
28
|
if(item.Title =="Log Off")
|
|
29
29
|
{
|
|
30
30
|
logOffFn();
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
else if (newWindow == false){
|
|
34
|
-
goTo(item.Url)
|
|
35
|
-
}
|
|
36
33
|
else{
|
|
37
|
-
|
|
34
|
+
goTo(item.Url)
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
37
|
|
|
41
|
-
|
|
38
|
+
|
|
42
39
|
async function logOffFn() {
|
|
43
40
|
|
|
44
41
|
console.log('logoff');
|
|
45
42
|
// Prepare the body content for the POST request
|
|
46
|
-
|
|
43
|
+
|
|
47
44
|
|
|
48
45
|
let bodyContent = '__RequestVerificationToken='+ window.antiForgeryToken;
|
|
49
46
|
|
|
@@ -58,7 +55,7 @@
|
|
|
58
55
|
});
|
|
59
56
|
if (response.ok) {
|
|
60
57
|
// Redirect to login page after logout
|
|
61
|
-
window.location.href = '/Account/Login';
|
|
58
|
+
window.location.href = '/Account/Login';
|
|
62
59
|
} else {
|
|
63
60
|
console.error('Logout failed');
|
|
64
61
|
}
|
|
@@ -72,8 +69,8 @@
|
|
|
72
69
|
|
|
73
70
|
<ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
|
|
74
71
|
{#each items as item}
|
|
75
|
-
{#if isNewModule(item.Module)}<hr class="text-surface-800"/>{/if}
|
|
76
|
-
|
|
72
|
+
{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
|
|
73
|
+
|
|
77
74
|
<ListBoxItem
|
|
78
75
|
class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
|
|
79
76
|
bind:group={item.Title}
|
|
@@ -83,6 +80,6 @@
|
|
|
83
80
|
>
|
|
84
81
|
{item.Title}
|
|
85
82
|
</ListBoxItem>
|
|
86
|
-
|
|
83
|
+
|
|
87
84
|
{/each}
|
|
88
85
|
</ListBox>
|