@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
|
@@ -33,21 +33,60 @@
|
|
|
33
33
|
--color-white: hsl(0, 0%, 100%);
|
|
34
34
|
--color-black: hsl(0, 0%, 0%);
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
--color-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
--color-
|
|
47
|
-
--color-
|
|
48
|
-
--color-
|
|
49
|
-
|
|
50
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Specify color variables in the following schema:
|
|
38
|
+
* 1 - use specified layer
|
|
39
|
+
* 2 - use layer one
|
|
40
|
+
* 3 - use fallback
|
|
41
|
+
*/
|
|
42
|
+
--color-background: var(
|
|
43
|
+
--cds-field,
|
|
44
|
+
var(--cds-field-01, var(--color-white))
|
|
45
|
+
);
|
|
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));
|
|
48
|
+
--color-background-adornment: var(
|
|
49
|
+
--cds-field,
|
|
50
|
+
var(--cds-field-01, var(--color-grey-225-10-95))
|
|
51
|
+
);
|
|
52
|
+
--color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
|
|
53
|
+
--color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
|
|
54
|
+
--color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
|
|
55
|
+
--color-layer: var(
|
|
56
|
+
--cds-layer,
|
|
57
|
+
var(--cds-layer-01, var(--color-white))
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
--color-icon-base: var(--cds-icon-primary, var(--color-black));
|
|
61
|
+
--color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
|
|
62
|
+
--color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
|
|
63
|
+
--color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
|
|
64
|
+
--color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
|
|
65
|
+
--color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
|
|
66
|
+
--color-text-inverted: var(--cds-text-inverse, var(--color-text));
|
|
67
|
+
--color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
|
|
68
|
+
|
|
69
|
+
--color-borders: var(
|
|
70
|
+
--cds-border-strong,
|
|
71
|
+
var(--cds-border-strong-01, var(--color-grey-225-10-55))
|
|
72
|
+
);
|
|
73
|
+
--color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
|
|
74
|
+
--color-borders-adornment: var(
|
|
75
|
+
--cds-border-subtle,
|
|
76
|
+
var(--cds-border-subtle-01, var(--color-grey-225-10-85))
|
|
77
|
+
);
|
|
78
|
+
--color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
|
|
79
|
+
--color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
|
|
80
|
+
|
|
81
|
+
--color-warning: var(--cds-text-error, var(--color-red-360-100-45));
|
|
82
|
+
--color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
|
|
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
|
+
);
|
|
88
|
+
--color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
|
|
89
|
+
--color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
|
|
51
90
|
|
|
52
91
|
--font-family: 'IBM Plex Sans', sans-serif;
|
|
53
92
|
|
|
@@ -67,8 +106,9 @@
|
|
|
67
106
|
|
|
68
107
|
--border-definition: 1px solid var(--color-borders);
|
|
69
108
|
--border-definition-adornment: 1px solid var(--color-borders-adornment);
|
|
70
|
-
--outline-definition: 1px solid var(--color-borders);
|
|
109
|
+
--outline-definition: 1px solid var(--cds-focus, var(--color-borders));
|
|
71
110
|
--border-definition-disabled: 1px solid var(--color-borders-disabled);
|
|
111
|
+
--border-definition-readonly: 1px solid var(--color-borders-readonly);
|
|
72
112
|
|
|
73
113
|
height: 100%;
|
|
74
114
|
}
|
|
@@ -133,7 +173,6 @@
|
|
|
133
173
|
letter-spacing: var(--letter-spacing-base);
|
|
134
174
|
font-weight: 400;
|
|
135
175
|
color: var(--color-text);
|
|
136
|
-
background-color: var(--color-background);
|
|
137
176
|
position: relative;
|
|
138
177
|
padding: 0 4px;
|
|
139
178
|
}
|
|
@@ -180,6 +219,7 @@
|
|
|
180
219
|
.fjs-container .fjs-taglist-input,
|
|
181
220
|
.fjs-container .fjs-textarea,
|
|
182
221
|
.fjs-container .fjs-select {
|
|
222
|
+
color: var(--color-text);
|
|
183
223
|
border-color: var(--color-borders);
|
|
184
224
|
background-color: var(--color-background);
|
|
185
225
|
font-family: inherit;
|
|
@@ -197,7 +237,9 @@
|
|
|
197
237
|
.fjs-container .fjs-taglist-input::placeholder,
|
|
198
238
|
.fjs-container .fjs-textarea::placeholder,
|
|
199
239
|
.fjs-container .fjs-select > option:disabled,
|
|
200
|
-
.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] {
|
|
201
243
|
color: var(--color-text-lightest);
|
|
202
244
|
font-size: var(--font-size-input);
|
|
203
245
|
line-height: var(--line-height-input);
|
|
@@ -271,7 +313,7 @@
|
|
|
271
313
|
color: var(--color-text-lighter);
|
|
272
314
|
padding: 8px;
|
|
273
315
|
width: auto !important;
|
|
274
|
-
min-width: 34px;
|
|
316
|
+
min-width: min(34px, 20%);
|
|
275
317
|
display: flex;
|
|
276
318
|
overflow: hidden;
|
|
277
319
|
}
|
|
@@ -353,7 +395,7 @@
|
|
|
353
395
|
.fjs-container .fjs-input-group .fjs-taglist,
|
|
354
396
|
.fjs-container .fjs-input-group .fjs-select {
|
|
355
397
|
height: unset;
|
|
356
|
-
min-width: min(60px,
|
|
398
|
+
min-width: min(60px, 40%);
|
|
357
399
|
width: 100%;
|
|
358
400
|
}
|
|
359
401
|
|
|
@@ -375,8 +417,9 @@
|
|
|
375
417
|
}
|
|
376
418
|
|
|
377
419
|
.fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
|
|
378
|
-
.fjs-container .fjs-disabled .fjs-input-group .fjs-select-display
|
|
379
|
-
|
|
420
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
|
|
421
|
+
.fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
|
|
422
|
+
color: var(--color-text-lighter);
|
|
380
423
|
line-height: var(--line-height-input);
|
|
381
424
|
}
|
|
382
425
|
|
|
@@ -413,6 +456,7 @@
|
|
|
413
456
|
width: 100%;
|
|
414
457
|
height: 100%;
|
|
415
458
|
display: flex;
|
|
459
|
+
position: relative;
|
|
416
460
|
}
|
|
417
461
|
|
|
418
462
|
.fjs-container .fjs-textarea {
|
|
@@ -430,7 +474,7 @@
|
|
|
430
474
|
display: flex;
|
|
431
475
|
flex-direction: column;
|
|
432
476
|
border-radius: 0 2px 2px 0;
|
|
433
|
-
width: 23px;
|
|
477
|
+
width: clamp(16px, 40%, 23px);
|
|
434
478
|
overflow: clip;
|
|
435
479
|
border-left: var(--border-definition-adornment);
|
|
436
480
|
}
|
|
@@ -443,20 +487,18 @@
|
|
|
443
487
|
.fjs-container .fjs-number-arrow-container button {
|
|
444
488
|
border: none;
|
|
445
489
|
flex: 1;
|
|
446
|
-
color: var(--color-text
|
|
447
|
-
background-color: var(--color-
|
|
490
|
+
color: var(--color-text);
|
|
491
|
+
background-color: var(--color-background);
|
|
448
492
|
font-weight: bold;
|
|
449
493
|
font-size: 10px;
|
|
450
494
|
line-height: 15px;
|
|
451
495
|
}
|
|
452
496
|
|
|
453
497
|
.fjs-container .fjs-number-arrow-container button:hover {
|
|
454
|
-
background-color: var(--color-
|
|
455
|
-
color: var(--color-text);
|
|
498
|
+
background-color: var(--color-background-inverted-hover);
|
|
499
|
+
color: var(--cds-text-inverse, var(--color-text));
|
|
456
500
|
}
|
|
457
501
|
|
|
458
|
-
|
|
459
|
-
|
|
460
502
|
.fjs-container .fjs-radio {
|
|
461
503
|
display: flex;
|
|
462
504
|
flex-direction: column;
|
|
@@ -468,7 +510,7 @@
|
|
|
468
510
|
}
|
|
469
511
|
|
|
470
512
|
.fjs-container .fjs-button[type='submit'] {
|
|
471
|
-
color: var(--
|
|
513
|
+
color: var(--cds-text-inverse, var(--color-white));
|
|
472
514
|
background-color: var(--color-accent);
|
|
473
515
|
border-color: var(--color-accent);
|
|
474
516
|
}
|
|
@@ -522,23 +564,69 @@
|
|
|
522
564
|
.fjs-container .fjs-number-arrow-container.fjs-disabled button,
|
|
523
565
|
.fjs-container .fjs-taglist.fjs-disabled,
|
|
524
566
|
.fjs-container .fjs-disabled .fjs-input-group {
|
|
525
|
-
|
|
567
|
+
color: var(--color-text-disabled);
|
|
568
|
+
background-color: var(--cds-field, var(--color-background-disabled));
|
|
526
569
|
border-color: var(--color-borders-disabled);
|
|
527
570
|
}
|
|
528
571
|
|
|
572
|
+
.fjs-container .fjs-number-arrow-container.fjs-disabled button {
|
|
573
|
+
background-color: var(--cds-toggle-off, var(--color-background-disabled));
|
|
574
|
+
}
|
|
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
|
+
|
|
529
599
|
.fjs-container .fjs-button[type='submit']:disabled,
|
|
530
600
|
.fjs-container .fjs-button[type='reset']:disabled {
|
|
531
|
-
color: var(--text-light);
|
|
601
|
+
color: var(--cds-text-on-color-disabled, var(--color-text-light));
|
|
532
602
|
background-color: var(--color-background-disabled);
|
|
533
603
|
border-color: var(--color-borders-disabled);
|
|
534
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
|
+
|
|
535
613
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
|
|
536
614
|
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
|
|
537
|
-
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator
|
|
538
|
-
{
|
|
615
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
|
|
539
616
|
border-color: var(--color-borders-disabled);
|
|
540
617
|
}
|
|
541
618
|
|
|
619
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
|
|
620
|
+
.fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
|
|
621
|
+
pointer-events: none;
|
|
622
|
+
}
|
|
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
|
+
|
|
542
630
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
|
|
543
631
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
|
|
544
632
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
|
|
@@ -566,8 +654,7 @@
|
|
|
566
654
|
}
|
|
567
655
|
|
|
568
656
|
.fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
|
|
569
|
-
border-color: var(--color-
|
|
570
|
-
background: var(--color-red-360-100-97);
|
|
657
|
+
border-color: var(--color-warning-light);
|
|
571
658
|
}
|
|
572
659
|
|
|
573
660
|
.fjs-container .fjs-form-field-error {
|
|
@@ -609,6 +696,14 @@
|
|
|
609
696
|
top: -5px;
|
|
610
697
|
}
|
|
611
698
|
|
|
699
|
+
.fjs-container .fjs-select-hidden-input {
|
|
700
|
+
width: 0;
|
|
701
|
+
overflow: hidden;
|
|
702
|
+
opacity: 0;
|
|
703
|
+
padding: 0;
|
|
704
|
+
border: none;
|
|
705
|
+
}
|
|
706
|
+
|
|
612
707
|
.fjs-container .fjs-taglist {
|
|
613
708
|
display: flex;
|
|
614
709
|
flex-wrap: wrap;
|
|
@@ -624,12 +719,14 @@
|
|
|
624
719
|
display: flex;
|
|
625
720
|
overflow: hidden;
|
|
626
721
|
user-select: none;
|
|
627
|
-
|
|
722
|
+
color: var(--color-text-inverted);
|
|
723
|
+
background-color: var(--color-background-inverted);
|
|
628
724
|
border-radius: 2px;
|
|
629
725
|
}
|
|
630
726
|
|
|
631
|
-
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag
|
|
632
|
-
|
|
727
|
+
.fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
|
|
728
|
+
.fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
|
|
729
|
+
background-color: var(--color-background-inverted);
|
|
633
730
|
}
|
|
634
731
|
|
|
635
732
|
.fjs-container .fjs-taglist .fjs-taglist-tags {
|
|
@@ -642,7 +739,8 @@
|
|
|
642
739
|
padding: 2px 6px 2px 8px;
|
|
643
740
|
}
|
|
644
741
|
|
|
645
|
-
.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 {
|
|
646
744
|
padding: 2px 8px;
|
|
647
745
|
}
|
|
648
746
|
|
|
@@ -652,7 +750,7 @@
|
|
|
652
750
|
height: 24px;
|
|
653
751
|
text-align: center;
|
|
654
752
|
line-height: 28px;
|
|
655
|
-
background-color: var(--color-grey-225-10-80);
|
|
753
|
+
background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
|
|
656
754
|
border: none;
|
|
657
755
|
padding: 1px 0;
|
|
658
756
|
}
|
|
@@ -660,12 +758,12 @@
|
|
|
660
758
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
|
|
661
759
|
margin-bottom: 4px;
|
|
662
760
|
opacity: 0.6;
|
|
663
|
-
color: var(--color-icon-
|
|
761
|
+
color: var(--color-icon-inverted);
|
|
664
762
|
}
|
|
665
763
|
|
|
666
764
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
|
|
667
765
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
|
|
668
|
-
background-color: var(--color-
|
|
766
|
+
background-color: var(--color-background-active);
|
|
669
767
|
}
|
|
670
768
|
|
|
671
769
|
.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
|
|
@@ -694,14 +792,14 @@
|
|
|
694
792
|
width: 100%;
|
|
695
793
|
border-radius: 3px;
|
|
696
794
|
margin-top: 3px;
|
|
697
|
-
box-shadow: 0px 0px 5px var(--color-
|
|
698
|
-
background-color: var(--color-
|
|
795
|
+
box-shadow: 0px 0px 5px var(--color-shadow);
|
|
796
|
+
background-color: var(--color-layer);
|
|
699
797
|
}
|
|
700
798
|
|
|
701
799
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
|
|
702
800
|
padding: 6px 8px;
|
|
703
|
-
border-bottom: 1px solid var(--color-
|
|
704
|
-
color: var(--color-
|
|
801
|
+
border-bottom: 1px solid var(--color-borders-inverted);
|
|
802
|
+
color: var(--color-text-light);
|
|
705
803
|
}
|
|
706
804
|
|
|
707
805
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
|
|
@@ -709,8 +807,8 @@
|
|
|
709
807
|
}
|
|
710
808
|
|
|
711
809
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
|
|
712
|
-
background-color: var(--color-
|
|
713
|
-
color: var(--color-
|
|
810
|
+
background-color: var(--color-background-inverted);
|
|
811
|
+
color: var(--color-text-inverted);
|
|
714
812
|
}
|
|
715
813
|
|
|
716
814
|
.fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
|