@bpmn-io/form-js-editor 0.5.0 → 0.7.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 (14) hide show
  1. package/dist/assets/form-js-editor.css +86 -40
  2. package/dist/index.cjs +378 -33
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.es.js +379 -35
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/types/FormEditor.d.ts +5 -0
  7. package/dist/types/render/components/properties-panel/components/SelectEntry.d.ts +1 -0
  8. package/dist/types/render/components/properties-panel/components/index.d.ts +1 -0
  9. package/dist/types/render/components/properties-panel/entries/CustomValueEntry.d.ts +1 -0
  10. package/dist/types/render/components/properties-panel/entries/DefaultValueEntry.d.ts +1 -0
  11. package/dist/types/render/components/properties-panel/entries/index.d.ts +2 -0
  12. package/dist/types/render/components/properties-panel/groups/CustomValuesGroup.d.ts +10 -0
  13. package/dist/types/render/components/properties-panel/groups/index.d.ts +1 -0
  14. package/package.json +3 -3
package/dist/assets/form-js-editor.css CHANGED
@@ -1,5 +1,46 @@
1
1
  .fjs-editor-container {
2
- --color-blue-lighten-99: #fafcff;
2
+ --color-children-border: var(--color-grey-225-10-75);
3
+ --color-children-selected-border: var(--color-blue-205-100-50);
4
+ --color-children-selected-background: var(--color-blue-205-100-95);
5
+ --color-children-hover-border: var(--color-blue-205-100-50);
6
+
7
+ --color-context-pad-item-background: var(--color-white);
8
+ --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
+ --color-context-pad-item-hover-fill: var(--color-black);
10
+
11
+ --color-palette-container-background: var(--color-grey-225-10-97);
12
+ --color-palette-container-border: var(--color-grey-225-10-80);
13
+ --color-palette-header-color: var(--color-text);
14
+ --color-palette-header-background: var(--color-grey-225-10-95);
15
+ --color-palette-header-border: var(--color-grey-225-10-80);
16
+ --color-palette-field-border: var(--color-grey-225-10-80);
17
+ --color-palette-field-hover-background: var(--color-grey-225-10-95);
18
+
19
+ --color-properties-container-background: var(--color-grey-225-10-97);
20
+ --color-properties-container-border: var(--color-grey-225-10-80);
21
+ --color-properties-header-background: var(--color-grey-225-10-95);
22
+ --color-properties-header-border: var(--color-grey-225-10-80);
23
+ --color-properties-header-icon-fill: var(--color-grey-225-10-35);
24
+ --color-properties-group-background: var(--color-grey-225-10-95);
25
+ --color-properties-group-border: var(--color-grey-225-10-80);
26
+ --color-properties-group-button-fill: var(--color-grey-225-10-35);
27
+ --color-properties-group-button-hover-fill: var(--color-black);
28
+ --color-properties-entries-border: var(--color-grey-225-10-80);
29
+ --color-properties-collapsible-remove-fill: var(--color-grey-225-10-35);
30
+ --color-properties-collapsible-remove-hover-fill: var(--color-black);
31
+ --color-properties-description: var(--color-grey-225-10-15);
32
+ --color-properties-error: var(--color-warning);
33
+ --color-properties-input-background: var(--color-white);
34
+ --color-properties-input-border: var(--color-grey-225-10-75);
35
+ --color-properties-input-error-border: var(--color-warning);
36
+ --color-properties-input-error-hover-border: var(--color-warning);
37
+ --color-properties-input-focus-border: var(--color-blue-205-100-50);
38
+ --color-properties-placeholder: var(--color-grey-225-10-80);
39
+
40
+ --color-dragula-background: var(--color-blue-205-100-45);
41
+ --color-dragula-border: var(--color-blue-205-100-45);
42
+ --color-dragula-mirror-background: var(--color-white);
43
+ --color-dragula-mirror-border: var(--color-grey-225-10-80);
3
44
  }
4
45
 
5
46
  .fjs-editor-container {
@@ -41,7 +82,7 @@
41
82
  }
42
83
 
43
84
  .fjs-editor-container .fjs-children .fjs-children {
44
- border: dashed 2px var(--color-silver-darken-80);
85
+ border: dashed 2px var(--color-children-border);
45
86
  border-radius: 3px;
46
87
  }
47
88
 
@@ -75,12 +116,12 @@
75
116
  }
76
117
 
77
118
  .fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
78
- border-color: var(--color-blue-lighten-75);
79
- background-color: var(--color-blue-lighten-93);
119
+ border-color: var(--color-children-selected-border);
120
+ background-color: var(--color-children-selected-background);
80
121
  }
81
122
 
82
123
  .fjs-editor-container .fjs-children > .fjs-element:hover {
83
- border-color: var(--color-blue-lighten-82) !important;
124
+ border-color: var(--color-children-hover-border) !important;
84
125
  }
85
126
 
86
127
  .fjs-editor-container .fjs-input:disabled,
@@ -101,18 +142,18 @@
101
142
  .fjs-editor-container .fjs-context-pad-item {
102
143
  border: none;
103
144
  border-radius: 3px;
104
- background-color: var(--color-white);
145
+ background-color: var(--color-context-pad-item-background);
105
146
  padding: 0;
106
147
  width: 24px;
107
148
  height: 24px;
108
- fill: var(--color-grey-base-40);
149
+ fill: var(--color-context-pad-item-fill);
109
150
  display: flex;
110
151
  justify-content: center;
111
152
  align-items: center;
112
153
  }
113
154
 
114
155
  .fjs-editor-container .fjs-context-pad-item:hover {
115
- fill: var(--color-black);
156
+ fill: var(--color-context-pad-item-hover-fill);
116
157
  }
117
158
 
118
159
  /**
@@ -120,16 +161,17 @@
120
161
  */
121
162
  .fjs-editor-container .fjs-palette-container {
122
163
  width: 200px;
123
- background-color: var(--color-silver-base-97);
124
- border-right: solid 1px var(--color-silver-darken-80);
164
+ background-color: var(--color-palette-container-background);
165
+ border-right: solid 1px var(--color-palette-container-border);
125
166
  }
126
167
 
127
168
  .fjs-editor-container .fjs-palette-header {
128
169
  font-size: 12px;
129
170
  font-weight: bold;
171
+ color: var(--color-palette-header-color);
130
172
  padding: 10px;
131
- border-bottom: solid 1px var(--color-silver-darken-80);
132
- background-color: var(--color-silver-darken-94);
173
+ border-bottom: solid 1px var(--color-palette-header-border);
174
+ background-color: var(--color-palette-header-background);
133
175
  }
134
176
 
135
177
  .fjs-editor-container .fjs-palette-field {
@@ -139,8 +181,9 @@
139
181
  justify-content: flex-start;
140
182
  align-items: center;
141
183
  flex-direction: row;
142
- border-bottom: solid 1px var(--color-silver-darken-80);
184
+ border-bottom: solid 1px var(--color-palette-field-border);
143
185
  font-size: 14px;
186
+ color: var(--color-text);
144
187
  }
145
188
 
146
189
  .fjs-editor-container .fjs-palette-field-icon {
@@ -148,7 +191,7 @@
148
191
  }
149
192
 
150
193
  .fjs-editor-container .fjs-palette-field:hover {
151
- background-color: var(--color-silver-darken-94);
194
+ background-color: var(--color-palette-field-hover-background);
152
195
  cursor: default;
153
196
  }
154
197
 
@@ -157,9 +200,10 @@
157
200
  */
158
201
  .fjs-editor-container .fjs-properties-container {
159
202
  width: 300px;
160
- background-color: var(--color-silver-base-97);
161
- border-left: solid 1px var(--color-silver-darken-80);
203
+ background-color: var(--color-properties-container-background);
204
+ border-left: solid 1px var(--color-properties-container-border);
162
205
  height: 100%;
206
+ color: var(--color-text);
163
207
  }
164
208
 
165
209
  .fjs-editor-container .fjs-properties-panel * {
@@ -172,8 +216,8 @@
172
216
  align-items: center;
173
217
  font-size: 14px;
174
218
  padding: 10px;
175
- background-color: var(--color-silver-darken-94);
176
- border-bottom: solid 1px var(--color-silver-darken-80);
219
+ background-color: var(--color-properties-header-background);
220
+ border-bottom: solid 1px var(--color-properties-header-border);
177
221
  }
178
222
 
179
223
  .fjs-editor-container .fjs-properties-panel-header-icon {
@@ -181,6 +225,7 @@
181
225
  display: flex;
182
226
  flex-direction: row;
183
227
  align-items: center;
228
+ fill: var(--color-properties-header-icon-fill);
184
229
  }
185
230
 
186
231
  .fjs-editor-container .fjs-properties-panel-header-type {
@@ -195,8 +240,8 @@
195
240
  align-items: center;
196
241
  font-size: 14px;
197
242
  padding: 10px;
198
- border-bottom: solid 1px var(--color-silver-darken-80);
199
- background-color: var(--color-silver-darken-94);
243
+ border-bottom: solid 1px var(--color-properties-group-border);
244
+ background-color: var(--color-properties-group-background);
200
245
  }
201
246
 
202
247
  .fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button {
@@ -207,7 +252,7 @@
207
252
  height: 20px;
208
253
  margin-right: 10px;
209
254
  padding: 0;
210
- fill: var(--color-grey-base-40);
255
+ fill: var(--color-properties-group-button-fill);
211
256
  border: none;
212
257
  background: none;
213
258
  }
@@ -217,11 +262,11 @@
217
262
  }
218
263
 
219
264
  .fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button:hover {
220
- fill: var(--color-black);
265
+ fill: var(--color-properties-group-button-hover-fill);
221
266
  }
222
267
 
223
268
  .fjs-editor-container .fjs-properties-panel-group-entries {
224
- border-bottom: solid 1px var(--color-silver-darken-80);
269
+ border-bottom: solid 1px var(--color-properties-entries-border);
225
270
  }
226
271
 
227
272
  .fjs-editor-container .fjs-properties-panel-group:last-child .fjs-properties-panel-group-entries {
@@ -266,11 +311,11 @@
266
311
  height: 22px;
267
312
  width: 22px;
268
313
  padding: 0;
269
- fill: var(--color-grey-base-40);
314
+ fill: var(--color-properties-collapsible-remove-fill);
270
315
  }
271
316
 
272
317
  .fjs-editor-container .fjs-properties-panel-collapsible-entry-header-remove-entry:hover {
273
- fill: var(--color-black);
318
+ fill: var(--color-properties-collapsible-remove-hover-fill);
274
319
  }
275
320
 
276
321
  .fjs-editor-container .fjs-properties-panel-collapsible-entry-entries {
@@ -294,11 +339,11 @@
294
339
 
295
340
  .fjs-editor-container .fjs-properties-panel-label,
296
341
  .fjs-editor-container .fjs-properties-panel-description {
297
- color: var(--color-grey-base-40);
342
+ color: var(--color-properties-description);
298
343
  }
299
344
 
300
345
  .fjs-editor-container .fjs-properties-panel-error {
301
- color: var(--color-warning);
346
+ color: var(--color-properties-error);
302
347
  }
303
348
 
304
349
  .fjs-editor-container .fjs-properties-panel-description,
@@ -307,11 +352,12 @@
307
352
  }
308
353
 
309
354
  .fjs-editor-container .fjs-properties-panel-input {
310
- background-color: var(--color-white);
311
- border: solid 1px var(--color-silver-darken-80);
355
+ background-color: var(--color-properties-input-background);
356
+ border: solid 1px var(--color-properties-input-border);
312
357
  border-radius: 3px;
313
358
  padding: 4px 8px;
314
359
  font-size: 14px;
360
+ font-family: inherit;
315
361
  }
316
362
 
317
363
  .fjs-editor-container .fjs-properties-panel-input[type=number],
@@ -323,29 +369,29 @@
323
369
  }
324
370
 
325
371
  .fjs-editor-container .fjs-properties-panel-input.fjs-has-error {
326
- border-color: var(--color-warning);
372
+ border-color: var(--color-properties-input-error-border);
327
373
  }
328
374
 
329
375
  .fjs-editor-container .fjs-properties-panel-input.fjs-has-error:focus {
330
- border-color: var(--color-warning);
331
- box-shadow: 0 0 0 4px var(--color-red-lighten-85), 0 0 0 1px var(--color-silver-darken-80) inset;
376
+ border-color: var(--color-properties-input-error-hover-border);
377
+ box-shadow: 0 0 0 4px var(--color-red-360-100-92), 0 0 0 1px var(--color-grey-225-10-75) inset;
332
378
  }
333
379
 
334
380
  .fjs-editor-container .fjs-properties-panel-input:focus {
335
381
  outline: none;
336
- box-shadow: 0 0 0 4px var(--color-blue-lighten-82), 0 0 0 1px var(--color-silver-darken-80) inset;
337
- border: solid 1px var(--color-blue-darken-55);
382
+ box-shadow: 0 0 0 4px var(--color-blue-205-100-80), 0 0 0 1px var(--color-grey-225-10-75) inset;
383
+ border: solid 1px var(--color-properties-input-focus-border);
338
384
  }
339
385
 
340
386
  .fjs-editor-container .fjs-properties-panel-placeholder {
341
387
  padding: 10px;
342
- color: var(--color-silver-darken-80);
388
+ color: var(--color-properties-placeholder);
343
389
  font-size: 14px;
344
390
  text-align: center;
345
391
  }
346
392
 
347
393
  .fjs-editor-container textarea.fjs-properties-panel-input {
348
- font-family: sans-serif;
394
+ font-family: inherit;
349
395
  resize: vertical;
350
396
  }
351
397
 
@@ -353,8 +399,8 @@
353
399
  * Custom Dragula Styles
354
400
  */
355
401
  .gu-transit {
356
- background: var(--color-blue-darken-62) !important;
357
- border: solid 2px var(--color-blue-darken-62) !important;
402
+ background: var(--color-dragula-background) !important;
403
+ border: solid 2px var(--color-dragula-border) !important;
358
404
  border-radius: 3px !important;
359
405
  filter: none !important;
360
406
  height: 0 !important;
@@ -367,8 +413,8 @@
367
413
  }
368
414
 
369
415
  .gu-mirror {
370
- background-color: white !important;
371
- border: solid 1px var(--color-silver-darken-80) !important;
416
+ background-color: var(--color-dragula-mirror-background) !important;
417
+ border: solid 1px var(--color-dragula-mirror-border) !important;
372
418
  border-radius: 3px !important;
373
419
  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
374
420
  display: flex !important;