@svar-ui/svelte-toolbar 2.5.1 → 2.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/svelte-toolbar",
-	"version": "2.5.1",
+	"version": "2.5.3",
 	"description": "Svelte toolbar component. Lightweight, customizable, easy-to-use.",
 	"productTag": "toolbar",
 	"productTrial": false,
@@ -33,8 +33,8 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"@svar-ui/svelte-core": "2.5.1",
-		"@svar-ui/lib-dom": "0.12.1"
+		"@svar-ui/svelte-core": "2.5.3",
+		"@svar-ui/lib-dom": "0.12.2"
 	},
 	"files": [
 		"src",

package/src/components/Toolbar.svelte

@@ -12,6 +12,7 @@
 		css = "",
 		values = $bindable(null),
 		overflow = "menu",
+		layout = "row",
 		onclick,
 		onchange,
 	} = $props();
@@ -25,57 +26,60 @@
 	}
 
 	let div = null;
-	let lastToolbarState = -1;
 	let menuItems = $state([]);
 
 	function processOverflow() {
 		if (overflow === "wrap") return;
 
+		const nodes = div.children;
+		// restore all items so widths can be measured
+		for (let i = 0; i < items.length; i++) {
+			if (nodes[i]) nodes[i].style.display = "";
+		}
+
 		const visibleWidth = div.clientWidth;
 		const fullWidth = div.scrollWidth;
 		const needMenu = fullWidth > visibleWidth;
 
 		if (needMenu) {
 			if (overflow === "collapse") return collapseGroups(visibleWidth);
-			// we need to decide how many nodes need to be
-			const nodes = div.children;
-			let sum = 0;
 
+			// pinned items always stay visible
+			let pinnedWidth = 0;
 			for (let i = 0; i < items.length; i++) {
+				if (items[i].pinned) pinnedWidth += nodes[i].clientWidth;
+			}
+
+			let sum = 0;
+			for (let i = 0; i < items.length; i++) {
+				if (items[i].pinned) continue;
 				sum += nodes[i].clientWidth;
 				if (items[i].comp == "separator") sum += 8;
-				if (sum > visibleWidth - 40) {
-					// skip updates, as visibility state was not changed
-					if (lastToolbarState === i) return;
-					lastToolbarState = i;
-
-					// we need to hide nodes[i] and all next nodes
+				if (sum > visibleWidth - 40 - pinnedWidth) {
+					// we need to hide nodes[i] and all next non-pinned nodes
 					menuItems = [];
 					for (let j = i; j < items.length; j++) {
+						if (items[j].pinned) continue;
 						menuItems.push(items[j]);
-						nodes[j].style.visibility = "hidden";
+						nodes[j].style.display = "none";
 					}
 					// hide the ending separator
-					if (i > 0 && items[i - 1].comp == "separator") {
-						nodes[i - 1].style.visibility = "hidden";
+					if (
+						i > 0 &&
+						items[i - 1].comp == "separator" &&
+						!items[i - 1].pinned
+					) {
+						nodes[i - 1].style.display = "none";
 					}
 					break;
 				}
-				nodes[i].style.visibility = "";
 			}
 		} else {
 			const freeWidth = visibleWidth - getTotalWidth();
 			if (freeWidth <= 0) return;
 			if (overflow === "collapse") return expandGroups(freeWidth);
 
-			if (menuItems.length) {
-				lastToolbarState = null;
-				const nodes = div.children;
-				for (let i = 0; i < items.length; i++) {
-					nodes[i].style.visibility = "";
-				}
-				menuItems = [];
-			}
+			if (menuItems.length) menuItems = [];
 		}
 	}
 
@@ -84,7 +88,7 @@
 		let sum = 0;
 		for (let i = 0; i < items.length; i++) {
 			if (items[i].comp != "spacer") {
-				sum += nodes[i].clientWidth;
+				sum += nodes[i]?.clientWidth || 0;
 				if (items[i].comp == "separator") sum += 8;
 			}
 		}
@@ -150,6 +154,8 @@
 <div
 	class="wx-toolbar {css}"
 	class:wx-wrap={overflow === "wrap"}
+	class:wx-column={layout == "column"}
+	class:wx-has-menu={menuItems.length}
 	bind:this={div}
 >
 	{#each visibleItems as item}
@@ -178,8 +184,15 @@
 		align-items: stretch;
 		padding: 4px;
 		position: relative;
+		min-height: 48px;
+	}
+	.wx-toolbar.wx-has-menu {
+		padding-right: 48px;
 	}
 	.wx-toolbar.wx-wrap {
 		flex-wrap: wrap;
 	}
+	.wx-column {
+		flex-flow: column;
+	}
 </style>

package/types/index.d.ts

@@ -13,6 +13,7 @@ export interface IToolbarItem {
 	handler?: (item: IToolbarItem, value?: any) => void;
 	layout?: "column";
 	items?: IToolbarItem[];
+	pinned?: boolean;
 	[key: string]: any;
 }
 

package/whatsnew.md

@@ -1,3 +1,10 @@
+## 2.5.3
+
+### Fixes
+
+-   Impossible to arrange first level items as a column
+-   Impossible to fix certain items as always visible
+
 ## 2.5.1
 
 -   Using Svelte Core v2.5.1