@svar-ui/svelte-toolbar 2.6.0 → 2.6.1

package/package.json

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

@@ -8,8 +8,8 @@
 {#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}
@@ -18,10 +18,12 @@
 
 <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/Toolbar.svelte

@@ -29,6 +29,7 @@
 	let menuItems = $state([]);
 
 	const barItems = $derived(normalizeToolbarItems(items));
+	const vertical = $derived(layout === "column");
 
 	function getTotalWidth() {
 		const nodes = div.children;
@@ -79,7 +80,7 @@
 	}
 
 	function processOverflow() {
-		if (overflow === "wrap") return;
+		if (overflow === "wrap" || vertical) return;
 
 		const nodes = div.children;
 		// restore all items so widths can be measured
@@ -146,7 +147,7 @@
 <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}
 >
@@ -186,5 +187,9 @@
 	}
 	.wx-column {
 		flex-flow: column;
+		width: auto;
+	}
+	.wx-column :global(.wx-tb-element) {
+		width: 100%;
 	}
 </style>

package/src/helpers.js

@@ -1,11 +1,17 @@
 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
@@ -30,3 +36,7 @@ export function collapseSeparators(items) {
 	}
 	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/whatsnew.md

@@ -1,3 +1,10 @@
+## 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

package/src/buttons/Button.svelte

@@ -1,39 +0,0 @@
-<script>
-	import { Button } from "@svar-ui/svelte-core";
-
-	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}>
-		<i class="{icon || 'wxi-empty'} {css || ''}"></i>
-		{text}
-	</div>
-{:else}
-	<Button {icon} {type} {css} {title} {text} {tooltip} {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>