includio-cms 0.0.8 → 0.0.9

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

@@ -18,16 +18,9 @@
 	style="--sidebar-width: calc(var(--spacing) * 72); --header-height: calc(var(--spacing) * 12);"
 >
 	<AppSidebar variant="inset" />
+
 	<Sidebar.Inset>
 		<SiteHeader />
-		<div class="flex flex-1 flex-col">
-			<div class="@container/main flex flex-1 flex-col gap-2">
-				<div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-					<div class="px-4 lg:px-6">
-						{@render children()}
-					</div>
-				</div>
-			</div>
-		</div>
+		{@render children()}
 	</Sidebar.Inset>
 </Sidebar.Provider>

package/dist/admin/client/collection/collection-page.svelte

@@ -31,23 +31,27 @@
 </script>
 
 {#if collection}
-	<Button onclick={onCreateEntry} size="lg"><Plus /> Create new</Button>
-
-	{#await collectionEntriesQuery then entries}
-		{@const items = entries.map((entry) => ({
-			id: entry.id,
-			collection: entry.slug,
-			name:
-				collection.entryAdminTitle && entry.data[collection.entryAdminTitle]
-					? (entry.data[collection.entryAdminTitle] as Record<string, string>)[
-							getContentLanguage()
-						] || entry.id
-					: entry.id,
-			url: `/admin/entries/${entry.id}`,
-			status: entry.status,
-			createdAt: entry.createdAt,
-			updatedAt: entry.updatedAt
-		}))}
-		<DataTable data={items} {columns} />
-	{/await}
+	<div class="p-4 md:p-6">
+		<Button onclick={onCreateEntry} size="lg" class="mb-4"><Plus /> Create new</Button>
+
+		{#await collectionEntriesQuery then entries}
+			{@const items = entries
+				.filter((entry) => entry.deletedAt === null)
+				.map((entry) => ({
+					id: entry.id,
+					collection: entry.slug,
+					name:
+						collection.entryAdminTitle && entry.data[collection.entryAdminTitle]
+							? (entry.data[collection.entryAdminTitle] as Record<string, string>)[
+									getContentLanguage()
+								] || entry.id
+							: entry.id,
+					url: `/admin/entries/${entry.id}`,
+					status: entry.status,
+					createdAt: entry.createdAt,
+					updatedAt: entry.updatedAt
+				}))}
+			<DataTable data={items} {columns} />
+		{/await}
+	</div>
 {/if}

package/dist/admin/client/entry/entry-page.svelte

@@ -6,9 +6,13 @@
 
 	const remotes = getRemotes();
 
-	let entry = $derived(await remotes.getEntryById(page.params.entryId || ''));
+	let entryQuery = $derived(remotes.getEntryById(page.params.entryId || ''));
 </script>
 
-{#key entry}
-	<Entry {entry} />
+{#key page.url}
+	{#await entryQuery}
+		Loading...
+	{:then entry}
+		<Entry {entry} />
+	{/await}
 {/key}

package/dist/admin/client/entry/entry.svelte

@@ -14,7 +14,15 @@
 	import { zod, zodClient } from 'sveltekit-superforms/adapters';
 
 	import { getRemotes } from '../../context/remotes.js';
-	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import {
+		getContentLanguage,
+		setContentLanguage
+	} from '../../state/content-language.svelte.js';
+
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
+	import * as ToggleGroup from '../../../components/ui/toggle-group/index.js';
+	import DotsVerticalIcon from '@tabler/icons-svelte/icons/dots-vertical';
+	import { page } from '$app/state';
 
 	const remotes = getRemotes();
 
@@ -100,60 +108,115 @@
 	});
 </script>
 
-<div class="flex items-stretch">
-	<FieldsForm {form} fields={collection.fields} class="grow">
-		{#snippet children()}
-			<Button type="button" variant="destructive" class="mt-2 w-full" onclick={onDelete}
-				>Delete</Button
-			>
+<div
+	class="bg-background sticky top-0 z-50 flex items-center justify-between gap-4 border-b px-4 py-3 md:px-6"
+>
+	<div class="flex items-center gap-4">
+		<div class="flex items-center gap-1">
+			<p class="text-sm whitespace-nowrap">
+				<span class="text-muted-foreground">Status:</span>
+				<span class="capitalize">{entry.status}</span> -
+			</p>
 
-			<p>Status: {entry.status}</p>
-			<p>Created: {entry.createdAt.toLocaleString('pl')}</p>
-			<p>Updated: {entry.updatedAt.toLocaleString('pl')}</p>
-
-			{#if entry.publishedAt}
-				<p>Published: {entry.publishedAt.toLocaleString('pl')}</p>
-			{/if}
-			<p class="text-muted-foreground text-xs">ID: {entry.id}</p>
-		{/snippet}
-
-		{#snippet after()}
 			{#if entry.status === 'draft'}
-				<Button
-					onclick={() => {
-						remotes.updateEntryCommand({
+				<button
+					onclick={async () => {
+						entry.status = 'published';
+						const updatedEntry = await remotes.updateEntryCommand({
 							id: entry.id,
 							data: { status: 'published' }
 						});
+						entry = updatedEntry;
 					}}
 					type="button"
-					class="mt-2 w-full">Publish</Button
+					class="text-sm underline">Publish</button
 				>
 			{:else}
-				<Button
+				<button
 					type="button"
-					class="mt-2 w-full"
-					onclick={() => {
-						remotes.updateEntryCommand({
+					class="text-sm underline"
+					onclick={async () => {
+						entry.status = 'draft';
+						const updatedEntry = await remotes.updateEntryCommand({
 							id: entry.id,
 							data: { status: 'draft' }
 						});
-					}}>Unpublish</Button
+						entry = updatedEntry;
+					}}>Unpublish</button
 				>
 			{/if}
+		</div>
 
-			{#if previewUrl}
-				<Button
-					type="button"
-					onclick={() => {
-						isPreview = !isPreview;
-					}}
-					class="mt-2 w-full"
-					variant="outline">{isPreview ? 'Hide' : 'Show'} Preview</Button
-				>
-			{/if}
-		{/snippet}
-	</FieldsForm>
+		<p class="text-sm whitespace-nowrap">
+			<span class="text-muted-foreground">Modified:</span>
+			{entry.updatedAt.toLocaleString('pl')}
+		</p>
+		<p class="text-sm whitespace-nowrap">
+			<span class="text-muted-foreground">Created:</span>
+			{entry.createdAt.toLocaleString('pl')}
+		</p>
+	</div>
+
+	<div class="flex items-center gap-2">
+		{#if languages.length > 1}
+			<ToggleGroup.Root
+				size="sm"
+				type="single"
+				variant="outline"
+				onValueChange={(val) => {
+					if (val) {
+						setContentLanguage(val);
+					}
+				}}
+				value={getContentLanguage()}
+			>
+				{#each languages as lang}
+					<ToggleGroup.Item value={lang}>
+						{lang.toUpperCase()}
+					</ToggleGroup.Item>
+				{/each}
+			</ToggleGroup.Root>
+		{/if}
+
+		{#if previewUrl}
+			<Button
+				type="button"
+				size="sm"
+				onclick={() => {
+					isPreview = !isPreview;
+				}}
+				variant="outline">{isPreview ? 'Hide' : 'Show'} Preview</Button
+			>
+		{/if}
+
+		<Button
+			type="submit"
+			size="sm"
+			onclick={() => {
+				form.submit();
+			}}>Save</Button
+		>
+
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger class="data-[state=open]:bg-muted text-muted-foreground flex size-8">
+				{#snippet child({ props })}
+					<Button variant="ghost" size="icon" {...props}>
+						<DotsVerticalIcon />
+						<span class="sr-only">Open menu</span>
+					</Button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end" class="w-32">
+				<DropdownMenu.Item variant="destructive" onclick={onDelete}>Delete</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+</div>
+
+<div class="flex items-stretch">
+	<div class="grow p-4 lg:p-6">
+		<FieldsForm {form} fields={collection.fields} />
+	</div>
 
 	{#if isPreview}
 		<div class="flex w-[768px] shrink-0 flex-col space-y-4 pl-4">

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

@@ -20,6 +20,11 @@
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import FieldRenderer from './field-renderer.svelte';
 	import { onMount, tick } from 'svelte';
+	import * as Form from '../../../components/ui/form/index.js';
+	import CirclePlus from '@tabler/icons-svelte/icons/circle-plus';
+	import Badge from '../../../components/ui/badge/badge.svelte';
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
+	import DotsVerticalIcon from '@tabler/icons-svelte/icons/dots-vertical';
 
 	type Props = {
 		field: ArrayField;
@@ -55,13 +60,27 @@
 			}
 		];
 
-		await tick();
-
 		openAndCloseOthers($value.length - 1);
 	}
 
+	function duplicateItem(index: number) {
+		if (!$value) return;
+		const itemToDuplicate = $value[index];
+		if (!itemToDuplicate) return;
+
+		$value = [
+			...$value.slice(0, index + 1),
+			JSON.parse(JSON.stringify(itemToDuplicate)),
+			...$value.slice(index + 1)
+		];
+
+		openAndCloseOthers(index + 1);
+	}
+
 	function removeItem(index: number) {
 		if (!$value) return;
+
+		accordionOpenState = accordionOpenState.filter((i) => i !== index.toString());
 		$value = $value.filter((_, i) => i !== index);
 	}
 
@@ -76,15 +95,15 @@
 			const label = item.data[objectConfig.accordionLabelField] as string | Record<string, string>;
 
 			if (typeof label === 'string' && label.trim().length > 0) {
-				return `${label} (${objectConfig.label ?? objectConfig.slug})`;
+				return `${label}`;
 			}
 
 			if (typeof label === 'object' && label !== null) {
 				const objectLabel = label as Record<string, string>;
-				return `${objectLabel[getContentLanguage()]} (${objectConfig.label ?? objectConfig.slug})`;
+				return `${objectLabel[getContentLanguage()]}`;
 			}
 		}
-		return objectConfig.label ?? objectConfig.slug;
+		return '';
 	}
 
 	let accordionOpenState = $state<string[]>([]);
@@ -94,7 +113,32 @@
 	}
 </script>
 
-<Accordion.Root type="multiple" class="w-full" bind:value={accordionOpenState}>
+<div class="flex items-center justify-between gap-4">
+	<Form.Label class="text-lg">{field.label}</Form.Label>
+
+	<div class="flex items-center gap-2">
+		<Button
+			size="sm"
+			type="button"
+			variant="ghost"
+			onclick={() => {
+				accordionOpenState = [];
+			}}>Collapse All</Button
+		>
+		<Button
+			size="sm"
+			type="button"
+			variant="ghost"
+			onclick={() => {
+				if ($value) {
+					accordionOpenState = $value.map((_, i) => i.toString());
+				}
+			}}>Show All</Button
+		>
+	</div>
+</div>
+
+<Accordion.Root type="multiple" class="w-full space-y-4" bind:value={accordionOpenState}>
 	{#if $value && $value.length > 0}
 		{#each $value as _, index (index)}
 			{#if $value[index].data && $value[index].slug}
@@ -102,20 +146,46 @@
 				{@const objectField = field.of.find((option) => option.slug === item.slug)}
 
 				{#if objectField}
-					<Accordion.Item value={index.toString()}>
-						<Accordion.Trigger class="text-base font-normal">
-							{getAccordionLabel($value[index])}
+					<Accordion.Item value={index.toString()} class="border-0">
+						<Accordion.Trigger
+							class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none"
+						>
+							<div class="flex grow items-center justify-between gap-4">
+								<div class="flex items-center gap-4">
+									<span>{index < 10 ? '0' : ''}{index + 1}</span>
+									<Badge variant="outline">{objectField.label ?? objectField.slug}</Badge>
+									<span>{getAccordionLabel($value[index])}</span>
+								</div>
+
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger
+										class="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+									>
+										{#snippet child({ props })}
+											<Button variant="ghost" size="icon" {...props}>
+												<DotsVerticalIcon />
+												<span class="sr-only">Open menu</span>
+											</Button>
+										{/snippet}
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="end" class="w-32">
+										<DropdownMenu.Item onclick={() => duplicateItem(index)}
+											>Duplicate</DropdownMenu.Item
+										>
+										<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}
+											>Delete</DropdownMenu.Item
+										>
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
+							</div>
 						</Accordion.Trigger>
-						<Accordion.Content class="space-y-8">
+						<Accordion.Content class="space-y-4 rounded-b-md border border-t-0 p-4">
 							<FieldRenderer
+								objectFieldType="inline"
 								field={objectField}
 								form={form as SuperForm<Record<string, unknown>>}
 								path={joinPath(path, index) as FormPathLeaves<T, ObjectFieldData>}
 							/>
-
-							<Button variant="destructive" type="button" onclick={() => removeItem(index)}
-								>Delete</Button
-							>
 						</Accordion.Content>
 					</Accordion.Item>
 				{:else}
@@ -131,10 +201,11 @@
 	{/if}
 </Accordion.Root>
 
-<div class="mt-2 flex flex-wrap gap-2">
+<div class="mt-4 flex flex-wrap gap-2">
 	{#each field.of as option}
-		<Button size="sm" type="button" onclick={() => addItem(option)}>
-			Add {option.label ?? option.slug}
+		<Button size="sm" type="button" variant="outline" onclick={() => addItem(option)}>
+			<CirclePlus />
+			{option.label ?? option.slug}
 		</Button>
 	{/each}
 </div>

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

@@ -13,15 +13,16 @@
 	import FileField from './file-field.svelte';
 
 	type Props = {
+		objectFieldType?: 'default' | 'inline';
 		field: Field;
 		form: SuperForm<Record<string, unknown>>;
 		path: FormPathLeaves<Record<string, unknown>>;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
+	let { field, form, path, objectFieldType = 'default', ...props }: Props = $props();
 
-	const fieldsWithNoDescription: FieldType[] = ['boolean'];
-	const fieldsWithNoLabel: FieldType[] = ['boolean'];
+	const fieldsWithNoDescription: FieldType[] = ['boolean', 'object', 'array'];
+	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'array'];
 
 	const fieldsWithAlternativeDescription: FieldType[] = ['image', 'object', 'array'];
 
@@ -46,7 +47,7 @@
 		<Form.FieldErrors />
 	</Form.Fieldset>
 {:else if isTextField(field)}
-	<Form.Field {form} name={path}>
+	<Form.Field {form} name={path} class="space-y-0">
 		<TextFieldWrapper {field} {form} {path} {...props} />
 		<Form.FieldErrors />
 	</Form.Field>
@@ -54,34 +55,36 @@
 	<Form.Field {form} name={path}>
 		<Form.Control>
 			{#snippet children({ props })}
-				{#if field.label && !fieldsWithNoLabel.includes(field.type)}
-					<Form.Label class={field.type === 'array' ? 'text-lg font-medium' : ''}>
-						{field.label}
-					</Form.Label>
-				{/if}
+				<div class="space-y-2">
+					{#if field.label && !fieldsWithNoLabel.includes(field.type)}
+						<Form.Label class={field.type === 'array' ? 'text-lg font-medium' : ''}>
+							{field.label}
+						</Form.Label>
+					{/if}
 
-				{#if !fieldsWithNoDescription.includes(field.type) && fieldsWithAlternativeDescription.includes(field.type)}
-					<Form.Description>{field?.description ?? ''}</Form.Description>
-				{/if}
+					{#if !fieldsWithNoDescription.includes(field.type) && fieldsWithAlternativeDescription.includes(field.type) && field.description}
+						<Form.Description>{field?.description ?? ''}</Form.Description>
+					{/if}
 
-				{#if field.type === 'image'}
-					<ImageField {field} {form} {path} {...props} />
-				{:else if field.type === 'file'}
-					<FileField {field} {form} {path} {...props} />
-				{:else if field.type === 'array'}
-					<ArrayField {field} {form} {path} {...props} />
-				{:else if field.type === 'object'}
-					<ObjectField {field} {form} {path} {...props} />
-				{:else if field.type === 'slug'}
-					<SlugField {field} {form} {path} {...props} />
-				{:else if field.type === 'boolean'}
-					<BooleanField {field} {form} {path} {...props} />
-				{:else}
-					<p>Nieobsługiwany typ pola: {field.type}</p>
-				{/if}
+					{#if field.type === 'image'}
+						<ImageField {field} {form} {path} {...props} />
+					{:else if field.type === 'file'}
+						<FileField {field} {form} {path} {...props} />
+					{:else if field.type === 'array'}
+						<ArrayField {field} {form} {path} {...props} />
+					{:else if field.type === 'object'}
+						<ObjectField {field} {form} {path} {objectFieldType} {...props} />
+					{:else if field.type === 'slug'}
+						<SlugField {field} {form} {path} {...props} />
+					{:else if field.type === 'boolean'}
+						<BooleanField {field} {form} {path} {...props} />
+					{:else}
+						<p>Nieobsługiwany typ pola: {field.type}</p>
+					{/if}
+				</div>
 			{/snippet}
 		</Form.Control>
-		{#if !fieldsWithNoDescription.includes(field.type) && !fieldsWithAlternativeDescription.includes(field.type)}
+		{#if !fieldsWithNoDescription.includes(field.type) && !fieldsWithAlternativeDescription.includes(field.type) && field.description}
 			<Form.Description>{field?.description ?? ''}</Form.Description>
 		{/if}
 		<Form.FieldErrors />

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

@@ -1,6 +1,7 @@
 import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
 import type { Field } from '../../../types/fields.js';
 type Props = {
+    objectFieldType?: 'default' | 'inline';
     field: Field;
     form: SuperForm<Record<string, unknown>>;
     path: FormPathLeaves<Record<string, unknown>>;

package/dist/admin/components/fields/fields-form.svelte

@@ -1,78 +1,24 @@
 <script lang="ts">
 	import { type SuperForm } from 'sveltekit-superforms/client';
-
 	import type { Snippet } from 'svelte';
-	import Button from '../../../components/ui/button/button.svelte';
 	import { cn } from '../../../utils.js';
 	import FieldRenderer from './field-renderer.svelte';
 	import type { Field } from '../../../types/fields.js';
-	import SuperDebug from 'sveltekit-superforms';
-	import { dev } from '$app/environment';
 
 	type Props = {
 		form: SuperForm<Record<string, unknown>>;
 		fields: Field[];
 		action?: string | undefined;
-		children?: Snippet;
-		after?: Snippet;
 		class?: string;
 	};
 
-	let {
-		form,
-		fields,
-		action = undefined,
-		children = undefined,
-		after = undefined,
-		class: className = undefined
-	}: Props = $props();
+	let { form, fields, action = undefined, class: className = undefined }: Props = $props();
 
-	const { enhance, allErrors, form: formData } = form;
+	const { enhance } = form;
 </script>
 
-<div>
-	{#if dev && false}
-		<div>
-			<SuperDebug data={formData} />
-
-			{#if $allErrors.length}
-				<ul>
-					{#each $allErrors as error}
-						<li>
-							<b>{error.path}:</b>
-							{error.messages.join('. ')}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-		</div>
-	{/if}
-
-	<div class={cn('flex gap-4', className)}>
-		<form method="POST" use:enhance {action} class="max-w-[calc(100%-300px)] grow space-y-8">
-			{#each fields as field}
-				<FieldRenderer {field} {form} path={field.slug} />
-			{/each}
-		</form>
-
-		<div class="w-[300px] shrink-0">
-			<div class="sticky top-4 space-y-2">
-				<div class="rounded-2xl border p-4">
-					<Button
-						class="w-full"
-						type="submit"
-						onclick={() => {
-							form.submit();
-						}}>Save</Button
-					>
-					{@render children?.()}
-				</div>
-				{#if after}
-					<div class="rounded-2xl border p-4">
-						{@render after()}
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-</div>
+<form method="POST" use:enhance {action} class={cn('space-y-4', className)}>
+	{#each fields as field}
+		<FieldRenderer {field} {form} path={field.slug} />
+	{/each}
+</form>

package/dist/admin/components/fields/fields-form.svelte.d.ts

@@ -1,12 +1,9 @@
 import { type SuperForm } from 'sveltekit-superforms/client';
-import type { Snippet } from 'svelte';
 import type { Field } from '../../../types/fields.js';
 type Props = {
     form: SuperForm<Record<string, unknown>>;
     fields: Field[];
     action?: string | undefined;
-    children?: Snippet;
-    after?: Snippet;
     class?: string;
 };
 declare const FieldsForm: import("svelte").Component<Props, {}, "">;

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

@@ -13,14 +13,16 @@
 	import { joinPath } from '../../utils/objectPath.js';
 	import type { ObjectField, ObjectFieldData } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
+	import * as Item from '../../../components/ui/item/index.js';
 
 	type Props = {
+		objectFieldType?: 'default' | 'inline';
 		field: ObjectField;
 		form: SuperForm<T>;
 		path: FormPathLeaves<T, ObjectFieldData | undefined>;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
+	let { field, form, path, objectFieldType = 'default', ...props }: Props = $props();
 
 	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<
 		ObjectFieldData | undefined
@@ -49,12 +51,27 @@
 	});
 </script>
 
-<div class="space-y-8">
-	{#each field.fields as f}
-		<FieldRenderer
-			field={f}
-			form={form as SuperForm<Record<string, unknown>>}
-			path={joinPath(path, 'data', f.slug)}
-		/>
-	{/each}
-</div>
+{#snippet content()}
+	<div class="space-y-4">
+		{#each field.fields as f}
+			<FieldRenderer
+				field={f}
+				form={form as SuperForm<Record<string, unknown>>}
+				path={joinPath(path, 'data', f.slug)}
+			/>
+		{/each}
+	</div>
+{/snippet}
+
+{#if objectFieldType === 'inline'}
+	{@render content()}
+{/if}
+
+{#if objectFieldType === 'default'}
+	<Item.Root variant="outline">
+		<Item.Content>
+			<Item.Title class="mb-4 text-lg">{field.label}</Item.Title>
+			{@render content()}
+		</Item.Content>
+	</Item.Root>
+{/if}