@bpmn-io/form-js-viewer 0.12.1 → 0.13.0

package/dist/types/Form.d.ts

@@ -111,6 +111,40 @@ export default class Form {
      * @internal
      */
     _setState(state: any): void;
+    /**
+   * @internal
+   */
+    _getModules(): ({
+        __init__: string[];
+        expressionLanguage: (string | typeof import("./features/expression-language").FeelExpressionLanguage)[];
+        /**
+         * @typedef { import('./types').Injector } Injector
+         * @typedef { import('./types').Data } Data
+         * @typedef { import('./types').Errors } Errors
+         * @typedef { import('./types').Schema } Schema
+         * @typedef { import('./types').FormProperties } FormProperties
+         * @typedef { import('./types').FormProperty } FormProperty
+         * @typedef { import('./types').FormEvent } FormEvent
+         * @typedef { import('./types').FormOptions } FormOptions
+         *
+         * @typedef { {
+         *   data: Data,
+         *   initialData: Data,
+         *   errors: Errors,
+         *   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
+         */
+        templating: (string | typeof import("./features/expression-language").FeelersTemplating)[];
+        conditionChecker: (string | typeof import("./features/expression-language").ConditionChecker)[];
+    } | {
+        __init__: string[];
+        markdownRenderer: (string | typeof import("./features/markdown").MarkdownRenderer)[];
+    })[];
     /**
      * @internal
      */

package/dist/types/core/FormLayouter.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+ */
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
+ */
+declare class FormLayouter {
+    constructor(eventBus: any);
+    /** @type Array<FormRows>  */
+    _rows: FormRows[];
+    _ids: any;
+    _eventBus: any;
+    /**
+     * @param {FormRow} row
+     */
+    addRow(formFieldId: any, row: FormRow): void;
+    /**
+     * @param {String} id
+     * @returns {FormRow}
+     */
+    getRow(id: string): FormRow;
+    /**
+     * @param {any} formField
+     * @returns {FormRow}
+     */
+    getRowForField(formField: any): FormRow;
+    /**
+     * @param {String} formFieldId
+     * @returns { Array<FormRow> }
+     */
+    getRows(formFieldId: string): Array<FormRow>;
+    /**
+     * @returns {string}
+     */
+    nextRowId(): string;
+    /**
+     * @param {any} formField
+     */
+    calculateLayout(formField: any): void;
+    clear(): void;
+}
+declare namespace FormLayouter {
+    const $inject: string[];
+}
+export default FormLayouter;
+export type FormRow = {
+    id: string;
+    components: Array<string>;
+};
+export type FormRows = {
+    formFieldId: string;
+    rows: Array<FormRow>;
+};

package/dist/types/core/index.d.ts

@@ -1,4 +1,3 @@
-export { FormFieldRegistry };
 declare namespace _default {
     const __depends__: ({
         importer: (string | typeof import("../import/Importer").default)[];
@@ -7,12 +6,13 @@ declare namespace _default {
         formFields: (string | typeof import("../render").FormFields)[];
         renderer: (string | typeof import("../render/Renderer").default)[];
     })[];
-    const conditionChecker: (string | typeof ConditionChecker)[];
     const eventBus: any[];
     const formFieldRegistry: (string | typeof FormFieldRegistry)[];
+    const formLayouter: (string | typeof FormLayouter)[];
     const validator: (string | typeof Validator)[];
 }
 export default _default;
-import FormFieldRegistry from "./FormFieldRegistry";
-import { ConditionChecker } from "./ConditionChecker";
-import Validator from "./Validator";
+import FormFieldRegistry from './FormFieldRegistry';
+import FormLayouter from './FormLayouter';
+import Validator from './Validator';
+export { FormFieldRegistry, FormLayouter };

package/dist/types/{core → features/expression-language}/ConditionChecker.d.ts

@@ -2,7 +2,7 @@
  * @typedef {object} Condition
  * @property {string} [hide]
  */
-export class ConditionChecker {
+declare class ConditionChecker {
     constructor(formFieldRegistry: any, eventBus: any);
     _formFieldRegistry: any;
     _eventBus: any;
@@ -23,11 +23,11 @@ export class ConditionChecker {
      * Check if given condition is met. Returns null for invalid/missing conditions.
      *
      * @param {string} condition
-     * @param {import('../types').Data} [data]
+     * @param {import('../../types').Data} [data]
      *
      * @returns {boolean|null}
      */
-    check(condition: string, data?: import('../types').Data): boolean | null;
+    check(condition: string, data?: import('../../types').Data): boolean | null;
     /**
      * Check if hide condition is met.
      *
@@ -38,20 +38,12 @@ export class ConditionChecker {
     _checkHideCondition(condition: Condition, data: {
         [x: string]: any;
     }): boolean;
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../types').Data} [data]
-     *
-     * @returns {any}
-     */
-    evaluate(expression: string, data?: import('../types').Data): any;
     _getConditions(): any;
 }
-export namespace ConditionChecker {
+declare namespace ConditionChecker {
     const $inject: string[];
 }
+export default ConditionChecker;
 export type Condition = {
     hide?: string;
 };

package/dist/types/features/expression-language/FeelExpressionLanguage.d.ts

@@ -0,0 +1,39 @@
+declare class FeelExpressionLanguage {
+    constructor(eventBus: any);
+    _eventBus: any;
+    /**
+     * Determines if the given string is a FEEL expression.
+     *
+     * @param {string} value
+     * @returns {boolean}
+     *
+     */
+    isExpression(value: string): boolean;
+    /**
+     * Retrieve variable names from a given FEEL expression.
+     *
+     * @param {string} expression
+     * @param {object} [options]
+     * @param {string} [options.type]
+     *
+     * @returns {string[]}
+     */
+    getVariableNames(expression: string, options?: {
+        type?: string;
+    }): string[];
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {any}
+     */
+    evaluate(expression: string, data?: import('../../types').Data): any;
+    _getExpressionVariableNames(expression: any): any[];
+    _getUnaryVariableNames(unaryTest: any): any[];
+}
+declare namespace FeelExpressionLanguage {
+    const $inject: string[];
+}
+export default FeelExpressionLanguage;

package/dist/types/features/expression-language/FeelersTemplating.d.ts

@@ -0,0 +1,26 @@
+declare class FeelersTemplating {
+    isTemplate(value: any): boolean;
+    /**
+     * Evaluate a template.
+     *
+     * @param {string} template
+     * @param {Object<string, any>} context
+     * @param {Object} options
+     * @param {boolean} [options.debug = false]
+     * @param {boolean} [options.strict = false]
+     * @param {Function} [options.buildDebugString]
+     *
+     * @returns
+     */
+    evaluate(template: string, context?: {
+        [x: string]: any;
+    }, options?: {
+        debug?: boolean;
+        strict?: boolean;
+        buildDebugString?: Function;
+    }): any;
+}
+declare namespace FeelersTemplating {
+    const $inject: any[];
+}
+export default FeelersTemplating;

package/dist/types/features/expression-language/index.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    const __init__: string[];
+    const expressionLanguage: (string | typeof FeelExpressionLanguage)[];
+    const templating: (string | typeof FeelersTemplating)[];
+    const conditionChecker: (string | typeof ConditionChecker)[];
+}
+export default _default;
+import FeelExpressionLanguage from './FeelExpressionLanguage';
+import FeelersTemplating from './FeelersTemplating';
+import ConditionChecker from './ConditionChecker';
+export { FeelExpressionLanguage, FeelersTemplating, ConditionChecker };

package/dist/types/features/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ExpressionLanguageModule } from "./expression-language";
+export { default as MarkdownModule } from "./markdown";
+export * from "./expression-language";
+export * from "./markdown";

package/dist/types/features/markdown/MarkdownRenderer.d.ts

@@ -0,0 +1,15 @@
+declare class MarkdownRenderer {
+    _converter: any;
+    /**
+     * Render markdown to HTML.
+     *
+     * @param {string} markdown - The markdown to render
+     *
+     * @returns {string} HTML
+     */
+    render(markdown: string): string;
+}
+declare namespace MarkdownRenderer {
+    const $inject: any[];
+}
+export default MarkdownRenderer;

package/dist/types/features/markdown/index.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const __init__: string[];
+    const markdownRenderer: (string | typeof MarkdownRenderer)[];
+}
+export default _default;
+export { MarkdownRenderer };
+import MarkdownRenderer from './MarkdownRenderer';

package/dist/types/import/Importer.d.ts

@@ -3,10 +3,12 @@ declare class Importer {
      * @constructor
      * @param { import('../core').FormFieldRegistry } formFieldRegistry
      * @param { import('../render/FormFields').default } formFields
+     * @param { import('../core').FormLayouter } formLayouter
      */
-    constructor(formFieldRegistry: import('../core').FormFieldRegistry, formFields: import('../render/FormFields').default);
+    constructor(formFieldRegistry: import('../core').FormFieldRegistry, formFields: import('../render/FormFields').default, formLayouter: import('../core').FormLayouter);
     _formFieldRegistry: import("../core").FormFieldRegistry;
     _formFields: import("../render/FormFields").default;
+    _formLayouter: import("../core").FormLayouter;
     /**
      * Import schema adding `id`, `_parent` and `_path`
      * information to each field and adding it to the

package/dist/types/import/index.d.ts

@@ -2,4 +2,4 @@ declare namespace _default {
     const importer: (string | typeof Importer)[];
 }
 export default _default;
-import Importer from "./Importer";
+import Importer from './Importer';

package/dist/types/index.d.ts

@@ -9,10 +9,11 @@
  * @return {Promise<Form>}
  */
 export function createForm(options: CreateFormOptions): Promise<Form>;
-export { FormFieldRegistry } from "./core";
 export * from "./render";
 export * from "./util";
+export * from "./features";
 export type CreateFormOptions = import('./types').CreateFormOptions;
-import Form from "./Form";
-export const schemaVersion: 7;
+import Form from './Form';
+export const schemaVersion: 8;
 export { Form };
+export { FormFieldRegistry, FormLayouter } from "./core";

package/dist/types/render/components/Sanitizer.d.ts

@@ -5,4 +5,13 @@
  * @return {string}
  */
 export function sanitizeHTML(html: string): string;
-export function sanitizeImageSource(src: any): any;
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
+ */
+export function sanitizeImageSource(src: string): string;

package/dist/types/render/components/Util.d.ts

@@ -2,16 +2,5 @@ export function formFieldClasses(type: any, { errors, disabled }?: {
     errors?: any[];
     disabled?: boolean;
 }): string;
+export function gridColumnClasses(formField: any): string;
 export function prefixId(id: any, formId: any): string;
-export function markdownToHTML(markdown: any): any;
-export function safeMarkdown(markdown: any): string;
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
- */
-export function safeImageSource(src: string): string;

package/dist/types/render/components/form-fields/Checklist.d.ts

@@ -15,4 +15,4 @@ declare namespace Checklist {
 }
 export default Checklist;
 declare const type: "checklist";
-import { sanitizeMultiSelectValue } from "../util/sanitizerUtil";
+import { sanitizeMultiSelectValue } from '../util/sanitizerUtil';

package/dist/types/render/components/form-fields/Datetime.d.ts

@@ -10,4 +10,4 @@ declare namespace Datetime {
 }
 export default Datetime;
 declare const type: "datetime";
-import { sanitizeDateTimePickerValue } from "../util/sanitizerUtil";
+import { sanitizeDateTimePickerValue } from '../util/sanitizerUtil';

package/dist/types/render/components/form-fields/Radio.d.ts

@@ -15,4 +15,4 @@ declare namespace Radio {
 }
 export default Radio;
 declare const type: "radio";
-import { sanitizeSingleSelectValue } from "../util/sanitizerUtil";
+import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';

package/dist/types/render/components/form-fields/Select.d.ts

@@ -15,4 +15,4 @@ declare namespace Select {
 }
 export default Select;
 declare const type: "select";
-import { sanitizeSingleSelectValue } from "../util/sanitizerUtil";
+import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';

package/dist/types/render/components/form-fields/Taglist.d.ts

@@ -15,4 +15,4 @@ declare namespace Taglist {
 }
 export default Taglist;
 declare const type: "taglist";
-import { sanitizeMultiSelectValue } from "../util/sanitizerUtil";
+import { sanitizeMultiSelectValue } from '../util/sanitizerUtil';

package/dist/types/render/components/index.d.ts

@@ -1,17 +1,17 @@
 export const formFields: (typeof Default | typeof Image)[];
 export * from "./icons";
-import Button from "./form-fields/Button";
-import Checkbox from "./form-fields/Checkbox";
-import Checklist from "./form-fields/Checklist";
-import Default from "./form-fields/Default";
-import Datetime from "./form-fields/Datetime";
-import FormComponent from "./FormComponent";
-import Image from "./form-fields/Image";
-import Numberfield from "./form-fields/Number";
-import Radio from "./form-fields/Radio";
-import Select from "./form-fields/Select";
-import Taglist from "./form-fields/Taglist";
-import Text from "./form-fields/Text";
-import Textfield from "./form-fields/Textfield";
-import Textarea from "./form-fields/Textarea";
+import Button from './form-fields/Button';
+import Checkbox from './form-fields/Checkbox';
+import Checklist from './form-fields/Checklist';
+import Default from './form-fields/Default';
+import Datetime from './form-fields/Datetime';
+import FormComponent from './FormComponent';
+import Image from './form-fields/Image';
+import Numberfield from './form-fields/Number';
+import Radio from './form-fields/Radio';
+import Select from './form-fields/Select';
+import Taglist from './form-fields/Taglist';
+import Text from './form-fields/Text';
+import Textfield from './form-fields/Textfield';
+import Textarea from './form-fields/Textarea';
 export { Button, Checkbox, Checklist, Default, Datetime, FormComponent, Image, Numberfield, Radio, Select, Taglist, Text, Textfield, Textarea };

package/dist/types/render/components/util/valuesUtil.d.ts

@@ -0,0 +1,2 @@
+export function getValuesData(formField: any, formData: any): any;
+export function normalizeValuesData(valuesData: any): any;

package/dist/types/render/context/FormRenderContext.d.ts

@@ -1,6 +1,8 @@
 export default FormRenderContext;
 declare const FormRenderContext: import("preact").Context<{
     Empty: (props: any) => any;
-    Children: (props: any) => any;
-    Element: (props: any) => any;
+    Children: (props: any) => import("preact").JSX.Element;
+    Element: (props: any) => import("preact").JSX.Element;
+    Row: (props: any) => import("preact").JSX.Element;
+    Column: (props: any) => any;
 }>;

package/dist/types/render/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { default as useCondition } from "./useCondition";
+export { default as useExpressionEvaluation } from "./useExpressionEvaluation";
+export { default as useFilteredFormData } from "./useFilteredFormData";
+export { default as useKeyDownAction } from "./useKeyDownAction";
+export { default as useService } from "./useService";
+export { default as useTemplateEvaluation } from "./useTemplateEvaluation";

package/dist/types/render/hooks/useCondition.d.ts

@@ -1,9 +1,8 @@
 /**
- * Check if condition is met with given variables.
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
  *
  * @param {string | undefined} condition
- * @param {import('../../types').Data} data
  *
  * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
-export function useCondition(condition: string | undefined, data: import('../../types').Data): boolean;
+export default function useCondition(condition: string | undefined): boolean;

package/dist/types/render/hooks/useExpressionEvaluation.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
+ */
+export default function useExpressionEvaluation(value: string): any;

package/dist/types/render/hooks/useFilteredFormData.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
+ */
+export default function useFilteredFormData(): any;

package/dist/types/render/hooks/useService.d.ts

@@ -1 +1 @@
-export default function _default(type: any, strict: any): any;
+export default function useService(type: any, strict: any): any;

package/dist/types/render/hooks/useTemplateEvaluation.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
+ */
+export default function useTemplateEvaluation(value: string, options: {
+    debug?: boolean;
+    strict?: boolean;
+    buildDebugString?: Function;
+}): any;

package/dist/types/render/index.d.ts

@@ -7,5 +7,5 @@ declare namespace _default {
     const renderer: (string | typeof Renderer)[];
 }
 export default _default;
-import FormFields from "./FormFields";
-import Renderer from "./Renderer";
+import FormFields from './FormFields';
+import Renderer from './Renderer';

package/dist/types/util/index.d.ts

@@ -19,8 +19,8 @@ export function clone<T>(data: T, replacer?: (this: any, key: string, value: any
  *
  * @return {string[]}
  */
-export function getSchemaVariables(schema: any): string[];
+export function getSchemaVariables(schema: any, expressionLanguage?: FeelExpressionLanguage): string[];
 export * from "./constants";
 export * from "./injector";
 export * from "./form";
-export * from "./feel";
+import FeelExpressionLanguage from '../features/expression-language/FeelExpressionLanguage.js';

package/dist/types/util/injector.d.ts

@@ -1,2 +1,2 @@
 export function createInjector(bootstrapModules: any): Injector;
-import { Injector } from "didi";
+import { Injector } from 'didi';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-viewer",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "View forms - powered by bpmn.io",
   "exports": {
     ".": {
@@ -8,7 +8,7 @@
       "require": "./dist/index.cjs"
     },
     "./dist/assets/form-js.css": "./dist/assets/form-js.css",
-    "./dist/assets/flatpickr/light.css": "./dist/assets/flatpickr/light.css",
+    "./dist/assets/form-js-base.css": "./dist/assets/form-js-base.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -19,10 +19,13 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "all": "run-s test build",
-    "build": "run-p bundle generate-types",
+    "build": "run-p bundle bundle:scss generate-types",
     "start": "SINGLE_START=basic npm run dev",
     "bundle": "rollup -c --failAfterWarnings --bundleConfigAsCjs",
-    "bundle:watch": "rollup -c -w --bundleConfigAsCjs",
+    "bundle:scss": "sass --no-source-map --load-path=\"../../node_modules\" assets/index.scss dist/assets/form-js.css",
+    "bundle:watch": "run-p bundle:watch-js bundle:watch-scss",
+    "bundle:watch-js": "rollup -c -w --bundleConfigAsCjs",
+    "bundle:watch-scss": "npm run bundle:scss -- --watch",
     "dev": "npm test -- --auto-watch --no-single-run",
     "generate-types": "tsc --allowJs --skipLibCheck --declaration --emitDeclarationOnly --outDir dist/types src/index.js && copyfiles --flat src/*.d.ts dist/types",
     "test": "karma start",
@@ -39,7 +42,7 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/snarkdown": "^2.1.0",
+    "@carbon/grid": "^11.11.0",
     "big.js": "^6.2.1",
     "classnames": "^2.3.1",
     "didi": "^9.0.0",
@@ -48,7 +51,8 @@
     "ids": "^1.0.0",
     "min-dash": "^4.0.0",
     "preact": "^10.5.14",
-    "preact-markup": "^2.1.1"
+    "preact-markup": "^2.1.1",
+    "showdown": "^2.1.0"
   },
   "sideEffects": [
     "*.css"
@@ -56,5 +60,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "e4a01e3215209858258b2fb83dfc09b86fccc0db"
+  "gitHead": "580e837b1daddd43fcbc24e9fa4bbaf358825692"
 }