@svar-ui/svelte-toolbar 2.6.0 → 2.6.2

package/dist/buttons/ButtonList.svelte

@@ -0,0 +1,35 @@
+<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" : undefined}
+			{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/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,15 +1,12 @@
-<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" {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 +15,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/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/dist/components/BarComponent.svelte

@@ -0,0 +1,69 @@
+<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"}
+	<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 as TID)}
+	>
+		<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 {
+		line-height: 36px;
+		padding: 2px 8px;
+		background-color: var(--wx-background);
+	}
+	.wx-menu :global(button) {
+		width: 100%;
+	}
+	.wx-menu :global(.wx-tb-element) {
+		align-self: stretch;
+	}
+	.wx-menu.wx-tb-element:hover {
+		background: var(--wx-background-alt);
+	}
+</style>

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,18 +1,17 @@
+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 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 };