includio-cms 0.1.4 → 0.5.1

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

@@ -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

@@ -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

@@ -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)];

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

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import type { Field } from '../../../types/fields.js';
+	import Input from '../../../components/ui/input/input.svelte';
+	import { Checkbox } from '../../../components/ui/checkbox/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+
+	type Props = {
+		fields: Field[];
+		data: Record<string, unknown>;
+		onchange: (slug: string, value: unknown) => void;
+	};
+
+	let { fields, data, onchange }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const SUPPORTED_TYPES = new Set([
+		'text',
+		'number',
+		'boolean',
+		'select',
+		'radio',
+		'url'
+	]);
+
+	function handleInput(slug: string, e: Event) {
+		const target = e.target as HTMLInputElement;
+		onchange(slug, target.value);
+	}
+
+	function handleNumberInput(slug: string, e: Event) {
+		const target = e.target as HTMLInputElement;
+		const num = parseFloat(target.value);
+		onchange(slug, isNaN(num) ? 0 : num);
+	}
+</script>
+
+<div class="grid gap-3">
+	{#each fields as field}
+		{#if SUPPORTED_TYPES.has(field.type)}
+			<div class="space-y-1.5">
+				{#if field.type !== 'boolean'}
+					<Label class="text-xs font-medium">
+						{getLocalizedLabel(field.label, interfaceLanguage.current)}
+						{#if field.required}<span class="text-destructive">*</span>{/if}
+					</Label>
+				{/if}
+
+				{#if field.type === 'text'}
+					<Input
+						type="text"
+						value={String(data[field.slug] ?? '')}
+						oninput={(e) => handleInput(field.slug, e)}
+						placeholder={field.placeholder ? getLocalizedLabel(field.placeholder, interfaceLanguage.current) : ''}
+						class="h-8 text-sm"
+					/>
+				{:else if field.type === 'number'}
+					<Input
+						type="number"
+						value={String(data[field.slug] ?? 0)}
+						oninput={(e) => handleNumberInput(field.slug, e)}
+						min={field.min}
+						max={field.max}
+						step={field.step}
+						class="h-8 text-sm"
+					/>
+				{:else if field.type === 'boolean'}
+					<div class="flex items-center gap-2">
+						<Checkbox
+							checked={Boolean(data[field.slug])}
+							onCheckedChange={(checked) => onchange(field.slug, checked)}
+						/>
+						<Label class="text-xs font-medium">
+							{getLocalizedLabel(field.label, interfaceLanguage.current)}
+						</Label>
+					</div>
+				{:else if field.type === 'select' || field.type === 'radio'}
+					{@const currentValue = String(data[field.slug] ?? '')}
+					{@const currentLabel = field.options.find((o) => o.value === currentValue)}
+					<Select.Root
+						type="single"
+						value={currentValue}
+						onValueChange={(v) => onchange(field.slug, v)}
+					>
+						<Select.Trigger size="sm" class="w-full">
+							{#if currentLabel}
+								{getLocalizedLabel(currentLabel.label, interfaceLanguage.current)}
+							{:else}
+								<span class="text-muted-foreground">Wybierz...</span>
+							{/if}
+						</Select.Trigger>
+						<Select.Content>
+							{#each field.options as option}
+								<Select.Item value={option.value} label={getLocalizedLabel(option.label, interfaceLanguage.current)} />
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				{:else if field.type === 'url'}
+					{@const urlData = (data[field.slug] as { url?: string; id?: string; text?: string; newTab?: boolean } | undefined) ?? { url: '' }}
+					<Input
+						type="url"
+						value={urlData.url ?? ''}
+						oninput={(e) => {
+							const target = e.target as HTMLInputElement;
+							onchange(field.slug, { ...urlData, url: target.value });
+						}}
+						placeholder={field.placeholder ? getLocalizedLabel(field.placeholder, interfaceLanguage.current) : 'https://...'}
+						class="h-8 text-sm"
+					/>
+					{#if field.text}
+						<Input
+							type="text"
+							value={urlData.text ?? ''}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								onchange(field.slug, { ...urlData, text: target.value });
+							}}
+							placeholder="Tekst linku"
+							class="h-8 text-sm mt-1"
+						/>
+					{/if}
+					{#if field.newTab}
+						<div class="flex items-center gap-2 mt-1">
+							<Checkbox
+								checked={urlData.newTab ?? false}
+								onCheckedChange={(checked) => onchange(field.slug, { ...urlData, newTab: checked })}
+							/>
+							<Label class="text-xs font-medium">Otwórz w nowej karcie</Label>
+						</div>
+					{/if}
+				{/if}
+
+				{#if field.description}
+					<p class="text-muted-foreground text-xs">
+						{getLocalizedLabel(field.description, interfaceLanguage.current)}
+					</p>
+				{/if}
+			</div>
+		{:else}
+			<div class="text-muted-foreground rounded-md border border-dashed p-2 text-center text-xs">
+				Pole „{getLocalizedLabel(field.label, interfaceLanguage.current)}" ({field.type}) nie jest obsługiwane w blokach inline
+			</div>
+		{/if}
+	{/each}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Field } from '../../../types/fields.js';
+type Props = {
+    fields: Field[];
+    data: Record<string, unknown>;
+    onchange: (slug: string, value: unknown) => void;
+};
+declare const StandaloneFieldRenderer: import("svelte").Component<Props, {}, "">;
+type StandaloneFieldRenderer = ReturnType<typeof StandaloneFieldRenderer>;
+export default StandaloneFieldRenderer;