Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@bpmn-io/form-js-editor

Package Overview
Dependencies
Maintainers
6
Versions
109
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bpmn-io/form-js-editor - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

dist/types/core/FormEditorCore.d.ts
dist/types/core/index.d.ts
dist/types/index.d.ts
dist/types/rendering/context/DragAndDropContext.d.ts
dist/types/rendering/context/FormEditorContext.d.ts
dist/types/rendering/context/index.d.ts
dist/types/rendering/context/SelectionContext.d.ts
dist/types/rendering/FormEditor.d.ts
dist/types/rendering/FormEditorRenderer.d.ts
dist/types/rendering/index.d.ts
dist/types/rendering/palette/icons/index.d.ts
dist/types/rendering/palette/Palette.d.ts
dist/types/rendering/properties-panel/components/CheckboxInput.d.ts
dist/types/rendering/properties-panel/components/CheckboxInputEntry.d.ts
dist/types/rendering/properties-panel/components/CollapsibleEntry.d.ts
dist/types/rendering/properties-panel/components/Group.d.ts
dist/types/rendering/properties-panel/components/index.d.ts
dist/types/rendering/properties-panel/components/NumberInput.d.ts
dist/types/rendering/properties-panel/components/NumberInputEntry.d.ts
dist/types/rendering/properties-panel/components/Select.d.ts
dist/types/rendering/properties-panel/components/Textarea.d.ts
dist/types/rendering/properties-panel/components/TextareaEntry.d.ts
dist/types/rendering/properties-panel/components/TextInput.d.ts
dist/types/rendering/properties-panel/components/TextInputEntry.d.ts
dist/types/rendering/properties-panel/entries/ActionEntry.d.ts
dist/types/rendering/properties-panel/entries/ColumnsEntry.d.ts
dist/types/rendering/properties-panel/entries/DescriptionEntry.d.ts
dist/types/rendering/properties-panel/entries/index.d.ts
dist/types/rendering/properties-panel/entries/KeyEntry.d.ts
dist/types/rendering/properties-panel/entries/LabelEntry.d.ts
dist/types/rendering/properties-panel/entries/TextEntry.d.ts
dist/types/rendering/properties-panel/entries/ValueEntry.d.ts
dist/types/rendering/properties-panel/groups/GeneralGroup.d.ts
dist/types/rendering/properties-panel/groups/index.d.ts
dist/types/rendering/properties-panel/groups/ValidationGroup.d.ts
dist/types/rendering/properties-panel/groups/ValuesGroup.d.ts
dist/types/rendering/properties-panel/icons/index.d.ts
dist/types/rendering/properties-panel/PropertiesPanel.d.ts
dist/types/rendering/properties-panel/Util.d.ts

1095

dist/index.es.js

@@ -1,216 +0,12 @@

import { importSchema, clone, exportSchema, DefaultRenderer, FormContext as FormContext$1, FormRenderContext, Form, findFieldRenderer, fields } from '@bpmn-io/form-js-viewer';
import { importSchema, clone, DefaultRenderer, FormContext, FormRenderContext, Form, findFieldRenderer, fields, schemaVersion } from '@bpmn-io/form-js-viewer';
export { schemaVersion } from '@bpmn-io/form-js-viewer';
import mitt from 'mitt';
import { get, set, debounce as debounce$1 } from 'min-dash';
import arrayMove from 'array-move';
import { createContext, Fragment, render } from 'preact';
import { useState, useContext, useCallback, useMemo, useEffect } from 'preact/hooks';
import { useContext, useState, useEffect, useCallback } from 'preact/hooks';
import React from 'preact/compat';
import { jsxs, jsx } from 'preact/jsx-runtime';
import { jsxs, jsx, Fragment as Fragment$1 } from 'preact/jsx-runtime';
import dragula from 'dragula';
function mitt (n) {
return {
all: n = n || new Map(),
on: function (t, e) {
var i = n.get(t);
i && i.push(e) || n.set(t, [e]);
},
off: function (t, e) {
var i = n.get(t);
i && i.splice(i.indexOf(e) >>> 0, 1);
},
emit: function (t, e) {
(n.get(t) || []).slice().map(function (n) {
n(e);
}), (n.get("*") || []).slice().map(function (n) {
n(t, e);
});
}
};
}
/**
* Flatten array, one level deep.
*
* @param {Array<?>} arr
*
* @return {Array<?>}
*/
var nativeToString = Object.prototype.toString;
var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
function isUndefined(obj) {
return obj === undefined;
}
function isDefined(obj) {
return obj !== undefined;
}
function isNil(obj) {
return obj == null;
}
function isArray(obj) {
return nativeToString.call(obj) === '[object Array]';
}
/**
* Return true, if target owns a property with the given key.
*
* @param {Object} target
* @param {String} key
*
* @return {Boolean}
*/
function has(target, key) {
return nativeHasOwnProperty.call(target, key);
}
/**
* Iterate over collection; returning something
* (non-undefined) will stop iteration.
*
* @param {Array|Object} collection
* @param {Function} iterator
*
* @return {Object} return result that stopped the iteration
*/
function forEach(collection, iterator) {
var val, result;
if (isUndefined(collection)) {
return;
}
var convertKey = isArray(collection) ? toNum : identity;
for (var key in collection) {
if (has(collection, key)) {
val = collection[key];
result = iterator(val, convertKey(key));
if (result === false) {
return val;
}
}
}
}
function identity(arg) {
return arg;
}
function toNum(arg) {
return Number(arg);
}
/**
* Debounce fn, calling it only once if
* the given time elapsed between calls.
*
* @param {Function} fn
* @param {Number} timeout
*
* @return {Function} debounced function
*/
function debounce(fn, timeout) {
var timer;
var lastArgs;
var lastThis;
var lastNow;
function fire() {
var now = Date.now();
var scheduledDiff = lastNow + timeout - now;
if (scheduledDiff > 0) {
return schedule(scheduledDiff);
}
fn.apply(lastThis, lastArgs);
timer = lastNow = lastArgs = lastThis = undefined;
}
function schedule(timeout) {
timer = setTimeout(fire, timeout);
}
return function () {
lastNow = Date.now();
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
lastArgs = args;
lastThis = this; // ensure an execution is scheduled
if (!timer) {
schedule(timeout);
}
};
}
/**
* Sets a nested property of a given object to the specified value.
*
* This mutates the object and returns it.
*
* @param {Object} target The target of the set operation.
* @param {(string|number)[]} path The path to the nested value.
* @param {any} value The value to set.
*/
function set(target, path, value) {
var currentTarget = target;
forEach(path, function (key, idx) {
if (key === '__proto__') {
throw new Error('illegal key: __proto__');
}
var nextKey = path[idx + 1];
var nextTarget = currentTarget[key];
if (isDefined(nextKey) && isNil(nextTarget)) {
nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
}
if (isUndefined(nextKey)) {
if (isUndefined(value)) {
delete currentTarget[key];
} else {
currentTarget[key] = value;
}
} else {
currentTarget = nextTarget;
}
});
return target;
}
/**
* Gets a nested property of a given object.
*
* @param {Object} target The target of the get operation.
* @param {(string|number)[]} path The path to the nested value.
* @param {any} [defaultValue] The value to return if no value exists.
*/
function get(target, path, defaultValue) {
var currentTarget = target;
forEach(path, function (key) {
// accessing nil property yields <undefined>
if (isNil(currentTarget)) {
currentTarget = undefined;
return false;
}
currentTarget = currentTarget[key];
});
return isUndefined(currentTarget) ? defaultValue : currentTarget;
}
class FormEditorCore {

@@ -220,3 +16,5 @@ constructor(options) {

properties = {},
schema = {}
schema = {},
schemaVersion,
exporter
} = options;

@@ -229,2 +27,4 @@ this.emitter = mitt();

this.fields = fields;
this.exporter = exporter;
this.schemaVersion = schemaVersion;
this.initialSchema = clone(importedSchema);

@@ -246,3 +46,3 @@ this.state = {

this.fields.set(targetField.id, get(schema, targetPath.path));
this.fields.set(targetField.id, get(schema, targetField.path));
this.setState({

@@ -267,3 +67,3 @@ schema

this.fields.set(sourceField.id, get(schema, sourcePath.path));
this.fields.set(sourceField.id, get(schema, sourceField.path));
} else {

@@ -295,2 +95,3 @@ const field = get(schema, sourcePath)[sourceIndex];

const sourcePath = [...sourceField.path, 'components'];
this.fields.delete(get(schema, [...sourcePath, sourceIndex]).id);
const fields = arrayRemove(get(schema, sourcePath), sourceIndex).map((field, index) => updatePath(this.fields, field, index));

@@ -301,3 +102,3 @@ schema = set(schema, sourcePath, fields); // Update siblings

this.fields.set(sourceField.id, get(schema, sourcePath.path));
this.fields.set(sourceField.id, get(schema, sourceField.path));
this.setState({

@@ -335,3 +136,3 @@ schema

getSchema() {
return exportSchema(this.state.schema);
return exportSchema(this.state.schema, this.exporter, this.schemaVersion);
}

@@ -385,2 +186,20 @@

function exportSchema(schema, exporter, schemaVersion) {
const exportDetails = exporter ? {
exporter
} : {};
const cleanedSchema = clone(schema, (name, value) => {
if (['id', 'parent', 'path'].includes(name)) {
return undefined;
}
return value;
});
return {
schemaVersion,
...exportDetails,
...cleanedSchema
};
}
const DragAndDropContext = createContext({

@@ -390,5 +209,6 @@ drake: null

const FormContext = createContext({
const FormEditorContext = createContext({
fields: new Map(),
properties: {},
schema: {},

@@ -401,15 +221,27 @@ getFieldRenderer(type) {

addField() {},
addField(...args) {},
editField() {},
editField(...args) {},
moveField() {},
moveField(...args) {},
removeField() {},
removeField(...args) {},
emit() {},
/**
* @param {string} event
* @param {any?} payload
*/
emit(event, payload) {},
on() {},
/**
* @param {string} event
* @param {function} callback
*/
on(event, callback) {},
off() {}
/**
* @param {string} event
* @param {function?} callback
*/
off(event, callback) {}

@@ -420,3 +252,8 @@ });

selection: null,
setSelection: () => {}
/**
* @param {string|null} id
*/
setSelection(id) {}
});

@@ -476,3 +313,3 @@

function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
var TextfieldIcon = (({
var RadioIcon = (({
styles = {},

@@ -485,3 +322,40 @@ ...props

}, props), /*#__PURE__*/React.createElement("path", {
d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
})));
function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
var SelectIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$5({
xmlns: "http://www.w3.org/2000/svg",
width: "54",
height: "54"
}, props), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
})));
function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
var TextIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$6({
xmlns: "http://www.w3.org/2000/svg",
width: "54",
height: "54"
}, props), /*#__PURE__*/React.createElement("path", {
d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
})));
function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
var TextfieldIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$7({
xmlns: "http://www.w3.org/2000/svg",
width: "54",
height: "54"
}, props), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"

@@ -495,2 +369,5 @@ })));

number: NumberIcon,
radio: RadioIcon,
select: SelectIcon,
text: TextIcon,
textfield: TextfieldIcon

@@ -503,2 +380,17 @@ };

}, {
label: 'Number',
type: 'number'
}, {
label: 'Checkbox',
type: 'checkbox'
}, {
label: 'Radio',
type: 'radio'
}, {
label: 'Select',
type: 'select'
}, {
label: 'Text',
type: 'text'
}, {
label: 'Button',

@@ -536,23 +428,43 @@ type: 'button'

function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
var ChevronIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$5({
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16"
}, props), /*#__PURE__*/React.createElement("path", {
d: "M5 4.414L6.414 3l4.95 4.95-4.95 4.949L5 11.485 8.534 7.95z"
})));
function arrayAdd$1(array, index, item) {
const copy = [...array];
copy.splice(index, 0, item);
return copy;
}
function arrayRemove$1(array, index) {
const copy = [...array];
copy.splice(index, 1);
return copy;
}
function debounce(fn) {
if (isTest()) {
return fn;
}
const labelsByType = {
button: 'BUTTON',
checkbox: 'CHECKBOX',
columns: 'COLUMNS',
number: 'NUMBER',
textfield: 'TEXT FIELD'
};
const FIELDS = ['checkbox', 'number', 'radio', 'textfield'];
function Checkbox(props) {
return debounce$1(fn, 300);
}
function prefixId(id) {
return `fjs-properties-panel-${id}`;
}
function stopPropagation(listener) {
return event => {
event.stopPropagation();
listener(event);
};
}
function textToLabel(text) {
if (text.length > 10) {
return `${text.substring(0, 10)}...`;
}
return text;
}
const INPUTS = ['checkbox', 'number', 'radio', 'select', 'textfield'];
function isTest() {
// @ts-ignore-next-line
return window.__env__ && window.__env__.NODE_ENV === 'test';
}
function CheckboxInput(props) {
const {

@@ -586,50 +498,15 @@ id,

}
function Textfield(props) {
function NumberInput(props) {
const {
emit
} = useContext(FormContext);
} = useContext(FormEditorContext);
const {
id,
label,
value = ''
} = props;
const debouncedOnInput = useCallback(props.debounce ? debounce(props.onInput, 300) : props.onInput, [props.onInput]);
const onInput = ({
target
}) => {
debouncedOnInput(target.value.length ? target.value : undefined);
};
const onFocus = () => emit('propertiesPanel.focusin');
const onBlur = () => emit('propertiesPanel.focusout');
return jsxs("div", {
class: "fjs-properties-panel-textfield",
children: [jsx("label", {
for: prefixId(id),
class: "fjs-properties-panel-label",
children: label
}), jsx("input", {
id: prefixId(id),
type: "text",
spellCheck: "false",
class: "fjs-properties-panel-input",
onInput: onInput,
onFocus: onFocus,
onBlur: onBlur,
value: value || ''
})]
});
}
function Number$1(props) {
const {
id,
label,
max,
min,
onInput,
value = ''
} = props;
const debouncedOnInput = debounce(props.onInput);

@@ -645,6 +522,10 @@ const handleInput = ({

if (validity.valid) {
onInput(value ? parseInt(value, 10) : undefined);
debouncedOnInput(value ? parseInt(value, 10) : undefined);
}
};
const onFocus = () => emit('propertiesPanel.focusin');
const onBlur = () => emit('propertiesPanel.focusout');
return jsxs("div", {

@@ -663,2 +544,4 @@ class: "fjs-properties-panel-textfield",

onInput: handleInput,
onFocus: onFocus,
onBlur: onBlur,
value: value

@@ -668,2 +551,3 @@ })]

}
function Select(props) {

@@ -705,4 +589,85 @@ const {

function CheckboxEntry(props) {
function Textarea(props) {
const {
emit
} = useContext(FormEditorContext);
const {
id,
label,
rows = 10,
value = ''
} = props;
const debouncedOnInput = debounce(props.onInput);
const onInput = ({
target
}) => {
debouncedOnInput(target.value.length ? target.value : undefined);
};
const onFocus = () => emit('propertiesPanel.focusin');
const onBlur = () => emit('propertiesPanel.focusout');
return jsxs("div", {
class: "fjs-properties-panel-textfield",
children: [jsx("label", {
for: prefixId(id),
class: "fjs-properties-panel-label",
children: label
}), jsx("textarea", {
id: prefixId(id),
spellcheck: false,
class: "fjs-properties-panel-input",
onInput: onInput,
onFocus: onFocus,
onBlur: onBlur,
rows: rows,
value: value
})]
});
}
function TextInput(props) {
const {
emit
} = useContext(FormEditorContext);
const {
id,
label,
value = ''
} = props;
const debouncedOnInput = debounce(props.onInput);
const onInput = ({
target
}) => {
debouncedOnInput(target.value.length ? target.value : undefined);
};
const onFocus = () => emit('propertiesPanel.focusin');
const onBlur = () => emit('propertiesPanel.focusout');
return jsxs("div", {
class: "fjs-properties-panel-textfield",
children: [jsx("label", {
for: prefixId(id),
class: "fjs-properties-panel-label",
children: label
}), jsx("input", {
id: prefixId(id),
type: "text",
spellcheck: false,
class: "fjs-properties-panel-input",
onInput: onInput,
onFocus: onFocus,
onBlur: onBlur,
value: value
})]
});
}
function CheckboxInputEntry(props) {
const {
editField,

@@ -714,16 +679,15 @@ field,

} = props;
const [property, nestedProperty] = path;
const onChange = value => {
if (nestedProperty) {
editField(field, [property], set(get(field, [property], {}), [nestedProperty], value));
if (editField && path) {
editField(field, path, value);
} else {
editField(field, path, value);
props.onChange(value);
}
};
const value = useMemo(() => get(field, path, false), [get(field, path, false)]);
const value = path ? get(field, path, false) : props.value;
return jsx("div", {
class: "fjs-properties-panel-entry",
children: jsx(Checkbox, {
children: jsx(CheckboxInput, {
id: id,

@@ -737,3 +701,3 @@ label: label,

function NumberEntry(props) {
function NumberInputEntry(props) {
const {

@@ -746,18 +710,18 @@ editField,

min,
onChange,
path
} = props;
const [property, nestedProperty] = path;
const onInput = value => {
if (nestedProperty) {
editField(field, [property], set(get(field, [property], {}), [nestedProperty], value));
if (editField && path) {
editField(field, path, value);
} else {
editField(field, path, value);
onChange(value);
}
};
const value = useMemo(() => get(field, path, ''), [get(field, path, '')]);
const value = path ? get(field, path, '') : props.value;
return jsx("div", {
class: "fjs-properties-panel-entry",
children: jsx(Number$1, {
children: jsx(NumberInput, {
id: id,

@@ -773,3 +737,3 @@ label: label,

function TextfieldEntry(props) {
function TextareaEntry(props) {
const {

@@ -781,18 +745,18 @@ editField,

label,
onChange,
path
} = props;
const [property, nestedProperty] = path;
const onInput = value => {
if (nestedProperty) {
editField(field, [property], set(get(field, [property], {}), [nestedProperty], value));
if (editField && path) {
editField(field, path, value);
} else {
editField(field, path, value);
onChange(value);
}
};
const value = useMemo(() => get(field, path, ''), [get(field, path, '')]);
const value = path ? get(field, path, '') : props.value;
return jsxs("div", {
class: "fjs-properties-panel-entry",
children: [jsx(Textfield, {
children: [jsx(Textarea, {
id: id,

@@ -809,47 +773,172 @@ label: label,

function LabelProperty(props) {
function TextInputEntry(props) {
const {
editField,
field
field,
id,
description,
label,
onChange,
path
} = props;
return TextfieldEntry({
editField,
field,
id: 'label',
label: 'Field Label',
path: ['label']
const onInput = value => {
if (editField && path) {
editField(field, path, value);
} else {
onChange(value);
}
};
const value = path ? get(field, path, '') : props.value;
return jsxs("div", {
class: "fjs-properties-panel-entry",
children: [jsx(TextInput, {
id: id,
label: label,
onInput: onInput,
value: value
}), description && jsx("div", {
class: "fjs-properties-panel-description",
children: description
})]
});
}
function DescriptionProperty(props) {
function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
var CreateIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$8({
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12"
}, props), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M7 0v5h5v2H7v5H5V7H0V5h5V0h2z"
})));
function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
var ListArrowIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$9({
xmlns: "http://www.w3.org/2000/svg",
width: "7",
height: "9"
}, props), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M6.25 4.421L4.836 5.835h-.001L2.007 8.663.593 7.249 3.421 4.42.593 1.593 2.007.178 6.25 4.421z"
})));
function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
var ListDeleteIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$a({
xmlns: "http://www.w3.org/2000/svg",
width: "11",
height: "14"
}, props), /*#__PURE__*/React.createElement("path", {
d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
})));
function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
var SectionArrowIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$b({
xmlns: "http://www.w3.org/2000/svg",
width: "8",
height: "12"
}, props), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
d: "M2.007 11.66L.593 10.248l4.242-4.243L.593 1.761 2.007.347l5.657 5.657-5.657 5.657z"
})));
function CollapsibleEntry(props) {
const {
editField,
field
children,
label,
removeEntry = () => {}
} = props;
return TextfieldEntry({
editField,
field,
id: 'description',
label: 'Field Description',
path: ['description']
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => setCollapsed(!collapsed);
const classes = ['fjs-properties-panel-collapsible-entry'];
if (collapsed) {
classes.push('fjs-properties-panel-collapsible-entry-collapsed');
}
return jsxs("div", {
class: classes.join(' '),
children: [jsxs("div", {
class: "fjs-properties-panel-collapsible-entry-header",
onClick: toggleCollapsed,
children: [jsxs("div", {
children: [jsx(ListArrowIcon, {
class: collapsed ? 'fjs-arrow-right' : 'fjs-arrow-down'
}), jsx("span", {
class: "fjs-properties-panel-collapsible-entry-header-label",
children: label
})]
}), jsx("button", {
class: "fjs-properties-panel-collapsible-entry-header-remove-entry",
onClick: stopPropagation(removeEntry),
children: jsx(ListDeleteIcon, {})
})]
}), collapsed ? null : jsx("div", {
class: "fjs-properties-panel-collapsible-entry-entries",
children: children
})]
});
} // TODO: Check whether key unique
}
function KeyProperty(props) {
function Group(props) {
const {
editField,
field
children,
hasEntries = true,
label
} = props;
return TextfieldEntry({
editField,
field,
id: 'key',
label: 'Key',
description: 'Maps to a process variable',
path: ['key']
const [open, setOpen] = useState(hasEntries);
const toggleOpen = () => setOpen(!open);
const addEntry = event => {
event.stopPropagation();
setOpen(true);
props.addEntry();
};
return jsxs("div", {
class: "fjs-properties-panel-group",
children: [jsxs("div", {
class: "fjs-properties-panel-group-header",
onClick: hasEntries ? toggleOpen : () => {},
children: [jsx("span", {
class: "fjs-properties-panel-group-header-label",
children: label
}), jsxs("div", {
class: "fjs-properties-panel-group-header-buttons",
children: [props.addEntry ? jsx("button", {
class: "fjs-properties-panel-group-header-button fjs-properties-panel-group-header-button-add-entry",
onClick: addEntry,
children: jsx(CreateIcon, {})
}) : null, jsx("button", {
class: "fjs-properties-panel-group-header-button fjs-properties-panel-group-header-button-toggle-open",
children: jsx(SectionArrowIcon, {
class: hasEntries && open ? 'fjs-arrow-down' : 'fjs-arrow-right'
})
})]
})]
}), hasEntries && open ? jsx("div", {
class: "fjs-properties-panel-group-entries",
children: children
}) : null]
});
}
function ActionProperty(props) {
function ActionEntry(props) {
const {

@@ -864,3 +953,3 @@ editField,

const value = useMemo(() => field.action, [field.action]);
const value = field.action;
const options = [{

@@ -885,3 +974,3 @@ label: 'Submit',

function ColumnsProperty(props) {
function ColumnsEntry(props) {
const {

@@ -908,6 +997,6 @@ editField,

const value = useMemo(() => field.components.length, [field.components.length]);
const value = field.components.length;
return jsx("div", {
class: "fjs-properties-panel-entry",
children: jsx(Number$1, {
children: jsx(NumberInputEntry, {
id: "columns",

@@ -923,30 +1012,89 @@ label: "Columns",

function Group(props) {
function DescriptionEntry(props) {
const {
children,
label
editField,
field
} = props;
const [open, setOpen] = useState(true);
return jsx(TextInputEntry, {
editField: editField,
field: field,
id: "description",
label: "Field Description",
path: ['description']
});
}
const toggleOpen = () => setOpen(!open);
function KeyEntry(props) {
const {
editField,
field
} = props;
return jsx(TextInputEntry, {
editField: editField,
field: field,
id: "key",
label: "Key",
description: "Maps to a process variable.",
path: ['key']
});
}
return jsxs("div", {
class: "fjs-properties-panel-group",
children: [jsxs("div", {
class: "fjs-properties-panel-group-header",
onClick: toggleOpen,
children: [jsx("div", {
children: label
}), jsx(ChevronIcon, {
width: "16",
height: "16",
class: open ? 'fjs-chevron-down' : 'fjs-chevron-right'
})]
}), open ? jsx("div", {
class: "fjs-properties-panel-group-entries",
children: children
}) : null]
function LabelEntry(props) {
const {
editField,
field
} = props;
return jsx(TextInputEntry, {
editField: editField,
field: field,
id: "label",
label: "Field Label",
path: ['label']
});
}
function TextEntry(props) {
const {
editField,
field
} = props;
return jsx(TextareaEntry, {
editField: editField,
field: field,
id: "text",
label: "Text",
path: ['text'],
description: "Use HTML or Markdown to format."
});
}
function ValueEntry(props) {
const {
editField,
field,
index
} = props;
const onChange = key => {
const values = get(field, ['values']);
return value => {
editField(field, 'values', set(values, [index, key], value));
};
};
return jsxs(Fragment$1, {
children: [jsx(TextInputEntry, {
id: `value-label-${index}`,
label: "Label",
onChange: onChange('label'),
value: get(field, ['values', index, 'label'])
}), jsx(TextInputEntry, {
id: `value-value-${index}`,
label: "Value",
onChange: onChange('value'),
value: get(field, ['values', index, 'value'])
})]
});
}
function GeneralGroup(field, editField) {

@@ -958,4 +1106,4 @@ const {

if (FIELDS.includes(type) || type === 'button') {
entries.push(jsx(LabelProperty, {
if (INPUTS.includes(type) || type === 'button') {
entries.push(jsx(LabelEntry, {
editField: editField,

@@ -966,4 +1114,4 @@ field: field

if (FIELDS.includes(type)) {
entries.push(jsx(DescriptionProperty, {
if (INPUTS.includes(type)) {
entries.push(jsx(DescriptionEntry, {
editField: editField,

@@ -974,4 +1122,4 @@ field: field

if (FIELDS.includes(type)) {
entries.push(jsx(KeyProperty, {
if (INPUTS.includes(type)) {
entries.push(jsx(KeyEntry, {
editField: editField,

@@ -983,3 +1131,3 @@ field: field

if (type === 'button') {
entries.push(jsx(ActionProperty, {
entries.push(jsx(ActionEntry, {
editField: editField,

@@ -991,3 +1139,3 @@ field: field

if (type === 'columns') {
entries.push(jsx(ColumnsProperty, {
entries.push(jsx(ColumnsEntry, {
editField: editField,

@@ -998,5 +1146,12 @@ field: field

if (type === 'text') {
entries.push(jsx(TextEntry, {
editField: editField,
field: field
}));
}
return jsx(Group, {
label: "General",
children: entries
children: entries.length ? entries : null
});

@@ -1009,40 +1164,111 @@ }

} = field;
const entries = [jsx(CheckboxEntry, {
const onChange = key => {
return value => {
const validate = get(field, ['validate'], {});
editField(field, ['validate'], set(validate, [key], value));
};
};
const entries = [jsx(CheckboxInputEntry, {
id: "required",
field: field,
editField: editField,
label: "Required",
path: ['validate', 'required']
onChange: onChange('required'),
value: get(field, ['validate', 'required'])
})];
if (type === 'textfield') {
entries.push(NumberEntry({
editField,
field,
id: 'minLength',
label: 'Minimum Length',
min: 0,
path: ['validate', 'minLength']
}), NumberEntry({
editField,
field,
id: 'maxLength',
label: 'Maximum Length',
min: 0,
path: ['validate', 'maxLength']
}), TextfieldEntry({
editField,
field,
id: 'regularExpressionPattern',
label: 'Regular Expression Pattern',
path: ['validate', 'pattern']
entries.push(jsx(NumberInputEntry, {
id: "minLength",
label: "Minimum Length",
min: "0",
onChange: onChange('minLength'),
value: get(field, ['validate', 'minLength'])
}), jsx(NumberInputEntry, {
id: "maxLength",
label: "Maximum Length",
min: "0",
onChange: onChange('maxLength'),
value: get(field, ['validate', 'maxLength'])
}), jsx(TextInputEntry, {
id: "regularExpressionPattern",
label: "Regular Expression Pattern",
onChange: onChange('regularExpressionPattern'),
value: get(field, ['validate', 'regularExpressionPattern'])
}));
}
if (type === 'number') {
entries.push(jsx(NumberInputEntry, {
id: "min",
label: "Minimum",
onChange: onChange('min'),
value: get(field, ['validate', 'min'])
}), jsx(NumberInputEntry, {
id: "max",
label: "Maximum",
onChange: onChange('max'),
value: get(field, ['validate', 'max'])
}));
}
return jsx(Group, {
label: "Validation",
children: entries
children: entries.length ? entries : null
});
}
function ValuesGroup(field, editField) {
const {
values = []
} = field;
const addEntry = () => {
const entry = {
label: 'Value',
value: 'value'
};
editField(field, ['values'], arrayAdd$1(values, values.length, entry));
};
const hasEntries = values.length > 0;
return jsx(Group, {
label: "Values",
addEntry: addEntry,
hasEntries: hasEntries,
children: values.map((value, index) => {
const {
id
} = field;
const {
label
} = value;
const removeEntry = () => {
editField(field, ['values'], arrayRemove$1(values, index));
};
return jsx(CollapsibleEntry, {
label: label,
removeEntry: removeEntry,
children: jsx(ValueEntry, {
editField: editField,
field: field,
index: index
})
}, id);
})
});
}
const labelsByType = {
button: 'BUTTON',
checkbox: 'CHECKBOX',
columns: 'COLUMNS',
number: 'NUMBER',
radio: 'RADIO',
text: 'TEXT',
textfield: 'TEXT FIELD'
};
function getGroups(field, editField) {

@@ -1054,3 +1280,7 @@ const {

if (FIELDS.includes(type)) {
if (type === 'radio' || type === 'select') {
groups.push(ValuesGroup(field, editField));
}
if (INPUTS.includes(type) && type !== 'checkbox') {
groups.push(ValidationGroup(field, editField));

@@ -1095,6 +1325,9 @@ }

children: label
}), field.label ? jsx("div", {
}), type === 'text' ? jsx("div", {
class: "fjs-properties-panel-header-label",
children: textToLabel(field.text)
}) : jsx("div", {
class: "fjs-properties-panel-header-label",
children: field.label
}) : null]
})]
})]

@@ -1105,17 +1338,2 @@ }), getGroups(field, editField)]

function prefixId(id) {
return `fjs-properties-panel-${id}`;
}
function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
var RemoveIcon = (({
styles = {},
...props
}) => /*#__PURE__*/React.createElement("svg", _extends$6({
viewBox: "0 0 2048 2048",
xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
d: "M879.034 219.899c-118.955 7.14-143.496-24.248-145.006 105.614v19.286L380.515 458.403c-40.552 10.478-40.797 60.59 0 60.725h1278.05c40.001 1.161 38.572-50.488 0-60.725L1314.05 346.529v-21.013c0-127.325-13.022-98.546-145.006-105.614H1024.04zM438.387 636.125c-29.318.065-52.292 25.222-49.701 54.426L490.73 1825.895c2.307 25.744 23.854 45.488 49.7 45.543h937.137c25.39.015 46.762-18.999 49.701-44.219l132.096-1135.344c3.429-29.703-19.801-55.757-49.701-55.742H1024.02zm54.803 99.969H1553.551l-120.384 1035.44H586.174zM738.31 887.07a55.019 55.019 0 00-5.495.011c-32.482 1.753-56.357 31.158-51.402 63.308l91.277 654.235c2.863 31.256 31.255 53.783 62.342 49.467 31.087-4.316 52.27-33.726 46.51-64.578l-91.276-654.236c-3.28-26.57-25.214-46.92-51.956-48.205zm575.232.011c-28.187-.596-52.262 20.216-55.748 48.193l-91.277 654.236c-5.759 30.853 15.423 60.262 46.51 64.578 31.087 4.316 59.48-18.211 62.343-49.466l91.275-654.235c5.015-32.8-19.93-62.539-53.102-63.308z"
})));
function ContextPad(props) {

@@ -1145,3 +1363,3 @@ if (!props.children) {

schema
} = useContext(FormContext);
} = useContext(FormEditorContext);
const {

@@ -1156,3 +1374,3 @@ field

function onClick(event) {
if (!field.key) {
if (type === 'default') {
return;

@@ -1198,5 +1416,3 @@ }

onClick: onRemove,
children: jsx(RemoveIcon, {
width: "18"
})
children: jsx(ListDeleteIcon, {})
}) : null

@@ -1230,4 +1446,4 @@ }), props.children]

fields,
schema,
getFieldRenderer,
fieldRenderers,
addField,

@@ -1239,6 +1455,3 @@ moveField,

off
} = useContext(FormContext);
const {
schema
} = props;
} = useContext(FormEditorContext);
const [selection, setSelection] = useState(findSelectableField(schema, fields) ? findSelectableField(schema, fields).id : null);

@@ -1343,5 +1556,5 @@ let selectedField;

},
schema,
data: {},
errors: {}
errors: {},
schema
};

@@ -1356,8 +1569,6 @@ const onSubmit = useCallback(() => {}, []);

class: "fjs-palette-container",
children: jsx(Palette, {
fieldRenderers: fieldRenderers
})
children: jsx(Palette, {})
}), jsx("div", {
class: "fjs-form-container",
children: jsx(FormContext$1.Provider, {
children: jsx(FormContext.Provider, {
value: formContext,

@@ -1369,3 +1580,2 @@ children: jsx(FormRenderContext.Provider, {

children: jsx(Form, {
schema: schema,
onSubmit: onSubmit,

@@ -1434,3 +1644,5 @@ onReset: onReset

return schema.components.find(field => isDefined(field.key));
return schema.components.find(({
type
}) => type !== 'default');
}

@@ -1458,2 +1670,6 @@

get schema() {
return state.schema;
},
getFieldRenderer(type) {

@@ -1501,7 +1717,5 @@ return findFieldRenderer(renderers, type);

class: "fjs-container fjs-editor-container",
children: jsx(FormContext.Provider, {
children: jsx(FormEditorContext.Provider, {
value: formEditorContext,
children: jsx(FormEditor, {
schema: state.schema
})
children: jsx(FormEditor, {})
})

@@ -1517,3 +1731,3 @@ });

/**
* @typedef { { container: Element; schema: any; data: any; properties?: any } } FormOptions
* @typedef { { container: Element; exporter?: { name: string, version: string }; schema: any; data: any; properties?: any } } FormEditorOptions
*/

@@ -1524,3 +1738,3 @@

*
* @param {FormOptions} options
* @param {FormEditorOptions} options
*

@@ -1534,7 +1748,10 @@ * @return {FormEditorCore}

schema,
properties = {}
properties = {},
exporter
} = options;
const form = new FormEditorCore({
schema,
properties
properties,
schemaVersion,
exporter
});

@@ -1541,0 +1758,0 @@ new FormEditorRenderer({

33

package.json
{
"name": "@bpmn-io/form-js-editor",
"version": "0.0.12",
"version": "0.1.0",
"description": "Edit forms - powered by bpmn.io",
"exports": {
"import": "./dist/index.es.js",
"require": "./dist/index.cjs"
".": {
"import": "./dist/index.es.js",
"require": "./dist/index.cjs"
},
"./dist/assets/form-js-editor.css": "./dist/assets/form-js-editor.css",
"./dist/assets/dragula.css": "./dist/assets/dragula.css",
"./package.json": "./package.json"
},

@@ -14,5 +19,6 @@ "publishConfig": {

"module": "dist/index.es.js",
"types": "dist/types/index.d.ts",
"scripts": {
"all": "run-s lint test build",
"build": "run-p bundle",
"build": "run-p bundle generate-types",
"bundle": "rollup -c",

@@ -24,3 +30,4 @@ "bundle:watch": "rollup -c -w",

"lint:eslint": "eslint .",
"test": "karma start",
"generate-types": "tsc --allowJs --skipLibCheck --declaration --emitDeclarationOnly --removeComments --outDir dist/types src/index.js",
"test": "cross-env NODE_ENV=test karma start",
"prepublishOnly": "npm run build"

@@ -38,13 +45,17 @@ },

},
"devDependencies": {
"min-dash": "^3.7.0",
"mitt": "^2.1.0"
},
"dependencies": {
"@bpmn-io/form-js-viewer": "^0.0.12",
"@bpmn-io/form-js-viewer": "^0.1.0",
"array-move": "^3.0.1",
"dragula": "^3.7.3",
"min-dash": "^3.7.0",
"mitt": "^2.1.0",
"preact": "^10.5.12"
},
"gitHead": "5912a8f749cf6880ed8a4c6f4eee29534cf4b2d6"
"sideEffects": [
"*.css"
],
"files": [
"dist"
],
"gitHead": "f395f44ff461593483ad4b62b68605477dd34d81"
}

4

README.md
# form-js-editor - Form editor powered by bpmn.io
This library exports an editor for creating and editing forms.
An editor to create forms that can be displayed with the [form-js viewer](../form-js-viewer).

@@ -15,2 +15,2 @@

Use under the terms of the [bpmn.io license](http://bpmn.io/license).
Use under the terms of the [bpmn.io license](http://bpmn.io/license).
assets/dragula.css
assets/form-js-editor.css
dist/assets/form-js.css
dist/assets/form-js-editor.css

Sorry, the diff of this file is not supported yet

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.cjs.map

Sorry, the diff of this file is not supported yet

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc