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

package/dist/types/FormEditor.d.ts

@@ -118,10 +118,14 @@ export default class FormEditor {
     _getModules(): ({
         __depends__: any[];
         __init__: string[];
+        formLayoutUpdater: (string | typeof import("./features/modeling/FormLayoutUpdater").default)[];
         modeling: (string | typeof import("./features/modeling/Modeling").default)[];
     } | {
         __depends__: any[];
         editorActions: (string | typeof import("./features/editor-actions/FormEditorActions").default)[];
+    } | {
+        __init__: string[];
+        dragging: (string | typeof import("./features/dragging/Dragging").default)[];
     } | {
         __depends__: any[];
         __init__: string[];
@@ -133,6 +137,10 @@ export default class FormEditor {
     } | {
         palette: (string | typeof import("./features/palette/PaletteRenderer").default)[];
     } | {
+        __init__: string[];
+        expressionLanguage: (string | typeof import("@bpmn-io/form-js-viewer/dist/types/features/expression-language/FeelExpressionLanguage").default)[];
+        templating: (string | typeof import("@bpmn-io/form-js-viewer/dist/types/features/expression-language/FeelersTemplating").default)[];
+    } | typeof MarkdownModule | {
         __init__: string[];
         propertiesPanel: (string | typeof import("./features/properties-panel/PropertiesPanelRenderer").default)[];
     })[];
@@ -153,3 +161,4 @@ export type State = {
 export type OnEventWithPriority = (type: string, priority: number, handler: Function) => void;
 export type OnEventWithOutPriority = (type: string, handler: Function) => void;
 export type OnEventType = OnEventWithPriority & OnEventWithOutPriority;
+import { MarkdownModule } from '@bpmn-io/form-js-viewer';

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

@@ -16,4 +16,4 @@ export default class FormFieldRegistry extends BaseFieldRegistry {
      */
     _validateId(id: string): void;
 }
-import { FormFieldRegistry as BaseFieldRegistry } from "@bpmn-io/form-js-viewer";
+import { FormFieldRegistry as BaseFieldRegistry } from '@bpmn-io/form-js-viewer';

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

@@ -0,0 +1,16 @@
+declare class FormLayoutValidator {
+    /**
+     * @constructor
+     *
+     * @param { import('./FormLayouter').default } formLayouter
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     */
+    constructor(formLayouter: import('./FormLayouter').default, formFieldRegistry: import('./FormFieldRegistry').default);
+    _formLayouter: import("@bpmn-io/form-js-viewer/dist/types/core/FormLayouter").default;
+    _formFieldRegistry: import("./FormFieldRegistry").default;
+    validateField(field: {}, columns: any, row: any): "Minimum 2 columns are allowed" | "Maximum 16 columns are allowed" | "New value exceeds the maximum of 16 columns per row" | "Maximum 4 fields per row are allowed";
+}
+declare namespace FormLayoutValidator {
+    const $inject: string[];
+}
+export default FormLayoutValidator;

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

@@ -0,0 +1 @@
+export { FormLayouter as default } from "@bpmn-io/form-js-viewer";

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

@@ -6,12 +6,16 @@ declare namespace _default {
         formFields: (string | typeof import("../render/EditorFormFields").default)[];
         renderer: (string | typeof import("../render/Renderer").default)[];
     })[];
+    const debounce: (string | typeof DebounceFactory)[];
     const eventBus: any[];
     const formFieldRegistry: (string | typeof FormFieldRegistry)[];
+    const formLayouter: (string | typeof FormLayouter)[];
+    const formLayoutValidator: (string | typeof FormLayoutValidator)[];
     const fieldFactory: (string | typeof FieldFactory)[];
-    const debounce: (string | typeof DebounceFactory)[];
 }
 export default _default;
-import FormFieldRegistry from "./FormFieldRegistry";
-import FieldFactory from "./FieldFactory";
-import DebounceFactory from "./Debounce";
+import DebounceFactory from './Debounce';
+import FormFieldRegistry from './FormFieldRegistry';
+import FormLayouter from './FormLayouter';
+import FormLayoutValidator from './FormLayoutValidator';
+import FieldFactory from './FieldFactory';

package/dist/types/features/dragging/Dragging.d.ts

@@ -0,0 +1,60 @@
+export const DRAG_CONTAINER_CLS: "fjs-drag-container";
+export const DROP_CONTAINER_VERTICAL_CLS: "fjs-drop-container-vertical";
+export const DROP_CONTAINER_HORIZONTAL_CLS: "fjs-drop-container-horizontal";
+export const DRAG_MOVE_CLS: "fjs-drag-move";
+export const DRAG_ROW_MOVE_CLS: "fjs-drag-row-move";
+export const DRAG_COPY_CLS: "fjs-drag-copy";
+export const DRAG_NO_DROP_CLS: "fjs-no-drop";
+export const DRAG_NO_MOVE_CLS: "fjs-no-move";
+export const ERROR_DROP_CLS: "fjs-error-drop";
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
+ */
+declare class Dragging {
+    /**
+     * @constructor
+     *
+     * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../../core/FormLayouter').default } formLayouter
+     * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+     * @param { import('../../core/EventBus').default } eventBus
+     * @param { import('../modeling/Modeling').default } modeling
+     */
+    constructor(formFieldRegistry: import('../../core/FormFieldRegistry').default, formLayouter: import('../../core/FormLayouter').default, formLayoutValidator: import('../../core/FormLayoutValidator').default, eventBus: any, modeling: import('../modeling/Modeling').default);
+    _formFieldRegistry: import("../../core/FormFieldRegistry").default;
+    _formLayouter: import("@bpmn-io/form-js-viewer/dist/types/core/FormLayouter").default;
+    _formLayoutValidator: import("../../core/FormLayoutValidator").default;
+    _eventBus: any;
+    _modeling: import("../modeling/Modeling").default;
+    /**
+     * Calculcates position in form schema given the dropped place.
+     *
+     * @param { FormRow } targetRow
+     * @param { any } targetFormField
+     * @param { HTMLElement } sibling
+     * @returns { number }
+     */
+    getTargetIndex(targetRow: FormRow, targetFormField: any, sibling: HTMLElement): number;
+    validateDrop(element: any, target: any): "Minimum 2 columns are allowed" | "Maximum 16 columns are allowed" | "New value exceeds the maximum of 16 columns per row" | "Maximum 4 fields per row are allowed";
+    moveField(element: any, source: any, targetRow: any, targetFormField: any, targetIndex: any): void;
+    createNewField(element: any, targetRow: any, targetFormField: any, targetIndex: any): void;
+    handleRowDrop(el: any, target: any, source: any, sibling: any): void;
+    handleElementDrop(el: any, target: any, source: any, sibling: any, drake: any): any;
+    /**
+     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+     */
+    createDragulaInstance(options: {
+        container: Array<string>;
+        direction: string;
+        mirrorContainer: string;
+    }): any;
+    emit(event: any, context: any): void;
+}
+declare namespace Dragging {
+    const $inject: string[];
+}
+export default Dragging;
+export type FormRow = {
+    id: string;
+    components: Array<any>;
+};

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

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

package/dist/types/features/editor-actions/index.d.ts

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

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

@@ -0,0 +1,8 @@
+declare namespace _default {
+    const __init__: string[];
+    const expressionLanguage: (string | typeof FeelExpressionLanguage)[];
+    const templating: (string | typeof FeelersTemplating)[];
+}
+export default _default;
+import { FeelExpressionLanguage } from '@bpmn-io/form-js-viewer';
+import { FeelersTemplating } from '@bpmn-io/form-js-viewer';

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

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

package/dist/types/features/modeling/FormLayoutUpdater.d.ts

@@ -0,0 +1,13 @@
+declare class FormLayoutUpdater {
+    constructor(eventBus: any, formLayouter: any, modeling: any, formEditor: any);
+    _eventBus: any;
+    _formLayouter: any;
+    _modeling: any;
+    _formEditor: any;
+    updateLayout(schema: any): void;
+    updateRowIds(event: any): void;
+}
+declare namespace FormLayoutUpdater {
+    const $inject: string[];
+}
+export default FormLayoutUpdater;

package/dist/types/features/modeling/Modeling.d.ts

@@ -15,7 +15,7 @@ declare class Modeling {
     };
     addFormField(attrs: any, targetFormField: any, targetIndex: any): any;
     editFormField(formField: any, properties: any, value: any): void;
-    moveFormField(formField: any, sourceFormField: any, targetFormField: any, sourceIndex: any, targetIndex: any): void;
+    moveFormField(formField: any, sourceFormField: any, targetFormField: any, sourceIndex: any, targetIndex: any, sourceRow: any, targetRow: any): void;
     removeFormField(formField: any, sourceFormField: any, sourceIndex: any): void;
     claimId(formField: any, id: any): void;
     unclaimId(formField: any, id: any): void;
@@ -26,9 +26,9 @@ declare namespace Modeling {
     const $inject: string[];
 }
 export default Modeling;
-import AddFormFieldHandler from "./cmd/AddFormFieldHandler";
-import EditFormFieldHandler from "./cmd/EditFormFieldHandler";
-import MoveFormFieldHandler from "./cmd/MoveFormFieldHandler";
-import RemoveFormFieldHandler from "./cmd/RemoveFormFieldHandler";
-import UpdateIdClaimHandler from "./cmd/UpdateIdClaimHandler";
-import UpdateKeyClaimHandler from "./cmd/UpdateKeyClaimHandler";
+import AddFormFieldHandler from './cmd/AddFormFieldHandler';
+import EditFormFieldHandler from './cmd/EditFormFieldHandler';
+import MoveFormFieldHandler from './cmd/MoveFormFieldHandler';
+import RemoveFormFieldHandler from './cmd/RemoveFormFieldHandler';
+import UpdateIdClaimHandler from './cmd/UpdateIdClaimHandler';
+import UpdateKeyClaimHandler from './cmd/UpdateKeyClaimHandler';

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

@@ -5,6 +5,6 @@ declare namespace _default {
     const validateBehavior: (string | typeof ValidateBehavior)[];
 }
 export default _default;
-import IdBehavior from "./IdBehavior";
-import KeyBehavior from "./KeyBehavior";
-import ValidateBehavior from "./ValidateBehavior";
+import IdBehavior from './IdBehavior';
+import KeyBehavior from './KeyBehavior';
+import ValidateBehavior from './ValidateBehavior';

package/dist/types/features/modeling/cmd/Util.d.ts

@@ -1,4 +1,5 @@
 export function arrayAdd(array: any, index: any, item: any): any;
 export function arrayRemove(array: any, index: any): any;
 export function updatePath(formFieldRegistry: any, formField: any, index: any): any;
+export function updateRow(formField: any, rowId: any): any;
 export { mutate as arrayMove } from "array-move";

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

@@ -1,7 +1,9 @@
 declare namespace _default {
     const __depends__: any[];
     const __init__: string[];
+    const formLayoutUpdater: (string | typeof FormLayoutUpdater)[];
     const modeling: (string | typeof Modeling)[];
 }
 export default _default;
-import Modeling from "./Modeling";
+import FormLayoutUpdater from './FormLayoutUpdater';
+import Modeling from './Modeling';

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

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

package/dist/types/features/properties-panel/entries/ColumnsEntry.d.ts

@@ -1,9 +1,10 @@
 export default function ColumnsEntry(props: any): {
     id: string;
     component: typeof Columns;
-    editField: any;
     field: any;
+    editField: any;
     isEdited: any;
 }[];
+export const AUTO_OPTION_VALUE: "";
 declare function Columns(props: any): any;
 export {};

package/dist/types/features/properties-panel/entries/DefaultValueEntry.d.ts

@@ -1 +1,2 @@
 export default function DefaultOptionEntry(props: any): any[];
+export const EMPTY_OPTION: any;

package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts

@@ -2,7 +2,7 @@ export default function InputKeyValuesSourceEntry(props: any): {
     id: string;
     component: typeof InputValuesKey;
     label: string;
-    description: string;
+    description: any;
     isEdited: any;
     editField: any;
     field: any;

package/dist/types/features/properties-panel/entries/SelectEntries.d.ts

@@ -4,6 +4,7 @@ export default function SelectEntries(props: any): {
     path: any;
     field: any;
     editField: any;
+    description: any;
     component: (props: any) => any;
     isEdited: any;
 }[];

package/dist/types/features/properties-panel/entries/factories/simpleBoolEntryFactory.d.ts

@@ -4,6 +4,7 @@ export default function simpleBoolEntryFactory(options: any): {
     path: any;
     field: any;
     editField: any;
+    description: any;
     component: (props: any) => any;
     isEdited: any;
 };

package/dist/types/features/properties-panel/groups/GeneralGroup.d.ts

@@ -1,4 +1,4 @@
-export default function GeneralGroup(field: any, editField: any): {
+export default function GeneralGroup(field: any, editField: any, getService: any): {
     id: string;
     label: string;
     entries: any[];

package/dist/types/features/properties-panel/groups/LayoutGroup.d.ts

@@ -0,0 +1,11 @@
+export default function LayoutGroup(field: any, editField: any): {
+    id: string;
+    label: string;
+    entries: {
+        id: string;
+        component: (props: any) => any;
+        field: any;
+        editField: any;
+        isEdited: any;
+    }[];
+};

package/dist/types/features/properties-panel/groups/index.d.ts

@@ -5,4 +5,5 @@ export { default as ValidationGroup } from "./ValidationGroup";
 export { default as ValuesGroups } from "./ValuesGroups";
 export { default as CustomValuesGroup } from "./CustomValuesGroup";
 export { default as AppearanceGroup } from "./AppearanceGroup";
+export { default as LayoutGroup } from "./LayoutGroup";
 export { ConditionGroup } from "./ConditionGroup";

package/dist/types/features/properties-panel/index.d.ts

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

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

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

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

@@ -3,12 +3,14 @@ declare class Importer {
      * @constructor
      * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
      * @param { import('../core/FieldFactory').default } fieldFactory
+     * @param { import('../core/FormLayouter').default } formLayouter
      */
-    constructor(formFieldRegistry: import('../core/FormFieldRegistry').default, fieldFactory: import('../core/FieldFactory').default);
+    constructor(formFieldRegistry: import('../core/FormFieldRegistry').default, fieldFactory: import('../core/FieldFactory').default, formLayouter: import('../core/FormLayouter').default);
     _formFieldRegistry: import("../core/FormFieldRegistry").default;
     _fieldFactory: import("../core/FieldFactory").default;
+    _formLayouter: import("@bpmn-io/form-js-viewer/dist/types/core/FormLayouter").default;
     /**
-     * Import schema creating fields, attaching additional
+     * Import schema creating rows, fields, attaching additional
      * information to each field and adding fields to the
      * field registry.
      *

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

@@ -10,6 +10,6 @@
  */
 export function createFormEditor(options: CreateFormEditorOptions): Promise<FormEditor>;
 export type CreateFormEditorOptions = import('./types').CreateFormEditorOptions;
-import FormEditor from "./FormEditor";
-import { schemaVersion } from "@bpmn-io/form-js-viewer";
+import FormEditor from './FormEditor';
+import { schemaVersion } from '@bpmn-io/form-js-viewer';
 export { FormEditor, schemaVersion };

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

@@ -1,3 +1,3 @@
 export default class EditorFormFields extends FormFields {
 }
-import { FormFields } from "@bpmn-io/form-js-viewer/dist/types/render";
+import { FormFields } from '@bpmn-io/form-js-viewer';

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

@@ -0,0 +1 @@
+export function FieldDragPreview(props: any): any;

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

@@ -5,4 +5,4 @@ declare namespace EditorText {
     const keyed: boolean;
 }
 export default EditorText;
-import { Text } from "@bpmn-io/form-js-viewer/dist/types/render/components";
+import { Text } from '@bpmn-io/form-js-viewer';

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

@@ -1,2 +1,2 @@
 export const editorFormFields: (typeof EditorText)[];
-import EditorText from "./EditorText";
+import EditorText from './EditorText';

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

@@ -1,2 +1,2 @@
 export { iconsByType } from "@bpmn-io/form-js-viewer";
-export { CloseIcon, SearchIcon };
+export { CloseIcon, DraggableIcon, SearchIcon };

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

@@ -0,0 +1,3 @@
+export { default as useService } from "./useService";
+export { default as usePrevious } from "./usePrevious";
+export { default as useDebounce } from "./useDebounce";

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

@@ -0,0 +1 @@
+export default function useDebounce(fn: any, dependencies?: any[]): any;

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

@@ -0,0 +1 @@
+export default function usePrevious(value: any): any;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-editor",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Edit forms - powered by bpmn.io",
   "exports": {
     ".": {
@@ -8,8 +8,7 @@
       "require": "./dist/index.cjs"
     },
     "./dist/assets/form-js-editor.css": "./dist/assets/form-js-editor.css",
-    "./dist/assets/dragula.css": "./dist/assets/dragula.css",
-    "./dist/assets/properties-panel.css": "./dist/assets/properties-panel.css",
+    "./dist/assets/form-js-editor-base.css": "./dist/assets/form-js-editor-base.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -20,9 +19,12 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "all": "run-s lint test build",
-    "build": "run-p bundle generate-types",
+    "build": "run-p bundle bundle:scss generate-types",
     "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-editor.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",
     "example:dev": "cd example && npm start",
     "lint": "run-s lint:*",
@@ -42,8 +44,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-viewer": "^0.12.1",
-    "@bpmn-io/properties-panel": "^1.2.0",
+    "@bpmn-io/form-js-viewer": "^0.13.0",
+    "@bpmn-io/properties-panel": "^1.7.0",
     "array-move": "^3.0.1",
     "big.js": "^6.2.1",
     "dragula": "^3.7.3",
@@ -58,5 +60,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "e4a01e3215209858258b2fb83dfc09b86fccc0db"
+  "gitHead": "580e837b1daddd43fcbc24e9fa4bbaf358825692"
 }

package/dist/assets/dragula.css

@@ -1,22 +0,0 @@
-.gu-mirror {
-  position: fixed !important;
-  margin: 0 !important;
-  z-index: 9999 !important;
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-}
-.gu-hide {
-  display: none !important;
-}
-.gu-unselectable {
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-  user-select: none !important;
-}
-.gu-transit {
-  opacity: 0.2;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-  filter: alpha(opacity=20);
-}