@svar-ui/svelte-toolbar 2.5.3 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/svelte-toolbar",
-	"version": "2.5.3",
+	"version": "2.6.1",
 	"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.3",
-		"@svar-ui/lib-dom": "0.12.2"
+		"@svar-ui/svelte-core": "2.6.1",
+		"@svar-ui/lib-dom": "0.14.0"
 	},
 	"files": [
 		"src",

package/src/buttons/ButtonList.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { Button } from "@svar-ui/svelte-core";
+
+	let { css, disabled, options, onchange, value = $bindable() } = $props();
+
+	function onClickHandler(id) {
+		value = id;
+		onchange && onchange({ value: id });
+	}
+</script>
+
+<div class="wx-button-list {css}">
+	{#each options as option}
+		<Button
+			type={value === option.id ? "primary" : ""}
+			{disabled}
+			text={option.label}
+			onclick={() => onClickHandler(option.id)}
+		/>
+	{/each}
+</div>
+
+<style>
+	.wx-button-list {
+		line-height: normal;
+	}
+	.wx-button-list :global(button) {
+		width: 100%;
+	}
+	.wx-button-list :global(button:not(:first-child)) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	.wx-button-list :global(button:not(:last-child)) {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+</style>

package/src/buttons/Icon.svelte

@@ -1,26 +1,29 @@
 <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}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="wx-item" {onclick}>
-		{#if icon}<i class="{icon} {css}"></i>{/if}
+	<div class="wx-item" class:wx-text-icon={text} {onclick}>
+		<i class="{icon || 'wxi-empty'} {css || ''}"></i>
 		{text}
 	</div>
 {:else}
-	<Button {icon} {type} {css} title={text} {disabled} {onclick} />
+	<Button {icon} {type} {css} {disabled} {title} {tooltip} {onclick} />
 {/if}
 
 <style>
 	i {
-		margin-right: 8px;
 		font-size: var(--wx-icon-size);
 		color: var(--wx-color-font);
 	}
+	.wx-text-icon i {
+		margin-right: 8px;
+	}
 	.wx-item {
 		cursor: pointer;
 		white-space: nowrap;

package/src/components/BarComponent.svelte

@@ -5,8 +5,7 @@
 	import Spacer from "../buttons/Spacer.svelte";
 
 	let { item = {}, menu = false, values, onclick, onchange } = $props();
-
-	let itemComponent = $derived(getItemHandler(item.comp || "label"));
+	let itemComponent = $derived(getItemHandler(item.comp, { menu }));
 
 	function onClick() {
 		if (item.handler) item.handler(item);
@@ -56,30 +55,16 @@
 		display: flex;
 	}
 	.wx-menu.wx-tb-element {
-		height: 36px;
 		line-height: 36px;
 		padding: 2px 8px;
 		background-color: var(--wx-background);
 	}
-
 	.wx-menu :global(button) {
 		width: 100%;
-		background: transparent;
-		text-align: left;
-		padding-left: 0;
-		font-weight: var(--wx-font-weight);
-		font-size: var(--wx-font-size);
 	}
 	.wx-menu :global(.wx-tb-element) {
 		align-self: stretch;
 	}
-	.wx-menu.wx-tb-element :global(button:hover) {
-		background: var(--wx-background-alt);
-	}
-	.wx-menu :global(button i) {
-		margin-right: 4px;
-		font-size: var(--wx-icon-size);
-	}
 	.wx-menu.wx-tb-element:hover {
 		background: var(--wx-background-alt);
 	}

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([]),
@@ -28,12 +28,63 @@
 	let div = null;
 	let menuItems = $state([]);
 
+	const barItems = $derived(normalizeToolbarItems(items));
+	const vertical = $derived(layout === "column");
+
+	function getTotalWidth() {
+		const nodes = div.children;
+		let sum = 0;
+		for (let i = 0; i < barItems.length; i++) {
+			if (barItems[i].comp != "spacer") {
+				sum += nodes[i]?.clientWidth || 0;
+				if (barItems[i].comp == "separator") sum += 8;
+			}
+		}
+		return sum;
+	}
+
+	function collapseGroups() {
+		for (let i = barItems.length - 1; i >= 0; i--) {
+			// close rightmost open group
+			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);
+
+				// items are not deep reactive, so we need to trigger the update
+				items = [...items];
+				return;
+			}
+		}
+	}
+
+	function expandGroups(freeSpace) {
+		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 (
+					barItems[i].$width - div.children[i].offsetWidth <
+					freeSpace + 10
+				) {
+					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);
+				}
+				return;
+			}
+		}
+	}
+
 	function processOverflow() {
-		if (overflow === "wrap") return;
+		if (overflow === "wrap" || vertical) return;
 
 		const nodes = div.children;
 		// restore all items so widths can be measured
-		for (let i = 0; i < items.length; i++) {
+		for (let i = 0; i < barItems.length; i++) {
 			if (nodes[i]) nodes[i].style.display = "";
 		}
 
@@ -42,32 +93,32 @@
 		const needMenu = fullWidth > visibleWidth;
 
 		if (needMenu) {
-			if (overflow === "collapse") return collapseGroups(visibleWidth);
+			if (overflow === "collapse") return collapseGroups();
 
 			// pinned items always stay visible
 			let pinnedWidth = 0;
-			for (let i = 0; i < items.length; i++) {
-				if (items[i].pinned) pinnedWidth += nodes[i].clientWidth;
+			for (let i = 0; i < barItems.length; i++) {
+				if (barItems[i].pinned) pinnedWidth += nodes[i].clientWidth;
 			}
 
 			let sum = 0;
-			for (let i = 0; i < items.length; i++) {
-				if (items[i].pinned) continue;
+			for (let i = 0; i < barItems.length; i++) {
+				if (barItems[i].pinned) continue;
 				sum += nodes[i].clientWidth;
-				if (items[i].comp == "separator") sum += 8;
+				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 < items.length; j++) {
-						if (items[j].pinned) continue;
-						menuItems.push(items[j]);
+					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 &&
-						items[i - 1].comp == "separator" &&
-						!items[i - 1].pinned
+						barItems[i - 1].comp == "separator" &&
+						!barItems[i - 1].pinned
 					) {
 						nodes[i - 1].style.display = "none";
 					}
@@ -83,82 +134,24 @@
 		}
 	}
 
-	function getTotalWidth() {
-		const nodes = div.children;
-		let sum = 0;
-		for (let i = 0; i < items.length; i++) {
-			if (items[i].comp != "spacer") {
-				sum += nodes[i]?.clientWidth || 0;
-				if (items[i].comp == "separator") sum += 8;
-			}
-		}
-		return sum;
-	}
-
-	function collapseGroups() {
-		for (let i = items.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;
-				// check after dom update, maybe we need to close more
-				tick().then(processOverflow);
-
-				// items are not deep reactive, so we need to trigger the update
-				items = [...items];
-				return;
-			}
-		}
-	}
-
-	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) {
-				// check if group can fit in free space
-				if (
-					items[i].$width - div.children[i].offsetWidth <
-					freeSpace + 10
-				) {
-					items[i].collapsed = false;
-					// 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;
-	}
-
 	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-column={vertical}
 	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}
@@ -194,5 +187,9 @@
 	}
 	.wx-column {
 		flex-flow: column;
+		width: auto;
+	}
+	.wx-column :global(.wx-tb-element) {
+		width: 100%;
 	}
 </style>

package/src/helpers.js

@@ -1,7 +1,42 @@
+import { uid } from "@svar-ui/lib-dom";
+
 const handlers = {};
-export function getItemHandler(type) {
-	return handlers[type] || type;
+export function getItemHandler(type, config = null) {
+	// try to get the handler for the config, fallback to the type
+	// so we need not register all button types for alternative modes
+	const c =
+		typeof type === "string"
+			? handlers[getID(type, config)] || handlers[type]
+			: type;
+	return c || handlers["label"];
 }
-export function registerToolbarItem(type, handler) {
-	handlers[type] = handler;
+export function registerToolbarItem(type, handler, config = null) {
+	handlers[getID(type, config)] = 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;
+}
+
+function getID(type, config = null) {
+	return `${type}${config?.menu ? ":menu" : ""}`;
 }

package/src/index.js

@@ -1,18 +1,20 @@
+import { Button } from "@svar-ui/svelte-core";
 import Toolbar from "./components/Toolbar.svelte";
 import { registerToolbarItem } from "./helpers.js";
 
 import Separator from "./buttons/Separator.svelte";
 import Spacer from "./buttons/Spacer.svelte";
-import Button from "./buttons/Button.svelte";
+import ButtonList from "./buttons/ButtonList.svelte";
 import Label from "./buttons/Label.svelte";
 import Icon from "./buttons/Icon.svelte";
 import Item from "./buttons/Item.svelte";
 
 registerToolbarItem("button", Button);
+registerToolbarItem("button", Icon, { menu: true });
 registerToolbarItem("separator", Separator);
 registerToolbarItem("spacer", Spacer);
 registerToolbarItem("label", Label);
 registerToolbarItem("item", Item);
 registerToolbarItem("icon", Icon);
 
-export { Toolbar, registerToolbarItem };
+export { Toolbar, ButtonList, registerToolbarItem };

package/types/index.d.ts

@@ -5,9 +5,13 @@ 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;

package/whatsnew.md

@@ -1,3 +1,20 @@
+## 2.6.1
+
+### Updates
+
+-   Impossible to render an item differently in the `menu` mode
+-   Option based items are not usable in the `menu` mode
+
+## 2.6.0
+
+### New features
+
+-   Tooltip for toolbar items
+
+### Fixes
+
+-   Duplicate separators are auto removed
+
 ## 2.5.3
 
 ### Fixes

package/src/buttons/Button.svelte

@@ -1,29 +0,0 @@
-<script>
-	import { Button } from "@svar-ui/svelte-core";
-
-	let { icon, text = "", css, type, disabled, menu, onclick } = $props();
-</script>
-
-{#if menu}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="wx-item" {onclick}>
-		<i class="{icon || 'wxi-empty'} {css || ''}"></i>
-		{text}
-	</div>
-{:else}
-	<Button {icon} {type} {css} {text} {disabled} {onclick} />
-{/if}
-
-<style>
-	i {
-		margin-right: 8px;
-		font-size: var(--wx-button-icon-size);
-		color: var(--wx-icon-color);
-	}
-	.wx-item {
-		cursor: pointer;
-		white-space: nowrap;
-		line-height: 26px;
-	}
-</style>