@svar-ui/svelte-toolbar 2.2.1

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 XB Software Sp. z o.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@svar-ui/svelte-toolbar",
+	"version": "2.2.1",
+	"description": "Svelte toolbar component. Lightweight, customizable, easy-to-use.",
+	"productTag": "toolbar",
+	"productTrial": false,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"build:dist": "vite build --mode dist",
+		"build:tests": "vite build --mode test",
+		"lint": "yarn eslint ./demos ./src",
+		"start": "vite --open",
+		"start:tests": "vite --open=/tests/ --host 0.0.0.0  --port 5100 --mode test",
+		"test": "true",
+		"test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
+	},
+	"svelte": "src/index.js",
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/toolbar.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/core/",
+	"dependencies": {
+		"@svar-ui/svelte-core": "2.2.1",
+		"@svar-ui/lib-dom": "0.9.2"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	],
+	"keywords": [
+		"svelte",
+		"svelte toolbar",
+		"toolbar",
+		"toolbar component",
+		"buttons panel",
+		"svar widgets"
+	]
+}

package/readme.md

@@ -0,0 +1,67 @@
+<div align="center">
+	
+# SVAR Svelte Toolbar
+
+[![npm](https://img.shields.io/npm/v/wx-svelte-toolbar.svg)](https://www.npmjs.com/package/wx-svelte-toolbar)
+[![License](https://img.shields.io/github/license/svar-widgets/toolbar)](https://github.com/svar-widgets/toolbar/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-toolbar.svg)](https://www.npmjs.com/package/wx-svelte-toolbar)
+
+</div>
+
+<div align="center">
+
+[Documentation](https://docs.svar.dev/svelte/core/toolbar/) • [Demos](https://docs.svar.dev/svelte/core/samples-toolbar/#/base/willow)
+
+</div>
+
+SVAR Toolbar is a Svelte UI component for building flexible button panels, from simple button sets to complex structures with numerous buttons and select boxes. It provides an easy way to organize and display multiple toolbar items, with support for multiline layouts and collapsible item groups that can be shown on demand.
+
+### How to Use
+
+To use the widget, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Toolbar } from "wx-svelte-toolbar";
+
+	function onClick(item) {
+		message = "Button '" + item.id + "' clicked";
+	}
+
+	let items = [
+		{ id: "label", text: "Toolbar with icon buttons" },
+		{
+			id: "search",
+			comp: "button",
+			icon: "wxi-search",
+			handler: onClick,
+		},
+	];
+</script>
+
+<Toolbar {items} />
+```
+
+### How to Modify
+
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
+2. Start the project in development mode with `yarn start`
+
+### Run Tests
+
+To run the test:
+
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```
+
+### Need help?
+
+Join our [community forum](https://forum.svar.dev/) to get help or post feature requests.

package/src/buttons/Button.svelte

@@ -0,0 +1,29 @@
+<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>

package/src/buttons/Icon.svelte

@@ -0,0 +1,33 @@
+<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}>
+		{#if icon}<i class="{icon} {css}"></i>{/if}
+		{text}
+	</div>
+{:else}
+	<Button {icon} {type} {css} title={text} {disabled} {onclick} />
+{/if}
+
+<style>
+	i {
+		margin-right: 8px;
+		font-size: var(--wx-icon-size);
+		color: var(--wx-color-font);
+	}
+	.wx-item {
+		cursor: pointer;
+		white-space: nowrap;
+		line-height: 36px;
+		height: 36px;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+	}
+</style>

package/src/buttons/Item.svelte

@@ -0,0 +1,40 @@
+<script>
+	let { id = "", text = "", css = "", icon = "", onclick } = $props();
+
+	function handleClick() {
+		onclick && onclick({ id });
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="wx-label {css}" onclick={handleClick}>
+	{#if icon}
+		<i class={icon}></i>
+	{/if}
+	{text}
+</div>
+
+<style>
+	.wx-label {
+		width: 100%;
+		white-space: nowrap;
+		color: var(--wx-input-font-color);
+		padding: var(--wx-input-padding);
+		overflow: hidden;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+	}
+	i {
+		margin-right: 8px;
+		font-size: var(--wx-icon-size);
+	}
+
+	.wx-label:hover {
+		background-image: linear-gradient(
+			rgba(0, 0, 0, 0.1) 0%,
+			rgba(0, 0, 0, 0.1) 100%
+		);
+	}
+</style>

package/src/buttons/Label.svelte

@@ -0,0 +1,21 @@
+<script>
+	const { text, value, children } = $props();
+</script>
+
+{#if children}
+	<div class="wx-label">
+		{@render children()}
+	</div>
+{:else}
+	<div class="wx-label">{value || text}</div>
+{/if}
+
+<style>
+	.wx-label {
+		width: auto;
+		font-weight: var(--wx-label-font-weight);
+		color: var(--wx-input-font-color);
+		padding: var(--wx-input-padding);
+		overflow: hidden;
+	}
+</style>

package/src/buttons/Separator.svelte

@@ -0,0 +1,24 @@
+<script>
+	let { menu = false } = $props();
+</script>
+
+<div class="wx-separator{menu ? '-menu' : ''}">&nbsp;</div>
+
+<style>
+	.wx-separator {
+		width: 1px;
+		min-height: 100%;
+		border-left: 1px solid rgba(0, 0, 0, 0.07);
+		border-right: var(--wx-border);
+
+		margin: 6px 4px;
+		box-sizing: border-box;
+	}
+	:global(.wx-column > .wx-tb-body) > .wx-separator,
+	.wx-separator-menu {
+		height: 1px;
+		width: 100%;
+		border-top: var(--wx-border-medium);
+		align-self: center;
+	}
+</style>

package/src/buttons/Spacer.svelte

@@ -0,0 +1,7 @@
+<div class="wx-spacer"></div>
+
+<style>
+	.wx-spacer {
+		flex-grow: 1;
+	}
+</style>

package/src/components/BarComponent.svelte

@@ -0,0 +1,85 @@
+<script>
+	import { getItemHandler } from "../helpers";
+	import Separator from "../buttons/Separator.svelte";
+	import Spacer from "../buttons/Spacer.svelte";
+
+	let { item = {}, menu = false, values, onclick, onchange } = $props();
+
+	let itemComponent = $derived(getItemHandler(item.comp || "label"));
+
+	function onClick() {
+		if (item.handler) item.handler(item);
+		onclick && onclick({ item });
+	}
+
+	let value = $derived(item.key ? values[item.key] : undefined);
+	function detectChange({ value }) {
+		if (item.handler) item.handler(item, value);
+		onchange && onchange({ value, item });
+	}
+
+	const text = $derived(menu ? item.menuText || item.text : item.text);
+</script>
+
+{#if item.comp == "spacer"}
+	<Spacer {menu} />
+{:else if item.comp == "separator"}
+	<Separator {menu} />
+{:else}
+	{@const SvelteComponent = itemComponent}
+	<div
+		class="wx-tb-element {item.css || ''}"
+		class:wx-spacer={item.spacer}
+		class:wx-menu={menu}
+		data-id={item.id}
+	>
+		<SvelteComponent
+			{value}
+			onchange={detectChange}
+			onclick={onClick}
+			{menu}
+			{...item}
+			{text}
+		/>
+	</div>
+{/if}
+
+<style>
+	.wx-spacer {
+		flex: 1;
+	}
+	.wx-tb-element {
+		padding: 4px;
+		flex-shrink: 0;
+		align-self: center;
+		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);
+	}
+</style>

package/src/components/Group.svelte

@@ -0,0 +1,117 @@
+<script>
+	import Group from "./Group.svelte";
+
+	import BarComponent from "./BarComponent.svelte";
+	import { Dropdown } from "@svar-ui/svelte-core";
+
+	let { item, values = null, menu = false, onchange, onclick } = $props();
+
+	let collapsedState = $state(true);
+
+	const onClick = ev => {
+		oncancel();
+		onclick && onclick(ev);
+	};
+
+	const show = () => (collapsedState = false);
+	const oncancel = () => (collapsedState = true);
+</script>
+
+<div
+	class="wx-tb-group {item.css || ''}"
+	class:wx-column={item.layout == "column"}
+	class:wx-group-collapsed={item.collapsed && !menu}
+>
+	{#if item.collapsed && !menu}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="wx-collapsed" onclick={show}>
+			{#if item.icon}<i class="icon {item.icon}"></i>{/if}
+			{#if item.text}
+				<div class="wx-label-text">{item.text}</div>
+			{/if}
+			{#if item.text && !item.icon}
+				<i class="wx-label-arrow wxi-angle-down"></i>
+			{/if}
+		</div>
+		{#if !collapsedState}
+			<Dropdown width="" {oncancel}>
+				<div class="wx-drop-group">
+					<Group
+						item={{ ...item, text: "", collapsed: false }}
+						{values}
+						{menu}
+						{onchange}
+						onclick={onClick}
+					/>
+				</div>
+			</Dropdown>
+		{/if}
+	{:else}
+		<div class="wx-tb-body">
+			{#each item.items as sub}
+				{#if sub.items}
+					<Group item={sub} {values} onclick={onClick} {onchange} />
+				{:else}
+					<BarComponent
+						item={sub}
+						{values}
+						onclick={onClick}
+						{onchange}
+					/>
+				{/if}
+			{/each}
+		</div>
+		{#if item.text}
+			<div class="wx-label">{item.text}</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.wx-tb-group {
+		position: relative;
+		display: flex;
+		flex-flow: column;
+	}
+	.wx-group-collapsed {
+		flex-flow: row;
+	}
+	.wx-collapsed {
+		display: flex;
+		padding: 10px;
+		flex-flow: row;
+		cursor: pointer;
+	}
+	.wx-group-collapsed .wx-collapsed {
+		align-items: center;
+	}
+
+	.wx-label {
+		font-weight: var(--wx-label-font-weight);
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font);
+		text-align: center;
+		display: flex;
+		padding: 4px 2px 4px 12px;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+	.wx-tb-group :global(.wx-dropdown) {
+		overflow: inherit;
+	}
+	.wx-column {
+		align-items: stretch;
+	}
+	.wx-column :global(.wx-tb-element) {
+		align-self: stretch;
+	}
+	.wx-tb-body {
+		height: 100%;
+		display: flex;
+	}
+	.wx-column > .wx-tb-body {
+		flex-flow: column;
+	}
+</style>

package/src/components/Menu.svelte

@@ -0,0 +1,66 @@
+<script>
+	import BarComponent from "./BarComponent.svelte";
+	import Group from "./Group.svelte";
+	import { Dropdown, Button } from "@svar-ui/svelte-core";
+
+	let { items = [], css, values, width, onclick, onchange } = $props();
+
+	let popup = $state();
+	let div = $state();
+
+	function oncancel() {
+		popup = null;
+	}
+	function showMenu() {
+		popup = true;
+	}
+	function menuClick(ev) {
+		oncancel();
+		onclick && onclick(ev);
+	}
+</script>
+
+<div class="wx-menu {css || ''}" bind:this={div} data-id="$menu">
+	<Button icon="wxi-dots-h" onclick={showMenu} />
+	{#if popup}
+		<Dropdown width="{width}px" {oncancel}>
+			<div class="wx-drop-menu">
+				{#each items as item}
+					{#if item.items}
+						<Group
+							{item}
+							{values}
+							menu={true}
+							onclick={menuClick}
+							{onchange}
+						/>
+					{:else}
+						<BarComponent
+							{item}
+							{values}
+							menu={true}
+							onclick={menuClick}
+							{onchange}
+						/>
+					{/if}
+				{/each}
+			</div>
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-menu {
+		position: absolute;
+		overflow: visible;
+		padding: 4px;
+		right: 4px;
+	}
+
+	.wx-menu :global(.wx-dropdown) {
+		overflow: visible;
+	}
+	.wx-drop-menu {
+		padding: 4px;
+	}
+</style>

package/src/components/Toolbar.svelte

@@ -0,0 +1,185 @@
+<script>
+	import Menu from "./Menu.svelte";
+	import Group from "./Group.svelte";
+	import BarComponent from "./BarComponent.svelte";
+
+	import { uid } from "@svar-ui/lib-dom";
+	import { onMount, tick } from "svelte";
+
+	let {
+		items = $bindable([]),
+		menuCss = "",
+		css,
+		values = $bindable(null),
+		overflow = "menu",
+		onclick,
+		onchange,
+	} = $props();
+
+	function handleChange(ev) {
+		if (values) {
+			values[ev.item.key] = ev.value;
+			values = values;
+		}
+		onchange && onchange(ev);
+	}
+
+	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 = [];
+			}
+		}
+	}
+
+	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;
+				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));
+		resizeObserver.observe(div);
+
+		return () => {
+			if (resizeObserver) resizeObserver.unobserve(div);
+		};
+	});
+
+	const visibleItems = $derived(normalize(items));
+</script>
+
+<div
+	class="wx-toolbar {css}"
+	class:wx-wrap={overflow === "wrap"}
+	bind:this={div}
+>
+	{#each visibleItems as item}
+		{#if item.items}
+			<Group {item} {values} {onclick} onchange={handleChange} />
+		{:else}
+			<BarComponent {item} {values} {onclick} onchange={handleChange} />
+		{/if}
+	{/each}
+	{#if menuItems.length}
+		<Menu
+			items={menuItems}
+			css={menuCss}
+			{values}
+			{onclick}
+			onchange={handleChange}
+		/>
+	{/if}
+</div>
+
+<style>
+	.wx-toolbar {
+		width: 100%;
+		flex-wrap: nowrap;
+		display: flex;
+		align-items: stretch;
+		padding: 4px;
+		position: relative;
+	}
+	.wx-toolbar.wx-wrap {
+		flex-wrap: wrap;
+	}
+</style>

package/src/helpers.js

@@ -0,0 +1,7 @@
+const handlers = {};
+export function getItemHandler(type) {
+	return handlers[type] || type;
+}
+export function registerToolbarItem(type, handler) {
+	handlers[type] = handler;
+}

package/src/index.js

@@ -0,0 +1,18 @@
+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 Label from "./buttons/Label.svelte";
+import Icon from "./buttons/Icon.svelte";
+import Item from "./buttons/Item.svelte";
+
+registerToolbarItem("button", Button);
+registerToolbarItem("separator", Separator);
+registerToolbarItem("spacer", Spacer);
+registerToolbarItem("label", Label);
+registerToolbarItem("item", Item);
+registerToolbarItem("icon", Icon);
+
+export { Toolbar, registerToolbarItem };

package/whatsnew.md

@@ -0,0 +1,67 @@
+## 2.2.1
+
+### Fixes
+
+-   Using in Salesforce environment
+
+## 2.2.0
+
+-   Using core@2.2.0
+
+## 2.1.0
+
+-   Using core@2.1.0
+
+## 2.0.1
+
+### New features
+
+-   Svelte 5 support
+
+## 1.3.0
+
+-   Using core@1.3.0
+
+## 1.2.3
+
+### Fixes
+
+-   Regression in overflow menu closing
+-   Regression in dropdown rendering
+
+## 1.2.1
+
+-   Using core@1.2.0
+
+## 1.2.1
+
+### New features
+
+-   Labels can be bound to data
+
+## 1.2.0
+
+### New features
+
+-   Extra demo for the HeaderMenu scenario
+-   Ability to use `spacer` on toolbar items
+-   Ability to use `item` subtype for the drop-down menus
+
+### Fixes
+
+-   Separator rendering in drop-down menus
+-   Names of css classes corrected
+
+## 1.1.2
+
+### Updates
+
+-   Inner css classes renamed, "wx" prefix added
+
+## 1.1.1
+
+-   Migrated to vite based toolchain
+
+### 1.1.0
+
+-   Initial version