@bpmn-io/form-js-viewer 0.15.0-alpha.0 → 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.
Files changed (12) hide show
  1. package/dist/assets/form-js-base.css +53 -4
  2. package/dist/assets/form-js.css +52 -4
  3. package/dist/index.cjs +130 -41
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +130 -41
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/index.d.ts +1 -1
  8. package/dist/types/render/components/Util.d.ts +2 -1
  9. package/dist/types/render/hooks/index.d.ts +1 -0
  10. package/dist/types/render/hooks/useReadonly.d.ts +17 -0
  11. package/dist/types/types.d.ts +1 -1
  12. package/package.json +2 -2
package/dist/assets/form-js-base.css CHANGED
@@ -44,6 +44,7 @@
44
44
  var(--cds-field-01, var(--color-white))
45
45
  );
46
46
  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
47
+ --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
47
48
  --color-background-adornment: var(
48
49
  --cds-field,
49
50
  var(--cds-field-01, var(--color-grey-225-10-95))
@@ -74,11 +75,16 @@
74
75
  --cds-border-subtle,
75
76
  var(--cds-border-subtle-01, var(--color-grey-225-10-85))
76
77
  );
78
+ --color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
77
79
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
78
80
 
79
81
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
80
82
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
81
83
  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
84
+ --color-accent-readonly: var(
85
+ --cds-border-strong,
86
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
87
+ );
82
88
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
83
89
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
84
90
 
@@ -102,6 +108,7 @@
102
108
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
103
109
  --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
104
110
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
111
+ --border-definition-readonly: 1px solid var(--color-borders-readonly);
105
112
 
106
113
  height: 100%;
107
114
  }
@@ -230,7 +237,9 @@
230
237
  .fjs-container .fjs-taglist-input::placeholder,
231
238
  .fjs-container .fjs-textarea::placeholder,
232
239
  .fjs-container .fjs-select > option:disabled,
233
- .fjs-container .fjs-select [disabled] {
240
+ .fjs-container .fjs-select [disabled],
241
+ .fjs-container .fjs-select > option:read-only,
242
+ .fjs-container .fjs-select [read-only] {
234
243
  color: var(--color-text-lightest);
235
244
  font-size: var(--font-size-input);
236
245
  line-height: var(--line-height-input);
@@ -408,7 +417,8 @@
408
417
  }
409
418
 
410
419
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
411
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
420
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
421
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
412
422
  color: var(--color-text-lighter);
413
423
  line-height: var(--line-height-input);
414
424
  }
@@ -563,12 +573,43 @@
563
573
  background-color: var(--cds-toggle-off, var(--color-background-disabled));
564
574
  }
565
575
 
576
+ .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
577
+ .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
578
+ .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
579
+ .fjs-container .fjs-number-arrow-container.fjs-readonly button,
580
+ .fjs-container .fjs-taglist.fjs-readonly,
581
+ .fjs-container .fjs-readonly .fjs-input-group {
582
+ background-color: var(--color-background-readonly);
583
+ border-color: var(--color-borders-readonly);
584
+ }
585
+
586
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly,
587
+ .fjs-container .fjs-form-field-checklist.fjs-readonly,
588
+ .fjs-container .fjs-form-field-radio.fjs-readonly {
589
+ pointer-events: none;
590
+ }
591
+
592
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
593
+ .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
594
+ .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
595
+ opacity: 0.4;
596
+ accent-color: var(--color-accent-readonly);
597
+ }
598
+
566
599
  .fjs-container .fjs-button[type='submit']:disabled,
567
600
  .fjs-container .fjs-button[type='reset']:disabled {
568
601
  color: var(--cds-text-on-color-disabled, var(--color-text-light));
569
602
  background-color: var(--color-background-disabled);
570
603
  border-color: var(--color-borders-disabled);
571
604
  }
605
+
606
+ .fjs-container .fjs-button[type='submit']:read-only,
607
+ .fjs-container .fjs-button[type='reset']:read-only {
608
+ color: var(--text-light);
609
+ background-color: var(--color-background-readonly);
610
+ border-color: var(--color-borders-readonly);
611
+ }
612
+
572
613
  .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
573
614
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
574
615
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
@@ -580,6 +621,12 @@
580
621
  pointer-events: none;
581
622
  }
582
623
 
624
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
625
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
626
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
627
+ border-color: var(--color-borders-readonly);
628
+ }
629
+
583
630
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
584
631
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
585
632
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -677,7 +724,8 @@
677
724
  border-radius: 2px;
678
725
  }
679
726
 
680
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
727
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
728
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
681
729
  background-color: var(--color-background-inverted);
682
730
  }
683
731
 
@@ -691,7 +739,8 @@
691
739
  padding: 2px 6px 2px 8px;
692
740
  }
693
741
 
694
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label {
742
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
743
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
695
744
  padding: 2px 8px;
696
745
  }
697
746
 
package/dist/assets/form-js.css CHANGED
@@ -39,6 +39,7 @@
39
39
  var(--cds-field-01, var(--color-white))
40
40
  );
41
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));
42
43
  --color-background-adornment: var(
43
44
  --cds-field,
44
45
  var(--cds-field-01, var(--color-grey-225-10-95))
@@ -67,10 +68,15 @@
67
68
  --cds-border-subtle,
68
69
  var(--cds-border-subtle-01, var(--color-grey-225-10-85))
69
70
  );
71
+ --color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
70
72
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
71
73
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
72
74
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
73
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
+ );
74
80
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
75
81
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
76
82
  --font-family: "IBM Plex Sans", sans-serif;
@@ -88,6 +94,7 @@
88
94
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
89
95
  --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
90
96
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
97
+ --border-definition-readonly: 1px solid var(--color-borders-readonly);
91
98
  height: 100%;
92
99
  }
93
100
 
@@ -214,7 +221,9 @@
214
221
  .fjs-container .fjs-taglist-input::placeholder,
215
222
  .fjs-container .fjs-textarea::placeholder,
216
223
  .fjs-container .fjs-select > option:disabled,
217
- .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] {
218
227
  color: var(--color-text-lightest);
219
228
  font-size: var(--font-size-input);
220
229
  line-height: var(--line-height-input);
@@ -390,7 +399,8 @@
390
399
  }
391
400
 
392
401
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
393
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
402
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
403
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
394
404
  color: var(--color-text-lighter);
395
405
  line-height: var(--line-height-input);
396
406
  }
@@ -545,6 +555,29 @@
545
555
  background-color: var(--cds-toggle-off, var(--color-background-disabled));
546
556
  }
547
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
+
548
581
  .fjs-container .fjs-button[type=submit]:disabled,
549
582
  .fjs-container .fjs-button[type=reset]:disabled {
550
583
  color: var(--cds-text-on-color-disabled, var(--color-text-light));
@@ -552,6 +585,13 @@
552
585
  border-color: var(--color-borders-disabled);
553
586
  }
554
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
+
555
595
  .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
556
596
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
557
597
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
@@ -563,6 +603,12 @@
563
603
  pointer-events: none;
564
604
  }
565
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
+
566
612
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
567
613
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
568
614
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -660,7 +706,8 @@
660
706
  border-radius: 2px;
661
707
  }
662
708
 
663
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
709
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
710
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
664
711
  background-color: var(--color-background-inverted);
665
712
  }
666
713
 
@@ -674,7 +721,8 @@
674
721
  padding: 2px 6px 2px 8px;
675
722
  }
676
723
 
677
- .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 {
678
726
  padding: 2px 8px;
679
727
  }
680
728