@ternkit/tern 1.3.0 → 1.4.0

package/dist/ui/ConsentScreen.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import Avatar from './Avatar.svelte';
+	import Button from './Button.svelte';
+
+	type Props = {
+		/** From plugins/oidc: provider.ConsentRequest(ctx), returned by the page's load. */
+		consent: { client: string; scopes: string[]; action: string; params: Record<string, string> };
+		/** Who is signed in, so they can tell they're approving as the right account. */
+		user?: { name: string; email?: string };
+		/** Where to switch accounts. */
+		switchHref?: string;
+		level?: 1 | 2 | 3;
+		class?: string;
+	};
+	let { consent, user, switchHref, level = 1, class: klass = '' }: Props = $props();
+</script>
+
+<!-- Asks the signed-in user to let another app use their account. The form posts back to plugins/oidc, which checks the request again. -->
+<section class="tern-consent {klass}" aria-labelledby="tern-consent-title">
+	<svelte:element this={`h${level}`} id="tern-consent-title">{consent.client} wants to access your account</svelte:element>
+	{#if user}
+		<div class="user">
+			<Avatar name={user.name} size="2rem" />
+			<div>
+				<div class="name">{user.name}</div>
+				{#if user.email}<div class="email">{user.email}</div>{/if}
+			</div>
+			{#if switchHref}<a href={switchHref}>Not you?</a>{/if}
+		</div>
+	{/if}
+	<div>
+		<p id="tern-consent-scopes">It will be able to:</p>
+		<ul aria-labelledby="tern-consent-scopes">
+			{#each consent.scopes as scope (scope)}
+				<li>
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+					{scope}
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<p class="note">You can take this back at any time in your account settings.</p>
+	<form method="POST" action={consent.action}>
+		{#each Object.entries(consent.params) as [k, v] (k)}<input type="hidden" name={k} value={v} />{/each}
+		<Button type="submit" name="decision" value="deny" variant="secondary">Deny</Button>
+		<Button type="submit" name="decision" value="allow">Allow</Button>
+	</form>
+</section>
+
+<style>
+	.tern-consent {
+		display: grid;
+		gap: 1.25rem;
+		width: 100%;
+		max-width: 26rem;
+		box-sizing: border-box;
+		padding: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow);
+	}
+	:is(h1, h2, h3) {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+	.user {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		background: var(--tern-surface-2);
+		border-radius: var(--tern-radius);
+	}
+	.user > div {
+		flex: 1;
+		min-width: 0;
+	}
+	.name {
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+	.email {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	p {
+		margin: 0;
+		font-size: 0.875rem;
+	}
+	ul {
+		display: grid;
+		gap: 0.5rem;
+		margin: 0.6rem 0 0;
+		padding: 0;
+		list-style: none;
+	}
+	li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.9375rem;
+	}
+	li svg {
+		color: var(--tern-success);
+		flex: none;
+	}
+	.note {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	form {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+	a {
+		color: var(--tern-accent);
+		font-size: 0.8125rem;
+		font-weight: 550;
+	}
+</style>

package/dist/ui/ConsentScreen.svelte.d.ts

@@ -0,0 +1,21 @@
+type Props = {
+    /** From plugins/oidc: provider.ConsentRequest(ctx), returned by the page's load. */
+    consent: {
+        client: string;
+        scopes: string[];
+        action: string;
+        params: Record<string, string>;
+    };
+    /** Who is signed in, so they can tell they're approving as the right account. */
+    user?: {
+        name: string;
+        email?: string;
+    };
+    /** Where to switch accounts. */
+    switchHref?: string;
+    level?: 1 | 2 | 3;
+    class?: string;
+};
+declare const ConsentScreen: import("svelte").Component<Props, {}, "">;
+type ConsentScreen = ReturnType<typeof ConsentScreen>;
+export default ConsentScreen;

package/dist/ui/ContextMenu.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import MenuList from './MenuList.svelte';
+	import type { MenuItem } from './menu.js';
+
+	type Props = {
+		items: MenuItem[];
+		/** Names the menu for screen readers, such as "File actions". */
+		label: string;
+		/** The area that has the menu. Right-click, a long press, Shift+F10 or the menu key opens it. */
+		children: Snippet;
+		class?: string;
+	};
+	let { items, label, children, class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let at = $state<{ x: number; y: number } | null>(null);
+	let returnTo: HTMLElement | null = null;
+	let press: { timer: ReturnType<typeof setTimeout>; x: number; y: number } | null = null;
+
+	function openAt(x: number, y: number) {
+		returnTo = document.activeElement as HTMLElement | null;
+		at = { x, y };
+	}
+
+	function cancelPress() {
+		if (press) clearTimeout(press.timer);
+		press = null;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="tern-context {klass}"
+	oncontextmenu={(e) => {
+		e.preventDefault();
+		cancelPress();
+		openAt(e.clientX, e.clientY);
+	}}
+	onkeydown={(e) => {
+		if ((e.key === 'F10' && e.shiftKey) || e.key === 'ContextMenu') {
+			e.preventDefault();
+			const r = (e.target as HTMLElement).getBoundingClientRect();
+			openAt(r.left + 8, r.bottom);
+		}
+	}}
+	onpointerdown={(e) => {
+		// iOS doesn't fire contextmenu on a long press.
+		if (e.pointerType !== 'touch') return;
+		const { clientX: x, clientY: y } = e;
+		press = { x, y, timer: setTimeout(() => openAt(x, y), 550) };
+	}}
+	onpointermove={(e) => {
+		if (press && Math.hypot(e.clientX - press.x, e.clientY - press.y) > 8) cancelPress();
+	}}
+	onpointerup={cancelPress}
+	onpointercancel={cancelPress}
+>
+	{@render children()}
+</div>
+{#if at}
+	<MenuList
+		{items}
+		id="tern-context-{uid}"
+		{label}
+		anchor={at}
+		onclose={(how) => {
+			at = null;
+			if (how.returnFocus) returnTo?.focus();
+		}}
+	/>
+{/if}
+
+<style>
+	.tern-context {
+		-webkit-touch-callout: none;
+	}
+</style>

package/dist/ui/ContextMenu.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { MenuItem } from './menu.js';
+type Props = {
+    items: MenuItem[];
+    /** Names the menu for screen readers, such as "File actions". */
+    label: string;
+    /** The area that has the menu. Right-click, a long press, Shift+F10 or the menu key opens it. */
+    children: Snippet;
+    class?: string;
+};
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/ui/DataTable.svelte

@@ -0,0 +1,277 @@
+<script lang="ts" generics="Row">
+	import type { Snippet } from 'svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Input from './Input.svelte';
+	import Pagination from './Pagination.svelte';
+	import type { Column, DataQuery } from './table.js';
+	import { matches } from './options.js';
+
+
+	type Props = {
+		columns: Column<Row>[];
+		/** All rows, or with onquery, the current page's. */
+		rows: Row[];
+		caption: string;
+		hideCaption?: boolean;
+		/** A stable key per row, for selection. */
+		key: (row: Row) => string;
+		/** Rows per page; 0 shows all. */
+		pageSize?: number;
+		/** Show a search box that filters rows. */
+		searchable?: boolean;
+		/** Checkboxes to select rows; bind the selected keys. */
+		selectable?: boolean;
+		selected?: string[];
+		/** Sorting, searching and paging happen elsewhere, such as in a Go endpoint: this runs on each change, and you set rows and total. */
+		onquery?: (q: DataQuery) => void;
+		/** With onquery: how many rows match in all. */
+		total?: number;
+		/** Buttons for selected rows or the whole table, above it. */
+		toolbar?: Snippet<[string[]]>;
+		/** Actions at the end of each row. */
+		actions?: Snippet<[Row]>;
+		empty?: string;
+		/** Dims the rows while new ones load, keeping the frame. */
+		loading?: boolean;
+		class?: string;
+	};
+	let {
+		columns,
+		rows,
+		caption,
+		hideCaption = false,
+		key,
+		pageSize = 10,
+		searchable = false,
+		selectable = false,
+		selected = $bindable([]),
+		onquery,
+		total,
+		toolbar,
+		actions,
+		empty = 'No rows match',
+		loading = false,
+		class: klass = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	let sort = $state<DataQuery['sort']>(null);
+	let search = $state('');
+	let page = $state(1);
+
+	const cell = (row: Row, col: Column<Row>) => (col.value ? col.value(row) : (row as Record<string, unknown>)[col.key]);
+	const compare = (a: unknown, b: unknown) => {
+		if (a == null) return b == null ? 0 : 1;
+		if (b == null) return -1;
+		if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+		if (typeof a === 'number' && typeof b === 'number') return a - b;
+		return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
+	};
+
+	const filtered = $derived(onquery || !search ? rows : rows.filter((r) => matches(columns.map((c) => String(cell(r, c) ?? '')).join(' '), search)));
+	const sorted = $derived.by(() => {
+		if (onquery || !sort) return filtered;
+		const col = columns.find((c) => c.key === sort!.key);
+		if (!col) return filtered;
+		const dir = sort.dir === 'asc' ? 1 : -1;
+		return [...filtered].sort((a, b) => compare(cell(a, col), cell(b, col)) * dir);
+	});
+	const count = $derived(onquery ? (total ?? rows.length) : sorted.length);
+	const pages = $derived(pageSize ? Math.max(1, Math.ceil(count / pageSize)) : 1);
+	const shown = $derived(onquery || !pageSize ? sorted : sorted.slice((page - 1) * pageSize, page * pageSize));
+
+	$effect(() => {
+		if (page > pages) page = pages;
+	});
+	$effect(() => {
+		onquery?.({ page, pageSize, sort, search });
+	});
+
+	function toggleSort(col: Column<Row>) {
+		if (!sort || sort.key !== col.key) sort = { key: col.key, dir: 'asc' };
+		else if (sort.dir === 'asc') sort = { key: col.key, dir: 'desc' };
+		else sort = null;
+		page = 1;
+	}
+
+	const shownKeys = $derived(shown.map(key));
+	const allShown = $derived(shownKeys.length > 0 && shownKeys.every((k) => selected.includes(k)));
+	const someShown = $derived(!allShown && shownKeys.some((k) => selected.includes(k)));
+	function toggleAll() {
+		selected = allShown ? selected.filter((k) => !shownKeys.includes(k)) : [...new Set([...selected, ...shownKeys])];
+	}
+	function toggle(k: string) {
+		selected = selected.includes(k) ? selected.filter((x) => x !== k) : [...selected, k];
+	}
+	const status = $derived(
+		count === 0 ? empty : `${pageSize ? `${(page - 1) * pageSize + 1}–${Math.min(count, page * pageSize)} of ` : ''}${count} ${count === 1 ? 'row' : 'rows'}${selected.length ? `, ${selected.length} selected` : ''}`
+	);
+</script>
+
+<div class="tern-datatable {klass}">
+	{#if searchable || toolbar}
+		<div class="bar">
+			{#if searchable}
+				<div class="search">
+					<Input
+						type="search"
+						placeholder="Search…"
+						aria-label="Search {caption}"
+						aria-controls="tern-datatable-{uid}"
+						bind:value={search}
+						oninput={() => (page = 1)}
+					/>
+				</div>
+			{/if}
+			{#if toolbar}<div class="tools">{@render toolbar(selected)}</div>{/if}
+		</div>
+	{/if}
+	<div class="wrap" class:loading>
+		<table class="tern-table" id="tern-datatable-{uid}" aria-busy={loading || undefined}>
+			<caption class:tern-sr-only={hideCaption}>{caption}</caption>
+			<thead>
+				<tr>
+					{#if selectable}
+						<th scope="col" class="select">
+							<Checkbox checked={allShown} indeterminate={someShown} onchange={toggleAll} aria-label="Select all rows on this page" />
+						</th>
+					{/if}
+					{#each columns as col (col.key)}
+						<th scope="col" style:text-align={col.align} style:width={col.width} aria-sort={sort && sort.key === col.key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : col.sortable ? 'none' : undefined}>
+							{#if col.sortable}
+								<button type="button" class="sort" onclick={() => toggleSort(col)}>
+									{col.header}
+									<svg aria-hidden="true" viewBox="0 0 16 16" width="12" height="12" class:on={sort?.key === col.key}>
+										{#if sort && sort.key === col.key && sort.dir === 'desc'}<path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />{:else if sort?.key === col.key}<path d="M4 10l4-4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />{:else}<path d="M5 6.5l3-3 3 3M5 9.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />{/if}
+									</svg>
+								</button>
+							{:else}
+								{col.header}
+							{/if}
+						</th>
+					{/each}
+					{#if actions}<th scope="col"><span class="tern-sr-only">Actions</span></th>{/if}
+				</tr>
+			</thead>
+			<tbody>
+				{#each shown as row (key(row))}
+					{@const k = key(row)}
+					<tr class:selected={selected.includes(k)}>
+						{#if selectable}
+							<td class="select"><Checkbox checked={selected.includes(k)} onchange={() => toggle(k)} aria-label="Select row {String(cell(row, columns[0]!) ?? k)}" /></td>
+						{/if}
+						{#each columns as col (col.key)}
+							<td style:text-align={col.align}>
+								{#if col.cell}{@render col.cell(row)}{:else}{(row as Record<string, unknown>)[col.key] ?? ''}{/if}
+							</td>
+						{/each}
+						{#if actions}<td class="actions">{@render actions(row)}</td>{/if}
+					</tr>
+				{:else}
+					<tr><td class="empty" colspan={columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0)}>{empty}</td></tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+	<div class="foot">
+		<span class="status" role="status">{status}</span>
+		{#if pages > 1}<Pagination bind:page {pages} label="{caption} pages" />{/if}
+	</div>
+</div>
+
+<style>
+	.tern-datatable {
+		display: grid;
+		gap: 0.75rem;
+	}
+	.bar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	.search {
+		width: min(18rem, 100%);
+	}
+	.tools {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.wrap {
+		overflow-x: auto;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		transition: opacity var(--tern-duration);
+	}
+	.loading {
+		opacity: 0.55;
+	}
+	caption {
+		padding: 0.75rem;
+		text-align: start;
+		font-weight: 600;
+		color: var(--tern-fg);
+	}
+	.sort {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.15rem 0.25rem;
+		margin: -0.15rem -0.25rem;
+		font: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+		background: transparent;
+		border: 0;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.sort:hover {
+		color: var(--tern-fg);
+	}
+	.sort:focus-visible {
+		outline: 2px solid var(--tern-ring);
+	}
+	.sort svg {
+		opacity: 0.6;
+	}
+	.sort svg.on {
+		opacity: 1;
+		color: var(--tern-fg);
+	}
+	.select {
+		width: 2.25rem;
+	}
+	tr.selected td {
+		background: var(--tern-accent-soft);
+	}
+	td {
+		font-variant-numeric: tabular-nums;
+	}
+	.actions {
+		text-align: end;
+		white-space: nowrap;
+	}
+	.wrap :global(tbody tr:last-child td) {
+		border-bottom: 0;
+	}
+	.empty {
+		padding: 2rem;
+		text-align: center;
+		color: var(--tern-muted);
+	}
+	.foot {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	.status {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+</style>

package/dist/ui/DataTable.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { Column, DataQuery } from './table.js';
+declare function $$render<Row>(): {
+    props: {
+        columns: Column<Row>[];
+        /** All rows, or with onquery, the current page's. */
+        rows: Row[];
+        caption: string;
+        hideCaption?: boolean;
+        /** A stable key per row, for selection. */
+        key: (row: Row) => string;
+        /** Rows per page; 0 shows all. */
+        pageSize?: number;
+        /** Show a search box that filters rows. */
+        searchable?: boolean;
+        /** Checkboxes to select rows; bind the selected keys. */
+        selectable?: boolean;
+        selected?: string[];
+        /** Sorting, searching and paging happen elsewhere, such as in a Go endpoint: this runs on each change, and you set rows and total. */
+        onquery?: (q: DataQuery) => void;
+        /** With onquery: how many rows match in all. */
+        total?: number;
+        /** Buttons for selected rows or the whole table, above it. */
+        toolbar?: Snippet<[string[]]>;
+        /** Actions at the end of each row. */
+        actions?: Snippet<[Row]>;
+        empty?: string;
+        /** Dims the rows while new ones load, keeping the frame. */
+        loading?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<Row> = InstanceType<typeof DataTable<Row>>;
+export default DataTable;