@bpmn-io/form-js-editor 1.7.2 → 1.8.0

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

@@ -211,22 +211,6 @@
   display: flex;
 }
 
-.fjs-no-json-lint .cm-lint-marker,
-.fjs-no-json-lint .cm-lintPoint-error {
-  display: none;
-}
-
-.fjs-no-json-lint .cm-activeLine,
-.fjs-no-json-lint .cm-activeLineGutter {
-  background: none;
-}
-
-.fjs-no-json-lint .cm-placeholder {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-}
-
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -279,14 +263,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
@@ -722,6 +713,34 @@
   color: var(--color-palette-text);
 }
 
+/**
+ * JSON Editors
+ */
+
+.fjs-json-editor .cm-editor {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-json-editor .cm-placeholder {
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
+.fjs-json-editor .cm-placeholder > :first-child {
+  margin-top: 0;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-lint-marker,
+.fjs-json-editor.fjs-cm-no-lint .cm-lintPoint-error {
+  display: none;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLine,
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLineGutter {
+  background: none;
+}
+
 /**
  * Properties Panel
  */

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

@@ -189,22 +189,6 @@
   display: flex;
 }
 
-.fjs-no-json-lint .cm-lint-marker,
-.fjs-no-json-lint .cm-lintPoint-error {
-  display: none;
-}
-
-.fjs-no-json-lint .cm-activeLine,
-.fjs-no-json-lint .cm-activeLineGutter {
-  background: none;
-}
-
-.fjs-no-json-lint .cm-placeholder {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-}
-
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -257,14 +241,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=group],
@@ -697,6 +688,33 @@
   color: var(--color-palette-text);
 }
 
+/**
+ * JSON Editors
+ */
+.fjs-json-editor .cm-editor {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-json-editor .cm-placeholder {
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
+.fjs-json-editor .cm-placeholder > :first-child {
+  margin-top: 0;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-lint-marker,
+.fjs-json-editor.fjs-cm-no-lint .cm-lintPoint-error {
+  display: none;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLine,
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLineGutter {
+  background: none;
+}
+
 /**
  * Properties Panel
  */

package/dist/index.cjs

@@ -1142,7 +1142,36 @@ function EditorTable(props) {
 }
 EditorTable.config = formJsViewer.Table.config;
 
-const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable];
+const type = 'expression';
+function EditorExpressionField(props) {
+  const {
+    field
+  } = props;
+  const {
+    expression = ''
+  } = field;
+  const Icon = formJsViewer.iconsByType('expression');
+  const expressionLanguage = useService$1('expressionLanguage');
+  let placeholderContent = 'Expression is empty';
+  if (expression.trim() && expressionLanguage.isExpression(expression)) {
+    placeholderContent = 'Expression';
+  }
+  return jsxRuntime.jsx("div", {
+    class: editorFormFieldClasses(type),
+    children: jsxRuntime.jsxs("div", {
+      class: "fjs-form-field-placeholder",
+      children: [jsxRuntime.jsx(Icon, {
+        viewBox: "0 0 54 54"
+      }), placeholderContent]
+    })
+  });
+}
+EditorExpressionField.config = {
+  ...formJsViewer.ExpressionField.config,
+  escapeGridRender: false
+};
+
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
 
 class EditorFormFields extends formJsViewer.FormFields {
   constructor() {
@@ -1437,7 +1466,7 @@ function getIndefiniteArticle(type) {
 }
 
 const PALETTE_GROUPS = [{
-  label: 'Basic input',
+  label: 'Input',
   id: 'basic-input'
 }, {
   label: 'Selection',
@@ -2159,7 +2188,6 @@ function Empty(props) {
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
-    formEditor = useService$1('formEditor'),
     formFieldRegistry = useService$1('formFieldRegistry'),
     formFields = useService$1('formFields'),
     modeling = useService$1('modeling'),
@@ -2181,18 +2209,24 @@ function Element$1(props) {
     function scrollIntoView({
       selection
     }) {
-      if (!selection || selection.id !== id || !ref.current) {
+      const scrollContainer = formJsViewer.getScrollContainer(ref.current);
+      if (!selection || selection.type === 'default' || selection.id !== id || !scrollContainer || !ref.current) {
         return;
       }
-      const elementBounds = ref.current.getBoundingClientRect(),
-        containerBounds = formEditor._container.getBoundingClientRect();
-      if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
-        ref.current.scrollIntoView();
+      const elementBounds = ref.current.getBoundingClientRect();
+      const scrollContainerBounds = scrollContainer.getBoundingClientRect();
+      const isElementLarger = elementBounds.height > scrollContainerBounds.height;
+      const isNotFullyVisible = elementBounds.bottom > scrollContainerBounds.bottom || elementBounds.top < scrollContainerBounds.top;
+      if (isNotFullyVisible && !isElementLarger) {
+        ref.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest'
+        });
       }
     }
     eventBus.on('selection.changed', scrollIntoView);
     return () => eventBus.off('selection.changed', scrollIntoView);
-  }, [eventBus, formEditor._container, id]);
+  }, [eventBus, id]);
   hooks.useLayoutEffect(() => {
     if (selection.isSelected(field)) {
       ref.current.focus();
@@ -2214,14 +2248,15 @@ function Element$1(props) {
     if (isSelected) {
       classes.push('fjs-editor-selected');
     }
-    if (showOutline) {
-      classes.push('fjs-outlined');
+    const grouplike = ['group', 'dynamiclist'].includes(type);
+    if (grouplike) {
+      classes.push(showOutline ? 'fjs-outlined' : 'fjs-dashed-outlined');
     }
     if (hovered) {
       classes.push('fjs-editor-hovered');
     }
     return classes.join(' ');
-  }, [hovered, isSelected, props.class, showOutline]);
+  }, [hovered, isSelected, props.class, showOutline, type]);
   const onRemove = event => {
     event.stopPropagation();
     const parentField = formFieldRegistry.get(field._parent);
@@ -5179,6 +5214,7 @@ class PaletteRenderer extends SectionModuleBase {
 PaletteRenderer.$inject = ['eventBus'];
 
 const PaletteModule = {
+  __init__: ['palette'],
   palette: ['type', PaletteRenderer]
 };
 
@@ -8974,7 +9010,7 @@ function useVariables() {
   return formJsViewer.getSchemaVariables(schema);
 }
 
-const headerlessTypes = ['spacer', 'separator', 'html'];
+const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 const PropertiesPanelHeaderProvider = {
   getElementLabel: field => {
     const {
@@ -10793,6 +10829,83 @@ const validateNumberEntries = value => {
   }
 };
 
+function ExpressionFieldEntries(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const entries = [];
+  entries.push({
+    id: `${id}-expression`,
+    component: ExpressionFieldExpression,
+    isEdited: isEdited$6,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'expression'
+  });
+  entries.push({
+    id: `${id}-computeOn`,
+    component: ExpressionFieldComputeOn,
+    isEdited: isEdited$3,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'expression'
+  });
+  return entries;
+}
+function ExpressionFieldExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const getValue = () => field.expression || '';
+  const setValue = value => {
+    editField(field, ['expression'], value);
+  };
+  return FeelEntry({
+    debounce,
+    description: 'Define an expression to calculate the value of this field',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Target value',
+    setValue,
+    variables
+  });
+}
+function ExpressionFieldComputeOn(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const getValue = () => field.computeOn || '';
+  const setValue = value => {
+    editField(field, ['computeOn'], value);
+  };
+  const getOptions = () => [{
+    value: 'change',
+    label: 'Value changes'
+  }, {
+    value: 'presubmit',
+    label: 'Form submission'
+  }];
+  return SelectEntry({
+    id,
+    label: 'Compute on',
+    getValue,
+    setValue,
+    getOptions
+  });
+}
+
 function NumberSerializationEntry(props) {
   const {
     editField,
@@ -11753,14 +11866,22 @@ function Condition(props) {
       hide: value
     });
   };
+  let label = 'Hide if';
+  let description = 'Condition under which the field is hidden';
+
+  // special case for expression fields which do not render
+  if (field.type === 'expression') {
+    label = 'Deactivate if';
+    description = 'Condition under which the field is deactivated';
+  }
   return FeelEntry({
     debounce,
-    description: 'Condition under which the field is hidden',
+    description,
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Hide if',
+    label,
     setValue,
     variables
   });
@@ -12380,6 +12501,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...NumberEntries({
     field,
     editField
+  }), ...ExpressionFieldEntries({
+    field,
+    editField
   }), ...ImageSourceEntry({
     field,
     editField