npm - includio-cms - Versions diffs - 0.1.4 → 0.5.0 - Mend

includio-cms 0.1.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (296) hide show

package/dist/admin/components/fields/seo-field.svelte CHANGED Viewed

@@ -4,23 +4,27 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
 	import {
-		formFieldProxy,
-		type FormFieldProxy,
 		type FormPathLeaves,
 		type SuperForm
 	} from 'sveltekit-superforms';
 	import FieldRenderer from './field-renderer.svelte';
 	import { joinPath } from '../../utils/objectPath.js';
+	import { getAtPath, setAtPath } from '../../utils/objectPath.js';
 	import type {
 		Field,
 		ImageField,
-		ObjectFieldData,
 		SeoField,
 		SeoFieldData,
 		TextField
 	} from '../../../types/fields.js';
-	// import { onMount } from 'svelte';
-	import * as Item from '../../../components/ui/item/index.js';
+	import { untrack } from 'svelte';
+	import slugify from '../../imports/slugify.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 	type Props = {
 		field: SeoField;
@@ -30,31 +34,89 @@
 	let { field, form, path, ...props }: Props = $props();
+	const { form: formData } = form;
+	const labels = {
+		slug: {
+			label: { en: 'URL Slug', pl: 'Slug URL' },
+			description: {
+				en: 'Page address shown in the browser bar',
+				pl: 'Adres strony widoczny w pasku przeglądarki'
+			}
+		},
+		canonicalUrl: {
+			label: { en: 'Canonical URL', pl: 'Adres kanoniczny' },
+			description: {
+				en: 'If this content appears at another address, enter the original URL',
+				pl: 'Jeśli ta treść pojawia się pod innym adresem, podaj oryginalny URL'
+			}
+		},
+		title: {
+			label: { en: 'SEO Title', pl: 'Tytuł SEO' },
+			description: {
+				en: 'Appears in search results and browser tabs (50–60 characters)',
+				pl: 'Widoczny w wynikach wyszukiwania i zakładce przeglądarki (50–60 znaków)'
+			}
+		},
+		description: {
+			label: { en: 'Description', pl: 'Opis' },
+			description: {
+				en: 'Short summary for search engines (120–160 characters)',
+				pl: 'Krótkie podsumowanie dla wyszukiwarek (120–160 znaków)'
+			}
+		},
+		keywords: {
+			label: { en: 'Keywords', pl: 'Słowa kluczowe' },
+			description: {
+				en: 'Comma-separated list of keywords',
+				pl: 'Lista słów kluczowych oddzielonych przecinkami'
+			}
+		},
+		ogImage: {
+			label: { en: 'Social media image', pl: 'Obraz w mediach społecznościowych' },
+			description: {
+				en: 'Image displayed when sharing this page on social media',
+				pl: 'Obraz wyświetlany przy udostępnianiu strony w mediach społecznościowych'
+			}
+		},
+		customCode: {
+			label: { en: 'Custom code', pl: 'Własny kod' },
+			description: {
+				en: 'Additional HTML inserted into the page <head>',
+				pl: 'Dodatkowy HTML wstawiany do sekcji <head> strony'
+			}
+		}
+	};
 	const slugField: TextField = {
 		type: 'text',
 		slug: 'slug',
-		label: 'Slug',
+		label: labels.slug.label,
+		description: labels.slug.description,
 		required: true
 	};
 	const canonicalUrlField: TextField = {
 		type: 'text',
 		slug: 'canonicalUrl',
-		label: 'Canonical Url',
+		label: labels.canonicalUrl.label,
+		description: labels.canonicalUrl.description,
 		required: false
 	};
 	const titleField: TextField = {
 		type: 'text',
 		slug: 'title',
-		label: 'Title',
+		label: labels.title.label,
+		description: labels.title.description,
 		required: true
 	};
 	const descriptionField: TextField = {
 		type: 'text',
 		slug: 'description',
-		label: 'Description',
+		label: labels.description.label,
+		description: labels.description.description,
 		required: false,
 		multiline: true
 	};
@@ -62,7 +124,8 @@
 	const keyWordsField: TextField = {
 		type: 'text',
 		slug: 'keywords',
-		label: 'Keywords',
+		label: labels.keywords.label,
+		description: labels.keywords.description,
 		required: false,
 		multiline: true
 	};
@@ -70,14 +133,16 @@
 	const ogImageField: ImageField = {
 		type: 'image',
 		slug: 'ogImage',
-		label: 'Open Graph Image',
+		label: labels.ogImage.label,
+		description: labels.ogImage.description,
 		required: false
 	};
 	const customCodeField: TextField = {
 		type: 'text',
 		slug: 'customCode',
-		label: 'Custom Code',
+		label: labels.customCode.label,
+		description: labels.customCode.description,
 		required: false,
 		multiline: true
 	};
@@ -91,19 +156,134 @@
 		ogImageField,
 		customCodeField
 	];
+	// Helper: read a value from formData, handling both localized (object) and plain (string) values
+	function readSourceValue(sourcePath: string): string | undefined {
+		const raw = ($formData as Record<string, unknown>)[sourcePath];
+		if (typeof raw === 'string') return raw;
+		if (raw && typeof raw === 'object') {
+			return (raw as Record<string, string>)[contentLanguage.current];
+		}
+		return undefined;
+	}
+	// Helper: read value at a dot-path from formData
+	function readPath(dotPath: string): string | undefined {
+		const val = getAtPath($formData as Record<string, unknown>, dotPath);
+		return typeof val === 'string' ? val : undefined;
+	}
+	// Character count for current language
+	let titleLength = $derived.by(() => {
+		const val = readPath(joinPath(String(path), 'title', contentLanguage.current));
+		return val?.length ?? 0;
+	});
+	let descLength = $derived.by(() => {
+		const val = readPath(joinPath(String(path), 'description', contentLanguage.current));
+		return val?.length ?? 0;
+	});
+	function charHintClass(len: number, min: number, max: number): string {
+		if (len === 0) return 'text-muted-foreground';
+		if (len >= min && len <= max) return 'text-success';
+		if (len < min) return 'text-warning';
+		return 'text-destructive';
+	}
+	// Auto-gen: track last auto-generated values per language
+	let lastAutoSlugs: Record<string, string> = {};
+	let lastAutoTitles: Record<string, string> = {};
+	// slugSource → auto-gen seo.slug per language
+	$effect(() => {
+		if (!field.slugSource) return;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.slugSource];
+		if (!sourceRaw) return;
+		untrack(() => {
+			const pairs: [string, string][] =
+				typeof sourceRaw === 'string'
+					? [[contentLanguage.current, sourceRaw]]
+					: typeof sourceRaw === 'object'
+						? Object.entries(sourceRaw as Record<string, string>).filter(([, v]) => typeof v === 'string' && v)
+						: [];
+			let changed = false;
+			for (const [lang, text] of pairs) {
+				const targetPath = joinPath(String(path), 'slug', lang);
+				const current = getAtPath($formData as Record<string, unknown>, targetPath) as string | undefined;
+				if (!current || current === lastAutoSlugs[lang]) {
+					const newSlug = slugify(String(text), { lower: true, strict: true, trim: true });
+					if (newSlug !== current) {
+						setAtPath($formData as Record<string, unknown>, targetPath, newSlug);
+						changed = true;
+					}
+					lastAutoSlugs[lang] = newSlug;
+				}
+			}
+			if (changed) $formData = $formData;
+		});
+	});
+	// titleSource → auto-fill seo.title per language
+	$effect(() => {
+		if (!field.titleSource) return;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.titleSource];
+		if (!sourceRaw) return;
+		untrack(() => {
+			const pairs: [string, string][] =
+				typeof sourceRaw === 'string'
+					? [[contentLanguage.current, sourceRaw]]
+					: typeof sourceRaw === 'object'
+						? Object.entries(sourceRaw as Record<string, string>).filter(([, v]) => typeof v === 'string' && v)
+						: [];
+			let changed = false;
+			for (const [lang, text] of pairs) {
+				const targetPath = joinPath(String(path), 'title', lang);
+				const current = getAtPath($formData as Record<string, unknown>, targetPath) as string | undefined;
+				if (!current || current === lastAutoTitles[lang]) {
+					if (text !== current) {
+						setAtPath($formData as Record<string, unknown>, targetPath, text);
+						changed = true;
+					}
+					lastAutoTitles[lang] = text;
+				}
+			}
+			if (changed) $formData = $formData;
+		});
+	});
 </script>
-<Item.Root variant="outline">
-	<Item.Content>
-		<Item.Title class="mb-4 text-lg">SEO</Item.Title>
-		<div class="space-y-4">
-			{#each fields as f}
-				<FieldRenderer
-					field={f}
-					form={form as SuperForm<Record<string, unknown>>}
-					path={joinPath(path, f.slug)}
-				/>
-			{/each}
+<div class="space-y-4">
+	{#each fields as f}
+		<div>
+			<FieldRenderer
+				field={f}
+				form={form as SuperForm<Record<string, unknown>>}
+				path={joinPath(path, f.slug)}
+			/>
+			{#if f.slug === 'title'}
+				<p class="mt-1 text-xs {charHintClass(titleLength, 50, 60)}">
+					{titleLength}/60
+					{#if titleLength > 0 && titleLength < 50}
+						— {getLocalizedLabel({ en: 'a bit short', pl: 'trochę za krótko' }, interfaceLanguage.current)}
+					{:else if titleLength > 60}
+						— {getLocalizedLabel({ en: 'too long', pl: 'za długo' }, interfaceLanguage.current)}
+					{/if}
+				</p>
+			{/if}
+			{#if f.slug === 'description'}
+				<p class="mt-1 text-xs {charHintClass(descLength, 120, 160)}">
+					{descLength}/160
+					{#if descLength > 0 && descLength < 120}
+						— {getLocalizedLabel({ en: 'a bit short', pl: 'trochę za krótko' }, interfaceLanguage.current)}
+					{:else if descLength > 160}
+						— {getLocalizedLabel({ en: 'too long', pl: 'za długo' }, interfaceLanguage.current)}
+					{/if}
+				</p>
+			{/if}
 		</div>
-	</Item.Content>
-</Item.Root>
+	{/each}
+</div>

package/dist/admin/components/fields/simple-array-field.svelte ADDED Viewed

@@ -0,0 +1,289 @@
+<script lang="ts" module>
+	type T = Record<string, unknown>;
+</script>
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import Button from '../../../components/ui/button/button.svelte';
+	import Input from '../../../components/ui/input/input.svelte';
+	import {
+		formFieldProxy,
+		type FormFieldProxy,
+		type FormPathLeaves,
+		type SuperForm
+	} from 'sveltekit-superforms';
+	import type { ArrayField, UrlFieldData } from '../../../types/fields.js';
+	import { onMount } from 'svelte';
+	import CirclePlus from '@tabler/icons-svelte/icons/circle-plus';
+	import X from '@tabler/icons-svelte/icons/x';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	const contentLanguage = getContentLanguage();
+	const interfaceLanguage = useInterfaceLanguage();
+	type Props = {
+		field: ArrayField;
+		form: SuperForm<T>;
+		path: FormPathLeaves<T>;
+	};
+	let { field, form, path, ...props }: Props = $props();
+	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<unknown[] | undefined>;
+	onMount(() => {
+		if (!$value || !Array.isArray($value)) {
+			$value = [];
+		}
+	});
+	const atMax = $derived(field.maxItems !== undefined && ($value?.length ?? 0) >= field.maxItems);
+	// --- Text ---
+	let textInput = $state('');
+	function addTextItem() {
+		if (!textInput.trim() || atMax) return;
+		if (field.localized) {
+			const item: Record<string, string> = {};
+			item[contentLanguage.current] = textInput.trim();
+			$value = [...($value ?? []), item];
+		} else {
+			$value = [...($value ?? []), textInput.trim()];
+		}
+		textInput = '';
+	}
+	function handleTextKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			addTextItem();
+		}
+	}
+	// --- Number ---
+	let numberInput = $state('');
+	function addNumberItem() {
+		const num = Number(numberInput);
+		if (numberInput === '' || isNaN(num) || atMax) return;
+		$value = [...($value ?? []), num];
+		numberInput = '';
+	}
+	function handleNumberKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			addNumberItem();
+		}
+	}
+	// --- URL ---
+	function addUrlItem() {
+		if (atMax) return;
+		const item: UrlFieldData = { url: {}, text: {}, newTab: false };
+		$value = [...($value ?? []), item];
+	}
+	// --- Common ---
+	function removeItem(index: number) {
+		if (!$value) return;
+		$value = $value.filter((_, i) => i !== index);
+	}
+	function getTextDisplay(item: unknown): string {
+		if (typeof item === 'string') return item;
+		if (typeof item === 'object' && item !== null) {
+			const rec = item as Record<string, string>;
+			return rec[contentLanguage.current] || Object.values(rec)[0] || '';
+		}
+		return String(item);
+	}
+</script>
+{#if field.of === 'text'}
+	<!-- Tag chips for text items -->
+	<div class="space-y-3">
+		{#if $value && $value.length > 0}
+			<div class="flex flex-wrap gap-2">
+				{#each $value as item, index}
+					<span
+						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
+					>
+						{#if field.localized}
+							<!-- Localized: show editable input per current lang -->
+							<input
+								type="text"
+								class="bg-transparent border-none outline-none w-auto min-w-[4ch] text-sm"
+								style="width: {getTextDisplay(item).length + 1}ch"
+								value={getTextDisplay(item)}
+								oninput={(e) => {
+									const val = e.currentTarget.value;
+									if (typeof item === 'object' && item !== null) {
+										const rec = { ...(item as Record<string, string>) };
+										rec[contentLanguage.current] = val;
+										const arr = [...($value ?? [])];
+										arr[index] = rec;
+										$value = arr;
+									}
+								}}
+							/>
+						{:else}
+							{item}
+						{/if}
+						<button
+							type="button"
+							class="text-[#555566] hover:text-[#C44B4B] transition-colors"
+							onclick={() => removeItem(index)}
+							aria-label="Usuń element"
+						>
+							<X class="h-3.5 w-3.5" />
+						</button>
+					</span>
+				{/each}
+			</div>
+		{/if}
+		<div class="flex items-center gap-2">
+			<Input
+				type="text"
+				placeholder="Wpisz i naciśnij Enter..."
+				bind:value={textInput}
+				onkeydown={handleTextKeydown}
+				disabled={atMax}
+				class="max-w-xs"
+			/>
+			<Button size="sm" type="button" variant="outline" disabled={atMax || !textInput.trim()} onclick={addTextItem}>
+				<CirclePlus class="h-4 w-4" />
+				Dodaj
+			</Button>
+		</div>
+		{#if field.maxItems !== undefined}
+			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
+				{$value?.length ?? 0} / {field.maxItems}
+			</p>
+		{/if}
+	</div>
+{:else if field.of === 'number'}
+	<!-- Tag chips for number items -->
+	<div class="space-y-3">
+		{#if $value && $value.length > 0}
+			<div class="flex flex-wrap gap-2">
+				{#each $value as item, index}
+					<span
+						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium tabular-nums"
+					>
+						{item}
+						<button
+							type="button"
+							class="text-[#555566] hover:text-[#C44B4B] transition-colors"
+							onclick={() => removeItem(index)}
+							aria-label="Usuń element"
+						>
+							<X class="h-3.5 w-3.5" />
+						</button>
+					</span>
+				{/each}
+			</div>
+		{/if}
+		<div class="flex items-center gap-2">
+			<Input
+				type="number"
+				placeholder="Wpisz liczbę..."
+				bind:value={numberInput}
+				onkeydown={handleNumberKeydown}
+				disabled={atMax}
+				class="max-w-[160px]"
+			/>
+			<Button size="sm" type="button" variant="outline" disabled={atMax || numberInput === ''} onclick={addNumberItem}>
+				<CirclePlus class="h-4 w-4" />
+				Dodaj
+			</Button>
+		</div>
+		{#if field.maxItems !== undefined}
+			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
+				{$value?.length ?? 0} / {field.maxItems}
+			</p>
+		{/if}
+	</div>
+{:else if field.of === 'url'}
+	<!-- Compact list for URL items -->
+	<div class="space-y-3">
+		{#if $value && $value.length > 0}
+			<div class="space-y-2">
+				{#each $value as item, index}
+					{@const urlItem = item as UrlFieldData}
+					<div class="flex items-start gap-2 rounded-xl border border-[#E2DFF0] bg-[#F4F2FA] p-3">
+						<div class="flex-1 space-y-2">
+							<Input
+								type="url"
+								placeholder="URL..."
+								value={urlItem.url?.[contentLanguage.current] ?? ''}
+								oninput={(e) => {
+									const val = e.currentTarget.value;
+									const updated = { ...urlItem, url: { ...(urlItem.url ?? {}), [contentLanguage.current]: val } };
+									const arr = [...($value ?? [])];
+									arr[index] = updated;
+									$value = arr;
+								}}
+							/>
+							<div class="flex items-center gap-2">
+								<Input
+									type="text"
+									placeholder="Tekst linku..."
+									class="flex-1"
+									value={urlItem.text?.[contentLanguage.current] ?? ''}
+									oninput={(e) => {
+										const val = e.currentTarget.value;
+										const updated = { ...urlItem, text: { ...(urlItem.text ?? {}), [contentLanguage.current]: val } };
+										const arr = [...($value ?? [])];
+										arr[index] = updated;
+										$value = arr;
+									}}
+								/>
+								<label class="flex items-center gap-1.5 text-xs text-[#555566] whitespace-nowrap">
+									<input
+										type="checkbox"
+										checked={urlItem.newTab ?? false}
+										onchange={(e) => {
+											const updated = { ...urlItem, newTab: e.currentTarget.checked };
+											const arr = [...($value ?? [])];
+											arr[index] = updated;
+											$value = arr;
+										}}
+										class="accent-[#5B4A9E]"
+									/>
+									Nowa karta
+								</label>
+							</div>
+						</div>
+						<button
+							type="button"
+							class="mt-1.5 text-[#555566] hover:text-[#C44B4B] transition-colors"
+							onclick={() => removeItem(index)}
+							aria-label="Usuń link"
+						>
+							<X class="h-4 w-4" />
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<Button size="sm" type="button" variant="outline" disabled={atMax} onclick={addUrlItem}>
+			<CirclePlus class="h-4 w-4" />
+			Dodaj link
+		</Button>
+		{#if field.maxItems !== undefined}
+			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
+				{$value?.length ?? 0} / {field.maxItems}
+			</p>
+		{/if}
+	</div>
+{/if}

package/dist/admin/components/fields/simple-array-field.svelte.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+import type { ArrayField } from '../../../types/fields.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        field: ArrayField;
+        form: SuperForm<T>;
+        path: FormPathLeaves<T>;
+    };
+    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 SimpleArrayField: $$IsomorphicComponent;
+type SimpleArrayField<T extends Record<string, unknown>> = InstanceType<typeof SimpleArrayField<T>>;
+export default SimpleArrayField;

package/dist/admin/components/fields/slug-field.svelte CHANGED Viewed

@@ -22,13 +22,14 @@
 	let { field, form, path, ...props }: Props = $props();
-	let pattern = field.pattern;
+	let effectivePattern = field.pattern || (field.sourceField ? `{${field.sourceField}}` : undefined);
+	let pattern = effectivePattern;
 	const { form: formData } = form;
 	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<string | undefined>;
-	let patternKeys = field.pattern ? extractPatternKeys(field.pattern) : [];
+	let patternKeys = effectivePattern ? extractPatternKeys(effectivePattern) : [];
 	function extractPatternKeys(pattern: string): string[] {
 		const matches = [...pattern.matchAll(/{([^}]+)}/g)];