wx-svelte-menu 2.3.1 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-menu",
-	"version": "2.3.1",
+	"version": "2.4.2",
 	"description": "Svelte menu component for creating dropdown menus, context menus, or complex menu bars",
 	"productTag": "menu",
 	"productTrial": false,
@@ -33,8 +33,8 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"@svar-ui/svelte-core": "2.3.1",
-		"@svar-ui/lib-dom": "0.9.2"
+		"@svar-ui/svelte-core": "2.4.1",
+		"@svar-ui/lib-dom": "0.12.0"
 	},
 	"files": [
 		"src",

package/src/components/ActionMenu.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { Portal } from "@svar-ui/svelte-core";
-	import { id } from "@svar-ui/lib-dom";
 	import Menu from "./Menu.svelte";
 	import { filterMenu } from "../helpers";
+	import { locateID } from "@svar-ui/lib-dom";
 
 	let {
 		options,
@@ -15,15 +15,19 @@
 		onclick,
 	} = $props();
 
-	var filteredOptions = $derived.by(() => {
+	const attrName = $derived(
+		`data-${dataKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`
+	);
+
+	const filteredOptions = $derived.by(() => {
 		if (item !== null && filter) {
 			return filterMenu(options, v => filter(v, item));
 		}
 		return options;
 	});
 
-	var item = $state(null);
-	var parent = $state(null);
+	let item = $state(null);
+	let parent = $state(null);
 	let left = $state(0),
 		top = $state(0);
 
@@ -31,14 +35,6 @@
 		parent = null;
 		onclick && onclick(ev);
 	}
-	function getDataAttr(node, name) {
-		let v = null;
-		while (node && node.dataset && !v) {
-			v = node.dataset[name];
-			node = node.parentNode;
-		}
-		return v ? id(v) : null;
-	}
 
 	export function show(ev, obj) {
 		if (!ev) {
@@ -54,7 +50,7 @@
 		left = ev.clientX + 1;
 		top = ev.clientY + 1;
 
-		item = typeof obj !== "undefined" ? obj : getDataAttr(target, dataKey);
+		item = typeof obj !== "undefined" ? obj : locateID(target, attrName);
 		if (resolver) {
 			item = resolver(item, ev);
 			if (!item) return;

package/src/components/DropDownMenu.svelte

@@ -9,7 +9,7 @@
 		ev.preventDefault();
 	}
 
-	var parent = $state(null);
+	let parent = $state(null);
 	function onClick(ev) {
 		parent = null;
 		onclick && onclick(ev);

package/src/components/MenuBar.svelte

@@ -50,6 +50,7 @@
 	{#each finalOptions as option (option.id)}
 		<button
 			class="wx-option {active === option.id ? 'wx-active' : ''}"
+			class:wx-disabled={option.disabled}
 			onmouseenter={ev => onHover(ev, option)}
 			onclick={ev => setMenu(ev, option, true)}>{option.text}</button
 		>
@@ -92,4 +93,10 @@
 		background-color: var(--wx-background-alt);
 		border-radius: var(--wx-button-border-radius);
 	}
+	.wx-disabled {
+		pointer-events: none;
+	}
+	.wx-disabled {
+		color: var(--wx-color-font-disabled);
+	}
 </style>

package/src/components/MenuOption.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { setID } from "@svar-ui/lib-dom";
 	import { getItemHandler } from "../helpers";
 
 	let { option, onclick, onshow } = $props();
@@ -7,6 +8,14 @@
 	function onHover() {
 		onshow(option.data ? option.id : false, element);
 	}
+	function onClick(ev) {
+		if (option.data) {
+			ev.stopPropagation();
+			onshow(option.id, element);
+			return;
+		}
+		onclick(ev);
+	}
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -14,9 +23,10 @@
 <div
 	bind:this={element}
 	class="wx-option {option.css || ''}"
-	data-id={option.id}
+	class:wx-disabled={option.disabled}
+	data-id={setID(option.id)}
 	onmouseenter={onHover}
-	{onclick}
+	onclick={onClick}
 >
 	{#if option.icon}<i class="wx-icon {option.icon}"></i>{/if}
 	{#if option.comp}
@@ -80,4 +90,13 @@
 		margin-left: 20px;
 		white-space: nowrap;
 	}
+
+	.wx-disabled {
+		pointer-events: none;
+	}
+	.wx-disabled .wx-value,
+	.wx-disabled .wx-icon,
+	.wx-disabled .wx-sub-icon {
+		color: var(--wx-color-font-disabled);
+	}
 </style>

package/src/helpers/index.js

@@ -1,3 +1,5 @@
+import { uid } from "@svar-ui/lib-dom";
+
 export function walkData(data, cb) {
 	data.forEach(a => {
 		cb(a);
@@ -27,11 +29,10 @@ export function filterMenu(data, cb) {
 	return out;
 }
 
-let uid = 1;
 export function prepareMenuData(data) {
 	return mapData(data, a => {
 		// [deprecated] option.type to be deprecated in 3.0
-		const opt = { ...a, id: a.id || uid++ };
+		const opt = { ...a, id: a.id || uid() };
 		if (opt.type) opt.comp = opt.type;
 		return opt;
 	});

package/types/index.d.ts

@@ -8,6 +8,7 @@ export interface IMenuOption {
 	data?: IMenuOption[];
 	css?: string;
 	icon?: string;
+	disabled?: boolean;
 	type?: string | Component<any>; // @deprecated use `comp` instead. Will be removed in v3.0
 	comp?: string | Component<any>;
 }

package/whatsnew.md

@@ -1,3 +1,24 @@
+## 2.4.2
+
+### Fixes
+
+-   Submenus are not shown on mobile devices
+
+## 2.4.1
+
+-   Using Svelte Core v2.4.1
+
+## 2.4.0
+
+### Updates
+
+-   More options to precisely position and align ContextMenu, DropDownMenu, ActionMenu
+
+### Fixes
+
+-   Incorrect position of Menus in a relatively positioned continer
+-   Incorrect position of Menus close to the container edges
+
 ## 2.3.1
 
 ### Fixes