@bpmn-io/form-js-viewer 0.10.0-alpha.1 → 0.10.0-alpha.3

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 (21) hide show
  1. package/dist/assets/form-js.css +138 -4
  2. package/dist/index.cjs +589 -81
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.es.js +588 -82
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/types/Form.d.ts +4 -0
  7. package/dist/types/core/ConditionChecker.d.ts +57 -0
  8. package/dist/types/core/index.d.ts +2 -0
  9. package/dist/types/import/Importer.d.ts +2 -2
  10. package/dist/types/render/components/Sanitizer.d.ts +1 -0
  11. package/dist/types/render/components/Util.d.ts +10 -0
  12. package/dist/types/render/components/form-fields/Image.d.ts +8 -0
  13. package/dist/types/render/components/form-fields/Number.d.ts +6 -5
  14. package/dist/types/render/components/index.d.ts +4 -3
  15. package/dist/types/render/components/util/numberFieldUtil.d.ts +4 -0
  16. package/dist/types/render/hooks/useCondition.d.ts +9 -0
  17. package/dist/types/render/hooks/useEvaluation.d.ts +6 -0
  18. package/dist/types/render/hooks/useExpressionValue.d.ts +5 -0
  19. package/dist/types/{types.d.ts → src/types.d.ts} +0 -0
  20. package/dist/types/util/feel.d.ts +14 -0
  21. package/package.json +5 -3
package/dist/assets/form-js.css CHANGED
@@ -9,6 +9,7 @@
9
9
  --color-grey-225-10-80: hsl(225, 10%, 80%);
10
10
  --color-grey-225-10-85: hsl(225, 10%, 85%);
11
11
  --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-93: hsl(225, 10%, 93%);
12
13
  --color-grey-225-10-95: hsl(225, 10%, 95%);
13
14
  --color-grey-225-10-97: hsl(225, 10%, 97%);
14
15
 
@@ -23,6 +24,7 @@
23
24
  --color-red-360-100-40: hsl(360, 100%, 40%);
24
25
  --color-red-360-100-45: hsl(360, 100%, 45%);
25
26
  --color-red-360-100-92: hsl(360, 100%, 92%);
27
+ --color-red-360-100-95: hsl(360, 100%, 95%);
26
28
  --color-red-360-100-97: hsl(360, 100%, 97%);
27
29
 
28
30
  --color-white: hsl(0, 0%, 100%);
@@ -30,17 +32,24 @@
30
32
 
31
33
  --color-background: var(--color-white);
32
34
  --color-background-disabled: var(--color-grey-225-10-95);
35
+ --color-background-adornment: var(--color-grey-225-10-93);
33
36
  --color-text: var(--color-grey-225-10-15);
34
37
  --color-text-light: var(--color-grey-225-10-35);
35
38
  --color-text-lighter: var(--color-grey-225-10-55);
36
39
  --color-text-inverted: var(--color-white);
37
40
  --color-borders: var(--color-grey-225-10-55);
38
41
  --color-borders-disabled: var(--color-grey-225-10-75);
42
+ --color-borders-adornment: var(--color-grey-225-10-85);
39
43
  --color-warning: var(--color-red-360-100-45);
40
44
  --color-accent: var(--color-blue-205-100-40);
41
45
 
42
46
  --font-family: 'IBM Plex Sans', sans-serif;
43
47
 
48
+ --border-definition: 1px solid var(--color-borders);
49
+ --border-definition-adornment: 1px solid var(--color-borders-adornment);
50
+ --outline-definition: 1px solid var(--color-borders);
51
+ --border-definition-disabled: 1px solid var(--color-borders-disabled);
52
+
44
53
  height: 100%;
45
54
  }
46
55
 
@@ -151,6 +160,62 @@
151
160
  border-radius: 3px;
152
161
  }
153
162
 
163
+ .fjs-container .fjs-input-group {
164
+ display: flex;
165
+ width: 100%;
166
+ margin-top: 8px;
167
+ border: var(--border-definition);
168
+ border-radius: 3px;
169
+ }
170
+
171
+ .fjs-container .fjs-input-group.disabled {
172
+ background-color: var(--color-background-disabled);
173
+ }
174
+
175
+ .fjs-container .fjs-input-group.disabled,
176
+ .fjs-container .fjs-input-group.disabled .fjs-input,
177
+ .fjs-container .fjs-input-group.disabled .fjs-input-adornment {
178
+ border-color: var(--color-borders-disabled);
179
+ }
180
+
181
+ .fjs-container .fjs-taglist .fjs-taglist-input,
182
+ .fjs-container .fjs-input-group .fjs-input {
183
+ border: none;
184
+ border-radius: 0;
185
+ margin: 0;
186
+ outline: 0;
187
+ }
188
+
189
+ .fjs-container .fjs-input-group .fjs-input-adornment {
190
+ border-width: 0;
191
+ }
192
+
193
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
194
+ border-left-width: 1px;
195
+ }
196
+
197
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
198
+ border-right-width: 1px;
199
+ }
200
+
201
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
202
+ border-radius: 0 3px 3px 0;
203
+ }
204
+
205
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
206
+ border-radius: 3px 0 0 3px;
207
+ }
208
+
209
+ .fjs-container .fjs-input-group .fjs-input,
210
+ .fjs-container .fjs-input-group.disabled .fjs-input {
211
+ border-radius: 3px;
212
+ }
213
+
214
+ .fjs-container .fjs-vertical-group {
215
+ display: flex;
216
+ width: 100%;
217
+ }
218
+
154
219
  .fjs-container .fjs-textarea {
155
220
  resize: none;
156
221
  overflow: hidden;
@@ -158,6 +223,39 @@
158
223
  font-size: 14px;
159
224
  }
160
225
 
226
+ .fjs-container .fjs-number-arrow-container {
227
+ display: flex;
228
+ flex-direction: column;
229
+ border-radius: 0 2px 2px 0;
230
+ width: 23px;
231
+ overflow: clip;
232
+ border-left: var(--border-definition-adornment);
233
+ }
234
+
235
+ .fjs-container .fjs-number-arrow-separator {
236
+ height: 1px;
237
+ background-color: var(--color-borders-adornment);
238
+ }
239
+
240
+ .fjs-container .fjs-number-arrow-container button {
241
+ border: none;
242
+ flex: 1;
243
+ color: var(--color-text-light);
244
+ background-color: var(--color-grey-225-10-95);
245
+ font-weight: bold;
246
+ font-size: 10px;
247
+ }
248
+
249
+ .fjs-container .fjs-number-arrow-container button:hover {
250
+ background-color: var(--color-grey-225-10-93);
251
+ color: var(--color-text);
252
+ }
253
+
254
+ .fjs-container .fjs-number-arrow-container.disabled button {
255
+ background-color: var(--color-grey-225-10-95);
256
+ }
257
+
258
+
161
259
  .fjs-container .fjs-radio {
162
260
  display: flex;
163
261
  flex-direction: column;
@@ -190,6 +288,9 @@
190
288
  font-weight: 600;
191
289
  }
192
290
 
291
+ .fjs-container .fjs-taglist:focus-within,
292
+ .fjs-container .fjs-input-group:focus-within,
293
+ .fjs-container .fjs-textarea:focus,
193
294
  .fjs-container .fjs-input[type='text']:focus,
194
295
  .fjs-container .fjs-input[type='email']:focus,
195
296
  .fjs-container .fjs-input[type='tel']:focus,
@@ -201,6 +302,11 @@
201
302
  outline: var(--color-borders) solid 1px;
202
303
  }
203
304
 
305
+ .fjs-container .fjs-input-group .fjs-input,
306
+ .fjs-container .fjs-input-group .fjs-input:focus {
307
+ outline: none;
308
+ }
309
+
204
310
  .fjs-container .fjs-button[type='submit']:focus {
205
311
  border-color: var(--color-accent);
206
312
  }
@@ -221,8 +327,26 @@
221
327
 
222
328
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
223
329
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
330
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
224
331
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea {
225
332
  border-color: var(--color-warning);
333
+ outline-color: var(--color-warning);
334
+ }
335
+
336
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
337
+ border-color: var(--color-red-360-100-92);
338
+ }
339
+
340
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
341
+ background-color: var(--color-red-360-100-92);
342
+ }
343
+
344
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
345
+ background-color: var(--color-red-360-100-97);
346
+ }
347
+
348
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
349
+ background-color: var(--color-red-360-100-95);
226
350
  }
227
351
 
228
352
  .fjs-container .fjs-form-field-error {
@@ -257,10 +381,6 @@
257
381
  background-color: var(--color-background);
258
382
  }
259
383
 
260
- .fjs-container .fjs-taglist:focus-within {
261
- outline: var(--color-borders) solid 1px;
262
- }
263
-
264
384
  .fjs-container .fjs-taglist.disabled {
265
385
  border: var(--color-borders-disabled) solid 1px;
266
386
  background-color: var(--color-background-disabled);
@@ -362,3 +482,17 @@
362
482
  padding: 6px 8px;
363
483
  color: var(--color-text-lighter);
364
484
  }
485
+
486
+ .fjs-container .fjs-image-container {
487
+ width: fit-content;
488
+ height: fit-content;
489
+ }
490
+
491
+ .fjs-container .fjs-image {
492
+ object-fit: contain;
493
+ }
494
+
495
+ .fjs-container .fjs-image-placeholder {
496
+ height: 64px;
497
+ margin: 2px 0;
498
+ }