@bpmn-io/form-js-editor 1.4.1 → 1.5.0

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

@@ -68,7 +68,7 @@
     var(--cds-border-strong-01, var(--color-grey-225-10-55))
   );
   --cursor-palette-field: grab;
-  --palette-width: 246px;
+  --palette-width: 270px;
 }
 
 .fjs-properties-container {
@@ -620,7 +620,7 @@
 .fjs-palette-container .fjs-palette-group {
   display: flex;
   flex-direction: column;
-  width: 212px;
+  width: 236px;
   margin: auto;
 }
 
@@ -639,7 +639,7 @@
 }
 
 .fjs-palette-field {
-  height: 64px;
+  height: 72px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -656,7 +656,7 @@
 }
 
 .fjs-palette-container .fjs-palette-field {
-  width: 64px;
+  width: 72px;
 }
 
 .fjs-palette-container .fjs-palette-field:focus {
@@ -719,8 +719,8 @@
 }
 
 .fjs-editor-container .fjs-form-field-placeholder svg {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   vertical-align: middle;
   margin-top: -2px;
   margin-right: 2px;

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

@@ -65,7 +65,7 @@
     var(--cds-border-strong-01, var(--color-grey-225-10-55))
   );
   --cursor-palette-field: grab;
-  --palette-width: 246px;
+  --palette-width: 270px;
 }
 
 .fjs-properties-container {
@@ -596,7 +596,7 @@
 .fjs-palette-container .fjs-palette-group {
   display: flex;
   flex-direction: column;
-  width: 212px;
+  width: 236px;
   margin: auto;
 }
 
@@ -615,7 +615,7 @@
 }
 
 .fjs-palette-field {
-  height: 64px;
+  height: 72px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -632,7 +632,7 @@
 }
 
 .fjs-palette-container .fjs-palette-field {
-  width: 64px;
+  width: 72px;
 }
 
 .fjs-palette-container .fjs-palette-field:focus {
@@ -695,8 +695,8 @@
 }
 
 .fjs-editor-container .fjs-form-field-placeholder svg {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   vertical-align: middle;
   margin-top: -2px;
   margin-right: 2px;

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var formJsViewer = require('@bpmn-io/form-js-viewer');
 var Ids = require('ids');
 var minDash = require('min-dash');
-var classnames = require('classnames');
 var jsxRuntime = require('preact/jsx-runtime');
+var classnames = require('classnames');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var React = require('preact/compat');
@@ -664,6 +664,25 @@ function calculateMaxColumnsWithAuto(autoCols) {
   return MAX_COLUMNS_PER_ROW - autoCols * 2;
 }
 
+function EditorIFrame(props) {
+  const {
+    field
+  } = props;
+  const Icon = formJsViewer.iconsByType(field.type);
+  return jsxRuntime.jsx("div", {
+    class: "fjs-iframe-placeholder",
+    children: jsxRuntime.jsxs("p", {
+      class: "fjs-iframe-placeholder-text",
+      children: [jsxRuntime.jsx(Icon, {
+        width: "32",
+        height: "24",
+        viewBox: "0 0 56 56"
+      }), "iFrame"]
+    })
+  });
+}
+EditorIFrame.config = formJsViewer.IFrame.config;
+
 const emptyImage = createEmptyImage();
 function editorFormFieldClasses(type, {
   disabled = false
@@ -999,7 +1018,7 @@ function EditorText(props) {
 }
 EditorText.config = formJsViewer.Text.config;
 
-const editorFormFields = [EditorText];
+const editorFormFields = [EditorIFrame, EditorText];
 
 class EditorFormFields extends formJsViewer.FormFields {
   constructor() {
@@ -1298,6 +1317,9 @@ const PALETTE_GROUPS = [{
 }, {
   label: 'Presentation',
   id: 'presentation'
+}, {
+  label: 'Containers',
+  id: 'container'
 }, {
   label: 'Action',
   id: 'action'
@@ -3320,11 +3342,13 @@ class MoveFormFieldHandler {
    * @param { import('../../../FormEditor').default } formEditor
    * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
    */
-  constructor(formEditor, formFieldRegistry, pathRegistry) {
+  constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
     this._formEditor = formEditor;
     this._formFieldRegistry = formFieldRegistry;
     this._pathRegistry = pathRegistry;
+    this._formLayouter = formLayouter;
   }
   execute(context) {
     this.moveFormField(context);
@@ -3371,8 +3395,8 @@ class MoveFormFieldHandler {
       }
       const formField = minDash.get(schema, [...sourcePath, sourceIndex]);
 
-      // (1) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (1) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (2) Move form field
       arrayMove.mutate(minDash.get(schema, sourcePath), sourceIndex, targetIndex);
@@ -3397,8 +3421,8 @@ class MoveFormFieldHandler {
       minDash.get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
       const targetPath = [...targetFormField._path, 'components'];
 
-      // (4) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (4) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (5) Add form field
       arrayAdd$1(minDash.get(schema, targetPath), targetIndex, formField);
@@ -3421,7 +3445,7 @@ class MoveFormFieldHandler {
     });
   }
 }
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
 
 class RemoveFormFieldHandler {
   /**
@@ -4011,12 +4035,21 @@ class FormLayoutUpdater extends CommandInterceptor {
     const {
       schema
     } = this._formEditor._getState();
+    const setRowIds = parent => {
+      if (!parent.components || !parent.components.length) {
+        return;
+      }
+      parent.components.forEach(formField => {
+        const row = this._formLayouter.getRowForField(formField);
+        updateRow(formField, row.id);
+
+        // handle children recursively
+        setRowIds(formField);
+      });
+    };
 
     // make sure rows are persisted in schema (e.g. for migration case)
-    schema.components.forEach(formField => {
-      const row = this._formLayouter.getRowForField(formField);
-      updateRow(formField, row.id);
-    });
+    setRowIds(schema);
   }
 }
 FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
@@ -9560,6 +9593,8 @@ function simpleBoolEntryFactory(options) {
     description,
     path,
     props,
+    getValue,
+    setValue,
     isDefaultVisible
   } = options;
   const {
@@ -9574,8 +9609,10 @@ function simpleBoolEntryFactory(options) {
     editField,
     description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$5,
-    isDefaultVisible
+    isEdited: isEdited$8,
+    isDefaultVisible,
+    getValue,
+    setValue
   };
 }
 const SimpleBoolComponent = props => {
@@ -9585,16 +9622,17 @@ const SimpleBoolComponent = props => {
     path,
     field,
     editField,
+    getValue = () => minDash.get(field, path, ''),
+    setValue = value => editField(field, path, value || false),
     description
   } = props;
-  const getValue = () => minDash.get(field, path, '');
-  const setValue = value => editField(field, path, value || false);
-  return CheckboxEntry({
+  return ToggleSwitchEntry({
     element: field,
     getValue,
     id,
     label,
     setValue,
+    inline: true,
     description
   });
 };
@@ -9650,7 +9688,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group'
+    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group' || field.type === 'iframe'
   });
   return entries;
 }
@@ -9671,7 +9709,7 @@ function Label$1(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const label = field.type === 'group' ? 'Group label' : 'Field label';
+  const label = getLabelText(field);
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -9740,6 +9778,165 @@ function TimeLabel(props) {
   });
 }
 
+// helpers //////////
+
+function getLabelText(field) {
+  const {
+    type
+  } = field;
+  if (type === 'group') {
+    return 'Group label';
+  }
+  if (type === 'iframe') {
+    return 'Title';
+  }
+  return 'Field label';
+}
+
+function HeightEntry(props) {
+  const {
+    editField,
+    field,
+    id,
+    description,
+    isDefaultVisible,
+    defaultValue
+  } = props;
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: Height,
+    description,
+    isEdited: isEdited$7,
+    editField,
+    field,
+    defaultValue,
+    isDefaultVisible: field => {
+      if (minDash.isFunction(isDefaultVisible)) {
+        return isDefaultVisible(field);
+      }
+      return field.type === 'spacer';
+    }
+  });
+  return entries;
+}
+function Height(props) {
+  const {
+    description,
+    editField,
+    field,
+    id,
+    defaultValue = 60 // default value for spacer
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => minDash.get(field, ['height'], defaultValue);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    description,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
+function IFrameHeightEntry(props) {
+  return [...HeightEntry({
+    ...props,
+    defaultValue: 300,
+    description: 'Height of the container in pixels.',
+    isDefaultVisible: field => field.type === 'iframe'
+  })];
+}
+
+const HTTPS_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
+
+function IFrameUrlEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'url',
+    component: Url,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'iframe'
+  });
+  return entries;
+}
+function Url(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['url'];
+  const getValue = () => {
+    return minDash.get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const validate = value => {
+    if (!value) {
+      return;
+    }
+    if (!HTTPS_PATTERN.test(value)) {
+      return 'For security reasons the URL must start with "https".';
+    }
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'URL',
+    setValue,
+    singleLine: true,
+    tooltip: getTooltip(),
+    validate,
+    variables
+  });
+}
+
+// helper //////////////////////
+
+function getTooltip() {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("p", {
+      children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
+    }), jsxRuntime.jsx("p", {
+      children: "Please make sure that the URL is safe as it might impose security risks."
+    }), jsxRuntime.jsxs("p", {
+      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", jsxRuntime.jsx("a", {
+        target: "_blank",
+        href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+        children: "X-FRAME-OPTIONS documentation"
+      }), "."]
+    })]
+  });
+}
+
 function SourceEntry(props) {
   const {
     editField,
@@ -9852,52 +10049,6 @@ function Text(props) {
   });
 }
 
-function SpacerEntry(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const entries = [];
-  entries.push({
-    id: id + '-height',
-    component: SpacerHeight,
-    isEdited: isEdited$7,
-    editField,
-    field,
-    isDefaultVisible: field => field.type === 'spacer'
-  });
-  return entries;
-}
-function SpacerHeight(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const debounce = useService('debounce');
-  const getValue = e => minDash.get(field, ['height']);
-  const setValue = (value, error) => {
-    if (error) {
-      return;
-    }
-    editField(field, ['height'], value);
-  };
-  return NumberFieldEntry({
-    debounce,
-    label: 'Height',
-    element: field,
-    id,
-    getValue,
-    setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (value < 1) return 'Should be greater than zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
-  });
-}
-
 function NumberEntries(props) {
   const {
     editField,
@@ -10968,7 +11119,13 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
-  }), ...SpacerEntry({
+  }), ...IFrameUrlEntry({
+    field,
+    editField
+  }), ...IFrameHeightEntry({
+    field,
+    editField
+  }), ...HeightEntry({
     field,
     editField
   }), ...NumberEntries({