0.23.0. (#158)

nocode-js · Sep 1, 2024 · b7aec7e · b7aec7e
1 parent 7ca5488
commit b7aec7e
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 0.23.0
+
+This release updates the CSS selectors for the toolbox, allowing you to adjust its width with a single CSS override.
+
+```css
+.sqd-toolbox { width: 170px !important; }
+```
+
 # 0.22.1
 
 This release resolves an issue that prevented a step from being deleted due to a bug in the control bar implementation.

diff --git a/README.md b/README.md
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 18",
 		"@angular/core": "12 - 18",
-		"sequential-workflow-designer": "^0.22.1"
+		"sequential-workflow-designer": "^0.23.0"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.22.1",
-		"sequential-workflow-designer-angular": "^0.22.1",
+		"sequential-workflow-designer": "^0.23.0",
+		"sequential-workflow-designer-angular": "^0.23.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.22.1:
-  version "0.22.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.22.1.tgz#3153d292f6b0ce517f2ff06d71105ed6bf9ad3c5"
-  integrity sha512-JH3d++fvP2NsN7h+/WJl/AL+R655VYrevJ0THspWx4R2ilNTB8kUbW2MDQpKpzJ1ZVu/Rdi1tQnGJNmpC3Cikw==
+sequential-workflow-designer-angular@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.23.0.tgz#aa8a8f9f6e0332d1d3e37c9f973526858db47529"
+  integrity sha512-zLLDzDCY9YOjEpDBdKhYPmsaMIph8boZ9sHyCG8G3btDe5DxyQ0CWly83gn3JYn+ydEbxP8uKr79QOCx5qU86g==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.22.1:
-  version "0.22.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.22.1.tgz#142778f1b6b06cbf39e6b5f30f20c92b09397a36"
-  integrity sha512-/8Vgfzil/LCA7rwtRW10ptKFg4ysYO9CWZGmgPvFb7K2S3bv57xKaL9MYBqIamqN6qd80bx715G/3lo8mgDO5g==
+sequential-workflow-designer@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.23.0.tgz#8564eed552a75d5d6bca4aeb84e410add3fe431d"
+  integrity sha512-wySBYU+r8UoXeRaqThnH99NDgyAEek4QJSWZHGhKwgPfguH0Y9JZB+8DvV15iLFL9lMKPYiqWQHZvIhUtDz2LA==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.22.1",
-		"sequential-workflow-designer-react": "^0.22.1"
+		"sequential-workflow-designer": "^0.23.0",
+		"sequential-workflow-designer-react": "^0.23.0"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.22.1",
-		"sequential-workflow-designer-svelte": "^0.22.1"
+		"sequential-workflow-designer": "^0.23.0",
+		"sequential-workflow-designer-svelte": "^0.23.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/sass/designer-theme.scss b/designer/sass/designer-theme.scss
@@ -22,13 +22,13 @@
 		.sqd-toolbox-header-title {
 			color: $headerTextColor;
 		}
-		.sqd-toolbox-filter {
+		.sqd-toolbox-filter-input {
 			background: $filterBackground;
 			color: $filterTextColor;
 			border: $filterBorder;
 			border-radius: $filterBorderRadius;
 		}
-		.sqd-toolbox-filter:focus {
+		.sqd-toolbox-filter-input:focus {
 			border-color: $filterBorderColorFocused;
 		}
 		.sqd-toolbox-group-title {

diff --git a/designer/sass/designer.scss b/designer/sass/designer.scss
@@ -22,7 +22,7 @@
 /* .sqd-toolbox */
 
 .sqd-toolbox,
-.sqd-toolbox-filter {
+.sqd-toolbox-filter-input {
 	font-size: 11px;
 	line-height: 1.2em;
 }
@@ -66,26 +66,31 @@
 	position: absolute;
 	top: 0;
 	left: 0;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 10px;
 }
 .sqd-toolbox-filter {
+	padding: 0 10px 10px;
+}
+.sqd-toolbox-filter-input {
 	display: block;
 	box-sizing: border-box;
 	padding: 6px 8px;
 	outline: none;
-	width: 110px;
-	margin: 0 10px 10px;
-	box-sizing: border-box;
+	width: 100%;
 }
 .sqd-toolbox-group-title {
 	text-align: center;
 	padding: 5px 0;
-	margin: 0 10px 10px;
+	margin: 0 0 10px;
+	width: 100%;
 }
 .sqd-toolbox-item {
 	position: relative;
 	box-sizing: border-box;
-	margin: 0 10px 10px;
-	width: 110px;
+	margin: 0 0 10px;
+	width: 100%;
 	cursor: move;
 }
 .sqd-toolbox-item-icon {

diff --git a/designer/src/toolbox/toolbox-view.ts b/designer/src/toolbox/toolbox-view.ts
@@ -24,16 +24,20 @@ export class ToolboxView {
 			class: 'sqd-toolbox-body'
 		});
 
+		const filter = Dom.element('div', {
+			class: 'sqd-toolbox-filter'
+		});
 		const filterInput = Dom.element('input', {
-			class: 'sqd-toolbox-filter',
+			class: 'sqd-toolbox-filter-input',
 			type: 'text',
 			placeholder: i18n('toolbox.search', 'Search...')
 		});
 
 		root.appendChild(header);
 		root.appendChild(body);
 		header.appendChild(headerTitle);
-		body.appendChild(filterInput);
+		filter.appendChild(filterInput);
+		body.appendChild(filter);
 		parent.appendChild(root);
 
 		const scrollBoxView = ScrollBoxView.create(body, parent);

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);

diff --git a/examples/editing-restrictions.html b/examples/editing-restrictions.html
@@ -28,6 +28,9 @@
 			#designer {
 				flex: 1;
 			}
+			.sqd-toolbox {
+				width: 170px !important;
+			}
 		</style>
 	</head>
 	<body>

diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.22.1"
+		"sequential-workflow-designer": "^0.23.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.22.1",
+		"sequential-workflow-designer": "^0.23.0",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",

diff --git a/svelte/package.json b/svelte/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.22.1"
+		"sequential-workflow-designer": "^0.23.0"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.22.1",
+		"sequential-workflow-designer": "^0.23.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",