@svar-ui/svelte-toolbar 2.5.2 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/svelte-toolbar",
-	"version": "2.5.2",
+	"version": "2.6.0",
 	"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.6.0",
+		"@svar-ui/lib-dom": "0.13.1"
 	},
 	"files": [
 		"src",

package/src/buttons/Button.svelte

@@ -1,7 +1,17 @@
 <script>
 	import { Button } from "@svar-ui/svelte-core";
 
-	let { icon, text = "", css, type, disabled, menu, onclick } = $props();
+	let {
+		icon,
+		title,
+		text = "",
+		tooltip,
+		css,
+		type,
+		disabled,
+		menu,
+		onclick,
+	} = $props();
 </script>
 
 {#if menu}
@@ -12,7 +22,7 @@
 		{text}
 	</div>
 {:else}
-	<Button {icon} {type} {css} {text} {disabled} {onclick} />
+	<Button {icon} {type} {css} {title} {text} {tooltip} {disabled} {onclick} />
 {/if}
 
 <style>

package/src/buttons/Icon.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { Button } from "@svar-ui/svelte-core";
 
-	let { icon, text, css, type, disabled, menu, onclick } = $props();
+	let { icon, title, text, tooltip, css, type, disabled, menu, onclick } =
+		$props();
 </script>
 
 {#if menu}
@@ -12,7 +13,7 @@
 		{text}
 	</div>
 {:else}
-	<Button {icon} {type} {css} title={text} {disabled} {onclick} />
+	<Button {icon} {type} {css} {disabled} {title} {tooltip} {onclick} />
 {/if}
 
 <style>

package/src/components/Group.svelte

@@ -3,6 +3,7 @@
 
 	import BarComponent from "./BarComponent.svelte";
 	import { Dropdown } from "@svar-ui/svelte-core";
+	import { collapseSeparators } from "../helpers";
 
 	let { item, values = null, menu = false, onchange, onclick } = $props();
 
@@ -49,7 +50,7 @@
 		{/if}
 	{:else}
 		<div class="wx-tb-body">
-			{#each item.items as sub}
+			{#each collapseSeparators(item.items) as sub}
 				{#if sub.items}
 					<Group item={sub} {values} onclick={onClick} {onchange} />
 				{:else}

package/src/components/Toolbar.svelte

@@ -3,8 +3,8 @@
 	import Group from "./Group.svelte";
 	import BarComponent from "./BarComponent.svelte";
 
-	import { uid } from "@svar-ui/lib-dom";
 	import { onMount, tick } from "svelte";
+	import { normalizeToolbarItems } from "../helpers";
 
 	let {
 		items = $bindable([]),
@@ -26,78 +26,28 @@
 	}
 
 	let div = null;
-	let lastToolbarState = -1;
 	let menuItems = $state([]);
 
-	function processOverflow() {
-		if (overflow === "wrap") return;
-
-		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;
-
-			for (let i = 0; i < items.length; i++) {
-				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
-					menuItems = [];
-					for (let j = i; j < items.length; j++) {
-						menuItems.push(items[j]);
-						nodes[j].style.visibility = "hidden";
-					}
-					// hide the ending separator
-					if (i > 0 && items[i - 1].comp == "separator") {
-						nodes[i - 1].style.visibility = "hidden";
-					}
-					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 = [];
-			}
-		}
-	}
+	const barItems = $derived(normalizeToolbarItems(items));
 
 	function getTotalWidth() {
 		const nodes = div.children;
 		let sum = 0;
-		for (let i = 0; i < items.length; i++) {
-			if (items[i].comp != "spacer") {
+		for (let i = 0; i < barItems.length; i++) {
+			if (barItems[i].comp != "spacer") {
 				sum += nodes[i]?.clientWidth || 0;
-				if (items[i].comp == "separator") sum += 8;
+				if (barItems[i].comp == "separator") sum += 8;
 			}
 		}
 		return sum;
 	}
 
 	function collapseGroups() {
-		for (let i = items.length - 1; i >= 0; i--) {
+		for (let i = barItems.length - 1; i >= 0; i--) {
 			// close rightmost open group
-			if (items[i].items && !items[i].collapsed) {
-				items[i].collapsed = true;
-				items[i].$width = div.children[i].offsetWidth;
+			if (barItems[i].items && !barItems[i].collapsed) {
+				barItems[i].collapsed = true;
+				barItems[i].$width = div.children[i].offsetWidth;
 				// check after dom update, maybe we need to close more
 				tick().then(processOverflow);
 
@@ -109,52 +59,98 @@
 	}
 
 	function expandGroups(freeSpace) {
-		for (let i = 0; i < items.length; i++) {
-			// close leftmost closed group, that was closed previously
-			if (items[i].collapsed && items[i].$width) {
+		for (let i = 0; i < barItems.length; i++) {
+			// open leftmost closed group that was collapsed by overflow
+			if (barItems[i].collapsed && barItems[i].$width) {
 				// check if group can fit in free space
 				if (
-					items[i].$width - div.children[i].offsetWidth <
+					barItems[i].$width - div.children[i].offsetWidth <
 					freeSpace + 10
 				) {
-					items[i].collapsed = false;
+					barItems[i].collapsed = false;
+					// items are not deep reactive, so we need to trigger the update
+					items = [...items];
 					// check after dom update, maybe we can open one more
 					tick().then(processOverflow);
 				}
-
-				items = [...items];
 				return;
 			}
 		}
 	}
 
-	// rebuild toolbar items, inject group nodes
-	function normalize(items) {
-		items.forEach(item => {
-			if (!item.id) item.id = uid();
-		});
-		return items;
+	function processOverflow() {
+		if (overflow === "wrap") return;
+
+		const nodes = div.children;
+		// restore all items so widths can be measured
+		for (let i = 0; i < barItems.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();
+
+			// pinned items always stay visible
+			let pinnedWidth = 0;
+			for (let i = 0; i < barItems.length; i++) {
+				if (barItems[i].pinned) pinnedWidth += nodes[i].clientWidth;
+			}
+
+			let sum = 0;
+			for (let i = 0; i < barItems.length; i++) {
+				if (barItems[i].pinned) continue;
+				sum += nodes[i].clientWidth;
+				if (barItems[i].comp == "separator") sum += 8;
+				if (sum > visibleWidth - 40 - pinnedWidth) {
+					// we need to hide nodes[i] and all next non-pinned nodes
+					menuItems = [];
+					for (let j = i; j < barItems.length; j++) {
+						if (barItems[j].pinned) continue;
+						menuItems.push(barItems[j]);
+						nodes[j].style.display = "none";
+					}
+					// hide the ending separator
+					if (
+						i > 0 &&
+						barItems[i - 1].comp == "separator" &&
+						!barItems[i - 1].pinned
+					) {
+						nodes[i - 1].style.display = "none";
+					}
+					break;
+				}
+			}
+		} else {
+			const freeWidth = visibleWidth - getTotalWidth();
+			if (freeWidth <= 0) return;
+			if (overflow === "collapse") return expandGroups(freeWidth);
+
+			if (menuItems.length) menuItems = [];
+		}
 	}
 
 	onMount(() => {
-		const resizeObserver = new ResizeObserver(() => processOverflow(div));
+		const resizeObserver = new ResizeObserver(() => processOverflow());
 		resizeObserver.observe(div);
 
 		return () => {
-			if (resizeObserver) resizeObserver.unobserve(div);
+			resizeObserver.unobserve(div);
 		};
 	});
-
-	const visibleItems = $derived(normalize(items));
 </script>
 
 <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}
+	{#each barItems as item}
 		{#if item.items}
 			<Group {item} {values} {onclick} onchange={handleChange} />
 		{:else}
@@ -180,6 +176,10 @@
 		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;

package/src/helpers.js

@@ -1,3 +1,5 @@
+import { uid } from "@svar-ui/lib-dom";
+
 const handlers = {};
 export function getItemHandler(type) {
 	return handlers[type] || type;
@@ -5,3 +7,26 @@ export function getItemHandler(type) {
 export function registerToolbarItem(type, handler) {
 	handlers[type] = handler;
 }
+
+// Assign stable ids and collapse consecutive separators
+export function normalizeToolbarItems(items) {
+	if (!items?.length) return [];
+	for (const item of items) {
+		if (!item.id) item.id = uid();
+	}
+	return collapseSeparators(items);
+}
+
+// Keep the first of consecutive separator
+export function collapseSeparators(items) {
+	if (!items?.length) return items || [];
+	const out = [];
+	let prevWasSeparator = false;
+	for (const item of items) {
+		const isSeparator = item.comp === "separator";
+		if (isSeparator && prevWasSeparator) continue;
+		out.push(item);
+		prevWasSeparator = isSeparator;
+	}
+	return out;
+}

package/types/index.d.ts

@@ -5,14 +5,19 @@ export interface IToolbarItem {
 	comp?: string | Component<any>;
 	icon?: string;
 	css?: string;
+	type?: string;
+	title?: string;
 	text?: string;
+	tooltip?: string;
 	menuText?: string;
 	key?: string;
+	disabled?: boolean;
 	spacer?: boolean;
 	collapsed?: boolean;
 	handler?: (item: IToolbarItem, value?: any) => void;
 	layout?: "column";
 	items?: IToolbarItem[];
+	pinned?: boolean;
 	[key: string]: any;
 }
 

package/whatsnew.md

@@ -1,8 +1,19 @@
-## 2.5.2
+## 2.6.0
+
+### New features
+
+-   Tooltip for toolbar items
+
+### Fixes
+
+-   Duplicate separators are auto removed
+
+## 2.5.3
 
 ### Fixes
 
 -   Impossible to arrange first level items as a column
+-   Impossible to fix certain items as always visible
 
 ## 2.5.1