@axium/client 0.21.0 → 0.22.1

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './access.js';
+export * from './cache.js';
 export * from './config.js';
 export * from './locales.js';
 export * from './requests.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './access.js';
+export * from './cache.js';
 export * from './config.js';
 export * from './locales.js';
 export * from './requests.js';

package/dist/locales.d.ts

@@ -235,10 +235,19 @@ declare let currentLoaded: {
             readonly failed: "Login Failed";
         };
     };
+    readonly location: {
+        readonly country: "Country";
+        readonly subdivision: "State / province";
+        readonly locality: "City / town";
+        readonly postal_code: "Postal code";
+        readonly street1: "Street address";
+        readonly street2: "Street address line 2";
+    };
     readonly preference: {
         readonly debug: "Debug mode";
     };
 };
+export declare let currentMonthNames: string[];
 /**
  * Current locale
  */
@@ -259,6 +268,8 @@ type _ArgsValue<V extends string[]> = UnionToIntersection<{
 type Replacements<K extends string> = ReplacementOptions & (GetByString<Locale, K> extends string ? _ArgsValue<Split<GetByString<Locale, K> & string, '{'>> : Record<string, any>);
 type ReplacementsArgs<K extends string> = {} extends Replacements<K> ? [replacements?: Replacements<K>] : [replacements: Replacements<K>];
 export declare function useLocale(newLocale: string): void;
+export declare function countryName(code: string): string | undefined;
+export declare function dateField(name: string): string | undefined;
 export declare function escape(text: string): string;
 /**
  * Get localized text for a given translation key

package/dist/locales.js

@@ -15,7 +15,8 @@ export function extendLocale(locale, data) {
         debug('Extending locale: ' + locale);
     deepAssign(loadedLocales[locale], data);
 }
-let currentLoaded = en;
+let currentLoaded = en, currentRegionNames, currentDateFields;
+export let currentMonthNames;
 /**
  * Current locale
  */
@@ -25,6 +26,17 @@ export function useLocale(newLocale) {
         throw new Error('Locale is not available: ' + newLocale);
     currentLocale = newLocale;
     currentLoaded = loadedLocales[newLocale];
+    currentRegionNames = new Intl.DisplayNames(newLocale, { type: 'region' });
+    currentDateFields = new Intl.DisplayNames(newLocale, { type: 'dateTimeField' });
+    const formatter = new Intl.DateTimeFormat(newLocale, { month: 'long' });
+    currentMonthNames = Array.from({ length: 12 }, (_, monthIndex) => formatter.format(new Date(Date.UTC(2000, monthIndex + 1, 1))));
+}
+useLocale('en');
+export function countryName(code) {
+    return currentRegionNames.of(code);
+}
+export function dateField(name) {
+    return currentDateFields.of(name);
 }
 const localeReplacement = /\{(\w+)\}/g;
 const escapePattern = /[&<>"']/g;

package/lib/LocationSelect.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { countryName, text } from '@axium/client';
+	import { countries, type LocationInit } from '@axium/core';
+
+	let { value = $bindable<LocationInit>() }: { value: LocationInit } = $props();
+</script>
+
+<select bind:value={value.country} placeholder={text('location.country')}>
+	{#each countries as country}
+		<option value={country}>{countryName(country)}</option>
+	{/each}
+</select>
+
+<input type="text" placeholder={text('location.street1')} bind:value={value.street1} />
+<input type="text" placeholder={text('location.street2')} bind:value={value.street2} />
+<input type="text" placeholder={text('location.locality')} bind:value={value.locality} />
+<div>
+	<input type="text" placeholder={text('location.subdivision')} bind:value={value.subdivision} />
+	<input type="text" placeholder={text('location.postal_code')} bind:value={value.postalCode} />
+</div>

package/lib/UserPFP.svelte

@@ -36,6 +36,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/ZodForm.svelte

@@ -5,7 +5,7 @@
 	interface Props {
 		rootValue: any;
 		schema: ZodObject;
-		labels: Record<string, string>;
+		labels?: Record<string, string>;
 		updateValue(value: any): void;
 		idPrefix?: string;
 	}
@@ -15,7 +15,7 @@
 
 <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} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {path} schema={schema.shape[path]} label={labels?.[path] || path} />
 	{/each}
 </div>
 

package/lib/ZodInput.svelte

@@ -14,15 +14,17 @@
 		path: string;
 		label?: string;
 		schema: ZodPref;
+		_parseSchema?: ZodPref;
 		defaultValue?: any;
 		optional?: boolean;
-		noLabel?: boolean;
+		readonly?: boolean;
+		noLabel?: boolean | 'placeholder';
 		updateValue(value: any): void;
 	}
 
 	let { rootValue = $bindable(), ...props }: Props = $props();
 
-	let { label, path, schema, optional, defaultValue, idPrefix, updateValue, noLabel } = props;
+	let { label, path, schema, _parseSchema = schema, optional, readonly, defaultValue, idPrefix, updateValue, noLabel } = props;
 
 	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
 
@@ -85,13 +87,28 @@
 	const oninput = onchange;
 
 	const labelText = $derived(zKeys.has(props.schema) ? text(zKeys.get(props.schema)!.key) : label || path);
+	const placeholder = noLabel == 'placeholder' ? labelText : undefined;
+
+	/** Array element types that indicate the array should put elements on their own lines */
+	const largeArrayTypes = ['object', 'array', 'record', 'tuple'];
 </script>
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
 		{#if error}<span class="ZodInput-error">{error}</span>{/if}
-		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
+		<input
+			{id}
+			{...rest}
+			bind:value
+			{onchange}
+			{oninput}
+			required={!optional}
+			{defaultValue}
+			{placeholder}
+			{readonly}
+			class={[error && 'error']}
+		/>
 	</div>
 {/snippet}
 
@@ -104,7 +121,7 @@
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for="{id}:checkbox">{labelText}</label>{/if}
-		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} />
+		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} {placeholder} />
 		<label for="{id}:checkbox" {id} class="checkbox">
 			{#if value}<Icon i="check" --size="1.3em" />{/if}
 		</label>
@@ -128,19 +145,22 @@
 	</div>
 {:else if schema.type == 'template_literal'}
 	<!-- todo -->
+{:else if schema.type == 'readonly'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} readonly />
 {:else if schema.type == 'default'}
 	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} defaultValue={schema.def.defaultValue} />
 {:else if schema.type == 'nullable' || schema.type == 'optional'}
 	<!-- defaults are handled differently -->
 	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} optional={true} />
+{:else if schema.type == 'nonoptional'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} optional={false} />
 {:else if schema.type == 'array'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{labelText}</label>{/if}
-		{#if error}<span class="ZodInput-error">{error}</span>{/if}
-		<div class="ZodInput-array">
+		<div class={['ZodInput-array', largeArrayTypes.includes(schema.element.type) && 'large']}>
 			{#each value, i}
 				<div class="ZodInput-element">
-					<input id="{id}.{i}" bind:value={value[i]} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
+					<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{i}" schema={schema.element} noLabel={noLabel || true} />
 					<button
 						onclick={e => {
 							value.splice(i, 1);
@@ -151,8 +171,11 @@
 					</button>
 				</div>
 			{/each}
-			<button onclick={() => value.push('')}>
+			<button class="icon-text" onclick={() => value.push('')}>
 				<Icon i="plus" --size="16px" />
+				{#if noLabel == 'placeholder'}
+					<span>{labelText}</span>
+				{/if}
 			</button>
 		</div>
 	</div>
@@ -161,14 +184,14 @@
 		{#each Object.keys(value) as key}
 			<div class="ZodInput-record-entry">
 				{#if !noLabel}<label for={id}>{key}</label>{/if}
-				<ZodInput bind:rootValue {updateValue} {idPrefix} path="{path}.{key}" schema={schema.valueType} />
+				<ZodInput bind:rootValue {updateValue} {idPrefix} {noLabel} 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} path="{path}.{key}" schema={value} />
+		<ZodInput bind:rootValue {updateValue} {idPrefix} {noLabel} path="{path}.{key}" schema={value} />
 	{/each}
 	<!-- </div> -->
 {:else if schema.type == 'tuple'}
@@ -187,6 +210,14 @@
 			{/each}
 		</select>
 	</div>
+{:else if schema.type == 'success'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.innerType} {_parseSchema} />
+{:else if schema.type == 'pipe'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.in} {_parseSchema} />
+{:else if schema.type == 'union'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.options[0]} {_parseSchema} />
+{:else if schema.type == 'intersection'}
+	<ZodInput bind:rootValue {...props} label={labelText} schema={schema.def.left} {_parseSchema} />
 {:else}
 	<!-- No idea how to render this -->
 	<i class="error">{text('ZodInput.invalid_type', { type: JSON.stringify((schema as ZodPref)?.def?.type) })}</i>
@@ -217,9 +248,14 @@
 		gap: 0.5em;
 		align-items: center;
 
-		button {
-			position: relative;
-			right: 1em;
+		& > button {
+			display: contents;
+		}
+
+		& > .ZodInput {
+			gap: 0.25em;
+			display: flex;
+			flex-direction: column;
 		}
 	}
 
@@ -227,6 +263,10 @@
 		display: flex;
 		gap: 0.5em;
 		align-items: center;
+
+		&.large {
+			flex-direction: column;
+		}
 	}
 
 	.ZodInput-object,

package/lib/index.ts

@@ -4,6 +4,7 @@ export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as LocationSelect } from './LocationSelect.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';
 export { default as NumberBar } from './NumberBar.svelte';

package/locales/en.json

@@ -229,6 +229,14 @@
 			"failed": "Login Failed"
 		}
 	},
+	"location": {
+		"country": "Country",
+		"subdivision": "State / province",
+		"locality": "City / town",
+		"postal_code": "Postal code",
+		"street1": "Street address",
+		"street2": "Street address line 2"
+	},
 	"preference": {
 		"debug": "Debug mode"
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.21.0",
+	"version": "0.22.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -45,7 +45,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.24.0",
+		"@axium/core": ">=0.26.0",
 		"svelte": "^5.36.0",
 		"utilium": "^2.8.0",
 		"zod": "^4.0.5"