@bpmn-io/form-js-editor 0.4.4 → 0.6.1

package/dist/index.es.js

@@ -1,3 +1,4 @@
+import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, forEach, isObject, uniqueBy, isString } from 'min-dash';
 import { FormFieldRegistry as FormFieldRegistry$1, clone, Default, FormContext, FormRenderContext, FormComponent, FormFields, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
@@ -6,7 +7,7 @@ import { useContext, useRef, useEffect, useMemo, useState, useCallback } from 'p
 import React from 'preact/compat';
 import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
 import dragula from 'dragula';
-import { matches, event } from 'min-dom';
+import { matches, closest, event } from 'min-dom';
 import { mutate } from 'array-move';
 
 var FN_REF = '__fn';
@@ -1006,7 +1007,7 @@ function CheckboxInput(props) {
   };
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-checkbox",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1061,7 +1062,7 @@ function NumberInput(props) {
     }
   }, [_onInput]);
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-number",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1094,7 +1095,7 @@ function Select(props) {
   };
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-select",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1128,7 +1129,7 @@ function Textarea(props) {
     _onInput(value.length ? value : undefined);
   }, [_onInput]);
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-textarea",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1180,7 +1181,7 @@ function TextInput(props) {
   }
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-text",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1262,6 +1263,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 ? get(field, path, '') : props.value;
+  return jsxs("div", {
+    class: "fjs-properties-panel-entry",
+    children: [jsx(Select, {
+      id: id,
+      label: label,
+      onChange: onChange,
+      options: options,
+      value: value
+    }), description && jsx("div", {
+      class: "fjs-properties-panel-description",
+      children: description
+    })]
+  });
+}
+
 function TextareaEntry(props) {
   const {
     editField,
@@ -1472,12 +1508,6 @@ function ActionEntry(props) {
     editField,
     field
   } = props;
-
-  const onChange = value => {
-    editField(field, 'action', value);
-  };
-
-  const value = field.action;
   const options = [{
     label: 'Submit',
     value: 'submit'
@@ -1485,15 +1515,13 @@ function ActionEntry(props) {
     label: 'Reset',
     value: 'reset'
   }];
-  return jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsx(Select, {
-      id: "action",
-      label: "Action",
-      options: options,
-      onChange: onChange,
-      value: value
-    })
+  return jsx(SelectEntry, {
+    editField: editField,
+    field: field,
+    id: "action",
+    label: "Action",
+    options: options,
+    path: ['action']
   });
 }
 
@@ -1547,6 +1575,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 jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: parseBooleanToString(defaultValue)
+    });
+  }
+
+  if (type === 'number') {
+    return 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 jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: defaultValue
+    });
+  }
+
+  if (type === 'textfield') {
+    return 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 jsx(CheckboxInputEntry, {
+    id: "disabled",
+    field: field,
+    label: "Disabled",
+    path: ['disabled'],
+    onChange: onChange
+  });
+}
+
 function IdEntry(props) {
   const {
     editField,
@@ -1730,6 +1865,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsx(DefaultValueEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   if (type === 'button') {
     entries.push(jsx(ActionEntry, {
       editField: editField,
@@ -1751,6 +1893,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsx(DisabledEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   return jsx(Group, {
     label: "General",
     children: entries.length ? entries : null
@@ -1853,7 +2002,7 @@ function ValuesGroup(field, editField) {
           field: field,
           index: index
         })
-      }, `${id}-${value.value}`);
+      }, `${id}-${index}`);
     })
   });
 }
@@ -1892,6 +2041,7 @@ function PropertiesPanel(props) {
     editField,
     field
   } = props;
+  const eventBus = useService('eventBus');
 
   if (!field) {
     return jsx("div", {
@@ -1900,8 +2050,6 @@ function PropertiesPanel(props) {
     });
   }
 
-  const eventBus = useService('eventBus');
-
   const onFocus = () => eventBus.fire('propertiesPanel.focusin');
 
   const onBlur = () => eventBus.fire('propertiesPanel.focusout');
@@ -2175,8 +2323,9 @@ function FormEditor$1(props) {
       }
 
       return injector.get(type, strict);
-    }
+    },
 
+    formId: formEditor._id
   };
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
@@ -2652,6 +2801,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
@@ -2730,7 +2880,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 = 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) {
@@ -4283,6 +4453,7 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const ids = new Ids([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
  * @typedef { import('./types').Module } Module
@@ -4307,11 +4478,20 @@ class FormEditor {
    * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {String}
+     */
+    this._id = ids.next();
     /**
      * @private
      * @type {Element}
      */
+
     this._container = createFormContainer();
+
+    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+
     const {
       container,
       exporter,
@@ -4570,10 +4750,9 @@ function exportSchema(schema, exporter, schemaVersion) {
 
     return value;
   });
-  return {
-    schemaVersion,
+  return { ...cleanedSchema,
     ...exportDetails,
-    ...cleanedSchema
+    schemaVersion
   };
 }