@axium/client 0.14.3 → 0.14.5

package/dist/requests.js

@@ -28,7 +28,7 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         options.body = JSON.stringify(data);
     const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
         ? ''
-        : '?' + new URLSearchParams(data).toString();
+        : '?' + new URLSearchParams(JSON.parse(JSON.stringify(data))).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
     const parts = [];

package/lib/FormDialog.svelte

@@ -4,8 +4,9 @@
 	let {
 		children,
 		dialog = $bindable(),
-		submitText = 'Submit',
 		cancel = () => {},
+		clearOnCancel = false,
+		submitText = 'Submit',
 		submit = (data: object): Promise<any> => Promise.resolve(),
 		pageMode = false,
 		submitDanger = false,
@@ -15,10 +16,11 @@
 	}: {
 		children(): any;
 		dialog?: HTMLDialogElement;
+		clearOnCancel?: boolean;
+		/** A callback for when the dialog is canceled */
+		cancel?(): unknown;
 		/** Change the text displayed for the submit button */
 		submitText?: string;
-		/** Basically a callback for when the dialog is canceled */
-		cancel?(): unknown;
 		/** Called on submission, this should do the actual submission */
 		submit?(data: Record<string, FormDataEntryValue>): Promise<any>;
 		/** Whether to display the dialog as a full-page form */
@@ -36,6 +38,7 @@
 
 	function onclose(e: Event) {
 		e.preventDefault();
+		if (clearOnCancel) dialog!.querySelector('form')!.reset();
 		cancel();
 	}
 

package/lib/UserDiscovery.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
 	import { fetchAPI } from '@axium/client/requests';
-	import { getUserImage, type AccessTarget, type UserPublic } from '@axium/core';
+	import { getUserImage, type UserPublic } from '@axium/core';
 	import { colorHash } from '@axium/core/color';
-	import Icon from './Icon.svelte';
 	import { errorText } from '@axium/core/io';
+	import Icon from './Icon.svelte';
 
 	const {
 		onSelect,
 		enableTags = false,
 		excludeTargets = [],
+		noRoles = false,
+		allowExact,
 	}: {
-		onSelect(target: AccessTarget): unknown;
+		onSelect(target: string): unknown;
 		enableTags?: boolean;
 		excludeTargets?: string[];
+		noRoles?: boolean;
+		allowExact?: boolean;
 	} = $props();
 
-	type Result = { type: 'user'; value: UserPublic; target: string } | { type: 'role' | 'tag'; value: string; target: string };
-
+	type Result = { type: 'user'; value: UserPublic; target: string } | { type: 'role' | 'tag' | 'exact'; value: string; target: string };
 	let results = $state<Result[]>([]);
 	let value = $state<string>();
 	let gotError = $state<boolean>(false);
@@ -30,8 +33,9 @@
 		try {
 			const users = await fetchAPI('POST', 'users/discover', value);
 			results = [
+				allowExact && ({ type: 'exact', value, target: value } as const),
 				...users.map(value => ({ type: 'user', value, target: value.id }) as const),
-				{ type: 'role', value, target: '@' + value } as const,
+				!noRoles && ({ type: 'role', value, target: '@' + value } as const),
 				enableTags && ({ type: 'tag', value, target: '#' + value } as const),
 			].filter<Result>(r => !!r);
 		} catch (e) {
@@ -52,7 +56,7 @@
 </script>
 
 <input bind:value type="text" placeholder="Add users and roles" {onchange} onkeyup={onchange} />
-{#if !gotError}
+{#if !gotError && value}
 	<!-- Don't show results when we can't use the discovery API -->
 	<div class="results">
 		{#each results as result}
@@ -72,6 +76,8 @@
 								><Icon i="hashtag" />{result.value}</span
 							>
 						</span>
+					{:else if result.type == 'exact'}
+						<span class="non-user">{result.value}</span>
 					{/if}
 				</div>
 			{/if}
@@ -119,6 +125,14 @@
 	.result {
 		padding: 0.5em;
 		border-radius: 0.5em;
+
+		.non-user {
+			border-radius: 1em;
+			padding: 0.25em 0.75em;
+			display: inline-flex;
+			align-items: center;
+			gap: 0.25em;
+		}
 	}
 
 	.result:hover {
@@ -126,14 +140,6 @@
 		background-color: var(--bg-strong);
 	}
 
-	.tag-or-role {
-		border-radius: 1em;
-		padding: 0.25em 0.75em;
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25em;
-	}
-
 	img {
 		width: 2em;
 		height: 2em;

package/lib/attachments.ts

@@ -17,8 +17,8 @@ export interface ContextMenuItem {
 /**
  * Attach a context menu to an element with the given actions
  */
-export function contextMenu(...menuItems: (ContextMenuItem | false | null | undefined)[]) {
-	function _attachContextMenu(element: HTMLElement) {
+export function contextMenu(...menuItems: (ContextMenuItem | false | null | undefined)[]): Attachment<HTMLElement> {
+	return function _attachContextMenu(element: HTMLElement) {
 		const menu = document.createElement('div');
 		menu.popover = 'auto';
 		menu.className = 'context-menu';
@@ -88,6 +88,29 @@ export function contextMenu(...menuItems: (ContextMenuItem | false | null | unde
 			for (const icon of mountedIcons) unmount(icon);
 			menu.remove();
 		};
-	}
-	return _attachContextMenu satisfies Attachment<HTMLElement>;
+	};
+}
+
+export function dynamicRows(max: number = 40, min: number = 3): Attachment<HTMLTextAreaElement> {
+	return function _attackDynamicRows(element: HTMLTextAreaElement) {
+		element.style.resize = 'none';
+		// @ts-expect-error field-sizing is not yet in the types
+		element.style.fieldSizing = 'content';
+		element.style.height = 'max-content';
+		element.style.overflowY = 'scroll';
+
+		function update() {
+			if (!element.value) return;
+			element.rows = Math.max(Math.min(element.value.split('\n').length, max), min);
+		}
+
+		if (!navigator.userAgent.includes('Firefox')) return;
+		update();
+		element.addEventListener('input', update);
+		element.addEventListener('keyup', update);
+		return () => {
+			element.removeEventListener('input', update);
+			element.removeEventListener('keyup', update);
+		};
+	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.14.3",
+	"version": "0.14.5",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",