includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/collection/data-table.svelte

@@ -6,6 +6,7 @@
 		type RowSelectionState,
 		type PaginationState,
 		type Table as TableType,
+		type Column,
 		getCoreRowModel,
 		getFilteredRowModel,
 		getSortedRowModel,
@@ -17,6 +18,7 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { droppable, draggable, dndState } from '@thisux/sveltednd';
 	import { flip } from 'svelte/animate';
+	import StateDisplay from './state-display.svelte';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -36,9 +38,20 @@
 		manualPagination?: boolean;
 		pageCount?: number;
 		rowCount?: number;
+		/** @deprecated since v0.26.0 — use `emptyTitle`/`emptyDescription` instead. */
 		emptyMessage?: string;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		viewState?: 'idle' | 'loading' | 'error';
+		errorMessage?: string;
+		loadingMessage?: string;
+		onRetry?: () => void;
 		orderable?: boolean;
 		onReorder?: (fromIndex: number, toIndex: number) => void;
+		/** Pin first column when horizontally scrolling (helps on mobile with wide tables). Default true. */
+		stickyFirstColumn?: boolean;
+		/** Extend table to viewport edges on mobile via negative horizontal margin. Default true. */
+		mobileEdgeBleed?: boolean;
 	};
 
 	let {
@@ -60,16 +73,25 @@
 		pageCount: pageCountProp,
 		rowCount: rowCountProp,
 		emptyMessage,
+		emptyTitle,
+		emptyDescription,
+		viewState = 'idle',
+		errorMessage,
+		loadingMessage,
+		onRetry,
 		orderable = false,
-		onReorder
+		onReorder,
+		stickyFirstColumn = true,
+		mobileEdgeBleed = true
 	}: DataTableProps<TData, TValue> = $props();
 
 	let liveRegionMessage = $state('');
 	let dropProcessing = false;
 
-	const matchesReducedMotion = typeof window !== 'undefined'
-		? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-		: false;
+	const matchesReducedMotion =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
 
 	const interfaceLanguage = useInterfaceLanguage();
 
@@ -78,6 +100,14 @@
 		pl: 'Brak wyników.'
 	};
 
+	function ariaSortFor(column: Column<TData, unknown>): 'none' | 'ascending' | 'descending' | undefined {
+		if (!column.getCanSort()) return undefined;
+		const dir = column.getIsSorted();
+		if (dir === 'asc') return 'ascending';
+		if (dir === 'desc') return 'descending';
+		return 'none';
+	}
+
 	const table = createSvelteTable({
 		get data() {
 			return data;
@@ -124,139 +154,258 @@
 	$effect(() => {
 		tableRef?.(table);
 	});
+
+	const resolvedEmptyTitle = $derived(
+		emptyTitle ?? emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]
+	);
 </script>
 
-{#if orderable}
-	<div aria-live="polite" aria-atomic="true" class="sr-only">{liveRegionMessage}</div>
-{/if}
+{#if viewState === 'loading' || viewState === 'error'}
+	<StateDisplay
+		kind={viewState}
+		title={viewState === 'loading' ? loadingMessage : errorMessage}
+		onCta={viewState === 'error' ? onRetry : undefined}
+	/>
+{:else}
+	{#if orderable}
+		<div aria-live="polite" aria-atomic="true" class="sr-only">{liveRegionMessage}</div>
+	{/if}
 
-<Table.Root aria-roledescription={orderable ? 'sortable list' : undefined}>
-	<Table.Header class="bg-muted sticky top-0 z-10">
-		{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-			<Table.Row class="border-b-0 hover:bg-transparent">
-				{#if orderable}
-					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10 w-10"></Table.Head>
-				{/if}
-				{#each headerGroup.headers as header (header.id)}
-					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10">
-						{#if !header.isPlaceholder}
-							<FlexRender
-								content={header.column.columnDef.header}
-								context={header.getContext()}
-							/>
-						{/if}
-					</Table.Head>
-				{/each}
-			</Table.Row>
-		{/each}
-	</Table.Header>
-	<Table.Body>
-		{#if orderable}
-			{#each table.getRowModel().rows as row, i (row.id)}
-				{@const totalRows = table.getRowModel().rows.length}
-				<tr
-					use:droppable={{
-						container: i.toString(),
-						callbacks: {
-							onDrop: (state) => {
-								if (dropProcessing) return;
-								dropProcessing = true;
-								const fromIndex = parseInt(state.sourceContainer ?? '');
-								const toIndex = parseInt(state.targetContainer ?? '');
-								if (!isNaN(fromIndex) && !isNaN(toIndex)) {
-									onReorder?.(fromIndex, toIndex);
+	<div
+		class="data-table-shell"
+		data-sticky-first={stickyFirstColumn ? 'true' : undefined}
+		data-mobile-bleed={mobileEdgeBleed ? 'true' : undefined}
+	>
+	<Table.Root aria-roledescription={orderable ? 'sortable list' : undefined}>
+		<Table.Header class="bg-muted sticky top-0 z-10">
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row class="border-b-0 hover:bg-transparent">
+					{#if orderable}
+						<Table.Head
+							class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10 w-10"
+						></Table.Head>
+					{/if}
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head
+							class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10"
+							aria-sort={ariaSortFor(header.column)}
+						>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#if orderable}
+				{#each table.getRowModel().rows as row, i (row.id)}
+					{@const totalRows = table.getRowModel().rows.length}
+					<tr
+						use:droppable={{
+							container: i.toString(),
+							callbacks: {
+								onDrop: (state) => {
+									if (dropProcessing) return;
+									dropProcessing = true;
+									const fromIndex = parseInt(state.sourceContainer ?? '');
+									const toIndex = parseInt(state.targetContainer ?? '');
+									if (!isNaN(fromIndex) && !isNaN(toIndex)) {
+										onReorder?.(fromIndex, toIndex);
+									}
+									dndState.isDragging = false;
+									dndState.draggedItem = null;
+									dndState.sourceContainer = '';
+									dndState.targetContainer = null;
+									dndState.targetElement = null;
+									setTimeout(() => {
+										dropProcessing = false;
+									}, 50);
 								}
-								dndState.isDragging = false;
-								dndState.draggedItem = null;
-								dndState.sourceContainer = '';
-								dndState.targetContainer = null;
-								dndState.targetElement = null;
-								setTimeout(() => { dropProcessing = false; }, 50);
 							}
-						}
-					}}
-					animate:flip={{ duration: matchesReducedMotion ? 0 : 200 }}
-					data-slot="table-row"
-					data-state={row.getIsSelected() ? 'selected' : undefined}
-					class="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === totalRows - 1 ? 'border-b-0' : ''}"
-				>
-					<Table.Cell class="py-3 w-10">
-						<div class="flex items-center gap-1">
-							<div
-								use:draggable={{
-									container: i.toString(),
-									dragData: { index: i }
-								}}
-								class="text-muted-foreground hover:text-foreground cursor-grab"
-								role="button"
-								tabindex="0"
-								aria-label={`Drag to reorder, row ${i + 1} of ${totalRows}`}
-								aria-roledescription="draggable"
-							>
-								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
-							</div>
-							<div class="flex flex-col">
-								{#if i > 0}
-									<button
-										type="button"
-										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
-										aria-label={`Move up, row ${i + 1} of ${totalRows}`}
-										onclick={() => {
-											onReorder?.(i, i - 1);
-											liveRegionMessage = `Moved to position ${i} of ${totalRows}`;
-										}}
-									>
-										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
-									</button>
-								{/if}
-								{#if i < totalRows - 1}
-									<button
-										type="button"
-										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
-										aria-label={`Move down, row ${i + 1} of ${totalRows}`}
-										onclick={() => {
-											onReorder?.(i, i + 1);
-											liveRegionMessage = `Moved to position ${i + 2} of ${totalRows}`;
-										}}
+						}}
+						animate:flip={{ duration: matchesReducedMotion ? 0 : 200 }}
+						data-slot="table-row"
+						data-state={row.getIsSelected() ? 'selected' : undefined}
+						aria-selected={enableSelection && row.getIsSelected() ? true : undefined}
+						class="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i ===
+						totalRows - 1
+							? 'border-b-0'
+							: ''}"
+					>
+						<Table.Cell class="py-3 w-10">
+							<div class="flex items-center gap-1">
+								<div
+									use:draggable={{
+										container: i.toString(),
+										dragData: { index: i }
+									}}
+									class="text-muted-foreground hover:text-foreground cursor-grab"
+									role="button"
+									tabindex="0"
+									aria-label={`Drag to reorder, row ${i + 1} of ${totalRows}`}
+									aria-roledescription="draggable"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										><circle cx="9" cy="12" r="1" /><circle cx="9" cy="5" r="1" /><circle
+											cx="9"
+											cy="19"
+											r="1"
+										/><circle cx="15" cy="12" r="1" /><circle cx="15" cy="5" r="1" /><circle
+											cx="15"
+											cy="19"
+											r="1"
+										/></svg
 									>
-										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
-									</button>
-								{/if}
+								</div>
+								<div class="flex flex-col">
+									{#if i > 0}
+										<button
+											type="button"
+											class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+											aria-label={`Move up, row ${i + 1} of ${totalRows}`}
+											onclick={() => {
+												onReorder?.(i, i - 1);
+												liveRegionMessage = `Moved to position ${i} of ${totalRows}`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="14"
+												height="14"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"><path d="m18 15-6-6-6 6" /></svg
+											>
+										</button>
+									{/if}
+									{#if i < totalRows - 1}
+										<button
+											type="button"
+											class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+											aria-label={`Move down, row ${i + 1} of ${totalRows}`}
+											onclick={() => {
+												onReorder?.(i, i + 1);
+												liveRegionMessage = `Moved to position ${i + 2} of ${totalRows}`;
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="14"
+												height="14"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"><path d="m6 9 6 6 6-6" /></svg
+											>
+										</button>
+									{/if}
+								</div>
 							</div>
-						</div>
-					</Table.Cell>
-					{#each row.getVisibleCells() as cell (cell.id)}
-						<Table.Cell class="py-3">
-							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 						</Table.Cell>
-					{/each}
-				</tr>
-			{:else}
-				<Table.Row>
-					<Table.Cell colspan={columns.length + 1} class="h-24 text-center text-muted-foreground">
-						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
-					</Table.Cell>
-				</Table.Row>
-			{/each}
-		{:else}
-			{#each table.getRowModel().rows as row, i (row.id)}
-				<Table.Row
-					data-state={row.getIsSelected() && 'selected'}
-					class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
-				>
-					{#each row.getVisibleCells() as cell (cell.id)}
-						<Table.Cell class="py-3">
-							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell class="py-3">
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+							</Table.Cell>
+						{/each}
+					</tr>
+				{:else}
+					<Table.Row>
+						<Table.Cell
+							colspan={columns.length + 1}
+							class="h-24 text-center text-muted-foreground p-0"
+						>
+							<StateDisplay kind="empty" title={resolvedEmptyTitle} description={emptyDescription} />
 						</Table.Cell>
-					{/each}
-				</Table.Row>
+					</Table.Row>
+				{/each}
 			{:else}
-				<Table.Row>
-					<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
-						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
-					</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
+				{#each table.getRowModel().rows as row, i (row.id)}
+					<Table.Row
+						data-state={row.getIsSelected() && 'selected'}
+						aria-selected={enableSelection && row.getIsSelected() ? true : undefined}
+						class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i ===
+						table.getRowModel().rows.length - 1
+							? 'border-b-0'
+							: ''}"
+					>
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell class="py-3">
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground p-0">
+							<StateDisplay kind="empty" title={resolvedEmptyTitle} description={emptyDescription} />
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			{/if}
+		</Table.Body>
+	</Table.Root>
+	</div>
+{/if}
+
+<style>
+	/* Mobile edge bleed: table can scroll edge-to-edge on small screens. */
+	@media (max-width: 639px) {
+		.data-table-shell[data-mobile-bleed='true'] :global([data-slot='table-container']) {
+			margin-left: -1rem;
+			margin-right: -1rem;
+			border-left: 0;
+			border-right: 0;
+			border-radius: 0;
+		}
+	}
+
+	/* Sticky first column (helps reading wide tables when scrolling horizontally). */
+	.data-table-shell[data-sticky-first='true'] :global(thead th:first-child),
+	.data-table-shell[data-sticky-first='true'] :global(tbody td:first-child) {
+		position: sticky;
+		left: 0;
+		background: var(--background);
+	}
+	.data-table-shell[data-sticky-first='true'] :global(thead th:first-child) {
+		z-index: 11;
+		background: var(--muted, var(--background));
+	}
+	.data-table-shell[data-sticky-first='true'] :global(tbody td:first-child) {
+		z-index: 2;
+	}
+	/* Subtle right-edge shadow only when scrolled */
+	.data-table-shell[data-sticky-first='true'] :global([data-slot='table-container']) {
+		background:
+			linear-gradient(to right, var(--background), var(--background)) left center,
+			linear-gradient(to right, transparent, var(--background)) left center,
+			radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.08), transparent) 0 center,
+			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.08), transparent) 100% center;
+		background-repeat: no-repeat;
+		background-size:
+			20px 100%,
+			20px 100%,
+			10px 100%,
+			10px 100%;
+		background-attachment: local, local, scroll, scroll;
+	}
+	/* Selected row first-cell needs to keep selection bg over the sticky default */
+	.data-table-shell[data-sticky-first='true']
+		:global(tr[data-state='selected'] td:first-child) {
+		background: var(--accent, var(--background));
+	}
+</style>

package/dist/admin/client/collection/data-table.svelte.d.ts

@@ -17,9 +17,20 @@ type DataTableProps<TData, TValue> = {
     manualPagination?: boolean;
     pageCount?: number;
     rowCount?: number;
+    /** @deprecated since v0.26.0 — use `emptyTitle`/`emptyDescription` instead. */
     emptyMessage?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    viewState?: 'idle' | 'loading' | 'error';
+    errorMessage?: string;
+    loadingMessage?: string;
+    onRetry?: () => void;
     orderable?: boolean;
     onReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Pin first column when horizontally scrolling (helps on mobile with wide tables). Default true. */
+    stickyFirstColumn?: boolean;
+    /** Extend table to viewport edges on mobile via negative horizontal margin. Default true. */
+    mobileEdgeBleed?: boolean;
 };
 declare function $$render<TData, TValue>(): {
     props: DataTableProps<TData, TValue>;

package/dist/admin/client/collection/date-cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { formatRelativeDate, formatAbsoluteDate, formatShortDate } from '../../utils/formatDate.js';
+	import { formatRelativeDate, formatDateTime, formatShortDateOnly } from '../../utils/formatters.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 
 	type Props = {
@@ -15,11 +15,11 @@
 		format === 'relative'
 			? formatRelativeDate(date, interfaceLanguage.current)
 			: format === 'short'
-				? formatShortDate(date, interfaceLanguage.current)
-				: formatAbsoluteDate(date, interfaceLanguage.current)
+				? formatShortDateOnly(date, interfaceLanguage.current)
+				: formatDateTime(date, interfaceLanguage.current)
 	);
 
-	const absoluteDate = $derived(formatAbsoluteDate(date, interfaceLanguage.current));
+	const absoluteDate = $derived(formatDateTime(date, interfaceLanguage.current));
 </script>
 
 <span title={absoluteDate} class="text-muted-foreground text-sm whitespace-nowrap">

package/dist/admin/client/collection/row-actions.svelte

@@ -7,6 +7,7 @@
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { goto } from '$app/navigation';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	type Props = {
@@ -45,7 +46,7 @@
 		{/snippet}
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content align="end" class="w-40">
-		<DropdownMenu.Item href={entryUrl}>
+		<DropdownMenu.Item onclick={() => goto(entryUrl)}>
 			<ExternalLink class="mr-2 size-4" />
 			{t.open}
 		</DropdownMenu.Item>

package/dist/admin/client/collection/sortable-header.svelte

@@ -4,6 +4,8 @@
 	import ArrowDown from '@tabler/icons-svelte/icons/arrow-down';
 	import ArrowsSort from '@tabler/icons-svelte/icons/arrows-sort';
 	import Button from '../../../components/ui/button/button.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	type Props = {
 		column: Column<TData, unknown>;
@@ -13,24 +15,45 @@
 
 	let { column, label, sorting = [] }: Props = $props();
 
-	const sortDir = $derived(sorting.find((s) => s.id === column.id)?.desc ? 'desc' : sorting.find((s) => s.id === column.id) ? 'asc' : false);
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<InterfaceLanguage, { asc: string; desc: string; unsorted: string }> = {
+		en: {
+			asc: 'sorted ascending',
+			desc: 'sorted descending',
+			unsorted: 'not sorted'
+		},
+		pl: {
+			asc: 'sortowane rosnąco',
+			desc: 'sortowane malejąco',
+			unsorted: 'nieposortowane'
+		}
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	const sortDir = $derived(
+		sorting.find((s) => s.id === column.id)?.desc
+			? 'desc'
+			: sorting.find((s) => s.id === column.id)
+				? 'asc'
+				: false
+	);
+
+	const srLabel = $derived(sortDir === 'asc' ? t.asc : sortDir === 'desc' ? t.desc : t.unsorted);
 
 	function handleClick() {
 		if (!sortDir) {
-			column.toggleSorting(false); // asc
+			column.toggleSorting(false);
 		} else if (sortDir === 'asc') {
-			column.toggleSorting(true); // desc
+			column.toggleSorting(true);
 		} else {
-			column.clearSorting(); // clear
+			column.clearSorting();
 		}
 	}
 </script>
 
-<Button
-	variant="ghost"
-	class="-ml-3 h-8 px-2 hover:bg-transparent"
-	onclick={handleClick}
->
+<Button variant="ghost" class="-ml-3 h-8 px-2 hover:bg-transparent" onclick={handleClick}>
 	{label}
 	{#if sortDir === 'asc'}
 		<ArrowUp class="ml-1 size-4" />
@@ -39,4 +62,5 @@
 	{:else}
 		<ArrowsSort class="ml-1 size-4 opacity-50" />
 	{/if}
+	<span class="sr-only"> ({srLabel})</span>
 </Button>