@bpmn-io/form-js-viewer 0.14.0 → 0.15.0-alpha.0
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/LICENSE +22 -22
- package/README.md +164 -164
- package/dist/assets/form-js-base.css +832 -781
- package/dist/assets/form-js.css +92 -41
- package/dist/index.cjs +956 -541
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +958 -543
- package/dist/index.es.js.map +1 -1
- package/dist/types/Form.d.ts +23 -1
- package/dist/types/core/EventBus.d.ts +1 -1
- package/dist/types/core/index.d.ts +2 -1
- package/dist/types/features/expression-language/FeelExpressionLanguage.d.ts +3 -5
- package/dist/types/features/expression-language/FeelersTemplating.d.ts +42 -0
- package/dist/types/features/expression-language/variableExtractionHelpers.d.ts +1 -0
- package/dist/types/render/Renderer.d.ts +2 -2
- package/dist/types/render/components/Util.d.ts +2 -2
- package/dist/types/render/components/form-fields/Button.d.ts +9 -7
- package/dist/types/render/components/form-fields/Checkbox.d.ts +11 -9
- package/dist/types/render/components/form-fields/Checklist.d.ts +14 -12
- package/dist/types/render/components/form-fields/Datetime.d.ts +9 -7
- package/dist/types/render/components/form-fields/Default.d.ts +9 -7
- package/dist/types/render/components/form-fields/Image.d.ts +7 -5
- package/dist/types/render/components/form-fields/Number.d.ts +12 -10
- package/dist/types/render/components/form-fields/Radio.d.ts +14 -12
- package/dist/types/render/components/form-fields/Select.d.ts +14 -12
- package/dist/types/render/components/form-fields/Taglist.d.ts +14 -12
- package/dist/types/render/components/form-fields/Text.d.ts +9 -7
- package/dist/types/render/components/form-fields/Textarea.d.ts +11 -9
- package/dist/types/render/components/form-fields/Textfield.d.ts +11 -9
- package/dist/types/types.d.ts +35 -35
- package/dist/types/util/index.d.ts +2 -1
- package/package.json +3 -2
package/dist/assets/form-js.css
CHANGED
|
@@ -28,21 +28,51 @@
|
|
|
28
28
|
--color-red-360-100-97: hsl(360, 100%, 97%);
|
|
29
29
|
--color-white: hsl(0, 0%, 100%);
|
|
30
30
|
--color-black: hsl(0, 0%, 0%);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
--color-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
--color-
|
|
42
|
-
--color-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Specify color variables in the following schema:
|
|
33
|
+
* 1 - use specified layer
|
|
34
|
+
* 2 - use layer one
|
|
35
|
+
* 3 - use fallback
|
|
36
|
+
*/
|
|
37
|
+
--color-background: var(
|
|
38
|
+
--cds-field,
|
|
39
|
+
var(--cds-field-01, var(--color-white))
|
|
40
|
+
);
|
|
41
|
+
--color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
|
|
42
|
+
--color-background-adornment: var(
|
|
43
|
+
--cds-field,
|
|
44
|
+
var(--cds-field-01, var(--color-grey-225-10-95))
|
|
45
|
+
);
|
|
46
|
+
--color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
|
|
47
|
+
--color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
|
|
48
|
+
--color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
|
|
49
|
+
--color-layer: var(
|
|
50
|
+
--cds-layer,
|
|
51
|
+
var(--cds-layer-01, var(--color-white))
|
|
52
|
+
);
|
|
53
|
+
--color-icon-base: var(--cds-icon-primary, var(--color-black));
|
|
54
|
+
--color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
|
|
55
|
+
--color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
|
|
56
|
+
--color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
|
|
57
|
+
--color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
|
|
58
|
+
--color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
|
|
59
|
+
--color-text-inverted: var(--cds-text-inverse, var(--color-text));
|
|
60
|
+
--color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
|
|
61
|
+
--color-borders: var(
|
|
62
|
+
--cds-border-strong,
|
|
63
|
+
var(--cds-border-strong-01, var(--color-grey-225-10-55))
|
|
64
|
+
);
|
|
65
|
+
--color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
|
|
66
|
+
--color-borders-adornment: var(
|
|
67
|
+
--cds-border-subtle,
|
|
68
|
+
var(--cds-border-subtle-01, var(--color-grey-225-10-85))
|
|
69
|
+
);
|
|
70
|
+
--color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
|
|
71
|
+
--color-warning: var(--cds-text-error, var(--color-red-360-100-45));
|
|
72
|
+
--color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
|
|
73
|
+
--color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
|
|
74
|
+
--color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
|
|
75
|
+
--color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
|
|
46
76
|
--font-family: "IBM Plex Sans", sans-serif;
|
|
47
77
|
--font-size-base: 14px;
|
|
48
78
|
--font-size-input: 14px;
|
|
@@ -56,7 +86,7 @@
|
|
|
56
86
|
--form-field-height: 36px;
|
|
57
87
|
--border-definition: 1px solid var(--color-borders);
|
|
58
88
|
--border-definition-adornment: 1px solid var(--color-borders-adornment);
|
|
59
|
-
--outline-definition: 1px solid var(--color-borders);
|
|
89
|
+
--outline-definition: 1px solid var(--cds-focus, var(--color-borders));
|
|
60
90
|
--border-definition-disabled: 1px solid var(--color-borders-disabled);
|
|
61
91
|
height: 100%;
|
|
62
92
|
}
|
|
@@ -101,6 +131,8 @@
|
|
|
101
131
|
|
|
102
132
|
.fjs-container .cds--grid .cds--row {
|
|
103
133
|
align-items: start;
|
|
134
|
+
margin-left: 0;
|
|
135
|
+
margin-right: 0;
|
|
104
136
|
}
|
|
105
137
|
|
|
106
138
|
@media (max-width: 66rem) {
|
|
@@ -118,7 +150,6 @@
|
|
|
118
150
|
letter-spacing: var(--letter-spacing-base);
|
|
119
151
|
font-weight: 400;
|
|
120
152
|
color: var(--color-text);
|
|
121
|
-
background-color: var(--color-background);
|
|
122
153
|
position: relative;
|
|
123
154
|
padding: 0 4px;
|
|
124
155
|
}
|
|
@@ -165,6 +196,7 @@
|
|
|
165
196
|
.fjs-container .fjs-taglist-input,
|
|
166
197
|
.fjs-container .fjs-textarea,
|
|
167
198
|
.fjs-container .fjs-select {
|
|
199
|
+
color: var(--color-text);
|
|
168
200
|
border-color: var(--color-borders);
|
|
169
201
|
background-color: var(--color-background);
|
|
170
202
|
font-family: inherit;
|
|
@@ -256,8 +288,7 @@
|
|
|
256
288
|
color: var(--color-text-lighter);
|
|
257
289
|
padding: 8px;
|
|
258
290
|
width: auto !important;
|
|
259
|
-
min-width: 34px;
|
|
260
|
-
max-width: 30%;
|
|
291
|
+
min-width: min(34px, 20%);
|
|
261
292
|
display: flex;
|
|
262
293
|
overflow: hidden;
|
|
263
294
|
}
|
|
@@ -337,6 +368,7 @@
|
|
|
337
368
|
.fjs-container .fjs-input-group .fjs-taglist,
|
|
338
369
|
.fjs-container .fjs-input-group .fjs-select {
|
|
339
370
|
height: unset;
|
|
371
|
+
min-width: min(60px, 40%);
|
|
340
372
|
width: 100%;
|
|
341
373
|
}
|
|
342
374
|
|
|
@@ -359,7 +391,7 @@
|
|
|
359
391
|
|
|
360
392
|
.fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
|
|
361
393
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
|
|
362
|
-
color: var(--color-text-
|
|
394
|
+
color: var(--color-text-lighter);
|
|
363
395
|
line-height: var(--line-height-input);
|
|
364
396
|
}
|
|
365
397
|
|
|
@@ -396,6 +428,7 @@
|
|
|
396
428
|
width: 100%;
|
|
397
429
|
height: 100%;
|
|
398
430
|
display: flex;
|
|
431
|
+
position: relative;
|
|
399
432
|
}
|
|
400
433
|
|
|
401
434
|
.fjs-container .fjs-textarea {
|
|
@@ -413,7 +446,7 @@
|
|
|
413
446
|
display: flex;
|
|
414
447
|
flex-direction: column;
|
|
415
448
|
border-radius: 0 2px 2px 0;
|
|
416
|
-
width: 23px;
|
|
449
|
+
width: clamp(16px, 40%, 23px);
|
|
417
450
|
overflow: clip;
|
|
418
451
|
border-left: var(--border-definition-adornment);
|
|
419
452
|
}
|
|
@@ -426,16 +459,16 @@
|
|
|
426
459
|
.fjs-container .fjs-number-arrow-container button {
|
|
427
460
|
border: none;
|
|
428
461
|
flex: 1;
|
|
429
|
-
color: var(--color-text
|
|
430
|
-
background-color: var(--color-
|
|
462
|
+
color: var(--color-text);
|
|
463
|
+
background-color: var(--color-background);
|
|
431
464
|
font-weight: bold;
|
|
432
465
|
font-size: 10px;
|
|
433
466
|
line-height: 15px;
|
|
434
467
|
}
|
|
435
468
|
|
|
436
469
|
.fjs-container .fjs-number-arrow-container button:hover {
|
|
437
|
-
background-color: var(--color-
|
|
438
|
-
color: var(--color-text);
|
|
470
|
+
background-color: var(--color-background-inverted-hover);
|
|
471
|
+
color: var(--cds-text-inverse, var(--color-text));
|
|
439
472
|
}
|
|
440
473
|
|
|
441
474
|
.fjs-container .fjs-radio {
|
|
@@ -449,7 +482,7 @@
|
|
|
449
482
|
}
|
|
450
483
|
|
|
451
484
|
.fjs-container .fjs-button[type=submit] {
|
|
452
|
-
color: var(--
|
|
485
|
+
color: var(--cds-text-inverse, var(--color-white));
|
|
453
486
|
background-color: var(--color-accent);
|
|
454
487
|
border-color: var(--color-accent);
|
|
455
488
|
}
|
|
@@ -503,13 +536,18 @@
|
|
|
503
536
|
.fjs-container .fjs-number-arrow-container.fjs-disabled button,
|
|
504
537
|
.fjs-container .fjs-taglist.fjs-disabled,
|
|
505
538
|
.fjs-container .fjs-disabled .fjs-input-group {
|
|
506
|
-
|
|
539
|
+
color: var(--color-text-disabled);
|
|
540
|
+
background-color: var(--cds-field, var(--color-background-disabled));
|
|
507
541
|
border-color: var(--color-borders-disabled);
|
|
508
542
|
}
|
|
509
543
|
|
|
544
|
+
.fjs-container .fjs-number-arrow-container.fjs-disabled button {
|
|
545
|
+
background-color: var(--cds-toggle-off, var(--color-background-disabled));
|
|
546
|
+
}
|
|
547
|
+
|
|
510
548
|
.fjs-container .fjs-button[type=submit]:disabled,
|
|
511
549
|
.fjs-container .fjs-button[type=reset]:disabled {
|
|
512
|
-
color: var(--text-light);
|
|
550
|
+
color: var(--cds-text-on-color-disabled, var(--color-text-light));
|
|
513
551
|
background-color: var(--color-background-disabled);
|
|
514
552
|
border-color: var(--color-borders-disabled);
|
|
515
553
|
}
|
|
@@ -520,6 +558,11 @@
|
|
|
520
558
|
border-color: var(--color-borders-disabled);
|
|
521
559
|
}
|
|
522
560
|
|
|
561
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
|
|
562
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
|
|
563
|
+
pointer-events: none;
|
|
564
|
+
}
|
|
565
|
+
|
|
523
566
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
|
|
524
567
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
|
|
525
568
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
|
|
@@ -547,8 +590,7 @@
|
|
|
547
590
|
}
|
|
548
591
|
|
|
549
592
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
|
|
550
|
-
border-color: var(--color-
|
|
551
|
-
background: var(--color-red-360-100-97);
|
|
593
|
+
border-color: var(--color-warning-light);
|
|
552
594
|
}
|
|
553
595
|
|
|
554
596
|
.fjs-container .fjs-form-field-error {
|
|
@@ -590,6 +632,14 @@
|
|
|
590
632
|
top: -5px;
|
|
591
633
|
}
|
|
592
634
|
|
|
635
|
+
.fjs-container .fjs-select-hidden-input {
|
|
636
|
+
width: 0;
|
|
637
|
+
overflow: hidden;
|
|
638
|
+
opacity: 0;
|
|
639
|
+
padding: 0;
|
|
640
|
+
border: none;
|
|
641
|
+
}
|
|
642
|
+
|
|
593
643
|
.fjs-container .fjs-taglist {
|
|
594
644
|
display: flex;
|
|
595
645
|
flex-wrap: wrap;
|
|
@@ -605,12 +655,13 @@
|
|
|
605
655
|
display: flex;
|
|
606
656
|
overflow: hidden;
|
|
607
657
|
user-select: none;
|
|
608
|
-
|
|
658
|
+
color: var(--color-text-inverted);
|
|
659
|
+
background-color: var(--color-background-inverted);
|
|
609
660
|
border-radius: 2px;
|
|
610
661
|
}
|
|
611
662
|
|
|
612
663
|
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
|
|
613
|
-
background-color: var(--color-
|
|
664
|
+
background-color: var(--color-background-inverted);
|
|
614
665
|
}
|
|
615
666
|
|
|
616
667
|
.fjs-container .fjs-taglist .fjs-taglist-tags {
|
|
@@ -633,7 +684,7 @@
|
|
|
633
684
|
height: 24px;
|
|
634
685
|
text-align: center;
|
|
635
686
|
line-height: 28px;
|
|
636
|
-
background-color: var(--color-grey-225-10-80);
|
|
687
|
+
background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
|
|
637
688
|
border: none;
|
|
638
689
|
padding: 1px 0;
|
|
639
690
|
}
|
|
@@ -641,12 +692,12 @@
|
|
|
641
692
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
|
|
642
693
|
margin-bottom: 4px;
|
|
643
694
|
opacity: 0.6;
|
|
644
|
-
color: var(--color-icon-
|
|
695
|
+
color: var(--color-icon-inverted);
|
|
645
696
|
}
|
|
646
697
|
|
|
647
698
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
|
|
648
699
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
|
|
649
|
-
background-color: var(--color-
|
|
700
|
+
background-color: var(--color-background-active);
|
|
650
701
|
}
|
|
651
702
|
|
|
652
703
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
|
|
@@ -675,14 +726,14 @@
|
|
|
675
726
|
width: 100%;
|
|
676
727
|
border-radius: 3px;
|
|
677
728
|
margin-top: 3px;
|
|
678
|
-
box-shadow: 0px 0px 5px var(--color-
|
|
679
|
-
background-color: var(--color-
|
|
729
|
+
box-shadow: 0px 0px 5px var(--color-shadow);
|
|
730
|
+
background-color: var(--color-layer);
|
|
680
731
|
}
|
|
681
732
|
|
|
682
733
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
|
|
683
734
|
padding: 6px 8px;
|
|
684
|
-
border-bottom: 1px solid var(--color-
|
|
685
|
-
color: var(--color-
|
|
735
|
+
border-bottom: 1px solid var(--color-borders-inverted);
|
|
736
|
+
color: var(--color-text-light);
|
|
686
737
|
}
|
|
687
738
|
|
|
688
739
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
|
|
@@ -690,8 +741,8 @@
|
|
|
690
741
|
}
|
|
691
742
|
|
|
692
743
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
|
|
693
|
-
background-color: var(--color-
|
|
694
|
-
color: var(--color-
|
|
744
|
+
background-color: var(--color-background-inverted);
|
|
745
|
+
color: var(--color-text-inverted);
|
|
695
746
|
}
|
|
696
747
|
|
|
697
748
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
|