@bexis2/bexis2-core-ui 0.2.11 → 0.2.12

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 (85) hide show
  1. package/README.md +263 -214
  2. package/dist/components/Table/Table.svelte +85 -85
  3. package/dist/components/Table/TableFilter.svelte +109 -109
  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 +25 -25
  28. package/dist/components/page/menu/MenuBar.svelte +7 -14
  29. package/dist/components/page/menu/MenuBar.svelte.d.ts +2 -2
  30. package/dist/components/page/menu/MenuDataCaller.js +10 -11
  31. package/dist/components/page/menu/MenuItem.svelte +9 -13
  32. package/dist/components/page/menu/MenuItem.svelte.d.ts +2 -1
  33. package/dist/components/page/menu/MenuSublist.svelte +18 -17
  34. package/dist/components/page/menu/MenuSublist.svelte.d.ts +2 -2
  35. package/dist/components/page/menu/SettingsBar.svelte +9 -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 +1 -3
  40. package/dist/index.js +4 -4
  41. package/dist/models/Models.js +0 -1
  42. package/dist/models/Page.d.ts +31 -0
  43. package/dist/services/BaseCaller.js +16 -21
  44. package/dist/stores/pageStores.d.ts +4 -4
  45. package/dist/stores/pageStores.js +27 -27
  46. package/package.json +2 -2
  47. package/src/lib/components/Table/Table.svelte +246 -246
  48. package/src/lib/components/Table/TableFilter.svelte +222 -222
  49. package/src/lib/components/Table/TablePagination.svelte +61 -61
  50. package/src/lib/components/Table/filter.ts +141 -141
  51. package/src/lib/components/file/FileUploader.svelte +184 -184
  52. package/src/lib/components/form/Checkbox.svelte +1 -1
  53. package/src/lib/components/form/DateInput.svelte +0 -1
  54. package/src/lib/components/form/DropdownKvP.svelte +5 -11
  55. package/src/lib/components/form/InputContainer.svelte +36 -44
  56. package/src/lib/components/form/MultiSelect.svelte +163 -178
  57. package/src/lib/components/form/NumberInput.svelte +3 -5
  58. package/src/lib/components/form/TextArea.svelte +26 -27
  59. package/src/lib/components/form/TextInput.svelte +2 -5
  60. package/src/lib/components/page/Alert.svelte +41 -45
  61. package/src/lib/components/page/BackToTop.svelte +30 -30
  62. package/src/lib/components/page/Docs.svelte +46 -44
  63. package/src/lib/components/page/ErrorMessage.svelte +10 -12
  64. package/src/lib/components/page/Footer.svelte +18 -22
  65. package/src/lib/components/page/Header.svelte +18 -21
  66. package/src/lib/components/page/HelpPopUp.svelte +72 -66
  67. package/src/lib/components/page/Page.svelte +96 -109
  68. package/src/lib/components/page/PageCaller.js +19 -21
  69. package/src/lib/components/page/Spinner.svelte +13 -15
  70. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +31 -43
  71. package/src/lib/components/page/menu/Menu.svelte +40 -47
  72. package/src/lib/components/page/menu/MenuBar.svelte +20 -31
  73. package/src/lib/components/page/menu/MenuDataCaller.js +10 -11
  74. package/src/lib/components/page/menu/MenuItem.svelte +27 -33
  75. package/src/lib/components/page/menu/MenuSublist.svelte +43 -48
  76. package/src/lib/components/page/menu/SettingsBar.svelte +31 -40
  77. package/src/lib/css/core.ui.postcss +10 -7
  78. package/src/lib/css/themes/theme-bexis2.css +12 -13
  79. package/src/lib/index.ts +75 -77
  80. package/src/lib/models/Enums.ts +10 -11
  81. package/src/lib/models/Models.ts +113 -113
  82. package/src/lib/models/Page.ts +40 -41
  83. package/src/lib/services/BaseCaller.js +16 -21
  84. package/src/lib/stores/apiStores.ts +31 -32
  85. package/src/lib/stores/pageStores.ts +121 -126
@@ -103,112 +103,112 @@ if (type === "object") {
103
103
  type = "date";
104
104
  }
105
105
  }
106
- </script>
107
-
108
- <form class="">
109
- <button
110
- class:variant-filled-primary={active}
111
- class="btn w-max p-2"
112
- type="button"
113
- use:popup={popupFeatured}
114
- >
115
- <Fa icon={faFilter} size="12" />
116
- </button>
117
-
118
- <div data-popup={`${popupId}`}>
119
- <div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
120
- <button
121
- class="btn variant-filled-primary btn-sm"
122
- type="button"
123
- on:click|preventDefault={() => {
124
- firstOption = 'isequal';
125
- firstValue = undefined;
126
- secondOption = 'isequal';
127
- secondValue = undefined;
128
-
129
- $filterValue = [firstOption, firstValue, secondOption, secondValue];
130
- active = false;
131
- }}>Clear Filter</button
132
- >
133
-
134
- <label for="" class="label normal-case text-sm">Show rows with value that</label>
135
- <div class="grid gap-2 w-full">
136
- <select
137
- class="select border border-primary-500 text-sm p-1"
138
- aria-label="Show rows with value that"
139
- bind:value={firstOption}
140
- on:click|stopPropagation
141
- >
142
- {#each options[type] as option (option)}
143
- <option value={option.value}>{option.label}</option>
144
- {/each}
145
- </select>
146
- {#if type === 'number'}
147
- <input
148
- type="number"
149
- class="input p-1 border border-primary-500"
150
- bind:value={firstValue}
151
- on:click|stopPropagation
152
- />
153
- {:else if type === 'string'}
154
- <input
155
- type="text"
156
- class="input p-1 border border-primary-500"
157
- bind:value={firstValue}
158
- on:click|stopPropagation
159
- />
160
- {:else}
161
- <input
162
- type="date"
163
- class="input p-1 border border-primary-500"
164
- bind:value={firstValue}
165
- on:click|stopPropagation
166
- />
167
- {/if}
168
- </div>
169
- <label for="" class="label normal-case">And</label>
170
- <div class="grid gap-2 w-max">
171
- <select
172
- class="select border border-primary-500 text-sm p-1"
173
- aria-label="Show rows with value that"
174
- bind:value={secondOption}
175
- on:click|stopPropagation
176
- >
177
- {#each options[type] as option (option)}
178
- <option value={option.value}>{option.label}</option>
179
- {/each}
180
- </select>
181
- {#if type === 'number'}
182
- <input
183
- type="number"
184
- class="input p-1 border border-primary-500"
185
- bind:value={secondValue}
186
- on:click|stopPropagation
187
- />
188
- {:else if type === 'string'}
189
- <input
190
- type="text"
191
- class="input p-1 border border-primary-500"
192
- bind:value={secondValue}
193
- on:click|stopPropagation
194
- />
195
- {:else}
196
- <input
197
- type="date"
198
- class="input p-1 border border-primary-500"
199
- bind:value={secondValue}
200
- on:click|stopPropagation
201
- />
202
- {/if}
203
- </div>
204
- <button
205
- class="btn variant-filled-primary btn-sm"
206
- type="button"
207
- on:click|preventDefault={() => {
208
- active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
209
- $filterValue = [firstOption, firstValue, secondOption, secondValue];
210
- }}>Apply</button
211
- >
212
- </div>
213
- </div>
214
- </form>
106
+ </script>
107
+
108
+ <form class="">
109
+ <button
110
+ class:variant-filled-primary={active}
111
+ class="btn w-max p-2"
112
+ type="button"
113
+ use:popup={popupFeatured}
114
+ >
115
+ <Fa icon={faFilter} size="12" />
116
+ </button>
117
+
118
+ <div data-popup={`${popupId}`}>
119
+ <div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
120
+ <button
121
+ class="btn variant-filled-primary btn-sm"
122
+ type="button"
123
+ on:click|preventDefault={() => {
124
+ firstOption = 'isequal';
125
+ firstValue = undefined;
126
+ secondOption = 'isequal';
127
+ secondValue = undefined;
128
+
129
+ $filterValue = [firstOption, firstValue, secondOption, secondValue];
130
+ active = false;
131
+ }}>Clear Filter</button
132
+ >
133
+
134
+ <label for="" class="label normal-case text-sm">Show rows with value that</label>
135
+ <div class="grid gap-2 w-full">
136
+ <select
137
+ class="select border border-primary-500 text-sm p-1"
138
+ aria-label="Show rows with value that"
139
+ bind:value={firstOption}
140
+ on:click|stopPropagation
141
+ >
142
+ {#each options[type] as option (option)}
143
+ <option value={option.value}>{option.label}</option>
144
+ {/each}
145
+ </select>
146
+ {#if type === 'number'}
147
+ <input
148
+ type="number"
149
+ class="input p-1 border border-primary-500"
150
+ bind:value={firstValue}
151
+ on:click|stopPropagation
152
+ />
153
+ {:else if type === 'string'}
154
+ <input
155
+ type="text"
156
+ class="input p-1 border border-primary-500"
157
+ bind:value={firstValue}
158
+ on:click|stopPropagation
159
+ />
160
+ {:else}
161
+ <input
162
+ type="date"
163
+ class="input p-1 border border-primary-500"
164
+ bind:value={firstValue}
165
+ on:click|stopPropagation
166
+ />
167
+ {/if}
168
+ </div>
169
+ <label for="" class="label normal-case">And</label>
170
+ <div class="grid gap-2 w-max">
171
+ <select
172
+ class="select border border-primary-500 text-sm p-1"
173
+ aria-label="Show rows with value that"
174
+ bind:value={secondOption}
175
+ on:click|stopPropagation
176
+ >
177
+ {#each options[type] as option (option)}
178
+ <option value={option.value}>{option.label}</option>
179
+ {/each}
180
+ </select>
181
+ {#if type === 'number'}
182
+ <input
183
+ type="number"
184
+ class="input p-1 border border-primary-500"
185
+ bind:value={secondValue}
186
+ on:click|stopPropagation
187
+ />
188
+ {:else if type === 'string'}
189
+ <input
190
+ type="text"
191
+ class="input p-1 border border-primary-500"
192
+ bind:value={secondValue}
193
+ on:click|stopPropagation
194
+ />
195
+ {:else}
196
+ <input
197
+ type="date"
198
+ class="input p-1 border border-primary-500"
199
+ bind:value={secondValue}
200
+ on:click|stopPropagation
201
+ />
202
+ {/if}
203
+ </div>
204
+ <button
205
+ class="btn variant-filled-primary btn-sm"
206
+ type="button"
207
+ on:click|preventDefault={() => {
208
+ active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
209
+ $filterValue = [firstOption, firstValue, secondOption, secondValue];
210
+ }}>Apply</button
211
+ >
212
+ </div>
213
+ </div>
214
+ </form>
@@ -20,41 +20,41 @@ $:
20
20
  goToNextPageDisabled = !$hasNextPage;
21
21
  $:
22
22
  goToPreviousPageDisabled = !$hasPreviousPage;
23
- </script>
24
-
25
- <div class="flex justify-center gap-1">
26
- <button
27
- class="btn btn-sm variant-filled-primary"
28
- on:click|preventDefault={goToFirstPage}
29
- disabled={goToFirstPageDisabled}
30
- >
31
- <Fa icon={faAnglesLeft} /></button
32
- >
33
- <button
34
- class="btn btn-sm variant-filled-primary"
35
- on:click|preventDefault={goToPreviousPage}
36
- disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
37
- >
38
-
39
- <select
40
- name="pageSize"
41
- id="pageSize"
42
- class="select variant-filled-primary w-min font-bold"
43
- bind:value={$pageSize}
44
- >
45
- {#each pageSizes as size}
46
- <option value={size}>{size}</option>
47
- {/each}
48
- </select>
49
-
50
- <button
51
- class="btn btn-sm variant-filled-primary"
52
- on:click|preventDefault={goToNextPage}
53
- disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
54
- >
55
- <button
56
- class="btn btn-sm variant-filled-primary"
57
- on:click|preventDefault={goToLastPage}
58
- disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
59
- >
60
- </div>
23
+ </script>
24
+
25
+ <div class="flex justify-center gap-1">
26
+ <button
27
+ class="btn btn-sm variant-filled-primary"
28
+ on:click|preventDefault={goToFirstPage}
29
+ disabled={goToFirstPageDisabled}
30
+ >
31
+ <Fa icon={faAnglesLeft} /></button
32
+ >
33
+ <button
34
+ class="btn btn-sm variant-filled-primary"
35
+ on:click|preventDefault={goToPreviousPage}
36
+ disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
37
+ >
38
+
39
+ <select
40
+ name="pageSize"
41
+ id="pageSize"
42
+ class="select variant-filled-primary w-min font-bold"
43
+ bind:value={$pageSize}
44
+ >
45
+ {#each pageSizes as size}
46
+ <option value={size}>{size}</option>
47
+ {/each}
48
+ </select>
49
+
50
+ <button
51
+ class="btn btn-sm variant-filled-primary"
52
+ on:click|preventDefault={goToNextPage}
53
+ disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
54
+ >
55
+ <button
56
+ class="btn btn-sm variant-filled-primary"
57
+ on:click|preventDefault={goToLastPage}
58
+ disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
59
+ >
60
+ </div>
@@ -88,37 +88,37 @@ async function handleSubmit() {
88
88
  }
89
89
  }
90
90
  }
91
- </script>
92
-
93
- <form on:submit|preventDefault={handleSubmit}>
94
- {#if model}
95
- <!--if model exist -->
96
- <div>
97
- <DropZone
98
- on:drop={handleFilesSelect}
99
- accept={model.accept}
100
- multiple={model.multiple}
101
- {maxSize}
102
- >
103
- <b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
104
- <span
105
- ><b>Drag 'n' drop some files here, or click to select files</b>
106
- <b>max file : {model.maxSize} mb</b></span
107
- >
108
- <p>
109
- {#if model.accept}
110
- {#each model.accept as ext}
111
- {ext} ,
112
- {/each}
113
- {/if}
114
- </p>
115
- </DropZone>
116
- </div>
117
-
118
- <button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
119
- {:else}
120
- <!-- while data is not loaded show a loading information -->
121
-
122
- <Spinner />
123
- {/if}
124
- </form>
91
+ </script>
92
+
93
+ <form on:submit|preventDefault={handleSubmit}>
94
+ {#if model}
95
+ <!--if model exist -->
96
+ <div>
97
+ <DropZone
98
+ on:drop={handleFilesSelect}
99
+ accept={model.accept}
100
+ multiple={model.multiple}
101
+ {maxSize}
102
+ >
103
+ <b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
104
+ <span
105
+ ><b>Drag 'n' drop some files here, or click to select files</b>
106
+ <b>max file : {model.maxSize} mb</b></span
107
+ >
108
+ <p>
109
+ {#if model.accept}
110
+ {#each model.accept as ext}
111
+ {ext} ,
112
+ {/each}
113
+ {/if}
114
+ </p>
115
+ </DropZone>
116
+ </div>
117
+
118
+ <button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
119
+ {:else}
120
+ <!-- while data is not loaded show a loading information -->
121
+
122
+ <Spinner />
123
+ {/if}
124
+ </form>
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  id?: string | undefined;
5
5
  label?: string | undefined;
6
- checked?: any;
6
+ checked?: boolean | undefined;
7
7
  valid: boolean;
8
8
  invalid: boolean;
9
9
  required: boolean;
@@ -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
  }
@@ -11,22 +11,23 @@ function onMouseOver() {
11
11
  }
12
12
  function onMouseOut() {
13
13
  }
14
- </script>
15
- <div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
16
- <label class="label">
17
- <span
18
- >{label}
19
- {#if required} <span class="text-sm text-red-600">*</span> {/if}
20
- </span>
21
- <slot />
22
- {#if feedback}
23
- <span class="text-sm text-error-600">
24
- <ul>
25
- {#each feedback as message}
26
- <li>{message}</li>
27
- {/each}
28
- </ul>
29
- </span>
30
- {/if}
31
- </label>
32
- </div>
14
+ </script>
15
+
16
+ <div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
17
+ <label class="label">
18
+ <span
19
+ >{label}
20
+ {#if required} <span class="text-sm text-red-600">*</span> {/if}
21
+ </span>
22
+ <slot />
23
+ {#if feedback}
24
+ <span class="text-sm text-error-600">
25
+ <ul>
26
+ {#each feedback as message}
27
+ <li>{message}</li>
28
+ {/each}
29
+ </ul>
30
+ </span>
31
+ {/if}
32
+ </label>
33
+ </div>