includio-cms 0.5.2 → 0.5.3

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

@@ -19,6 +19,7 @@
 	import RequiredLabel from './required-label.svelte';
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import FieldValueBridge from './field-value-bridge.svelte';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -39,7 +40,6 @@
 	);
 	const isMultiLang = $derived(contentLanguage.all.length > 1);
 	const defaultLang = $derived(contentLanguage.all[0]);
-	const isEditingNonDefault = $derived(isMultiLang && contentLanguage.current !== defaultLang);
 
 	const copyLang: Record<InterfaceLanguage, { copyFrom: (lang: string) => string }> = {
 		en: { copyFrom: (lang: string) => `Copy from ${lang.toUpperCase()}` },
@@ -55,7 +55,6 @@
 		return dotPath.split('.').reduce<unknown>((obj, key) => (obj as Record<string, unknown>)?.[key], data);
 	}
 
-	/** Check if a value is empty for copy-from logic. */
 	function isValueEmpty(value: unknown): boolean {
 		if (value == null) return true;
 		if (typeof value === 'string') return value.length === 0;
@@ -66,12 +65,10 @@
 		return false;
 	}
 
-	/** Get source language value for a given field. */
 	function getSourceValue(lang: string): unknown {
 		return resolvePathValue($formData, joinPath(path, lang));
 	}
 
-	/** Find first language that has content (for copy-from). */
 	function findSourceLang(currentLang: string): string | null {
 		for (const l of contentLanguage.all) {
 			if (l === currentLang) continue;
@@ -81,7 +78,6 @@
 		return null;
 	}
 
-	/** Copy value from source language to current language. */
 	function copyFrom(sourceLang: string, targetLang: string) {
 		const sourceVal = getSourceValue(sourceLang);
 		if (sourceVal == null) return;
@@ -92,15 +88,13 @@
 				? structuredClone(sourceVal)
 				: sourceVal;
 		setAtPath($formData as Record<string, unknown>, targetPath, value);
-		$formData = $formData; // trigger reactivity
+		$formData = $formData;
 	}
 
-	/** Get reference text for display. */
 	function getReferenceText(lang: string): string {
 		const val = getSourceValue(lang);
 		if (typeof val === 'string') return val;
 		if (val && typeof val === 'object' && 'type' in (val as Record<string, unknown>)) {
-			// Content field — show placeholder
 			return interfaceLanguage.current === 'pl'
 				? '(treść w edytorze)'
 				: '(editor content)';
@@ -108,7 +102,6 @@
 		return '';
 	}
 
-	/** Get per-language fill status for status dots. */
 	function getLangFillStatus(lang: string): boolean {
 		const val = getSourceValue(lang);
 		return !isValueEmpty(val);
@@ -138,6 +131,19 @@
 		});
 		return parts.join(', ');
 	}
+
+	// Lazy-load richtext and content field components
+	let RichtextField: typeof TextField | null = $state(null);
+	let ContentField: typeof TextField | null = $state(null);
+
+	$effect(() => {
+		if (field.type === 'richtext' && !RichtextField) {
+			import('./richtext-field.svelte').then((m) => { RichtextField = m.default; });
+		}
+		if (field.type === 'content' && !ContentField) {
+			import('./content-field.svelte').then((m) => { ContentField = m.default; });
+		}
+	});
 </script>
 
 <Tabs.Root
@@ -154,7 +160,6 @@
 						{#if field.label}
 							<div class="flex items-center gap-1.5">
 								<RequiredLabel required={field.required}>{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
-								<!-- Status dots -->
 								{#if isMultiLang && (field.required || contentLanguage.all.some(l => getLangFillStatus(l)))}
 									<span
 										class="inline-flex items-center gap-1"
@@ -171,7 +176,6 @@
 							</div>
 						{/if}
 
-						<!-- Reference block -->
 						{#if contentLanguage.referenceMode && isMultiLang}
 							{@const refSource = findSourceLang(lang)}
 							{#if refSource}
@@ -186,37 +190,15 @@
 						{/if}
 
 						{#if field.type === 'text'}
-							<TextField
-								{...props}
-								{field}
-								{form}
-								path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
-							/>
-						{:else if field.type === 'richtext'}
-							{#await import('./richtext-field.svelte') then { default: RichtextField }}
-								<RichtextField
-									{...props}
-									{field}
-									{form}
-									path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
-								/>
-							{:catch}
-								<div class="h-32 animate-pulse rounded-md bg-accent"></div>
-							{/await}
-						{:else if field.type === 'content'}
-							{#await import('./content-field.svelte') then { default: ContentField }}
-								<ContentField
-									{...props}
-									{field}
-									{form}
-									path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
-								/>
-							{:catch}
-								<div class="h-32 animate-pulse rounded-md bg-accent"></div>
-							{/await}
+							<FieldValueBridge {form} path={joinPath(path, lang) as FormPathLeaves<T>} component={TextField} {field} {...props} />
+						{:else if field.type === 'richtext' && RichtextField}
+							<FieldValueBridge {form} path={joinPath(path, lang) as FormPathLeaves<T>} component={RichtextField} {field} {...props} />
+						{:else if field.type === 'content' && ContentField}
+							<FieldValueBridge {form} path={joinPath(path, lang) as FormPathLeaves<T>} component={ContentField} {field} {...props} />
+						{:else}
+							<div class="h-32 animate-pulse rounded-md bg-accent"></div>
 						{/if}
 
-						<!-- Copy from button -->
 						{#if isMultiLang}
 							{@const currentVal = resolvePathValue($formData, joinPath(path, lang))}
 							{@const sourceLang = isValueEmpty(currentVal) ? findSourceLang(lang) : null}

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

@@ -1,41 +1,29 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import Input from '../../../components/ui/input/input.svelte';
 	import Textarea from '../../../components/ui/textarea/textarea.svelte';
 	import type { TextField } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 
 	type Props = {
 		field: TextField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string | undefined>;
+		value: string | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<string | undefined>;
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = '';
+		if (value === undefined) {
+			value = '';
 		}
 	});
 </script>
 
 {#if field.multiline}
-	<Textarea {...props} bind:value={$value} placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
+	<Textarea {...props} bind:value placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
 {:else}
-	<Input {...props} bind:value={$value} type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
+	<Input {...props} bind:value type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
 {/if}

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

@@ -1,30 +1,8 @@
 import type { TextField } from '../../../types/fields.js';
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: TextField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, string | undefined>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+type Props = {
+    field: TextField;
+    value: string | undefined;
 };
-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 TextField: $$IsomorphicComponent;
-type TextField<T extends Record<string, unknown>> = InstanceType<typeof TextField<T>>;
+declare const TextField: import("svelte").Component<Props, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
 export default TextField;

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

@@ -47,12 +47,17 @@
 			$value = { ...$value, newTab: false };
 		}
 
+		if (field.rel && $value.rel === undefined) {
+			$value = { ...$value, rel: '' };
+		}
+
 		if (!urlFieldDataSchema.safeParse($value).success) {
 			$value = {
 				id: '',
 				url: {},
 				...(field.text ? { text: {} } : {}),
-				...(field.newTab ? { newTab: false } : {})
+				...(field.newTab ? { newTab: false } : {}),
+				...(field.rel ? { rel: '' } : {})
 			};
 		}
 
@@ -62,6 +67,6 @@
 	let fieldValid = $state(false);
 </script>
 
-{#if fieldValid}
-	<UrlFieldComponent {form} {field} path={path as FormPathLeaves<T, UrlFieldData>} {...props} />
+{#if fieldValid && $value}
+	<UrlFieldComponent {field} bind:value={$value} {...props} />
 {/if}