@axium/contacts 0.1.0 → 0.1.2

package/dist/client/format.d.ts

@@ -1,4 +1,4 @@
-import type { Address, Contact, InitNoExternal, Phone } from '../common.js';
+import type { Address, Contact, InitNoExternal, Phone, SigDateLike } from '../common.js';
 /**
  * Display name for contact
  * @todo localize
@@ -17,12 +17,5 @@ export declare function phoneDefault(contact: Contact): string;
  */
 export declare function address(addr: Address): string;
 export declare function birthDate(contact: Contact): string;
-interface SigDateLike {
-    year?: number | null;
-    month?: number | null;
-    day?: number | null;
-    label?: string | null;
-}
 export declare function date(sig: SigDateLike): string;
 export declare function job(contact: InitNoExternal): string;
-export {};

package/dist/common.d.ts

@@ -35,6 +35,12 @@ export declare const SigDate: z.ZodObject<{
 }, z.core.$strip>;
 export interface SigDate extends z.infer<typeof SigDate> {
 }
+export interface SigDateLike {
+    year?: number | null;
+    month?: number | null;
+    day?: number | null;
+    label?: string | null;
+}
 export declare const Relationship: z.ZodObject<{
     to: z.ZodUUID;
     label: z.ZodString;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './common.js';
+export * from './vcard.js';

package/dist/index.js

@@ -1 +1,2 @@
 export * from './common.js';
+export * from './vcard.js';

package/dist/vcard.d.ts

@@ -0,0 +1,2 @@
+import type { Contact } from '@axium/contacts';
+export declare function toVCard(contact: Contact): string;

package/dist/vcard.js

@@ -0,0 +1,82 @@
+function encodeDate(date) {
+    const y = date.year ? String(date.year).padStart(4, '0') : '--';
+    const m = date.month ? String(date.month).padStart(2, '0') : '-';
+    const d = date.day ? String(date.day).padStart(2, '0') : '';
+    return `${y}-${m}-${d}`;
+}
+export function toVCard(contact) {
+    const lines = ['BEGIN:VCARD', 'VERSION:3.0'];
+    function escape(str) {
+        if (!str)
+            return '';
+        return str.replace(/([,;\\])/g, '\\$1').replace(/\n/g, '\\n');
+    }
+    const n = [contact.surname, contact.givenName, contact.givenName2, contact.prefix, contact.suffix];
+    if (n.some(Boolean)) {
+        lines.push(`N:${n.map(escape).join(';')}`);
+    }
+    if (contact.display) {
+        lines.push(`FN:${escape(contact.display)}`);
+    }
+    else {
+        const full = [contact.prefix, contact.givenName, contact.givenName2, contact.surname, contact.suffix].filter(Boolean).join(' ');
+        lines.push(`FN:${escape(full) || 'Unknown'}`);
+    }
+    if (contact.nickname)
+        lines.push(`NICKNAME:${escape(contact.nickname)}`);
+    if (contact.company || contact.department) {
+        lines.push(`ORG:${escape(contact.company)};${escape(contact.department)}`);
+    }
+    if (contact.jobTitle)
+        lines.push(`TITLE:${escape(contact.jobTitle)}`);
+    if (contact.notes)
+        lines.push(`NOTE:${escape(contact.notes)}`);
+    if (contact.birthYear || contact.birthMonth || contact.birthDay) {
+        lines.push(`BDAY:${encodeDate({ year: contact.birthYear, month: contact.birthMonth, day: contact.birthDay })}`);
+    }
+    for (const url of contact.urls) {
+        lines.push(`URL:${escape(url)}`);
+    }
+    for (const email of contact.emails) {
+        const type = email.label ? `;TYPE=${escape(email.label)}` : '';
+        const pref = email.isDefault ? ';TYPE=PREF' : '';
+        lines.push(`EMAIL${type}${pref}:${escape(email.email)}`);
+    }
+    for (const phone of contact.phones) {
+        const type = phone.label ? `;TYPE=${escape(phone.label)}` : '';
+        const pref = phone.isDefault ? ';TYPE=PREF' : '';
+        const country = phone.country ? `+${phone.country}` : '';
+        lines.push(`TEL${type}${pref}:${country}${phone.number}`);
+    }
+    for (const addr of contact.addresses) {
+        const type = addr.label ? `;TYPE=${escape(addr.label)}` : '';
+        const pref = addr.isDefault ? ';TYPE=PREF' : '';
+        const components = [
+            '', // PO Box
+            addr.street2,
+            addr.street1,
+            addr.locality,
+            addr.subdivision,
+            addr.postalCode,
+            addr.country,
+        ];
+        lines.push(`ADR${type}${pref}:${components.map(escape).join(';')}`);
+    }
+    for (const date of contact.dates) {
+        const type = date.label ? `;TYPE=${escape(date.label)}` : '';
+        lines.push(`ANNIVERSARY${type}:${encodeDate(date)}`);
+    }
+    for (const rel of contact.relationships) {
+        // @todo get name of `to` since other software would just see the UUID
+        const type = rel.label ? `;TYPE=${escape(rel.label)}` : '';
+        lines.push(`RELATED${type}:${escape(rel.to)}`);
+    }
+    for (const custom of contact.custom) {
+        const safeLabel = custom.label?.replace(/[^a-zA-Z0-9-]/g, '');
+        if (!safeLabel)
+            continue;
+        lines.push(`X-${safeLabel}:${escape(custom.value)}`);
+    }
+    lines.push('END:VCARD');
+    return lines.join('\r\n');
+}

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

@@ -6,6 +6,7 @@
 	import ContactPicture from './ContactPicture.svelte';
 	import DateSelect from './DateSelect.svelte';
 	import Discovery from './Discovery.svelte';
+	import { name as formatName } from '@axium/contacts/client/format';
 
 	let showDetailed = $state(false);
 
@@ -54,6 +55,8 @@
 		</button>
 	</a>
 
+	<span></span>
+
 	<button class="icon-text save" onclick={() => save(init)}>
 		<span>{text('contacts.init.save')}</span>
 	</button>
@@ -61,7 +64,8 @@
 
 {#if init.id}
 	<div class="contact-init-header">
-		<ContactPicture contact={init as typeof init & { id: string }} --size="100px" />
+		<ContactPicture contact={init as typeof init & { id: string }} --size="150px" />
+		<span class="contact-name-title">{formatName(init)}</span>
 	</div>
 {/if}
 
@@ -196,34 +200,44 @@
 </div>
 
 <style>
+	.contact-name-title {
+		margin-left: 2em;
+		font-size: 2em;
+	}
+
 	.contact-init-header,
 	.contact-init,
 	.contact-init-actions {
 		padding: 2em;
-		width: 700px;
+		margin: 1em;
+		width: calc(700px - 2em);
 
 		@media (width < 700px) {
-			width: 100%;
+			width: calc(100% - 2em);
 		}
 	}
 
-	.contact-init-header {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
+	.contact-init-header,
 	.contact-init-actions {
 		display: flex;
 		gap: 1em;
 		align-items: center;
-		justify-content: space-between;
+	}
+
+	.contact-init-actions > :not(span) {
+		flex: 0 0 auto;
+	}
+
+	.contact-init-actions > span {
+		flex: 1 1 auto;
 	}
 
 	.contact-init {
 		display: grid;
 		grid-template-columns: 1em 1fr 1em;
 		gap: 1em;
+		border-radius: 1em;
+		background-color: var(--bg-menu);
 
 		button.toggle {
 			height: 1em;

package/locales/en.json

@@ -42,7 +42,8 @@
 		"Discovery": {
 			"placeholder": "Search for a contact",
 			"no_results": "No contacts found"
-		}
+		},
+		"delete_confirm": "Are you sure you want to delete this contact?"
 	},
 	"contact": {
 		"label": "Label",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/contacts",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Contacts for Axium",
 	"funding": {

package/routes/contacts/[id]/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { text } from '@axium/client';
-	import { Icon, Popover } from '@axium/client/components';
+	import { fetchAPI, text } from '@axium/client';
+	import { FormDialog, Icon, Popover } from '@axium/client/components';
 	import { toast, toastStatus } from '@axium/client/toast';
+	import { toVCard } from '@axium/contacts';
 	import { format, getContact } from '@axium/contacts/client';
 	import { ContactPicture, Field } from '@axium/contacts/components';
-	import { upload } from 'utilium/dom.js';
+	import { download, upload } from 'utilium/dom.js';
 
 	const { data } = $props();
 	const { contact } = data;
@@ -32,6 +33,8 @@
 			await toast('error', e);
 		}
 	}
+
+	const contactFileName = contact.emails.find(e => e.isDefault)?.email || format.name(contact).replaceAll(' ', '_');
 </script>
 
 <svelte:head>
@@ -55,12 +58,12 @@
 		</button>
 	</a>
 
-	<button class="icon-text">
+	<button class="icon-text" command="show-modal" commandfor="delete-contact">
 		<Icon i="trash" />
 		<span>{text('contacts.delete')}</span>
 	</button>
 
-	<button class="icon-text">
+	<button class="icon-text" onclick={() => download(contactFileName + '.vcard', toVCard(contact))}>
 		<Icon i="file-export" />
 		<span>{text('contacts.export')}</span>
 	</button>
@@ -176,6 +179,19 @@
 	{@render part('regular/note', contact.notes)}
 </div>
 
+<FormDialog
+	id="delete-contact"
+	submitDanger
+	submitText={text('generic.delete')}
+	submit={() => fetchAPI('DELETE', 'contacts/:id', {}, contact.id).then(() => (window.location.href = '/contacts'))}
+>
+	<p>
+		<span>{text('contacts.delete_confirm')}</span>
+		<br />
+		<strong>{text('generic.action_irreversible')}</strong>
+	</p>
+</FormDialog>
+
 <style>
 	.contact-image-container {
 		width: 150px;
@@ -201,10 +217,11 @@
 	.contact,
 	.contact-actions {
 		padding: 2em;
-		width: 700px;
+		margin: 1em;
+		width: calc(700px - 2em);
 
 		@media (width < 700px) {
-			width: 100%;
+			width: calc(100% - 2em);
 		}
 	}
 
@@ -227,6 +244,8 @@
 		display: grid;
 		grid-template-columns: 1em 1fr;
 		gap: 1em;
+		border-radius: 1em;
+		background-color: var(--bg-menu);
 
 		button.toggle {
 			height: 1em;