@svar-ui/svelte-toolbar 2.6.0 → 2.6.2

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.0",
-	"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.0",
-		"@svar-ui/lib-dom": "0.13.1"
-	},
-	"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,110 +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
+
 ## 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/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>

package/src/components/BarComponent.svelte

@@ -1,86 +0,0 @@
-<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 || "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 />
-{: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={setID(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/Toolbar.svelte

@@ -1,190 +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));
-
-	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;
-
-		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={layout == "column"}
-	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;
-	}
-</style>

package/src/helpers.js

@@ -1,32 +0,0 @@
-import { uid } from "@svar-ui/lib-dom";
-
-const handlers = {};
-export function getItemHandler(type) {
-	return handlers[type] || 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;
-}