@axium/client 0.2.0 → 0.3.0

package/lib/AccessControl.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import UserCard from './UserCard.svelte';
+	import type { Permission, AccessControl } from '@axium/core/access';
+	import { permissionNames } from '@axium/core/access';
+	import type { Entries } from 'utilium';
+
+	const { control, editable }: { control: AccessControl; editable: boolean } = $props();
+
+	const perm = $derived(permissionNames[control.permission as Permission]);
+
+	const permEntries = Object.entries(permissionNames) as any as Entries<typeof permissionNames>;
+</script>
+
+<div class="AccessControl">
+	{#if !control.user}<i>Unknown</i>
+	{:else}
+		<UserCard user={control.user} />
+		{#if editable}
+			<input type="hidden" name="userId" value={control.user.id} />
+			<select name="permission">
+				{#each permEntries as [key, name]}
+					<option value={key} selected={key == control.permission}>{name}</option>
+				{/each}
+			</select>
+		{:else}
+			<span>{perm}</span>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.AccessControl {
+		display: flex;
+		gap: 1em;
+		padding: 1em 2em;
+	}
+</style>

package/lib/AccessControlDialog.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import FormDialog from './FormDialog.svelte';
+	import AccessControl from './AccessControl.svelte';
+
+	let { item, editable } = $props();
+</script>
+
+<FormDialog submitText="Save">
+	{#each item.acl as control}
+		<AccessControl {control} {editable} />
+	{/each}
+</FormDialog>

package/lib/AppMenu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { fetchAPI } from '@axium/client/requests';
+	import Icon from './Icon.svelte';
+	import Popover from './Popover.svelte';
+</script>
+
+<Popover>
+	{#snippet toggle()}
+		<button style:display="contents">
+			<Icon i="grid" --size="1.5em" />
+		</button>
+	{/snippet}
+
+	{#await fetchAPI('GET', 'apps')}
+		<i>Loading...</i>
+	{:then apps}
+		{#each apps as app}
+			<a class="menu-item" href="/{app.id}">
+				{#if app.image}
+					<img src={app.image} alt={app.name} width="1em" height="1em" />
+				{:else if app.icon}
+					<Icon i={app.icon} --size="1.5em" />
+				{:else}
+					<Icon i="image-circle-xmark" --size="1.5em" />
+				{/if}
+				<span>{app.name}</span>
+			</a>
+		{:else}
+			<i>No apps available.</i>
+		{/each}
+	{:catch}
+		<i>Couldn't load apps.</i>
+	{/await}
+</Popover>

package/lib/ClipboardCopy.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { wait } from 'utilium';
+	import Icon from './Icon.svelte';
+
+	const { value, type = 'text/plain' }: { value: BlobPart; type?: string } = $props();
+
+	let success = $state(false);
+
+	async function onclick() {
+		const blob = new Blob([value], { type });
+		const item = new ClipboardItem({ [type]: blob });
+		await navigator.clipboard.write([item]);
+		success = true;
+		await wait(3000);
+		success = false;
+	}
+</script>
+
+<button {onclick}>
+	{#if success}
+		<span transition:fade><Icon i="check" /></span>
+	{:else}
+		<span transition:fade><Icon i="copy" /></span>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		border: none;
+		background: transparent;
+	}
+
+	span {
+		position: absolute;
+		inset: 0;
+	}
+</style>

package/lib/Dialog.svelte

@@ -0,0 +1,51 @@
+<script>
+	let { children, dialog = $bindable(), ...rest } = $props();
+</script>
+
+<dialog bind:this={dialog} {...rest}>
+	{@render children()}
+</dialog>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	dialog {
+		border-radius: 1em;
+		background: var(--bg-menu);
+		border: 1px solid #8888;
+		padding: 1em;
+
+		form {
+			display: contents;
+		}
+	}
+
+	dialog::backdrop {
+		background: #0003;
+	}
+
+	dialog[open] {
+		animation: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
+	}
+
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+
+	dialog[open]::backdrop {
+		animation: fade 0.25s ease-out;
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/lib/FormDialog.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import Dialog from './Dialog.svelte';
+
+	function resolveRedirectAfter() {
+		const url = new URL(location.href);
+		const maybe = url.searchParams.get('after');
+		if (!maybe || maybe == url.pathname) return '/';
+		for (const prefix of ['/api/']) if (maybe.startsWith(prefix)) return '/';
+		return maybe || '/';
+	}
+
+	let {
+		children,
+		dialog = $bindable(),
+		submitText = 'Submit',
+		cancel = () => {},
+		submit = (data: object): Promise<any> => Promise.resolve(),
+		pageMode = false,
+		submitDanger = false,
+		header,
+		footer,
+		...rest
+	}: {
+		children(): any;
+		dialog?: HTMLDialogElement;
+		/** 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 */
+		pageMode?: boolean;
+		submitDanger?: boolean;
+		header?(): any;
+		footer?(): any;
+	} = $props();
+
+	let error = $state<string>();
+
+	$effect(() => {
+		if (pageMode) dialog!.showModal();
+	});
+
+	function onclose(e: MouseEvent) {
+		e.preventDefault();
+		cancel();
+	}
+
+	function onsubmit(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
+		e.preventDefault();
+		const data = Object.fromEntries(new FormData(e.currentTarget));
+		submit(data)
+			.then(result => {
+				if (pageMode) window.location.href = resolveRedirectAfter();
+				else dialog!.close();
+			})
+			.catch((e: any) => {
+				if (!e) error = 'An unknown error occurred';
+				else if (typeof e == 'object' && 'message' in e) error = e.message;
+				else error = e;
+			});
+	}
+</script>
+
+{#snippet submitButton()}
+	<button type="submit" class={['submit', submitDanger && 'danger']}>{submitText}</button>
+{/snippet}
+
+<Dialog bind:dialog {onclose} {...rest}>
+	{@render header?.()}
+	<form {onsubmit} class="main" method="dialog">
+		{#if error}
+			<div class="error">{error}</div>
+		{/if}
+		{@render children()}
+		{#if pageMode}
+			{@render submitButton()}
+		{:else}
+			<div class="actions">
+				<button type="button" onclick={() => dialog!.close()}>Cancel</button>
+				{@render submitButton()}
+			</div>
+		{/if}
+	</form>
+	{@render footer?.()}
+</Dialog>
+
+<style>
+	.actions {
+		display: flex;
+		gap: 1em;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+</style>

package/lib/Icon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	const { i, ...rest } = $props();
+	const [style, id] = $derived(i.includes('/') ? i.split('/') : ['solid', i]);
+	const href = $derived(`/icons/${style}.svg#${id}`);
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" {...rest}>
+	<use {href} />
+</svg>
+
+<style>
+	svg {
+		width: var(--size, 1em);
+		height: var(--size, 1em);
+		display: inline-block;
+		fill: var(--fill, hsl(var(--hue) 0 var(--fg-light)));
+	}
+</style>

package/lib/Login.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { loginByEmail } from '@axium/client/user';
+	import FormDialog from './FormDialog.svelte';
+
+	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
+
+	function submit(data: { email: string }) {
+		if (typeof data.email != 'string') {
+			throw 'Tried to upload a file for an email. Huh?!';
+		}
+
+		return loginByEmail(data.email);
+	}
+</script>
+
+<FormDialog bind:dialog submitText="Login" {submit} pageMode={fullPage}>
+	<div>
+		<label for="email">Email</label>
+		<input name="email" type="email" required />
+	</div>
+	{#snippet footer()}
+		{#if fullPage}
+			<div class="footer">
+				<a href="/register">Register instead</a>
+			</div>
+		{/if}
+	{/snippet}
+</FormDialog>
+
+<style>
+	.footer {
+		margin-bottom: 1em;
+		text-align: center;
+		background: none;
+	}
+</style>

package/lib/Logout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { logoutCurrentSession } from '@axium/client/user';
+	import FormDialog from './FormDialog.svelte';
+
+	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
+</script>
+
+<FormDialog
+	pageMode={fullPage}
+	bind:dialog
+	submitText="Log Out"
+	submit={() => logoutCurrentSession().then(() => (window.location.href = '/'))}
+>
+	<p>Are you sure you want to log out?</p>
+	{#if fullPage}
+		<button
+			onclick={e => {
+				e.preventDefault();
+				dialog!.close();
+				history.back();
+			}}>Take me back</button
+		>
+	{/if}
+</FormDialog>

package/lib/NumberBar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	const { min = 0, max, value, text } = $props();
+</script>
+
+<div class="Bar">
+	<div class="fill" style="width: {((value - min) / (max - min)) * 100}%"></div>
+	{#if text}<span class="text">{text}</span>{/if}
+</div>
+
+<style>
+	.Bar {
+		position: relative;
+		border-radius: calc(var(--height, 2em) / 2);
+		height: var(--height, 2em);
+		background-color: hsl(0 0 calc(var(--bg-light) + (var(--light-step) * 2)));
+		overflow: hidden;
+	}
+
+	.text {
+		position: absolute;
+		inset: calc(calc(var(--height, 2em) - 1em) / 2) 1em;
+		width: fit-content;
+		line-height: 1;
+	}
+
+	.fill {
+		border-radius: calc(var(--height, 2em) / 2);
+		height: 100%;
+		background-color: var(--fill, #465);
+	}
+</style>

package/lib/Popover.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	const { children, toggle }: { children(): any; toggle?(): any } = $props();
+
+	let popover = $state<HTMLDivElement>();
+
+	function onclick(e: MouseEvent) {
+		e.stopPropagation();
+		popover?.togglePopover();
+	}
+</script>
+
+<div onclick={e => e.stopPropagation()}>
+	<div style:display="contents" {onclick}>
+		{#if toggle}
+			{@render toggle()}
+		{:else}
+			<span class="popover-toggle">
+				<Icon i="ellipsis" />
+			</span>
+		{/if}
+	</div>
+
+	<div popover bind:this={popover}>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.popover-toggle:hover {
+		cursor: pointer;
+	}
+
+	[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/Register.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { register } from '@axium/client/user';
+	import FormDialog from './FormDialog.svelte';
+
+	let { dialog = $bindable(), fullPage = false }: { dialog?: HTMLDialogElement; fullPage?: boolean } = $props();
+</script>
+
+<FormDialog bind:dialog submitText="Register" submit={register} pageMode={fullPage}>
+	<div>
+		<label for="name">Display Name</label>
+		<input name="name" type="text" required />
+	</div>
+	<div>
+		<label for="email">Email</label>
+		<input name="email" type="email" required />
+	</div>
+	{#snippet footer()}
+		{#if fullPage}
+			<div class="footer">
+				<a href="/login">Login instead</a>
+			</div>
+		{/if}
+	{/snippet}
+</FormDialog>
+
+<style>
+	.footer {
+		margin-bottom: 1em;
+		text-align: center;
+		background: none;
+	}
+</style>

package/lib/Toast.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	const { enabled, children, delay = 5000, duration = 1000, ...rest } = $props();
+
+	let hiding = $state(false);
+
+	const show = $derived(enabled && !hiding);
+</script>
+
+{#if show}
+	<div
+		class="Toast"
+		in:fade|global={{ duration }}
+		onintroend={() => (hiding = true)}
+		out:fade|global={{ delay, duration }}
+		onoutroend={() => (hiding = false)}
+		{...rest}
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.Toast {
+		position: fixed;
+		bottom: 1em;
+		left: calc(50% - 10em);
+		right: calc(50% - 10em);
+		width: 20em;
+		padding: 0.5em 1em;
+		border-radius: 1em;
+		opacity: 0.5;
+	}
+</style>

package/lib/Upload.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { forMime } from '@axium/core/icons';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let {
+		name = 'files',
+		input = $bindable(),
+		files = $bindable(),
+		...rest
+	}: HTMLInputAttributes & { input?: HTMLInputElement } = $props();
+
+	const id = $props.id();
+</script>
+
+<div>
+	<label for={id} class={[files?.length && 'file']}>
+		{#each files! as file}
+			<Icon i={forMime(file.type)} />
+			<span>{file.name}</span>
+			<button
+				onclick={e => {
+					e.preventDefault();
+					const dt = new DataTransfer();
+					for (let f of files!) if (file !== f) dt.items.add(f);
+					input!.files = files = dt.files;
+				}}
+				style:display="contents"
+			>
+				<Icon i="trash" />
+			</button>
+		{:else}
+			<Icon i="upload" /> Upload
+		{/each}
+	</label>
+
+	<input bind:this={input} bind:files {name} {id} type="file" {...rest} />
+</div>
+
+<style>
+	input {
+		display: none;
+	}
+
+	label {
+		padding: 0.5em 1em;
+		border: 1px solid hsl(0 0 calc(var(--fg-light) + var(--light-step)) / 80);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		border-radius: 0.5em;
+		width: 20em;
+	}
+
+	label.file {
+		display: grid;
+		grid-template-columns: 2em 1fr 2em;
+	}
+</style>

package/lib/UserCard.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { User } from '@axium/core/user';
+	import { getUserImage } from '@axium/core';
+
+	const {
+		user,
+		compact = false,
+		self = false,
+		href = `/users/${user.id}`,
+		you = false,
+	}: {
+		user: Partial<User>;
+		/** If true, don't show the picture */
+		compact?: boolean;
+		/** Whether the user is viewing their own profile */
+		self?: boolean;
+		/** The URL to link to */
+		href?: string;
+		/** Whether to display a "You" label if `self` */
+		you?: boolean;
+	} = $props();
+</script>
+
+<a class={['User', self && 'self']} {href}>
+	{#if !compact}
+		<img src={getUserImage(user)} alt={user.name} />
+	{/if}
+	{user.name}
+	{#if self && you}
+		<span class="subtle">(You)</span>
+	{/if}
+</a>
+
+<style>
+	.User {
+		cursor: pointer;
+		width: max-content;
+		height: max-content;
+	}
+
+	img {
+		width: 2em;
+		height: 2em;
+		border-radius: 50%;
+		vertical-align: middle;
+		margin-right: 0.5em;
+	}
+</style>

package/lib/WithContextMenu.svelte

@@ -0,0 +1,73 @@
+<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>

package/lib/index.ts

@@ -0,0 +1,16 @@
+export { default as AccessControl } from './AccessControl.svelte';
+export { default as AccessControlDialog } from './AccessControlDialog.svelte';
+export { default as AppMenu } from './AppMenu.svelte';
+export { default as ClipboardCopy } from './ClipboardCopy.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Login } from './Login.svelte';
+export { default as Logout } from './Logout.svelte';
+export { default as NumberBar } from './NumberBar.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as Register } from './Register.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Upload } from './Upload.svelte';
+export { default as UserCard } from './UserCard.svelte';
+export { default as WithContextMenu } from './WithContextMenu.svelte';

package/lib/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": ["../tsconfig.json"],
+	"compilerOptions": {
+		"target": "ES2023",
+		"strict": true,
+		"rootDir": ".",
+		"lib": ["ESNext", "DOM", "DOM.Iterable"]
+	},
+	"include": ["./**/*"],
+	"references": [{ "path": ".." }]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -19,7 +19,8 @@
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"files": [
-		"dist"
+		"dist",
+		"lib"
 	],
 	"exports": {
 		".": "./dist/index.js",