includio-cms 0.0.27 → 0.0.29

package/dist/admin/client/admin/admin-layout.svelte

@@ -7,7 +7,7 @@
 	let { children }: { children: Snippet } = $props();
 </script>
 
-<ModeWatcher  />
+<ModeWatcher />
 <Toaster />
 
 <svelte:boundary>

package/dist/admin/components/fields/array-field.svelte

@@ -74,7 +74,9 @@
 			...$value.slice(index + 1)
 		];
 
-		openAndCloseOthers(index + 1);
+		tick().then(() => {
+			openAndCloseOthers(index + 1);
+		});
 	}
 
 	function moveItemUp(index: number) {
@@ -82,7 +84,10 @@
 		const newValue = [...$value];
 		[newValue[index - 1], newValue[index]] = [newValue[index], newValue[index - 1]];
 		$value = newValue;
-		openAndCloseOthers(index - 1);
+
+		tick().then(() => {
+			openAndCloseOthers(index - 1);
+		});
 	}
 
 	function moveItemDown(index: number) {
@@ -90,7 +95,10 @@
 		const newValue = [...$value];
 		[newValue[index], newValue[index + 1]] = [newValue[index + 1], newValue[index]];
 		$value = newValue;
-		openAndCloseOthers(index + 1);
+
+		tick().then(() => {
+			openAndCloseOthers(index + 1);
+		});
 	}
 
 	function removeItem(index: number) {

package/dist/admin/components/fields/field-renderer.svelte

@@ -15,6 +15,10 @@
 	import SeoField from './seo-field.svelte';
 	import UrlField from './url-field.svelte';
 	import RelationField from './relation-field.svelte';
+	import { urlFieldDataSchema } from '../../../schemas/field/url.js';
+	import { getAtPath, setAtPath } from '../../utils/objectPath.js';
+	import { onMount } from 'svelte';
+	import UrlFieldWrapper from './url-field-wrapper.svelte';
 
 	type Props = {
 		objectFieldType?: 'default' | 'inline';
@@ -87,7 +91,7 @@
 					{:else if field.type === 'seo'}
 						<SeoField {field} {form} {path} {...props} />
 					{:else if field.type === 'url'}
-						<UrlField {field} {form} {path} {...props} />
+						<UrlFieldWrapper {field} {form} {path} {...props} />
 					{:else if field.type === 'relation'}
 						<RelationField {field} {form} {path} {...props} />
 					{:else}

package/dist/admin/components/fields/text-field.svelte

@@ -23,6 +23,12 @@
 	let { field, form, path, ...props }: Props = $props();
 
 	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<string | undefined>;
+
+	onMount(() => {
+		if ($value === undefined) {
+			$value = '';
+		}
+	});
 </script>
 
 {#if field.multiline}

package/dist/admin/components/fields/url-field-wrapper.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import { urlFieldDataSchema } from '../../../schemas/field/url.js';
+	import type { UrlField, UrlFieldData } from '../../../types/fields.js';
+	import { onMount } from 'svelte';
+	import {
+		formFieldProxy,
+		type FormFieldProxy,
+		type FormPathLeaves,
+		type SuperForm
+	} from 'sveltekit-superforms';
+	import UrlFieldComponent from './url-field.svelte';
+
+	type Props = {
+		field: UrlField;
+		form: SuperForm<T>;
+		path: FormPathLeaves<T, UrlFieldData | undefined>;
+	};
+
+	let { field, form, path, ...props }: Props = $props();
+
+	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<UrlFieldData | undefined>;
+
+	onMount(() => {
+		if (!$value) {
+			$value = { id: '', url: {} };
+		}
+
+		if (urlFieldDataSchema.safeParse($value).success) {
+			fieldValid = true;
+		} else {
+			console.warn(
+				`Warning: The value for the URL field "${field.slug}" is invalid. Expected UrlFieldData structure.`
+			);
+			fieldValid = false;
+		}
+	});
+
+	let fieldValid = $state(false);
+</script>
+
+<svelte:boundary>
+	{#snippet pending()}
+		Loading...
+	{/snippet}
+
+	{#if fieldValid}
+		<UrlFieldComponent {form} {field} path={path as FormPathLeaves<T, UrlFieldData>} {...props} />
+	{/if}
+</svelte:boundary>

package/dist/admin/components/fields/url-field-wrapper.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { UrlField, UrlFieldData } from '../../../types/fields.js';
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        field: UrlField;
+        form: SuperForm<T>;
+        path: FormPathLeaves<T, UrlFieldData | undefined>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const UrlFieldWrapper: $$IsomorphicComponent;
+type UrlFieldWrapper<T extends Record<string, unknown>> = InstanceType<typeof UrlFieldWrapper<T>>;
+export default UrlFieldWrapper;

package/dist/admin/components/fields/url-field.svelte

@@ -22,7 +22,7 @@
 	type Props = {
 		field: UrlField;
 		form: SuperForm<T>;
-		path: FormPathLeaves<T, UrlFieldData | undefined>;
+		path: FormPathLeaves<T, UrlFieldData>;
 	};
 
 	const textField: TextField = {
@@ -32,103 +32,104 @@
 
 	let { field, form, path, ...props }: Props = $props();
 
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<UrlFieldData | undefined>;
-
-	let linkedEntry: Promise<(Entry & { data: { seo?: SeoFieldData } }) | null> | null = $derived(
-		$value !== undefined && $value.id && $value.id.length > 0
-			? remotes.getEntry({
-					data: { id: $value.id }
-				})
-			: null
-	);
-
-	let autocompleteSuggestions = $derived.by(async () => {
-		if ($value !== undefined && !$value.id) {
-			let suggestions: (Entry & { data: { seo?: SeoFieldData } })[] = [];
-
-			for (let i = 0; i < Object.values($value.url).length; i++) {
-				let url = Object.values($value.url)[i];
-
-				if (url.length > 2) {
-					let results = (await remotes.getEntries({
-						data: {
-							dataLike: {
-								seo: {
-									slug: url
-								}
+	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<UrlFieldData>;
+
+	$effect(() => {
+		if ($value.id && $value.id.length > 0) {
+			fetchLinkedEntry($value.id).then((entry) => {
+				linkedEntry = entry;
+			});
+		}
+		if ($value.url && Object.values($value.url).some((url) => url.length > 2)) {
+			fetchSuggestions($value.url).then((suggestions) => {
+				autocompleteSuggestions = suggestions;
+			});
+		}
+	});
+
+	async function fetchLinkedEntry(id: string | undefined) {
+		if (!id) return null;
+
+		return remotes.getEntry({
+			data: { id }
+		});
+	}
+
+	let linkedEntry = $state<(Entry & { data: { seo?: SeoFieldData } }) | null>(null);
+
+	async function fetchSuggestions(currUrl: Record<string, string>) {
+		let suggestions: (Entry & { data: { seo?: SeoFieldData } })[] = [];
+
+		for (let i = 0; i < Object.values(currUrl).length; i++) {
+			let url = Object.values(currUrl)[i];
+
+			if (url.length > 2) {
+				let results = (await remotes.getEntries({
+					data: {
+						dataLike: {
+							seo: {
+								slug: url
 							}
 						}
-					})) as (Entry & { data: { seo?: SeoFieldData } })[];
+					}
+				})) as (Entry & { data: { seo?: SeoFieldData } })[];
 
-					suggestions = [...suggestions, ...results];
+				suggestions = [...suggestions, ...results];
 
-					// Remove duplicates
-					suggestions = suggestions.filter(
-						(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
-					);
+				// Remove duplicates
+				suggestions = suggestions.filter(
+					(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
+				);
 
-					// Limit to 5 suggestions
-					suggestions = suggestions.slice(0, 5);
-				}
+				// Limit to 5 suggestions
+				suggestions = suggestions.slice(0, 5);
 			}
-
-			return suggestions;
 		}
-	});
+
+		return suggestions;
+	}
+
+	let autocompleteSuggestions = $state<(Entry & { data: { seo?: SeoFieldData } })[]>([]);
 </script>
 
-{#if $value === undefined || !$value.id}
+<div class={$value.id && $value.id.length > 0 ? 'hidden' : ''}>
 	<TextFieldWrapper
 		field={textField}
 		{form}
 		path={joinPath(path, textField.slug) as FormPathLeaves<T, string | undefined>}
 		{...props}
 	/>
+</div>
+
+{#if linkedEntry}
+	<Button
+		variant="outline"
+		onclick={() => {
+			$value.id = '';
+		}}
+	>
+		Linked to: {linkedEntry.data.seo?.title || 'No title'} ({linkedEntry.data.seo?.slug})
+	</Button>
 {/if}
-{#if linkedEntry !== undefined}
-	{#if linkedEntry}
-		{#await linkedEntry then entry}
-			{#if entry}
-				<Button
+
+{#if autocompleteSuggestions.length > 0}
+	<ul>
+		{#each autocompleteSuggestions as suggestion}
+			<li>
+				<Item.Root
 					variant="outline"
+					size="sm"
 					onclick={() => {
-						if ($value !== undefined) {
-							$value.id = '';
-						}
+						$value.id = suggestion.id;
 					}}
 				>
-					Linked to: {entry.data.seo?.title || 'No title'} ({entry.data.seo?.slug})
-				</Button>
-			{/if}
-		{/await}
-	{/if}
-{/if}
-
-{#if autocompleteSuggestions}
-	{#await autocompleteSuggestions then suggestions}
-		{#if suggestions && suggestions.length > 0}
-			<ul>
-				{#each suggestions as suggestion}
-					<li>
-						<Item.Root
-							variant="outline"
-							size="sm"
-							onclick={() => {
-								if ($value !== undefined) {
-									$value.id = suggestion.id;
-								}
-							}}
+					<Item.Content>
+						<Item.Title
+							>{suggestion.data.seo?.title || 'No title'} ({suggestion.data.seo?.slug})</Item.Title
 						>
-							<Item.Content>
-								<Item.Title
-									>{suggestion.data.seo?.title || 'No title'} ({suggestion.data.seo
-										?.slug})</Item.Title
-								>
-							</Item.Content>
-						</Item.Root>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	{/await}
+					</Item.Content>
+				</Item.Root>
+			</li>
+		{/each}
+	</ul>
 {/if}

package/dist/admin/components/fields/url-field.svelte.d.ts

@@ -4,7 +4,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
     props: {
         field: UrlField;
         form: SuperForm<T>;
-        path: FormPathLeaves<T, UrlFieldData | undefined>;
+        path: FormPathLeaves<T, UrlFieldData>;
     };
     exports: {};
     bindings: "";

package/dist/core/server/fields/resolveUrlFields.js

@@ -66,6 +66,7 @@ export async function resolveUrlFields(data, fields) {
                     const parsedVal = urlFieldDataSchema.safeParse(val);
                     if (parsedVal.success) {
                         result[field.slug] = parsedVal.data.url;
+                        break;
                     }
                     break;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.0.27",
+	"version": "0.0.29",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -174,6 +174,7 @@
 		"path-to-regexp": "^8.2.0",
 		"postgres": "^3.4.5",
 		"readline": "^1.3.0",
+		"runed": "^0.35.1",
 		"sharp": "^0.34.2",
 		"slugify": "^1.6.6",
 		"svelte-sonner": "^1.0.5",