@bpmn-io/form-js-editor 1.0.0-alpha.9 → 1.1.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 (18) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +116 -116
  3. package/dist/assets/form-js-editor-base.css +758 -734
  4. package/dist/assets/form-js-editor.css +39 -9
  5. package/dist/assets/properties-panel.css +11 -6
  6. package/dist/index.cjs +1094 -735
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.es.js +1084 -743
  9. package/dist/index.es.js.map +1 -1
  10. package/dist/types/features/properties-panel/components/AutoFocusSelect.d.ts +1 -0
  11. package/dist/types/features/properties-panel/components/index.d.ts +1 -0
  12. package/dist/types/features/properties-panel/entries/SpacerEntry.d.ts +9 -0
  13. package/dist/types/features/properties-panel/entries/ValuesExpressionEntry.d.ts +10 -0
  14. package/dist/types/features/properties-panel/entries/ValuesSourceSelectEntry.d.ts +1 -1
  15. package/dist/types/features/properties-panel/entries/index.d.ts +2 -0
  16. package/dist/types/render/components/icons/index.d.ts +1 -1
  17. package/dist/types/types.d.ts +28 -28
  18. package/package.json +4 -4
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
 
@@ -256,6 +258,23 @@
256
258
  user-select: none;
257
259
  }
258
260
 
261
+ .fjs-editor-container .fjs-empty-editor {
262
+ display: flex;
263
+ align-items: center;
264
+ justify-content: center;
265
+ position: absolute;
266
+ top: 0;
267
+ left: 0;
268
+ width: 100%;
269
+ height: 100%;
270
+ }
271
+
272
+ .fjs-editor-container .fjs-empty-editor .fjs-empty-editor-card {
273
+ display: flex;
274
+ flex-direction: column;
275
+ padding: 20px;
276
+ }
277
+
259
278
  .fjs-editor-container .fjs-drop-container-horizontal {
260
279
  width: 100%;
261
280
  }
@@ -613,6 +632,11 @@
613
632
  margin-right: 2px;
614
633
  }
615
634
 
635
+ .fjs-editor-container .fjs-form-field-spacer {
636
+ min-height: 30px;
637
+ background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
638
+ }
639
+
616
640
  /**
617
641
  * Custom Dragula Styles
618
642
  */
@@ -812,11 +836,13 @@
812
836
  --dropdown-item-background-color: var(--color-white);
813
837
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
814
838
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
815
- --feel-background-color: var(--color-grey-225-10-95);
839
+ --feel-background-color: transparent;
816
840
  --feel-active-color: var(--color-blue-205-100-45);
817
841
  --feel-inactive-color: var(--color-grey-225-10-35);
818
- --feel-hover-background-color: var(--color-grey-225-10-90);
819
- --feel-active-background-color: var(--color-grey-225-10-95);
842
+ --feel-hover-color: var(--color-grey-225-10-15);
843
+ --feel-hover-background-color: var(--color-grey-225-10-97);
844
+ --feel-active-background-color: transparent;
845
+ --feel-required-color: var(--color-grey-225-10-55);
820
846
  --feel-indicator-background-color: var(--color-grey-225-10-90);
821
847
  --text-size-base: 14px;
822
848
  --text-size-small: 13px;
@@ -1688,7 +1714,7 @@ textarea.bio-properties-panel-input {
1688
1714
 
1689
1715
  .bio-properties-panel-feel-icon {
1690
1716
  display: inline-flex;
1691
- height: 22px;
1717
+ height: 18px;
1692
1718
  width: 22px;
1693
1719
  vertical-align: text-bottom;
1694
1720
  padding: 0;
@@ -1714,6 +1740,10 @@ textarea.bio-properties-panel-input {
1714
1740
  background: var(--feel-hover-background-color);
1715
1741
  }
1716
1742
 
1743
+ .bio-properties-panel-feel-icon:hover svg * {
1744
+ fill: var(--feel-hover-color);
1745
+ }
1746
+
1717
1747
  .bio-properties-panel-feel-icon.active {
1718
1748
  background: var(--feel-active-background-color);
1719
1749
  }
@@ -1731,7 +1761,7 @@ textarea.bio-properties-panel-input {
1731
1761
  }
1732
1762
 
1733
1763
  .bio-properties-panel-feel-icon.required.active svg * {
1734
- fill: var(--feel-inactive-color);
1764
+ fill: var(--feel-required-color);
1735
1765
  }
1736
1766
 
1737
1767
  .bio-properties-panel-feel-editor-container {
package/dist/assets/properties-panel.css CHANGED
@@ -99,11 +99,13 @@
99
99
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
100
100
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
101
101
 
102
- --feel-background-color: var(--color-grey-225-10-95);
102
+ --feel-background-color: transparent;
103
103
  --feel-active-color: var(--color-blue-205-100-45);
104
104
  --feel-inactive-color: var(--color-grey-225-10-35);
105
- --feel-hover-background-color: var(--color-grey-225-10-90);
106
- --feel-active-background-color: var(--color-grey-225-10-95);
105
+ --feel-hover-color: var(--color-grey-225-10-15);
106
+ --feel-hover-background-color: var(--color-grey-225-10-97);
107
+ --feel-active-background-color: transparent;
108
+ --feel-required-color: var(--color-grey-225-10-55);
107
109
 
108
110
  --feel-indicator-background-color: var(--color-grey-225-10-90);
109
111
 
@@ -990,7 +992,7 @@ textarea.bio-properties-panel-input {
990
992
 
991
993
  .bio-properties-panel-feel-icon {
992
994
  display: inline-flex;
993
- height: 22px;
995
+ height: 18px;
994
996
  width: 22px;
995
997
  vertical-align: text-bottom;
996
998
  padding: 0;
@@ -1005,7 +1007,6 @@ textarea.bio-properties-panel-input {
1005
1007
 
1006
1008
  .bio-properties-panel-feel-icon.optional {
1007
1009
  cursor: pointer;
1008
-
1009
1010
  background: var(--feel-background-color);
1010
1011
  }
1011
1012
 
@@ -1017,6 +1018,10 @@ textarea.bio-properties-panel-input {
1017
1018
  background: var(--feel-hover-background-color);
1018
1019
  }
1019
1020
 
1021
+ .bio-properties-panel-feel-icon:hover svg * {
1022
+ fill: var(--feel-hover-color);
1023
+ }
1024
+
1020
1025
  .bio-properties-panel-feel-icon.active {
1021
1026
  background: var(--feel-active-background-color);
1022
1027
  }
@@ -1034,7 +1039,7 @@ textarea.bio-properties-panel-input {
1034
1039
  }
1035
1040
 
1036
1041
  .bio-properties-panel-feel-icon.required.active svg * {
1037
- fill: var(--feel-inactive-color);
1042
+ fill: var(--feel-required-color);
1038
1043
  }
1039
1044
 
1040
1045
  .bio-properties-panel-feel-editor-container {