@axium/client 0.25.2 → 0.26.1

package/assets/styles.css

@@ -217,6 +217,9 @@ div.success {
 :disabled,
 .disabled {
 	cursor: not-allowed;
+	color: var(--fg-disabled);
+	accent-color: var(--fg-disabled);
+	border: var(--border-disabled);
 }
 
 :popover-open {

package/assets/theme.css

@@ -43,11 +43,14 @@ html {
 	--fg-normal: hsl(0 0 var(--fg-light));
 	--fg-accent: hsl(var(--hue) 15 var(--fg-light));
 	--fg-strong: hsl(var(--hue) 25 calc(var(--fg-light) - var(--light-step)));
+	--fg-disabled: hsl(0 0 calc(var(--fg-light) - var(--light-step)));
 
 	--fg-error: hsl(0 50 calc(var(--fg-light) - var(--light-step)));
 	--fg-warning: hsl(60 50 calc(var(--fg-light) - var(--light-step)));
 
+	--border-disabled: 1px solid hsl(0 5 calc(var(--bg-light) - var(--light-step)));
 	--border-accent: 1px solid hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-strong: 1px solid hsl(var(--hue) 20 calc(var(--bg-light) + (var(--light-step) * 3)));
 
 	--border-error: 1px solid hsl(0 50 var(--fg-light));
 	--border-warning: 1px solid hsl(60 50 var(--fg-light));

package/dist/apps.d.ts

@@ -0,0 +1,5 @@
+import type { AppPreferences } from '@axium/core';
+export declare function getAppPreferences<A extends string>(userId: string, appId: A): Promise<AppPreferences<A>>;
+export declare function setAppPreferences<A extends string>(userId: string, appId: A, preferences: AppPreferences<A>): Promise<AppPreferences<A>>;
+export declare function clearAppPreferences<A extends string>(userId: string, appId: A): Promise<AppPreferences<A>>;
+export declare function appPref<A extends string, K extends keyof AppPreferences<A>>(userId: string, appId: A, key: K): Promise<AppPreferences<A>[K]>;

package/dist/apps.js

@@ -0,0 +1,31 @@
+import { appPreferences } from '@axium/core';
+import { fetchAPI } from './requests.js';
+import { useCache } from './cache.js';
+export async function getAppPreferences(userId, appId) {
+    const schema = appPreferences.get(appId);
+    if (!schema)
+        throw new Error(`Missing schema for "${appId}"`);
+    const pref = await useCache('app_preferences', userId + ':' + appId, async () => {
+        const result = await fetchAPI('GET', 'users/:id/preferences/:appId', {}, userId, appId);
+        return schema.parse(result);
+    });
+    return pref;
+}
+export async function setAppPreferences(userId, appId, preferences) {
+    const schema = appPreferences.get(appId);
+    if (!schema)
+        throw new Error(`Missing schema for "${appId}"`);
+    const result = await fetchAPI('POST', 'users/:id/preferences/:appId', preferences, userId, appId);
+    return schema.parse(result);
+}
+export async function clearAppPreferences(userId, appId) {
+    const schema = appPreferences.get(appId);
+    if (!schema)
+        throw new Error(`Missing schema for "${appId}"`);
+    const result = await fetchAPI('DELETE', 'users/:id/preferences/:appId', {}, userId, appId);
+    return schema.parse(result);
+}
+export async function appPref(userId, appId, key) {
+    const pref = await getAppPreferences(userId, appId);
+    return pref[key];
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/locales.d.ts

@@ -30,6 +30,10 @@ declare let currentLoaded: {
         readonly back: "Take me back";
         readonly question: "Are you sure you want to log out?";
     };
+    readonly AppPreferences: {
+        readonly title: "Preferences for {name}";
+        readonly save: "Save";
+    };
     readonly Register: {
         readonly email: "Email";
         readonly login: "Login instead";

package/lib/AppPreferences.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getAppPreferences, setAppPreferences, text } from '@axium/client';
+	import { structurallyEqual } from 'utilium';
+	import type { ZodObject } from 'zod';
+	import ZodInput from './ZodInput.svelte';
+
+	const { userId, appId, schema }: { userId: string; appId: string; schema: ZodObject } = $props();
+
+	let initialValue = $state(await getAppPreferences(userId, appId));
+	let currentValue = $state({ ...initialValue });
+
+	function cancel() {
+		currentValue = { ...initialValue };
+	}
+
+	async function save() {
+		initialValue = await setAppPreferences(userId, appId, currentValue);
+	}
+</script>
+
+<h2>{text('AppPreferences.title', { name: text(`app_name.${appId}`) })}</h2>
+
+<ZodInput {schema} updateValue={() => {}} bind:rootValue={currentValue} path="" />
+
+<div class="actions">
+	<button onclick={cancel}>{text('generic.cancel')}</button>
+	<button onclick={save} class={!structurallyEqual(initialValue, currentValue) && 'save-pending'}>{text('AppPreferences.save')}</button>
+</div>
+
+<style>
+	.actions {
+		margin-top: 2em;
+	}
+
+	.save-pending {
+		border: var(--border-strong);
+	}
+</style>

package/lib/ZodInput.svelte

@@ -43,6 +43,13 @@
 
 	let value = $state<any>(getByString(rootValue, path));
 
+	let lastRoot = rootValue;
+	$effect(() => {
+		if (rootValue === lastRoot) return;
+		lastRoot = rootValue;
+		value = getByString(rootValue, path);
+	});
+
 	let error = $state();
 
 	function dateAttr(date: Date | null, format: 'date' | 'time' | 'datetime' | 'time+sec') {
@@ -156,7 +163,7 @@
 {:else if schema.type == 'literal'}
 	<div class="ZodInput">
 		<label for={id}>{labelText}</label>
-		<select bind:value {id} {oninput} required={!optional}>
+		<select bind:value {id} {onchange} required={!optional}>
 			{#each schema.values as literal}
 				<option value={literal} selected={value === literal}>{subText(String(literal), { $default: String(literal) })}</option>
 			{/each}

package/lib/index.ts

@@ -1,5 +1,6 @@
 export { default as AccessControlDialog } from './AccessControlDialog.svelte';
 export { default as AppMenu } from './AppMenu.svelte';
+export { default as AppPreferences } from './AppPreferences.svelte';
 export { default as Audio } from './Audio.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';

package/locales/en.json

@@ -24,6 +24,10 @@
 		"back": "Take me back",
 		"question": "Are you sure you want to log out?"
 	},
+	"AppPreferences": {
+		"title": "Preferences for {name}",
+		"save": "Save"
+	},
 	"Register": {
 		"email": "Email",
 		"login": "Login instead",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.25.2",
+	"version": "0.26.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -45,11 +45,11 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.29.0",
+		"@axium/core": ">=0.30.0",
 		"ioium": "^1.0.2",
 		"semver": "^7.7.4",
 		"svelte": "^5.36.0",
-		"utilium": "^3.0.0",
+		"utilium": "^3.2.0",
 		"zod": "^4.0.5"
 	},
 	"dependencies": {