sequential-workflow-designer 0.29.1 → 0.30.0

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 (13) hide show
  1. package/README.md +5 -4
  2. package/css/designer-dark.css +10 -0
  3. package/css/designer-light.css +10 -0
  4. package/css/designer-soft.css +215 -0
  5. package/dist/index.umd.js +315 -102
  6. package/lib/cjs/index.cjs +315 -102
  7. package/lib/esm/index.js +314 -103
  8. package/lib/index.d.ts +68 -31
  9. package/package.json +7 -1
  10. package/sass/designer-dark.scss +6 -0
  11. package/sass/designer-light.scss +1 -0
  12. package/sass/designer-soft.scss +48 -0
  13. package/sass/designer-theme.scss +26 -0
package/README.md CHANGED
@@ -22,6 +22,7 @@ Features:
22
22
  ## 👀 Examples
23
23
 
24
24
  * [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
25
+ * [💥 Triggers](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html)
25
26
  * [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
26
27
  * [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
27
28
  * [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
@@ -104,10 +105,10 @@ Add the below code to your head section in HTML document.
104
105
  ```html
105
106
  <head>
106
107
  ...
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer-light.css" rel="stylesheet">
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer-dark.css" rel="stylesheet">
110
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/dist/index.umd.js"></script>
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer.css" rel="stylesheet">
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer-light.css" rel="stylesheet">
110
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer-dark.css" rel="stylesheet">
111
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/dist/index.umd.js"></script>
111
112
  ```
112
113
 
113
114
  Call the designer by:
package/css/designer-dark.css CHANGED
@@ -191,6 +191,16 @@
191
191
  stroke: #707070;
192
192
  }
193
193
 
194
+ .sqd-theme-dark .sqd-step-launch-pad > g > .sqd-input {
195
+ fill: #c6c6c6;
196
+ stroke-width: 2;
197
+ stroke: #707070;
198
+ }
199
+ .sqd-theme-dark .sqd-step-launch-pad > g > .sqd-output {
200
+ fill: #707070;
201
+ stroke-width: 0;
202
+ }
203
+
194
204
  .sqd-theme-dark .sqd-step-container > .sqd-label > .sqd-label-text {
195
205
  fill: #fff;
196
206
  }
package/css/designer-light.css CHANGED
@@ -191,6 +191,16 @@
191
191
  stroke: #000;
192
192
  }
193
193
 
194
+ .sqd-theme-light .sqd-step-launch-pad > g > .sqd-input {
195
+ fill: #fff;
196
+ stroke-width: 2;
197
+ stroke: #000;
198
+ }
199
+ .sqd-theme-light .sqd-step-launch-pad > g > .sqd-output {
200
+ fill: #000;
201
+ stroke-width: 0;
202
+ }
203
+
194
204
  .sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-text {
195
205
  fill: #fff;
196
206
  }
package/css/designer-soft.css ADDED
@@ -0,0 +1,215 @@
1
+ /* internal */
2
+ .sqd-theme-soft .sqd-toolbox {
3
+ background: #fff;
4
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
5
+ border: none;
6
+ border-radius: 10px;
7
+ }
8
+ .sqd-theme-soft .sqd-toolbox-header-title {
9
+ color: #000;
10
+ }
11
+ .sqd-theme-soft .sqd-toolbox-filter-input {
12
+ background: #fff;
13
+ color: #000;
14
+ border: 1px solid #dbdbdb;
15
+ border-radius: 10px;
16
+ }
17
+ .sqd-theme-soft .sqd-toolbox-filter-input:focus {
18
+ border-color: #c3c3c3;
19
+ }
20
+ .sqd-theme-soft .sqd-toolbox-group-title {
21
+ color: #000;
22
+ background: #efefef;
23
+ border-radius: 10px;
24
+ }
25
+
26
+ .sqd-theme-soft .sqd-toolbox-item {
27
+ color: #000;
28
+ border: 1px solid #dbdbdb;
29
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
30
+ background: #fff;
31
+ border-radius: 5px;
32
+ }
33
+ .sqd-theme-soft .sqd-toolbox-item:hover {
34
+ border-color: #cfcfcf;
35
+ background: #fff;
36
+ }
37
+ .sqd-theme-soft .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
38
+ background: #e9e9e9;
39
+ border-radius: 4px;
40
+ }
41
+
42
+ .sqd-theme-soft .sqd-control-bar {
43
+ background: #fff;
44
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
45
+ border: none;
46
+ border-radius: 10px;
47
+ }
48
+ .sqd-theme-soft .sqd-control-bar-button {
49
+ border: 1px solid #c3c3c3;
50
+ background: #fff;
51
+ border-radius: 5px;
52
+ }
53
+ .sqd-theme-soft .sqd-control-bar-button:hover {
54
+ border-color: #939393;
55
+ background: #fff;
56
+ }
57
+ .sqd-theme-soft .sqd-control-bar-button .sqd-icon-path {
58
+ fill: #000;
59
+ }
60
+ .sqd-theme-soft .sqd-control-bar-button.sqd-delete .sqd-icon-path {
61
+ fill: #e01a24;
62
+ }
63
+
64
+ .sqd-theme-soft .sqd-smart-editor {
65
+ background: #fff;
66
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
67
+ }
68
+ .sqd-theme-soft .sqd-smart-editor-toggle {
69
+ background: #fff;
70
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
71
+ }
72
+
73
+ .sqd-theme-soft.sqd-context-menu {
74
+ background: #fff;
75
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
76
+ border: none;
77
+ border-radius: 4px;
78
+ }
79
+
80
+ .sqd-theme-soft .sqd-context-menu-group {
81
+ color: #888;
82
+ }
83
+
84
+ .sqd-theme-soft .sqd-context-menu-item {
85
+ color: #000;
86
+ border-radius: 4px;
87
+ }
88
+
89
+ .sqd-theme-soft .sqd-context-menu-item:hover {
90
+ background: #eee;
91
+ }
92
+
93
+ .sqd-theme-soft.sqd-designer {
94
+ background: #f9f9f9;
95
+ }
96
+
97
+ .sqd-theme-soft .sqd-line-grid-path {
98
+ stroke: #ebebeb;
99
+ stroke-width: 1;
100
+ }
101
+
102
+ .sqd-theme-soft .sqd-join {
103
+ stroke-width: 2;
104
+ stroke: #2a2a2a;
105
+ }
106
+
107
+ .sqd-theme-soft .sqd-region {
108
+ stroke: #e9e9e9;
109
+ stroke-width: 2;
110
+ stroke-dasharray: 3;
111
+ }
112
+ .sqd-theme-soft .sqd-region.sqd-selected {
113
+ stroke: #ed4800;
114
+ stroke-width: 2;
115
+ stroke-dasharray: 0;
116
+ }
117
+
118
+ .sqd-theme-soft .sqd-placeholder .sqd-placeholder-rect {
119
+ fill: #e9e9e9;
120
+ stroke: #707070;
121
+ stroke-width: 1;
122
+ stroke-dasharray: 3;
123
+ }
124
+ .sqd-theme-soft .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
125
+ fill: #ed4800;
126
+ }
127
+ .sqd-theme-soft .sqd-placeholder-icon-path {
128
+ fill: #2b2b2b;
129
+ }
130
+ .sqd-theme-soft .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
131
+ fill: #fff;
132
+ }
133
+
134
+ .sqd-theme-soft .sqd-validation-error {
135
+ fill: #ffa200;
136
+ }
137
+ .sqd-theme-soft .sqd-validation-error-icon-path {
138
+ fill: #000;
139
+ }
140
+
141
+ .sqd-theme-soft .sqd-root-start-stop-circle {
142
+ fill: #3747dd;
143
+ }
144
+ .sqd-theme-soft .sqd-root-start-stop-icon {
145
+ fill: #fff;
146
+ }
147
+
148
+ .sqd-theme-soft .sqd-step-task .sqd-step-task-rect {
149
+ fill: #fff;
150
+ stroke-width: 1;
151
+ stroke: #dbdbdb;
152
+ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
153
+ }
154
+ .sqd-theme-soft .sqd-step-task .sqd-step-task-rect.sqd-selected {
155
+ stroke: #ed4800;
156
+ stroke-width: 2;
157
+ }
158
+ .sqd-theme-soft .sqd-step-task .sqd-step-task-text {
159
+ fill: #000;
160
+ }
161
+ .sqd-theme-soft .sqd-step-task .sqd-step-task-empty-icon {
162
+ fill: #e9e9e9;
163
+ }
164
+ .sqd-theme-soft .sqd-step-task .sqd-input {
165
+ fill: #fff;
166
+ stroke-width: 2;
167
+ stroke: #2a2a2a;
168
+ }
169
+ .sqd-theme-soft .sqd-step-task .sqd-output {
170
+ fill: #2a2a2a;
171
+ stroke-width: 0;
172
+ }
173
+
174
+ .sqd-theme-soft .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
175
+ fill: #fff;
176
+ }
177
+ .sqd-theme-soft .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
178
+ fill: #3747dd;
179
+ stroke-width: 0;
180
+ }
181
+ .sqd-theme-soft .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
182
+ fill: #e9e9e9;
183
+ stroke-width: 0;
184
+ }
185
+ .sqd-theme-soft .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
186
+ fill: #555555;
187
+ }
188
+ .sqd-theme-soft .sqd-step-switch > g > .sqd-input {
189
+ fill: #fff;
190
+ stroke-width: 2;
191
+ stroke: #2a2a2a;
192
+ }
193
+
194
+ .sqd-theme-soft .sqd-step-launch-pad > g > .sqd-input {
195
+ fill: #fff;
196
+ stroke-width: 2;
197
+ stroke: #2a2a2a;
198
+ }
199
+ .sqd-theme-soft .sqd-step-launch-pad > g > .sqd-output {
200
+ fill: #2a2a2a;
201
+ stroke-width: 0;
202
+ }
203
+
204
+ .sqd-theme-soft .sqd-step-container > .sqd-label > .sqd-label-text {
205
+ fill: #fff;
206
+ }
207
+ .sqd-theme-soft .sqd-step-container > .sqd-label > .sqd-label-rect {
208
+ fill: #3747dd;
209
+ stroke-width: 0;
210
+ }
211
+ .sqd-theme-soft .sqd-step-container > g > .sqd-input {
212
+ fill: #fff;
213
+ stroke-width: 2;
214
+ stroke: #2a2a2a;
215
+ }