@bpmn-io/form-js-viewer 0.9.9 → 0.10.0-alpha.1

package/README.md

@@ -38,9 +38,15 @@ const form = new Form({
 
 await form.importSchema(schema, data);
 
+// add event listeners
 form.on('submit', event => {
   console.log('Form <submit>', event);
 });
+
+// provide a priority to event listeners
+form.on('changed', 500, event => {
+  console.log('Form <changed>', event);
+});
 ```
 
 Check out [a full example](https://github.com/bpmn-io/form-js-examples).

package/dist/assets/form-js.css

@@ -12,6 +12,7 @@
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
+  --color-blue-205-100-40: hsl(205, 100%, 40%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
   --color-blue-205-100-80: hsl(205, 100%, 80%);
@@ -36,8 +37,7 @@
   --color-borders: var(--color-grey-225-10-55);
   --color-borders-disabled: var(--color-grey-225-10-75);
   --color-warning: var(--color-red-360-100-45);
-  --color-accent: var(--color-blue-205-100-45);
-  --color-accent-dark: var(--color-blue-205-100-45);
+  --color-accent: var(--color-blue-205-100-40);
 
   --font-family: 'IBM Plex Sans', sans-serif;
 
@@ -135,6 +135,8 @@
 }
 
 .fjs-container .fjs-input[type='text'],
+.fjs-container .fjs-input[type='email'],
+.fjs-container .fjs-input[type='tel'],
 .fjs-container .fjs-input[type='number'],
 .fjs-container .fjs-button[type='submit'],
 .fjs-container .fjs-button[type='reset'],
@@ -150,7 +152,10 @@
 }
 
 .fjs-container .fjs-textarea {
-  height: 90px;
+  resize: none;
+  overflow: hidden;
+  height: 75px;
+  font-size: 14px;
 }
 
 .fjs-container .fjs-radio {
@@ -186,6 +191,8 @@
 }
 
 .fjs-container .fjs-input[type='text']:focus,
+.fjs-container .fjs-input[type='email']:focus,
+.fjs-container .fjs-input[type='tel']:focus,
 .fjs-container .fjs-input[type='number']:focus,
 .fjs-container .fjs-button[type='submit']:focus,
 .fjs-container .fjs-button[type='reset']:focus,
@@ -195,7 +202,7 @@
 }
 
 .fjs-container .fjs-button[type='submit']:focus {
-  border-color: var(--color-accent-dark);
+  border-color: var(--color-accent);
 }
 
 .fjs-container .fjs-input:disabled,
@@ -233,7 +240,7 @@
 }
 
 .fjs-container .fjs-form-field-text a {
-  color: var(--color-blue-205-100-45);
+  color: var(--color-accent);
 }
 
 .fjs-container .fjs-taglist-anchor {
@@ -267,6 +274,12 @@
   background-color: var(--color-grey-225-10-90);
 }
 
+.fjs-container .fjs-taglist .fjs-taglist-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
   padding: 2px 6px 2px 8px;
 }
@@ -278,20 +291,29 @@
   text-align: center;
   line-height: 28px;
   background-color: var(--color-grey-225-10-80);
+  border: none;
+  padding: 1px 0;
+  color: var(--color-black);
 }
 
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
   opacity: 0.6;
 }
 
-.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover {
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
   background-color: var(--color-grey-225-10-75);
 }
 
-.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg {
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
   opacity: 1;
 }
 
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
+  outline: none;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-input {
   border: none;
   background-color: transparent;
@@ -311,7 +333,8 @@
 .fjs-container .fjs-dropdownlist {
   position: absolute;
   user-select: none;
-  overflow-y: auto;
+  overflow-y: scroll;
+  max-height: 120px;
   scroll-behavior: smooth;
   width: 100%;
   border-radius: 3px;