@bpmn-io/form-js-editor 1.7.0 → 1.7.2

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/index.cjs

@@ -1410,6 +1410,7 @@ function PaletteEntry(props) {
     }
   };
   return jsxRuntime.jsxs("button", {
+    type: "button",
     class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
     "data-field-type": type,
     title: `Create ${getIndefiniteArticle(type)} ${label} element`,
@@ -1502,6 +1503,7 @@ function Palette(props) {
         value: searchTerm,
         onInput: handleInput
       }), searchTerm && jsxRuntime.jsx("button", {
+        type: "button",
         title: "Clear content",
         class: "fjs-palette-search-clear",
         onClick: handleClear,
@@ -2252,6 +2254,7 @@ function Element$1(props) {
       field: field
     }), jsxRuntime.jsx(ContextPad, {
       children: selection.isSelected(field) && field.type !== 'default' ? jsxRuntime.jsx("button", {
+        type: "button",
         title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
@@ -9724,7 +9727,7 @@ function Disabled(props) {
     getValue,
     id,
     label: 'Disabled',
-    tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
+    tooltip: 'Field cannot be edited by the end-user, and the data is not submitted. Takes precedence over read only.',
     inline: true,
     setValue
   });
@@ -10363,11 +10366,10 @@ function Height(props) {
     description,
     editField,
     field,
-    id,
-    defaultValue = 60 // default value for spacer
+    id
   } = props;
   const debounce = useService('debounce');
-  const getValue = e => minDash.get(field, ['height'], defaultValue);
+  const getValue = e => minDash.get(field, ['height'], null);
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -10394,7 +10396,7 @@ function Height(props) {
   */
 const validate$7 = value => {
   if (typeof value !== 'number') {
-    return null;
+    return 'A number is required.';
   }
   if (!Number.isInteger(value)) {
     return 'Should be an integer.';
@@ -10407,7 +10409,6 @@ const validate$7 = value => {
 function IFrameHeightEntry(props) {
   return [...HeightEntry({
     ...props,
-    defaultValue: 300,
     description: 'Height of the container in pixels.',
     isDefaultVisible: field => field.type === 'iframe'
   })];
@@ -10644,7 +10645,7 @@ function Content(props) {
 
 const description = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", jsxRuntime.jsx("a", {
-    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
+    href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
     children: "Learn more"
   })]
@@ -11601,15 +11602,20 @@ function ReadonlyEntry(props) {
     editField,
     field
   } = props;
+  const {
+    disabled
+  } = field;
   const entries = [];
-  entries.push({
-    id: 'readonly',
-    component: Readonly,
-    editField: editField,
-    field: field,
-    isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type)
-  });
+  if (!disabled) {
+    entries.push({
+      id: 'readonly',
+      component: Readonly,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => INPUTS.includes(field.type)
+    });
+  }
   return entries;
 }
 function Readonly(props) {