@bpmn-io/form-js-viewer 0.9.9 → 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.
- package/README.md +6 -0
- package/dist/assets/form-js.css +13 -5
- package/dist/index.cjs +300 -418
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +299 -418
- package/dist/index.es.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/render/components/Util.d.ts +4 -1
- package/dist/types/render/components/form-fields/Textarea.d.ts +13 -0
- package/dist/types/render/components/index.d.ts +2 -1
- 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-
|
|
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
|
-
|
|
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
|
|
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-
|
|
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 {
|