@bpmn-io/form-js-viewer 0.14.1 → 1.0.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/dist/assets/form-js-base.css +147 -49
- package/dist/assets/form-js.css +142 -45
- package/dist/index.cjs +618 -340
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +618 -340
- package/dist/index.es.js.map +1 -1
- package/dist/types/Form.d.ts +1 -1
- package/dist/types/core/EventBus.d.ts +1 -1
- package/dist/types/core/index.d.ts +2 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/render/Renderer.d.ts +2 -2
- package/dist/types/render/components/Util.d.ts +4 -3
- 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/render/hooks/index.d.ts +1 -0
- package/dist/types/render/hooks/useReadonly.d.ts +17 -0
- package/dist/types/types.d.ts +1 -1
- package/package.json +2 -2
package/dist/assets/form-js.css
CHANGED
|
@@ -28,21 +28,57 @@
|
|
|
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
|
-
--color-
|
|
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-readonly: var(--cds-background, var(--color-grey-225-10-95));
|
|
43
|
+
--color-background-adornment: var(
|
|
44
|
+
--cds-field,
|
|
45
|
+
var(--cds-field-01, var(--color-grey-225-10-95))
|
|
46
|
+
);
|
|
47
|
+
--color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
|
|
48
|
+
--color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
|
|
49
|
+
--color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
|
|
50
|
+
--color-layer: var(
|
|
51
|
+
--cds-layer,
|
|
52
|
+
var(--cds-layer-01, var(--color-white))
|
|
53
|
+
);
|
|
54
|
+
--color-icon-base: var(--cds-icon-primary, var(--color-black));
|
|
55
|
+
--color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
|
|
56
|
+
--color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
|
|
57
|
+
--color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
|
|
58
|
+
--color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
|
|
59
|
+
--color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
|
|
60
|
+
--color-text-inverted: var(--cds-text-inverse, var(--color-text));
|
|
61
|
+
--color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
|
|
62
|
+
--color-borders: var(
|
|
63
|
+
--cds-border-strong,
|
|
64
|
+
var(--cds-border-strong-01, var(--color-grey-225-10-55))
|
|
65
|
+
);
|
|
66
|
+
--color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
|
|
67
|
+
--color-borders-adornment: var(
|
|
68
|
+
--cds-border-subtle,
|
|
69
|
+
var(--cds-border-subtle-01, var(--color-grey-225-10-85))
|
|
70
|
+
);
|
|
71
|
+
--color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
|
|
72
|
+
--color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
|
|
73
|
+
--color-warning: var(--cds-text-error, var(--color-red-360-100-45));
|
|
74
|
+
--color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
|
|
75
|
+
--color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
|
|
76
|
+
--color-accent-readonly: var(
|
|
77
|
+
--cds-border-strong,
|
|
78
|
+
var(--cds-border-strong-01, var(--color-grey-225-10-55))
|
|
79
|
+
);
|
|
80
|
+
--color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
|
|
81
|
+
--color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
|
|
46
82
|
--font-family: "IBM Plex Sans", sans-serif;
|
|
47
83
|
--font-size-base: 14px;
|
|
48
84
|
--font-size-input: 14px;
|
|
@@ -56,8 +92,9 @@
|
|
|
56
92
|
--form-field-height: 36px;
|
|
57
93
|
--border-definition: 1px solid var(--color-borders);
|
|
58
94
|
--border-definition-adornment: 1px solid var(--color-borders-adornment);
|
|
59
|
-
--outline-definition: 1px solid var(--color-borders);
|
|
95
|
+
--outline-definition: 1px solid var(--cds-focus, var(--color-borders));
|
|
60
96
|
--border-definition-disabled: 1px solid var(--color-borders-disabled);
|
|
97
|
+
--border-definition-readonly: 1px solid var(--color-borders-readonly);
|
|
61
98
|
height: 100%;
|
|
62
99
|
}
|
|
63
100
|
|
|
@@ -120,7 +157,6 @@
|
|
|
120
157
|
letter-spacing: var(--letter-spacing-base);
|
|
121
158
|
font-weight: 400;
|
|
122
159
|
color: var(--color-text);
|
|
123
|
-
background-color: var(--color-background);
|
|
124
160
|
position: relative;
|
|
125
161
|
padding: 0 4px;
|
|
126
162
|
}
|
|
@@ -167,6 +203,7 @@
|
|
|
167
203
|
.fjs-container .fjs-taglist-input,
|
|
168
204
|
.fjs-container .fjs-textarea,
|
|
169
205
|
.fjs-container .fjs-select {
|
|
206
|
+
color: var(--color-text);
|
|
170
207
|
border-color: var(--color-borders);
|
|
171
208
|
background-color: var(--color-background);
|
|
172
209
|
font-family: inherit;
|
|
@@ -184,7 +221,9 @@
|
|
|
184
221
|
.fjs-container .fjs-taglist-input::placeholder,
|
|
185
222
|
.fjs-container .fjs-textarea::placeholder,
|
|
186
223
|
.fjs-container .fjs-select > option:disabled,
|
|
187
|
-
.fjs-container .fjs-select [disabled]
|
|
224
|
+
.fjs-container .fjs-select [disabled],
|
|
225
|
+
.fjs-container .fjs-select > option:read-only,
|
|
226
|
+
.fjs-container .fjs-select [read-only] {
|
|
188
227
|
color: var(--color-text-lightest);
|
|
189
228
|
font-size: var(--font-size-input);
|
|
190
229
|
line-height: var(--line-height-input);
|
|
@@ -258,7 +297,7 @@
|
|
|
258
297
|
color: var(--color-text-lighter);
|
|
259
298
|
padding: 8px;
|
|
260
299
|
width: auto !important;
|
|
261
|
-
min-width: 34px;
|
|
300
|
+
min-width: min(34px, 20%);
|
|
262
301
|
display: flex;
|
|
263
302
|
overflow: hidden;
|
|
264
303
|
}
|
|
@@ -338,7 +377,7 @@
|
|
|
338
377
|
.fjs-container .fjs-input-group .fjs-taglist,
|
|
339
378
|
.fjs-container .fjs-input-group .fjs-select {
|
|
340
379
|
height: unset;
|
|
341
|
-
min-width: min(60px,
|
|
380
|
+
min-width: min(60px, 40%);
|
|
342
381
|
width: 100%;
|
|
343
382
|
}
|
|
344
383
|
|
|
@@ -360,8 +399,9 @@
|
|
|
360
399
|
}
|
|
361
400
|
|
|
362
401
|
.fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
|
|
363
|
-
.fjs-container .fjs-disabled .fjs-input-group .fjs-select-display
|
|
364
|
-
|
|
402
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
|
|
403
|
+
.fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
|
|
404
|
+
color: var(--color-text-lighter);
|
|
365
405
|
line-height: var(--line-height-input);
|
|
366
406
|
}
|
|
367
407
|
|
|
@@ -398,6 +438,7 @@
|
|
|
398
438
|
width: 100%;
|
|
399
439
|
height: 100%;
|
|
400
440
|
display: flex;
|
|
441
|
+
position: relative;
|
|
401
442
|
}
|
|
402
443
|
|
|
403
444
|
.fjs-container .fjs-textarea {
|
|
@@ -415,7 +456,7 @@
|
|
|
415
456
|
display: flex;
|
|
416
457
|
flex-direction: column;
|
|
417
458
|
border-radius: 0 2px 2px 0;
|
|
418
|
-
width: 23px;
|
|
459
|
+
width: clamp(16px, 40%, 23px);
|
|
419
460
|
overflow: clip;
|
|
420
461
|
border-left: var(--border-definition-adornment);
|
|
421
462
|
}
|
|
@@ -428,16 +469,16 @@
|
|
|
428
469
|
.fjs-container .fjs-number-arrow-container button {
|
|
429
470
|
border: none;
|
|
430
471
|
flex: 1;
|
|
431
|
-
color: var(--color-text
|
|
432
|
-
background-color: var(--color-
|
|
472
|
+
color: var(--color-text);
|
|
473
|
+
background-color: var(--color-background);
|
|
433
474
|
font-weight: bold;
|
|
434
475
|
font-size: 10px;
|
|
435
476
|
line-height: 15px;
|
|
436
477
|
}
|
|
437
478
|
|
|
438
479
|
.fjs-container .fjs-number-arrow-container button:hover {
|
|
439
|
-
background-color: var(--color-
|
|
440
|
-
color: var(--color-text);
|
|
480
|
+
background-color: var(--color-background-inverted-hover);
|
|
481
|
+
color: var(--cds-text-inverse, var(--color-text));
|
|
441
482
|
}
|
|
442
483
|
|
|
443
484
|
.fjs-container .fjs-radio {
|
|
@@ -451,7 +492,7 @@
|
|
|
451
492
|
}
|
|
452
493
|
|
|
453
494
|
.fjs-container .fjs-button[type=submit] {
|
|
454
|
-
color: var(--
|
|
495
|
+
color: var(--cds-text-inverse, var(--color-white));
|
|
455
496
|
background-color: var(--color-accent);
|
|
456
497
|
border-color: var(--color-accent);
|
|
457
498
|
}
|
|
@@ -505,23 +546,69 @@
|
|
|
505
546
|
.fjs-container .fjs-number-arrow-container.fjs-disabled button,
|
|
506
547
|
.fjs-container .fjs-taglist.fjs-disabled,
|
|
507
548
|
.fjs-container .fjs-disabled .fjs-input-group {
|
|
508
|
-
|
|
549
|
+
color: var(--color-text-disabled);
|
|
550
|
+
background-color: var(--cds-field, var(--color-background-disabled));
|
|
509
551
|
border-color: var(--color-borders-disabled);
|
|
510
552
|
}
|
|
511
553
|
|
|
554
|
+
.fjs-container .fjs-number-arrow-container.fjs-disabled button {
|
|
555
|
+
background-color: var(--cds-toggle-off, var(--color-background-disabled));
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
|
|
559
|
+
.fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
|
|
560
|
+
.fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
|
|
561
|
+
.fjs-container .fjs-number-arrow-container.fjs-readonly button,
|
|
562
|
+
.fjs-container .fjs-taglist.fjs-readonly,
|
|
563
|
+
.fjs-container .fjs-readonly .fjs-input-group {
|
|
564
|
+
background-color: var(--color-background-readonly);
|
|
565
|
+
border-color: var(--color-borders-readonly);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.fjs-container .fjs-form-field-checkbox.fjs-readonly,
|
|
569
|
+
.fjs-container .fjs-form-field-checklist.fjs-readonly,
|
|
570
|
+
.fjs-container .fjs-form-field-radio.fjs-readonly {
|
|
571
|
+
pointer-events: none;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
|
|
575
|
+
.fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
|
|
576
|
+
.fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
|
|
577
|
+
opacity: 0.4;
|
|
578
|
+
accent-color: var(--color-accent-readonly);
|
|
579
|
+
}
|
|
580
|
+
|
|
512
581
|
.fjs-container .fjs-button[type=submit]:disabled,
|
|
513
582
|
.fjs-container .fjs-button[type=reset]:disabled {
|
|
514
|
-
color: var(--text-light);
|
|
583
|
+
color: var(--cds-text-on-color-disabled, var(--color-text-light));
|
|
515
584
|
background-color: var(--color-background-disabled);
|
|
516
585
|
border-color: var(--color-borders-disabled);
|
|
517
586
|
}
|
|
518
587
|
|
|
588
|
+
.fjs-container .fjs-button[type=submit]:read-only,
|
|
589
|
+
.fjs-container .fjs-button[type=reset]:read-only {
|
|
590
|
+
color: var(--text-light);
|
|
591
|
+
background-color: var(--color-background-readonly);
|
|
592
|
+
border-color: var(--color-borders-readonly);
|
|
593
|
+
}
|
|
594
|
+
|
|
519
595
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
|
|
520
596
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
|
|
521
597
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
|
|
522
598
|
border-color: var(--color-borders-disabled);
|
|
523
599
|
}
|
|
524
600
|
|
|
601
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
|
|
602
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
|
|
603
|
+
pointer-events: none;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
|
|
607
|
+
.fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
|
|
608
|
+
.fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
|
|
609
|
+
border-color: var(--color-borders-readonly);
|
|
610
|
+
}
|
|
611
|
+
|
|
525
612
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
|
|
526
613
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
|
|
527
614
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
|
|
@@ -549,8 +636,7 @@
|
|
|
549
636
|
}
|
|
550
637
|
|
|
551
638
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
|
|
552
|
-
border-color: var(--color-
|
|
553
|
-
background: var(--color-red-360-100-97);
|
|
639
|
+
border-color: var(--color-warning-light);
|
|
554
640
|
}
|
|
555
641
|
|
|
556
642
|
.fjs-container .fjs-form-field-error {
|
|
@@ -592,6 +678,14 @@
|
|
|
592
678
|
top: -5px;
|
|
593
679
|
}
|
|
594
680
|
|
|
681
|
+
.fjs-container .fjs-select-hidden-input {
|
|
682
|
+
width: 0;
|
|
683
|
+
overflow: hidden;
|
|
684
|
+
opacity: 0;
|
|
685
|
+
padding: 0;
|
|
686
|
+
border: none;
|
|
687
|
+
}
|
|
688
|
+
|
|
595
689
|
.fjs-container .fjs-taglist {
|
|
596
690
|
display: flex;
|
|
597
691
|
flex-wrap: wrap;
|
|
@@ -607,12 +701,14 @@
|
|
|
607
701
|
display: flex;
|
|
608
702
|
overflow: hidden;
|
|
609
703
|
user-select: none;
|
|
610
|
-
|
|
704
|
+
color: var(--color-text-inverted);
|
|
705
|
+
background-color: var(--color-background-inverted);
|
|
611
706
|
border-radius: 2px;
|
|
612
707
|
}
|
|
613
708
|
|
|
614
|
-
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag
|
|
615
|
-
|
|
709
|
+
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
|
|
710
|
+
.fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
|
|
711
|
+
background-color: var(--color-background-inverted);
|
|
616
712
|
}
|
|
617
713
|
|
|
618
714
|
.fjs-container .fjs-taglist .fjs-taglist-tags {
|
|
@@ -625,7 +721,8 @@
|
|
|
625
721
|
padding: 2px 6px 2px 8px;
|
|
626
722
|
}
|
|
627
723
|
|
|
628
|
-
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label
|
|
724
|
+
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
|
|
725
|
+
.fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
|
|
629
726
|
padding: 2px 8px;
|
|
630
727
|
}
|
|
631
728
|
|
|
@@ -635,7 +732,7 @@
|
|
|
635
732
|
height: 24px;
|
|
636
733
|
text-align: center;
|
|
637
734
|
line-height: 28px;
|
|
638
|
-
background-color: var(--color-grey-225-10-80);
|
|
735
|
+
background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
|
|
639
736
|
border: none;
|
|
640
737
|
padding: 1px 0;
|
|
641
738
|
}
|
|
@@ -643,12 +740,12 @@
|
|
|
643
740
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
|
|
644
741
|
margin-bottom: 4px;
|
|
645
742
|
opacity: 0.6;
|
|
646
|
-
color: var(--color-icon-
|
|
743
|
+
color: var(--color-icon-inverted);
|
|
647
744
|
}
|
|
648
745
|
|
|
649
746
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
|
|
650
747
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
|
|
651
|
-
background-color: var(--color-
|
|
748
|
+
background-color: var(--color-background-active);
|
|
652
749
|
}
|
|
653
750
|
|
|
654
751
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
|
|
@@ -677,14 +774,14 @@
|
|
|
677
774
|
width: 100%;
|
|
678
775
|
border-radius: 3px;
|
|
679
776
|
margin-top: 3px;
|
|
680
|
-
box-shadow: 0px 0px 5px var(--color-
|
|
681
|
-
background-color: var(--color-
|
|
777
|
+
box-shadow: 0px 0px 5px var(--color-shadow);
|
|
778
|
+
background-color: var(--color-layer);
|
|
682
779
|
}
|
|
683
780
|
|
|
684
781
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
|
|
685
782
|
padding: 6px 8px;
|
|
686
|
-
border-bottom: 1px solid var(--color-
|
|
687
|
-
color: var(--color-
|
|
783
|
+
border-bottom: 1px solid var(--color-borders-inverted);
|
|
784
|
+
color: var(--color-text-light);
|
|
688
785
|
}
|
|
689
786
|
|
|
690
787
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
|
|
@@ -692,8 +789,8 @@
|
|
|
692
789
|
}
|
|
693
790
|
|
|
694
791
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
|
|
695
|
-
background-color: var(--color-
|
|
696
|
-
color: var(--color-
|
|
792
|
+
background-color: var(--color-background-inverted);
|
|
793
|
+
color: var(--color-text-inverted);
|
|
697
794
|
}
|
|
698
795
|
|
|
699
796
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
|