!Sequential Workflow Designer for Svelte

Sequential Workflow Designer for Svelte

  

Svelte wrapper for the Sequential Workflow Designer component.

🚀 Installation

Install the following packages by NPM command:

npm i sequential-workflow-designer sequential-workflow-designer-svelte

Add CSS files to your global CSS file:

``css
@import 'sequential-workflow-designer/css/designer.css';
@import 'sequential-workflow-designer/css/designer-light.css';
@import 'sequential-workflow-designer/css/designer-dark.css';
`

🎬 Usage

Import the component:

`tsx
import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-svelte';
`

Load or create a new definition:

`ts
import type { Definition } from 'sequential-workflow-designer';

let definition: Definition = { ... };
`

If you want to read the validation status create a new variable:

`ts
let isValid: boolean | null = null;
`

To receive definition changes create a new function:

`ts
function onDefinitionChanged({ detail }: { detail: { definition: Definition, isValid: boolean } }) {
definition = detail.definition;
isValid = detail.isValid;
}
`

Define your configuration:

`ts
import type { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';

const steps: StepsConfiguration = { / ... / };
const toolbox: ToolboxConfiguration = { / ... / };
const validator: ValidatorConfiguration = { / ... / };
`

Now you can use the component:

`svelte
theme="light"
definition={definition}
on:definitionChanged={onDefinitionChanged}
steps={steps}
toolbox={toolbox}
validator={validator} />
`

Next you may need to create editors for your definition. You need to create a new component for the root editor and the step editor. Each editor has predefined props.

The root editor:

`svelte



`

The step editor:

`svelte



`

Import your components and set them to the designer:

`svelte


...
stepEditor={StepEditor}
rootEditor={RootEditor} />
``

That's it! Now you can use the designer in your Svelte application.

Check the demo project.

💡 License

This project is released under the MIT license.