0.14.7. (#52)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## O.14.7
+
+Added an `index` argument to the `itemComponentFactory` callback in the `dynamicListComponent` function.
+
 ## O.14.6
 
 Added comments to describe the `BranchedStepModelBuilder`, `SequentialStepModelBuilder` and `RootModelBuilder` classes.

README.md

@@ -22,6 +22,7 @@ Pro:
 
 * [📖 Pro Editors](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/editors.html)
 * [📫 Template System](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/template-system.html)
+* [🎱 Dynamic Variables](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/dynamic-variables.html)
 
 ## 🚀 Installation
 

demos/webpack-app/package.json

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.2.0",
 		"sequential-workflow-designer": "^0.21.2",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.14.6",
-		"sequential-workflow-editor": "^0.14.6"
+		"sequential-workflow-editor-model": "^0.14.7",
+		"sequential-workflow-editor": "^0.14.7"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.14.6",
+	"version": "0.14.7",
 	"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.14.6",
+		"sequential-workflow-editor-model": "^0.14.7",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.14.6",
+		"sequential-workflow-editor-model": "^0.14.7",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {

editor/src/components/dynamic-list-component.spec.ts

@@ -1,16 +1,18 @@
-import { SimpleEvent, ValueContext } from 'sequential-workflow-editor-model';
+import { I18n, SimpleEvent, ValueContext } from 'sequential-workflow-editor-model';
 import { Html } from '../core/html';
 import { dynamicListComponent } from './dynamic-list-component';
 
 interface TestItem {
 	id: number;
 }
 
-function testItemComponentFactory(item: TestItem) {
+function testItemComponentFactory(item: TestItem, _: I18n, index: number) {
+	const view = Html.element('span', {
+		class: `test-item-${item.id}`
+	});
+	view.setAttribute('data-index', String(index));
 	return {
-		view: Html.element('span', {
-			class: `test-item-${item.id}`
-		}),
+		view,
 		onItemChanged: new SimpleEvent<TestItem>(),
 		onDeleteClicked: new SimpleEvent<void>(),
 		validate: () => {
@@ -32,7 +34,9 @@ describe('DynamicListComponent', () => {
 
 		expect(children.length).toBe(3);
 		expect(children[0].className).toBe('test-item-123');
+		expect(children[0].getAttribute('data-index')).toBe('0');
 		expect(children[1].className).toBe('test-item-456');
+		expect(children[1].getAttribute('data-index')).toBe('1');
 		expect(children[2].className).toBe('swe-validation-error');
 	});
 
@@ -47,13 +51,16 @@ describe('DynamicListComponent', () => {
 
 		expect(children.length).toBe(2);
 		expect(children[0].className).toBe('test-item-135');
+		expect(children[0].getAttribute('data-index')).toBe('0');
 		expect(children[1].className).toBe('swe-validation-error');
 
 		component.add({ id: 246 });
 
 		expect(children.length).toBe(3);
 		expect(children[0].className).toBe('test-item-135');
+		expect(children[0].getAttribute('data-index')).toBe('0');
 		expect(children[1].className).toBe('test-item-246');
+		expect(children[1].getAttribute('data-index')).toBe('1');
 		expect(children[2].className).toBe('swe-validation-error');
 	});
 

editor/src/components/dynamic-list-component.ts

@@ -23,7 +23,7 @@ export interface DynamicListItemComponent<TItem> extends Component {
 
 export function dynamicListComponent<TItem, TItemComponent extends DynamicListItemComponent<TItem> = DynamicListItemComponent<TItem>>(
 	initialItems: TItem[],
-	itemComponentFactory: (item: TItem, i18n: I18n) => TItemComponent,
+	itemComponentFactory: (item: TItem, i18n: I18n, index: number) => TItemComponent,
 	context: ValueContext,
 	configuration?: DynamicListComponentConfiguration<TItem>
 ): DynamicListComponent<TItem, TItemComponent> {
@@ -74,7 +74,7 @@ export function dynamicListComponent<TItem, TItemComponent extends DynamicListIt
 
 		if (items.length > 0) {
 			items.forEach((item, index) => {
-				const component = itemComponentFactory(item, context.i18n);
+				const component = itemComponentFactory(item, context.i18n, index);
 				component.onItemChanged.subscribe(item => onItemChanged(item, index));
 				component.onDeleteClicked.subscribe(() => onItemDeleted(index));
 				view.insertBefore(component.view, validation.view);

model/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.14.6",
+	"version": "0.14.7",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",