.github/workflows/deploy-examples.yml

@@ -33,9 +33,9 @@ jobs:
       - name: Build
         run: yarn build
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: demos
       - name: Deploy
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

CHANGELOG.md

@@ -1,3 +1,104 @@
+## O.14.8
+
+This PR adds support for the internationalization of options in the choice value model [#53](https://github.com/nocode-js/sequential-workflow-editor/issues/53).
+
+## 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.
+
+## O.14.5
+
+Added comments to describe the `EditorProvider` class.
+
+## 0.14.4
+
+This version exposes the `ToolboxGroup` interface in the `sequential-workflow-editor` package [#46](https://github.com/nocode-js/sequential-workflow-editor/issues/46#issuecomment-2439817733).
+
+## 0.14.3
+
+This version provides the ability to sort the steps in the toolbox in a custom way. By default, the steps are sorted alphabetically.
+
+```ts
+EditorProvider.create(definitionModel, {
+  // ...
+  toolboxSorter(groups: ToolboxGroup[]) {
+    // ...
+  }
+});
+```
+
+You can also hide certain steps from the toolbox by using the hidden method in the step builder.
+
+```ts
+createStepModel<MyStep>('myStep', 'task', step => {
+  step.toolbox(false);
+});
+```
+
+## 0.14.2
+
+This version adds the `formatPropertyValue` method to the `PropertyValidatorContext` class.
+
+## 0.14.1
+
+This version adds the `formatPropertyValue` method to: `PropertyContext`, `DefaultValueContext`, `ScopedPropertyContext` and `ValueContext` classes.
+
+## 0.14.0
+
+From now, the nullable any variable editor and the nullable variable editor display the expected variable types to select. This version also allows changes to the labels in the dropdown menu of the dynamic value editor.
+
+## 0.13.2
+
+This version adds missing translations for the `variableDefinitions` value editor.
+
+## 0.13.1
+
+This version adds missing translations for the `variableNameValidator` function [#37](https://github.com/nocode-js/sequential-workflow-editor/issues/37).
+
+## 0.13.0
+
+This version introduces several internal changes that allowed for the creation of a new type of editor in the pro version: the hidden dependent value editor.
+
+## 0.12.1
+
+This version normalizes translations.
+
+## 0.12.0
+
+This version introduces the localization feature. Now you can localize the editor to any language you want.
+
+## 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.
+
+## 0.11.1
+
+This version improves support for UMD bundles.
+
+## 0.11.0
+
+This version normalizes names of functions in `ValueContext` and `PropertyValidatorContext` classes.
+
+The `CustomValidatorContext` class is deleted now, please use the `PropertyValidatorContext` class instead.
+
+The `PropertyModelBuilder` class has deleted the `customValidator` function, please use the `validator` function instead.
+
+## 0.10.0
+
+This version deletes all deprecated `*ValueModel` functions. From now, use only `create*ValueModel` functions.
+
+## 0.9.3
+
+Added `hasVariable` and `hasVariables` methods to the `PropertyValidatorContext` class.
+
 ## 0.9.2
 
 This version fixes a bug in the `ValueEditorFactoryResolver` class. Now, when an editor is not found, the resolver throws an error.

README.md

@@ -8,11 +8,21 @@ Powerful workflow editor builder for sequential workflows. Written in TypeScript
 
 📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-editor) for more details.
 
+🤩 Don't miss [the pro version](https://nocode-js.com/sequential-workflow-editor-pro/pricing).
+
 ## 👀 Examples
 
 * [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)
 * [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)
 * [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)
+* [🚩 Internationalization](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/i18n.html)
+* [🚢  Vanilla JS](https://nocode-js.github.io/sequential-workflow-editor/vanilla-js-app/vanilla-js.html)
+
+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
 
@@ -109,7 +119,7 @@ import { Designer } from 'sequential-workflow-designer';
 
 const designer = Designer.create(placeholder, startDefinition, {
   editors: {
-    globalEditorProvider: editorProvider.createRootEditorProvider(),
+    rootEditorProvider: editorProvider.createRootEditorProvider(),
     stepEditorProvider: editorProvider.createStepEditorProvider()
   },
   validator: {

demos/vanilla-js-app/assets/lib.js

@@ -0,0 +1,21 @@
+/* global location, document */
+
+function isTestEnv() {
+	const hostname = location.hostname.toLowerCase();
+	return hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.');
+}
+
+function embedScript(url) {
+	document.write(`<script src="${url}"></script>`);
+}
+
+function embedStylesheet(url) {
+	document.write(`<link href="${url}" rel="stylesheet">`);
+}
+
+const modelBaseUrl = isTestEnv() ? '../../model' : '//cdn.jsdelivr.net/npm/sequential-workflow-editor-model@0.11.3';
+const editorBaseUrl = isTestEnv() ? '../../editor' : '//cdn.jsdelivr.net/npm/sequential-workflow-editor@0.11.3';
+
+embedScript(`${modelBaseUrl}/dist/index.umd.js`);
+embedScript(`${editorBaseUrl}/dist/index.umd.js`);
+embedStylesheet(`${editorBaseUrl}/css/editor.css`);

demos/vanilla-js-app/assets/vanilla-js.js

@@ -0,0 +1,71 @@
+/* global window, document, sequentialWorkflowEditorModel, sequentialWorkflowEditor, sequentialWorkflowDesigner */
+
+const nextId = sequentialWorkflowDesigner.Uid.next;
+
+const rootModel = sequentialWorkflowEditorModel.createRootModel(model => {
+	model.property('host').value(sequentialWorkflowEditorModel.createStringValueModel({}));
+});
+
+const sendEmailModel = sequentialWorkflowEditorModel.createStepModel('sendEmail', 'task', step => {
+	step.property('to').value(sequentialWorkflowEditorModel.createStringValueModel({}));
+	step.property('ssl').value(sequentialWorkflowEditorModel.createBooleanValueModel({}));
+});
+
+const sqlQueryModel = sequentialWorkflowEditorModel.createStepModel('sqlQuery', 'task', step => {
+	step.property('query').value(
+		sequentialWorkflowEditorModel.createStringValueModel({
+			defaultValue: 'SELECT * FROM table'
+		})
+	);
+});
+
+const definitionModel = sequentialWorkflowEditorModel.createDefinitionModel(model => {
+	model.valueTypes(['string']);
+	model.root(rootModel);
+	model.steps([sendEmailModel, sqlQueryModel]);
+});
+
+const editorProvider = sequentialWorkflowEditor.EditorProvider.create(definitionModel, {
+	uidGenerator: nextId
+});
+
+const startDefinition = {
+	properties: {
+		host: '127.0.0.1'
+	},
+	sequence: [
+		{
+			id: nextId(),
+			name: 'Send Email',
+			type: 'sendEmail',
+			componentType: 'task',
+			properties: {
+				to: 'test@example.com',
+				ssl: false
+			}
+		}
+	]
+};
+
+function load() {
+	const placeholder = document.getElementById('placeholder');
+
+	sequentialWorkflowDesigner.Designer.create(placeholder, startDefinition, {
+		toolbox: {
+			groups: editorProvider.getToolboxGroups(),
+			labelProvider: editorProvider.createStepLabelProvider()
+		},
+		controlBar: true,
+		steps: {},
+		editors: {
+			rootEditorProvider: editorProvider.createRootEditorProvider(),
+			stepEditorProvider: editorProvider.createStepEditorProvider()
+		},
+		validator: {
+			step: editorProvider.createStepValidator(),
+			root: editorProvider.createRootValidator()
+		}
+	});
+}
+
+window.addEventListener('load', load, false);

demos/vanilla-js-app/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "vanilla-js-app-demo",
+	"author": "b4rtaz",
+	"license": "MIT",
+	"private": true,
+	"version": "1.0.0",
+	"scripts": {
+		"build": "echo Skipped",
+		"eslint": "echo Skipped",
+		"test:single": "echo Skipped",
+		"prettier": "prettier --check ./*.html ./assets/*.js",
+		"prettier:fix": "prettier --write ./*.html ./assets/*.js"
+	},
+	"devDependencies": {
+		"prettier": "^2.8.7"
+	}
+}

demos/vanilla-js-app/vanilla-js.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>🚢 Vanilla JS - Sequential Workflow Editor</title>
+		<link rel="icon" href="./assets/favicon.ico" />
+		<style>
+			body {
+				font: 14px/1.5 Arial, Tahoma, Serif;
+			}
+			a {
+				color: navy;
+				text-decoration: underline;
+			}
+			a:hover {
+				text-decoration: none;
+			}
+			#placeholder {
+				display: block;
+				border: 1px solid #ccc;
+				padding: 10px;
+				height: 50vh;
+			}
+		</style>
+
+		<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.2/css/designer.css" rel="stylesheet" />
+		<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.2/css/designer-light.css" rel="stylesheet" />
+		<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.2/dist/index.umd.js"></script>
+
+		<script src="./assets/lib.js"></script>
+		<script src="./assets/vanilla-js.js"></script>
+	</head>
+	<body>
+		<h1>🚢 Vanilla JS - Sequential Workflow Editor</h1>
+
+		<p>
+			This demo shows basic usage of
+			<a href="https://github.com/nocode-js/sequential-workflow-editor" target="_blank">Sequential Workflow Editor</a>
+			with <a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">Sequential Workflow Designer</a>
+			in a vanilla JavaScript application.
+		</p>
+
+		<div id="placeholder"></div>
+	</body>
+</html>

demos/webpack-app/package.json

@@ -16,16 +16,16 @@
 	"dependencies": {
 		"xstate": "^4.38.2",
 		"sequential-workflow-model": "^0.2.0",
-		"sequential-workflow-designer": "^0.16.0",
+		"sequential-workflow-designer": "^0.21.2",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.9.2",
-		"sequential-workflow-editor": "^0.9.2"
+		"sequential-workflow-editor-model": "^0.14.8",
+		"sequential-workflow-editor": "^0.14.8"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",
 		"style-loader": "^3.3.1",
 		"css-loader": "^6.7.3",
-		"typescript": "^4.9.4",
+		"typescript": "^4.9.5",
 		"webpack": "^5.75.0",
 		"webpack-cli": "^5.0.1",
 		"prettier": "^2.8.7",

demos/webpack-app/public/assets/editors.css

@@ -12,7 +12,7 @@ input,
 textarea {
 	font: 14px/1.3em Arial, Verdana, sans-serif;
 }
-.sqd-global-editor {
+.sqd-root-editor {
 	padding: 10px;
 	line-height: 1.3em;
 	box-sizing: border-box;

demos/webpack-app/public/assets/i18n.css

@@ -0,0 +1,59 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+body {
+	display: flex;
+	flex-direction: column;
+}
+body,
+input,
+h1,
+textarea {
+	font: 14px/1.3em Arial, Verdana, sans-serif;
+}
+.header {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	background: #203fd2;
+	color: #fff;
+}
+.header h1 {
+	margin: 0;
+	padding: 0;
+}
+.header a {
+	color: #fff;
+}
+.header .column {
+	padding: 10px;
+}
+.header .column.flex-1 {
+	flex: 1;
+}
+.header .text-center {
+	text-align: center;
+}
+.header .column.text-end {
+	text-align: right;
+}
+@media only screen and (max-width: 700px) {
+	.header .column.hidden-mobile {
+		display: none;
+	}
+}
+a {
+	color: #000;
+	text-decoration: underline;
+}
+a:hover {
+	text-decoration: none;
+}
+#designer {
+	flex: 1;
+}