@axium/client 0.13.4 → 0.14.0

package/assets/styles.css

@@ -221,6 +221,20 @@ input.error {
 	gap: 0.1em;
 }
 
+[popover] .menu-item {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.5em 0.75em;
+	gap: 1em;
+	border-radius: 0.5em;
+	user-select: none;
+
+	&:hover {
+		background-color: var(--bg-strong);
+		cursor: pointer;
+	}
+}
+
 .icon-text {
 	display: inline-flex;
 	align-items: center;

package/lib/Popover.svelte

@@ -11,8 +11,6 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div {onclick}>
 	{#if toggle}
 		{@render toggle()}
@@ -55,17 +53,4 @@
 		left: anchor(left);
 		top: anchor(bottom);
 	}
-
-	[popover] :global(.menu-item) {
-		display: inline-flex;
-		align-items: center;
-		padding: 0.5em 0.75em;
-		gap: 1em;
-		border-radius: 0.5em;
-
-		&:hover {
-			background-color: var(--bg-strong);
-			cursor: pointer;
-		}
-	}
 </style>

package/lib/Upload.svelte

@@ -5,7 +5,6 @@
 
 	let {
 		name = 'files',
-		input = $bindable(),
 		files = $bindable(),
 		progress = $bindable([]),
 		...rest
@@ -27,7 +26,7 @@
 						e.preventDefault();
 						const dt = new DataTransfer();
 						for (let f of files!) if (file !== f) dt.items.add(f);
-						input!.files = files = dt.files;
+						files = dt.files;
 					}}
 					style:display="contents"
 				>
@@ -50,7 +49,7 @@
 		{/each}
 	</label>
 
-	<input bind:this={input} bind:files {name} {id} type="file" {...rest} />
+	<input bind:files {name} {id} type="file" {...rest} />
 </div>
 
 <style>

package/lib/attachments.ts

@@ -0,0 +1,92 @@
+/**
+ * Svelte attachments
+ * @see https://svelte.dev/docs/svelte/@attach
+ */
+import { mount, unmount } from 'svelte';
+import Icon from './Icon.svelte';
+import type { Attachment } from 'svelte/attachments';
+
+export interface ContextMenuItem {
+	/** Icon name */
+	i?: string;
+	text: string;
+	danger?: boolean;
+	action(): unknown;
+}
+
+/**
+ * Attach a context menu to an element with the given actions
+ */
+export function contextMenu(...menuItems: ContextMenuItem[]) {
+	function _attachContextMenu(element: HTMLElement) {
+		const menu = document.createElement('div');
+		menu.popover = 'auto';
+		menu.className = 'context-menu';
+
+		const mountedIcons = new Set<Record<string, any>>();
+
+		for (const item of menuItems) {
+			const div = document.createElement('div');
+			div.classList.add('icon-text', 'menu-item');
+			if (item.danger) div.classList.add('danger');
+
+			div.onclick = e => {
+				e.stopPropagation();
+				menu.hidePopover();
+				item.action();
+			};
+
+			if (item.i) mountedIcons.add(mount<any, {}>(Icon, { target: div, props: { i: item.i } }));
+
+			div.appendChild(document.createTextNode(item.text));
+
+			menu.appendChild(div);
+		}
+
+		document.body.appendChild(menu);
+
+		let _forcePopover = false;
+
+		element.oncontextmenu = (e: MouseEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			menu.showPopover();
+			_forcePopover = true;
+
+			const x = e.clientX;
+			const y = e.clientY;
+
+			menu.style.left = x + 'px';
+			menu.style.top = y + 'px';
+
+			const rect = menu.getBoundingClientRect();
+			if (rect.right > window.innerWidth) {
+				menu.style.left = '';
+				menu.style.right = window.innerWidth - x + 'px';
+			}
+			if (rect.bottom > window.innerHeight) {
+				menu.style.top = '';
+				menu.style.bottom = window.innerHeight - y + 'px';
+			}
+		};
+
+		/**
+		 * Workaround for https://github.com/whatwg/html/issues/10905
+		 * @todo Remove when the problem is fixed.
+		 */
+		element.onpointerup = (e: PointerEvent) => {
+			if (!_forcePopover) return;
+			e.stopPropagation();
+			e.preventDefault();
+			menu.togglePopover();
+			_forcePopover = false;
+		};
+
+		return function _disposeContextMenu() {
+			for (const icon of mountedIcons) unmount(icon);
+			menu.remove();
+		};
+	}
+	return _attachContextMenu satisfies Attachment<HTMLElement>;
+}

package/lib/index.ts

@@ -16,6 +16,5 @@ export { default as URLText } from './URLText.svelte';
 export { default as UserCard } from './UserCard.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
-export { default as WithContextMenu } from './WithContextMenu.svelte';
 export { default as ZodForm } from './ZodForm.svelte';
 export { default as ZodInput } from './ZodInput.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.13.4",
+	"version": "0.14.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -34,6 +34,7 @@
 		"./*": "./dist/*.js",
 		"./components": "./lib/index.js",
 		"./components/*": "./lib/*.svelte",
+		"./attachments": "./lib/attachments.js",
 		"./styles/*": "./styles/*.css"
 	},
 	"scripts": {

package/lib/WithContextMenu.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import Icon from './Icon.svelte';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children(): any;
-		menu(
-			/**
-			 * Shortcut to quickly create a generic action in the context menu.
-			 */
-			action: (icon: string, text: string, action: (event: MouseEvent) => void) => any
-		): any;
-		actions: Record<string, () => void>;
-	}
-
-	let { children, menu, actions, ...rest }: Props = $props();
-
-	let popover = $state<HTMLDivElement>();
-
-	function oncontextmenu(e: MouseEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		popover!.togglePopover();
-		_forcePopover = true;
-	}
-
-	let _forcePopover = false;
-
-	/**
-	 * Workaround for https://github.com/whatwg/html/issues/10905
-	 * @todo Remove when the problem is fixed.
-	 */
-	function onpointerup(e: PointerEvent) {
-		if (!_forcePopover) return;
-		e.stopPropagation();
-		e.preventDefault();
-		popover!.togglePopover();
-		_forcePopover = false;
-	}
-</script>
-
-{#snippet action(i: string, text: string, action: (event: MouseEvent) => void)}
-	<div
-		onclick={e => {
-			e.stopPropagation();
-			e.preventDefault();
-			action(e);
-		}}
-		class="action"
-	>
-		{#if i}<Icon {i} --size="14px" />{/if}
-		{text}
-	</div>
-{/snippet}
-
-<div data-axium-context-menu {oncontextmenu} {onpointerup} {...rest}>
-	{@render children()}
-	<div popover bind:this={popover}>
-		{@render menu(action)}
-	</div>
-</div>
-
-<style>
-	[data-axium-context-menu] {
-		display: contents;
-	}
-
-	div.action:hover {
-		cursor: pointer;
-		background-color: var(--bg-strong);
-		border-radius: 0.25em;
-	}
-</style>