wx-svelte-menu 1.3.0

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "wx-svelte-menu",
+	"version": "1.3.0",
+	"productTag": "menu",
+	"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 --ext .svelte,.ts,.js",
+		"start": "vite --open=/demos/",
+		"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"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/menu.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/core/",
+	"dependencies": {
+		"wx-svelte-core": "1.3.0",
+		"wx-lib-dom": "0.6.0"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	]
+}

package/readme.md

@@ -0,0 +1,60 @@
+### SVAR Menu for Svelte
+
+SVAR Menu provides ready to use control for creating context and popup menus
+
+### Useful Links
+
+-   [Documentation](https://docs.svar.dev/svelte/core/overview)
+-   [How to start guide](https://docs.svar.dev/svelte/core/getting_started/)
+-   [Demos](https://docs.svar.dev/svelte/menu/samples/#/base/willow)
+
+### License
+
+SVAR Menu for Svelte is available under MIT license.
+
+### How to Use
+
+To use the widget, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Menu } from "wx-svelte-menu";
+
+	function onClick(item) {
+		const action = ev.detail.action;
+		message = action ? `clicked on ${action.id}` : "closed";
+	}
+
+	const options = [
+		{ id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },
+		{ id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },
+		{
+			id: "edit-paste",
+			text: "Paste",
+			icon: "wxi wxi-content-paste",
+		},
+	];
+</script>
+
+<Menu {options} on:click={clicked} />
+```
+
+### How to Modify
+
+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
+    ```

package/src/components/ActionMenu.svelte

@@ -0,0 +1,97 @@
+<script>
+	import { Portal } from "wx-svelte-core";
+	import { id } from "wx-lib-dom";
+	import Menu from "./Menu.svelte";
+	import { filterMenu } from "../helpers";
+
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	const SLOTS = $$props.$$slots;
+
+	export let options;
+	export let at = "bottom";
+	export let resolver = null;
+	export let dataKey = "contextId";
+	export let filter = null;
+	export let css = "";
+	export const handler = show;
+
+	var filteredOptions;
+	$: filteredOptions = options;
+
+	var item = null;
+	var parent = null;
+	let left = 0,
+		top = 0;
+
+	function onClick(ev) {
+		parent = null;
+		dispatch("click", ev.detail);
+	}
+	function getDataAttr(node, name) {
+		let v = null;
+		while (node && node.dataset && !v) {
+			v = node.dataset[name];
+			node = node.parentNode;
+		}
+		return v ? id(v) : null;
+	}
+	function show(ev, obj) {
+		if (!ev) {
+			parent = null;
+			return;
+		}
+
+		if (ev.defaultPrevented) return;
+
+		const target = ev.target;
+		if (target && target.dataset && target.dataset.menuIgnore) return;
+
+		left = ev.clientX + 1;
+		top = ev.clientY + 1;
+
+		item = typeof obj !== "undefined" ? obj : getDataAttr(target, dataKey);
+		if (resolver) {
+			item = resolver(item, ev);
+			if (!item) return;
+		}
+
+		if (item !== null && filter) {
+			filteredOptions = filterMenu(options, v => filter(v, item));
+		}
+		parent = target;
+
+		ev.preventDefault();
+	}
+
+	// about #key in markup below
+	// we need to be sure that menu is closed before it is shown again
+	// its the only way to reinit click-outside
+	// otherwise, the menu will be hidden as click-ouside occurs after show call
+</script>
+
+{#if SLOTS && SLOTS.default}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div on:click={handler} data-menu-ignore="true">
+		<slot />
+	</div>
+{/if}
+
+{#if parent}
+	<Portal let:mount>
+		{#key parent}
+			<Menu
+				{css}
+				{at}
+				{top}
+				{left}
+				{mount}
+				{parent}
+				context={item}
+				on:click={onClick}
+				options={filteredOptions}
+			/>
+		{/key}
+	</Portal>
+{/if}

package/src/components/ContextMenu.svelte

@@ -0,0 +1,31 @@
+<script>
+	import ActionMenu from "./ActionMenu.svelte";
+
+	const SLOTS = $$props.$$slots;
+
+	export let handler = null;
+
+	export let options;
+	export let at = "bottom";
+	export let resolver = null;
+	export let dataKey = "contextId";
+	export let filter = null;
+	export let css = "";
+</script>
+
+{#if SLOTS && SLOTS.default}
+	<div on:contextmenu={handler} data-menu-ignore="true">
+		<slot />
+	</div>
+{/if}
+
+<ActionMenu
+	{css}
+	{at}
+	{options}
+	{resolver}
+	{dataKey}
+	{filter}
+	bind:handler
+	on:click
+/>

package/src/components/DropDownMenu.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { Portal } from "wx-svelte-core";
+	import Menu from "./Menu.svelte";
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	export let options;
+	export let at = "bottom";
+	export let css = "";
+
+	export const handler = ev => {
+		parent = ev.target;
+		ev.preventDefault();
+	};
+
+	var parent = null;
+	function onClick(ev) {
+		parent = null;
+		dispatch("click", ev.detail);
+	}
+	function show(ev) {
+		let target = ev.target;
+		while (!target.dataset.menuIgnore) {
+			parent = target;
+			target = target.parentNode;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={show} data-menu-ignore="true">
+	<slot />
+</div>
+{#if parent}
+	<Portal let:mount>
+		{#key parent}
+			<Menu {css} {at} {mount} {parent} {options} on:click={onClick} />
+		{/key}
+	</Portal>
+{/if}

package/src/components/Menu.svelte

@@ -0,0 +1,113 @@
+<script>
+	import { clickOutside, calculatePosition } from "wx-lib-dom";
+	import { onMount, createEventDispatcher } from "svelte";
+
+	import MenuItem from "./MenuItem.svelte";
+	import { prepareMenuData } from "../helpers";
+
+	const dispatch = createEventDispatcher();
+
+	export let options;
+	$: prepareMenuData(options);
+
+	export let left = 0;
+	export let top = 0;
+	export let at = "bottom";
+	export let parent = null;
+	export let mount = null;
+	export let context = null;
+	export let css = "";
+
+	let x = -10000;
+	let y = -10000;
+	let index = 0;
+	let width;
+
+	let self;
+	let showSub;
+	let activeItem;
+
+	function updatePosition() {
+		const result = calculatePosition(self, parent, at, left, top);
+		x = result.x || x;
+		y = result.y || y;
+		index = result.index;
+		width = result?.width || width;
+	}
+
+	// unfortunately svelte doesn't guarantee that afterUpdate of child component
+	// will be called after onMount in the parent one, so to be sure that Portal is already
+	// moved menu to the correct parent we are registering single time handler
+	if (mount) mount(updatePosition);
+	onMount(updatePosition);
+	$: updatePosition(parent);
+
+	function onLeave() {
+		showSub = false;
+	}
+	function cancel() {
+		dispatch("click", { action: null });
+	}
+</script>
+
+<div
+	use:clickOutside={{ callback: cancel, modal: true }}
+	bind:this={self}
+	data-wx-menu="true"
+	class="wx-menu {css}"
+	style="top:{y}px;left:{x}px;width:{width};"
+	on:mouseleave={onLeave}
+>
+	{#each options as item (item.id)}
+		{#if item.type === "separator"}
+			<div class="wx-separator" />
+		{:else}
+			<MenuItem
+				{item}
+				bind:showSub
+				bind:activeItem
+				on:click={ev => {
+					if (!item.data && !ev.defaultPrevented) {
+						const pack = { context, action: item, event: ev };
+						if (item.handler) item.handler(pack);
+						dispatch("click", pack);
+
+						// it is a rare case when we need to stop event bubbling
+						// clicking on menu is isolated action which must not affect any other elements on the page
+						ev.stopPropagation();
+					}
+				}}
+			/>
+		{/if}
+		{#if item.data && showSub === item.id}
+			<svelte:self
+				{css}
+				options={item.data}
+				at="right-overlap"
+				parent={activeItem}
+				{context}
+				on:click
+			/>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.wx-menu {
+		position: absolute;
+		box-shadow: var(--wx-shadow-light);
+
+		min-width: 125px;
+		display: flex;
+		flex-direction: column;
+		z-index: 20;
+		border-radius: var(--wx-border-radius);
+		background-color: var(--wx-background);
+		padding: 4px 0;
+	}
+
+	.wx-separator {
+		width: 100%;
+		border-top: var(--wx-border-medium);
+	}
+</style>

package/src/components/MenuBar.svelte

@@ -0,0 +1,99 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	import ActionMenu from "./ActionMenu.svelte";
+	import { prepareMenuData } from "../helpers";
+
+	const dispatch = createEventDispatcher();
+
+	export let css = "";
+	export let menuCss = "";
+	export let options;
+	$: prepareMenuData(options);
+
+	let active;
+	let menuOptions = [];
+	let activate = null;
+
+	function doClick(ev) {
+		active = null;
+		dispatch("click", ev.detail);
+	}
+
+	function setMenu(ev, item, trigger) {
+		// if the item has a submenu, show it and enable hover mode
+		if (item.data && item.data.length) {
+			if (active && trigger) {
+				// second click on item with submenu disables hover mode
+				active = null;
+			} else {
+				menuOptions = item.data;
+				active = item.id;
+				activate(ev, item);
+			}
+		} else {
+			// hide the submenu
+			activate(null);
+			// if it was the click action, dispatch it and end hover mode
+			if (trigger) {
+				dispatch("click", { action: item });
+				active = null;
+			} else {
+				// do not remove active flag, to preserve the hover mode
+				active = -1;
+			}
+		}
+	}
+
+	function onHover(ev, item) {
+		if (active) setMenu(ev, item);
+	}
+</script>
+
+<div class="wx-menubar {css}">
+	{#each options as item (item.id)}
+		<button
+			class="wx-item {active === item.id ? 'wx-active' : ''}"
+			on:mouseenter={ev => onHover(ev, item)}
+			on:click={ev => setMenu(ev, item, true)}>{item.text}</button
+		>
+	{/each}
+</div>
+
+<ActionMenu
+	css={menuCss}
+	on:click={doClick}
+	options={menuOptions}
+	bind:handler={activate}
+/>
+
+<style>
+	.wx-menubar {
+		display: flex;
+		position: relative;
+		width: fit-content;
+	}
+
+	.wx-item {
+		background-color: transparent;
+		border: none;
+		color: var(--wx-color-font);
+		box-sizing: border-box;
+		height: 36px;
+		line-height: 30px;
+		padding: 2px 12px;
+		font-family: var(--wx-font-family);
+		font-weight: var(--wx-font-weight);
+		font-size: var(--wx-font-size);
+
+		cursor: pointer;
+		outline: none;
+		white-space: nowrap;
+	}
+
+	.wx-active,
+	.wx-item:hover {
+		background-color: var(--wx-background-alt);
+		border-radius: var(--wx-button-border-radius);
+	}
+</style>

package/src/components/MenuItem.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { getItemHandler } from "../helpers";
+
+	export let item;
+	export let showSub = false;
+	export let activeItem = null;
+
+	function onHover() {
+		showSub = item.data ? item.id : false;
+		activeItem = this;
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="wx-item {item.css || ''}"
+	data-id={item.id}
+	on:mouseenter={onHover}
+	on:click
+>
+	{#if item.icon}<i class="wx-icon {item.icon}" />{/if}
+	{#if item.type}
+		<svelte:component this={getItemHandler(item.type)} {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" />{/if}
+</div>
+
+<style>
+	.wx-item {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		height: 36px;
+		line-height: 36px;
+		padding: 2px 12px;
+		font-family: var(--wx-font-family);
+		font-weight: var(--wx-font-weight);
+		font-size: var(--wx-font-size);
+		background-color: var(--wx-background);
+		cursor: pointer;
+	}
+
+	.wx-item:hover {
+		background: var(--wx-background-alt);
+	}
+
+	.wx-item:first-child {
+		border-top-left-radius: inherit;
+		border-top-right-radius: inherit;
+	}
+
+	.wx-item:last-child {
+		border-bottom-left-radius: inherit;
+		border-bottom-right-radius: inherit;
+	}
+
+	.wx-value {
+		flex-grow: 1;
+		white-space: nowrap;
+		color: var(--wx-color-font);
+	}
+	.wx-icon,
+	.wx-sub-icon {
+		vertical-align: middle;
+		height: inherit;
+		line-height: inherit;
+		font-size: var(--wx-icon-size);
+		color: var(--wx-icon-color);
+	}
+
+	.wx-icon {
+		margin-right: 8px;
+	}
+
+	.wx-subtext {
+		color: var(--wx-color-font-disabled);
+		margin-left: 20px;
+		white-space: nowrap;
+	}
+</style>

package/src/helpers/index.js

@@ -0,0 +1,37 @@
+export function walkData(data, cb) {
+	data.forEach(a => {
+		cb(a);
+		if (a.data && a.data.length) walkData(a.data, cb);
+	});
+}
+
+export function filterMenu(data, cb) {
+	const out = [];
+	data.forEach(a => {
+		if (a.data) {
+			const sub = filterMenu(a.data, cb);
+			if (sub.length) out.push({ ...a, data: sub });
+		} else {
+			if (cb(a)) out.push(a);
+		}
+	});
+
+	return out;
+}
+
+let uid = 1;
+export function prepareMenuData(data) {
+	walkData(data, a => {
+		a.id = a.id || uid++;
+	});
+
+	return data;
+}
+
+const handlers = {};
+export function getItemHandler(type) {
+	return handlers[type];
+}
+export function registerMenuItem(type, handler) {
+	handlers[type] = handler;
+}

package/src/index.js

@@ -0,0 +1,8 @@
+import Menu from "./components/Menu.svelte";
+import MenuBar from "./components/MenuBar.svelte";
+import DropDownMenu from "./components/DropDownMenu.svelte";
+import ContextMenu from "./components/ContextMenu.svelte";
+import ActionMenu from "./components/ActionMenu.svelte";
+
+export { registerMenuItem } from "./helpers";
+export { Menu, MenuBar, DropDownMenu, ContextMenu, ActionMenu };

package/whatsnew.md

@@ -0,0 +1,72 @@
+### 1.3.0
+
+-   [dev] public release, using core@1.3.0
+
+### 1.2.4
+
+-   [update] ability to define custom css class for top menu and submenu's containers
+-   [fix] incorrect z-index when shown from popup
+
+### 1.2.3
+
+-   [update] when menu is closed it doesn't affect other popup elements
+-   [fix] regression in repositioning menu when clicking on next active area
+
+### 1.2.1
+
+-   [fix] regression in popup closing in some cases
+
+### 1.2.0
+
+-   [deps] uses core@1.2.0
+
+### 1.1.1
+
+-   [fix] incorrect positioning in "point" mode when menu initialized not as child of document.body
+-   [fix] submenus lost context values
+
+### 1.1.0
+
+-   [update] visual improvements
+-   [fix] incorrect auto-position logic
+
+### 0.0.1-rc21
+
+-   [fix] space between icon and text
+
+### 0.0.1-rc20
+
+-   [add] auto-fit for sub menus
+
+### 0.0.1-rc19
+
+-   [add] MenuBar - top level menu bar
+
+### 0.0.1-rc18
+
+-   menu doesn't require that all items have an unique IDs ( will generate missed ids on its own )
+
+### 0.0.1-rc17
+
+-   fix position in scrolled container
+-   temporary fix for cypress tests
+
+### 0.0.1-rc11
+
+-   updated styles
+-   bottom-fit mode
+
+### 0.0.1-rc10
+
+#### Fixes
+
+-   incorrect position in scrollable container
+-   activation area can't contain complex markup inside
+-   missed hover styling
+
+#### New features
+
+-   ability to init menu in some specific container
+-   ability to define subtext ( hotkey, etc. )
+-   ability to use custom components as menu items
+-   ability to use left and bottom-left position strategies