sequential-workflow-designer-svelte 0.16.6
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 +9 -0
- package/README.md +140 -0
- package/dist/SequentialWorkflowDesigner.svelte +125 -0
- package/dist/SequentialWorkflowDesigner.svelte.d.ts +37 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -0
- package/package.json +51 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 N4NO.com
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
# Sequential Workflow Designer for Svelte
|
|
4
|
+
|
|
5
|
+
[](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [](/LICENSE) [](https://npmjs.org/package/sequential-workflow-designer-svelte)
|
|
6
|
+
|
|
7
|
+
Svelte wrapper for the [Sequential Workflow Designer](https://github.com/nocode-js/sequential-workflow-designer) component.
|
|
8
|
+
|
|
9
|
+
## 🚀 Installation
|
|
10
|
+
|
|
11
|
+
Install the following packages by [NPM](https://www.npmjs.com/) command:
|
|
12
|
+
|
|
13
|
+
`npm i sequential-workflow-designer sequential-workflow-designer-svelte`
|
|
14
|
+
|
|
15
|
+
Add CSS files to your global CSS file:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import 'sequential-workflow-designer/css/designer.css';
|
|
19
|
+
@import 'sequential-workflow-designer/css/designer-light.css';
|
|
20
|
+
@import 'sequential-workflow-designer/css/designer-dark.css';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## 🎬 Usage
|
|
24
|
+
|
|
25
|
+
Import the component:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-svelte';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Load or create a new definition:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import type { Definition } from 'sequential-workflow-designer';
|
|
35
|
+
|
|
36
|
+
let definition: Definition = { ... };
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
If you want to read the validation status create a new variable:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
let isValid: boolean | null = null;
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
To receive definition changes create a new function:
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
function onDefinitionChanged({ detail }: { detail: { definition: Definition, isValid: boolean } }) {
|
|
49
|
+
definition = detail.definition;
|
|
50
|
+
isValid = detail.isValid;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Define your configuration:
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import type { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
|
|
58
|
+
|
|
59
|
+
const steps: StepsConfiguration = { /* ... */ };
|
|
60
|
+
const toolbox: ToolboxConfiguration = { /* ... */ };
|
|
61
|
+
const validator: ValidatorConfiguration = { /* ... */ };
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Now you can use the component:
|
|
65
|
+
|
|
66
|
+
```svelte
|
|
67
|
+
<SequentialWorkflowDesigner
|
|
68
|
+
theme="light"
|
|
69
|
+
definition={definition}
|
|
70
|
+
on:definitionChanged={onDefinitionChanged}
|
|
71
|
+
steps={steps}
|
|
72
|
+
toolbox={toolbox}
|
|
73
|
+
validator={validator} />
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
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.
|
|
77
|
+
|
|
78
|
+
The global editor:
|
|
79
|
+
|
|
80
|
+
```svelte
|
|
81
|
+
<script lang="ts">
|
|
82
|
+
import type { GlobalEditorContext, Definition } from 'sequential-workflow-designer';
|
|
83
|
+
|
|
84
|
+
export let context: GlobalEditorContext;
|
|
85
|
+
export let definition: Definition;
|
|
86
|
+
let velocity = definition.properties.velocity;
|
|
87
|
+
|
|
88
|
+
function onVelocityChanged(event: Event) {
|
|
89
|
+
velocity = parseInt((event.target as HTMLInputElement).value);
|
|
90
|
+
definition.properties.velocity = velocity;
|
|
91
|
+
context.notifyPropertiesChanged();
|
|
92
|
+
}
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<input type="number" value={String(velocity)} on:input={onVelocityChanged} />
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
The step editor:
|
|
99
|
+
|
|
100
|
+
```svelte
|
|
101
|
+
<script lang="ts">
|
|
102
|
+
import type { StepEditorContext, Definition, Step } from 'sequential-workflow-designer';
|
|
103
|
+
|
|
104
|
+
export let context: StepEditorContext;
|
|
105
|
+
export let definition: Definition;
|
|
106
|
+
export let step: Step;
|
|
107
|
+
|
|
108
|
+
let name = step.name;
|
|
109
|
+
|
|
110
|
+
function onNameChanged(event: Event) {
|
|
111
|
+
name = (event.target as HTMLInputElement).value;
|
|
112
|
+
step.name = name;
|
|
113
|
+
context.notifyNameChanged();
|
|
114
|
+
}
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<input value={name} on:input={onNameChanged} />
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Import your components and set them to the designer:
|
|
121
|
+
|
|
122
|
+
```svelte
|
|
123
|
+
<script lang="ts">
|
|
124
|
+
import StepEditor from './step-editor.svelte';
|
|
125
|
+
import RootEditor from './root-editor.svelte';
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<SequentialWorkflowDesigner
|
|
129
|
+
...
|
|
130
|
+
stepEditor={StepEditor}
|
|
131
|
+
rootEditor={RootEditor} />
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
That's it! Now you can use the designer in your Svelte application.
|
|
135
|
+
|
|
136
|
+
Check the [demo project](https://github.com/nocode-js/sequential-workflow-designer/tree/main/demos/svelte-app).
|
|
137
|
+
|
|
138
|
+
## 💡 License
|
|
139
|
+
|
|
140
|
+
This project is released under the MIT license.
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
|
|
2
|
+
import {
|
|
3
|
+
Designer,
|
|
4
|
+
DefinitionWalker
|
|
5
|
+
} from "sequential-workflow-designer";
|
|
6
|
+
const dispatch = createEventDispatcher();
|
|
7
|
+
export let definition;
|
|
8
|
+
export let steps;
|
|
9
|
+
export let toolbox = false;
|
|
10
|
+
export let isToolboxCollapsed = false;
|
|
11
|
+
export let controlBar = true;
|
|
12
|
+
export let theme = "light";
|
|
13
|
+
export let contextMenu = true;
|
|
14
|
+
export let undoStackSize = void 0;
|
|
15
|
+
export let undoStack = void 0;
|
|
16
|
+
export let validator = void 0;
|
|
17
|
+
export let uidGenerator = void 0;
|
|
18
|
+
export let definitionWalker = void 0;
|
|
19
|
+
export let extensions = void 0;
|
|
20
|
+
export let stepEditor = null;
|
|
21
|
+
export let rootEditor = null;
|
|
22
|
+
export let isEditorCollapsed = false;
|
|
23
|
+
export let isReadonly = false;
|
|
24
|
+
export let selectedStepId = null;
|
|
25
|
+
let isFirstChange = true;
|
|
26
|
+
let designer = null;
|
|
27
|
+
let placeholder;
|
|
28
|
+
function init() {
|
|
29
|
+
const editors = stepEditor && rootEditor ? {
|
|
30
|
+
isCollapsed: isEditorCollapsed,
|
|
31
|
+
stepEditorProvider: (step, context, def) => {
|
|
32
|
+
if (!stepEditor) {
|
|
33
|
+
throw new Error("No step editor provided");
|
|
34
|
+
}
|
|
35
|
+
const root = document.createElement("div");
|
|
36
|
+
new stepEditor({
|
|
37
|
+
target: root,
|
|
38
|
+
props: { step, context, definition: def }
|
|
39
|
+
});
|
|
40
|
+
return root;
|
|
41
|
+
},
|
|
42
|
+
globalEditorProvider: (def, context) => {
|
|
43
|
+
if (!rootEditor) {
|
|
44
|
+
throw new Error("No root editor provided");
|
|
45
|
+
}
|
|
46
|
+
const root = document.createElement("div");
|
|
47
|
+
new rootEditor({
|
|
48
|
+
target: root,
|
|
49
|
+
props: { definition: def, context }
|
|
50
|
+
});
|
|
51
|
+
return root;
|
|
52
|
+
}
|
|
53
|
+
} : false;
|
|
54
|
+
const _toolbox = toolbox ? {
|
|
55
|
+
...toolbox,
|
|
56
|
+
isCollapsed: isToolboxCollapsed
|
|
57
|
+
} : false;
|
|
58
|
+
const d = Designer.create(placeholder, definition, {
|
|
59
|
+
steps,
|
|
60
|
+
controlBar,
|
|
61
|
+
toolbox: _toolbox,
|
|
62
|
+
editors,
|
|
63
|
+
theme,
|
|
64
|
+
contextMenu,
|
|
65
|
+
undoStackSize,
|
|
66
|
+
undoStack,
|
|
67
|
+
validator,
|
|
68
|
+
uidGenerator,
|
|
69
|
+
definitionWalker,
|
|
70
|
+
extensions,
|
|
71
|
+
isReadonly
|
|
72
|
+
});
|
|
73
|
+
d.onReady.subscribe(() => dispatch("definitionChanged", {
|
|
74
|
+
definition: d.getDefinition(),
|
|
75
|
+
isValid: d.isValid()
|
|
76
|
+
}));
|
|
77
|
+
d.onDefinitionChanged.subscribe((definition2) => dispatch("definitionChanged", {
|
|
78
|
+
definition: definition2,
|
|
79
|
+
isValid: d.isValid()
|
|
80
|
+
}));
|
|
81
|
+
d.onSelectedStepIdChanged.subscribe((stepId) => dispatch("selectedStepIdChanged", { stepId }));
|
|
82
|
+
if (selectedStepId) {
|
|
83
|
+
d.selectStepById(selectedStepId);
|
|
84
|
+
}
|
|
85
|
+
return d;
|
|
86
|
+
}
|
|
87
|
+
onMount(() => {
|
|
88
|
+
designer = init();
|
|
89
|
+
});
|
|
90
|
+
$: {
|
|
91
|
+
if (designer) {
|
|
92
|
+
const isDefinitionChanged = !isFirstChange && definition !== designer.getDefinition();
|
|
93
|
+
if (isDefinitionChanged) {
|
|
94
|
+
designer.destroy();
|
|
95
|
+
designer = init();
|
|
96
|
+
} else {
|
|
97
|
+
isFirstChange = false;
|
|
98
|
+
if (isReadonly !== designer.isReadonly()) {
|
|
99
|
+
designer.setIsReadonly(isReadonly);
|
|
100
|
+
}
|
|
101
|
+
if (selectedStepId !== designer.getSelectedStepId()) {
|
|
102
|
+
if (selectedStepId) {
|
|
103
|
+
designer.selectStepById(selectedStepId);
|
|
104
|
+
} else {
|
|
105
|
+
designer.clearSelectedStep();
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
if (isEditorCollapsed !== designer.isEditorCollapsed()) {
|
|
109
|
+
designer.setIsEditorCollapsed(isEditorCollapsed);
|
|
110
|
+
}
|
|
111
|
+
if (isToolboxCollapsed !== designer.isToolboxCollapsed()) {
|
|
112
|
+
designer.setIsToolboxCollapsed(isToolboxCollapsed);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
onDestroy(() => {
|
|
118
|
+
if (designer) {
|
|
119
|
+
designer.destroy();
|
|
120
|
+
designer = null;
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<div bind:this={placeholder} class="sqd-designer-svelte"></div>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { DefinitionWalker, type Definition, type StepsConfiguration, type ToolboxConfiguration, type UndoStack, type ValidatorConfiguration, type UidGenerator, type DesignerExtension } from 'sequential-workflow-designer';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
definition: Definition;
|
|
6
|
+
steps: StepsConfiguration;
|
|
7
|
+
toolbox?: false | Omit<ToolboxConfiguration, "isCollapsed"> | undefined;
|
|
8
|
+
isToolboxCollapsed?: boolean | undefined;
|
|
9
|
+
controlBar?: boolean | undefined;
|
|
10
|
+
theme?: string | undefined;
|
|
11
|
+
contextMenu?: boolean | undefined;
|
|
12
|
+
undoStackSize?: number | undefined;
|
|
13
|
+
undoStack?: UndoStack | undefined;
|
|
14
|
+
validator?: ValidatorConfiguration | undefined;
|
|
15
|
+
uidGenerator?: UidGenerator | undefined;
|
|
16
|
+
definitionWalker?: DefinitionWalker | undefined;
|
|
17
|
+
extensions?: DesignerExtension[] | undefined;
|
|
18
|
+
stepEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
|
|
19
|
+
rootEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
|
|
20
|
+
isEditorCollapsed?: boolean | undefined;
|
|
21
|
+
isReadonly?: boolean | undefined;
|
|
22
|
+
selectedStepId?: string | null | undefined;
|
|
23
|
+
};
|
|
24
|
+
events: {
|
|
25
|
+
definitionChanged: CustomEvent<any>;
|
|
26
|
+
selectedStepIdChanged: CustomEvent<any>;
|
|
27
|
+
} & {
|
|
28
|
+
[evt: string]: CustomEvent<any>;
|
|
29
|
+
};
|
|
30
|
+
slots: {};
|
|
31
|
+
};
|
|
32
|
+
export type SequentialWorkflowDesignerProps = typeof __propDef.props;
|
|
33
|
+
export type SequentialWorkflowDesignerEvents = typeof __propDef.events;
|
|
34
|
+
export type SequentialWorkflowDesignerSlots = typeof __propDef.slots;
|
|
35
|
+
export default class SequentialWorkflowDesigner extends SvelteComponent<SequentialWorkflowDesignerProps, SequentialWorkflowDesignerEvents, SequentialWorkflowDesignerSlots> {
|
|
36
|
+
}
|
|
37
|
+
export {};
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sequential-workflow-designer-svelte",
|
|
3
|
+
"description": "Svelte wrapper for Sequential Workflow Designer component.",
|
|
4
|
+
"version": "0.16.6",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"prepare": "cp ../LICENSE LICENSE",
|
|
8
|
+
"start": "vite dev",
|
|
9
|
+
"build": "svelte-kit sync && vite build && svelte-package",
|
|
10
|
+
"preview": "vite preview",
|
|
11
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
12
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
13
|
+
"test:single": "echo \"No tests yet\"",
|
|
14
|
+
"prettier": "prettier --check ./src",
|
|
15
|
+
"prettier:fix": "prettier --write ./src",
|
|
16
|
+
"eslint": "eslint ./src --ext .ts"
|
|
17
|
+
},
|
|
18
|
+
"exports": {
|
|
19
|
+
".": {
|
|
20
|
+
"types": "./dist/index.d.ts",
|
|
21
|
+
"svelte": "./dist/index.js"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"!dist/**/*.test.*",
|
|
27
|
+
"!dist/**/*.spec.*"
|
|
28
|
+
],
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"svelte": "^4.0.0",
|
|
31
|
+
"sequential-workflow-designer": "^0.16.6"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"sequential-workflow-designer": "^0.16.6",
|
|
35
|
+
"@sveltejs/adapter-static": "^2.0.3",
|
|
36
|
+
"@sveltejs/kit": "^1.20.4",
|
|
37
|
+
"@sveltejs/package": "^2.0.0",
|
|
38
|
+
"svelte": "^4.0.5",
|
|
39
|
+
"svelte-check": "^3.4.3",
|
|
40
|
+
"tslib": "^2.4.1",
|
|
41
|
+
"typescript": "^5.0.0",
|
|
42
|
+
"vite": "^4.4.2",
|
|
43
|
+
"prettier": "^2.8.2",
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
|
45
|
+
"@typescript-eslint/parser": "^5.47.0",
|
|
46
|
+
"eslint": "^8.30.0"
|
|
47
|
+
},
|
|
48
|
+
"svelte": "./dist/index.js",
|
|
49
|
+
"types": "./dist/index.d.ts",
|
|
50
|
+
"type": "module"
|
|
51
|
+
}
|