wx-svelte-menu 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-menu",
-	"version": "2.4.0",
+	"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.4.0",
-		"@svar-ui/lib-dom": "0.11.1"
+		"@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/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 -->
@@ -15,9 +24,9 @@
 	bind:this={element}
 	class="wx-option {option.css || ''}"
 	class:wx-disabled={option.disabled}
-	data-id={option.id}
+	data-id={setID(option.id)}
 	onmouseenter={onHover}
-	{onclick}
+	onclick={onClick}
 >
 	{#if option.icon}<i class="wx-icon {option.icon}"></i>{/if}
 	{#if option.comp}

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/whatsnew.md

@@ -1,3 +1,13 @@
+## 2.4.2
+
+### Fixes
+
+-   Submenus are not shown on mobile devices
+
+## 2.4.1
+
+-   Using Svelte Core v2.4.1
+
 ## 2.4.0
 
 ### Updates