@isoftdata/svelte-context-menu 0.0.1

package/README.md

@@ -0,0 +1,29 @@
+# Svelte ContextMenu
+
+## Install
+
+```bash
+npm i @isoftdata/svelte-context-menu
+```
+
+## Props
+| Name | Type | Description | Default Value |
+|------|------|-------------|---------------|
+|      |      |             |               |
+|      |      |             |               |
+|      |      |             |               |
+
+## Slots
+* default - A brief description of the slot, if there is one
+
+## Events
+* exampleEvent - A brief description of the event, if there are any
+
+## Example
+```html
+<script lang="ts">
+	import ContextMenu from '@isoftdata/svelte-context-menu'
+</script>
+
+<ContextMenu prop='foo' />
+```

package/dist/ContextMenu.svelte

@@ -0,0 +1,84 @@
+<script>import { onMount } from "svelte";
+export let id = "menu";
+export let show = false;
+export let positionLeft = 0;
+export let positionTop = 0;
+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;
+}
+function handleMenuClick(event) {
+  if (id && mounted) {
+    const element = document.getElementById(id);
+    if (element && !element.contains(event.target)) {
+      show = false;
+    }
+  }
+}
+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;
+    }
+    show = true;
+  } else {
+    show = false;
+  }
+}
+</script>
+
+<svelte:window on:click={event => handleMenuClick(event)} />
+
+<div
+	{id}
+	class="dropdown-menu shadow bg-white rounded"
+	class:show
+	style="position: absolute; left:{{ positionLeft }}px; top:{{ positionTop }}px;"
+	on:click|stopPropagation={() => (show = false)}
+	role="menu"
+	tabindex="0"
+	on:keydown|preventDefault|stopPropagation={e => {
+		if (e.key === "Escape") {
+			show = false
+		}
+	}}
+>
+	<slot />
+</div>

package/dist/ContextMenu.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        show?: boolean | undefined;
+        positionLeft?: number | undefined;
+        positionTop?: number | undefined;
+        contextMenu?: ((event: MouseEvent, property: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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;
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ContextMenu.svelte";

package/dist/index.js

@@ -0,0 +1 @@
+export {default as default} from './ContextMenu.svelte'

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@isoftdata/svelte-context-menu",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@isoftdata/prettier-config": "^1.0.1",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"prettier": "@isoftdata/prettier-config"
+}