@bpmn-io/form-js-editor 1.7.3 → 1.8.0

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,152 +1,152 @@
-# @bpmn-io/form-js-editor
-
-An editor to create forms that can be displayed with the [form-js viewer](../form-js-viewer).
-
-
-## Installation
-
-```
-npm install @bpmn-io/form-js-editor
-```
-
-
-## Usage
-
-```javascript
-import { FormEditor } from '@bpmn-io/form-js-editor';
-
-const schema = {
-  components: [
-    {
-      key: 'creditor',
-      label: 'Creditor',
-      type: 'textfield',
-      validate: {
-        required: true
-      }
-    }
-  ]
-};
-
-const formEditor = new FormEditor({
-  container: document.querySelector('#form-editor')
-});
-
-await formEditor.importSchema(schema);
-```
-
-Check out [a full example](https://github.com/bpmn-io/form-js-examples).
-
-
-## Styling
-
-For proper styling include the necessary stylesheets, and font used:
-
-```html
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
-
-<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css">
-<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css">
-```
-
-
-## API
-
-### `FormEditor`
-
-Create a new form editor with options `{ container?: HTMLElement }`.
-
-```javascript
-import { FormEditor } from '@bpmn-io/form-js-editor';
-
-const formEditor = new FormEditor({
-  container: document.querySelector('#form-editor')
-});
-```
-
-
-### `FormEditor#importSchema(schema: Schema) => Promise<Result, Error>`
-
-Display and edit a form represented via a form schema.
-
-```javascript
-try {
-  await formEditor.importSchema(schema);
-} catch (err) {
-  console.log('importing form failed', err);
-}
-```
-
-
-### `FormEditor#saveSchema() => Schema`
-
-Export the form schema.
-
-```javascript
-const schema = formEditor.saveSchema(schema);
-
-console.log('exported schema', schema);
-```
-
-
-### `FormEditor#attachTo(parentNode: HTMLElement) => void`
-
-
-Attach the form editor to a parent node.
-
-
-### `FormEditor#detach() => void`
-
-
-Detach the form editor from its parent node.
-
-
-### `FormEditor#on(event, fn) => void`
-
-Subscribe to an [event](#events).
-
-
-### `FormEditor#destroy() => void`
-
-Remove form from editor the document.
-
-## Events
-
-### `selection.changed :: { selection }`
-
-### Properties panel events
-- `propertiesPanel.focusin`
-- `propertiesPanel.focusout`
-- `propertiesPanel.showEntry :: { id }`
-- `propertiesPanel.updated :: { formField }`
-
-### Form lifecycle events
-- `detach`
-- `attach`
-- `rendered`
-- `form.init`
-- `form.clear`
-- `form.destroy`
-- `diagram.clear`
-- `diagram.destroy`
-- `dragula.created`
-- `dragula.destroyed`
-- `editorActions.init :: { editorActions }`
-
-### Drag events
-- `drag.start :: { element, source }`
-- `drag.end :: { element }`
-- `drag.drop :: { element, target, source, sibling }`
-- `drag.hover :: { element, container, source }`
-- `drag.out :: { element, container, source }`
-- `drag.cancel :: { element, container, source }`
-
-### Form field events
-- `formField.add :: { formField }` 
-- `formField.remove :: { formField }`
-- `formField.updateId :: { formField, newId }`
-
-
-## License
-
-Use under the terms of the [bpmn.io license](http://bpmn.io/license).
+# @bpmn-io/form-js-editor
+
+An editor to create forms that can be displayed with the [form-js viewer](../form-js-viewer).
+
+
+## Installation
+
+```
+npm install @bpmn-io/form-js-editor
+```
+
+
+## Usage
+
+```javascript
+import { FormEditor } from '@bpmn-io/form-js-editor';
+
+const schema = {
+  components: [
+    {
+      key: 'creditor',
+      label: 'Creditor',
+      type: 'textfield',
+      validate: {
+        required: true
+      }
+    }
+  ]
+};
+
+const formEditor = new FormEditor({
+  container: document.querySelector('#form-editor')
+});
+
+await formEditor.importSchema(schema);
+```
+
+Check out [a full example](https://github.com/bpmn-io/form-js-examples).
+
+
+## Styling
+
+For proper styling include the necessary stylesheets, and font used:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css">
+<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css">
+```
+
+
+## API
+
+### `FormEditor`
+
+Create a new form editor with options `{ container?: HTMLElement }`.
+
+```javascript
+import { FormEditor } from '@bpmn-io/form-js-editor';
+
+const formEditor = new FormEditor({
+  container: document.querySelector('#form-editor')
+});
+```
+
+
+### `FormEditor#importSchema(schema: Schema) => Promise<Result, Error>`
+
+Display and edit a form represented via a form schema.
+
+```javascript
+try {
+  await formEditor.importSchema(schema);
+} catch (err) {
+  console.log('importing form failed', err);
+}
+```
+
+
+### `FormEditor#saveSchema() => Schema`
+
+Export the form schema.
+
+```javascript
+const schema = formEditor.saveSchema(schema);
+
+console.log('exported schema', schema);
+```
+
+
+### `FormEditor#attachTo(parentNode: HTMLElement) => void`
+
+
+Attach the form editor to a parent node.
+
+
+### `FormEditor#detach() => void`
+
+
+Detach the form editor from its parent node.
+
+
+### `FormEditor#on(event, fn) => void`
+
+Subscribe to an [event](#events).
+
+
+### `FormEditor#destroy() => void`
+
+Remove form from editor the document.
+
+## Events
+
+### `selection.changed :: { selection }`
+
+### Properties panel events
+- `propertiesPanel.focusin`
+- `propertiesPanel.focusout`
+- `propertiesPanel.showEntry :: { id }`
+- `propertiesPanel.updated :: { formField }`
+
+### Form lifecycle events
+- `detach`
+- `attach`
+- `rendered`
+- `form.init`
+- `form.clear`
+- `form.destroy`
+- `diagram.clear`
+- `diagram.destroy`
+- `dragula.created`
+- `dragula.destroyed`
+- `editorActions.init :: { editorActions }`
+
+### Drag events
+- `drag.start :: { element, source }`
+- `drag.end :: { element }`
+- `drag.drop :: { element, target, source, sibling }`
+- `drag.hover :: { element, container, source }`
+- `drag.out :: { element, container, source }`
+- `drag.cancel :: { element, container, source }`
+
+### Form field events
+- `formField.add :: { formField }` 
+- `formField.remove :: { formField }`
+- `formField.updateId :: { formField, newId }`
+
+
+## License
+
+Use under the terms of the [bpmn.io license](http://bpmn.io/license).

package/dist/assets/form-js-editor-base.css

@@ -211,22 +211,6 @@
   display: flex;
 }
 
-.fjs-no-json-lint .cm-lint-marker,
-.fjs-no-json-lint .cm-lintPoint-error {
-  display: none;
-}
-
-.fjs-no-json-lint .cm-activeLine,
-.fjs-no-json-lint .cm-activeLineGutter {
-  background: none;
-}
-
-.fjs-no-json-lint .cm-placeholder {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-}
-
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -279,14 +263,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
@@ -722,6 +713,34 @@
   color: var(--color-palette-text);
 }
 
+/**
+ * JSON Editors
+ */
+
+.fjs-json-editor .cm-editor {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-json-editor .cm-placeholder {
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
+.fjs-json-editor .cm-placeholder > :first-child {
+  margin-top: 0;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-lint-marker,
+.fjs-json-editor.fjs-cm-no-lint .cm-lintPoint-error {
+  display: none;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLine,
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLineGutter {
+  background: none;
+}
+
 /**
  * Properties Panel
  */

package/dist/assets/form-js-editor.css

@@ -189,22 +189,6 @@
   display: flex;
 }
 
-.fjs-no-json-lint .cm-lint-marker,
-.fjs-no-json-lint .cm-lintPoint-error {
-  display: none;
-}
-
-.fjs-no-json-lint .cm-activeLine,
-.fjs-no-json-lint .cm-activeLineGutter {
-  background: none;
-}
-
-.fjs-no-json-lint .cm-placeholder {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-}
-
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -257,14 +241,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=group],
@@ -697,6 +688,33 @@
   color: var(--color-palette-text);
 }
 
+/**
+ * JSON Editors
+ */
+.fjs-json-editor .cm-editor {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-json-editor .cm-placeholder {
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
+.fjs-json-editor .cm-placeholder > :first-child {
+  margin-top: 0;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-lint-marker,
+.fjs-json-editor.fjs-cm-no-lint .cm-lintPoint-error {
+  display: none;
+}
+
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLine,
+.fjs-json-editor.fjs-cm-no-lint .cm-activeLineGutter {
+  background: none;
+}
+
 /**
  * Properties Panel
  */