@axium/contacts 0.1.1 → 0.2.0

package/lib/ContactPicture.svelte

@@ -40,6 +40,7 @@
 		border: 1px solid #8888;
 		vertical-align: middle;
 		margin-right: 0.5em;
+		object-fit: cover;
 		/* see https://drafts.csswg.org/css-image-animation-1/ */
 		image-animation: stopped;
 	}

package/lib/InitForm.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { dynamicRows } from '@axium/client/attachments';
-	import { Icon, LocationSelect, ZodInput } from '@axium/client/components';
+	import { Icon, LocationSelect, ZodInput, Discovery, discovery } from '@axium/client/components';
 	import { ContactURL, Custom, Email, Init, Phone, Relationship, SigDate, type Contact } from '@axium/contacts';
 	import ContactPicture from './ContactPicture.svelte';
 	import DateSelect from './DateSelect.svelte';
-	import Discovery from './Discovery.svelte';
+	import { contactDiscovery } from './discovery.svelte';
 	import { name as formatName } from '@axium/contacts/client/format';
 
 	let showDetailed = $state(false);
@@ -140,8 +140,10 @@
 			{#if i}<span />{/if}
 			<div class="section">
 				<Discovery
-					exclude={[init.id, ...init.relationships.map(r => r.to)].filter((v): v is string => !!v)}
-					onSelect={id => (rel.to = id)}
+					onSelect={result => (rel.to = result.contact.id)}
+					sources={[contactDiscovery]}
+					exclude={target =>
+						[init.id, ...init.relationships.map(r => r.to)].filter((v): v is string => !!v).includes(target.contact.id)}
 				/>
 				<ZodInput
 					bind:rootValue={init}

package/lib/discovery.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import type { discovery } from '@axium/client/components';
+	import { fetchAPI } from '@axium/client/requests';
+	import type { NoExternal } from '@axium/contacts';
+	import { format } from '@axium/contacts/client';
+
+	export const contactDiscovery: discovery.Source<{ contact: NoExternal }> = {
+		name: 'contact',
+		async get(search) {
+			const contacts = await fetchAPI('POST', 'contact-discovery', search);
+			return contacts.map(contact => ({ contact }));
+		},
+		get render() {
+			return renderContact;
+		},
+	};
+</script>
+
+{#snippet renderContact(result: { contact: NoExternal })}
+	<span>{format.name(result.contact)}</span>
+{/snippet}

package/lib/index.ts

@@ -1,7 +1,7 @@
 export { default as ContactCard } from './ContactCard.svelte';
 export { default as ContactPicture } from './ContactPicture.svelte';
 export { default as DateSelect } from './DateSelect.svelte';
-export { default as Discovery } from './Discovery.svelte';
+export { contactDiscovery } from './discovery.svelte';
 export { default as Field } from './Field.svelte';
 export { default as InitForm } from './InitForm.svelte';
 export { default as List } from './List.svelte';

package/locales/en.json

@@ -39,10 +39,6 @@
 			"toast_updated": "Updated contact picture",
 			"toast_removed": "Removed contact picture"
 		},
-		"Discovery": {
-			"placeholder": "Search for a contact",
-			"no_results": "No contacts found"
-		},
 		"delete_confirm": "Are you sure you want to delete this contact?"
 	},
 	"contact": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/contacts",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Contacts for Axium",
 	"funding": {
@@ -38,7 +38,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.22.0",
+		"@axium/client": ">=0.23.0",
 		"@axium/core": ">=0.26.0",
 		"@axium/server": ">=0.42.0",
 		"@sveltejs/kit": "^2.27.3",

package/lib/Discovery.svelte

@@ -1,101 +0,0 @@
-<script lang="ts">
-	import { text } from '@axium/client';
-	import { fetchAPI } from '@axium/client/requests';
-	import type { NoExternal } from '@axium/contacts';
-	import { format } from '@axium/contacts/client';
-	import { errorText } from 'ioium';
-
-	const { onSelect, exclude = [] }: { onSelect(id: string): unknown; exclude?: string[] } = $props();
-
-	let results = $state<NoExternal[]>([]),
-		value = $state<string>(),
-		gotError = $state<boolean>(false);
-
-	async function oninput() {
-		if (!value || !value.length) {
-			results = [];
-			return;
-		}
-
-		try {
-			results = await fetchAPI('POST', 'contact-discovery', value);
-		} catch (e) {
-			gotError = true;
-			console.warn('Can not use contact discovery:', errorText(e));
-			results = [];
-		}
-	}
-
-	function select(target: NoExternal) {
-		return (e: Event) => {
-			e.stopPropagation();
-			onSelect(target.id);
-			results = [];
-			value = format.name(target);
-		};
-	}
-</script>
-
-<input bind:value type="text" placeholder={text('contacts.Discovery.placeholder')} {oninput} />
-{#if !gotError && value}
-	<!-- Don't show results when we can't use the discovery API -->
-	<div class="results">
-		{#each results as result}
-			{#if !exclude.includes(result.id)}
-				<div class="result" onclick={select(result)}>
-					<span>{format.name(result)}</span>
-				</div>
-			{/if}
-		{:else}
-			<i>{text('contacts.Discovery.no_results')}</i>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	:host {
-		anchor-scope: --discovery-input;
-	}
-
-	input {
-		anchor-name: --discovery-input;
-	}
-
-	input:focus + .results,
-	.results:active {
-		display: flex;
-		animation: var(--A-zoom);
-	}
-
-	.results {
-		position: fixed;
-		position-anchor: --discovery-input;
-		inset: anchor(bottom) anchor(right) auto anchor(left);
-		display: none;
-		flex-direction: column;
-		gap: 0.25em;
-		height: fit-content;
-		max-height: 25em;
-		background-color: var(--bg-accent);
-		border-radius: 0.25em 0.25em 0.75em 0.75em;
-		padding: 1em;
-		border: var(--border-accent);
-		align-items: stretch;
-
-		i {
-			text-align: center;
-		}
-	}
-
-	.result {
-		padding: 0.25em 0.75em;
-		border-radius: 0.5em;
-		display: inline-flex;
-		align-items: center;
-	}
-
-	.result:hover {
-		cursor: pointer;
-		background-color: var(--bg-strong);
-	}
-</style>