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

Comparing version 0.0.8 to 0.0.9

dist/index.es.js

 import { importSchema, clone, exportSchema, DefaultRenderer, FormContext as FormContext$1, FormRenderContext, Form, findFieldRenderer, fields } from '@bpmn-io/form-js-viewer';
 import arrayMove from 'array-move';
 import { createContext, Fragment, render } from 'preact';
-import { useState, useCallback, useMemo, useContext, useEffect } from 'preact/hooks';
+import { useState, useContext, useCallback, useMemo, useEffect } from 'preact/hooks';
 import React from 'preact/compat';
 import { jsxs, jsx } from 'preact/jsx-runtime';
-import * as dragula from 'dragula';
+import dragula from 'dragula';
 
@@ -398,4 +398,6 @@ function mitt (n) {
 
-  removeField() {}
+  removeField() {},
 
+  emit() {}
+
 });
@@ -539,2 +541,3 @@
   const {
+    id,
     label,
@@ -555,5 +558,7 @@ value,
     children: [jsx("label", {
+      for: prefixId(id),
       class: "fjs-properties-panel-label",
       children: label
     }), jsx("input", {
+      id: prefixId(id),
       type: "checkbox",
@@ -570,2 +575,6 @@ class: "fjs-properties-panel-input",
   const {
+    emit
+  } = useContext(FormContext);
+  const {
+    id,
     label,
@@ -582,8 +591,14 @@ value
 
+  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",
@@ -593,2 +608,4 @@ spellCheck: "false",
       onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value || ''
@@ -601,2 +618,3 @@ })]
   const {
+    id,
     label,
@@ -617,5 +635,7 @@ value,
     children: [jsx("label", {
+      for: prefixId(id),
       class: "fjs-properties-panel-label",
       children: label
     }), jsx("input", {
+      id: prefixId(id),
       type: "number",
@@ -632,2 +652,3 @@ class: "fjs-properties-panel-input",
   const {
+    id,
     label,
@@ -649,5 +670,7 @@ value,
     children: [jsx("label", {
+      for: prefixId(id),
       class: "fjs-properties-panel-label",
       children: label
     }), jsx("select", {
+      id: prefixId(id),
       class: "fjs-properties-panel-input",
@@ -671,2 +694,3 @@ onInput: handleChange,
     field,
+    id,
     label,
@@ -689,2 +713,3 @@ path
     children: jsx(Checkbox, {
+      id: id,
       label: label,
@@ -701,2 +726,3 @@ onChange: onChange,
     field,
+    id,
     label,
@@ -719,2 +745,3 @@ path
     children: jsx(Number$1, {
+      id: id,
       label: label,
@@ -731,2 +758,4 @@ onInput: onInput,
     field,
+    id,
+    description,
     label,
@@ -746,9 +775,13 @@ path
   const value = useMemo(() => get(field, path, ''), [get(field, path, '')]);
-  return jsx("div", {
+  return jsxs("div", {
     class: "fjs-properties-panel-entry",
-    children: jsx(Textfield, {
+    children: [jsx(Textfield, {
+      id: id,
       label: label,
       onInput: onInput,
       value: value
-    })
+    }), description && jsx("div", {
+      class: "fjs-properties-panel-description",
+      children: description
+    })]
   });
@@ -765,3 +798,4 @@ }
     field,
-    label: 'Label',
+    id: 'label',
+    label: 'Field Label',
     path: ['label']
@@ -779,3 +813,4 @@ });
     field,
-    label: 'Description',
+    id: 'description',
+    label: 'Field Description',
     path: ['description']
@@ -794,3 +829,5 @@ });
     field,
+    id: 'key',
     label: 'Key',
+    description: 'Maps to a process variable',
     path: ['key']
@@ -821,2 +858,3 @@ });
     children: jsx(Select, {
+      id: "action",
       label: "Action",
@@ -856,2 +894,3 @@ options: options,
     children: jsx(Number$1, {
+      id: "columns",
       label: "Columns",
@@ -894,3 +933,3 @@ onInput: onInput,
 
-function DesignGroup(field, editField) {
+function GeneralGroup(field, editField) {
   const {
@@ -937,3 +976,3 @@ type
   return jsx(Group, {
-    label: "Design",
+    label: "General",
     children: entries
@@ -948,2 +987,3 @@ });
   const entries = [jsx(CheckboxEntry, {
+    id: "required",
     field: field,
@@ -956,10 +996,6 @@ editField: editField,
   if (type === 'textfield') {
-    entries.push(TextfieldEntry({
+    entries.push(NumberEntry({
       editField,
       field,
-      label: 'Pattern',
-      path: ['validate', 'pattern']
-    }), NumberEntry({
-      editField,
-      field,
+      id: 'minLength',
       label: 'Minimum Length',
@@ -970,4 +1006,11 @@ path: ['validate', 'minLength']
       field,
+      id: 'maxLength',
       label: 'Maximum Length',
       path: ['validate', 'maxLength']
+    }), TextfieldEntry({
+      editField,
+      field,
+      id: 'regularExpressionPattern',
+      label: 'Regular Expression Pattern',
+      path: ['validate', 'pattern']
     }));
@@ -986,3 +1029,3 @@ }
   } = field;
-  const groups = [DesignGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField)];
 
@@ -1038,2 +1081,6 @@ if (FIELDS.includes(type)) {
 
+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); }
@@ -1111,2 +1158,4 @@ var RemoveIcon = (({
       setSelection(selectableField.id);
+    } else {
+      setSelection(null);
     }
@@ -1152,18 +1201,5 @@ };
 
-const drake = dragula({
-  isContainer(el) {
-    return el.classList.contains('fjs-drag-container');
-  },
-
-  copy(el) {
-    return el.classList.contains('fjs-drag-copy');
-  },
-
-  accepts(el, target) {
-    return !target.classList.contains('fjs-no-drop');
-  }
-
-});
 function FormEditor(props) {
   const {
+    emit,
     fields,
@@ -1186,2 +1222,6 @@ getFieldRenderer,
 
+  useEffect(() => {
+    emit('selection.changed');
+  }, [selection]);
+  const [drake, setDrake] = useState(null);
   const dragAndDropContext = {
@@ -1191,2 +1231,16 @@ drake
   useEffect(() => {
+    const drake = dragula({
+      isContainer(el) {
+        return el.classList.contains('fjs-drag-container');
+      },
+
+      copy(el) {
+        return el.classList.contains('fjs-drag-copy');
+      },
+
+      accepts(el, target) {
+        return !target.classList.contains('fjs-no-drop');
+      }
+
+    });
     drake.on('drop', (el, target, source, sibling) => {
@@ -1219,2 +1273,4 @@ drake.remove();
     });
+    setDrake(drake);
+    return () => drake.destroy();
   }, []);
@@ -1307,5 +1363,9 @@ const selectionContext = {
   useEffect(() => {
+    if (!drake) {
+      return;
+    }
+
     drake.on('cloned', handleCloned);
     return () => drake.off('cloned', handleCloned);
-  }, []);
+  }, [drake]);
   return null;
@@ -1366,2 +1426,6 @@ }
           form.removeField(...args);
+        },
+
+        emit(event, data) {
+          form.emitter.emit(event, data);
         }
@@ -1374,3 +1438,3 @@
       return jsx("div", {
-        class: "fjs-container",
+        class: "fjs-container fjs-editor-container",
         children: jsx(FormContext.Provider, {
@@ -1377,0 +1441,0 @@ value: formEditorContext,

package.json

 {
   "name": "@bpmn-io/form-js-editor",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Edit forms - powered by bpmn.io",
@@ -41,3 +41,3 @@ "exports": {
   "dependencies": {
-    "@bpmn-io/form-js-viewer": "^0.0.8",
+    "@bpmn-io/form-js-viewer": "^0.0.9",
     "array-move": "^3.0.1",
@@ -47,3 +47,3 @@ "dragula": "^3.7.3",
   },
-  "gitHead": "a2842412e44bd83f01f85a36c1c78aa74f496791"
+  "gitHead": "d781378bc800546209d2ee8d0b7796445c86656d"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

280768

increased by4.08%

Lines of code

3199

increased by4.68%

Dependency changes

• + Added@bpmn-io/form-js-viewer@0.0.9(transitive)

• - Removed@bpmn-io/form-js-viewer@0.0.8(transitive)

• Updated@bpmn-io/form-js-viewer@^0.0.9