includio-cms 0.1.3 → 0.5.0

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;

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

@@ -5,6 +5,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
 	import type {
 		RichtextField as RichtextFieldType,
+		ContentField as ContentFieldType,
 		TextField as TextFieldType
 	} from '../../../types/fields.js';
 	import * as Tabs from '../../../components/ui/tabs/index.js';
@@ -21,7 +22,7 @@
 	const interfaceLanguage = useInterfaceLanguage();
 
 	type Props = {
-		field: TextFieldType | RichtextFieldType;
+		field: TextFieldType | RichtextFieldType | ContentFieldType;
 		form: SuperForm<T>;
 		path: FormPathLeaves<T, string | undefined>;
 	};
@@ -86,6 +87,17 @@
 							{: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}
 						{/if}
 					{/snippet}
 				</Form.Control>

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

@@ -1,8 +1,8 @@
-import type { RichtextField as RichtextFieldType, TextField as TextFieldType } from '../../../types/fields.js';
+import type { RichtextField as RichtextFieldType, ContentField as ContentFieldType, TextField as TextFieldType } from '../../../types/fields.js';
 import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
-        field: TextFieldType | RichtextFieldType;
+        field: TextFieldType | RichtextFieldType | ContentFieldType;
         form: SuperForm<T>;
         path: FormPathLeaves<T, string | undefined>;
     };

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

@@ -80,11 +80,12 @@
 			let url = Object.values(currUrl)[i];
 
 			if (url.length > 2) {
-				let results = (await remotes.getEntries({
-					dataLike: { seo: { slug: url } }
-				})) as EntryWithSeo[];
+				const [slugResults, titleResults] = await Promise.all([
+					remotes.getEntries({ dataLike: { seo: { slug: url } } }),
+					remotes.getEntries({ dataLike: { seo: { title: url } } })
+				]) as [EntryWithSeo[], EntryWithSeo[]];
 
-				suggestions = [...suggestions, ...results];
+				suggestions = [...suggestions, ...slugResults, ...titleResults];
 				suggestions = suggestions.filter(
 					(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
 				);

package/dist/admin/components/layout/app-sidebar.svelte

@@ -2,38 +2,41 @@
 	import * as Sidebar from '../../../components/ui/sidebar/index.js';
 	import type { ComponentProps } from 'svelte';
 	import NavMain from './nav-main.svelte';
+	import NavSingletons from './nav-singletons.svelte';
 	import NavCollections from './nav-collections.svelte';
-	import NavUser from './nav-user.svelte';
+	import NavFooter from './nav-footer.svelte';
 	import NavForms from './nav-forms.svelte';
 	import NavSearch from './nav-search.svelte';
-	import logo from '../../assets/logo.svg';
-
+	import { resolve } from '$app/paths';
 	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 </script>
 
-<Sidebar.Root
-	collapsible="offcanvas"
-	class="border-none bg-white/70 backdrop-blur-xl dark:bg-slate-900/70"
-	{...restProps}
->
-	<Sidebar.Header class="h-(--header-height) shrink-0 flex-row items-center border-b border-sidebar-border px-4">
-		<img
-			src={logo}
-			alt="cms logo"
-			width="100"
-			height="22"
-			class="dark:brightness-0 dark:invert"
-		/>
+<Sidebar.Root collapsible="icon" class="bg-sidebar" {...restProps}>
+	<Sidebar.Header
+		class="border-sidebar-border h-[52px] shrink-0 flex-row items-center border-b px-3 group-data-[collapsible=icon]:px-2"
+	>
+		<a
+			href={resolve('/admin')}
+			class="flex items-baseline gap-px"
+			aria-label="AriaCMS — strona główna"
+		>
+			<span class="text-primary text-base font-extrabold">Aria</span>
+			<span
+				class="text-primary text-[11px] font-light tracking-[0.15em] uppercase group-data-[collapsible=icon]:hidden"
+				>CMS</span
+			>
+		</a>
 	</Sidebar.Header>
-	<Sidebar.Content>
-		<div class="px-0 pt-3 pb-1">
-			<NavSearch />
+	<Sidebar.Content class="gap-0">
+		<NavSearch />
+		<div class="py-1">
+			<NavMain />
+			<NavSingletons />
+			<NavCollections />
+			<NavForms />
 		</div>
-		<NavMain />
-		<NavCollections />
-		<NavForms />
 	</Sidebar.Content>
-	<Sidebar.Footer>
-		<NavUser />
+	<Sidebar.Footer class="p-0">
+		<NavFooter />
 	</Sidebar.Footer>
 </Sidebar.Root>

package/dist/admin/components/layout/lang.d.ts

@@ -9,12 +9,18 @@ export declare const sidebarLang: Record<string, {
         dashboard: string;
         users: string;
     };
+    singletons: {
+        title: string;
+    };
     collections: {
         title: string;
     };
     forms: {
         title: string;
     };
+    footer: {
+        help: string;
+    };
     search: {
         placeholder: string;
         noResults: string;

package/dist/admin/components/layout/lang.js

@@ -7,15 +7,21 @@ export const sidebarLang = {
         main: {
             platform: 'Platforma',
             media: 'Biblioteka mediów',
-            dashboard: 'Kokpit',
+            dashboard: 'Pulpit',
             users: 'Użytkownicy'
         },
+        singletons: {
+            title: 'Pojedyncze'
+        },
         collections: {
             title: 'Kolekcje'
         },
         forms: {
             title: 'Formularze'
         },
+        footer: {
+            help: 'Pomoc'
+        },
         search: {
             placeholder: 'Szukaj...',
             noResults: 'Brak wyników',
@@ -36,12 +42,18 @@ export const sidebarLang = {
             dashboard: 'Dashboard',
             users: 'Users'
         },
+        singletons: {
+            title: 'Singletons'
+        },
         collections: {
             title: 'Collections'
         },
         forms: {
             title: 'Forms'
         },
+        footer: {
+            help: 'Help'
+        },
         search: {
             placeholder: 'Search...',
             noResults: 'No results',