wx-svelte-menu 2.2.1 → 2.3.0

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 XB Software Sp. z o.o.
+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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-menu",
-	"version": "2.2.1",
+	"version": "2.3.0",
 	"description": "Svelte menu component for creating dropdown menus, context menus, or complex menu bars",
 	"productTag": "menu",
 	"productTrial": false,
@@ -18,7 +18,8 @@
 	"svelte": "src/index.js",
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"svelte": "./src/index.js",
+			"types": "./types/index.d.ts"
 		},
 		"./package.json": "./package.json"
 	},
@@ -32,11 +33,12 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-svelte-core": "2.2.1",
-		"wx-lib-dom": "0.9.1"
+		"@svar-ui/svelte-core": "2.3.1",
+		"@svar-ui/lib-dom": "0.9.2"
 	},
 	"files": [
 		"src",
+		"types",
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"

package/readme.md

@@ -2,9 +2,9 @@
 	
 # SVAR Svelte Menu
 
-[![npm](https://img.shields.io/npm/v/wx-svelte-menu.svg)](https://www.npmjs.com/package/wx-svelte-menu)
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menu)
 [![License](https://img.shields.io/github/license/svar-widgets/menu)](https://github.com/svar-widgets/menu/blob/main/license.txt)
-[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-menu.svg)](https://www.npmjs.com/package/wx-svelte-menu)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menuu)
 
 </div>
 
@@ -14,7 +14,6 @@
 
 </div>
 
-
 SVAR Menu is a ready to use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.
 
 ### How to Use
@@ -23,11 +22,10 @@ To use SVAR Svelte Menu, simply import the package and include the component in
 
 ```svelte
 <script>
-	import { Menu } from "wx-svelte-menu";
+	import { Menu } from "@svar-ui/svelte-menu";
 
-	function onClick(item) {
-		const action = ev.detail.action;
-		message = action ? `clicked on ${action.id}` : "closed";
+	function onClick(ev) {
+		message = ev.option ? `clicked on ${ev.option.id}` : "closed";
 	}
 
 	const options = [
@@ -41,7 +39,7 @@ To use SVAR Svelte Menu, simply import the package and include the component in
 	];
 </script>
 
-<Menu {options} on:click={clicked} />
+<Menu {options} onclick={onClick} />
 ```
 
 For more details, visit the [documentation](https://docs.svar.dev/svelte/core/category/menu).
@@ -68,4 +66,4 @@ To run the test:
 
 ### Need Help?
 
-Join our [community forum](https://forum.svar.dev/) to get help or post feature requests. 
+Join our [community forum](https://forum.svar.dev/) to get help or post feature requests.

package/src/components/ActionMenu.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { Portal } from "wx-svelte-core";
-	import { id } from "wx-lib-dom";
+	import { Portal } from "@svar-ui/svelte-core";
+	import { id } from "@svar-ui/lib-dom";
 	import Menu from "./Menu.svelte";
 	import { filterMenu } from "../helpers";
 

package/src/components/ContextMenu.svelte

@@ -21,7 +21,7 @@
 
 {#if children}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<span oncontextmenu={menu.show} data-menu-ignore="true">
+	<span oncontextmenu={show} data-menu-ignore="true">
 		{@render children?.()}
 	</span>
 {/if}

package/src/components/DropDownMenu.svelte

@@ -1,20 +1,20 @@
 <script>
-	import { Portal } from "wx-svelte-core";
+	import { Portal } from "@svar-ui/svelte-core";
 	import Menu from "./Menu.svelte";
 
 	let { options, at = "bottom", css = "", children, onclick } = $props();
 
-	export const handler = ev => {
+	export function show(ev) {
 		parent = ev.target;
 		ev.preventDefault();
-	};
+	}
 
 	var parent = $state(null);
 	function onClick(ev) {
 		parent = null;
 		onclick && onclick(ev);
 	}
-	function show(ev) {
+	function showAt(ev) {
 		let target = ev.target;
 		while (!target.dataset.menuIgnore) {
 			parent = target;
@@ -25,7 +25,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<span onclick={show} data-menu-ignore="true">
+<span onclick={showAt} data-menu-ignore="true">
 	{@render children?.()}
 </span>
 {#if parent}

package/src/components/Menu.svelte

@@ -1,10 +1,10 @@
 <script>
 	import Menu from "./Menu.svelte";
 
-	import { clickOutside, calculatePosition } from "wx-lib-dom";
+	import { clickOutside, calculatePosition } from "@svar-ui/lib-dom";
 	import { onMount } from "svelte";
 
-	import MenuItem from "./MenuItem.svelte";
+	import MenuOption from "./MenuOption.svelte";
 	import { prepareMenuData } from "../helpers";
 
 	let {
@@ -26,7 +26,7 @@
 
 	let self = $state();
 	let showSub = $state(false);
-	let activeItem = $state(null);
+	let activeOption = $state(null);
 
 	function updatePosition() {
 		const result = calculatePosition(self, parent, at, left, top);
@@ -48,7 +48,12 @@
 		showSub = false;
 	}
 	function cancel() {
-		onclick && onclick({ action: null });
+		//[deprecated] action will be deprecated in 3.0
+		onclick && onclick({ action: null, option: null });
+	}
+	function onshow(id, el) {
+		showSub = id;
+		activeOption = el;
 	}
 
 	const finalOptions = $derived(prepareMenuData(options));
@@ -66,18 +71,23 @@
 	style="position:absolute;top:{y}px;left:{x}px;width:{width};z-index:{z}"
 	onmouseleave={onLeave}
 >
-	{#each finalOptions as item (item.id)}
-		{#if item.type === "separator"}
+	{#each finalOptions as option (option.id)}
+		{#if option.comp === "separator"}
 			<div class="wx-separator"></div>
 		{:else}
-			<MenuItem
-				{item}
-				bind:showSub
-				bind:activeItem
+			<MenuOption
+				{option}
+				{onshow}
 				onclick={ev => {
-					if (!item.data && !ev.defaultPrevented) {
-						const pack = { context, action: item, event: ev };
-						if (item.handler) item.handler(pack);
+					if (!option.data && !ev.defaultPrevented) {
+						//[deprecated] action will be deprecated in 3.0
+						const pack = {
+							context,
+							action: option,
+							option,
+							event: ev,
+						};
+						if (option.handler) option.handler(pack);
 						onclick && onclick(pack);
 
 						// it is a rare case when we need to stop event bubbling
@@ -87,12 +97,12 @@
 				}}
 			/>
 		{/if}
-		{#if item.data && showSub === item.id}
+		{#if option.data && showSub === option.id}
 			<Menu
 				{css}
-				options={item.data}
+				options={option.data}
 				at="right-overlap"
-				parent={activeItem}
+				parent={activeOption}
 				{context}
 				{onclick}
 			/>

package/src/components/MenuBar.svelte

@@ -7,7 +7,7 @@
 
 	const finalOptions = $derived(prepareMenuData(options));
 
-	let active = $state();
+	let active = $state(false);
 	let menuOptions = $state([]);
 
 	function doClick(ev) {
@@ -15,23 +15,24 @@
 		onclick && onclick(ev);
 	}
 
-	function setMenu(ev, item, trigger) {
-		// if the item has a submenu, show it and enable hover mode
-		if (item.data && item.data.length) {
+	function setMenu(ev, option, trigger) {
+		// if the option has a submenu, show it and enable hover mode
+		if (option.data && option.data.length) {
 			if (active && trigger) {
-				// second click on item with submenu disables hover mode
+				// second click on option with submenu disables hover mode
 				active = null;
 			} else {
-				menuOptions = item.data;
-				active = item.id;
-				menu.show(ev, item);
+				menuOptions = option.data;
+				active = option.id;
+				menu.show(ev, option);
 			}
 		} else {
 			// hide the submenu
 			menu.show(null);
 			// if it was the click action, dispatch it and end hover mode
 			if (trigger) {
-				onclick && onclick({ action: item });
+				//[deprecated] action will be deprecated in 3.0
+				onclick && onclick({ action: option, option });
 				active = null;
 			} else {
 				// do not remove active flag, to preserve the hover mode
@@ -40,17 +41,17 @@
 		}
 	}
 
-	function onHover(ev, item) {
-		if (active) setMenu(ev, item);
+	function onHover(ev, option) {
+		if (active) setMenu(ev, option);
 	}
 </script>
 
 <div class="wx-menubar {css}">
-	{#each finalOptions as item (item.id)}
+	{#each finalOptions as option (option.id)}
 		<button
-			class="wx-item {active === item.id ? 'wx-active' : ''}"
-			onmouseenter={ev => onHover(ev, item)}
-			onclick={ev => setMenu(ev, item, true)}>{item.text}</button
+			class="wx-option {active === option.id ? 'wx-active' : ''}"
+			onmouseenter={ev => onHover(ev, option)}
+			onclick={ev => setMenu(ev, option, true)}>{option.text}</button
 		>
 	{/each}
 </div>
@@ -69,7 +70,7 @@
 		width: fit-content;
 	}
 
-	.wx-item {
+	.wx-option {
 		background-color: transparent;
 		border: none;
 		color: var(--wx-color-font);
@@ -87,7 +88,7 @@
 	}
 
 	.wx-active,
-	.wx-item:hover {
+	.wx-option:hover {
 		background-color: var(--wx-background-alt);
 		border-radius: var(--wx-button-border-radius);
 	}

package/src/components/{MenuItem.svelte → MenuOption.svelte}

@@ -1,39 +1,35 @@
 <script>
 	import { getItemHandler } from "../helpers";
 
-	let {
-		item,
-		showSub = $bindable(false),
-		activeItem = $bindable(null),
-		onclick,
-	} = $props();
+	let { option, onclick, onshow } = $props();
 
+	let element;
 	function onHover() {
-		showSub = item.data ? item.id : false;
-		// eslint-disable-next-line @typescript-eslint/no-this-alias
-		activeItem = this;
+		onshow(option.data ? option.id : false, element);
 	}
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="wx-item {item.css || ''}"
-	data-id={item.id}
+	bind:this={element}
+	class="wx-option {option.css || ''}"
+	data-id={option.id}
 	onmouseenter={onHover}
 	{onclick}
 >
-	{#if item.icon}<i class="wx-icon {item.icon}"></i>{/if}
-	{#if item.type}
-		{@const SvelteComponent = getItemHandler(item.type)}
-		<SvelteComponent {item} />
-	{:else}<span class="wx-value"> {item.text} </span>{/if}
-	{#if item.subtext}<span class="wx-subtext">{item.subtext}</span>{/if}
-	{#if item.data}<i class="wx-sub-icon wxi-angle-right"></i>{/if}
+	{#if option.icon}<i class="wx-icon {option.icon}"></i>{/if}
+	{#if option.comp}
+		{@const SvelteComponent = getItemHandler(option.comp)}
+		<!-- [deprecated] item property will be deprecated in 3.0-->
+		<SvelteComponent item={option} {option} />
+	{:else}<span class="wx-value"> {option.text} </span>{/if}
+	{#if option.subtext}<span class="wx-subtext">{option.subtext}</span>{/if}
+	{#if option.data}<i class="wx-sub-icon wxi-angle-right"></i>{/if}
 </div>
 
 <style>
-	.wx-item {
+	.wx-option {
 		display: flex;
 		align-items: center;
 		box-sizing: border-box;
@@ -47,16 +43,16 @@
 		cursor: pointer;
 	}
 
-	.wx-item:hover {
+	.wx-option:hover {
 		background: var(--wx-background-alt);
 	}
 
-	.wx-item:first-child {
+	.wx-option:first-child {
 		border-top-left-radius: inherit;
 		border-top-right-radius: inherit;
 	}
 
-	.wx-item:last-child {
+	.wx-option:last-child {
 		border-bottom-left-radius: inherit;
 		border-bottom-right-radius: inherit;
 	}

package/src/helpers/index.js

@@ -30,13 +30,15 @@ export function filterMenu(data, cb) {
 let uid = 1;
 export function prepareMenuData(data) {
 	return mapData(data, a => {
+		// [deprecated] option.type to be deprecated in 3.0
+		if (a.type) a.comp = a.type;
 		return { ...a, id: a.id || uid++ };
 	});
 }
 
 const handlers = {};
 export function getItemHandler(type) {
-	return handlers[type];
+	return handlers[type] || type;
 }
 export function registerMenuItem(type, handler) {
 	handlers[type] = handler;

package/types/index.d.ts

@@ -0,0 +1,74 @@
+import type { Component } from "svelte";
+
+export interface IMenuOption {
+	id?: string | number;
+	text?: string;
+	subtext?: string;
+	handler?: (ev: IMenuOptionClick) => void;
+	data?: IMenuOption[];
+	css?: string;
+	icon?: string;
+	type?: string | Component<any>; // @deprecated use `comp` instead. Will be removed in v3.0
+	comp?: string | Component<any>;
+}
+
+export interface IMenuOptionClick {
+	context?: any;
+	action: IMenuOption; // @deprecated use `option` instead. Will be removed in v3.0
+	option: IMenuOption;
+	event?: MouseEvent;
+}
+
+export declare const Menu: Component<{
+	options?: IMenuOption[];
+	left?: number;
+	top?: number;
+	at?: string;
+	parent?: HTMLElement;
+	mount?: (callback: () => void) => void;
+	context?: any;
+	css?: string;
+	onclick?: (ev: IMenuOptionClick) => void;
+}>;
+
+export declare const MenuBar: Component<{
+	css?: string;
+	menuCss?: string;
+	options?: IMenuOption[];
+	onclick?: (ev: IMenuOptionClick) => void;
+}>;
+
+export declare const DropDownMenu: Component<{
+	options?: IMenuOption[];
+	at?: string;
+	css?: string;
+	children?: () => any;
+	onclick?: (ev: IMenuOptionClick) => void;
+}>;
+
+export declare const ContextMenu: Component<{
+	options?: IMenuOption[];
+	at?: string;
+	resolver?: (item: any, event: MouseEvent) => any;
+	dataKey?: string;
+	filter?: (option: IMenuOption, item: any) => boolean;
+	css?: string;
+	children?: () => any;
+	onclick?: (ev: IMenuOptionClick) => void;
+}>;
+
+export declare const ActionMenu: Component<{
+	options?: IMenuOption[];
+	at?: string;
+	resolver?: (item: any, event: MouseEvent) => any;
+	dataKey?: string;
+	filter?: (option: IMenuOption, item: any) => boolean;
+	css?: string;
+	children?: () => any;
+	onclick?: (ev: IMenuOptionClick) => void;
+}>;
+
+export declare function registerMenuItem(
+	type: string,
+	handler: Component<{ option?: any }>
+): void;

package/whatsnew.md

@@ -1,3 +1,17 @@
+## 2.3.0
+
+### New features
+
+-   TypeScript definitions
+
+### Updates
+
+API changes with backward compatibility until 3.0
+
+-   `onclick` event of all menus: `action` parameter is renamed to `option`
+-   Option `type` property is renamed to `comp`
+-   Property `item` of a custom component, registered as menu option, is renamed to `option`
+
 ## 2.2.1
 
 ### Fixes