@bpmn-io/form-js-editor 0.4.3 → 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,17 @@
 }
 
 .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,
+.fjs-editor-container .fjs-select:disabled {
+  pointer-events: none;
 }
 
 /**
@@ -90,25 +136,24 @@
   position: absolute;
   top: 3px;
   right: 3px;
-  background-color: white;
-  border-radius: 3px;
   box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
 }
 
 .fjs-editor-container .fjs-context-pad-item {
   border: none;
-  background-color: var(--color-white);
+  border-radius: 3px;
+  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);
 }
 
 /**
@@ -116,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 {
@@ -135,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 {
@@ -144,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;
 }
 
@@ -153,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 * {
@@ -168,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 {
@@ -177,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 {
@@ -191,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 {
@@ -203,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;
 }
@@ -213,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 {
@@ -262,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 {
@@ -290,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,
@@ -303,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],
@@ -319,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;
 }
 
@@ -349,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;
@@ -363,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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Ids = require('ids');
 var minDash = require('min-dash');
 var formJsViewer = require('@bpmn-io/form-js-viewer');
 var preact = require('preact');
@@ -14,6 +15,7 @@ var arrayMove = require('array-move');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var dragula__default = /*#__PURE__*/_interopDefaultLegacy(dragula);
 
@@ -1014,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",
@@ -1069,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",
@@ -1102,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",
@@ -1136,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",
@@ -1188,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",
@@ -1270,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,
@@ -1480,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'
@@ -1493,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']
   });
 }
 
@@ -1555,6 +1584,113 @@ 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,
+    field
+  } = props;
+
+  const onChange = value => {
+    editField(field, 'disabled', value);
+  };
+
+  return jsxRuntime.jsx(CheckboxInputEntry, {
+    id: "disabled",
+    field: field,
+    label: "Disabled",
+    path: ['disabled'],
+    onChange: onChange
+  });
+}
+
 function IdEntry(props) {
   const {
     editField,
@@ -1738,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,
@@ -1759,6 +1902,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsxRuntime.jsx(DisabledEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   return jsxRuntime.jsx(Group, {
     label: "General",
     children: entries.length ? entries : null
@@ -1861,7 +2011,7 @@ function ValuesGroup(field, editField) {
           field: field,
           index: index
         })
-      }, `${id}-${value.value}`);
+      }, `${id}-${index}`);
     })
   });
 }
@@ -1900,6 +2050,7 @@ function PropertiesPanel(props) {
     editField,
     field
   } = props;
+  const eventBus = useService('eventBus');
 
   if (!field) {
     return jsxRuntime.jsx("div", {
@@ -1908,8 +2059,6 @@ function PropertiesPanel(props) {
     });
   }
 
-  const eventBus = useService('eventBus');
-
   const onFocus = () => eventBus.fire('propertiesPanel.focusin');
 
   const onBlur = () => eventBus.fire('propertiesPanel.focusout');
@@ -2183,8 +2332,9 @@ function FormEditor$1(props) {
       }
 
       return injector.get(type, strict);
-    }
+    },
 
+    formId: formEditor._id
   };
   const onSubmit = hooks$1.useCallback(() => {}, []);
   const onReset = hooks$1.useCallback(() => {}, []);
@@ -2660,6 +2810,7 @@ function isShift(event) {
 
 var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
+var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 var DEFAULT_PRIORITY$1 = 1000;
 /**
  * A keyboard abstraction that may be activated and
@@ -2738,7 +2889,27 @@ Keyboard.prototype._keyHandler = function (event, type) {
 };
 
 Keyboard.prototype._isEventIgnored = function (event) {
-  return isInput(event.target) && !isCmd(event);
+  return isInput(event.target) && this._isModifiedKeyIgnored(event);
+};
+
+Keyboard.prototype._isModifiedKeyIgnored = function (event) {
+  if (!isCmd(event)) {
+    return true;
+  }
+
+  var allowedModifiers = this._getAllowedModifiers(event.target);
+
+  return !allowedModifiers.includes(event.key);
+};
+
+Keyboard.prototype._getAllowedModifiers = function (element) {
+  var modifierContainer = minDom.closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
+
+  if (!modifierContainer || this._node && !this._node.contains(modifierContainer)) {
+    return [];
+  }
+
+  return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
 };
 
 Keyboard.prototype.bind = function (node) {
@@ -4291,6 +4462,7 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const ids = new Ids__default['default']([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
  * @typedef { import('./types').Module } Module
@@ -4315,11 +4487,20 @@ class FormEditor {
    * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {String}
+     */
+    this._id = ids.next();
     /**
      * @private
      * @type {Element}
      */
+
     this._container = formJsViewer.createFormContainer();
+
+    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+
     const {
       container,
       exporter,