@bexis2/bexis2-core-ui 0.2.11 → 0.2.13

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.
Files changed (88) hide show
  1. package/README.md +273 -214
  2. package/dist/components/Table/Table.svelte +85 -85
  3. package/dist/components/Table/TableFilter.svelte +8 -8
  4. package/dist/components/Table/TablePagination.svelte +38 -38
  5. package/dist/components/file/FileUploader.svelte +34 -34
  6. package/dist/components/form/Checkbox.svelte.d.ts +1 -1
  7. package/dist/components/form/DropdownKvP.svelte +5 -11
  8. package/dist/components/form/InputContainer.svelte +20 -19
  9. package/dist/components/form/MultiSelect.svelte +163 -178
  10. package/dist/components/form/TextArea.svelte +13 -13
  11. package/dist/components/form/TextInput.svelte +0 -2
  12. package/dist/components/page/Alert.svelte +28 -30
  13. package/dist/components/page/BackToTop.svelte +30 -30
  14. package/dist/components/page/Docs.svelte +22 -19
  15. package/dist/components/page/Docs.svelte.d.ts +1 -1
  16. package/dist/components/page/ErrorMessage.svelte +8 -8
  17. package/dist/components/page/Footer.svelte +5 -5
  18. package/dist/components/page/Header.svelte +5 -4
  19. package/dist/components/page/HelpPopUp.svelte +31 -25
  20. package/dist/components/page/HelpPopUp.svelte.d.ts +5 -12
  21. package/dist/components/page/Page.svelte +57 -67
  22. package/dist/components/page/Page.svelte.d.ts +2 -2
  23. package/dist/components/page/PageCaller.js +19 -21
  24. package/dist/components/page/Spinner.svelte +9 -10
  25. package/dist/components/page/Spinner.svelte.d.ts +1 -1
  26. package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -23
  27. package/dist/components/page/menu/Menu.svelte +48 -22
  28. package/dist/components/page/menu/MenuBar.svelte +8 -14
  29. package/dist/components/page/menu/MenuBar.svelte.d.ts +1 -1
  30. package/dist/components/page/menu/MenuDataCaller.js +10 -11
  31. package/dist/components/page/menu/MenuItem.svelte +28 -15
  32. package/dist/components/page/menu/MenuItem.svelte.d.ts +2 -1
  33. package/dist/components/page/menu/MenuSublist.svelte +14 -16
  34. package/dist/components/page/menu/MenuSublist.svelte.d.ts +2 -3
  35. package/dist/components/page/menu/SettingsBar.svelte +22 -14
  36. package/dist/components/page/menu/SettingsBar.svelte.d.ts +2 -2
  37. package/dist/css/core.ui.postcss +10 -7
  38. package/dist/css/themes/theme-bexis2.css +12 -13
  39. package/dist/index.d.ts +3 -5
  40. package/dist/index.js +5 -5
  41. package/dist/models/Enums.d.ts +18 -0
  42. package/dist/models/Enums.js +22 -0
  43. package/dist/models/Models.d.ts +18 -0
  44. package/dist/models/Models.js +1 -2
  45. package/dist/models/Page.d.ts +31 -0
  46. package/dist/services/BaseCaller.js +16 -21
  47. package/dist/stores/pageStores.d.ts +4 -4
  48. package/dist/stores/pageStores.js +27 -27
  49. package/package.json +2 -2
  50. package/src/lib/components/Table/Table.svelte +246 -246
  51. package/src/lib/components/Table/TableFilter.svelte +8 -8
  52. package/src/lib/components/Table/TablePagination.svelte +61 -61
  53. package/src/lib/components/Table/filter.ts +141 -141
  54. package/src/lib/components/file/FileUploader.svelte +184 -184
  55. package/src/lib/components/form/Checkbox.svelte +1 -1
  56. package/src/lib/components/form/DateInput.svelte +0 -1
  57. package/src/lib/components/form/DropdownKvP.svelte +5 -11
  58. package/src/lib/components/form/InputContainer.svelte +36 -44
  59. package/src/lib/components/form/MultiSelect.svelte +163 -178
  60. package/src/lib/components/form/NumberInput.svelte +3 -5
  61. package/src/lib/components/form/TextArea.svelte +26 -27
  62. package/src/lib/components/form/TextInput.svelte +2 -5
  63. package/src/lib/components/page/Alert.svelte +41 -45
  64. package/src/lib/components/page/BackToTop.svelte +30 -30
  65. package/src/lib/components/page/Docs.svelte +46 -44
  66. package/src/lib/components/page/ErrorMessage.svelte +10 -12
  67. package/src/lib/components/page/Footer.svelte +18 -22
  68. package/src/lib/components/page/Header.svelte +18 -21
  69. package/src/lib/components/page/HelpPopUp.svelte +72 -66
  70. package/src/lib/components/page/Page.svelte +96 -109
  71. package/src/lib/components/page/PageCaller.js +19 -21
  72. package/src/lib/components/page/Spinner.svelte +13 -15
  73. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +31 -43
  74. package/src/lib/components/page/menu/Menu.svelte +61 -43
  75. package/src/lib/components/page/menu/MenuBar.svelte +18 -29
  76. package/src/lib/components/page/menu/MenuDataCaller.js +10 -11
  77. package/src/lib/components/page/menu/MenuItem.svelte +45 -34
  78. package/src/lib/components/page/menu/MenuSublist.svelte +33 -41
  79. package/src/lib/components/page/menu/SettingsBar.svelte +39 -37
  80. package/src/lib/css/core.ui.postcss +10 -7
  81. package/src/lib/css/themes/theme-bexis2.css +12 -13
  82. package/src/lib/index.ts +78 -77
  83. package/src/lib/models/Enums.ts +32 -11
  84. package/src/lib/models/Models.ts +136 -113
  85. package/src/lib/models/Page.ts +40 -41
  86. package/src/lib/services/BaseCaller.js +16 -21
  87. package/src/lib/stores/apiStores.ts +31 -32
  88. package/src/lib/stores/pageStores.ts +121 -126
@@ -1,184 +1,184 @@
1
- <script lang="ts">
2
- import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
3
-
4
- import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
5
- import Fa from 'svelte-fa/src/fa.svelte';
6
-
7
- import Spinner from '../page/Spinner.svelte';
8
- import { createEventDispatcher } from 'svelte';
9
- import { faTrash } from '@fortawesome/free-solid-svg-icons';
10
- import { faSave } from '@fortawesome/free-regular-svg-icons';
11
- import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
12
-
13
- import { Api } from '../../services/Api.js';
14
-
15
- export let id = 0;
16
- export let version = 1;
17
-
18
- import { onMount } from 'svelte';
19
-
20
- // export let description="";
21
- // export let status=0;
22
-
23
- //action to load fileupload model
24
- export let start = '';
25
- //action to save selected file
26
- export let submit = '';
27
-
28
- export let context = '';
29
-
30
- export let data: fileUploaderModel | undefined;
31
-
32
- $: model = data;
33
- $: submitBt = 'submit';
34
-
35
- let maxSize = 0;
36
-
37
- const dispatch = createEventDispatcher();
38
-
39
- let fx: fileInfoType[];
40
-
41
- let files: filesType = { accepted: [], rejected: [] };
42
- $: files;
43
-
44
- onMount(async () => {
45
- //console.log('fileupload - OnMount', data);
46
-
47
- if (!data) {
48
- load();
49
- } else {
50
- model = data;
51
- }
52
-
53
- if (model) {
54
- submitBt += context;
55
- maxSize = model.maxSize * 1024 * 1024;
56
- }
57
- });
58
-
59
- // load modal from server
60
- async function load() {
61
- let url = start + '?id=' + id + '&version=' + version;
62
-
63
- // load menu froms server
64
- const res = await Api.get(url);
65
- model = await res.data();
66
-
67
- console.log('fileupload', model);
68
- }
69
-
70
- function handleFilesSelect(e: any) {
71
- //console.log('handleFilesSelect', e);
72
- console.log('files', files);
73
-
74
- const { acceptedFiles, fileRejections } = e.detail;
75
-
76
- files.accepted = [...files.accepted, ...acceptedFiles];
77
- files.rejected = [...files.rejected, ...fileRejections];
78
-
79
- //console.log('acceptedFiles', acceptedFiles);
80
- console.log('files.accepted', files.accepted);
81
-
82
- if (fileRejections.length > 0) {
83
- //alert("the dropped file is not supported");
84
- //console.log('the dropped file is not supported.');
85
- console.log(files.rejected);
86
-
87
- let messages = [''];
88
-
89
- for (let index = 0; index < fileRejections.length; index++) {
90
- const element = fileRejections[index];
91
- messages.push(getErrorMessage(element));
92
- }
93
-
94
- //console.log(messages);
95
-
96
- dispatch('error', { messages });
97
- //list up the errors somewhere
98
- files.rejected = [];
99
- }
100
-
101
- if (acceptedFiles.length > 0) {
102
- document.getElementById(submitBt)?.click();
103
- }
104
- }
105
-
106
- function getErrorMessage(rejected) {
107
- let message = '';
108
- message = rejected.file.path + ' : ';
109
- let errors = rejected.errors;
110
- for (let index = 0; index < errors.length; index++) {
111
- const error = errors[index];
112
- message += error.message;
113
- }
114
-
115
- return message;
116
- }
117
-
118
- async function handleSubmit() {
119
- //console.log('SUBMIT');
120
-
121
- dispatch('submit');
122
-
123
- let url = submit + '?id=' + id;
124
-
125
- // //console.log(model);
126
- // //console.log(url);
127
- //console.log('SUBMIT');
128
-
129
- if (files.accepted.length > 0) {
130
- //console.log(files);
131
-
132
- const formData = new FormData();
133
- formData.append('files', '123');
134
- // Looping over all files and add it to FormData object
135
- for (var i = 0; i < files.accepted.length; i++) {
136
- formData.append(files.accepted[i].name, files.accepted[i]);
137
- }
138
-
139
- const response = await Api.post(url, formData);
140
-
141
- if (response.status == 200) {
142
- dispatch('submited');
143
-
144
- let message = files.accepted.length + ' is/are uploaded';
145
- dispatch('success', { text: message });
146
-
147
- files.accepted = [];
148
- }
149
- }
150
- }
151
- </script>
152
-
153
- <form on:submit|preventDefault={handleSubmit}>
154
- {#if model}
155
- <!--if model exist -->
156
- <div>
157
- <DropZone
158
- on:drop={handleFilesSelect}
159
- accept={model.accept}
160
- multiple={model.multiple}
161
- {maxSize}
162
- >
163
- <b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
164
- <span
165
- ><b>Drag 'n' drop some files here, or click to select files</b>
166
- <b>max file : {model.maxSize} mb</b></span
167
- >
168
- <p>
169
- {#if model.accept}
170
- {#each model.accept as ext}
171
- {ext} ,
172
- {/each}
173
- {/if}
174
- </p>
175
- </DropZone>
176
- </div>
177
-
178
- <button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
179
- {:else}
180
- <!-- while data is not loaded show a loading information -->
181
-
182
- <Spinner />
183
- {/if}
184
- </form>
1
+ <script lang="ts">
2
+ import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
3
+
4
+ import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
5
+ import Fa from 'svelte-fa/src/fa.svelte';
6
+
7
+ import Spinner from '../page/Spinner.svelte';
8
+ import { createEventDispatcher } from 'svelte';
9
+ import { faTrash } from '@fortawesome/free-solid-svg-icons';
10
+ import { faSave } from '@fortawesome/free-regular-svg-icons';
11
+ import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
12
+
13
+ import { Api } from '../../services/Api.js';
14
+
15
+ export let id = 0;
16
+ export let version = 1;
17
+
18
+ import { onMount } from 'svelte';
19
+
20
+ // export let description="";
21
+ // export let status=0;
22
+
23
+ //action to load fileupload model
24
+ export let start = '';
25
+ //action to save selected file
26
+ export let submit = '';
27
+
28
+ export let context = '';
29
+
30
+ export let data: fileUploaderModel | undefined;
31
+
32
+ $: model = data;
33
+ $: submitBt = 'submit';
34
+
35
+ let maxSize = 0;
36
+
37
+ const dispatch = createEventDispatcher();
38
+
39
+ let fx: fileInfoType[];
40
+
41
+ let files: filesType = { accepted: [], rejected: [] };
42
+ $: files;
43
+
44
+ onMount(async () => {
45
+ //console.log('fileupload - OnMount', data);
46
+
47
+ if (!data) {
48
+ load();
49
+ } else {
50
+ model = data;
51
+ }
52
+
53
+ if (model) {
54
+ submitBt += context;
55
+ maxSize = model.maxSize * 1024 * 1024;
56
+ }
57
+ });
58
+
59
+ // load modal from server
60
+ async function load() {
61
+ let url = start + '?id=' + id + '&version=' + version;
62
+
63
+ // load menu froms server
64
+ const res = await Api.get(url);
65
+ model = await res.data();
66
+
67
+ console.log('fileupload', model);
68
+ }
69
+
70
+ function handleFilesSelect(e: any) {
71
+ //console.log('handleFilesSelect', e);
72
+ console.log('files', files);
73
+
74
+ const { acceptedFiles, fileRejections } = e.detail;
75
+
76
+ files.accepted = [...files.accepted, ...acceptedFiles];
77
+ files.rejected = [...files.rejected, ...fileRejections];
78
+
79
+ //console.log('acceptedFiles', acceptedFiles);
80
+ console.log('files.accepted', files.accepted);
81
+
82
+ if (fileRejections.length > 0) {
83
+ //alert("the dropped file is not supported");
84
+ //console.log('the dropped file is not supported.');
85
+ console.log(files.rejected);
86
+
87
+ let messages = [''];
88
+
89
+ for (let index = 0; index < fileRejections.length; index++) {
90
+ const element = fileRejections[index];
91
+ messages.push(getErrorMessage(element));
92
+ }
93
+
94
+ //console.log(messages);
95
+
96
+ dispatch('error', { messages });
97
+ //list up the errors somewhere
98
+ files.rejected = [];
99
+ }
100
+
101
+ if (acceptedFiles.length > 0) {
102
+ document.getElementById(submitBt)?.click();
103
+ }
104
+ }
105
+
106
+ function getErrorMessage(rejected) {
107
+ let message = '';
108
+ message = rejected.file.path + ' : ';
109
+ let errors = rejected.errors;
110
+ for (let index = 0; index < errors.length; index++) {
111
+ const error = errors[index];
112
+ message += error.message;
113
+ }
114
+
115
+ return message;
116
+ }
117
+
118
+ async function handleSubmit() {
119
+ //console.log('SUBMIT');
120
+
121
+ dispatch('submit');
122
+
123
+ let url = submit + '?id=' + id;
124
+
125
+ // //console.log(model);
126
+ // //console.log(url);
127
+ //console.log('SUBMIT');
128
+
129
+ if (files.accepted.length > 0) {
130
+ //console.log(files);
131
+
132
+ const formData = new FormData();
133
+ formData.append('files', '123');
134
+ // Looping over all files and add it to FormData object
135
+ for (var i = 0; i < files.accepted.length; i++) {
136
+ formData.append(files.accepted[i].name, files.accepted[i]);
137
+ }
138
+
139
+ const response = await Api.post(url, formData);
140
+
141
+ if (response.status == 200) {
142
+ dispatch('submited');
143
+
144
+ let message = files.accepted.length + ' is/are uploaded';
145
+ dispatch('success', { text: message });
146
+
147
+ files.accepted = [];
148
+ }
149
+ }
150
+ }
151
+ </script>
152
+
153
+ <form on:submit|preventDefault={handleSubmit}>
154
+ {#if model}
155
+ <!--if model exist -->
156
+ <div>
157
+ <DropZone
158
+ on:drop={handleFilesSelect}
159
+ accept={model.accept}
160
+ multiple={model.multiple}
161
+ {maxSize}
162
+ >
163
+ <b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
164
+ <span
165
+ ><b>Drag 'n' drop some files here, or click to select files</b>
166
+ <b>max file : {model.maxSize} mb</b></span
167
+ >
168
+ <p>
169
+ {#if model.accept}
170
+ {#each model.accept as ext}
171
+ {ext} ,
172
+ {/each}
173
+ {/if}
174
+ </p>
175
+ </DropZone>
176
+ </div>
177
+
178
+ <button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
179
+ {:else}
180
+ <!-- while data is not loaded show a loading information -->
181
+
182
+ <Spinner />
183
+ {/if}
184
+ </form>
@@ -3,7 +3,7 @@
3
3
 
4
4
  export let id: string = '';
5
5
  export let label: string = '';
6
- export let checked: bool = false;
6
+ export let checked: boolean = false;
7
7
 
8
8
  export let valid: boolean;
9
9
  export let invalid: boolean;
@@ -10,7 +10,6 @@
10
10
  export let required: boolean = false;
11
11
  export let feedback: string[] = [''];
12
12
  export let help = false;
13
-
14
13
  </script>
15
14
 
16
15
  <InputContainer {id} {label} {feedback} {required} {help}>
@@ -19,24 +19,18 @@
19
19
 
20
20
  function updatedSelectedValue(selection) {
21
21
  if (selection != null) {
22
- if(complexTarget)
23
- {
22
+ if (complexTarget) {
24
23
  selected = selection.id;
25
- }
26
- else
27
- {
28
- selected = selection
24
+ } else {
25
+ selected = selection;
29
26
  }
30
27
  }
31
28
  }
32
29
 
33
30
  function updatedTarget(id) {
34
- if(complexTarget)
35
- {
31
+ if (complexTarget) {
36
32
  target = source.find((opt) => opt.id === id);
37
- }
38
- else
39
- {
33
+ } else {
40
34
  target = id;
41
35
  }
42
36
  }
@@ -1,44 +1,36 @@
1
- <script lang="ts">
2
- import { helpStore } from '$store/pageStores'
3
-
4
- export let id: string = '';
5
- export let label: string = '';
6
- export let required: boolean;
7
- export let feedback: string[];
8
- export let help:boolean=false;
9
-
10
- function onMouseOver()
11
- {
12
-
13
- if(help)
14
- {
15
- helpStore.show(id);
16
- }
17
-
18
- }
19
-
20
-
21
- function onMouseOut()
22
- {
23
-
24
- }
25
-
26
- </script>
27
- <div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
28
- <label class="label">
29
- <span
30
- >{label}
31
- {#if required} <span class="text-sm text-red-600">*</span> {/if}
32
- </span>
33
- <slot />
34
- {#if feedback}
35
- <span class="text-sm text-error-600">
36
- <ul>
37
- {#each feedback as message}
38
- <li>{message}</li>
39
- {/each}
40
- </ul>
41
- </span>
42
- {/if}
43
- </label>
44
- </div>
1
+ <script lang="ts">
2
+ import { helpStore } from '$store/pageStores';
3
+
4
+ export let id: string = '';
5
+ export let label: string = '';
6
+ export let required: boolean;
7
+ export let feedback: string[];
8
+ export let help: boolean = false;
9
+
10
+ function onMouseOver() {
11
+ if (help) {
12
+ helpStore.show(id);
13
+ }
14
+ }
15
+
16
+ function onMouseOut() {}
17
+ </script>
18
+
19
+ <div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
20
+ <label class="label">
21
+ <span
22
+ >{label}
23
+ {#if required} <span class="text-sm text-red-600">*</span> {/if}
24
+ </span>
25
+ <slot />
26
+ {#if feedback}
27
+ <span class="text-sm text-error-600">
28
+ <ul>
29
+ {#each feedback as message}
30
+ <li>{message}</li>
31
+ {/each}
32
+ </ul>
33
+ </span>
34
+ {/if}
35
+ </label>
36
+ </div>