@bpmn-io/form-js-editor 0.5.1 → 0.6.0

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

@@ -1,5 +1,46 @@
 .fjs-editor-container {
-  --color-blue-lighten-99: #fafcff;
+  --color-children-border: var(--color-grey-225-10-75);
+  --color-children-selected-border: var(--color-blue-205-100-50);
+  --color-children-selected-background: var(--color-blue-205-100-95);
+  --color-children-hover-border: var(--color-blue-205-100-50);
+  
+  --color-context-pad-item-background: var(--color-white);
+  --color-context-pad-item-fill: var(--color-grey-225-10-35);
+  --color-context-pad-item-hover-fill: var(--color-black);
+
+  --color-palette-container-background: var(--color-grey-225-10-97);
+  --color-palette-container-border: var(--color-grey-225-10-80);
+  --color-palette-header-color: var(--color-text);
+  --color-palette-header-background: var(--color-grey-225-10-95);
+  --color-palette-header-border: var(--color-grey-225-10-80);
+  --color-palette-field-border: var(--color-grey-225-10-80);
+  --color-palette-field-hover-background: var(--color-grey-225-10-95);
+
+  --color-properties-container-background: var(--color-grey-225-10-97);
+  --color-properties-container-border: var(--color-grey-225-10-80);
+  --color-properties-header-background: var(--color-grey-225-10-95);
+  --color-properties-header-border: var(--color-grey-225-10-80);
+  --color-properties-header-icon-fill: var(--color-grey-225-10-35);
+  --color-properties-group-background: var(--color-grey-225-10-95);
+  --color-properties-group-border: var(--color-grey-225-10-80);
+  --color-properties-group-button-fill: var(--color-grey-225-10-35);
+  --color-properties-group-button-hover-fill: var(--color-black);
+  --color-properties-entries-border: var(--color-grey-225-10-80);
+  --color-properties-collapsible-remove-fill: var(--color-grey-225-10-35);
+  --color-properties-collapsible-remove-hover-fill: var(--color-black);
+  --color-properties-description: var(--color-grey-225-10-15);
+  --color-properties-error: var(--color-warning);
+  --color-properties-input-background: var(--color-white);
+  --color-properties-input-border: var(--color-grey-225-10-75);
+  --color-properties-input-error-border: var(--color-warning);
+  --color-properties-input-error-hover-border: var(--color-warning);
+  --color-properties-input-focus-border: var(--color-blue-205-100-50);
+  --color-properties-placeholder: var(--color-grey-225-10-80);
+
+  --color-dragula-background: var(--color-blue-205-100-45);
+  --color-dragula-border: var(--color-blue-205-100-45);
+  --color-dragula-mirror-background: var(--color-white);
+  --color-dragula-mirror-border: var(--color-grey-225-10-80);
 }
 
 .fjs-editor-container {
@@ -41,7 +82,7 @@
 }
 
 .fjs-editor-container .fjs-children .fjs-children {
-  border: dashed 2px var(--color-silver-darken-80);
+  border: dashed 2px var(--color-children-border);
   border-radius: 3px;
 }
 
@@ -75,12 +116,12 @@
 }
 
 .fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
-  border-color: var(--color-blue-lighten-75);
-  background-color: var(--color-blue-lighten-93);
+  border-color: var(--color-children-selected-border);
+  background-color: var(--color-children-selected-background);
 }
 
 .fjs-editor-container .fjs-children > .fjs-element:hover {
-  border-color: var(--color-blue-lighten-82) !important;
+  border-color: var(--color-children-hover-border) !important;
 }
 
 .fjs-editor-container .fjs-input:disabled,
@@ -101,18 +142,18 @@
 .fjs-editor-container .fjs-context-pad-item {
   border: none;
   border-radius: 3px;
-  background-color: var(--color-white);
+  background-color: var(--color-context-pad-item-background);
   padding: 0;
   width: 24px;
   height: 24px;
-  fill: var(--color-grey-base-40);
+  fill: var(--color-context-pad-item-fill);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .fjs-editor-container .fjs-context-pad-item:hover {
-  fill: var(--color-black);
+  fill: var(--color-context-pad-item-hover-fill);
 }
 
 /**
@@ -120,16 +161,17 @@
  */
 .fjs-editor-container .fjs-palette-container {
   width: 200px;
-  background-color: var(--color-silver-base-97);
-  border-right: solid 1px var(--color-silver-darken-80);
+  background-color: var(--color-palette-container-background);
+  border-right: solid 1px var(--color-palette-container-border);
 }
 
 .fjs-editor-container .fjs-palette-header {
   font-size: 12px;
   font-weight: bold;
+  color: var(--color-palette-header-color);
   padding: 10px;
-  border-bottom: solid 1px var(--color-silver-darken-80);
-  background-color: var(--color-silver-darken-94);
+  border-bottom: solid 1px var(--color-palette-header-border);
+  background-color: var(--color-palette-header-background);
 }
 
 .fjs-editor-container .fjs-palette-field {
@@ -139,8 +181,9 @@
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
-  border-bottom: solid 1px var(--color-silver-darken-80);
+  border-bottom: solid 1px var(--color-palette-field-border);
   font-size: 14px;
+  color: var(--color-text);
 }
 
 .fjs-editor-container .fjs-palette-field-icon {
@@ -148,7 +191,7 @@
 }
 
 .fjs-editor-container .fjs-palette-field:hover {
-  background-color: var(--color-silver-darken-94);
+  background-color: var(--color-palette-field-hover-background);
   cursor: default;
 }
 
@@ -157,9 +200,10 @@
  */
 .fjs-editor-container .fjs-properties-container {
   width: 300px;
-  background-color: var(--color-silver-base-97);
-  border-left: solid 1px var(--color-silver-darken-80);
+  background-color: var(--color-properties-container-background);
+  border-left: solid 1px var(--color-properties-container-border);
   height: 100%;
+  color: var(--color-text);
 }
 
 .fjs-editor-container .fjs-properties-panel * {
@@ -172,8 +216,8 @@
   align-items: center;
   font-size: 14px;
   padding: 10px;
-  background-color: var(--color-silver-darken-94);
-  border-bottom: solid 1px var(--color-silver-darken-80);
+  background-color: var(--color-properties-header-background);
+  border-bottom: solid 1px var(--color-properties-header-border);
 }
 
 .fjs-editor-container .fjs-properties-panel-header-icon {
@@ -181,6 +225,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  fill: var(--color-properties-header-icon-fill);
 }
 
 .fjs-editor-container .fjs-properties-panel-header-type {
@@ -195,8 +240,8 @@
   align-items: center;
   font-size: 14px;
   padding: 10px;
-  border-bottom: solid 1px var(--color-silver-darken-80);
-  background-color: var(--color-silver-darken-94);
+  border-bottom: solid 1px var(--color-properties-group-border);
+  background-color: var(--color-properties-group-background);
 }
 
 .fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button {
@@ -207,7 +252,7 @@
   height: 20px;
   margin-right: 10px;
   padding: 0;
-  fill: var(--color-grey-base-40);
+  fill: var(--color-properties-group-button-fill);
   border: none;
   background: none;
 }
@@ -217,11 +262,11 @@
 }
 
 .fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button:hover {
-  fill: var(--color-black);
+  fill: var(--color-properties-group-button-hover-fill);
 }
 
 .fjs-editor-container .fjs-properties-panel-group-entries {
-  border-bottom: solid 1px var(--color-silver-darken-80);
+  border-bottom: solid 1px var(--color-properties-entries-border);
 }
 
 .fjs-editor-container .fjs-properties-panel-group:last-child .fjs-properties-panel-group-entries {
@@ -266,11 +311,11 @@
   height: 22px;
   width: 22px;
   padding: 0;
-  fill: var(--color-grey-base-40);
+  fill: var(--color-properties-collapsible-remove-fill);
 }
 
 .fjs-editor-container .fjs-properties-panel-collapsible-entry-header-remove-entry:hover {
-  fill: var(--color-black);
+  fill: var(--color-properties-collapsible-remove-hover-fill);
 }
 
 .fjs-editor-container .fjs-properties-panel-collapsible-entry-entries {
@@ -294,11 +339,11 @@
 
 .fjs-editor-container .fjs-properties-panel-label,
 .fjs-editor-container .fjs-properties-panel-description {
-  color: var(--color-grey-base-40);
+  color: var(--color-properties-description);
 }
 
 .fjs-editor-container .fjs-properties-panel-error {
-  color: var(--color-warning);
+  color: var(--color-properties-error);
 }
 
 .fjs-editor-container .fjs-properties-panel-description,
@@ -307,11 +352,12 @@
 }
 
 .fjs-editor-container .fjs-properties-panel-input {
-  background-color: var(--color-white);
-  border: solid 1px var(--color-silver-darken-80);
+  background-color: var(--color-properties-input-background);
+  border: solid 1px var(--color-properties-input-border);
   border-radius: 3px;
   padding: 4px 8px;
   font-size: 14px;
+  font-family: inherit;
 }
 
 .fjs-editor-container .fjs-properties-panel-input[type=number],
@@ -323,29 +369,29 @@
 }
 
 .fjs-editor-container .fjs-properties-panel-input.fjs-has-error {
-  border-color: var(--color-warning);
+  border-color: var(--color-properties-input-error-border);
 }
 
 .fjs-editor-container .fjs-properties-panel-input.fjs-has-error:focus {
-  border-color: var(--color-warning);
-  box-shadow: 0 0 0 4px var(--color-red-lighten-85), 0 0 0 1px var(--color-silver-darken-80) inset;
+  border-color: var(--color-properties-input-error-hover-border);
+  box-shadow: 0 0 0 4px var(--color-red-360-100-92), 0 0 0 1px var(--color-grey-225-10-75) inset;
 }
 
 .fjs-editor-container .fjs-properties-panel-input:focus {
   outline: none;
-  box-shadow: 0 0 0 4px var(--color-blue-lighten-82), 0 0 0 1px var(--color-silver-darken-80) inset;
-  border: solid 1px var(--color-blue-darken-55);
+  box-shadow: 0 0 0 4px var(--color-blue-205-100-80), 0 0 0 1px var(--color-grey-225-10-75) inset;
+  border: solid 1px var(--color-properties-input-focus-border);
 }
 
 .fjs-editor-container .fjs-properties-panel-placeholder {
   padding: 10px;
-  color: var(--color-silver-darken-80);
+  color: var(--color-properties-placeholder);
   font-size: 14px;
   text-align: center;
 }
 
 .fjs-editor-container textarea.fjs-properties-panel-input {
-  font-family: sans-serif;
+  font-family: inherit;
   resize: vertical;
 }
 
@@ -353,8 +399,8 @@
  * Custom Dragula Styles
  */
 .gu-transit {
-  background: var(--color-blue-darken-62) !important;
-  border: solid 2px var(--color-blue-darken-62) !important;
+  background: var(--color-dragula-background) !important;
+  border: solid 2px var(--color-dragula-border) !important;
   border-radius: 3px !important;
   filter: none !important;
   height: 0 !important;
@@ -367,8 +413,8 @@
 }
 
 .gu-mirror {
-  background-color: white !important;
-  border: solid 1px var(--color-silver-darken-80) !important;
+  background-color: var(--color-dragula-mirror-background) !important;
+  border: solid 1px var(--color-dragula-mirror-border) !important;
   border-radius: 3px !important;
   box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
   display: flex !important;

package/dist/index.cjs

@@ -1016,7 +1016,7 @@ function CheckboxInput(props) {
   };
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-checkbox",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1071,7 +1071,7 @@ function NumberInput(props) {
     }
   }, [_onInput]);
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-number",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1104,7 +1104,7 @@ function Select(props) {
   };
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-select",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1138,7 +1138,7 @@ function Textarea(props) {
     _onInput(value.length ? value : undefined);
   }, [_onInput]);
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-textarea",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1190,7 +1190,7 @@ function TextInput(props) {
   }
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-text",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1272,6 +1272,41 @@ function NumberInputEntry(props) {
   });
 }
 
+function SelectEntry(props) {
+  const {
+    editField,
+    field,
+    id,
+    description,
+    label,
+    options,
+    path
+  } = props;
+
+  const onChange = value => {
+    if (editField && path) {
+      editField(field, path, value);
+    } else {
+      props.onChange(value);
+    }
+  };
+
+  const value = path ? minDash.get(field, path, '') : props.value;
+  return jsxRuntime.jsxs("div", {
+    class: "fjs-properties-panel-entry",
+    children: [jsxRuntime.jsx(Select, {
+      id: id,
+      label: label,
+      onChange: onChange,
+      options: options,
+      value: value
+    }), description && jsxRuntime.jsx("div", {
+      class: "fjs-properties-panel-description",
+      children: description
+    })]
+  });
+}
+
 function TextareaEntry(props) {
   const {
     editField,
@@ -1482,12 +1517,6 @@ function ActionEntry(props) {
     editField,
     field
   } = props;
-
-  const onChange = value => {
-    editField(field, 'action', value);
-  };
-
-  const value = field.action;
   const options = [{
     label: 'Submit',
     value: 'submit'
@@ -1495,15 +1524,13 @@ function ActionEntry(props) {
     label: 'Reset',
     value: 'reset'
   }];
-  return jsxRuntime.jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsxRuntime.jsx(Select, {
-      id: "action",
-      label: "Action",
-      options: options,
-      onChange: onChange,
-      value: value
-    })
+  return jsxRuntime.jsx(SelectEntry, {
+    editField: editField,
+    field: field,
+    id: "action",
+    label: "Action",
+    options: options,
+    path: ['action']
   });
 }
 
@@ -1557,6 +1584,94 @@ function DescriptionEntry(props) {
   });
 }
 
+function DefaultValueEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    defaultValue,
+    type,
+    values = []
+  } = field;
+
+  if (type === 'checkbox') {
+    const options = [{
+      label: 'Checked',
+      value: 'true'
+    }, {
+      label: 'Not checked',
+      value: 'false'
+    }];
+
+    const onChange = value => {
+      editField(field, ['defaultValue'], parseStringToBoolean(value));
+    };
+
+    return jsxRuntime.jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: parseBooleanToString(defaultValue)
+    });
+  }
+
+  if (type === 'number') {
+    return jsxRuntime.jsx(NumberInputEntry, {
+      editField: editField,
+      field: field,
+      id: "defaultValue",
+      label: "Default Value",
+      path: ['defaultValue']
+    });
+  }
+
+  if (type === 'radio' || type === 'select') {
+    const options = [{
+      label: '<none>'
+    }, ...values];
+
+    const onChange = value => {
+      editField(field, ['defaultValue'], value.length ? value : undefined);
+    };
+
+    return jsxRuntime.jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: defaultValue
+    });
+  }
+
+  if (type === 'textfield') {
+    return jsxRuntime.jsx(TextInputEntry, {
+      editField: editField,
+      field: field,
+      id: "defaultValue",
+      label: "Default Value",
+      path: ['defaultValue']
+    });
+  }
+}
+
+function parseStringToBoolean(value) {
+  if (value === 'true') {
+    return true;
+  }
+
+  return false;
+}
+
+function parseBooleanToString(value) {
+  if (value === true) {
+    return 'true';
+  }
+
+  return 'false';
+}
+
 function DisabledEntry(props) {
   const {
     editField,
@@ -1759,6 +1874,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsxRuntime.jsx(DefaultValueEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   if (type === 'button') {
     entries.push(jsxRuntime.jsx(ActionEntry, {
       editField: editField,
@@ -1889,7 +2011,7 @@ function ValuesGroup(field, editField) {
           field: field,
           index: index
         })
-      }, `${id}-${value.value}`);
+      }, `${id}-${index}`);
     })
   });
 }