@bpmn-io/form-js-editor 0.14.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +116 -116
- package/dist/assets/form-js-editor-base.css +489 -489
- package/dist/index.cjs +247 -240
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +247 -240
- package/dist/index.es.js.map +1 -1
- package/dist/types/types.d.ts +28 -28
- package/package.json +4 -3
package/dist/index.es.js
CHANGED
|
@@ -447,10 +447,10 @@ function invokeFunction(fn, args) {
|
|
|
447
447
|
return fn.apply(null, args);
|
|
448
448
|
}
|
|
449
449
|
|
|
450
|
-
/**
|
|
451
|
-
* A factory to create a configurable debouncer.
|
|
452
|
-
*
|
|
453
|
-
* @param {number|boolean} [config=true]
|
|
450
|
+
/**
|
|
451
|
+
* A factory to create a configurable debouncer.
|
|
452
|
+
*
|
|
453
|
+
* @param {number|boolean} [config=true]
|
|
454
454
|
*/
|
|
455
455
|
function DebounceFactory(config = true) {
|
|
456
456
|
const timeout = typeof config === 'number' ? config : config ? 300 : 0;
|
|
@@ -463,11 +463,11 @@ function DebounceFactory(config = true) {
|
|
|
463
463
|
DebounceFactory.$inject = ['config.debounce'];
|
|
464
464
|
|
|
465
465
|
class FieldFactory {
|
|
466
|
-
/**
|
|
467
|
-
* @constructor
|
|
468
|
-
*
|
|
469
|
-
* @param { import('./FormFieldRegistry').default } formFieldRegistry
|
|
470
|
-
* @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
|
|
466
|
+
/**
|
|
467
|
+
* @constructor
|
|
468
|
+
*
|
|
469
|
+
* @param { import('./FormFieldRegistry').default } formFieldRegistry
|
|
470
|
+
* @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
|
|
471
471
|
*/
|
|
472
472
|
constructor(formFieldRegistry, formFields) {
|
|
473
473
|
this._formFieldRegistry = formFieldRegistry;
|
|
@@ -527,11 +527,11 @@ class FieldFactory {
|
|
|
527
527
|
FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
|
|
528
528
|
|
|
529
529
|
class FormFieldRegistry extends FormFieldRegistry$1 {
|
|
530
|
-
/**
|
|
531
|
-
* Updates a form fields id.
|
|
532
|
-
*
|
|
533
|
-
* @param {Object} formField
|
|
534
|
-
* @param {string} newId
|
|
530
|
+
/**
|
|
531
|
+
* Updates a form fields id.
|
|
532
|
+
*
|
|
533
|
+
* @param {Object} formField
|
|
534
|
+
* @param {string} newId
|
|
535
535
|
*/
|
|
536
536
|
updateId(formField, newId) {
|
|
537
537
|
this._validateId(newId);
|
|
@@ -552,13 +552,13 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
|
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
554
|
|
|
555
|
-
/**
|
|
556
|
-
* Validate the suitability of the given id and signals a problem
|
|
557
|
-
* with an exception.
|
|
558
|
-
*
|
|
559
|
-
* @param {string} id
|
|
560
|
-
*
|
|
561
|
-
* @throws {Error} if id is empty or already assigned
|
|
555
|
+
/**
|
|
556
|
+
* Validate the suitability of the given id and signals a problem
|
|
557
|
+
* with an exception.
|
|
558
|
+
*
|
|
559
|
+
* @param {string} id
|
|
560
|
+
*
|
|
561
|
+
* @throws {Error} if id is empty or already assigned
|
|
562
562
|
*/
|
|
563
563
|
_validateId(id) {
|
|
564
564
|
if (!id) {
|
|
@@ -571,11 +571,11 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
|
|
|
571
571
|
}
|
|
572
572
|
|
|
573
573
|
class FormLayoutValidator {
|
|
574
|
-
/**
|
|
575
|
-
* @constructor
|
|
576
|
-
*
|
|
577
|
-
* @param { import('./FormLayouter').default } formLayouter
|
|
578
|
-
* @param { import('./FormFieldRegistry').default } formFieldRegistry
|
|
574
|
+
/**
|
|
575
|
+
* @constructor
|
|
576
|
+
*
|
|
577
|
+
* @param { import('./FormLayouter').default } formLayouter
|
|
578
|
+
* @param { import('./FormFieldRegistry').default } formFieldRegistry
|
|
579
579
|
*/
|
|
580
580
|
constructor(formLayouter, formFieldRegistry) {
|
|
581
581
|
this._formLayouter = formLayouter;
|
|
@@ -628,11 +628,11 @@ class FormLayoutValidator {
|
|
|
628
628
|
FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
|
|
629
629
|
|
|
630
630
|
class Importer {
|
|
631
|
-
/**
|
|
632
|
-
* @constructor
|
|
633
|
-
* @param { import('../core/FormFieldRegistry').default } formFieldRegistry
|
|
634
|
-
* @param { import('../core/FieldFactory').default } fieldFactory
|
|
635
|
-
* @param { import('../core/FormLayouter').default } formLayouter
|
|
631
|
+
/**
|
|
632
|
+
* @constructor
|
|
633
|
+
* @param { import('../core/FormFieldRegistry').default } formFieldRegistry
|
|
634
|
+
* @param { import('../core/FieldFactory').default } fieldFactory
|
|
635
|
+
* @param { import('../core/FormLayouter').default } formLayouter
|
|
636
636
|
*/
|
|
637
637
|
constructor(formFieldRegistry, fieldFactory, formLayouter) {
|
|
638
638
|
this._formFieldRegistry = formFieldRegistry;
|
|
@@ -640,21 +640,21 @@ class Importer {
|
|
|
640
640
|
this._formLayouter = formLayouter;
|
|
641
641
|
}
|
|
642
642
|
|
|
643
|
-
/**
|
|
644
|
-
* Import schema creating rows, fields, attaching additional
|
|
645
|
-
* information to each field and adding fields to the
|
|
646
|
-
* field registry.
|
|
647
|
-
*
|
|
648
|
-
* Additional information attached:
|
|
649
|
-
*
|
|
650
|
-
* * `id` (unless present)
|
|
651
|
-
* * `_parent`
|
|
652
|
-
* * `_path`
|
|
653
|
-
*
|
|
654
|
-
* @param {any} schema
|
|
655
|
-
*
|
|
656
|
-
* @typedef {{ warnings: Error[], schema: any }} ImportResult
|
|
657
|
-
* @returns {ImportResult}
|
|
643
|
+
/**
|
|
644
|
+
* Import schema creating rows, fields, attaching additional
|
|
645
|
+
* information to each field and adding fields to the
|
|
646
|
+
* field registry.
|
|
647
|
+
*
|
|
648
|
+
* Additional information attached:
|
|
649
|
+
*
|
|
650
|
+
* * `id` (unless present)
|
|
651
|
+
* * `_parent`
|
|
652
|
+
* * `_path`
|
|
653
|
+
*
|
|
654
|
+
* @param {any} schema
|
|
655
|
+
*
|
|
656
|
+
* @typedef {{ warnings: Error[], schema: any }} ImportResult
|
|
657
|
+
* @returns {ImportResult}
|
|
658
658
|
*/
|
|
659
659
|
importSchema(schema) {
|
|
660
660
|
// TODO: Add warnings
|
|
@@ -672,12 +672,12 @@ class Importer {
|
|
|
672
672
|
}
|
|
673
673
|
}
|
|
674
674
|
|
|
675
|
-
/**
|
|
676
|
-
* @param {{[x: string]: any}} fieldAttrs
|
|
677
|
-
* @param {String} [parentId]
|
|
678
|
-
* @param {number} [index]
|
|
679
|
-
*
|
|
680
|
-
* @return {any} field
|
|
675
|
+
/**
|
|
676
|
+
* @param {{[x: string]: any}} fieldAttrs
|
|
677
|
+
* @param {String} [parentId]
|
|
678
|
+
* @param {number} [index]
|
|
679
|
+
*
|
|
680
|
+
* @return {any} field
|
|
681
681
|
*/
|
|
682
682
|
importFormField(fieldAttrs, parentId, index) {
|
|
683
683
|
const {
|
|
@@ -714,11 +714,11 @@ class Importer {
|
|
|
714
714
|
return field;
|
|
715
715
|
}
|
|
716
716
|
|
|
717
|
-
/**
|
|
718
|
-
* @param {Array<any>} components
|
|
719
|
-
* @param {string} parentId
|
|
720
|
-
*
|
|
721
|
-
* @return {Array<any>} imported components
|
|
717
|
+
/**
|
|
718
|
+
* @param {Array<any>} components
|
|
719
|
+
* @param {string} parentId
|
|
720
|
+
*
|
|
721
|
+
* @return {Array<any>} imported components
|
|
722
722
|
*/
|
|
723
723
|
importFormFields(components, parentId) {
|
|
724
724
|
return components.map((component, index) => {
|
|
@@ -748,11 +748,11 @@ const DragAndDropContext = createContext({
|
|
|
748
748
|
});
|
|
749
749
|
var DragAndDropContext$1 = DragAndDropContext;
|
|
750
750
|
|
|
751
|
-
/**
|
|
752
|
-
* @param {string} type
|
|
753
|
-
* @param {boolean} [strict]
|
|
754
|
-
*
|
|
755
|
-
* @returns {any}
|
|
751
|
+
/**
|
|
752
|
+
* @param {string} type
|
|
753
|
+
* @param {boolean} [strict]
|
|
754
|
+
*
|
|
755
|
+
* @returns {any}
|
|
756
756
|
*/
|
|
757
757
|
function getService$1(type, strict) {}
|
|
758
758
|
const FormEditorContext = createContext({
|
|
@@ -1045,19 +1045,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
|
|
|
1045
1045
|
const DRAG_NO_MOVE_CLS = 'fjs-no-move';
|
|
1046
1046
|
const ERROR_DROP_CLS = 'fjs-error-drop';
|
|
1047
1047
|
|
|
1048
|
-
/**
|
|
1049
|
-
* @typedef { { id: String, components: Array<any> } } FormRow
|
|
1048
|
+
/**
|
|
1049
|
+
* @typedef { { id: String, components: Array<any> } } FormRow
|
|
1050
1050
|
*/
|
|
1051
1051
|
|
|
1052
1052
|
class Dragging {
|
|
1053
|
-
/**
|
|
1054
|
-
* @constructor
|
|
1055
|
-
*
|
|
1056
|
-
* @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
|
|
1057
|
-
* @param { import('../../core/FormLayouter').default } formLayouter
|
|
1058
|
-
* @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
|
|
1059
|
-
* @param { import('../../core/EventBus').default } eventBus
|
|
1060
|
-
* @param { import('../modeling/Modeling').default } modeling
|
|
1053
|
+
/**
|
|
1054
|
+
* @constructor
|
|
1055
|
+
*
|
|
1056
|
+
* @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
|
|
1057
|
+
* @param { import('../../core/FormLayouter').default } formLayouter
|
|
1058
|
+
* @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
|
|
1059
|
+
* @param { import('../../core/EventBus').default } eventBus
|
|
1060
|
+
* @param { import('../modeling/Modeling').default } modeling
|
|
1061
1061
|
*/
|
|
1062
1062
|
constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
|
|
1063
1063
|
this._formFieldRegistry = formFieldRegistry;
|
|
@@ -1067,13 +1067,13 @@ class Dragging {
|
|
|
1067
1067
|
this._modeling = modeling;
|
|
1068
1068
|
}
|
|
1069
1069
|
|
|
1070
|
-
/**
|
|
1071
|
-
* Calculcates position in form schema given the dropped place.
|
|
1072
|
-
*
|
|
1073
|
-
* @param { FormRow } targetRow
|
|
1074
|
-
* @param { any } targetFormField
|
|
1075
|
-
* @param { HTMLElement } sibling
|
|
1076
|
-
* @returns { number }
|
|
1070
|
+
/**
|
|
1071
|
+
* Calculcates position in form schema given the dropped place.
|
|
1072
|
+
*
|
|
1073
|
+
* @param { FormRow } targetRow
|
|
1074
|
+
* @param { any } targetFormField
|
|
1075
|
+
* @param { HTMLElement } sibling
|
|
1076
|
+
* @returns { number }
|
|
1077
1077
|
*/
|
|
1078
1078
|
getTargetIndex(targetRow, targetFormField, sibling) {
|
|
1079
1079
|
/** @type HTMLElement */
|
|
@@ -1175,8 +1175,8 @@ class Dragging {
|
|
|
1175
1175
|
}
|
|
1176
1176
|
}
|
|
1177
1177
|
|
|
1178
|
-
/**
|
|
1179
|
-
* @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
|
|
1178
|
+
/**
|
|
1179
|
+
* @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
|
|
1180
1180
|
*/
|
|
1181
1181
|
createDragulaInstance(options) {
|
|
1182
1182
|
const {
|
|
@@ -1421,7 +1421,7 @@ function DebugColumns(props) {
|
|
|
1421
1421
|
return null;
|
|
1422
1422
|
}
|
|
1423
1423
|
return jsx("div", {
|
|
1424
|
-
style: "width: fit-content
|
|
1424
|
+
style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
|
|
1425
1425
|
class: "fjs-debug-columns",
|
|
1426
1426
|
children: (field.layout || {}).columns || 'auto'
|
|
1427
1427
|
});
|
|
@@ -2468,10 +2468,10 @@ function updateRow(formField, rowId) {
|
|
|
2468
2468
|
}
|
|
2469
2469
|
|
|
2470
2470
|
class AddFormFieldHandler {
|
|
2471
|
-
/**
|
|
2472
|
-
* @constructor
|
|
2473
|
-
* @param { import('../../../FormEditor').default } formEditor
|
|
2474
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2471
|
+
/**
|
|
2472
|
+
* @constructor
|
|
2473
|
+
* @param { import('../../../FormEditor').default } formEditor
|
|
2474
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2475
2475
|
*/
|
|
2476
2476
|
constructor(formEditor, formFieldRegistry) {
|
|
2477
2477
|
this._formEditor = formEditor;
|
|
@@ -2532,10 +2532,10 @@ class AddFormFieldHandler {
|
|
|
2532
2532
|
AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
|
|
2533
2533
|
|
|
2534
2534
|
class EditFormFieldHandler {
|
|
2535
|
-
/**
|
|
2536
|
-
* @constructor
|
|
2537
|
-
* @param { import('../../../FormEditor').default } formEditor
|
|
2538
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2535
|
+
/**
|
|
2536
|
+
* @constructor
|
|
2537
|
+
* @param { import('../../../FormEditor').default } formEditor
|
|
2538
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2539
2539
|
*/
|
|
2540
2540
|
constructor(formEditor, formFieldRegistry) {
|
|
2541
2541
|
this._formEditor = formEditor;
|
|
@@ -2598,10 +2598,10 @@ class EditFormFieldHandler {
|
|
|
2598
2598
|
EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
|
|
2599
2599
|
|
|
2600
2600
|
class MoveFormFieldHandler {
|
|
2601
|
-
/**
|
|
2602
|
-
* @constructor
|
|
2603
|
-
* @param { import('../../../FormEditor').default } formEditor
|
|
2604
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2601
|
+
/**
|
|
2602
|
+
* @constructor
|
|
2603
|
+
* @param { import('../../../FormEditor').default } formEditor
|
|
2604
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2605
2605
|
*/
|
|
2606
2606
|
constructor(formEditor, formFieldRegistry) {
|
|
2607
2607
|
this._formEditor = formEditor;
|
|
@@ -2690,10 +2690,10 @@ class MoveFormFieldHandler {
|
|
|
2690
2690
|
MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
|
|
2691
2691
|
|
|
2692
2692
|
class RemoveFormFieldHandler {
|
|
2693
|
-
/**
|
|
2694
|
-
* @constructor
|
|
2695
|
-
* @param { import('../../../FormEditor').default } formEditor
|
|
2696
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2693
|
+
/**
|
|
2694
|
+
* @constructor
|
|
2695
|
+
* @param { import('../../../FormEditor').default } formEditor
|
|
2696
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2697
2697
|
*/
|
|
2698
2698
|
constructor(formEditor, formFieldRegistry) {
|
|
2699
2699
|
this._formEditor = formEditor;
|
|
@@ -2753,9 +2753,9 @@ class RemoveFormFieldHandler {
|
|
|
2753
2753
|
RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
|
|
2754
2754
|
|
|
2755
2755
|
class UpdateIdClaimHandler {
|
|
2756
|
-
/**
|
|
2757
|
-
* @constructor
|
|
2758
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2756
|
+
/**
|
|
2757
|
+
* @constructor
|
|
2758
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2759
2759
|
*/
|
|
2760
2760
|
constructor(formFieldRegistry) {
|
|
2761
2761
|
this._formFieldRegistry = formFieldRegistry;
|
|
@@ -2788,9 +2788,9 @@ class UpdateIdClaimHandler {
|
|
|
2788
2788
|
UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
|
|
2789
2789
|
|
|
2790
2790
|
class UpdateKeyClaimHandler {
|
|
2791
|
-
/**
|
|
2792
|
-
* @constructor
|
|
2793
|
-
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2791
|
+
/**
|
|
2792
|
+
* @constructor
|
|
2793
|
+
* @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
|
|
2794
2794
|
*/
|
|
2795
2795
|
constructor(formFieldRegistry) {
|
|
2796
2796
|
this._formFieldRegistry = formFieldRegistry;
|
|
@@ -3140,8 +3140,8 @@ class ValidateBehavior extends CommandInterceptor {
|
|
|
3140
3140
|
constructor(eventBus) {
|
|
3141
3141
|
super(eventBus);
|
|
3142
3142
|
|
|
3143
|
-
/**
|
|
3144
|
-
* Remove custom validation if <validationType> is about to be added.
|
|
3143
|
+
/**
|
|
3144
|
+
* Remove custom validation if <validationType> is about to be added.
|
|
3145
3145
|
*/
|
|
3146
3146
|
// @ts-ignore-next-line
|
|
3147
3147
|
this.preExecute('formField.edit', function (context) {
|
|
@@ -3686,10 +3686,10 @@ class PaletteRenderer {
|
|
|
3686
3686
|
});
|
|
3687
3687
|
}
|
|
3688
3688
|
|
|
3689
|
-
/**
|
|
3690
|
-
* Attach the palette to a parent node.
|
|
3691
|
-
*
|
|
3692
|
-
* @param {HTMLElement} container
|
|
3689
|
+
/**
|
|
3690
|
+
* Attach the palette to a parent node.
|
|
3691
|
+
*
|
|
3692
|
+
* @param {HTMLElement} container
|
|
3693
3693
|
*/
|
|
3694
3694
|
attachTo(container) {
|
|
3695
3695
|
if (!container) {
|
|
@@ -3709,8 +3709,8 @@ class PaletteRenderer {
|
|
|
3709
3709
|
this._eventBus.fire('palette.attach');
|
|
3710
3710
|
}
|
|
3711
3711
|
|
|
3712
|
-
/**
|
|
3713
|
-
* Detach the palette from its parent node.
|
|
3712
|
+
/**
|
|
3713
|
+
* Detach the palette from its parent node.
|
|
3714
3714
|
*/
|
|
3715
3715
|
detach() {
|
|
3716
3716
|
const parentNode = this._container.parentNode;
|
|
@@ -6067,11 +6067,11 @@ function prefixId$1(id) {
|
|
|
6067
6067
|
return `bio-properties-panel-${id}`;
|
|
6068
6068
|
}
|
|
6069
6069
|
|
|
6070
|
-
/**
|
|
6071
|
-
* @param {string} type
|
|
6072
|
-
* @param {boolean} [strict]
|
|
6073
|
-
*
|
|
6074
|
-
* @returns {any}
|
|
6070
|
+
/**
|
|
6071
|
+
* @param {string} type
|
|
6072
|
+
* @param {boolean} [strict]
|
|
6073
|
+
*
|
|
6074
|
+
* @returns {any}
|
|
6075
6075
|
*/
|
|
6076
6076
|
function getService(type, strict) {}
|
|
6077
6077
|
const PropertiesPanelContext = createContext({
|
|
@@ -6160,8 +6160,8 @@ const PropertiesPanelHeaderProvider = {
|
|
|
6160
6160
|
}
|
|
6161
6161
|
};
|
|
6162
6162
|
|
|
6163
|
-
/**
|
|
6164
|
-
* Provide placeholders for empty and multiple state.
|
|
6163
|
+
/**
|
|
6164
|
+
* Provide placeholders for empty and multiple state.
|
|
6165
6165
|
*/
|
|
6166
6166
|
const PropertiesPanelPlaceholderProvider = {
|
|
6167
6167
|
getEmpty: () => {
|
|
@@ -6233,10 +6233,10 @@ function useService (type, strict) {
|
|
|
6233
6233
|
return getService(type, strict);
|
|
6234
6234
|
}
|
|
6235
6235
|
|
|
6236
|
-
/**
|
|
6237
|
-
* Retrieve list of variables from the form schema.
|
|
6238
|
-
*
|
|
6239
|
-
* @returns { string[] } list of variables used in form schema
|
|
6236
|
+
/**
|
|
6237
|
+
* Retrieve list of variables from the form schema.
|
|
6238
|
+
*
|
|
6239
|
+
* @returns { string[] } list of variables used in form schema
|
|
6240
6240
|
*/
|
|
6241
6241
|
function useVariables() {
|
|
6242
6242
|
const form = useService('formEditor');
|
|
@@ -7513,7 +7513,7 @@ function Label(props) {
|
|
|
7513
7513
|
id,
|
|
7514
7514
|
label: 'Label',
|
|
7515
7515
|
setValue,
|
|
7516
|
-
validate: validateFactory(getValue())
|
|
7516
|
+
validate: validateFactory(getValue(), entry => entry.label)
|
|
7517
7517
|
});
|
|
7518
7518
|
}
|
|
7519
7519
|
function Value$1(props) {
|
|
@@ -7539,7 +7539,7 @@ function Value$1(props) {
|
|
|
7539
7539
|
id,
|
|
7540
7540
|
label: 'Value',
|
|
7541
7541
|
setValue,
|
|
7542
|
-
validate: validateFactory(getValue())
|
|
7542
|
+
validate: validateFactory(getValue(), entry => entry.value)
|
|
7543
7543
|
});
|
|
7544
7544
|
}
|
|
7545
7545
|
|
|
@@ -7629,14 +7629,14 @@ function Value(props) {
|
|
|
7629
7629
|
|
|
7630
7630
|
// helpers //////////
|
|
7631
7631
|
|
|
7632
|
-
/**
|
|
7633
|
-
* Returns copy of object with updated value.
|
|
7634
|
-
*
|
|
7635
|
-
* @param {Object} properties
|
|
7636
|
-
* @param {string} key
|
|
7637
|
-
* @param {string} value
|
|
7638
|
-
*
|
|
7639
|
-
* @returns {Object}
|
|
7632
|
+
/**
|
|
7633
|
+
* Returns copy of object with updated value.
|
|
7634
|
+
*
|
|
7635
|
+
* @param {Object} properties
|
|
7636
|
+
* @param {string} key
|
|
7637
|
+
* @param {string} value
|
|
7638
|
+
*
|
|
7639
|
+
* @returns {Object}
|
|
7640
7640
|
*/
|
|
7641
7641
|
function updateValue(properties, key, value) {
|
|
7642
7642
|
return {
|
|
@@ -7645,14 +7645,14 @@ function updateValue(properties, key, value) {
|
|
|
7645
7645
|
};
|
|
7646
7646
|
}
|
|
7647
7647
|
|
|
7648
|
-
/**
|
|
7649
|
-
* Returns copy of object with updated key.
|
|
7650
|
-
*
|
|
7651
|
-
* @param {Object} properties
|
|
7652
|
-
* @param {string} oldKey
|
|
7653
|
-
* @param {string} newKey
|
|
7654
|
-
*
|
|
7655
|
-
* @returns {Object}
|
|
7648
|
+
/**
|
|
7649
|
+
* Returns copy of object with updated key.
|
|
7650
|
+
*
|
|
7651
|
+
* @param {Object} properties
|
|
7652
|
+
* @param {string} oldKey
|
|
7653
|
+
* @param {string} newKey
|
|
7654
|
+
*
|
|
7655
|
+
* @returns {Object}
|
|
7656
7656
|
*/
|
|
7657
7657
|
function updateKey(properties, oldKey, newKey) {
|
|
7658
7658
|
return Object.entries(properties).reduce((newProperties, entry) => {
|
|
@@ -7781,13 +7781,13 @@ function StaticValuesSourceEntry(props) {
|
|
|
7781
7781
|
const addEntry = e => {
|
|
7782
7782
|
e.stopPropagation();
|
|
7783
7783
|
const index = values.length + 1;
|
|
7784
|
-
const entry = getIndexedEntry(index);
|
|
7784
|
+
const entry = getIndexedEntry(index, values);
|
|
7785
7785
|
editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
|
|
7786
7786
|
};
|
|
7787
7787
|
const removeEntry = entry => {
|
|
7788
7788
|
editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], without(values, entry));
|
|
7789
7789
|
};
|
|
7790
|
-
const validateFactory = key => {
|
|
7790
|
+
const validateFactory = (key, getValue) => {
|
|
7791
7791
|
return value => {
|
|
7792
7792
|
if (value === key) {
|
|
7793
7793
|
return;
|
|
@@ -7795,7 +7795,7 @@ function StaticValuesSourceEntry(props) {
|
|
|
7795
7795
|
if (isUndefined(value) || !value.length) {
|
|
7796
7796
|
return 'Must not be empty.';
|
|
7797
7797
|
}
|
|
7798
|
-
const isValueAssigned = values.find(entry => entry
|
|
7798
|
+
const isValueAssigned = values.find(entry => getValue(entry) === value);
|
|
7799
7799
|
if (isValueAssigned) {
|
|
7800
7800
|
return 'Must be unique.';
|
|
7801
7801
|
}
|
|
@@ -7826,17 +7826,23 @@ function StaticValuesSourceEntry(props) {
|
|
|
7826
7826
|
|
|
7827
7827
|
// helper
|
|
7828
7828
|
|
|
7829
|
-
function getIndexedEntry(index) {
|
|
7829
|
+
function getIndexedEntry(index, values) {
|
|
7830
7830
|
const entry = {
|
|
7831
7831
|
label: 'Value',
|
|
7832
7832
|
value: 'value'
|
|
7833
7833
|
};
|
|
7834
|
+
while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
|
|
7835
|
+
index++;
|
|
7836
|
+
}
|
|
7834
7837
|
if (index > 1) {
|
|
7835
7838
|
entry.label += ` ${index}`;
|
|
7836
7839
|
entry.value += `${index}`;
|
|
7837
7840
|
}
|
|
7838
7841
|
return entry;
|
|
7839
7842
|
}
|
|
7843
|
+
function labelOrValueIsAlreadyAssignedForIndex(index, values) {
|
|
7844
|
+
return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
|
|
7845
|
+
}
|
|
7840
7846
|
|
|
7841
7847
|
function AdornerEntry(props) {
|
|
7842
7848
|
const {
|
|
@@ -8288,8 +8294,8 @@ function ValuesGroups(field, editField) {
|
|
|
8288
8294
|
};
|
|
8289
8295
|
const valuesSourceId = `${fieldId}-valuesSource`;
|
|
8290
8296
|
|
|
8291
|
-
/**
|
|
8292
|
-
* @type {Array<Group|ListGroup>}
|
|
8297
|
+
/**
|
|
8298
|
+
* @type {Array<Group|ListGroup>}
|
|
8293
8299
|
*/
|
|
8294
8300
|
const groups = [{
|
|
8295
8301
|
id: valuesSourceId,
|
|
@@ -8337,12 +8343,13 @@ function CustomValuesGroup(field, editField) {
|
|
|
8337
8343
|
}
|
|
8338
8344
|
const addEntry = event => {
|
|
8339
8345
|
event.stopPropagation();
|
|
8340
|
-
|
|
8341
|
-
|
|
8342
|
-
|
|
8346
|
+
let index = Object.keys(properties).length + 1;
|
|
8347
|
+
while (`key${index}` in properties) {
|
|
8348
|
+
index++;
|
|
8349
|
+
}
|
|
8343
8350
|
editField(field, ['properties'], {
|
|
8344
8351
|
...properties,
|
|
8345
|
-
[key]: value
|
|
8352
|
+
[`key${index}`]: 'value'
|
|
8346
8353
|
});
|
|
8347
8354
|
};
|
|
8348
8355
|
const validateFactory = key => {
|
|
@@ -8390,13 +8397,13 @@ function CustomValuesGroup(field, editField) {
|
|
|
8390
8397
|
|
|
8391
8398
|
// helpers //////////
|
|
8392
8399
|
|
|
8393
|
-
/**
|
|
8394
|
-
* Returns copy of object without key.
|
|
8395
|
-
*
|
|
8396
|
-
* @param {Object} properties
|
|
8397
|
-
* @param {string} oldKey
|
|
8398
|
-
*
|
|
8399
|
-
* @returns {Object}
|
|
8400
|
+
/**
|
|
8401
|
+
* Returns copy of object without key.
|
|
8402
|
+
*
|
|
8403
|
+
* @param {Object} properties
|
|
8404
|
+
* @param {string} oldKey
|
|
8405
|
+
*
|
|
8406
|
+
* @returns {Object}
|
|
8400
8407
|
*/
|
|
8401
8408
|
function removeKey(properties, oldKey) {
|
|
8402
8409
|
return Object.entries(properties).reduce((newProperties, entry) => {
|
|
@@ -8510,9 +8517,9 @@ function FormPropertiesPanel(props) {
|
|
|
8510
8517
|
}, []);
|
|
8511
8518
|
useLayoutEffect(() => {
|
|
8512
8519
|
const onFieldChanged = () => {
|
|
8513
|
-
/**
|
|
8514
|
-
* TODO(pinussilvestrus): update with actual updated element,
|
|
8515
|
-
* once we have a proper updater/change support
|
|
8520
|
+
/**
|
|
8521
|
+
* TODO(pinussilvestrus): update with actual updated element,
|
|
8522
|
+
* once we have a proper updater/change support
|
|
8516
8523
|
*/
|
|
8517
8524
|
_update(selection.get() || schema);
|
|
8518
8525
|
};
|
|
@@ -8563,10 +8570,10 @@ class PropertiesPanelRenderer {
|
|
|
8563
8570
|
});
|
|
8564
8571
|
}
|
|
8565
8572
|
|
|
8566
|
-
/**
|
|
8567
|
-
* Attach the properties panel to a parent node.
|
|
8568
|
-
*
|
|
8569
|
-
* @param {HTMLElement} container
|
|
8573
|
+
/**
|
|
8574
|
+
* Attach the properties panel to a parent node.
|
|
8575
|
+
*
|
|
8576
|
+
* @param {HTMLElement} container
|
|
8570
8577
|
*/
|
|
8571
8578
|
attachTo(container) {
|
|
8572
8579
|
if (!container) {
|
|
@@ -8586,8 +8593,8 @@ class PropertiesPanelRenderer {
|
|
|
8586
8593
|
this._eventBus.fire('propertiesPanel.attach');
|
|
8587
8594
|
}
|
|
8588
8595
|
|
|
8589
|
-
/**
|
|
8590
|
-
* Detach the properties panel from its parent node.
|
|
8596
|
+
/**
|
|
8597
|
+
* Detach the properties panel from its parent node.
|
|
8591
8598
|
*/
|
|
8592
8599
|
detach() {
|
|
8593
8600
|
const parentNode = this._container.parentNode;
|
|
@@ -8625,48 +8632,48 @@ var ExpressionLanguageModule = {
|
|
|
8625
8632
|
|
|
8626
8633
|
const ids = new Ids([32, 36, 1]);
|
|
8627
8634
|
|
|
8628
|
-
/**
|
|
8629
|
-
* @typedef { import('./types').Injector } Injector
|
|
8630
|
-
* @typedef { import('./types').Module } Module
|
|
8631
|
-
* @typedef { import('./types').Schema } Schema
|
|
8632
|
-
*
|
|
8633
|
-
* @typedef { import('./types').FormEditorOptions } FormEditorOptions
|
|
8634
|
-
* @typedef { import('./types').FormEditorProperties } FormEditorProperties
|
|
8635
|
-
*
|
|
8636
|
-
* @typedef { {
|
|
8637
|
-
* properties: FormEditorProperties,
|
|
8638
|
-
* schema: Schema
|
|
8639
|
-
* } } State
|
|
8640
|
-
*
|
|
8641
|
-
* @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
|
|
8642
|
-
* @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
|
|
8643
|
-
* @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
|
|
8635
|
+
/**
|
|
8636
|
+
* @typedef { import('./types').Injector } Injector
|
|
8637
|
+
* @typedef { import('./types').Module } Module
|
|
8638
|
+
* @typedef { import('./types').Schema } Schema
|
|
8639
|
+
*
|
|
8640
|
+
* @typedef { import('./types').FormEditorOptions } FormEditorOptions
|
|
8641
|
+
* @typedef { import('./types').FormEditorProperties } FormEditorProperties
|
|
8642
|
+
*
|
|
8643
|
+
* @typedef { {
|
|
8644
|
+
* properties: FormEditorProperties,
|
|
8645
|
+
* schema: Schema
|
|
8646
|
+
* } } State
|
|
8647
|
+
*
|
|
8648
|
+
* @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
|
|
8649
|
+
* @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
|
|
8650
|
+
* @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
|
|
8644
8651
|
*/
|
|
8645
8652
|
|
|
8646
|
-
/**
|
|
8647
|
-
* The form editor.
|
|
8653
|
+
/**
|
|
8654
|
+
* The form editor.
|
|
8648
8655
|
*/
|
|
8649
8656
|
class FormEditor {
|
|
8650
|
-
/**
|
|
8651
|
-
* @constructor
|
|
8652
|
-
* @param {FormEditorOptions} options
|
|
8657
|
+
/**
|
|
8658
|
+
* @constructor
|
|
8659
|
+
* @param {FormEditorOptions} options
|
|
8653
8660
|
*/
|
|
8654
8661
|
constructor(options = {}) {
|
|
8655
|
-
/**
|
|
8656
|
-
* @public
|
|
8657
|
-
* @type {OnEventType}
|
|
8662
|
+
/**
|
|
8663
|
+
* @public
|
|
8664
|
+
* @type {OnEventType}
|
|
8658
8665
|
*/
|
|
8659
8666
|
this.on = this._onEvent;
|
|
8660
8667
|
|
|
8661
|
-
/**
|
|
8662
|
-
* @public
|
|
8663
|
-
* @type {String}
|
|
8668
|
+
/**
|
|
8669
|
+
* @public
|
|
8670
|
+
* @type {String}
|
|
8664
8671
|
*/
|
|
8665
8672
|
this._id = ids.next();
|
|
8666
8673
|
|
|
8667
|
-
/**
|
|
8668
|
-
* @private
|
|
8669
|
-
* @type {Element}
|
|
8674
|
+
/**
|
|
8675
|
+
* @private
|
|
8676
|
+
* @type {Element}
|
|
8670
8677
|
*/
|
|
8671
8678
|
this._container = createFormContainer();
|
|
8672
8679
|
this._container.setAttribute('input-handle-modified-keys', 'z,y');
|
|
@@ -8677,15 +8684,15 @@ class FormEditor {
|
|
|
8677
8684
|
properties = {}
|
|
8678
8685
|
} = options;
|
|
8679
8686
|
|
|
8680
|
-
/**
|
|
8681
|
-
* @private
|
|
8682
|
-
* @type {any}
|
|
8687
|
+
/**
|
|
8688
|
+
* @private
|
|
8689
|
+
* @type {any}
|
|
8683
8690
|
*/
|
|
8684
8691
|
this.exporter = exporter;
|
|
8685
8692
|
|
|
8686
|
-
/**
|
|
8687
|
-
* @private
|
|
8688
|
-
* @type {State}
|
|
8693
|
+
/**
|
|
8694
|
+
* @private
|
|
8695
|
+
* @type {State}
|
|
8689
8696
|
*/
|
|
8690
8697
|
this._state = {
|
|
8691
8698
|
properties,
|
|
@@ -8714,10 +8721,10 @@ class FormEditor {
|
|
|
8714
8721
|
this._detach(false);
|
|
8715
8722
|
}
|
|
8716
8723
|
|
|
8717
|
-
/**
|
|
8718
|
-
* @param {Schema} schema
|
|
8719
|
-
*
|
|
8720
|
-
* @return {Promise<{ warnings: Array<any> }>}
|
|
8724
|
+
/**
|
|
8725
|
+
* @param {Schema} schema
|
|
8726
|
+
*
|
|
8727
|
+
* @return {Promise<{ warnings: Array<any> }>}
|
|
8721
8728
|
*/
|
|
8722
8729
|
importSchema(schema) {
|
|
8723
8730
|
return new Promise((resolve, reject) => {
|
|
@@ -8746,15 +8753,15 @@ class FormEditor {
|
|
|
8746
8753
|
});
|
|
8747
8754
|
}
|
|
8748
8755
|
|
|
8749
|
-
/**
|
|
8750
|
-
* @returns {Schema}
|
|
8756
|
+
/**
|
|
8757
|
+
* @returns {Schema}
|
|
8751
8758
|
*/
|
|
8752
8759
|
saveSchema() {
|
|
8753
8760
|
return this.getSchema();
|
|
8754
8761
|
}
|
|
8755
8762
|
|
|
8756
|
-
/**
|
|
8757
|
-
* @returns {Schema}
|
|
8763
|
+
/**
|
|
8764
|
+
* @returns {Schema}
|
|
8758
8765
|
*/
|
|
8759
8766
|
getSchema() {
|
|
8760
8767
|
const {
|
|
@@ -8763,8 +8770,8 @@ class FormEditor {
|
|
|
8763
8770
|
return exportSchema(schema, this.exporter, schemaVersion);
|
|
8764
8771
|
}
|
|
8765
8772
|
|
|
8766
|
-
/**
|
|
8767
|
-
* @param {Element|string} parentNode
|
|
8773
|
+
/**
|
|
8774
|
+
* @param {Element|string} parentNode
|
|
8768
8775
|
*/
|
|
8769
8776
|
attachTo(parentNode) {
|
|
8770
8777
|
if (!parentNode) {
|
|
@@ -8782,10 +8789,10 @@ class FormEditor {
|
|
|
8782
8789
|
this._detach();
|
|
8783
8790
|
}
|
|
8784
8791
|
|
|
8785
|
-
/**
|
|
8786
|
-
* @internal
|
|
8787
|
-
*
|
|
8788
|
-
* @param {boolean} [emit]
|
|
8792
|
+
/**
|
|
8793
|
+
* @internal
|
|
8794
|
+
*
|
|
8795
|
+
* @param {boolean} [emit]
|
|
8789
8796
|
*/
|
|
8790
8797
|
_detach(emit = true) {
|
|
8791
8798
|
const container = this._container,
|
|
@@ -8799,9 +8806,9 @@ class FormEditor {
|
|
|
8799
8806
|
parentNode.removeChild(container);
|
|
8800
8807
|
}
|
|
8801
8808
|
|
|
8802
|
-
/**
|
|
8803
|
-
* @param {any} property
|
|
8804
|
-
* @param {any} value
|
|
8809
|
+
/**
|
|
8810
|
+
* @param {any} property
|
|
8811
|
+
* @param {any} value
|
|
8805
8812
|
*/
|
|
8806
8813
|
setProperty(property, value) {
|
|
8807
8814
|
const properties = set$1(this._getState().properties, [property], value);
|
|
@@ -8810,21 +8817,21 @@ class FormEditor {
|
|
|
8810
8817
|
});
|
|
8811
8818
|
}
|
|
8812
8819
|
|
|
8813
|
-
/**
|
|
8814
|
-
* @param {string} type
|
|
8815
|
-
* @param {Function} handler
|
|
8820
|
+
/**
|
|
8821
|
+
* @param {string} type
|
|
8822
|
+
* @param {Function} handler
|
|
8816
8823
|
*/
|
|
8817
8824
|
off(type, handler) {
|
|
8818
8825
|
this.get('eventBus').off(type, handler);
|
|
8819
8826
|
}
|
|
8820
8827
|
|
|
8821
|
-
/**
|
|
8822
|
-
* @internal
|
|
8823
|
-
*
|
|
8824
|
-
* @param {FormEditorOptions} options
|
|
8825
|
-
* @param {Element} container
|
|
8826
|
-
*
|
|
8827
|
-
* @returns {Injector}
|
|
8828
|
+
/**
|
|
8829
|
+
* @internal
|
|
8830
|
+
*
|
|
8831
|
+
* @param {FormEditorOptions} options
|
|
8832
|
+
* @param {Element} container
|
|
8833
|
+
*
|
|
8834
|
+
* @returns {Injector}
|
|
8828
8835
|
*/
|
|
8829
8836
|
_createInjector(options, container) {
|
|
8830
8837
|
const {
|
|
@@ -8846,22 +8853,22 @@ class FormEditor {
|
|
|
8846
8853
|
}, core, ...modules, ...additionalModules]);
|
|
8847
8854
|
}
|
|
8848
8855
|
|
|
8849
|
-
/**
|
|
8850
|
-
* @internal
|
|
8856
|
+
/**
|
|
8857
|
+
* @internal
|
|
8851
8858
|
*/
|
|
8852
8859
|
_emit(type, data) {
|
|
8853
8860
|
this.get('eventBus').fire(type, data);
|
|
8854
8861
|
}
|
|
8855
8862
|
|
|
8856
|
-
/**
|
|
8857
|
-
* @internal
|
|
8863
|
+
/**
|
|
8864
|
+
* @internal
|
|
8858
8865
|
*/
|
|
8859
8866
|
_getState() {
|
|
8860
8867
|
return this._state;
|
|
8861
8868
|
}
|
|
8862
8869
|
|
|
8863
|
-
/**
|
|
8864
|
-
* @internal
|
|
8870
|
+
/**
|
|
8871
|
+
* @internal
|
|
8865
8872
|
*/
|
|
8866
8873
|
_setState(state) {
|
|
8867
8874
|
this._state = {
|
|
@@ -8871,15 +8878,15 @@ class FormEditor {
|
|
|
8871
8878
|
this._emit('changed', this._getState());
|
|
8872
8879
|
}
|
|
8873
8880
|
|
|
8874
|
-
/**
|
|
8875
|
-
* @internal
|
|
8881
|
+
/**
|
|
8882
|
+
* @internal
|
|
8876
8883
|
*/
|
|
8877
8884
|
_getModules() {
|
|
8878
8885
|
return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule];
|
|
8879
8886
|
}
|
|
8880
8887
|
|
|
8881
|
-
/**
|
|
8882
|
-
* @internal
|
|
8888
|
+
/**
|
|
8889
|
+
* @internal
|
|
8883
8890
|
*/
|
|
8884
8891
|
_onEvent(type, priority, handler) {
|
|
8885
8892
|
this.get('eventBus').on(type, priority, handler);
|