@axium/client 0.11.0 → 0.12.1

package/assets/styles.css

@@ -148,7 +148,7 @@ dialog form {
 	display: contents;
 }
 
-.error {
+:not(input).error {
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-error);
@@ -158,6 +158,10 @@ dialog form {
 	color: hsl(0 50 50%);
 }
 
+input.error {
+	border: 1px solid var(--bg-error);
+}
+
 .success {
 	padding: 1em;
 	border-radius: 0.5em;

package/lib/ZodForm.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ZodObject } from 'zod';
+	import ZodInput from './ZodInput.svelte';
+
+	interface Props {
+		rootValue: any;
+		schema: ZodObject;
+		labels: Record<string, string>;
+		updateValue(value: any): void;
+		idPrefix?: string;
+	}
+
+	let { rootValue = $bindable(), schema, labels, updateValue, idPrefix }: Props = $props();
+</script>
+
+<div class="ZodForm">
+	{#each Object.keys(schema.shape).sort((a, b) => a.localeCompare(b)) as path}
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={labels[path] || path} />
+	{/each}
+</div>
+
+<style>
+	.ZodForm {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 1em;
+	}
+</style>

package/lib/ZodInput.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import type { ZodPref } from '@axium/core';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getByString, pick, setByString } from 'utilium';
+	import Icon from './Icon.svelte';
+	import ZodInput from './ZodInput.svelte';
+	import { prettifyError } from 'zod';
+
+	interface Props {
+		idPrefix?: string;
+		rootValue: any;
+		path: string;
+		label?: string;
+		schema: ZodPref;
+		defaultValue?: any;
+		optional?: boolean;
+		noLabel?: boolean;
+		updateValue(value: any): void;
+	}
+
+	let {
+		rootValue = $bindable(),
+		label,
+		path,
+		schema,
+		optional = false,
+		defaultValue,
+		idPrefix,
+		updateValue,
+		noLabel = false,
+	}: Props = $props();
+	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
+
+	let value = $state<any>(getByString(rootValue, path));
+
+	let error = $state();
+
+	function dateAttr(date: Date | null, format: 'date' | 'time' | 'datetime' | 'time+sec') {
+		if (!date) return null;
+
+		const pad = (n: number) => String(n).padStart(2, '0');
+
+		const yyyy = date.getFullYear();
+		const mm = pad(date.getMonth() + 1);
+		const dd = pad(date.getDate());
+		const dateStr = `${yyyy}-${mm}-${dd}`;
+
+		const HH = pad(date.getHours());
+		const MM = pad(date.getMinutes());
+		const timeStr = `${HH}:${MM}`;
+
+		switch (format) {
+			case 'date':
+				return dateStr;
+			case 'time':
+				return timeStr;
+			case 'time+sec':
+				return `${timeStr}:${pad(date.getSeconds())}`;
+			case 'datetime':
+			default:
+				return `${dateStr}T${timeStr}`;
+		}
+	}
+
+	function onchange(e: Event) {
+		let val;
+
+		try {
+			val = schema.parse(value);
+			error = null;
+		} catch (e: any) {
+			error = prettifyError(e);
+			return;
+		}
+
+		if (e instanceof KeyboardEvent && e.key !== 'Enter') return;
+
+		const oldValue = getByString(rootValue, path);
+		if (val == oldValue) return;
+
+		if (defaultValue == val) {
+			const parts = path.split('.');
+			const prop = parts.pop()!;
+			delete getByString<Record<string, any>>(rootValue, parts.join('.'))[prop];
+		} else setByString(rootValue, path, val);
+
+		updateValue(rootValue);
+	}
+
+	const onkeyup = onchange;
+</script>
+
+{#snippet _in(rest: HTMLInputAttributes)}
+	<div class="ZodInput">
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<input {id} {...rest} bind:value {onchange} {onkeyup} required={!optional} {defaultValue} class={[error && 'error']} />
+	</div>
+{/snippet}
+
+{#if schema.type == 'string'}
+	{@render _in({ type: schema.format == 'email' ? 'email' : 'text', ...pick(schema, 'minLength', 'maxLength') })}
+{:else if schema.type == 'number'}
+	{@render _in({ type: 'number', min: schema.minValue, max: schema.maxValue, step: schema.format?.includes('int') ? 1 : 0.1 })}
+{:else if schema.type == 'bigint'}
+	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
+{:else if schema.type == 'boolean'}
+	<div class="ZodInput">
+		{#if !noLabel}<label for="{id}:checkbox">{label || path}</label>{/if}
+		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
+		<label for="{id}:checkbox" {id} class="checkbox">
+			{#if value}<Icon i="check" --size="1.3em" />{/if}
+		</label>
+	</div>
+{:else if schema.type == 'date'}
+	{@render _in({
+		type: 'date',
+		min: dateAttr(schema.minDate, 'date'),
+		max: dateAttr(schema.maxDate, 'date'),
+	})}
+{:else if schema.type == 'file'}
+	<!-- todo -->
+{:else if schema.type == 'literal'}
+	<div class="ZodInput">
+		<label for={id}>{label || path}</label>
+		<select bind:value {id} {onchange} {onkeyup} required={!optional}>
+			{#each schema.values as value}
+				<option {value} selected={value === value}>{value}</option>
+			{/each}
+		</select>
+	</div>
+{:else if schema.type == 'template_literal'}
+	<!-- todo -->
+{:else if schema.type == 'default'}
+	<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
+{:else if schema.type == 'nullable' || schema.type == 'optional'}
+	<!-- defaults are handled differently -->
+	<ZodInput bind:rootValue {updateValue} {idPrefix} {path} {defaultValue} schema={schema.def.innerType} optional={true} />
+{:else if schema.type == 'array'}
+	<div class="ZodInput">
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<div class="ZodInput-array">
+			{#each value, i}
+				<div class="ZodInput-element">
+					<input
+						id="{id}.{i}"
+						bind:value={value[i]}
+						{onchange}
+						{onkeyup}
+						required={!optional}
+						{defaultValue}
+						class={[error && 'error']}
+					/>
+					<button
+						onclick={e => {
+							value.splice(i, 1);
+							onchange(e);
+						}}
+					>
+						<Icon i="trash" --size="16px" />
+					</button>
+				</div>
+			{/each}
+			<button onclick={() => value.push('')}>
+				<Icon i="plus" --size="16px" />
+			</button>
+		</div>
+	</div>
+{:else if schema.type == 'record'}
+	<div class="ZodInput-record">
+		{#each Object.keys(value) as key}
+			<div class="ZodInput-record-entry">
+				{#if !noLabel}<label for={id}>{key}</label>{/if}
+				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{key}" schema={schema.valueType} />
+			</div>
+		{/each}
+	</div>
+{:else if schema.type == 'object'}
+	<!-- <div class="ZodInput-object"> -->
+	{#each Object.entries(schema.shape) as [key, value]}
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{key}" schema={value} />
+	{/each}
+	<!-- </div> -->
+{:else if schema.type == 'tuple'}
+	<div class="ZodInput-tuple" data-rest={schema.def.rest}>
+		{#each schema.def.items as item, i}
+			<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{i}" schema={item} />
+		{/each}
+	</div>
+{:else if schema.type == 'enum'}
+	<div class="ZodInput">
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<select {id} {onchange} {onkeyup} bind:value required={!optional}>
+			{#each Object.entries(schema.enum) as [key, value]}
+				<option {value} selected={value === value}>{key}</option>
+			{/each}
+		</select>
+	</div>
+{:else}
+	<!-- No idea how to render this -->
+	<i class="error-text">Invalid preference type: {JSON.stringify((schema as ZodPref)?.def?.type)}</i>
+{/if}
+
+<style>
+	input[type='checkbox'] {
+		display: none;
+	}
+
+	label.checkbox {
+		cursor: pointer;
+		width: 1.5em;
+		height: 1.5em;
+		border: 1px solid var(--border-accent);
+		border-radius: 0.5em;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.ZodInput-error {
+		position: fixed;
+		position-anchor: --zod-input;
+		bottom: calc(anchor(top) - 0.3em);
+		left: anchor(left);
+	}
+
+	.ZodInput {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1em;
+		anchor-scope: --zod-input;
+
+		input {
+			anchor-name: --zod-input;
+		}
+	}
+
+	.ZodInput-element {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+
+		button {
+			position: relative;
+			right: 1em;
+		}
+	}
+
+	.ZodInput-array {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+	}
+
+	.ZodInput-object,
+	.ZodInput-record,
+	.ZodInput-tuple {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0.25em;
+	}
+</style>

package/lib/index.ts

@@ -7,8 +7,6 @@ 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 Preference } from './Preference.svelte';
-export { default as Preferences } from './Preferences.svelte';
 export { default as Register } from './Register.svelte';
 export { default as SessionList } from './SessionList.svelte';
 export { default as Toast } from './Toast.svelte';
@@ -18,3 +16,5 @@ export { default as UserCard } from './UserCard.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as WithContextMenu } from './WithContextMenu.svelte';
+export { default as ZodForm } from './ZodForm.svelte';
+export { default as ZodInput } from './ZodInput.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.11.0",
+	"version": "0.12.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.17.0",
+		"@axium/core": ">=0.18.0",
 		"utilium": "^2.3.8",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"

package/lib/Preference.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { fetchAPI } from '@axium/client/requests';
-	import type { Preferences, ZodPref } from '@axium/core';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { getByString, pick, setByString } from 'utilium';
-	import Icon from './Icon.svelte';
-	import Preference from './Preference.svelte';
-
-	interface Props {
-		userId: string;
-		preferences: Preferences;
-		path: string;
-		schema: ZodPref;
-		defaultValue?: any;
-		optional?: boolean;
-	}
-
-	let { preferences = $bindable(), userId, path, schema, optional = false, defaultValue }: Props = $props();
-	const id = $props.id();
-
-	let input = $state<HTMLInputElement | HTMLSelectElement>()!;
-	let checked = $state(schema.def.type == 'boolean' && getByString<boolean>(preferences, path));
-	const initialValue = $derived<any>(getByString(preferences, path));
-
-	function dateAttr(date: Date | null, format: 'date' | 'time' | 'datetime' | 'time+sec') {
-		if (!date) return null;
-
-		const pad = (n: number) => String(n).padStart(2, '0');
-
-		const yyyy = date.getFullYear();
-		const mm = pad(date.getMonth() + 1);
-		const dd = pad(date.getDate());
-		const dateStr = `${yyyy}-${mm}-${dd}`;
-
-		const HH = pad(date.getHours());
-		const MM = pad(date.getMinutes());
-		const timeStr = `${HH}:${MM}`;
-
-		switch (format) {
-			case 'date':
-				return dateStr;
-			case 'time':
-				return timeStr;
-			case 'time+sec':
-				return `${timeStr}:${pad(date.getSeconds())}`;
-			case 'datetime':
-			default:
-				return `${dateStr}T${timeStr}`;
-		}
-	}
-
-	function onchange(e: Event) {
-		const value = schema.parse(input instanceof HTMLInputElement && input.type === 'checkbox' ? input.checked : input.value);
-		const oldValue = getByString(preferences, path);
-		if (value == oldValue) return;
-
-		if (defaultValue == value) {
-			const parts = path.split('.');
-			const prop = parts.pop()!;
-			delete getByString<Record<string, any>>(preferences, parts.join('.'))[prop];
-		} else setByString(preferences, path, value);
-
-		fetchAPI('PATCH', 'users/:id', { preferences }, userId);
-	}
-</script>
-
-{#snippet _in(rest: HTMLInputAttributes)}
-	<input bind:this={input} {id} {...rest} value={initialValue} {onchange} required={!optional} {defaultValue} />
-{/snippet}
-
-{#if schema.type == 'string'}
-	{@render _in({ type: schema.format == 'email' ? 'email' : 'text', ...pick(schema, 'minLength', 'maxLength') })}
-{:else if schema.type == 'number'}
-	{@render _in({ type: 'number', min: schema.minValue, max: schema.maxValue, step: schema.format?.includes('int') ? 1 : 0.1 })}
-{:else if schema.type == 'bigint'}
-	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
-{:else if schema.type == 'boolean'}
-	<input bind:checked bind:this={input} {id} type="checkbox" {onchange} required={!optional} />
-	<label for={id} class="checkbox">
-		{#if checked}<Icon i="check" --size="1.3em" />{/if}
-	</label>
-{:else if schema.type == 'date'}
-	{@render _in({
-		type: 'date',
-		min: dateAttr(schema.minDate, 'date'),
-		max: dateAttr(schema.maxDate, 'date'),
-	})}
-{:else if schema.type == 'file'}
-	<!-- todo -->
-{:else if schema.type == 'literal'}
-	<select bind:this={input} {id} {onchange} required={!optional}>
-		{#each schema.values as value}
-			<option {value} selected={initialValue === value}>{value}</option>
-		{/each}
-	</select>
-{:else if schema.type == 'template_literal'}
-	<!-- todo -->
-{:else if schema.type == 'default'}
-	<Preference {userId} bind:preferences {path} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
-{:else if schema.type == 'nullable' || schema.type == 'optional'}
-	<!-- defaults are handled differently -->
-	<Preference {userId} bind:preferences {path} {defaultValue} schema={schema.def.innerType} optional={true} />
-{:else if schema.type == 'array'}
-	<div class="pref-sub">
-		{#each initialValue, i}
-			<div class="pref-record-entry">
-				<Preference {userId} bind:preferences {defaultValue} path="{path}.{i}" schema={schema.element} />
-			</div>
-		{/each}
-	</div>
-{:else if schema.type == 'record'}
-	<div class="pref-sub">
-		{#each Object.keys(initialValue) as key}
-			<div class="pref-record-entry">
-				<label for={id}>{key}</label>
-				<Preference {userId} bind:preferences {defaultValue} path="{path}.{key}" schema={schema.valueType} />
-			</div>
-		{/each}
-	</div>
-{:else if schema.type == 'object'}
-	{#each Object.entries(schema.shape) as [key, value]}
-		<div class="pref-sub">
-			<label for={id}>{key}</label>
-			<Preference {userId} bind:preferences {defaultValue} path="{path}.{key}" schema={value} />
-		</div>
-	{/each}
-{:else if schema.type == 'tuple'}
-	<div class="pref-sub" data-rest={schema.def.rest}>
-		{#each schema.def.items as item, i}
-			<Preference {userId} bind:preferences {defaultValue} path="{path}.{i}" schema={item} />
-		{/each}
-	</div>
-{:else if schema.type == 'enum'}
-	<select bind:this={input} {id} {onchange} required={!optional}>
-		{#each Object.entries(schema.enum) as [key, value]}
-			<option {value} selected={initialValue === value}>{key}</option>
-		{/each}
-	</select>
-{:else}
-	<!-- No idea how to render this -->
-	<i class="error-text">Invalid preference type: {JSON.stringify((schema as ZodPref)?.def?.type)}</i>
-{/if}
-
-<style>
-	input[type='checkbox'] {
-		display: none;
-	}
-
-	label.checkbox {
-		cursor: pointer;
-		width: 1.5em;
-		height: 1.5em;
-		border: 1px solid var(--border-accent);
-		border-radius: 0.5em;
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>

package/lib/Preferences.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { preferenceLabels, Preferences } from '@axium/core';
-	import Preference from './Preference.svelte';
-
-	interface Props {
-		userId: string;
-		preferences: Preferences;
-	}
-
-	let { preferences = $bindable(), userId }: Props = $props();
-	const id = $props.id();
-</script>
-
-{#each Object.keys(Preferences.shape) as (keyof Preferences)[] as path}
-	<div class="pref">
-		<label for={id}>{preferenceLabels[path]}</label>
-		<Preference {userId} bind:preferences {path} schema={Preferences.shape[path]} />
-	</div>
-{/each}
-
-<style>
-	.pref {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 1em;
-	}
-</style>