@bpmn-io/form-js-editor 1.8.3 → 1.8.5

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 (10) hide show
  1. package/README.md +145 -152
  2. package/dist/assets/form-js-editor-base.css +31 -93
  3. package/dist/assets/form-js-editor.css +20 -80
  4. package/dist/index.cjs +67 -63
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +67 -63
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/features/properties-panel/Util.d.ts +6 -6
  9. package/dist/types/types.d.ts +27 -29
  10. package/package.json +3 -3
package/README.md CHANGED
@@ -1,152 +1,145 @@
1
- # @bpmn-io/form-js-editor
2
-
3
- An editor to create forms that can be displayed with the [form-js viewer](../form-js-viewer).
4
-
5
-
6
- ## Installation
7
-
8
- ```
9
- npm install @bpmn-io/form-js-editor
10
- ```
11
-
12
-
13
- ## Usage
14
-
15
- ```javascript
16
- import { FormEditor } from '@bpmn-io/form-js-editor';
17
-
18
- const schema = {
19
- components: [
20
- {
21
- key: 'creditor',
22
- label: 'Creditor',
23
- type: 'textfield',
24
- validate: {
25
- required: true
26
- }
27
- }
28
- ]
29
- };
30
-
31
- const formEditor = new FormEditor({
32
- container: document.querySelector('#form-editor')
33
- });
34
-
35
- await formEditor.importSchema(schema);
36
- ```
37
-
38
- Check out [a full example](https://github.com/bpmn-io/form-js-examples).
39
-
40
-
41
- ## Styling
42
-
43
- For proper styling include the necessary stylesheets, and font used:
44
-
45
- ```html
46
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
47
-
48
- <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css">
49
- <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css">
50
- ```
51
-
52
-
53
- ## API
54
-
55
- ### `FormEditor`
56
-
57
- Create a new form editor with options `{ container?: HTMLElement }`.
58
-
59
- ```javascript
60
- import { FormEditor } from '@bpmn-io/form-js-editor';
61
-
62
- const formEditor = new FormEditor({
63
- container: document.querySelector('#form-editor')
64
- });
65
- ```
66
-
67
-
68
- ### `FormEditor#importSchema(schema: Schema) => Promise<Result, Error>`
69
-
70
- Display and edit a form represented via a form schema.
71
-
72
- ```javascript
73
- try {
74
- await formEditor.importSchema(schema);
75
- } catch (err) {
76
- console.log('importing form failed', err);
77
- }
78
- ```
79
-
80
-
81
- ### `FormEditor#saveSchema() => Schema`
82
-
83
- Export the form schema.
84
-
85
- ```javascript
86
- const schema = formEditor.saveSchema(schema);
87
-
88
- console.log('exported schema', schema);
89
- ```
90
-
91
-
92
- ### `FormEditor#attachTo(parentNode: HTMLElement) => void`
93
-
94
-
95
- Attach the form editor to a parent node.
96
-
97
-
98
- ### `FormEditor#detach() => void`
99
-
100
-
101
- Detach the form editor from its parent node.
102
-
103
-
104
- ### `FormEditor#on(event, fn) => void`
105
-
106
- Subscribe to an [event](#events).
107
-
108
-
109
- ### `FormEditor#destroy() => void`
110
-
111
- Remove form from editor the document.
112
-
113
- ## Events
114
-
115
- ### `selection.changed :: { selection }`
116
-
117
- ### Properties panel events
118
- - `propertiesPanel.focusin`
119
- - `propertiesPanel.focusout`
120
- - `propertiesPanel.showEntry :: { id }`
121
- - `propertiesPanel.updated :: { formField }`
122
-
123
- ### Form lifecycle events
124
- - `detach`
125
- - `attach`
126
- - `rendered`
127
- - `form.init`
128
- - `form.clear`
129
- - `form.destroy`
130
- - `diagram.clear`
131
- - `diagram.destroy`
132
- - `dragula.created`
133
- - `dragula.destroyed`
134
- - `editorActions.init :: { editorActions }`
135
-
136
- ### Drag events
137
- - `drag.start :: { element, source }`
138
- - `drag.end :: { element }`
139
- - `drag.drop :: { element, target, source, sibling }`
140
- - `drag.hover :: { element, container, source }`
141
- - `drag.out :: { element, container, source }`
142
- - `drag.cancel :: { element, container, source }`
143
-
144
- ### Form field events
145
- - `formField.add :: { formField }`
146
- - `formField.remove :: { formField }`
147
- - `formField.updateId :: { formField, newId }`
148
-
149
-
150
- ## License
151
-
152
- Use under the terms of the [bpmn.io license](http://bpmn.io/license).
1
+ # @bpmn-io/form-js-editor
2
+
3
+ An editor to create forms that can be displayed with the [form-js viewer](../form-js-viewer).
4
+
5
+ ## Installation
6
+
7
+ ```
8
+ npm install @bpmn-io/form-js-editor
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```javascript
14
+ import { FormEditor } from '@bpmn-io/form-js-editor';
15
+
16
+ const schema = {
17
+ components: [
18
+ {
19
+ key: 'creditor',
20
+ label: 'Creditor',
21
+ type: 'textfield',
22
+ validate: {
23
+ required: true,
24
+ },
25
+ },
26
+ ],
27
+ };
28
+
29
+ const formEditor = new FormEditor({
30
+ container: document.querySelector('#form-editor'),
31
+ });
32
+
33
+ await formEditor.importSchema(schema);
34
+ ```
35
+
36
+ Check out [a full example](https://github.com/bpmn-io/form-js-examples).
37
+
38
+ ## Styling
39
+
40
+ For proper styling include the necessary stylesheets, and font used:
41
+
42
+ ```html
43
+ <link
44
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap"
45
+ rel="stylesheet" />
46
+
47
+ <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css" />
48
+ <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css" />
49
+ ```
50
+
51
+ ## API
52
+
53
+ ### `FormEditor`
54
+
55
+ Create a new form editor with options `{ container?: HTMLElement }`.
56
+
57
+ ```javascript
58
+ import { FormEditor } from '@bpmn-io/form-js-editor';
59
+
60
+ const formEditor = new FormEditor({
61
+ container: document.querySelector('#form-editor'),
62
+ });
63
+ ```
64
+
65
+ ### `FormEditor#importSchema(schema: Schema) => Promise<Result, Error>`
66
+
67
+ Display and edit a form represented via a form schema.
68
+
69
+ ```javascript
70
+ try {
71
+ await formEditor.importSchema(schema);
72
+ } catch (err) {
73
+ console.log('importing form failed', err);
74
+ }
75
+ ```
76
+
77
+ ### `FormEditor#saveSchema() => Schema`
78
+
79
+ Export the form schema.
80
+
81
+ ```javascript
82
+ const schema = formEditor.saveSchema(schema);
83
+
84
+ console.log('exported schema', schema);
85
+ ```
86
+
87
+ ### `FormEditor#attachTo(parentNode: HTMLElement) => void`
88
+
89
+ Attach the form editor to a parent node.
90
+
91
+ ### `FormEditor#detach() => void`
92
+
93
+ Detach the form editor from its parent node.
94
+
95
+ ### `FormEditor#on(event, fn) => void`
96
+
97
+ Subscribe to an [event](#events).
98
+
99
+ ### `FormEditor#destroy() => void`
100
+
101
+ Remove form from editor the document.
102
+
103
+ ## Events
104
+
105
+ ### `selection.changed :: { selection }`
106
+
107
+ ### Properties panel events
108
+
109
+ - `propertiesPanel.focusin`
110
+ - `propertiesPanel.focusout`
111
+ - `propertiesPanel.showEntry :: { id }`
112
+ - `propertiesPanel.updated :: { formField }`
113
+
114
+ ### Form lifecycle events
115
+
116
+ - `detach`
117
+ - `attach`
118
+ - `rendered`
119
+ - `form.init`
120
+ - `form.clear`
121
+ - `form.destroy`
122
+ - `diagram.clear`
123
+ - `diagram.destroy`
124
+ - `dragula.created`
125
+ - `dragula.destroyed`
126
+ - `editorActions.init :: { editorActions }`
127
+
128
+ ### Drag events
129
+
130
+ - `drag.start :: { element, source }`
131
+ - `drag.end :: { element }`
132
+ - `drag.drop :: { element, target, source, sibling }`
133
+ - `drag.hover :: { element, container, source }`
134
+ - `drag.out :: { element, container, source }`
135
+ - `drag.cancel :: { element, container, source }`
136
+
137
+ ### Form field events
138
+
139
+ - `formField.add :: { formField }`
140
+ - `formField.remove :: { formField }`
141
+ - `formField.updateId :: { formField, newId }`
142
+
143
+ ## License
144
+
145
+ Use under the terms of the [bpmn.io license](http://bpmn.io/license).
package/dist/assets/form-js-editor-base.css CHANGED
@@ -13,10 +13,7 @@
13
13
  --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
14
14
  --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
15
15
  --color-dragula-mirror-background: var(--cds-background, var(--color-white));
16
- --color-dragula-mirror-border: var(
17
- --cds-border-strong,
18
- var(--cds-border-strong-01, var(--color-grey-225-10-90))
19
- );
16
+ --color-dragula-mirror-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-90)));
20
17
  --color-dragula-error-background: var(--color-red-360-100-92);
21
18
  --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
22
19
  }
@@ -24,43 +21,22 @@
24
21
  .fjs-palette-container {
25
22
  --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
26
23
  --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
27
- --color-palette-container-border: var(
28
- --cds-border-strong,
29
- var(--cds-border-strong-01, var(--color-grey-225-10-80))
30
- );
24
+ --color-palette-container-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-80)));
31
25
  --color-palette-header: var(--cds-text-primary, var(--color-text));
32
26
  --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
33
- --color-palette-header-border: var(
34
- --cds-border-strong,
35
- var(--cds-border-strong-01, var(--color-grey-225-10-85))
36
- );
27
+ --color-palette-header-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
37
28
  --color-palette-search: var(--color-palette-text);
38
29
  --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
39
30
  --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
40
- --color-palette-search-background: var(
41
- --cds-field,
42
- var(--cds-field-01, var(--color-white))
43
- );
44
- --color-palette-search-border: var(
45
- --cds-border-strong,
46
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
47
- );
48
- --color-palette-search-focus-background: var(
49
- --cds-field,
50
- var(--cds-field-01, var(--color-blue-205-100-95))
51
- );
31
+ --color-palette-search-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
32
+ --color-palette-search-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
33
+ --color-palette-search-focus-background: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
52
34
  --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
53
35
  --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
54
36
  --color-palette-group-title: var(--color-palette-text);
55
37
  --color-palette-field: var(--color-palette-text);
56
- --color-palette-field-background: var(
57
- --cds-layer,
58
- var(--cds-layer-01, var(--color-white))
59
- );
60
- --color-palette-field-border: var(
61
- --cds-border-subtle,
62
- var(--cds-border-subtle-01, var(--color-grey-225-10-93))
63
- );
38
+ --color-palette-field-background: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
39
+ --color-palette-field-border: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-93)));
64
40
  --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
65
41
  --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
66
42
  --color-palette-field-hover-border: var(
@@ -89,39 +65,21 @@
89
65
  --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
90
66
 
91
67
  --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
92
- --description-code-background-color: var(
93
- --cds-layer,
94
- var(--cds-layer-01, var(--color-grey-225-10-97))
95
- );
96
- --description-code-border-color: var(
97
- --cds-border-strong,
98
- var(--cds-border-strong-01, var(--color-grey-225-10-85))
99
- );
68
+ --description-code-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-97)));
69
+ --description-code-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
100
70
  --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
101
71
 
102
72
  --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
103
- --placeholder-background-color: var(
104
- --cds-layer,
105
- var(--cds-layer-01, var(--color-grey-225-10-95))
106
- );
73
+ --placeholder-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
107
74
 
108
- --header-background-color: var(
109
- --cds-layer,
110
- var(--cds-layer-01, var(--color-grey-225-10-95))
111
- );
75
+ --header-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
112
76
  --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
113
77
  --header-bottom-border-color: var(--color-grey-225-10-75);
114
78
 
115
79
  --group-background-color: var(--cds-background, var(--color-white));
116
- --group-bottom-border-color: var(
117
- --cds-border-strong,
118
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
- );
80
+ --group-bottom-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
120
81
 
121
- --sticky-group-background-color: var(
122
- --cds-layer,
123
- var(--cds-layer-01, var(--color-grey-225-10-95))
124
- );
82
+ --sticky-group-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
125
83
  --sticky-group-bottom-border-color: var(
126
84
  --cds-border-strong,
127
85
  var(--cds-border-strong-01, var(--color-grey-225-10-75))
@@ -136,43 +94,25 @@
136
94
  --remove-entry-hover-background-color: var(--color-red-360-100-92);
137
95
 
138
96
  --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
139
- --arrow-hover-background-color: var(
140
- --cds-layer,
141
- var(--cds-layer-01, var(--color-grey-225-10-95))
142
- );
97
+ --arrow-hover-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
143
98
 
144
99
  --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
145
100
 
146
101
  --list-badge-color: var(--cds-text-inverse, var(--color-white));
147
102
  --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
148
103
 
149
- --input-background-color: var(
150
- --cds-field,
151
- var(--cds-field-01, var(--color-grey-225-10-97))
152
- );
153
- --input-border-color: var(
154
- --cds-border-strong,
155
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
156
- );
104
+ --input-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
105
+ --input-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
157
106
 
158
- --input-focus-background-color: var(
159
- --cds-field,
160
- var(--cds-field-01, var(--color-blue-205-100-95))
161
- );
107
+ --input-focus-background-color: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
162
108
  --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
163
109
 
164
- --input-error-background-color: var(
165
- --cds-field,
166
- var(--cds-field-01, var(--color-red-360-100-97))
167
- );
110
+ --input-error-background-color: var(--cds-field, var(--cds-field-01, var(--color-red-360-100-97)));
168
111
  --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
169
- --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
112
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
170
113
 
171
114
  --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
172
- --input-disabled-background-color: var(
173
- --cds-field,
174
- var(--cds-field-01, var(--color-grey-225-10-97))
175
- );
115
+ --input-disabled-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
176
116
  --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
177
117
 
178
118
  --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
@@ -280,13 +220,13 @@
280
220
  border-style: solid;
281
221
  }
282
222
 
283
- .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
284
- .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="dynamiclist"] {
223
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type='group'],
224
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type='dynamiclist'] {
285
225
  margin-left: -6px;
286
226
  }
287
227
 
288
- .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"],
289
- .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="dynamiclist"] {
228
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type='group'],
229
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type='dynamiclist'] {
290
230
  margin-right: -6px;
291
231
  }
292
232
 
@@ -473,7 +413,7 @@
473
413
 
474
414
  /* do not show resize handles on small screens */
475
415
  @media (max-width: 66rem) {
476
- .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
416
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
477
417
  display: none !important;
478
418
  }
479
419
  }
@@ -505,7 +445,6 @@
505
445
  cursor: not-allowed;
506
446
  }
507
447
 
508
-
509
448
  /**
510
449
  * Context Pad
511
450
  */
@@ -568,7 +507,7 @@
568
507
  user-select: none;
569
508
  }
570
509
 
571
- .fjs-palette-container .fjs-palette-footer {
510
+ .fjs-palette-container .fjs-palette-footer {
572
511
  display: flex;
573
512
  flex-direction: column;
574
513
  align-items: center;
@@ -677,7 +616,7 @@
677
616
  border: none;
678
617
  font-family: inherit;
679
618
  user-select: none;
680
- color: var( --color-palette-field);
619
+ color: var(--color-palette-field);
681
620
  background-color: var(--color-palette-field-background);
682
621
  outline: solid 1px var(--color-palette-field-border);
683
622
  outline-offset: 0px;
@@ -768,7 +707,7 @@
768
707
  }
769
708
 
770
709
  .fjs-properties-container .fjs-properties-panel .fjs-properties-panel-detached-description {
771
- margin: 0px 12px 6px
710
+ margin: 0px 12px 6px;
772
711
  }
773
712
 
774
713
  .fjs-properties-container .fjs-properties-panel .cm-editor {
@@ -793,10 +732,9 @@
793
732
 
794
733
  .fjs-editor-container .fjs-form-field-spacer {
795
734
  min-height: 30px;
796
- background: repeating-linear-gradient( 45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
735
+ background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
797
736
  }
798
737
 
799
-
800
738
  .fjs-editor-container .fjs-form-field-html,
801
739
  .fjs-editor-container .fjs-form-field-text {
802
740
  min-height: 30px;
@@ -878,7 +816,7 @@
878
816
  margin: 0 auto;
879
817
  }
880
818
 
881
- .fjs-field-preview .fjs-field-preview-text {
819
+ .fjs-field-preview .fjs-field-preview-text {
882
820
  text-align: center;
883
821
  }
884
822