@bexis2/bexis2-core-ui 0.2.14 → 0.2.16
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 +11 -0
- package/dist/components/Table/Table.svelte +101 -86
- package/dist/components/Table/TableFilter.svelte +2 -2
- package/dist/components/form/MultiSelect.svelte +2 -0
- package/dist/components/form/MultiSelect.svelte.d.ts +2 -0
- package/dist/components/page/Page.svelte +56 -56
- package/dist/models/Models.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/components/Table/Table.svelte +262 -246
- package/src/lib/components/Table/TableFilter.svelte +2 -2
- package/src/lib/components/form/MultiSelect.svelte +2 -0
- package/src/lib/components/page/Page.svelte +96 -96
- package/src/lib/models/Models.ts +134 -133
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { onMount } from 'svelte';
|
|
3
|
-
|
|
4
|
-
import type { linkType } from '$lib/models/Models';
|
|
5
|
-
import { pageContentLayoutType } from '$lib/models/Enums';
|
|
6
|
-
|
|
7
|
-
// ui components
|
|
8
|
-
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
|
9
|
-
import Menu from './menu/Menu.svelte';
|
|
10
|
-
import Footer from './Footer.svelte';
|
|
11
|
-
import Header from './Header.svelte';
|
|
12
|
-
import HelpPopUp from './HelpPopUp.svelte';
|
|
13
|
-
import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
|
|
14
|
-
|
|
15
|
-
//popup
|
|
16
|
-
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
|
|
17
|
-
import { storePopup } from '@skeletonlabs/skeleton';
|
|
18
|
-
import { breadcrumbStore } from '$store/pageStores';
|
|
19
|
-
|
|
20
|
-
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
|
|
21
|
-
|
|
22
|
-
// stores
|
|
23
|
-
import { helpStore } from '$store/pageStores';
|
|
24
|
-
import Docs from './Docs.svelte';
|
|
25
|
-
|
|
26
|
-
export let title = '';
|
|
27
|
-
export let note = '';
|
|
28
|
-
export let links: linkType[] = [];
|
|
29
|
-
|
|
30
|
-
// active or hide menu
|
|
31
|
-
export let menu: boolean = true;
|
|
32
|
-
export let footer: boolean = true;
|
|
33
|
-
export let help: boolean = false;
|
|
34
|
-
export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
|
|
35
|
-
|
|
36
|
-
onMount(async () => {
|
|
37
|
-
console.log('page');
|
|
38
|
-
breadcrumbStore.clean();
|
|
39
|
-
breadcrumbStore.addItem({ label: title, link: window.location.pathname });
|
|
40
|
-
});
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<AppShell>
|
|
44
|
-
<!--header-->
|
|
45
|
-
<svelte:fragment slot="header">
|
|
46
|
-
<AppBar padding="0" spacing="space-y-0" background="white">
|
|
47
|
-
<svelte:fragment slot="headline">
|
|
48
|
-
<Header />
|
|
49
|
-
{#if true}
|
|
50
|
-
<Menu />
|
|
51
|
-
{/if}
|
|
52
|
-
|
|
53
|
-
<div class="grid grid-cols-2">
|
|
54
|
-
<Breadcrumb {title} />
|
|
55
|
-
<Docs {links} {note} />
|
|
56
|
-
</div>
|
|
57
|
-
</svelte:fragment>
|
|
58
|
-
</AppBar>
|
|
59
|
-
</svelte:fragment>
|
|
60
|
-
|
|
61
|
-
<svelte:fragment slot="footer">
|
|
62
|
-
<Footer />
|
|
63
|
-
</svelte:fragment>
|
|
64
|
-
|
|
65
|
-
<slot name="description" />
|
|
66
|
-
|
|
67
|
-
<div class="flex flex-initial space-x-5">
|
|
68
|
-
{#if $$slots.left}
|
|
69
|
-
<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
|
|
70
|
-
<slot name="left" />
|
|
71
|
-
</div>
|
|
72
|
-
{/if}
|
|
73
|
-
|
|
74
|
-
{#if contentLayoutType === pageContentLayoutType.center}
|
|
75
|
-
<div class="flex justify-center w-screen">
|
|
76
|
-
<div class="max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
|
|
77
|
-
<slot />
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
{/if}
|
|
81
|
-
|
|
82
|
-
{#if contentLayoutType === pageContentLayoutType.full}
|
|
83
|
-
<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
|
|
84
|
-
<slot />
|
|
85
|
-
</div>
|
|
86
|
-
{/if}
|
|
87
|
-
|
|
88
|
-
{#if $$slots.right}
|
|
89
|
-
<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
|
|
90
|
-
<slot name="right" />
|
|
91
|
-
</div>
|
|
92
|
-
{/if}
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<HelpPopUp active={help} />
|
|
96
|
-
</AppShell>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte';
|
|
3
|
+
|
|
4
|
+
import type { linkType } from '$lib/models/Models';
|
|
5
|
+
import { pageContentLayoutType } from '$lib/models/Enums';
|
|
6
|
+
|
|
7
|
+
// ui components
|
|
8
|
+
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
|
9
|
+
import Menu from './menu/Menu.svelte';
|
|
10
|
+
import Footer from './Footer.svelte';
|
|
11
|
+
import Header from './Header.svelte';
|
|
12
|
+
import HelpPopUp from './HelpPopUp.svelte';
|
|
13
|
+
import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
|
|
14
|
+
|
|
15
|
+
//popup
|
|
16
|
+
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
|
|
17
|
+
import { storePopup } from '@skeletonlabs/skeleton';
|
|
18
|
+
import { breadcrumbStore } from '$store/pageStores';
|
|
19
|
+
|
|
20
|
+
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
|
|
21
|
+
|
|
22
|
+
// stores
|
|
23
|
+
import { helpStore } from '$store/pageStores';
|
|
24
|
+
import Docs from './Docs.svelte';
|
|
25
|
+
|
|
26
|
+
export let title = '';
|
|
27
|
+
export let note = '';
|
|
28
|
+
export let links: linkType[] = [];
|
|
29
|
+
|
|
30
|
+
// active or hide menu
|
|
31
|
+
export let menu: boolean = true;
|
|
32
|
+
export let footer: boolean = true;
|
|
33
|
+
export let help: boolean = false;
|
|
34
|
+
export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
|
|
35
|
+
|
|
36
|
+
onMount(async () => {
|
|
37
|
+
console.log('page');
|
|
38
|
+
breadcrumbStore.clean();
|
|
39
|
+
breadcrumbStore.addItem({ label: title, link: window.location.pathname });
|
|
40
|
+
});
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<AppShell>
|
|
44
|
+
<!--header-->
|
|
45
|
+
<svelte:fragment slot="header">
|
|
46
|
+
<AppBar padding="0" spacing="space-y-0" background="white">
|
|
47
|
+
<svelte:fragment slot="headline">
|
|
48
|
+
<Header />
|
|
49
|
+
{#if true}
|
|
50
|
+
<Menu />
|
|
51
|
+
{/if}
|
|
52
|
+
|
|
53
|
+
<div class="grid grid-cols-2">
|
|
54
|
+
<Breadcrumb {title} />
|
|
55
|
+
<Docs {links} {note} />
|
|
56
|
+
</div>
|
|
57
|
+
</svelte:fragment>
|
|
58
|
+
</AppBar>
|
|
59
|
+
</svelte:fragment>
|
|
60
|
+
|
|
61
|
+
<svelte:fragment slot="footer">
|
|
62
|
+
<Footer />
|
|
63
|
+
</svelte:fragment>
|
|
64
|
+
|
|
65
|
+
<slot name="description" />
|
|
66
|
+
|
|
67
|
+
<div class="flex flex-initial space-x-5">
|
|
68
|
+
{#if $$slots.left}
|
|
69
|
+
<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
|
|
70
|
+
<slot name="left" />
|
|
71
|
+
</div>
|
|
72
|
+
{/if}
|
|
73
|
+
|
|
74
|
+
{#if contentLayoutType === pageContentLayoutType.center}
|
|
75
|
+
<div class="flex justify-center w-screen">
|
|
76
|
+
<div class="w-full max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
|
|
77
|
+
<slot />
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
{/if}
|
|
81
|
+
|
|
82
|
+
{#if contentLayoutType === pageContentLayoutType.full}
|
|
83
|
+
<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
|
|
84
|
+
<slot />
|
|
85
|
+
</div>
|
|
86
|
+
{/if}
|
|
87
|
+
|
|
88
|
+
{#if $$slots.right}
|
|
89
|
+
<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
|
|
90
|
+
<slot name="right" />
|
|
91
|
+
</div>
|
|
92
|
+
{/if}
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<HelpPopUp active={help} />
|
|
96
|
+
</AppShell>
|
package/src/lib/models/Models.ts
CHANGED
|
@@ -1,133 +1,134 @@
|
|
|
1
|
-
import type { SvelteComponent } from 'svelte';
|
|
2
|
-
import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
|
|
3
|
-
import type { Writable } from 'svelte/store';
|
|
4
|
-
|
|
5
|
-
import {decimalCharacterType, orientationType,textMarkerType,textSeperatorType} from './Enums'
|
|
6
|
-
|
|
7
|
-
// page
|
|
8
|
-
export interface linkType {
|
|
9
|
-
label: string;
|
|
10
|
-
url: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// Form
|
|
14
|
-
export interface inputType {
|
|
15
|
-
id: string;
|
|
16
|
-
label: string;
|
|
17
|
-
feedback: string[];
|
|
18
|
-
invalid: boolean;
|
|
19
|
-
valid: boolean;
|
|
20
|
-
required: boolean;
|
|
21
|
-
placeholder: string;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export interface fileInfoType {
|
|
25
|
-
name: string;
|
|
26
|
-
type: string;
|
|
27
|
-
length: number;
|
|
28
|
-
description: string;
|
|
29
|
-
validationHash: string;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export interface fileUploaderType {
|
|
33
|
-
accept: string[];
|
|
34
|
-
existingFiles: fileInfoType[];
|
|
35
|
-
descriptionType: number;
|
|
36
|
-
multiple: boolean;
|
|
37
|
-
maxSize: number;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export interface asciiFileReaderInfoType extends fileReaderInfoType {
|
|
41
|
-
cells: boolean[];
|
|
42
|
-
seperator: textSeperatorType;
|
|
43
|
-
textMarker: textMarkerType;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
export interface fileReaderInfoType {
|
|
48
|
-
decimal: decimalCharacterType;
|
|
49
|
-
orientation: orientationType;
|
|
50
|
-
offset: number;
|
|
51
|
-
variables: number;
|
|
52
|
-
data: number;
|
|
53
|
-
unit: number;
|
|
54
|
-
description: number;
|
|
55
|
-
dateformat: string;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
export interface filesType {
|
|
60
|
-
accepted: Blob[];
|
|
61
|
-
rejected: Blob[];
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export type userType = {
|
|
65
|
-
name: string;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export interface fileObjType {
|
|
69
|
-
path: string;
|
|
70
|
-
lastModified: number;
|
|
71
|
-
lastModifiedDate: Date;
|
|
72
|
-
name: string;
|
|
73
|
-
size: number;
|
|
74
|
-
type: string;
|
|
75
|
-
webkitRelativePath: string;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export interface ColumnInstructions {
|
|
79
|
-
toStringFn?: (value: any) => string;
|
|
80
|
-
toSortableValueFn?: (value: any) => string | number;
|
|
81
|
-
toFilterableValueFn?: (value: any) => string | number | Date;
|
|
82
|
-
renderComponent?: typeof SvelteComponent;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// Table column type
|
|
86
|
-
export interface Column {
|
|
87
|
-
header?: string;
|
|
88
|
-
exclude?: boolean; // false by default
|
|
89
|
-
instructions?: ColumnInstructions;
|
|
90
|
-
disableFiltering?: boolean; // false by default
|
|
91
|
-
disableSorting?: boolean; // false by default
|
|
92
|
-
colFilterFn?: ColumnFilterFn;
|
|
93
|
-
colFilterComponent?: typeof SvelteComponent;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export interface Columns {
|
|
97
|
-
[key: string]: Column;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Table config type
|
|
101
|
-
export interface TableConfig<T> {
|
|
102
|
-
id: string;
|
|
103
|
-
data: Writable<T[]>;
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
1
|
+
import type { SvelteComponent } from 'svelte';
|
|
2
|
+
import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
|
|
3
|
+
import type { Writable } from 'svelte/store';
|
|
4
|
+
|
|
5
|
+
import {decimalCharacterType, orientationType,textMarkerType,textSeperatorType} from './Enums'
|
|
6
|
+
|
|
7
|
+
// page
|
|
8
|
+
export interface linkType {
|
|
9
|
+
label: string;
|
|
10
|
+
url: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Form
|
|
14
|
+
export interface inputType {
|
|
15
|
+
id: string;
|
|
16
|
+
label: string;
|
|
17
|
+
feedback: string[];
|
|
18
|
+
invalid: boolean;
|
|
19
|
+
valid: boolean;
|
|
20
|
+
required: boolean;
|
|
21
|
+
placeholder: string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface fileInfoType {
|
|
25
|
+
name: string;
|
|
26
|
+
type: string;
|
|
27
|
+
length: number;
|
|
28
|
+
description: string;
|
|
29
|
+
validationHash: string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export interface fileUploaderType {
|
|
33
|
+
accept: string[];
|
|
34
|
+
existingFiles: fileInfoType[];
|
|
35
|
+
descriptionType: number;
|
|
36
|
+
multiple: boolean;
|
|
37
|
+
maxSize: number;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export interface asciiFileReaderInfoType extends fileReaderInfoType {
|
|
41
|
+
cells: boolean[];
|
|
42
|
+
seperator: textSeperatorType;
|
|
43
|
+
textMarker: textMarkerType;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
export interface fileReaderInfoType {
|
|
48
|
+
decimal: decimalCharacterType;
|
|
49
|
+
orientation: orientationType;
|
|
50
|
+
offset: number;
|
|
51
|
+
variables: number;
|
|
52
|
+
data: number;
|
|
53
|
+
unit: number;
|
|
54
|
+
description: number;
|
|
55
|
+
dateformat: string;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
export interface filesType {
|
|
60
|
+
accepted: Blob[];
|
|
61
|
+
rejected: Blob[];
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export type userType = {
|
|
65
|
+
name: string;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export interface fileObjType {
|
|
69
|
+
path: string;
|
|
70
|
+
lastModified: number;
|
|
71
|
+
lastModifiedDate: Date;
|
|
72
|
+
name: string;
|
|
73
|
+
size: number;
|
|
74
|
+
type: string;
|
|
75
|
+
webkitRelativePath: string;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export interface ColumnInstructions {
|
|
79
|
+
toStringFn?: (value: any) => string;
|
|
80
|
+
toSortableValueFn?: (value: any) => string | number;
|
|
81
|
+
toFilterableValueFn?: (value: any) => string | number | Date;
|
|
82
|
+
renderComponent?: typeof SvelteComponent;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Table column type
|
|
86
|
+
export interface Column {
|
|
87
|
+
header?: string;
|
|
88
|
+
exclude?: boolean; // false by default
|
|
89
|
+
instructions?: ColumnInstructions;
|
|
90
|
+
disableFiltering?: boolean; // false by default
|
|
91
|
+
disableSorting?: boolean; // false by default
|
|
92
|
+
colFilterFn?: ColumnFilterFn;
|
|
93
|
+
colFilterComponent?: typeof SvelteComponent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export interface Columns {
|
|
97
|
+
[key: string]: Column;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Table config type
|
|
101
|
+
export interface TableConfig<T> {
|
|
102
|
+
id: string;
|
|
103
|
+
data: Writable<T[]>;
|
|
104
|
+
height?: null | number;
|
|
105
|
+
columns?: Columns;
|
|
106
|
+
pageSizes?: number[];
|
|
107
|
+
defaultPageSize?: number;
|
|
108
|
+
optionsComponent?: typeof SvelteComponent;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// lists
|
|
112
|
+
export interface keyValuePairType {
|
|
113
|
+
id: number;
|
|
114
|
+
text: string;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export interface listItemType {
|
|
118
|
+
id: number;
|
|
119
|
+
text: string;
|
|
120
|
+
group: string;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
//help
|
|
124
|
+
export interface helpItemType {
|
|
125
|
+
id?: string;
|
|
126
|
+
name: string;
|
|
127
|
+
description: string;
|
|
128
|
+
link?: string;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export interface helpStoreType {
|
|
132
|
+
itemId?: string;
|
|
133
|
+
helpItems: helpItemType[];
|
|
134
|
+
}
|