sequential-workflow-designer 0.15.2 → 0.15.4

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.
Files changed (7) hide show
  1. package/README.md +7 -4
  2. package/css/designer-dark.css +9 -0
  3. package/css/designer-light.css +9 -0
  4. package/css/designer.css +0 -12
  5. package/package.json +1 -1
  6. package/sass/designer-theme.scss +23 -4
  7. package/sass/designer.scss +0 -11
package/README.md CHANGED
@@ -4,6 +4,9 @@
4
4
 
5
5
  [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
6
6
 
7
+ > 🚨 **Have you noticed the "package not found" error?** 🚨<br />
8
+ > Check [this comment](https://github.com/nocode-js/sequential-workflow-designer/issues/82#issuecomment-1712958636) for instructions on how to resolve the problem.
9
+
7
10
  Sequential workflow designer with 0 external dependencies for web applications. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
8
11
 
9
12
  Features:
@@ -95,10 +98,10 @@ Add the below code to your head section in HTML document.
95
98
  ```html
96
99
  <head>
97
100
  ...
98
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.2/css/designer.css" rel="stylesheet">
99
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.2/css/designer-light.css" rel="stylesheet">
100
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.2/css/designer-dark.css" rel="stylesheet">
101
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.2/dist/index.umd.js"></script>
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/css/designer.css" rel="stylesheet">
102
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/css/designer-light.css" rel="stylesheet">
103
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/css/designer-dark.css" rel="stylesheet">
104
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/dist/index.umd.js"></script>
102
105
  ```
103
106
 
104
107
  Call the designer by:
package/css/designer-dark.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-dark .sqd-toolbox {
3
3
  background: #3f3f3f;
4
4
  box-shadow: none;
5
+ border-radius: 10px;
5
6
  }
6
7
  .sqd-theme-dark .sqd-toolbox-header-title {
7
8
  color: #fff;
@@ -10,6 +11,7 @@
10
11
  background: #242424;
11
12
  color: #fff;
12
13
  border: none;
14
+ border-radius: 10px;
13
15
  }
14
16
  .sqd-theme-dark .sqd-toolbox-filter:focus {
15
17
  border-color: #939393;
@@ -17,6 +19,7 @@
17
19
  .sqd-theme-dark .sqd-toolbox-group-title {
18
20
  color: #fff;
19
21
  background: #242424;
22
+ border-radius: 10px;
20
23
  }
21
24
 
22
25
  .sqd-theme-dark .sqd-toolbox-item {
@@ -24,6 +27,7 @@
24
27
  border: none;
25
28
  box-shadow: none;
26
29
  background: #c6c6c6;
30
+ border-radius: 5px;
27
31
  }
28
32
  .sqd-theme-dark .sqd-toolbox-item:hover {
29
33
  border-color: none;
@@ -31,15 +35,18 @@
31
35
  }
32
36
  .sqd-theme-dark .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
37
  background: #c6c6c6;
38
+ border-radius: 4px;
34
39
  }
35
40
 
36
41
  .sqd-theme-dark .sqd-control-bar {
37
42
  background: #3f3f3f;
38
43
  box-shadow: none;
44
+ border-radius: 10px;
39
45
  }
40
46
  .sqd-theme-dark .sqd-control-bar-button {
41
47
  border: none;
42
48
  background: #c6c6c6;
49
+ border-radius: 5px;
43
50
  }
44
51
  .sqd-theme-dark .sqd-control-bar-button:hover {
45
52
  border-color: #939393;
@@ -64,6 +71,7 @@
64
71
  .sqd-theme-dark.sqd-context-menu {
65
72
  background: #3f3f3f;
66
73
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
74
+ border-radius: 4px;
67
75
  }
68
76
 
69
77
  .sqd-theme-dark .sqd-context-menu-group {
@@ -72,6 +80,7 @@
72
80
 
73
81
  .sqd-theme-dark .sqd-context-menu-item {
74
82
  color: #fff;
83
+ border-radius: 4px;
75
84
  }
76
85
 
77
86
  .sqd-theme-dark .sqd-context-menu-item:hover {
package/css/designer-light.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-light .sqd-toolbox {
3
3
  background: #fff;
4
4
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
5
+ border-radius: 10px;
5
6
  }
6
7
  .sqd-theme-light .sqd-toolbox-header-title {
7
8
  color: #000;
@@ -10,6 +11,7 @@
10
11
  background: #fff;
11
12
  color: #000;
12
13
  border: 1px solid #c3c3c3;
14
+ border-radius: 10px;
13
15
  }
14
16
  .sqd-theme-light .sqd-toolbox-filter:focus {
15
17
  border-color: #939393;
@@ -17,6 +19,7 @@
17
19
  .sqd-theme-light .sqd-toolbox-group-title {
18
20
  color: #000;
19
21
  background: #e5e5e5;
22
+ border-radius: 10px;
20
23
  }
21
24
 
22
25
  .sqd-theme-light .sqd-toolbox-item {
@@ -24,6 +27,7 @@
24
27
  border: 1px solid #c3c3c3;
25
28
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
26
29
  background: #fff;
30
+ border-radius: 5px;
27
31
  }
28
32
  .sqd-theme-light .sqd-toolbox-item:hover {
29
33
  border-color: #939393;
@@ -31,15 +35,18 @@
31
35
  }
32
36
  .sqd-theme-light .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
37
  background: #c6c6c6;
38
+ border-radius: 4px;
34
39
  }
35
40
 
36
41
  .sqd-theme-light .sqd-control-bar {
37
42
  background: #fff;
38
43
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
44
+ border-radius: 10px;
39
45
  }
40
46
  .sqd-theme-light .sqd-control-bar-button {
41
47
  border: 1px solid #c3c3c3;
42
48
  background: #fff;
49
+ border-radius: 5px;
43
50
  }
44
51
  .sqd-theme-light .sqd-control-bar-button:hover {
45
52
  border-color: #939393;
@@ -64,6 +71,7 @@
64
71
  .sqd-theme-light.sqd-context-menu {
65
72
  background: #fff;
66
73
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
74
+ border-radius: 4px;
67
75
  }
68
76
 
69
77
  .sqd-theme-light .sqd-context-menu-group {
@@ -72,6 +80,7 @@
72
80
 
73
81
  .sqd-theme-light .sqd-context-menu-item {
74
82
  color: #000;
83
+ border-radius: 4px;
75
84
  }
76
85
 
77
86
  .sqd-theme-light .sqd-context-menu-item:hover {
package/css/designer.css CHANGED
@@ -34,7 +34,6 @@
34
34
  left: 10px;
35
35
  z-index: 20;
36
36
  box-sizing: border-box;
37
- border-radius: 10px;
38
37
  width: 130px;
39
38
  user-select: none;
40
39
  }
@@ -84,19 +83,16 @@
84
83
  width: 110px;
85
84
  margin: 0 10px 10px;
86
85
  box-sizing: border-box;
87
- border-radius: 10px;
88
86
  }
89
87
 
90
88
  .sqd-toolbox-group-title {
91
89
  text-align: center;
92
90
  padding: 5px 0;
93
91
  margin: 0 10px 10px;
94
- border-radius: 10px;
95
92
  }
96
93
 
97
94
  .sqd-toolbox-item {
98
95
  position: relative;
99
- border-radius: 5px;
100
96
  box-sizing: border-box;
101
97
  margin: 0 10px 10px;
102
98
  width: 110px;
@@ -112,10 +108,6 @@
112
108
  height: 20px;
113
109
  }
114
110
 
115
- .sqd-toolbox-item-icon.sqd-no-icon {
116
- border-radius: 4px;
117
- }
118
-
119
111
  .sqd-toolbox-item-icon-image {
120
112
  width: 100%;
121
113
  height: 100%;
@@ -143,7 +135,6 @@
143
135
  left: 10px;
144
136
  z-index: 20;
145
137
  padding: 8px 0 8px 8px;
146
- border-radius: 10px;
147
138
  white-space: nowrap;
148
139
  }
149
140
 
@@ -151,7 +142,6 @@
151
142
  display: inline-block;
152
143
  width: 32px;
153
144
  height: 32px;
154
- border-radius: 5px;
155
145
  margin-right: 8px;
156
146
  cursor: pointer;
157
147
  box-sizing: border-box;
@@ -229,7 +219,6 @@
229
219
  .sqd-context-menu {
230
220
  position: absolute;
231
221
  z-index: 2000000000;
232
- border-radius: 4px;
233
222
  overflow: hidden;
234
223
  padding: 5px;
235
224
  }
@@ -249,7 +238,6 @@
249
238
  }
250
239
 
251
240
  .sqd-context-menu-item {
252
- border-radius: 5px;
253
241
  cursor: pointer;
254
242
  transition: background 70ms;
255
243
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sequential-workflow-designer",
3
3
  "description": "Customizable no-code component for building flow-based programming applications.",
4
- "version": "0.15.2",
4
+ "version": "0.15.4",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",
package/sass/designer-theme.scss CHANGED
@@ -2,18 +2,22 @@
2
2
  $theme,
3
3
  $panelBackgroundColor: #fff,
4
4
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
5
+ $panelBorderRadius: 10px,
5
6
  $headerTextColor: #000,
6
7
  $filterBackground: #fff,
7
8
  $filterTextColor: #000,
8
9
  $filterBorder: (1px solid #c3c3c3),
9
10
  $filterBorderColorFocused: #939393,
11
+ $filterBorderRadius: 10px,
10
12
  $groupTextColor: #000,
11
- $groupBackgroundColor: #e5e5e5
13
+ $groupBackgroundColor: #e5e5e5,
14
+ $groupBorderRadius: 10px
12
15
  ) {
13
16
  .sqd-theme-#{$theme} {
14
17
  .sqd-toolbox {
15
18
  background: $panelBackgroundColor;
16
19
  box-shadow: $panelBoxShadow;
20
+ border-radius: $panelBorderRadius;
17
21
  }
18
22
  .sqd-toolbox-header-title {
19
23
  color: $headerTextColor;
@@ -22,6 +26,7 @@
22
26
  background: $filterBackground;
23
27
  color: $filterTextColor;
24
28
  border: $filterBorder;
29
+ border-radius: $filterBorderRadius;
25
30
  }
26
31
  .sqd-toolbox-filter:focus {
27
32
  border-color: $filterBorderColorFocused;
@@ -29,6 +34,7 @@
29
34
  .sqd-toolbox-group-title {
30
35
  color: $groupTextColor;
31
36
  background: $groupBackgroundColor;
37
+ border-radius: $groupBorderRadius;
32
38
  }
33
39
  }
34
40
  }
@@ -41,7 +47,9 @@
41
47
  $itemBoxShadow: (0 2px 2px rgba(0, 0, 0, 0.15)),
42
48
  $itemBorderHovered: #939393,
43
49
  $itemBackgroundColorHovered: #fff,
44
- $noIconBackgroundColor: #c6c6c6
50
+ $itemBorderRadius: 5px,
51
+ $noIconBackgroundColor: #c6c6c6,
52
+ $noIconBorderRadius: 4px
45
53
  ) {
46
54
  .sqd-theme-#{$theme} .sqd-toolbox-item#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
47
55
  & {
@@ -49,6 +57,7 @@
49
57
  border: $itemBorder;
50
58
  box-shadow: $itemBoxShadow;
51
59
  background: $itemBackgroundColor;
60
+ border-radius: $itemBorderRadius;
52
61
  }
53
62
  &:hover {
54
63
  border-color: $itemBorderHovered;
@@ -56,6 +65,7 @@
56
65
  }
57
66
  & .sqd-toolbox-item-icon.sqd-no-icon {
58
67
  background: $noIconBackgroundColor;
68
+ border-radius: $noIconBorderRadius;
59
69
  }
60
70
  }
61
71
  }
@@ -64,10 +74,12 @@
64
74
  $theme,
65
75
  $panelBackgroundColor: #fff,
66
76
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
77
+ $panelBorderRadius: 10px,
67
78
  $buttonBackground: #fff,
68
79
  $buttonBackgroundHovered: #fff,
69
80
  $buttonBorder: (1px solid #c3c3c3),
70
81
  $buttonBorderColorHovered: #939393,
82
+ $buttonBorderRadius: 5px,
71
83
  $buttonIconPathFillColor: #000,
72
84
  $buttonDeleteIconPathFillColor: #e01a24
73
85
  ) {
@@ -75,10 +87,12 @@
75
87
  .sqd-control-bar {
76
88
  background: $panelBackgroundColor;
77
89
  box-shadow: $panelBoxShadow;
90
+ border-radius: $panelBorderRadius;
78
91
  }
79
92
  .sqd-control-bar-button {
80
93
  border: $buttonBorder;
81
94
  background: $buttonBackground;
95
+ border-radius: $buttonBorderRadius;
82
96
  }
83
97
  .sqd-control-bar-button:hover {
84
98
  border-color: $buttonBorderColorHovered;
@@ -116,19 +130,23 @@
116
130
  $theme,
117
131
  $panelBackgroundColor: #fff,
118
132
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
133
+ $panelBorderRadius: 4px,
119
134
  $groupTextColor: #888,
120
135
  $itemTextColor: #000,
121
- $itemBackgroundColorHovered: #eee
136
+ $itemBackgroundColorHovered: #eee,
137
+ $itemBorderRadius: 4px
122
138
  ) {
123
139
  .sqd-theme-#{$theme}.sqd-context-menu {
124
140
  background: $panelBackgroundColor;
125
141
  box-shadow: $panelBoxShadow;
142
+ border-radius: $panelBorderRadius;
126
143
  }
127
144
  .sqd-theme-#{$theme} .sqd-context-menu-group {
128
145
  color: $groupTextColor;
129
146
  }
130
147
  .sqd-theme-#{$theme} .sqd-context-menu-item {
131
148
  color: $itemTextColor;
149
+ border-radius: $itemBorderRadius;
132
150
  }
133
151
  .sqd-theme-#{$theme} .sqd-context-menu-item:hover {
134
152
  background: $itemBackgroundColorHovered;
@@ -188,6 +206,7 @@
188
206
 
189
207
  @mixin sqd-theme-region(
190
208
  $theme,
209
+ $componentType: '',
191
210
  $strokeColor: #cecece,
192
211
  $strokeColorSelected: #ed4800,
193
212
  $strokeWidth: 2,
@@ -195,7 +214,7 @@
195
214
  $strokeDasharray: 3,
196
215
  $strokeDasharraySelected: 0
197
216
  ) {
198
- .sqd-theme-#{$theme} {
217
+ .sqd-theme-#{$theme}#{if($componentType != '', ' .sqd-step-' + $componentType + ' >', '')} {
199
218
  .sqd-region {
200
219
  stroke: $strokeColor;
201
220
  stroke-width: $strokeWidth;
package/sass/designer.scss CHANGED
@@ -32,7 +32,6 @@
32
32
  left: 10px;
33
33
  z-index: 20;
34
34
  box-sizing: border-box;
35
- border-radius: 10px;
36
35
  width: 130px;
37
36
  user-select: none;
38
37
  }
@@ -75,17 +74,14 @@
75
74
  width: 110px;
76
75
  margin: 0 10px 10px;
77
76
  box-sizing: border-box;
78
- border-radius: 10px;
79
77
  }
80
78
  .sqd-toolbox-group-title {
81
79
  text-align: center;
82
80
  padding: 5px 0;
83
81
  margin: 0 10px 10px;
84
- border-radius: 10px;
85
82
  }
86
83
  .sqd-toolbox-item {
87
84
  position: relative;
88
- border-radius: 5px;
89
85
  box-sizing: border-box;
90
86
  margin: 0 10px 10px;
91
87
  width: 110px;
@@ -99,9 +95,6 @@
99
95
  width: 20px;
100
96
  height: 20px;
101
97
  }
102
- .sqd-toolbox-item-icon.sqd-no-icon {
103
- border-radius: 4px;
104
- }
105
98
  .sqd-toolbox-item-icon-image {
106
99
  width: 100%;
107
100
  height: 100%;
@@ -129,14 +122,12 @@
129
122
  left: 10px;
130
123
  z-index: 20;
131
124
  padding: 8px 0 8px 8px;
132
- border-radius: 10px;
133
125
  white-space: nowrap;
134
126
  }
135
127
  .sqd-control-bar-button {
136
128
  display: inline-block;
137
129
  width: 32px;
138
130
  height: 32px;
139
- border-radius: 5px;
140
131
  margin-right: 8px;
141
132
  cursor: pointer;
142
133
  box-sizing: border-box;
@@ -205,7 +196,6 @@
205
196
  .sqd-context-menu {
206
197
  position: absolute;
207
198
  z-index: 2000000000;
208
- border-radius: 4px;
209
199
  overflow: hidden;
210
200
  padding: 5px;
211
201
  }
@@ -222,7 +212,6 @@
222
212
  line-height: 1em;
223
213
  }
224
214
  .sqd-context-menu-item {
225
- border-radius: 5px;
226
215
  cursor: pointer;
227
216
  transition: background 70ms;
228
217
  }