@isoftdata/svelte-context-menu 0.0.1 → 0.0.3

package/README.md

@@ -8,22 +8,44 @@ npm i @isoftdata/svelte-context-menu
 
 ## Props
 | Name | Type | Description | Default Value |
-|------|------|-------------|---------------|
-|      |      |             |               |
-|      |      |             |               |
-|      |      |             |               |
+| --- | --- | --- | --- |
+| `id` | string | The id of the context menu element. | "menu" |
+| `placement` | string | The placement of the context menu relative to the reference element. | "bottom-start" |
 
-## Slots
-* default - A brief description of the slot, if there is one
+## Usage
 
-## Events
-* exampleEvent - A brief description of the event, if there are any
+The main way you'll interact with this component is through calling the methods below. To access these methods on the component instance, you will have to use the `bind:this` directive on the `ContextMenu` in your template, and assign it to a variable, which you can then call the methods on. See Example for more details.
+
+### Methods
+
+* open - Opens the context menu. Arguments below.
+  * `event` - the mouse event
+  * `targetId` (optional) the id of an element. If supplied, the menu will be positioned relative to this element. Otherwise, it will be positioned relative to the cursor.
+* close - Closes the context menu. Normally you'd close the context menu by clicking on an item within it, but this is also an option.
+### Example
 
-## Example
 ```html
 <script lang="ts">
 	import ContextMenu from '@isoftdata/svelte-context-menu'
+
+	let cm: ContextMenu
 </script>
 
-<ContextMenu prop='foo' />
+<button
+	id="target"
+	class="btn btn-primary btn-block"
+	on:contextmenu|preventDefault={e => cm.open(e, "target")}
+>
+	Right Click to Open Menu
+</button>
+<ContextMenu bind:this={cm}>
+	<button
+		class="dropdown-item"
+		type="button"
+		on:click={() => cmClicks++}
+		>Click Me!
+	</button>
+	<div class="downdown-divider" />
+	<h6 class="dropdown-header">Clicked {cmClicks} time(s)</h6>
+</ContextMenu>
 ```

package/dist/ContextMenu.svelte

@@ -1,29 +1,13 @@
 <script>import { onMount } from "svelte";
+import { computePosition, flip } from "@floating-ui/dom";
 export let id = "menu";
-export let show = false;
-export let positionLeft = 0;
-export let positionTop = 0;
+export let placement = "bottom-start";
+let show = false;
+let positionLeft = 0;
+let positionTop = 0;
+let strategy = "absolute";
 let mounted = false;
-function getPosition(e) {
-  let posX = 0;
-  let posY = 0;
-  if (e.pageX || e.pageY) {
-    posX = e.pageX;
-    posY = e.pageY;
-  } else if (e.clientX || e.clientY) {
-    posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-    posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
-  }
-  return {
-    x: posX,
-    y: posY
-  };
-}
-function clickInsideElement(event, className) {
-  const el = event.target.closest(`.${className}`);
-  return el || false;
-  return false;
-}
+let menu;
 function handleMenuClick(event) {
   if (id && mounted) {
     const element = document.getElementById(id);
@@ -32,36 +16,37 @@ function handleMenuClick(event) {
     }
   }
 }
-onMount(() => {
-  mounted = true;
-});
-export function contextMenu(event, property) {
-  let menu;
-  if (mounted) {
-    menu = document.getElementById(id);
-  }
-  if (property && menu && property === menu.id) {
-    event.preventDefault();
-    const { x, y } = getPosition(event);
-    const menuWidth = menu.offsetWidth + 4;
-    const menuHeight = menu.offsetHeight + 4;
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    if (windowWidth - x < menuWidth) {
-      positionLeft = windowWidth - menuWidth;
-    } else {
-      positionLeft = x;
-    }
-    if (windowHeight - y < menuHeight) {
-      positionTop = menuHeight * -1;
-    } else {
-      positionTop = 40;
-    }
+export async function open(event, targetId = "") {
+  if (menu) {
     show = true;
+    const virtualEl = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: event.clientX,
+          y: event.clientY,
+          top: event.clientY,
+          left: event.clientX,
+          right: event.clientX,
+          bottom: event.clientY
+        };
+      }
+    };
+    const reference = targetId && document.getElementById(targetId) || virtualEl;
+    if (virtualEl && menu) {
+      const pos = await computePosition(reference, menu, { placement, middleware: [flip()] });
+      positionLeft = pos.x;
+      positionTop = pos.y;
+      strategy = pos.strategy;
+    }
   } else {
     show = false;
   }
 }
+export function close() {
+  show = false;
+}
 </script>
 
 <svelte:window on:click={event => handleMenuClick(event)} />
@@ -70,15 +55,16 @@ export function contextMenu(event, property) {
 	{id}
 	class="dropdown-menu shadow bg-white rounded"
 	class:show
-	style="position: absolute; left:{{ positionLeft }}px; top:{{ positionTop }}px;"
-	on:click|stopPropagation={() => (show = false)}
+	style="position: {strategy}; left:{positionLeft}px; top:{positionTop}px;"
 	role="menu"
 	tabindex="0"
+	on:click|stopPropagation={() => (show = false)}
 	on:keydown|preventDefault|stopPropagation={e => {
 		if (e.key === "Escape") {
 			show = false
 		}
 	}}
+	bind:this={menu}
 >
 	<slot />
 </div>

package/dist/ContextMenu.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
+import { type Placement } from "@floating-ui/dom";
 declare const __propDef: {
     props: {
         id?: string | undefined;
-        show?: boolean | undefined;
-        positionLeft?: number | undefined;
-        positionTop?: number | undefined;
-        contextMenu?: ((event: MouseEvent, property: string) => void) | undefined;
+        placement?: Placement | undefined;
+        open?: ((event: MouseEvent, targetId?: string) => Promise<void>) | undefined;
+        close?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,6 +18,7 @@ export type ContextMenuProps = typeof __propDef.props;
 export type ContextMenuEvents = typeof __propDef.events;
 export type ContextMenuSlots = typeof __propDef.slots;
 export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {
-    get contextMenu(): (event: MouseEvent, property: string) => void;
+    get open(): (event: MouseEvent, targetId?: string) => Promise<void>;
+    get close(): () => void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-context-menu",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -27,6 +27,7 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
+		"@floating-ui/dom": "^1.5.3",
 		"@isoftdata/prettier-config": "^1.0.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",