@bpmn-io/form-js-viewer 0.9.8 → 0.10.0-alpha.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 (48) hide show
  1. package/README.md +6 -0
  2. package/dist/assets/form-js.css +13 -5
  3. package/dist/index.cjs +318 -427
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +317 -427
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/Form.d.ts +140 -136
  8. package/dist/types/core/EventBus.d.ts +1 -1
  9. package/dist/types/core/FormFieldRegistry.d.ts +17 -17
  10. package/dist/types/core/Validator.d.ts +7 -7
  11. package/dist/types/core/index.d.ts +16 -16
  12. package/dist/types/import/Importer.d.ts +43 -43
  13. package/dist/types/import/index.d.ts +5 -5
  14. package/dist/types/index.d.ts +18 -18
  15. package/dist/types/render/FormFields.d.ts +5 -5
  16. package/dist/types/render/Renderer.d.ts +23 -23
  17. package/dist/types/render/components/Description.d.ts +1 -1
  18. package/dist/types/render/components/Errors.d.ts +1 -1
  19. package/dist/types/render/components/FormComponent.d.ts +1 -1
  20. package/dist/types/render/components/FormField.d.ts +1 -1
  21. package/dist/types/render/components/Label.d.ts +1 -1
  22. package/dist/types/render/components/PoweredBy.d.ts +1 -1
  23. package/dist/types/render/components/Sanitizer.d.ts +7 -7
  24. package/dist/types/render/components/Util.d.ts +9 -6
  25. package/dist/types/render/components/form-fields/Button.d.ts +11 -11
  26. package/dist/types/render/components/form-fields/Checkbox.d.ts +13 -13
  27. package/dist/types/render/components/form-fields/Checklist.d.ts +12 -12
  28. package/dist/types/render/components/form-fields/Default.d.ts +9 -9
  29. package/dist/types/render/components/form-fields/Number.d.ts +13 -13
  30. package/dist/types/render/components/form-fields/Radio.d.ts +12 -12
  31. package/dist/types/render/components/form-fields/Select.d.ts +12 -12
  32. package/dist/types/render/components/form-fields/Taglist.d.ts +12 -12
  33. package/dist/types/render/components/form-fields/Text.d.ts +10 -10
  34. package/dist/types/render/components/form-fields/Textarea.d.ts +13 -0
  35. package/dist/types/render/components/form-fields/Textfield.d.ts +13 -13
  36. package/dist/types/render/components/form-fields/parts/DropdownList.d.ts +1 -1
  37. package/dist/types/render/components/index.d.ts +14 -13
  38. package/dist/types/render/context/FormContext.d.ts +12 -12
  39. package/dist/types/render/context/FormRenderContext.d.ts +6 -6
  40. package/dist/types/render/context/index.d.ts +2 -2
  41. package/dist/types/render/hooks/useKeyDownAction.d.ts +1 -1
  42. package/dist/types/render/hooks/useService.d.ts +1 -1
  43. package/dist/types/render/hooks/useValuesAsync.d.ts +28 -28
  44. package/dist/types/render/index.d.ts +11 -11
  45. package/dist/types/util/form.d.ts +6 -6
  46. package/dist/types/util/index.d.ts +24 -24
  47. package/dist/types/util/injector.d.ts +2 -2
  48. package/package.json +2 -2
package/README.md CHANGED
@@ -38,9 +38,15 @@ const form = new Form({
38
38
 
39
39
  await form.importSchema(schema, data);
40
40
 
41
+ // add event listeners
41
42
  form.on('submit', event => {
42
43
  console.log('Form <submit>', event);
43
44
  });
45
+
46
+ // provide a priority to event listeners
47
+ form.on('changed', 500, event => {
48
+ console.log('Form <changed>', event);
49
+ });
44
50
  ```
45
51
 
46
52
  Check out [a full example](https://github.com/bpmn-io/form-js-examples).
package/dist/assets/form-js.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --color-grey-225-10-95: hsl(225, 10%, 95%);
13
13
  --color-grey-225-10-97: hsl(225, 10%, 97%);
14
14
 
15
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
15
16
  --color-blue-205-100-45: hsl(205, 100%, 45%);
16
17
  --color-blue-205-100-50: hsl(205, 100%, 50%);
17
18
  --color-blue-205-100-80: hsl(205, 100%, 80%);
@@ -36,8 +37,7 @@
36
37
  --color-borders: var(--color-grey-225-10-55);
37
38
  --color-borders-disabled: var(--color-grey-225-10-75);
38
39
  --color-warning: var(--color-red-360-100-45);
39
- --color-accent: var(--color-blue-205-100-45);
40
- --color-accent-dark: var(--color-blue-205-100-45);
40
+ --color-accent: var(--color-blue-205-100-40);
41
41
 
42
42
  --font-family: 'IBM Plex Sans', sans-serif;
43
43
 
@@ -135,6 +135,8 @@
135
135
  }
136
136
 
137
137
  .fjs-container .fjs-input[type='text'],
138
+ .fjs-container .fjs-input[type='email'],
139
+ .fjs-container .fjs-input[type='tel'],
138
140
  .fjs-container .fjs-input[type='number'],
139
141
  .fjs-container .fjs-button[type='submit'],
140
142
  .fjs-container .fjs-button[type='reset'],
@@ -150,7 +152,10 @@
150
152
  }
151
153
 
152
154
  .fjs-container .fjs-textarea {
153
- height: 90px;
155
+ resize: none;
156
+ overflow: hidden;
157
+ height: 75px;
158
+ font-size: 14px;
154
159
  }
155
160
 
156
161
  .fjs-container .fjs-radio {
@@ -186,6 +191,8 @@
186
191
  }
187
192
 
188
193
  .fjs-container .fjs-input[type='text']:focus,
194
+ .fjs-container .fjs-input[type='email']:focus,
195
+ .fjs-container .fjs-input[type='tel']:focus,
189
196
  .fjs-container .fjs-input[type='number']:focus,
190
197
  .fjs-container .fjs-button[type='submit']:focus,
191
198
  .fjs-container .fjs-button[type='reset']:focus,
@@ -195,7 +202,7 @@
195
202
  }
196
203
 
197
204
  .fjs-container .fjs-button[type='submit']:focus {
198
- border-color: var(--color-accent-dark);
205
+ border-color: var(--color-accent);
199
206
  }
200
207
 
201
208
  .fjs-container .fjs-input:disabled,
@@ -233,7 +240,7 @@
233
240
  }
234
241
 
235
242
  .fjs-container .fjs-form-field-text a {
236
- color: var(--color-blue-205-100-45);
243
+ color: var(--color-accent);
237
244
  }
238
245
 
239
246
  .fjs-container .fjs-taglist-anchor {
@@ -278,6 +285,7 @@
278
285
  text-align: center;
279
286
  line-height: 28px;
280
287
  background-color: var(--color-grey-225-10-80);
288
+ color: var(--color-black);
281
289
  }
282
290
 
283
291
  .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {