@svar-ui/svelte-toolbar 2.6.1 → 2.6.2

package/{src → dist}/buttons/ButtonList.svelte

@@ -1,18 +1,15 @@
-<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 lang="ts">import { Button } from "@svar-ui/svelte-core";
+let { css = "", disabled, options = [], onchange, value = $bindable() } = $props();
+function onClickHandler(id) {
+	value = id;
+	onchange?.({ value: id });
+}
 </script>
 
 <div class="wx-button-list {css}">
 	{#each options as option}
 		<Button
-			type={value === option.id ? "primary" : ""}
+			type={value === option.id ? "primary" : undefined}
 			{disabled}
 			text={option.label}
 			onclick={() => onClickHandler(option.id)}

package/dist/buttons/ButtonList.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { IButtonListOption, TID } from "../types";
+type Props = {
+    options?: IButtonListOption[];
+    value?: TID;
+    css?: string;
+    disabled?: boolean;
+    onchange?: (ev: {
+        value: TID;
+    }) => void;
+};
+declare const ButtonList: import("svelte").Component<Props, {}, "value">;
+type ButtonList = ReturnType<typeof ButtonList>;
+export default ButtonList;

package/{src → dist}/buttons/Icon.svelte

@@ -1,14 +1,11 @@
-<script>
-	import { Button } from "@svar-ui/svelte-core";
-
-	let { icon, title, text, tooltip, css, type, disabled, menu, onclick } =
-		$props();
+<script lang="ts">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" class:wx-text-icon={text} {onclick}>
+	<div class="wx-item" class:wx-text-icon={!!text} {onclick}>
 		<i class="{icon || 'wxi-empty'} {css || ''}"></i>
 		{text}
 	</div>

package/dist/buttons/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from "svelte";
+import { Button } from "@svar-ui/svelte-core";
+type Props = {
+    icon?: string;
+    title?: string;
+    text?: string;
+    tooltip?: string;
+    css?: string;
+    type?: ComponentProps<typeof Button>["type"];
+    disabled?: boolean;
+    menu?: boolean;
+    onclick?: (ev: MouseEvent) => void;
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/{src → dist}/buttons/Item.svelte

@@ -1,9 +1,8 @@
-<script>
-	let { id = "", text = "", css = "", icon = "", onclick } = $props();
-
-	function handleClick() {
-		onclick && onclick({ id });
-	}
+<script lang="ts">let { id = "", text = "", css = "", icon = "", onclick } = $props();
+function handleClick() {
+	onclick?.({ id });
+}
+export {};
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/buttons/Item.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TID } from "../types";
+type Props = {
+    id?: TID;
+    text?: string;
+    css?: string;
+    icon?: string;
+    onclick?: (ev: {
+        id: TID;
+    }) => void;
+};
+declare const Item: import("svelte").Component<Props, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/{src → dist}/buttons/Label.svelte

@@ -1,5 +1,5 @@
-<script>
-	const { text, value, children } = $props();
+<script lang="ts">const { text, value, children } = $props();
+export {};
 </script>
 
 {#if children}

package/dist/buttons/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type Props = {
+    text?: string;
+    value?: any;
+    children?: Snippet;
+};
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/{src → dist}/buttons/Separator.svelte

@@ -1,5 +1,4 @@
-<script>
-	let { menu = false } = $props();
+<script lang="ts">let { menu = false } = $props();
 </script>
 
 <div class="wx-separator{menu ? '-menu' : ''}">&nbsp;</div>

package/dist/buttons/Separator.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    menu?: boolean;
+};
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/buttons/Spacer.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Spacer;
+type Spacer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/{src → dist}/components/BarComponent.svelte

@@ -1,24 +1,22 @@
-<script>
-	import { setID } from "@svar-ui/lib-dom";
-	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, { menu }));
-
-	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 lang="ts">import { setID } from "@svar-ui/lib-dom";
+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, { menu }));
+function onClick() {
+	if (item.handler) item.handler(item);
+	onclick?.({ item });
+}
+let value = $derived(item.key ? values?.[item.key] : undefined);
+function detectChange({ value }) {
+	if (item.handler) item.handler(item, value);
+	onchange?.({
+		value,
+		item
+	});
+}
+const text = $derived(menu ? item.menuText || item.text : item.text);
 </script>
 
 {#if item.comp == "spacer"}
@@ -31,7 +29,7 @@
 		class="wx-tb-element {item.css || ''}"
 		class:wx-spacer={item.spacer}
 		class:wx-menu={menu}
-		data-id={setID(item.id)}
+		data-id={setID(item.id as TID)}
 	>
 		<SvelteComponent
 			{value}

package/dist/components/BarComponent.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IToolbarChangeEvent, IToolbarClickEvent, IToolbarItem, TToolbarValues } from "../types";
+type Props = {
+    item?: IToolbarItem;
+    menu?: boolean;
+    values?: TToolbarValues | null;
+    onclick?: (ev: IToolbarClickEvent) => void;
+    onchange?: (ev: IToolbarChangeEvent) => void;
+};
+declare const BarComponent: import("svelte").Component<Props, {}, "">;
+type BarComponent = ReturnType<typeof BarComponent>;
+export default BarComponent;

package/{src → dist}/components/Group.svelte

@@ -1,21 +1,15 @@
-<script>
-	import Group from "./Group.svelte";
-
-	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();
-
-	let collapsedState = $state(true);
-
-	const onClick = ev => {
-		oncancel();
-		onclick && onclick(ev);
-	};
-
-	const show = () => (collapsedState = false);
-	const oncancel = () => (collapsedState = true);
+<script lang="ts">import Group from "./Group.svelte";
+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();
+let collapsedState = $state(true);
+const onClick = (ev) => {
+	oncancel();
+	onclick?.(ev);
+};
+const show = () => collapsedState = false;
+const oncancel = () => collapsedState = true;
 </script>
 
 <div

package/dist/components/Group.svelte.d.ts

@@ -0,0 +1,12 @@
+import Group from "./Group.svelte";
+import type { IToolbarChangeEvent, IToolbarClickEvent, IToolbarItem, TToolbarValues } from "../types";
+type Props = {
+    item: IToolbarItem;
+    values?: TToolbarValues | null;
+    menu?: boolean;
+    onchange?: (ev: IToolbarChangeEvent) => void;
+    onclick?: (ev: IToolbarClickEvent) => void;
+};
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/{src → dist}/components/Menu.svelte

@@ -1,26 +1,21 @@
-<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 lang="ts">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(false);
+function oncancel() {
+	popup = false;
+}
+function showMenu() {
+	popup = true;
+}
+function menuClick(ev) {
+	oncancel();
+	onclick?.(ev);
+}
 </script>
 
-<div class="wx-menu {css || ''}" bind:this={div} data-id="$menu">
+<div class="wx-menu {css || ''}" data-id="$menu">
 	<Button icon="wxi-dots-h" onclick={showMenu} />
 	{#if popup}
 		<Dropdown width="{width}px" {oncancel}>

package/dist/components/Menu.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { IToolbarChangeEvent, IToolbarClickEvent, IToolbarItem, TToolbarValues } from "../types";
+type Props = {
+    items?: IToolbarItem[];
+    css?: string;
+    values?: TToolbarValues | null;
+    width?: number;
+    onclick?: (ev: IToolbarClickEvent) => void;
+    onchange?: (ev: IToolbarChangeEvent) => void;
+};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/Toolbar.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">import Menu from "./Menu.svelte";
+import Group from "./Group.svelte";
+import BarComponent from "./BarComponent.svelte";
+import { onMount, tick } from "svelte";
+import { normalizeToolbarItems } from "../helpers";
+let { items = $bindable([]), menuCss = "", css = "", values = $bindable(null), overflow = "menu", layout = "row", onclick, onchange } = $props();
+function handleChange(ev) {
+	if (values && ev.item.key) {
+		values[ev.item.key] = ev.value;
+	}
+	onchange?.(ev);
+}
+let div;
+let menuItems = $state([]);
+const getNodes = () => div.children;
+const barItems = $derived(normalizeToolbarItems(items));
+const vertical = $derived(layout === "column");
+function getTotalWidth() {
+	const nodes = getNodes();
+	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 = getNodes()[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 - getNodes()[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" || vertical) return;
+	const nodes = getNodes();
+	// 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());
+	resizeObserver.observe(div);
+	return () => {
+		resizeObserver.unobserve(div);
+	};
+});
+</script>
+
+<div
+	class="wx-toolbar {css}"
+	class:wx-wrap={overflow === "wrap"}
+	class:wx-column={vertical}
+	class:wx-has-menu={menuItems.length > 0}
+	bind:this={div}
+>
+	{#each barItems 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;
+		min-height: 48px;
+	}
+	.wx-toolbar.wx-has-menu {
+		padding-right: 48px;
+	}
+	.wx-toolbar.wx-wrap {
+		flex-wrap: wrap;
+	}
+	.wx-column {
+		flex-flow: column;
+		width: auto;
+	}
+	.wx-column > :global(.wx-tb-element) {
+		width: 100%;
+	}
+</style>

package/dist/components/Toolbar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { IToolbarChangeEvent, IToolbarClickEvent, IToolbarItem, TToolbarValues } from "../types";
+type Props = {
+    items?: IToolbarItem[];
+    menuCss?: string;
+    css?: string;
+    values?: TToolbarValues | null;
+    overflow?: "collapse" | "wrap" | "menu";
+    layout?: "row" | "column";
+    onclick?: (ev: IToolbarClickEvent) => void;
+    onchange?: (ev: IToolbarChangeEvent) => void;
+};
+declare const Toolbar: import("svelte").Component<Props, {}, "items" | "values">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+
+declare module "*.svelte" {
+	import type { Component } from "svelte";
+	const component: Component<any>;
+	export default component;
+}

package/dist/helpers.d.ts

@@ -0,0 +1,6 @@
+import type { Component } from "svelte";
+import type { IItemConfig, IToolbarItem } from "./types";
+export declare function getItemHandler(type: string | Component<any> | undefined, config?: IItemConfig | null): Component<any>;
+export declare function registerToolbarItem(type: string, handler: Component<any>, config?: IItemConfig | null): void;
+export declare function normalizeToolbarItems(items?: IToolbarItem[]): IToolbarItem[];
+export declare function collapseSeparators(items?: IToolbarItem[]): IToolbarItem[];

package/dist/helpers.js

@@ -0,0 +1,41 @@
+import { uid } from "@svar-ui/lib-dom";
+const handlers = {};
+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, 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/dist/index.d.ts

@@ -0,0 +1,5 @@
+import Toolbar from "./components/Toolbar.svelte";
+import { registerToolbarItem } from "./helpers";
+import ButtonList from "./buttons/ButtonList.svelte";
+export { Toolbar, ButtonList, registerToolbarItem };
+export type { TID, IToolbarItem, TToolbarValues, IToolbarClickEvent, IToolbarChangeEvent, IButtonListOption, IItemConfig, } from "./types";

package/{src → dist}/index.js

@@ -1,14 +1,12 @@
 import { Button } from "@svar-ui/svelte-core";
 import Toolbar from "./components/Toolbar.svelte";
-import { registerToolbarItem } from "./helpers.js";
-
+import { registerToolbarItem } from "./helpers";
 import Separator from "./buttons/Separator.svelte";
 import Spacer from "./buttons/Spacer.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);
@@ -16,5 +14,4 @@ registerToolbarItem("spacer", Spacer);
 registerToolbarItem("label", Label);
 registerToolbarItem("item", Item);
 registerToolbarItem("icon", Icon);
-
 export { Toolbar, ButtonList, registerToolbarItem };

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+import type { Component } from "svelte";
+export type TID = string | number;
+export interface IToolbarItem {
+    id?: TID;
+    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;
+}
+export type TToolbarValues = {
+    [key: string]: any;
+};
+export interface IToolbarClickEvent {
+    item: IToolbarItem;
+}
+export interface IToolbarChangeEvent {
+    value: any;
+    item: IToolbarItem;
+}
+export interface IButtonListOption {
+    id: TID;
+    label: string;
+}
+export interface IItemConfig {
+    menu?: boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,54 +1,57 @@
 {
-	"name": "@svar-ui/svelte-toolbar",
-	"version": "2.6.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",
-			"types": "./types/index.d.ts"
-		},
-		"./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.6.1",
-		"@svar-ui/lib-dom": "0.14.0"
-	},
-	"files": [
-		"src",
-		"types",
-		"readme.md",
-		"whatsnew.md",
-		"license.txt"
-	],
-	"keywords": [
-		"svelte",
-		"svelte toolbar",
-		"toolbar",
-		"toolbar component",
-		"buttons panel",
-		"svar widgets"
-	]
-}
+  "name": "@svar-ui/svelte-toolbar",
+  "version": "2.6.2",
+  "description": "Svelte toolbar component. Lightweight, customizable, easy-to-use.",
+  "keywords": [
+    "buttons panel",
+    "svar widgets",
+    "svelte",
+    "svelte toolbar",
+    "toolbar",
+    "toolbar component"
+  ],
+  "homepage": "https://svar.dev/svelte/core/",
+  "bugs": {
+    "url": "https://forum.svar.dev"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/svar-widgets/toolbar.git"
+  },
+  "files": [
+    "dist",
+    "readme.md",
+    "whatsnew.md",
+    "license.txt"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@svar-ui/lib-dom": "0.14.2",
+    "@svar-ui/svelte-core": "2.6.2"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "5.56.9",
+    "svelte-check": "^4.4.6"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "productTag": "toolbar",
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "svelte-package -i ./src",
+    "dev": "svelte-package -i ./src --watch"
+  }
+}

package/readme.md

@@ -1,5 +1,5 @@
 <div align="center">
-	
+
 # SVAR Svelte Toolbar
 
 [![npm](https://img.shields.io/npm/v/@svar-ui/svelte-toolbar.svg)](https://www.npmjs.com/package/@svar-ui/svelte-toolbar)
@@ -46,21 +46,10 @@ To use the widget, simply import the package and include the component in your S
 
 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
-    ```
+1. Install [vite-plus](https://vite.plus) (`curl -fsSL https://vite.plus | bash` on Mac/Linux, `irm https://vite.plus/ps1 | iex` on Windows). The project uses `pnpm` workspaces under the hood, so plain `npm` will not work.
+2. Run `vp i` from the project root to install dependencies.
+3. Run `vp run build` to build all packages.
+4. Start the demo app in development mode with `vp run start`.
 
 ### Need help?
 

package/whatsnew.md

@@ -1,117 +1,129 @@
+## 2.6.2
+
+### Updates
+
+- Native TypeScript support with types generated from the component sources
+
+### Fixes
+
+- An item with key throws an error when the Toolbar has no values
+- Changing an item without key writes `values["undefined"]`
+- ButtonList without css gets an undefined CSS class
+
 ## 2.6.1
 
 ### Updates
 
--   Impossible to render an item differently in the `menu` mode
--   Option based items are not usable in the `menu` mode
+- 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
+- Tooltip for toolbar items
 
 ### Fixes
 
--   Duplicate separators are auto removed
+- 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
+- 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
+- Using Svelte Core v2.5.1
 
 ## 2.5.0
 
--   Using Svelte Core v2.5.0
+- Using Svelte Core v2.5.0
 
 ## 2.4.1
 
--   Using Svelte Core v2.4.1
+- Using Svelte Core v2.4.1
 
 ## 2.4.0
 
--   Using Svelte Core v2.4.0
+- Using Svelte Core v2.4.0
 
 ## 2.3.0
 
 ### New features
 
--   TypeScript definitions
+- TypeScript definitions
 
 ### Fixes
 
--   item `menuText` property is not applied
+- item `menuText` property is not applied
 
 ## 2.2.1
 
 ### Fixes
 
--   Using in Salesforce environment
+- Using in Salesforce environment
 
 ## 2.2.0
 
--   Using core@2.2.0
+- Using core@2.2.0
 
 ## 2.1.0
 
--   Using core@2.1.0
+- Using core@2.1.0
 
 ## 2.0.1
 
 ### New features
 
--   Svelte 5 support
+- Svelte 5 support
 
 ## 1.3.0
 
--   Using core@1.3.0
+- Using core@1.3.0
 
 ## 1.2.3
 
 ### Fixes
 
--   Regression in overflow menu closing
--   Regression in dropdown rendering
+- Regression in overflow menu closing
+- Regression in dropdown rendering
 
 ## 1.2.1
 
--   Using core@1.2.0
+- Using core@1.2.0
 
 ## 1.2.1
 
 ### New features
 
--   Labels can be bound to data
+- 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
+- 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
+- Separator rendering in drop-down menus
+- Names of css classes corrected
 
 ## 1.1.2
 
 ### Updates
 
--   Inner css classes renamed, "wx" prefix added
+- Inner css classes renamed, "wx" prefix added
 
 ## 1.1.1
 
--   Migrated to vite based toolchain
+- Migrated to vite based toolchain
 
 ### 1.1.0
 
--   Initial version
+- Initial version

package/src/components/Toolbar.svelte

@@ -1,195 +0,0 @@
-<script>
-	import Menu from "./Menu.svelte";
-	import Group from "./Group.svelte";
-	import BarComponent from "./BarComponent.svelte";
-
-	import { onMount, tick } from "svelte";
-	import { normalizeToolbarItems } from "../helpers";
-
-	let {
-		items = $bindable([]),
-		menuCss = "",
-		css = "",
-		values = $bindable(null),
-		overflow = "menu",
-		layout = "row",
-		onclick,
-		onchange,
-	} = $props();
-
-	function handleChange(ev) {
-		if (values) {
-			values[ev.item.key] = ev.value;
-			values = values;
-		}
-		onchange && onchange(ev);
-	}
-
-	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" || vertical) 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());
-		resizeObserver.observe(div);
-
-		return () => {
-			resizeObserver.unobserve(div);
-		};
-	});
-</script>
-
-<div
-	class="wx-toolbar {css}"
-	class:wx-wrap={overflow === "wrap"}
-	class:wx-column={vertical}
-	class:wx-has-menu={menuItems.length}
-	bind:this={div}
->
-	{#each barItems 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;
-		min-height: 48px;
-	}
-	.wx-toolbar.wx-has-menu {
-		padding-right: 48px;
-	}
-	.wx-toolbar.wx-wrap {
-		flex-wrap: wrap;
-	}
-	.wx-column {
-		flex-flow: column;
-		width: auto;
-	}
-	.wx-column :global(.wx-tb-element) {
-		width: 100%;
-	}
-</style>

package/src/helpers.js

@@ -1,42 +0,0 @@
-import { uid } from "@svar-ui/lib-dom";
-
-const handlers = {};
-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, 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/types/index.d.ts

@@ -1,37 +0,0 @@
-import type { Component } from "svelte";
-
-export interface IToolbarItem {
-	id?: string | number;
-	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;
-}
-
-export declare const Toolbar: Component<{
-	items?: IToolbarItem[];
-	menuCss?: string;
-	css?: string;
-	values?: { [key: string]: any };
-	overflow?: "collapse" | "wrap" | "menu";
-	onclick?: (ev: { item: IToolbarItem }) => void;
-	onchange?: (ev: { value: any; item: IToolbarItem }) => void;
-}>;
-
-export declare function registerToolbarItem(
-	type: string,
-	handler: Component<any>
-): void;