0.11.3. (#29)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.11.3
+
+This version improves the behavior of the `Dynamic` value editor, when the sub editor contains a control visible in the property header.
+
 ## 0.11.2
 
 This version adds a generic type to the `ChoiceValueModel` interface.

demos/webpack-app/package.json

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.2.0",
 		"sequential-workflow-designer": "^0.17.0",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.11.2",
-		"sequential-workflow-editor": "^0.11.2"
+		"sequential-workflow-editor-model": "^0.11.3",
+		"sequential-workflow-editor": "^0.11.3"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

demos/webpack-app/src/editors/app.css

@@ -0,0 +1,7 @@
+.string-magic-editor input {
+	background: #e9e8ff;
+	border-color: #c0bef0;
+}
+.string-magic-editor input:focus {
+	border-color: #9794d9;
+}

demos/webpack-app/src/editors/app.ts

@@ -1,17 +1,24 @@
 import { Designer, Uid } from 'sequential-workflow-designer';
-import { EditorProvider } from 'sequential-workflow-editor';
+import { EditorProvider, StringValueEditorEditorExtension } from 'sequential-workflow-editor';
 import { definitionModel } from './model/definition-model';
 
 import 'sequential-workflow-designer/css/designer.css';
 import 'sequential-workflow-designer/css/designer-light.css';
 import 'sequential-workflow-editor/css/editor.css';
+import './app.css';
 
 export class App {
 	public static create(): App {
 		const placeholder = document.getElementById('designer') as HTMLElement;
 
 		const editorProvider = EditorProvider.create(definitionModel, {
-			uidGenerator: Uid.next
+			uidGenerator: Uid.next,
+			extensions: [
+				StringValueEditorEditorExtension.create({
+					editorId: 'string-magic',
+					class: 'string-magic-editor'
+				})
+			]
 		});
 
 		const designer = Designer.create(placeholder, editorProvider.activateDefinition(), {

demos/webpack-app/src/editors/model/dynamic-step-model.ts

@@ -3,7 +3,9 @@ import {
 	createBooleanValueModel,
 	createStepModel,
 	createDynamicValueModel,
-	createStringValueModel
+	createStringValueModel,
+	StringDictionary,
+	createStringDictionaryValueModel
 } from 'sequential-workflow-editor-model';
 import { Step } from 'sequential-workflow-model';
 
@@ -12,6 +14,7 @@ export interface DynamicStepModel extends Step {
 	componentType: 'task';
 	properties: {
 		example: Dynamic<string | boolean>;
+		twoHeaderControls: Dynamic<StringDictionary | string>;
 	};
 }
 
@@ -21,4 +24,10 @@ export const dynamicStepModel = createStepModel<DynamicStepModel>('dynamic', 'ta
 			models: [createStringValueModel({}), createBooleanValueModel({})]
 		})
 	);
+
+	step.property('twoHeaderControls').value(
+		createDynamicValueModel({
+			models: [createStringDictionaryValueModel({}), createStringValueModel({})]
+		})
+	);
 });

demos/webpack-app/src/editors/model/string-step-model.ts

@@ -20,11 +20,14 @@ export const stringStepModel = createStepModel<StringStepModel>('string', 'task'
 			defaultValue: 'Some default value'
 		})
 	);
-	step.property('minLength3').value(
-		createStringValueModel({
-			minLength: 3
-		})
-	);
+	step.property('minLength3')
+		.value(
+			createStringValueModel({
+				minLength: 3,
+				editorId: 'string-magic'
+			})
+		)
+		.hint('This editor has a different color than the others, because it uses the string editor with custom CSS class.');
 	step.property('patternYear').value(
 		createStringValueModel({
 			pattern: /^\d{4}$/

editor/css/editor.css

@@ -116,7 +116,7 @@
 	border-style: dashed;
 }
 .swe-select-small {
-	padding: 3px 5px;
+	padding: 4px 5px;
 }
 .swe-prepended-input {
 	width: 100%;
@@ -198,3 +198,9 @@
 	margin-bottom: 10px;
 	color: #777;
 }
+
+/* dynamic */
+
+.swe-dynamic-sub-control {
+	margin-left: 6px;
+}

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.11.2",
+	"version": "0.11.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -46,11 +46,11 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.11.2",
+		"sequential-workflow-editor-model": "^0.11.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.11.2",
+		"sequential-workflow-editor-model": "^0.11.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {

editor/src/components/row-component.spec.ts

@@ -25,4 +25,12 @@ describe('RowComponent', () => {
 		expect(row.view.children[1].className).toBe('swe-col swe-col-2');
 		expect(row.view.children[2].className).toBe('swe-col');
 	});
+
+	it('adds custom class', () => {
+		const row = rowComponent([], {
+			class: 'custom-class'
+		});
+
+		expect(row.view.className).toBe('swe-row custom-class');
+	});
 });

editor/src/components/row-component.ts

@@ -3,11 +3,17 @@ import { Component } from './component';
 
 export interface RowComponentConfiguration {
 	cols?: (number | null)[];
+	class?: string;
 }
 
 export function rowComponent(elements: HTMLElement[], configuration?: RowComponentConfiguration): Component {
+	let viewClass = 'swe-row';
+	if (configuration && configuration.class) {
+		viewClass += ' ' + configuration.class;
+	}
+
 	const view = Html.element('div', {
-		class: 'swe-row'
+		class: viewClass
 	});
 	elements.forEach((element, index) => {
 		const grow = configuration && configuration.cols ? configuration.cols[index] : 1;