sequential-workflow-designer 0.22.1 → 0.23.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 (10) hide show
  1. package/README.md +4 -4
  2. package/css/designer-dark.css +2 -2
  3. package/css/designer-light.css +2 -2
  4. package/css/designer.css +13 -7
  5. package/dist/index.umd.js +6 -2
  6. package/lib/cjs/index.cjs +6 -2
  7. package/lib/esm/index.js +6 -2
  8. package/package.json +1 -1
  9. package/sass/designer-theme.scss +2 -2
  10. package/sass/designer.scss +12 -7
package/README.md CHANGED
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
103
103
  ```html
104
104
  <head>
105
105
  ...
106
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer.css" rel="stylesheet">
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-light.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-dark.css" rel="stylesheet">
109
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/dist/index.umd.js"></script>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/dist/index.umd.js"></script>
110
110
  ```
111
111
 
112
112
  Call the designer by:
package/css/designer-dark.css CHANGED
@@ -7,13 +7,13 @@
7
7
  .sqd-theme-dark .sqd-toolbox-header-title {
8
8
  color: #fff;
9
9
  }
10
- .sqd-theme-dark .sqd-toolbox-filter {
10
+ .sqd-theme-dark .sqd-toolbox-filter-input {
11
11
  background: #242424;
12
12
  color: #fff;
13
13
  border: none;
14
14
  border-radius: 10px;
15
15
  }
16
- .sqd-theme-dark .sqd-toolbox-filter:focus {
16
+ .sqd-theme-dark .sqd-toolbox-filter-input:focus {
17
17
  border-color: #939393;
18
18
  }
19
19
  .sqd-theme-dark .sqd-toolbox-group-title {
package/css/designer-light.css CHANGED
@@ -7,13 +7,13 @@
7
7
  .sqd-theme-light .sqd-toolbox-header-title {
8
8
  color: #000;
9
9
  }
10
- .sqd-theme-light .sqd-toolbox-filter {
10
+ .sqd-theme-light .sqd-toolbox-filter-input {
11
11
  background: #fff;
12
12
  color: #000;
13
13
  border: 1px solid #c3c3c3;
14
14
  border-radius: 10px;
15
15
  }
16
- .sqd-theme-light .sqd-toolbox-filter:focus {
16
+ .sqd-theme-light .sqd-toolbox-filter-input:focus {
17
17
  border-color: #939393;
18
18
  }
19
19
  .sqd-theme-light .sqd-toolbox-group-title {
package/css/designer.css CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  /* .sqd-toolbox */
25
25
  .sqd-toolbox,
26
- .sqd-toolbox-filter {
26
+ .sqd-toolbox-filter-input {
27
27
  font-size: 11px;
28
28
  line-height: 1.2em;
29
29
  }
@@ -74,29 +74,35 @@
74
74
  position: absolute;
75
75
  top: 0;
76
76
  left: 0;
77
+ width: 100%;
78
+ box-sizing: border-box;
79
+ padding: 0 10px;
77
80
  }
78
81
 
79
82
  .sqd-toolbox-filter {
83
+ padding: 0 10px 10px;
84
+ }
85
+
86
+ .sqd-toolbox-filter-input {
80
87
  display: block;
81
88
  box-sizing: border-box;
82
89
  padding: 6px 8px;
83
90
  outline: none;
84
- width: 110px;
85
- margin: 0 10px 10px;
86
- box-sizing: border-box;
91
+ width: 100%;
87
92
  }
88
93
 
89
94
  .sqd-toolbox-group-title {
90
95
  text-align: center;
91
96
  padding: 5px 0;
92
- margin: 0 10px 10px;
97
+ margin: 0 0 10px;
98
+ width: 100%;
93
99
  }
94
100
 
95
101
  .sqd-toolbox-item {
96
102
  position: relative;
97
103
  box-sizing: border-box;
98
- margin: 0 10px 10px;
99
- width: 110px;
104
+ margin: 0 0 10px;
105
+ width: 100%;
100
106
  cursor: move;
101
107
  }
102
108
 
package/dist/index.umd.js CHANGED
@@ -4040,15 +4040,19 @@
4040
4040
  const body = Dom.element('div', {
4041
4041
  class: 'sqd-toolbox-body'
4042
4042
  });
4043
+ const filter = Dom.element('div', {
4044
+ class: 'sqd-toolbox-filter'
4045
+ });
4043
4046
  const filterInput = Dom.element('input', {
4044
- class: 'sqd-toolbox-filter',
4047
+ class: 'sqd-toolbox-filter-input',
4045
4048
  type: 'text',
4046
4049
  placeholder: i18n('toolbox.search', 'Search...')
4047
4050
  });
4048
4051
  root.appendChild(header);
4049
4052
  root.appendChild(body);
4050
4053
  header.appendChild(headerTitle);
4051
- body.appendChild(filterInput);
4054
+ filter.appendChild(filterInput);
4055
+ body.appendChild(filter);
4052
4056
  parent.appendChild(root);
4053
4057
  const scrollBoxView = ScrollBoxView.create(body, parent);
4054
4058
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
package/lib/cjs/index.cjs CHANGED
@@ -3855,15 +3855,19 @@ class ToolboxView {
3855
3855
  const body = Dom.element('div', {
3856
3856
  class: 'sqd-toolbox-body'
3857
3857
  });
3858
+ const filter = Dom.element('div', {
3859
+ class: 'sqd-toolbox-filter'
3860
+ });
3858
3861
  const filterInput = Dom.element('input', {
3859
- class: 'sqd-toolbox-filter',
3862
+ class: 'sqd-toolbox-filter-input',
3860
3863
  type: 'text',
3861
3864
  placeholder: i18n('toolbox.search', 'Search...')
3862
3865
  });
3863
3866
  root.appendChild(header);
3864
3867
  root.appendChild(body);
3865
3868
  header.appendChild(headerTitle);
3866
- body.appendChild(filterInput);
3869
+ filter.appendChild(filterInput);
3870
+ body.appendChild(filter);
3867
3871
  parent.appendChild(root);
3868
3872
  const scrollBoxView = ScrollBoxView.create(body, parent);
3869
3873
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
package/lib/esm/index.js CHANGED
@@ -3854,15 +3854,19 @@ class ToolboxView {
3854
3854
  const body = Dom.element('div', {
3855
3855
  class: 'sqd-toolbox-body'
3856
3856
  });
3857
+ const filter = Dom.element('div', {
3858
+ class: 'sqd-toolbox-filter'
3859
+ });
3857
3860
  const filterInput = Dom.element('input', {
3858
- class: 'sqd-toolbox-filter',
3861
+ class: 'sqd-toolbox-filter-input',
3859
3862
  type: 'text',
3860
3863
  placeholder: i18n('toolbox.search', 'Search...')
3861
3864
  });
3862
3865
  root.appendChild(header);
3863
3866
  root.appendChild(body);
3864
3867
  header.appendChild(headerTitle);
3865
- body.appendChild(filterInput);
3868
+ filter.appendChild(filterInput);
3869
+ body.appendChild(filter);
3866
3870
  parent.appendChild(root);
3867
3871
  const scrollBoxView = ScrollBoxView.create(body, parent);
3868
3872
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
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.22.1",
4
+ "version": "0.23.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",
package/sass/designer-theme.scss CHANGED
@@ -22,13 +22,13 @@
22
22
  .sqd-toolbox-header-title {
23
23
  color: $headerTextColor;
24
24
  }
25
- .sqd-toolbox-filter {
25
+ .sqd-toolbox-filter-input {
26
26
  background: $filterBackground;
27
27
  color: $filterTextColor;
28
28
  border: $filterBorder;
29
29
  border-radius: $filterBorderRadius;
30
30
  }
31
- .sqd-toolbox-filter:focus {
31
+ .sqd-toolbox-filter-input:focus {
32
32
  border-color: $filterBorderColorFocused;
33
33
  }
34
34
  .sqd-toolbox-group-title {
package/sass/designer.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  /* .sqd-toolbox */
23
23
 
24
24
  .sqd-toolbox,
25
- .sqd-toolbox-filter {
25
+ .sqd-toolbox-filter-input {
26
26
  font-size: 11px;
27
27
  line-height: 1.2em;
28
28
  }
@@ -66,26 +66,31 @@
66
66
  position: absolute;
67
67
  top: 0;
68
68
  left: 0;
69
+ width: 100%;
70
+ box-sizing: border-box;
71
+ padding: 0 10px;
69
72
  }
70
73
  .sqd-toolbox-filter {
74
+ padding: 0 10px 10px;
75
+ }
76
+ .sqd-toolbox-filter-input {
71
77
  display: block;
72
78
  box-sizing: border-box;
73
79
  padding: 6px 8px;
74
80
  outline: none;
75
- width: 110px;
76
- margin: 0 10px 10px;
77
- box-sizing: border-box;
81
+ width: 100%;
78
82
  }
79
83
  .sqd-toolbox-group-title {
80
84
  text-align: center;
81
85
  padding: 5px 0;
82
- margin: 0 10px 10px;
86
+ margin: 0 0 10px;
87
+ width: 100%;
83
88
  }
84
89
  .sqd-toolbox-item {
85
90
  position: relative;
86
91
  box-sizing: border-box;
87
- margin: 0 10px 10px;
88
- width: 110px;
92
+ margin: 0 0 10px;
93
+ width: 100%;
89
94
  cursor: move;
90
95
  }
91
96
  .sqd-toolbox-item-icon {