@bpmn-io/form-js-viewer 0.5.1 → 0.7.1

package/dist/assets/form-js.css

@@ -2,45 +2,42 @@
  * Theming
  */
 .fjs-container {
-  --color-blue-base-65: #4d90ff;
-  --color-blue-base-65-opacity-10: rgba(77, 144, 255, 0.1);
-  --color-blue-darken-48: #005df7;
-  --color-blue-darken-55: #1a70ff;
-  --color-blue-darken-62: #3c85ff;
-  --color-blue-lighten-75: #80b0ff;
-  --color-blue-lighten-82: #a2c5ff;
-  --color-blue-lighten-93: #dbe9ff;
-
-  --color-silver-base-97: #f8f8f8;
-  --color-silver-lighten-99: #fcfcfc;
-  --color-silver-darken-80: #cdcdcd;
-  --color-silver-darken-87: #dedede;
-  --color-silver-darken-94: #efefef;
-
-  --color-grey-base-40: #666666;
-  --color-grey-lighten-56: #909090;
-  --color-grey-darken-23: #3b3b3b;
-  --color-grey-darken-30: #4c4c4c;
-  --color-grey-darken-33: #535353;
-
-  --color-red-base-62: #ff3d3d;
-  --color-red-darken-38: #C20000;
-  --color-red-lighten-85: #ffb3b3;
-
-  --color-black: #000000;
-  --color-white: #ffffff;
+  --color-grey-225-10-15: hsl(225, 10%, 15%);
+  --color-grey-225-10-35: hsl(225, 10%, 35%);
+  --color-grey-225-10-55: hsl(225, 10%, 55%);
+  --color-grey-225-10-75: hsl(225, 10%, 75%);
+  --color-grey-225-10-80: hsl(225, 10%, 80%);
+  --color-grey-225-10-85: hsl(225, 10%, 85%);
+  --color-grey-225-10-90: hsl(225, 10%, 90%);
+  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-97: hsl(225, 10%, 97%);
+
+  --color-blue-205-100-45: hsl(205, 100%, 45%);
+  --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-80: hsl(205, 100%, 80%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
+
+  --color-green-150-86-44: hsl(150, 86%, 44%);
+
+  --color-red-360-100-40: hsl(360, 100%, 40%);
+  --color-red-360-100-45: hsl(360, 100%, 45%);
+  --color-red-360-100-92: hsl(360, 100%, 92%);
+  --color-red-360-100-97: hsl(360, 100%, 97%);
+
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%); 
 
   --color-background: var(--color-white);
-  --color-background-disabled: var(--color-silver-darken-94);
-  --color-text: var(--color-grey-darken-23);
-  --color-text-light: var(--color-grey-lighten-56);
-  --color-text-lighter: var(--color-grey-base-40);
+  --color-background-disabled: var(--color-grey-225-10-95);
+  --color-text: var(--color-grey-225-10-15);
+  --color-text-light: var(--color-grey-225-10-35);
+  --color-text-lighter: var(--color-grey-225-10-55);
   --color-text-inverted: var(--color-white);
-  --color-borders: var(--color-grey-lighten-56);
-  --color-borders-disabled: var(--color-silver-darken-80);
-  --color-warning: var(--color-red-base-62);
-  --color-accent: var(--color-blue-darken-62);
-  --color-accent-dark: var(--color-blue-darken-48);
+  --color-borders: var(--color-grey-225-10-55);
+  --color-borders-disabled: var(--color-grey-225-10-75);
+  --color-warning: var(--color-red-360-100-45);
+  --color-accent: var(--color-blue-205-100-45);
+  --color-accent-dark: var(--color-blue-205-100-45);
 
   --font-family: 'IBM Plex Sans', sans-serif;
 
@@ -108,7 +105,7 @@
   font-style: italic;
   letter-spacing: .25px;
 
-  color: var(--color-text-light);
+  color: var(--color-text-lighter);
 }
 
 .fjs-container .fjs-form-field-label {
@@ -217,6 +214,7 @@
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
+.fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea {
   border-color: var(--color-warning);
 }
@@ -236,5 +234,5 @@
 }
 
 .fjs-container .fjs-form-field-text a {
-  color: var(--color-blue-darken-48);
+  color: var(--color-blue-205-100-45);
 }

package/dist/index.cjs

@@ -18,109 +18,6 @@ var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
 var snarkdown__default = /*#__PURE__*/_interopDefaultLegacy(snarkdown);
 var Markup__default = /*#__PURE__*/_interopDefaultLegacy(Markup);
 
-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;
-    }
-  });
-  return injector;
-}
-
-/**
- * @param {string?} prefix
- *
- * @returns Element
- */
-function createFormContainer(prefix = 'fjs') {
-  const container = document.createElement('div');
-  container.classList.add(`${prefix}-container`);
-  return container;
-}
-
-function findErrors(errors, path) {
-  return errors[pathStringify(path)];
-}
-function isRequired(field) {
-  return field.required;
-}
-function pathParse(path) {
-  if (!path) {
-    return [];
-  }
-
-  return path.split('.').map(key => {
-    return isNaN(parseInt(key)) ? key : parseInt(key);
-  });
-}
-function pathsEqual(a, b) {
-  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function pathStringify(path) {
-  if (!path) {
-    return '';
-  }
-
-  return path.join('.');
-}
-const indices = {};
-function generateIndexForType(type) {
-  if (type in indices) {
-    indices[type]++;
-  } else {
-    indices[type] = 1;
-  }
-
-  return indices[type];
-}
-function generateIdForType(type) {
-  return `${type}${generateIndexForType(type)}`;
-}
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
- */
-
-function clone(data, replacer) {
-  return JSON.parse(JSON.stringify(data, replacer));
-}
-
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
@@ -610,7 +507,7 @@ class Validator {
       errors = [...errors, `Field must match pattern ${validate.pattern}.`];
     }
 
-    if (validate.required && (typeof value === 'undefined' || value === '')) {
+    if (validate.required && (minDash.isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
 
@@ -634,6 +531,7 @@ class Validator {
   }
 
 }
+Validator.$inject = [];
 
 class FormFieldRegistry {
   constructor(eventBus) {
@@ -699,6 +597,109 @@ 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;
+    }
+  });
+  return injector;
+}
+
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
+ */
+function createFormContainer(prefix = 'fjs') {
+  const container = document.createElement('div');
+  container.classList.add(`${prefix}-container`);
+  return container;
+}
+
+function findErrors(errors, path) {
+  return errors[pathStringify(path)];
+}
+function isRequired(field) {
+  return field.required;
+}
+function pathParse(path) {
+  if (!path) {
+    return [];
+  }
+
+  return path.split('.').map(key => {
+    return isNaN(parseInt(key)) ? key : parseInt(key);
+  });
+}
+function pathsEqual(a, b) {
+  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function pathStringify(path) {
+  if (!path) {
+    return '';
+  }
+
+  return path.join('.');
+}
+const indices = {};
+function generateIndexForType(type) {
+  if (type in indices) {
+    indices[type]++;
+  } else {
+    indices[type] = 1;
+  }
+
+  return indices[type];
+}
+function generateIdForType(type) {
+  return `${type}${generateIndexForType(type)}`;
+}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
+ */
+
+function clone(data, replacer) {
+  return JSON.parse(JSON.stringify(data, replacer));
+}
+
 class Importer {
   /**
    * @constructor
@@ -726,8 +727,8 @@ class Importer {
     const warnings = [];
 
     try {
-      const importedData = clone(data);
-      const importedSchema = this.importFormField(clone(schema), importedData);
+      const importedSchema = this.importFormField(clone(schema)),
+            importedData = this.importData(clone(data));
       return {
         warnings,
         schema: importedSchema,
@@ -740,14 +741,13 @@ class Importer {
   }
   /**
    * @param {any} formField
-   * @param {Object} [data]
    * @param {string} [parentId]
    *
-   * @return {any} field
+   * @return {any} importedField
    */
 
 
-  importFormField(formField, data = {}, parentId) {
+  importFormField(formField, parentId) {
     const {
       components,
       key,
@@ -770,10 +770,13 @@ class Importer {
         throw new Error(`form field with key <${key}> already exists`);
       }
 
-      this._formFieldRegistry._keys.claim(key, formField); // set form field path
+      this._formFieldRegistry._keys.claim(key, formField); // TODO: buttons should not have key
 
 
-      formField._path = [key];
+      if (type !== 'button') {
+        // set form field path
+        formField._path = [key];
+      }
     }
 
     if (id) {
@@ -791,17 +794,44 @@ class Importer {
     this._formFieldRegistry.add(formField);
 
     if (components) {
-      this.importFormFields(components, data, id);
+      this.importFormFields(components, id);
     }
 
     return formField;
   }
 
-  importFormFields(components, data = {}, parentId) {
+  importFormFields(components, parentId) {
     components.forEach(component => {
-      this.importFormField(component, data, parentId);
+      this.importFormField(component, parentId);
     });
   }
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} importedData
+   */
+
+
+  importData(data) {
+    return this._formFieldRegistry.getAll().reduce((importedData, formField) => {
+      const {
+        defaultValue,
+        _path,
+        type
+      } = formField;
+
+      if (!_path) {
+        return importedData;
+      } // (1) try to get value from data
+      // (2) try to get default value from form field
+      // (3) get empty value from form field
+
+
+      return { ...importedData,
+        [_path[0]]: minDash.get(data, _path, minDash.isUndefined(defaultValue) ? this._formFields.get(type).emptyValue : defaultValue)
+      };
+    }, {});
+  }
 
 }
 Importer.$inject = ['formFieldRegistry', 'formFields'];
@@ -1125,6 +1155,7 @@ Checkbox.create = function (options = {}) {
 Checkbox.type = type$5;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
+Checkbox.emptyValue = false;
 
 function useService (type, strict) {
   const {
@@ -1365,7 +1396,7 @@ function Number(props) {
     const parsedValue = parseInt(target.value, 10);
     props.onChange({
       field,
-      value: isNaN(parsedValue) ? undefined : parsedValue
+      value: isNaN(parsedValue) ? null : parsedValue
     });
   };
 
@@ -1401,6 +1432,7 @@ Number.create = function (options = {}) {
 Number.type = type$4;
 Number.keyed = true;
 Number.label = 'Number';
+Number.emptyValue = null;
 
 const type$3 = 'radio';
 function Radio(props) {
@@ -1449,7 +1481,7 @@ function Radio(props) {
           type: "radio",
           onClick: () => onChange(v.value)
         })
-      }, v.value);
+      }, `${id}-${index}`);
     }), jsxRuntime.jsx(Description, {
       description: description
     }), jsxRuntime.jsx(Errors, {
@@ -1471,6 +1503,7 @@ Radio.create = function (options = {}) {
 Radio.type = type$3;
 Radio.label = 'Radio';
 Radio.keyed = true;
+Radio.emptyValue = null;
 
 const type$2 = 'select';
 function Select(props) {
@@ -1496,7 +1529,7 @@ function Select(props) {
   }) => {
     props.onChange({
       field,
-      value: target.value === '' ? undefined : target.value
+      value: target.value === '' ? null : target.value
     });
   };
 
@@ -1517,11 +1550,11 @@ function Select(props) {
       value: value || '',
       children: [jsxRuntime.jsx("option", {
         value: ""
-      }), values.map(v => {
+      }), values.map((v, index) => {
         return jsxRuntime.jsx("option", {
           value: v.value,
           children: v.label
-        }, v.value);
+        }, `${id}-${index}`);
       })]
     }), jsxRuntime.jsx(Description, {
       description: description
@@ -1544,6 +1577,7 @@ Select.create = function (options = {}) {
 Select.type = type$2;
 Select.label = 'Select';
 Select.keyed = true;
+Select.emptyValue = null;
 
 const type$1 = 'text';
 function Text(props) {
@@ -1631,6 +1665,7 @@ Textfield.create = function (options = {}) {
 Textfield.type = type;
 Textfield.label = 'Text Field';
 Textfield.keyed = true;
+Textfield.emptyValue = '';
 
 const formFields = [Button, Checkbox, Default, Number, Radio, Select, Text, Textfield];
 
@@ -1741,6 +1776,10 @@ var core = {
  *   properties: FormProperties,
  *   schema: Schema
  * } } State
+ *
+ * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
 const ids = new Ids__default['default']([32, 36, 1]);
@@ -1754,10 +1793,16 @@ class Form {
    * @param {FormOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {OnEventType}
+     */
+    this.on = this._onEvent;
     /**
      * @public
      * @type {String}
      */
+
     this._id = ids.next();
     /**
      * @private
@@ -1872,21 +1917,22 @@ class Form {
       throw new Error('form is read-only');
     }
 
-    const formFieldRegistry = this.get('formFieldRegistry'); // do not submit disabled form fields
-
+    const formFieldRegistry = this.get('formFieldRegistry');
     const data = formFieldRegistry.getAll().reduce((data, field) => {
       const {
         disabled,
         _path
-      } = field;
+      } = field; // do not submit disabled form fields
 
-      if (disabled) {
-        // strip disabled field value
-        minDash.set(data, _path, undefined);
+      if (disabled || !_path) {
+        return data;
       }
 
-      return data;
-    }, clone(this._getState().data));
+      const value = minDash.get(this._getState().data, _path);
+      return { ...data,
+        [_path[0]]: value
+      };
+    }, {});
     const errors = this.validate();
 
     this._emit('submit', {
@@ -2003,16 +2049,6 @@ class Form {
       properties
     });
   }
-  /**
-   * @param {FormEvent} type
-   * @param {number} priority
-   * @param {Function} handler
-   */
-
-
-  on(type, priority, handler) {
-    this.get('eventBus').on(type, priority, handler);
-  }
   /**
    * @param {FormEvent} type
    * @param {Function} handler
@@ -2107,10 +2143,18 @@ class Form {
 
     this._emit('changed', this._getState());
   }
+  /**
+   * @internal
+   */
+
+
+  _onEvent(type, priority, handler) {
+    this.get('eventBus').on(type, priority, handler);
+  }
 
 }
 
-const schemaVersion = 2;
+const schemaVersion = 4;
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */