@bpmn-io/form-js-editor 1.1.0 → 1.2.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 +116 -116
- package/dist/assets/dragula.css +1 -1
- package/dist/assets/form-js-editor-base.css +758 -758
- package/dist/assets/form-js-editor.css +76 -0
- package/dist/assets/properties-panel.css +77 -1
- package/dist/index.cjs +685 -368
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +685 -368
- package/dist/index.es.js.map +1 -1
- package/dist/types/features/properties-panel/groups/{CustomValuesGroup.d.ts → CustomPropertiesGroup.d.ts} +2 -1
- package/dist/types/features/properties-panel/groups/index.d.ts +1 -1
- package/dist/types/types.d.ts +28 -28
- package/package.json +4 -4
|
@@ -772,10 +772,13 @@
|
|
|
772
772
|
--color-grey-225-10-90: hsl(225, 10%, 90%);
|
|
773
773
|
--color-grey-225-10-95: hsl(225, 10%, 95%);
|
|
774
774
|
--color-grey-225-10-97: hsl(225, 10%, 97%);
|
|
775
|
+
--color-grey-0-0-22: hsl(0, 0%, 22%);
|
|
775
776
|
--color-blue-205-100-35: hsl(205, 100%, 35%);
|
|
776
777
|
--color-blue-205-100-45: hsl(205, 100%, 45%);
|
|
777
778
|
--color-blue-205-100-50: hsl(205, 100%, 50%);
|
|
778
779
|
--color-blue-205-100-95: hsl(205, 100%, 95%);
|
|
780
|
+
--color-blue-219-99-53: hsl(219, 99%, 53%);
|
|
781
|
+
--color-blue-218-100-74: hsl(218, 100%, 74%);
|
|
779
782
|
--color-green-150-86-44: hsl(150, 86%, 44%);
|
|
780
783
|
--color-red-360-100-40: hsl(360, 100%, 40%);
|
|
781
784
|
--color-red-360-100-45: hsl(360, 100%, 45%);
|
|
@@ -809,6 +812,7 @@
|
|
|
809
812
|
--arrow-fill-color: var(--color-grey-225-10-35);
|
|
810
813
|
--arrow-hover-background-color: var(--color-grey-225-10-95);
|
|
811
814
|
--dot-color: var(--color-grey-225-10-35);
|
|
815
|
+
--dot-color-error: var(--color-red-360-100-45);
|
|
812
816
|
--list-badge-color: var(--color-white);
|
|
813
817
|
--list-badge-background-color: var(--color-grey-225-10-35);
|
|
814
818
|
--input-background-color: var(--color-grey-225-10-97);
|
|
@@ -844,6 +848,11 @@
|
|
|
844
848
|
--feel-active-background-color: transparent;
|
|
845
849
|
--feel-required-color: var(--color-grey-225-10-55);
|
|
846
850
|
--feel-indicator-background-color: var(--color-grey-225-10-90);
|
|
851
|
+
--tooltip-underline-color: var(--color-blue-219-99-53);
|
|
852
|
+
--tooltip-background-color: var(--color-grey-0-0-22);
|
|
853
|
+
--tooltip-link: var(--color-blue-218-100-74);
|
|
854
|
+
--tooltip-code-background-color: var(--color-grey-225-10-97);
|
|
855
|
+
--tooltip-code-border-color: var(--color-grey-225-10-85);
|
|
847
856
|
--text-size-base: 14px;
|
|
848
857
|
--text-size-small: 13px;
|
|
849
858
|
--text-size-smallest: 12px;
|
|
@@ -1088,6 +1097,10 @@
|
|
|
1088
1097
|
background-color: var(--dot-color);
|
|
1089
1098
|
}
|
|
1090
1099
|
|
|
1100
|
+
.bio-properties-panel-dot--error {
|
|
1101
|
+
--dot-color: var(--dot-color-error);
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1091
1104
|
/**
|
|
1092
1105
|
* Lists
|
|
1093
1106
|
*/
|
|
@@ -1115,6 +1128,10 @@
|
|
|
1115
1128
|
background-color: var(--list-badge-background-color);
|
|
1116
1129
|
}
|
|
1117
1130
|
|
|
1131
|
+
.bio-properties-panel-list-badge--error {
|
|
1132
|
+
--list-badge-background-color: var(--dot-color-error);
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1118
1135
|
/**
|
|
1119
1136
|
* Basic entries
|
|
1120
1137
|
*/
|
|
@@ -1835,3 +1852,62 @@ textarea.bio-properties-panel-input {
|
|
|
1835
1852
|
.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
|
|
1836
1853
|
margin-left: auto;
|
|
1837
1854
|
}
|
|
1855
|
+
|
|
1856
|
+
.bio-properties-panel-tooltip-wrapper {
|
|
1857
|
+
text-decoration: underline;
|
|
1858
|
+
text-decoration-style: dotted;
|
|
1859
|
+
text-underline-offset: 2px;
|
|
1860
|
+
font: inherit;
|
|
1861
|
+
}
|
|
1862
|
+
|
|
1863
|
+
.bio-properties-panel-tooltip {
|
|
1864
|
+
display: flex;
|
|
1865
|
+
color: var(--color-white, white);
|
|
1866
|
+
position: fixed;
|
|
1867
|
+
z-index: 1000;
|
|
1868
|
+
padding-right: 6px;
|
|
1869
|
+
max-width: 300px;
|
|
1870
|
+
font-size: var(--text-size-small);
|
|
1871
|
+
font-family: var(--font-family);
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1874
|
+
.bio-properties-panel-tooltip-content {
|
|
1875
|
+
background-color: var(--tooltip-background-color);
|
|
1876
|
+
padding: 16px;
|
|
1877
|
+
border-radius: 2px;
|
|
1878
|
+
font-weight: 400;
|
|
1879
|
+
white-space: pre-wrap;
|
|
1880
|
+
}
|
|
1881
|
+
|
|
1882
|
+
.bio-properties-panel-tooltip-content code,
|
|
1883
|
+
.bio-properties-panel-tooltip-content pre {
|
|
1884
|
+
color: var(--description-color);
|
|
1885
|
+
font-family: var(--font-family);
|
|
1886
|
+
font-size: var(--text-size-small);
|
|
1887
|
+
line-height: var(--line-height-condensed);
|
|
1888
|
+
padding: 0 2px;
|
|
1889
|
+
background-color: var(--tooltip-code-background-color);
|
|
1890
|
+
border: 1px solid var(--tooltip-code-border-color);
|
|
1891
|
+
border-radius: 3px;
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
.bio-properties-panel-tooltip p:first-child {
|
|
1895
|
+
margin-top: 0;
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
.bio-properties-panel-tooltip p:last-child {
|
|
1899
|
+
margin-bottom: 0;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.bio-properties-panel-tooltip-content a {
|
|
1903
|
+
color: var(--tooltip-link);
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
.bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
|
|
1907
|
+
width: 0;
|
|
1908
|
+
height: 0;
|
|
1909
|
+
border-top: 5px solid transparent;
|
|
1910
|
+
border-bottom: 5px solid transparent;
|
|
1911
|
+
border-left: 5px solid var(--tooltip-background-color);
|
|
1912
|
+
margin-top: 16px;
|
|
1913
|
+
}
|
|
@@ -11,12 +11,14 @@
|
|
|
11
11
|
--color-grey-225-10-90: hsl(225, 10%, 90%);
|
|
12
12
|
--color-grey-225-10-95: hsl(225, 10%, 95%);
|
|
13
13
|
--color-grey-225-10-97: hsl(225, 10%, 97%);
|
|
14
|
+
--color-grey-0-0-22: hsl(0, 0%, 22%);
|
|
14
15
|
|
|
15
16
|
--color-blue-205-100-35: hsl(205, 100%, 35%);
|
|
16
17
|
--color-blue-205-100-45: hsl(205, 100%, 45%);
|
|
17
18
|
--color-blue-205-100-50: hsl(205, 100%, 50%);
|
|
18
19
|
--color-blue-205-100-95: hsl(205, 100%, 95%);
|
|
19
|
-
|
|
20
|
+
--color-blue-219-99-53: hsl(219, 99%, 53%);
|
|
21
|
+
--color-blue-218-100-74: hsl(218, 100%, 74%);
|
|
20
22
|
--color-green-150-86-44: hsl(150, 86%, 44%);
|
|
21
23
|
|
|
22
24
|
--color-red-360-100-40: hsl(360, 100%, 40%);
|
|
@@ -62,6 +64,7 @@
|
|
|
62
64
|
--arrow-hover-background-color: var(--color-grey-225-10-95);
|
|
63
65
|
|
|
64
66
|
--dot-color: var(--color-grey-225-10-35);
|
|
67
|
+
--dot-color-error: var(--color-red-360-100-45);
|
|
65
68
|
|
|
66
69
|
--list-badge-color: var(--color-white);
|
|
67
70
|
--list-badge-background-color: var(--color-grey-225-10-35);
|
|
@@ -109,6 +112,12 @@
|
|
|
109
112
|
|
|
110
113
|
--feel-indicator-background-color: var(--color-grey-225-10-90);
|
|
111
114
|
|
|
115
|
+
--tooltip-underline-color: var(--color-blue-219-99-53);
|
|
116
|
+
--tooltip-background-color: var(--color-grey-0-0-22);
|
|
117
|
+
--tooltip-link: var(--color-blue-218-100-74);
|
|
118
|
+
--tooltip-code-background-color: var(--color-grey-225-10-97);
|
|
119
|
+
--tooltip-code-border-color: var(--color-grey-225-10-85);
|
|
120
|
+
|
|
112
121
|
--text-size-base: 14px;
|
|
113
122
|
--text-size-small: 13px;
|
|
114
123
|
--text-size-smallest: 12px;
|
|
@@ -355,6 +364,10 @@
|
|
|
355
364
|
background-color: var(--dot-color);
|
|
356
365
|
}
|
|
357
366
|
|
|
367
|
+
.bio-properties-panel-dot--error {
|
|
368
|
+
--dot-color: var(--dot-color-error);
|
|
369
|
+
}
|
|
370
|
+
|
|
358
371
|
/**
|
|
359
372
|
* Lists
|
|
360
373
|
*/
|
|
@@ -382,6 +395,10 @@
|
|
|
382
395
|
background-color: var(--list-badge-background-color);
|
|
383
396
|
}
|
|
384
397
|
|
|
398
|
+
.bio-properties-panel-list-badge--error {
|
|
399
|
+
--list-badge-background-color: var(--dot-color-error);
|
|
400
|
+
}
|
|
401
|
+
|
|
385
402
|
/**
|
|
386
403
|
* Basic entries
|
|
387
404
|
*/
|
|
@@ -1112,4 +1129,63 @@ textarea.bio-properties-panel-input {
|
|
|
1112
1129
|
.bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
|
|
1113
1130
|
.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
|
|
1114
1131
|
margin-left: auto;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
.bio-properties-panel-tooltip-wrapper {
|
|
1135
|
+
text-decoration: underline;
|
|
1136
|
+
text-decoration-style: dotted;
|
|
1137
|
+
text-underline-offset: 2px;
|
|
1138
|
+
font: inherit;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
.bio-properties-panel-tooltip {
|
|
1142
|
+
display: flex;
|
|
1143
|
+
color: var(--color-white, white);
|
|
1144
|
+
position: fixed;
|
|
1145
|
+
z-index: 1000;
|
|
1146
|
+
padding-right: 6px;
|
|
1147
|
+
max-width: 300px;
|
|
1148
|
+
font-size: var(--text-size-small);
|
|
1149
|
+
font-family: var(--font-family);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.bio-properties-panel-tooltip-content {
|
|
1153
|
+
background-color: var(--tooltip-background-color);
|
|
1154
|
+
padding: 16px;
|
|
1155
|
+
border-radius: 2px;
|
|
1156
|
+
font-weight: 400;
|
|
1157
|
+
white-space: pre-wrap;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
.bio-properties-panel-tooltip-content code,
|
|
1161
|
+
.bio-properties-panel-tooltip-content pre {
|
|
1162
|
+
color: var(--description-color);
|
|
1163
|
+
font-family: var(--font-family);
|
|
1164
|
+
font-size: var(--text-size-small);
|
|
1165
|
+
line-height: var(--line-height-condensed);
|
|
1166
|
+
padding: 0 2px;
|
|
1167
|
+
background-color: var(--tooltip-code-background-color);
|
|
1168
|
+
border: 1px solid var(--tooltip-code-border-color);
|
|
1169
|
+
border-radius: 3px;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
.bio-properties-panel-tooltip p:first-child {
|
|
1173
|
+
margin-top: 0;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.bio-properties-panel-tooltip p:last-child {
|
|
1177
|
+
margin-bottom: 0;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.bio-properties-panel-tooltip-content a {
|
|
1181
|
+
color: var(--tooltip-link);
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
.bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
|
|
1185
|
+
width: 0;
|
|
1186
|
+
height: 0;
|
|
1187
|
+
border-top: 5px solid transparent;
|
|
1188
|
+
border-bottom: 5px solid transparent;
|
|
1189
|
+
border-left: 5px solid var(--tooltip-background-color);
|
|
1190
|
+
margin-top: 16px;
|
|
1115
1191
|
}
|