@bpmn-io/form-js-playground 0.13.1 → 0.14.1

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

@@ -193,6 +193,11 @@
   overflow: hidden;
 }
 
+.fjs-pgl-form-container .fjs-container .cds--grid .cds--row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
 .fjs-pgl-form-container .fjs-form-editor {
   width: 100%;
 }

package/dist/form-playground.umd.js

@@ -49251,15 +49251,163 @@
     return value;
   }
 
+  const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) => {
+    const {
+      depth = 0,
+      specialDepthAccessors = {}
+    } = options;
+    if (!['expression', 'unaryTest'].includes(feelFlavour)) return [];
+    const tree = feelFlavour === 'expression' ? parseExpressions$1(feelString) : parseUnaryTests$1(feelString);
+    const simpleExpressionTree = _buildSimpleFeelStructureTree(tree, feelString);
+    return function _unfoldVariables(node) {
+      if (node.name === 'PathExpression') {
+        if (Object.keys(specialDepthAccessors).length === 0) {
+          return depth === 0 ? [_getVariableNameAtPathIndex(node, 0)] : [];
+        }
+
+        // if using special depth accessors, use a more complex extraction
+        return Array.from(_smartExtractVariableNames(node, depth, specialDepthAccessors));
+      }
+      if (depth === 0 && node.name === 'VariableName') return [node.variableName];
+
+      // for any other kind of node, traverse its children and flatten the result
+      if (node.children) {
+        return node.children.reduce((acc, child) => {
+          return acc.concat(_unfoldVariables(child));
+        }, []);
+      }
+      return [];
+    }(simpleExpressionTree);
+  };
+
+  /**
+   * Get the variable name at the specified index in a given path expression.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @param {number} index - The index of the variable name to retrieve.
+   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+   */
+  const _getVariableNameAtPathIndex = (root, index) => {
+    const accessors = _deconstructPathExpression(root);
+    return accessors[index] || null;
+  };
+
+  /**
+   * Extracts the variables which are required of the external context for a given path expression.
+   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+   *
+   * @param {Object} node - The root node of the path expression tree.
+   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+   * @returns {Set} - A set containing the extracted variable names.
+   */
+  const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
+    // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
+    // we track multiple of these to account for the fact that a path expression may be ambiguous due to special keywords
+    let accessorDepthInfos = [{
+      previous: null,
+      current: initialDepth - 1
+    }];
+    const extractedVariables = new Set();
+    const nodeAccessors = _deconstructPathExpression(node);
+    for (let i = 0; i < nodeAccessors.length; i++) {
+      const currentAccessor = nodeAccessors[i];
+      if (currentAccessor in specialDepthAccessors) {
+        const depthOffsets = specialDepthAccessors[currentAccessor];
+
+        // if the current accessor is a special keyword, we need to expand the current depth info set
+        // this is done to account for the ambiguity of keywords like parent, which may be used to access
+        // the parent of the current node, or a child variable of the same name
+        accessorDepthInfos = depthOffsets.reduce((accumulator, offset) => {
+          return [...accumulator, ...accessorDepthInfos.map(depthInfo => ({
+            previous: depthInfo.current,
+            current: depthInfo.current + offset
+          }))];
+        }, []).filter(depthInfo => depthInfo.current >= -1); // discard all depth infos which are out of bounds
+      } else {
+        // if the current accessor is not a special keyword, we know it's simply accessing a child
+        // hence we are now one level deeper in the tree and simply increment
+        accessorDepthInfos = accessorDepthInfos.map(depthInfo => ({
+          previous: depthInfo.current,
+          current: depthInfo.current + 1
+        }));
+      }
+
+      // finally, we check if for the current accessor, there is a scenario where:
+      // previous it was at depth -1 (i.e. the root context), and is now at depth 0 (i.e. a variable)
+      // these are the variables we need to request, so we add them to the set
+      if (accessorDepthInfos.some(depthInfo => depthInfo.previous === -1 && depthInfo.current === 0)) {
+        extractedVariables.add(currentAccessor);
+      }
+    }
+
+    // we return a set to avoid duplicates
+    return new Set(extractedVariables);
+  };
+
+  /**
+   * Deconstructs a path expression tree into an array of components.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @returns {Array<string>} An array of components in the path expression, in the correct order.
+   */
+  const _deconstructPathExpression = root => {
+    let node = root;
+    let parts = [];
+
+    // Traverse the tree and collect path components
+    while (node.name === 'PathExpression') {
+      parts.push(node.children[1].variableName);
+      node = node.children[0];
+    }
+
+    // Add the last component to the array
+    parts.push(node.variableName);
+
+    // Reverse and return the array to get the correct order
+    return parts.reverse();
+  };
+
+  /**
+   * Builds a simplified feel structure tree from the given parse tree and feel string.
+   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+   *
+   * @param {Object} parseTree - The parse tree generated by a parser.
+   * @param {string} feelString - The feel string used for parsing.
+   * @returns {Object} The simplified feel structure tree.
+   */
+  const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
+    const stack = [{
+      children: []
+    }];
+    parseTree.iterate({
+      enter: node => {
+        const nodeRepresentation = {
+          name: node.type.name,
+          children: []
+        };
+        if (node.type.name === 'VariableName') {
+          nodeRepresentation.variableName = feelString.slice(node.from, node.to);
+        }
+        stack.push(nodeRepresentation);
+      },
+      leave: () => {
+        const result = stack.pop();
+        const parent = stack[stack.length - 1];
+        parent.children.push(result);
+      }
+    });
+    return stack[0].children[0];
+  };
   class FeelExpressionLanguage {
     constructor(eventBus) {
       this._eventBus = eventBus;
     }
 
     /**
-     * Determines if the given string is a FEEL expression.
+     * Determines if the given value is a FEEL expression.
      *
-     * @param {string} value
+     * @param {any} value
      * @returns {boolean}
      *
      */
@@ -49283,12 +49431,10 @@
       if (!this.isExpression(expression)) {
         return [];
       }
-      if (type === 'unaryTest') {
-        return this._getUnaryVariableNames(expression);
-      } else if (type === 'expression') {
-        return this._getExpressionVariableNames(expression);
+      if (!['unaryTest', 'expression'].includes(type)) {
+        throw new Error('Unknown expression type: ' + type);
       }
-      throw new Error('Unknown expression type: ' + options.type);
+      return getFlavouredFeelVariableNames(expression, type);
     }
 
     /**
@@ -49316,36 +49462,51 @@
         return null;
       }
     }
-    _getExpressionVariableNames(expression) {
-      const tree = parseExpressions$1(expression);
-      const cursor = tree.cursor();
-      const variables = new Set();
-      do {
-        const node = cursor.node;
-        if (node.type.name === 'VariableName') {
-          variables.add(expression.slice(node.from, node.to));
-        }
-      } while (cursor.next());
-      return Array.from(variables);
-    }
-    _getUnaryVariableNames(unaryTest) {
-      const tree = parseUnaryTests$1(unaryTest);
-      const cursor = tree.cursor();
-      const variables = new Set();
-      do {
-        const node = cursor.node;
-        if (node.type.name === 'VariableName') {
-          variables.add(unaryTest.slice(node.from, node.to));
-        }
-      } while (cursor.next());
-      return Array.from(variables);
-    }
   }
   FeelExpressionLanguage.$inject = ['eventBus'];
   class FeelersTemplating {
     constructor() {}
+
+    /**
+     * Determines if the given value is a feelers template.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
+     */
     isTemplate(value) {
-      return isString$4(value) && (value.startsWith('=') || /{{/.test(value));
+      return isString$4(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
+    }
+
+    /**
+     * Retrieve variable names from a given feelers template.
+     *
+     * @param {string} template
+     *
+     * @returns {string[]}
+     */
+    getVariableNames(template) {
+      if (!this.isTemplate(template)) {
+        return [];
+      }
+      const expressions = this._extractExpressionsWithDepth(template);
+
+      // defines special accessors, and the change(s) in depth they could imply (e.g. parent can be used to access the parent context (depth - 1) or a child variable named parent (depth + 1)
+      const specialDepthAccessors = {
+        parent: [-1, 1],
+        _parent_: [-1],
+        this: [0, 1],
+        _this_: [0]
+      };
+      return expressions.reduce((variables, {
+        expression,
+        depth
+      }) => {
+        return variables.concat(getFlavouredFeelVariableNames(expression, 'expression', {
+          depth,
+          specialDepthAccessors
+        }));
+      }, []);
     }
 
     /**
@@ -49372,6 +49533,50 @@
         buildDebugString
       });
     }
+
+    /**
+    * @typedef {Object} ExpressionWithDepth
+    * @property {number} depth - The depth of the expression in the syntax tree.
+    * @property {string} expression - The extracted expression
+    */
+
+    /**
+    * Extracts all feel expressions in the template along with their depth in the syntax tree.
+    * The depth is incremented for child expressions of loops to account for context drilling.
+    * @name extractExpressionsWithDepth
+    * @param {string} template - A feelers template string.
+    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+    *
+    * @example
+    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+    * const extractedExpressions = _extractExpressionsWithDepth(template);
+    */
+    _extractExpressionsWithDepth(template) {
+      // build simplified feelers syntax tree
+      const parseTree = parser$1.parse(template);
+      const tree = buildSimpleTree(parseTree, template);
+      return function _traverse(n, depth = 0) {
+        if (['Feel', 'FeelBlock'].includes(n.name)) {
+          return [{
+            depth,
+            expression: n.content
+          }];
+        }
+        if (n.name === 'LoopSpanner') {
+          const loopExpression = n.children[0].content;
+          const childResults = n.children.slice(1).reduce((acc, child) => {
+            return acc.concat(_traverse(child, depth + 1));
+          }, []);
+          return [{
+            depth,
+            expression: loopExpression
+          }, ...childResults];
+        }
+        return n.children.reduce((acc, child) => {
+          return acc.concat(_traverse(child, depth));
+        }, []);
+      }(tree);
+    }
   }
   FeelersTemplating.$inject = [];
 
@@ -49992,8 +50197,13 @@
       if (validate.pattern && value && !new RegExp(validate.pattern).test(value)) {
         errors = [...errors, `Field must match pattern ${validate.pattern}.`];
       }
-      if (validate.required && (isNil$1(value) || value === '')) {
-        errors = [...errors, 'Field is required.'];
+      if (validate.required) {
+        const isUncheckedCheckbox = type === 'checkbox' && value === false;
+        const isUnsetValue = isNil$1(value) || value === '';
+        const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
+        if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
+          errors = [...errors, 'Field is required.'];
+        }
       }
       if ('min' in validate && (value || value === 0) && value < validate.min) {
         errors = [...errors, `Field must have minimum value of ${validate.min}.`];
@@ -50292,6 +50502,7 @@
     return container;
   }
   const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+  const TEMPLATE_PROPERTIES = ['text'];
   function findErrors(errors, path) {
     return errors[pathStringify(path)];
   }
@@ -50331,7 +50542,7 @@
    *
    * @return {string[]}
    */
-  function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
+  function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
     if (!schema.components) {
       return [];
     }
@@ -50366,6 +50577,13 @@
           variables = [...variables, ...expressionVariables];
         }
       });
+      TEMPLATE_PROPERTIES.forEach(prop => {
+        const property = component[prop];
+        if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+          const templateVariables = templating.getVariableNames(property);
+          variables = [...variables, ...templateVariables];
+        }
+      });
       return variables;
     }, []);
 
@@ -50671,8 +50889,12 @@
     const {
       description,
       id,
-      label
+      label,
+      validate = {}
     } = field;
+    const {
+      required
+    } = validate;
     const onChange = ({
       target
     }) => {
@@ -50694,7 +50916,7 @@
       children: [e$1(Label$1, {
         id: prefixId(id, formId),
         label: label,
-        required: false,
+        required: required,
         children: e$1("input", {
           checked: value,
           class: "fjs-input",
@@ -51057,8 +51279,12 @@
     const {
       description,
       id,
-      label
+      label,
+      validate = {}
     } = field;
+    const {
+      required
+    } = validate;
     const toggleCheckbox = v => {
       let newValue = [...value];
       if (!newValue.includes(v)) {
@@ -51084,7 +51310,8 @@
         disabled
       })),
       children: [e$1(Label$1, {
-        label: label
+        label: label,
+        required: required
       }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
         return e$1(Label$1, {
           id: prefixId(`${id}-${index}`, formId),
@@ -52964,6 +53191,12 @@
         errors,
         disabled
       }),
+      onKeyDown: event => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
       children: [e$1(Label$1, {
         id: prefixId(id, formId),
         label: label,
@@ -53011,8 +53244,12 @@
     const {
       description,
       id,
-      label
+      label,
+      validate = {}
     } = field;
+    const {
+      required
+    } = validate;
     const {
       formId
     } = F$1(FormContext$1);
@@ -53109,8 +53346,15 @@
         errors,
         disabled
       }),
+      onKeyDown: event => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      },
       children: [e$1(Label$1, {
         label: label,
+        required: required,
         id: prefixId(`${id}-search`, formId)
       }), e$1("div", {
         class: classNames('fjs-taglist', {
@@ -65103,7 +65347,7 @@
       id,
       label: 'Label',
       setValue,
-      validate: validateFactory(getValue())
+      validate: validateFactory(getValue(), entry => entry.label)
     });
   }
   function Value$1(props) {
@@ -65129,7 +65373,7 @@
       id,
       label: 'Value',
       setValue,
-      validate: validateFactory(getValue())
+      validate: validateFactory(getValue(), entry => entry.value)
     });
   }
   function CustomValueEntry(props) {
@@ -65367,13 +65611,13 @@
     const addEntry = e => {
       e.stopPropagation();
       const index = values.length + 1;
-      const entry = getIndexedEntry(index);
+      const entry = getIndexedEntry(index, values);
       editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
     };
     const removeEntry = entry => {
       editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], without(values, entry));
     };
-    const validateFactory = key => {
+    const validateFactory = (key, getValue) => {
       return value => {
         if (value === key) {
           return;
@@ -65381,7 +65625,7 @@
         if (isUndefined(value) || !value.length) {
           return 'Must not be empty.';
         }
-        const isValueAssigned = values.find(entry => entry.value === value);
+        const isValueAssigned = values.find(entry => getValue(entry) === value);
         if (isValueAssigned) {
           return 'Must be unique.';
         }
@@ -65412,17 +65656,23 @@
 
   // helper
 
-  function getIndexedEntry(index) {
+  function getIndexedEntry(index, values) {
     const entry = {
       label: 'Value',
       value: 'value'
     };
+    while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
+      index++;
+    }
     if (index > 1) {
       entry.label += ` ${index}`;
       entry.value += `${index}`;
     }
     return entry;
   }
+  function labelOrValueIsAlreadyAssignedForIndex(index, values) {
+    return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
+  }
   function AdornerEntry(props) {
     const {
       editField,
@@ -65645,7 +65895,7 @@
     } = field;
     const validate = get(field, ['validate'], {});
     const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate.validationType);
-    if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
+    if (!INPUTS.includes(type)) {
       return null;
     }
     const onChange = key => {
@@ -65915,12 +66165,13 @@
     }
     const addEntry = event => {
       event.stopPropagation();
-      const index = Object.keys(properties).length + 1;
-      const key = `key${index}`,
-        value = 'value';
+      let index = Object.keys(properties).length + 1;
+      while (`key${index}` in properties) {
+        index++;
+      }
       editField(field, ['properties'], {
         ...properties,
-        [key]: value
+        [`key${index}`]: 'value'
       });
     };
     const validateFactory = key => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -44,8 +44,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^0.13.1",
-    "@bpmn-io/form-js-viewer": "^0.13.1",
+    "@bpmn-io/form-js-editor": "^0.14.1",
+    "@bpmn-io/form-js-viewer": "^0.14.1",
     "@codemirror/autocomplete": "^6.3.4",
     "@codemirror/commands": "^6.1.2",
     "@codemirror/lang-json": "^6.0.0",
@@ -70,5 +70,5 @@
     "rollup-plugin-css-only": "^4.0.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "0b139786808d65c52aa030be7b9ae26abda34fde"
+  "gitHead": "a9ad771bc8f87d2fc428bd5bd1429b96bb03fe7a"
 }