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