@bpmn-io/form-js-viewer 0.8.0-alpha.0 → 0.8.0-alpha.1

package/dist/assets/form-js.css

@@ -189,9 +189,7 @@
 .fjs-container .fjs-button[type='reset']:focus,
 .fjs-container .fjs-textarea:focus,
 .fjs-container .fjs-select:focus {
-  outline: none;
-  padding: 7px;
-  border-width: 2px;
+  outline: var(--color-borders) solid 1px;
 }
 
 .fjs-container .fjs-button[type='submit']:focus {

package/dist/index.cjs

@@ -601,45 +601,8 @@ class FormFieldRegistry {
 FormFieldRegistry.$inject = ['eventBus'];
 
 function createInjector(bootstrapModules) {
-  const modules = [],
-        components = [];
-
-  function hasModule(module) {
-    return modules.includes(module);
-  }
-
-  function addModule(module) {
-    modules.push(module);
-  }
-
-  function visit(module) {
-    if (hasModule(module)) {
-      return;
-    }
-
-    (module.__depends__ || []).forEach(visit);
-
-    if (hasModule(module)) {
-      return;
-    }
-
-    addModule(module);
-    (module.__init__ || []).forEach(function (component) {
-      components.push(component);
-    });
-  }
-
-  bootstrapModules.forEach(visit);
-  const injector = new didi.Injector(modules);
-  components.forEach(function (component) {
-    try {
-      injector[typeof component === 'string' ? 'get' : 'invoke'](component);
-    } catch (err) {
-      console.error('Failed to instantiate component');
-      console.error(err.stack);
-      throw err;
-    }
-  });
+  const injector = new didi.Injector(bootstrapModules);
+  injector.init();
   return injector;
 }
 
@@ -702,6 +665,41 @@ function generateIdForType(type) {
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
+ */
+
+function getSchemaVariables(schema) {
+  if (!schema.components) {
+    return [];
+  }
+
+  return schema.components.reduce((variables, component) => {
+    const {
+      key,
+      valuesKey,
+      type
+    } = component;
+
+    if (['text', 'button'].includes(type)) {
+      return variables;
+    }
+
+    if (key) {
+      variables = [...variables, key];
+    }
+
+    if (valuesKey && !variables.includes(valuesKey)) {
+      variables = [...variables, valuesKey];
+    }
+
+    return variables;
+  }, []);
+}
 
 class Importer {
   /**
@@ -726,7 +724,7 @@ class Importer {
 
 
   importSchema(schema, data = {}) {
-    // TODO: Add warnings
+    // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
     const warnings = [];
 
     try {
@@ -834,8 +832,21 @@ class Importer {
 
 
       if (_path) {
+        const fieldImplementation = this._formFields.get(type);
+
+        let valueData = minDash.get(data, _path);
+
+        if (!minDash.isUndefined(valueData) && fieldImplementation.sanitizeValue) {
+          valueData = fieldImplementation.sanitizeValue({
+            formField,
+            data,
+            value: valueData
+          });
+        }
+
+        const initialFieldValue = !minDash.isUndefined(valueData) ? valueData : !minDash.isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
         importedData = { ...importedData,
-          [_path[0]]: minDash.get(data, _path, minDash.isUndefined(defaultValue) ? this._formFields.get(type).emptyValue : defaultValue)
+          [_path[0]]: initialFieldValue
         };
       }
 
@@ -999,6 +1010,46 @@ function safeMarkdown(markdown) {
   const html = markdownToHTML(markdown);
   return sanitizeHTML(html);
 }
+function sanitizeSingleSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+
+  try {
+    const validValues = (valuesKey ? minDash.get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return validValues.includes(value) ? value : null;
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return null;
+  }
+}
+function sanitizeMultiSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+
+  try {
+    const validValues = (valuesKey ? minDash.get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return value.filter(v => validValues.includes(v));
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return [];
+  }
+}
 
 const type$8 = 'button';
 function Button(props) {
@@ -1167,6 +1218,10 @@ Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
 Checkbox.emptyValue = false;
 
+Checkbox.sanitizeValue = ({
+  value
+}) => value === true;
+
 function useService (type, strict) {
   const {
     getService
@@ -1319,6 +1374,7 @@ Checklist.type = type$6;
 Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
+Checklist.sanitizeValue = sanitizeMultiSelectValue;
 
 const noop$1 = () => false;
 
@@ -1549,10 +1605,11 @@ function Number(props) {
   const onChange = ({
     target
   }) => {
-    const parsedValue = parseInt(target.value, 10);
     props.onChange({
       field,
-      value: isNaN(parsedValue) ? null : parsedValue
+      value: Number.sanitizeValue({
+        value: target.value
+      })
     });
   };
 
@@ -1585,6 +1642,13 @@ Number.create = function (options = {}) {
   };
 };
 
+Number.sanitizeValue = ({
+  value
+}) => {
+  const parsedValue = parseInt(value, 10);
+  return isNaN(parsedValue) ? null : parsedValue;
+};
+
 Number.type = type$5;
 Number.keyed = true;
 Number.label = 'Number';
@@ -1664,6 +1728,7 @@ Radio.type = type$4;
 Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
+Radio.sanitizeValue = sanitizeSingleSelectValue;
 
 const type$3 = 'select';
 function Select(props) {
@@ -1742,6 +1807,7 @@ Select.type = type$3;
 Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
+Select.sanitizeValue = sanitizeSingleSelectValue;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var CloseIcon = (({
@@ -1913,7 +1979,7 @@ function Taglist(props) {
   }, [JSON.stringify(values), options, loadState]);
   hooks.useEffect(() => {
     if (loadState === LOAD_STATES.LOADED) {
-      setFilteredValues(options.filter(o => o.label && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
+      setFilteredValues(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
     } else {
       setFilteredValues([]);
     }
@@ -2044,6 +2110,7 @@ Taglist.type = type$2;
 Taglist.label = 'Taglist';
 Taglist.keyed = true;
 Taglist.emptyValue = [];
+Taglist.sanitizeValue = sanitizeMultiSelectValue;
 
 const type$1 = 'text';
 function Text(props) {
@@ -2133,6 +2200,10 @@ Textfield.label = 'Text Field';
 Textfield.keyed = true;
 Textfield.emptyValue = '';
 
+Textfield.sanitizeValue = ({
+  value
+}) => minDash.isArray(value) || minDash.isObject(value) ? null : String(value);
+
 const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield];
 
 class FormFields {
@@ -2669,6 +2740,7 @@ exports.findErrors = findErrors;
 exports.formFields = formFields;
 exports.generateIdForType = generateIdForType;
 exports.generateIndexForType = generateIndexForType;
+exports.getSchemaVariables = getSchemaVariables;
 exports.isRequired = isRequired;
 exports.pathParse = pathParse;
 exports.pathStringify = pathStringify;