@bpmn-io/form-js-editor 0.13.1 → 0.14.1

package/dist/assets/form-js-editor-base.css

@@ -101,6 +101,7 @@
 .fjs-editor-container .fjs-input:disabled,
 .fjs-editor-container .fjs-textarea:disabled,
 .fjs-editor-container .fjs-taglist-input:disabled,
+.fjs-editor-container .fjs-button:disabled,
 .fjs-editor-container .fjs-select:disabled {
   pointer-events: none;
 }
@@ -118,24 +119,29 @@
   display: flex;
   width: 100%;
   padding: 3px 0px;
+  position: relative;
 }
 
 .fjs-editor-container .fjs-row-dragger {
-  visibility: hidden;
   z-index: 2;
-  position: relative;
-  margin-left: -12px;
-  margin-top: auto;
-  margin-bottom: auto;
+  position: absolute;
+  top: 25%;
+  height: 50%;
+  left: -33px;
+  width: 23px;
+  padding-right: 7px;
   cursor: grab;
-  width: 32px;
-  height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger {
+.fjs-editor-container .fjs-row-dragger svg {
+  visibility: hidden;
+}
+
+.fjs-editor-container .fjs-row-dragger:hover svg,
+.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger svg {
   visibility: visible;
 }
 
@@ -404,11 +410,8 @@
 /* row drop preview */
 .fjs-children > .gu-transit {
   height: 28px !important;
-  margin-left: 28px !important;
-  margin-right: -8px !important;
+  width: 100% !important;
   flex: unset !important;
-  width: unset !important;
-  max-width: unset !important;
 }
 
 /* error drop preview */

package/dist/assets/form-js-editor.css

@@ -99,6 +99,7 @@
 .fjs-editor-container .fjs-input:disabled,
 .fjs-editor-container .fjs-textarea:disabled,
 .fjs-editor-container .fjs-taglist-input:disabled,
+.fjs-editor-container .fjs-button:disabled,
 .fjs-editor-container .fjs-select:disabled {
   pointer-events: none;
 }
@@ -116,24 +117,29 @@
   display: flex;
   width: 100%;
   padding: 3px 0px;
+  position: relative;
 }
 
 .fjs-editor-container .fjs-row-dragger {
-  visibility: hidden;
   z-index: 2;
-  position: relative;
-  margin-left: -12px;
-  margin-top: auto;
-  margin-bottom: auto;
+  position: absolute;
+  top: 25%;
+  height: 50%;
+  left: -33px;
+  width: 23px;
+  padding-right: 7px;
   cursor: grab;
-  width: 32px;
-  height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger {
+.fjs-editor-container .fjs-row-dragger svg {
+  visibility: hidden;
+}
+
+.fjs-editor-container .fjs-row-dragger:hover svg,
+.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger svg {
   visibility: visible;
 }
 
@@ -401,11 +407,8 @@
 /* row drop preview */
 .fjs-children > .gu-transit {
   height: 28px !important;
-  margin-left: 28px !important;
-  margin-right: -8px !important;
+  width: 100% !important;
   flex: unset !important;
-  width: unset !important;
-  max-width: unset !important;
 }
 
 /* error drop preview */

package/dist/index.cjs

@@ -7514,7 +7514,7 @@ function Label(props) {
     id,
     label: 'Label',
     setValue,
-    validate: validateFactory(getValue())
+    validate: validateFactory(getValue(), entry => entry.label)
   });
 }
 function Value$1(props) {
@@ -7540,7 +7540,7 @@ function Value$1(props) {
     id,
     label: 'Value',
     setValue,
-    validate: validateFactory(getValue())
+    validate: validateFactory(getValue(), entry => entry.value)
   });
 }
 
@@ -7782,13 +7782,13 @@ function StaticValuesSourceEntry(props) {
   const addEntry = e => {
     e.stopPropagation();
     const index = values.length + 1;
-    const entry = getIndexedEntry(index);
+    const entry = getIndexedEntry(index, values);
     editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
     editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], minDash.without(values, entry));
   };
-  const validateFactory = key => {
+  const validateFactory = (key, getValue) => {
     return value => {
       if (value === key) {
         return;
@@ -7796,7 +7796,7 @@ function StaticValuesSourceEntry(props) {
       if (minDash.isUndefined(value) || !value.length) {
         return 'Must not be empty.';
       }
-      const isValueAssigned = values.find(entry => entry.value === value);
+      const isValueAssigned = values.find(entry => getValue(entry) === value);
       if (isValueAssigned) {
         return 'Must be unique.';
       }
@@ -7827,17 +7827,23 @@ function StaticValuesSourceEntry(props) {
 
 // helper
 
-function getIndexedEntry(index) {
+function getIndexedEntry(index, values) {
   const entry = {
     label: 'Value',
     value: 'value'
   };
+  while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
+    index++;
+  }
   if (index > 1) {
     entry.label += ` ${index}`;
     entry.value += `${index}`;
   }
   return entry;
 }
+function labelOrValueIsAlreadyAssignedForIndex(index, values) {
+  return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
+}
 
 function AdornerEntry(props) {
   const {
@@ -8066,7 +8072,7 @@ function ValidationGroup(field, editField) {
   } = field;
   const validate = minDash.get(field, ['validate'], {});
   const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate.validationType);
-  if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
+  if (!INPUTS.includes(type)) {
     return null;
   }
   const onChange = key => {
@@ -8338,12 +8344,13 @@ function CustomValuesGroup(field, editField) {
   }
   const addEntry = event => {
     event.stopPropagation();
-    const index = Object.keys(properties).length + 1;
-    const key = `key${index}`,
-      value = 'value';
+    let index = Object.keys(properties).length + 1;
+    while (`key${index}` in properties) {
+      index++;
+    }
     editField(field, ['properties'], {
       ...properties,
-      [key]: value
+      [`key${index}`]: 'value'
     });
   };
   const validateFactory = key => {