@bpmn-io/form-js-editor 1.0.0-alpha.0 → 1.0.0-alpha.10

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 (42) hide show
  1. package/dist/assets/dragula.css +22 -0
  2. package/dist/assets/form-js-editor-base.css +25 -7
  3. package/dist/assets/form-js-editor.css +36 -12
  4. package/dist/assets/properties-panel.css +1115 -0
  5. package/dist/index.cjs +1234 -633
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +1252 -669
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/FormEditor.d.ts +5 -2
  10. package/dist/types/features/SectionModuleBase.d.ts +40 -0
  11. package/dist/types/features/expression-language/EditorTemplating.d.ts +8 -0
  12. package/dist/types/features/expression-language/index.d.ts +2 -2
  13. package/dist/types/features/palette/PaletteModule.d.ts +8 -0
  14. package/dist/types/features/palette/components/Palette.d.ts +1 -1
  15. package/dist/types/features/palette/index.d.ts +2 -2
  16. package/dist/types/features/properties-panel/PropertiesPanel.d.ts +1 -1
  17. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  18. package/dist/types/features/properties-panel/components/AutoFocusSelect.d.ts +1 -0
  19. package/dist/types/features/properties-panel/components/index.d.ts +1 -0
  20. package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts +1 -1
  21. package/dist/types/features/properties-panel/entries/LabelEntry.d.ts +5 -5
  22. package/dist/types/features/properties-panel/entries/ValuesExpressionEntry.d.ts +10 -0
  23. package/dist/types/features/properties-panel/entries/ValuesSourceSelectEntry.d.ts +1 -1
  24. package/dist/types/features/properties-panel/entries/index.d.ts +1 -0
  25. package/dist/types/features/properties-panel/hooks/index.d.ts +1 -1
  26. package/dist/types/features/properties-panel/index.d.ts +2 -2
  27. package/dist/types/features/render-injection/RenderInjector.d.ts +30 -0
  28. package/dist/types/features/render-injection/components/InjectedRendersRoot.d.ts +2 -0
  29. package/dist/types/features/render-injection/index.d.ts +6 -0
  30. package/dist/types/features/render-injection/slot-fill/Fill.d.ts +2 -0
  31. package/dist/types/features/render-injection/slot-fill/FillContext.d.ts +5 -0
  32. package/dist/types/features/render-injection/slot-fill/Slot.d.ts +8 -0
  33. package/dist/types/features/render-injection/slot-fill/SlotContext.d.ts +4 -0
  34. package/dist/types/features/render-injection/slot-fill/SlotFillRoot.d.ts +2 -0
  35. package/dist/types/features/render-injection/slot-fill/index.d.ts +5 -0
  36. package/dist/types/render/components/FieldDragPreview.d.ts +1 -1
  37. package/dist/types/render/components/FieldResizer.d.ts +1 -1
  38. package/dist/types/render/components/FormEditor.d.ts +1 -1
  39. package/dist/types/render/components/ModularSection.d.ts +2 -0
  40. package/dist/types/render/components/editor-form-fields/EditorText.d.ts +1 -1
  41. package/package.json +6 -4
  42. package/dist/types/features/palette/PaletteRenderer.d.ts +0 -33
package/dist/assets/dragula.css ADDED
@@ -0,0 +1,22 @@
1
+ .gu-mirror {
2
+ position: fixed !important;
3
+ margin: 0 !important;
4
+ z-index: 9999 !important;
5
+ opacity: 0.8;
6
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
7
+ filter: alpha(opacity=80);
8
+ }
9
+ .gu-hide {
10
+ display: none !important;
11
+ }
12
+ .gu-unselectable {
13
+ -webkit-user-select: none !important;
14
+ -moz-user-select: none !important;
15
+ -ms-user-select: none !important;
16
+ user-select: none !important;
17
+ }
18
+ .gu-transit {
19
+ opacity: 0.2;
20
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
21
+ filter: alpha(opacity=20);
22
+ }
package/dist/assets/form-js-editor-base.css CHANGED
@@ -189,11 +189,13 @@
189
189
  --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
190
190
  --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
191
191
 
192
- --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
192
+ --feel-background-color: transparent;
193
193
  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
194
- --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
195
- --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
196
- --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
194
+ --feel-inactive-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
195
+ --feel-hover-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
196
+ --feel-hover-background-color: var(--cds-layer-02, var(--color-grey-225-10-97));
197
+ --feel-active-background-color: transparent;
198
+ --feel-required-color: var(--cds-icon-disabled, var(--color-grey-225-10-55));
197
199
 
198
200
  --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
199
201
  }
@@ -214,13 +216,18 @@
214
216
  flex-direction: row;
215
217
  }
216
218
 
217
- .fjs-editor-container .fjs-form-container,
218
- .fjs-editor-container .fjs-editor-palette-container,
219
- .fjs-editor-container .fjs-editor-properties-container {
219
+ .fjs-editor-container .fjs-form-container {
220
220
  overflow-y: auto;
221
221
  position: relative;
222
222
  }
223
223
 
224
+ .fjs-editor-container .fjs-render-injector-container {
225
+ width: 0;
226
+ height: 0;
227
+ display: none;
228
+ overflow: hidden;
229
+ }
230
+
224
231
  .fjs-editor-container .fjs-form-container,
225
232
  .fjs-editor-container .fjs-form {
226
233
  display: flex;
@@ -460,6 +467,17 @@
460
467
  user-select: none;
461
468
  }
462
469
 
470
+ .fjs-palette-container .fjs-palette-footer {
471
+ display: flex;
472
+ flex-direction: column;
473
+ align-items: center;
474
+ }
475
+
476
+ .fjs-palette-container .fjs-palette-footer .fjs-palette-footer-fill {
477
+ padding: 10px;
478
+ width: 100%;
479
+ }
480
+
463
481
  .fjs-palette-container .fjs-palette-search-container {
464
482
  display: flex;
465
483
  flex-direction: row;
package/dist/assets/form-js-editor.css CHANGED
@@ -168,11 +168,13 @@
168
168
  --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
169
169
  --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
170
170
  --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
171
- --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
171
+ --feel-background-color: transparent;
172
172
  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
173
- --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
174
- --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
175
- --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
173
+ --feel-inactive-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
174
+ --feel-hover-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
175
+ --feel-hover-background-color: var(--cds-layer-02, var(--color-grey-225-10-97));
176
+ --feel-active-background-color: transparent;
177
+ --feel-required-color: var(--cds-icon-disabled, var(--color-grey-225-10-55));
176
178
  --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
177
179
  }
178
180
 
@@ -192,13 +194,18 @@
192
194
  flex-direction: row;
193
195
  }
194
196
 
195
- .fjs-editor-container .fjs-form-container,
196
- .fjs-editor-container .fjs-editor-palette-container,
197
- .fjs-editor-container .fjs-editor-properties-container {
197
+ .fjs-editor-container .fjs-form-container {
198
198
  overflow-y: auto;
199
199
  position: relative;
200
200
  }
201
201
 
202
+ .fjs-editor-container .fjs-render-injector-container {
203
+ width: 0;
204
+ height: 0;
205
+ display: none;
206
+ overflow: hidden;
207
+ }
208
+
202
209
  .fjs-editor-container .fjs-form-container,
203
210
  .fjs-editor-container .fjs-form {
204
211
  display: flex;
@@ -436,6 +443,17 @@
436
443
  user-select: none;
437
444
  }
438
445
 
446
+ .fjs-palette-container .fjs-palette-footer {
447
+ display: flex;
448
+ flex-direction: column;
449
+ align-items: center;
450
+ }
451
+
452
+ .fjs-palette-container .fjs-palette-footer .fjs-palette-footer-fill {
453
+ padding: 10px;
454
+ width: 100%;
455
+ }
456
+
439
457
  .fjs-palette-container .fjs-palette-search-container {
440
458
  display: flex;
441
459
  flex-direction: row;
@@ -796,11 +814,13 @@
796
814
  --dropdown-item-background-color: var(--color-white);
797
815
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
798
816
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
799
- --feel-background-color: var(--color-grey-225-10-95);
817
+ --feel-background-color: transparent;
800
818
  --feel-active-color: var(--color-blue-205-100-45);
801
819
  --feel-inactive-color: var(--color-grey-225-10-35);
802
- --feel-hover-background-color: var(--color-grey-225-10-90);
803
- --feel-active-background-color: var(--color-grey-225-10-95);
820
+ --feel-hover-color: var(--color-grey-225-10-15);
821
+ --feel-hover-background-color: var(--color-grey-225-10-97);
822
+ --feel-active-background-color: transparent;
823
+ --feel-required-color: var(--color-grey-225-10-55);
804
824
  --feel-indicator-background-color: var(--color-grey-225-10-90);
805
825
  --text-size-base: 14px;
806
826
  --text-size-small: 13px;
@@ -1672,7 +1692,7 @@ textarea.bio-properties-panel-input {
1672
1692
 
1673
1693
  .bio-properties-panel-feel-icon {
1674
1694
  display: inline-flex;
1675
- height: 22px;
1695
+ height: 18px;
1676
1696
  width: 22px;
1677
1697
  vertical-align: text-bottom;
1678
1698
  padding: 0;
@@ -1698,6 +1718,10 @@ textarea.bio-properties-panel-input {
1698
1718
  background: var(--feel-hover-background-color);
1699
1719
  }
1700
1720
 
1721
+ .bio-properties-panel-feel-icon:hover svg * {
1722
+ fill: var(--feel-hover-color);
1723
+ }
1724
+
1701
1725
  .bio-properties-panel-feel-icon.active {
1702
1726
  background: var(--feel-active-background-color);
1703
1727
  }
@@ -1715,7 +1739,7 @@ textarea.bio-properties-panel-input {
1715
1739
  }
1716
1740
 
1717
1741
  .bio-properties-panel-feel-icon.required.active svg * {
1718
- fill: var(--feel-inactive-color);
1742
+ fill: var(--feel-required-color);
1719
1743
  }
1720
1744
 
1721
1745
  .bio-properties-panel-feel-editor-container {