rimecms 0.22.0

package/dist/panel/components/sections/collection/header/DisplayMode.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Button from '../../../ui/button/button.svelte';
+	import { DISPLAY_MODE, type CollectionContext, type DisplayMode } from '../../../../context/collection.svelte.js';
+	import { LayoutGrid, List, TextQuote } from '@lucide/svelte';
+	import { getContext } from 'svelte';
+
+	const collection = getContext<CollectionContext>('rime.collectionList');
+
+	const listIconClass = $derived(collection.isList() ? 'rz-header-display-mode__icon--active' : '');
+	const gridIconClass = $derived(collection.isGrid() ? 'rz-header-display-mode__icon--active' : '');
+	const nestedIconClass = $derived(collection.isNested() ? 'rz-header-display-mode__icon--active' : '');
+
+	const setVariant = (mode: DisplayMode) => (mode === collection.display ? 'secondary' : 'ghost');
+	const isActive = (mode: DisplayMode) => mode === collection.display;
+
+	function handleListClick() {
+		collection.display = DISPLAY_MODE.LIST;
+	}
+	function handleGridClick() {
+		collection.display = DISPLAY_MODE.GRID;
+	}
+	function handleNestedClick() {
+		collection.display = DISPLAY_MODE.NESTED;
+	}
+</script>
+
+<div class="rz-header-display-mode">
+	<Button
+		size="icon-sm"
+		variant={setVariant(DISPLAY_MODE.LIST)}
+		inert={isActive(DISPLAY_MODE.LIST)}
+		onclick={handleListClick}
+	>
+		<List size={17} class="rz-header-display-mode__icon {listIconClass}" />
+	</Button>
+
+	{#if collection.config.upload}
+		<Button
+			size="icon-sm"
+			variant={setVariant(DISPLAY_MODE.GRID)}
+			inert={isActive(DISPLAY_MODE.GRID)}
+			onclick={handleGridClick}
+		>
+			<LayoutGrid size={17} class="rz-header-display-mode__icon {gridIconClass}" />
+		</Button>
+	{/if}
+	{#if collection.config.nested}
+		<Button
+			size="icon-sm"
+			variant={setVariant(DISPLAY_MODE.NESTED)}
+			inert={isActive(DISPLAY_MODE.NESTED)}
+			onclick={handleNestedClick}
+		>
+			<TextQuote size={17} class="rz-header-display-mode__icon {nestedIconClass}" />
+		</Button>
+	{/if}
+</div>
+
+<style global>
+	.rz-header-display-mode {
+		display: flex;
+		gap: var(--rz-size-2);
+
+		:global(.rz-header-display-mode__icon--active) {
+			color: hsl(229, 89%, 60%);
+		}
+	}
+</style>

package/dist/panel/components/sections/collection/header/DisplayMode.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type DisplayMode } from '../../../../context/collection.svelte.js';
+declare const DisplayMode: import("svelte").Component<Record<string, never>, {}, "">;
+type DisplayMode = ReturnType<typeof DisplayMode>;
+export default DisplayMode;

package/dist/panel/components/sections/collection/header/Header.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { type CollectionContext } from '../../../../context/collection.svelte.js';
+	import { getContext } from 'svelte';
+	import CreateUploadFolder from './CreateUploadFolder.svelte';
+	import DisplayMode from './DisplayMode.svelte';
+	import SelectUI from './SelectUI.svelte';
+	import Separator from './Separator.svelte';
+
+	const collection = getContext<CollectionContext>('rime.collectionList');
+
+	const showSelectUI = $derived(!collection.isNested());
+	const showDisplayMode = $derived(collection.isUpload || collection.config.nested);
+</script>
+
+{#if showDisplayMode}
+	<Separator />
+	<DisplayMode />
+{/if}
+
+{#if collection.config.upload && collection.isGrid()}
+	<Separator />
+	<CreateUploadFolder {collection} />
+{/if}
+
+{#if showSelectUI}
+	<Separator />
+	<SelectUI />
+{/if}

package/dist/panel/components/sections/collection/header/Header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/panel/components/sections/collection/header/SearchInput.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { t__ } from '../../../../../core/i18n/index.js';
+	import Input from '../../../ui/input/input.svelte';
+	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import { Search } from '@lucide/svelte';
+	import { getContext } from 'svelte';
+
+	const collection = getContext<CollectionContext>('rime.collectionList');
+	let filterValue = $state('');
+
+	$effect(() => {
+		collection.filterBy(filterValue);
+	});
+</script>
+
+<div class="rz-header-search-input">
+	<div class="rz-header-search-input__icon">
+		<Search size={16} />
+	</div>
+	<Input
+		class="rz-header-search-input__input"
+		placeholder={t__('common.search', `${collection.length} document(s)`)}
+		type="text"
+		bind:value={filterValue}
+	/>
+</div>
+
+<style>
+	.rz-header-search-input {
+		position: relative;
+		display: none;
+		height: var(--rz-size-11);
+		align-items: center;
+		width: var(--rz-size-80);
+
+		& :global(.rz-input) {
+			height: var(--rz-size-9);
+			width: 100%;
+			padding-left: var(--rz-size-12);
+			font-size: var(--rz-text-sm);
+			&:focus-visible {
+				box-shadow:
+		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
+		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+			}
+		}
+	}
+
+	@container (min-width: 720px) {
+		.rz-header-search-input {
+			display: flex;
+		}
+	}
+
+	.rz-header-search-input__icon {
+		position: absolute;
+		left: var(--rz-size-3);
+	}
+</style>

package/dist/panel/components/sections/collection/header/SearchInput.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SearchInput: import("svelte").Component<Record<string, never>, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/panel/components/sections/collection/header/SelectUI.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { t__ } from '../../../../../core/i18n/index.js';
+	import Button from '../../../ui/button/button.svelte';
+	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import { ListChecks, SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
+	import { getContext } from 'svelte';
+
+	const collection = getContext<CollectionContext>('rime.collectionList');
+
+	const selectedCount = $derived(collection.selected.length);
+	const pluralSuffix = $derived(selectedCount > 1 ? 's' : '');
+	const activeListClass = $derived(collection.selectMode ? 'rz-header-select__icon--active' : '');
+</script>
+
+<div class="rz-header-select">
+	<Button
+		size="icon-sm"
+		variant="ghost"
+		onclick={() => (collection.selectMode = !collection.selectMode)}
+		disabled={collection.length === 0}
+	>
+		<ListChecks size={17} class="rz-header-select__icon {activeListClass}" />
+	</Button>
+
+	{#if collection.selectMode}
+		{#if collection.isAllSelected}
+			<Button variant="text" icon={SquareMinus} onclick={() => (collection.selected = [])}>Deselect All</Button>
+		{:else}
+			<Button variant="text" icon={SquareCheck} onclick={collection.selectAll}>
+				{t__('common.select_all')}
+			</Button>
+		{/if}
+		<Button disabled={selectedCount === 0} icon={Trash} variant="text" onclick={collection.deleteSelection}>
+			{t__('common.delete', `${selectedCount} doc${pluralSuffix}`)}
+		</Button>
+	{/if}
+</div>
+
+<style>
+	.rz-header-select {
+		display: flex;
+		gap: var(--rz-size-4);
+		align-items: center;
+
+		:global {
+			.rz-header-select__icon--active {
+				color: hsl(var(--rz-color-spot));
+			}
+		}
+	}
+</style>

package/dist/panel/components/sections/collection/header/SelectUI.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SelectUi: import("svelte").Component<Record<string, never>, {}, "">;
+type SelectUi = ReturnType<typeof SelectUi>;
+export default SelectUi;

package/dist/panel/components/sections/collection/header/Separator.svelte

@@ -0,0 +1,8 @@
+<div class="rz-collection-header__separator"></div>
+
+<style>
+	.rz-collection-header__separator {
+		border-left: var(--rz-border);
+		height: 1rem;
+	}
+</style>

package/dist/panel/components/sections/collection/header/Separator.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Separator;
+type Separator = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Separator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import Empty from '../Empty.svelte';
+	import Row from './row/Row.svelte';
+
+	type Props = { collection: CollectionContext };
+	const { collection }: Props = $props();
+</script>
+
+{#if collection.docs.length}
+	<div class="rz-page-collection__list">
+		{#each collection.docs as doc, index (index)}
+			{@const checked = collection.selected.includes(doc.id)}
+			<Row {doc} {checked} />
+		{/each}
+	</div>
+{:else}
+	<Empty {collection} />
+{/if}
+
+<style>
+	.rz-page-collection__list {
+		gap: var(--rz-size-2);
+		display: grid;
+	}
+</style>

package/dist/panel/components/sections/collection/list/CollectionList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollectionContext } from '../../../../context/collection.svelte.js';
+type Props = {
+    collection: CollectionContext;
+};
+declare const CollectionList: import("svelte").Component<Props, {}, "">;
+type CollectionList = ReturnType<typeof CollectionList>;
+export default CollectionList;

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { capitalize } from '../../../../../../util/string.js';
+	import { ChevronDown, ChevronUp } from '@lucide/svelte';
+	import type { CollectionContext } from '../../../../../context/collection.svelte.js';
+	import type { FormField } from '../../../../../../fields/types.js';
+	import { getContext } from 'svelte';
+
+	type TableColumn = Partial<FormField> & { name: string; label?: string };
+
+	const collection = getContext<CollectionContext>('rime.collectionList');
+	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
+
+	$effect(() => {
+		const columnLength = collection.columns.length + 2;
+		gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
+	});
+</script>
+
+{#snippet columnHeader(label: string)}
+	<div class="rz-list-header__column">
+		{capitalize(label)}
+	</div>
+{/snippet}
+
+{#snippet sortableColumnHeader(column: TableColumn)}
+	<div>
+		<button
+			onclick={() => collection.sortBy(column.name)}
+			aria-label="sort {column.name}"
+			type="button"
+			class="rz-list-header__sort-button"
+		>
+			{capitalize(column.label || column.name)}
+
+			{#if collection.sortingBy === column.name && collection.sortingOrder === 'dsc'}
+				<ChevronUp size={12} />
+			{:else}
+				<ChevronDown size={12} />
+			{/if}
+		</button>
+	</div>
+{/snippet}
+
+<div style={gridTemplateColumn} class="rz-list-header">
+	{@render sortableColumnHeader({ name: collection.config.asTitle.split('.').at(-1) || 'title' })}
+
+	{#each collection.columns as column, index (index)}
+		{#if column.table.sort}
+			{@render sortableColumnHeader(column)}
+		{:else}
+			{@render columnHeader(column.label || column.name)}
+		{/if}
+	{/each}
+
+	{@render sortableColumnHeader({ name: 'updatedAt' })}
+</div>
+
+<style>
+	.rz-list-header {
+		display: grid;
+		height: var(--rz-size-14);
+		/* width: calc(100% - var(--rz-size-10)); */
+		align-items: center;
+		border-bottom: var(--rz-border);
+		/* margin-left: var(--rz-size-5); */
+		font-size: var(--rz-text-sm);
+	}
+
+	.rz-list-header__column {
+		color: hsl(var(--rz-ground-2) / 1);
+		display: flex;
+		align-items: center;
+		gap: var(--rz-size-1);
+	}
+
+	.rz-list-header__sort-button {
+		color: hsl(var(--rz-ground-2) / 1);
+		display: flex;
+		align-items: center;
+		gap: var(--rz-size-1);
+	}
+</style>

package/dist/panel/components/sections/collection/list/header/Header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { GenericDoc } from '../../../../../../core/types/doc.js';
+	import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
+	import type { CollectionContext } from '../../../../../context/collection.svelte.js';
+	import { getLocaleContext } from '../../../../../context/locale.svelte';
+	import { getValueAtPath } from '../../../../../../util/object';
+	import { getContext } from 'svelte';
+	import StatusDot from '../../StatusDot.svelte';
+	import UploadThumbCell from '../../upload-thumb-cell/UploadThumbCell.svelte';
+
+	type Props = {
+		checked: boolean;
+		doc: GenericDoc;
+	};
+
+	const { checked, doc }: Props = $props();
+	const collection = getContext<CollectionContext>('rime.collectionList');
+
+	const locale = getLocaleContext();
+
+	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
+
+	$effect(() => {
+		const columnLength = collection.columns.length + 2;
+		gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
+	});
+
+	const formattedDate = $derived(
+		doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
+	);
+</script>
+
+<div style={gridTemplateColumn} class="rz-list-row">
+	<div class="rz-list-row__main">
+		{#if collection.selectMode}
+			<!-- On select mode show the checkbox  -->
+			<Checkbox
+				id="checkbox-{doc.id}"
+				class="rz-list-row__checkbox"
+				{checked}
+				onCheckedChange={() => collection.toggleSelectOf(doc.id)}
+			/>
+			{#if doc._thumbnail}
+				<UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
+			{/if}
+			<label for="checkbox-{doc.id}" class="rz-list-row__title">{doc.title || '[untitled]'}</label>
+		{:else}
+			<a class="rz-list-row__link" href="/panel/{collection.config.slug}/{doc.id}">
+				{#if doc._thumbnail}
+					<UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
+				{:else}
+					{@const Icon = collection.config.icon}
+					<div class="rz-list-row__icon"><Icon size="13" /></div>
+				{/if}
+
+				<span class="rz-list-row__title">{doc.title || '[untitled]'}</span>
+				{#if collection.hasDraft}
+					<StatusDot --rz-dot-size="0.28rem" status={doc.status} />
+				{/if}
+			</a>
+		{/if}
+	</div>
+
+	{#each collection.columns as column, index (index)}
+		<div class="rz-list-row__cell">
+			{#if column.cell}
+				{@const ColumnTableCell = column.cell}
+				<ColumnTableCell value={getValueAtPath(column.path, doc)} />
+			{:else}
+				{getValueAtPath(column.path, doc)}
+			{/if}
+		</div>
+	{/each}
+
+	<div class="rz-list-row__cell">
+		{formattedDate}
+	</div>
+</div>
+
+<style>
+	.rz-list-row {
+		display: grid;
+		height: var(--rz-row-height);
+		align-items: center;
+		border: var(--rz-border);
+		border-radius: var(--rz-radius-md);
+		background-color: hsl(var(--rz-row-bg));
+		.rz-list-row__icon {
+			height: var(--rz-size-10);
+			width: var(--rz-size-10);
+			border-radius: var(--rz-radius-md);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-1)));
+		}
+		:global {
+			.rz-list-row__checkbox {
+				margin-left: var(--rz-size-2);
+			}
+		}
+	}
+
+	.rz-list-row__main {
+		display: flex;
+		align-items: center;
+		gap: var(--rz-size-3);
+		padding-left: var(--rz-size-1);
+		padding-right: var(--rz-size-5);
+	}
+
+	.rz-list-row__link {
+		display: flex;
+		align-items: center;
+		gap: var(--rz-size-4);
+	}
+
+	.rz-list-row__title {
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		word-break: break-all;
+	}
+	label.rz-list-row__title {
+		cursor: pointer;
+	}
+
+	.rz-list-row__cell {
+		color: hsl(var(--rz-foreground) / 0.6);
+	}
+</style>

package/dist/panel/components/sections/collection/list/row/Row.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { GenericDoc } from '../../../../../../core/types/doc.js';
+type Props = {
+    checked: boolean;
+    doc: GenericDoc;
+};
+declare const Row: import("svelte").Component<Props, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/panel/components/sections/collection/tree/CollectionTree.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import type { CollectionContext } from '../../../../context/collection.svelte';
+	import Sortable from 'sortablejs';
+	import { onDestroy } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import Empty from '../Empty.svelte';
+	import CollectionTreeNode from './CollectionTreeNode.svelte';
+	import { countRows } from './util';
+
+	type Props = { collection: CollectionContext };
+	const { collection }: Props = $props();
+
+	// Track collection stamp for reactivity
+	const collectionStamp = $derived(collection.stamp);
+
+	let sortingInitialized = $state(false);
+	let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
+	const shouldInit = $derived(!sortingInitialized && collection.docs.length > 0);
+
+	const sortableOptions: Sortable.Options = {
+		handle: '.rz-collection-node__grip',
+		animation: 150,
+		swapThreshold: 0.93,
+		group: {
+			name: `list-nested`
+		},
+		onEnd: function (evt) {
+			const { newIndex, oldIndex } = evt;
+
+			//@ts-expect-error annoying
+			const fromParentId = evt.item.getAttribute('data-parent') || evt.item.__attributes?.['data-parent'];
+			//@ts-expect-error annoying
+			const toParentId = evt.to.getAttribute('data-id') || evt.to.__attributes?.['data-id'];
+			//@ts-expect-error annoying
+			const nodeId = evt.item.getAttribute('data-id') || evt.item.__attributes?.['data-id'];
+
+			collection
+				.handleNestedDocumentMove({
+					documentId: nodeId,
+					from: {
+						parent: fromParentId === 'root' ? null : fromParentId,
+						index: oldIndex || 0
+					},
+					to: {
+						parent: toParentId === 'root' ? null : toParentId,
+						index: newIndex || 0
+					}
+				})
+				.then((success) => {
+					if (success) {
+						toast.success('Order updated');
+						resetSortable();
+					} else {
+						toast.error('An error occured');
+					}
+				});
+		}
+	};
+
+	const initSortable = () => {
+		// Get all sortable containers including the root and nested ones
+		const sortableContainers = document.querySelectorAll('.rz-collection-sortable');
+
+		// Create Sortable instance for each container
+		sortableContainers.forEach((container) => {
+			const instance = Sortable.create(container as HTMLElement, sortableOptions);
+			sortableInstances.push(instance);
+		});
+	};
+
+	const resetSortable = () => {
+		destroySortable();
+		sortingInitialized = false;
+	};
+
+	const destroySortable = () => {
+		sortableInstances.forEach((instance) => instance.destroy());
+		sortableInstances = [];
+	};
+
+	$effect(() => {
+		if (shouldInit) {
+			initSortable();
+			sortingInitialized = true;
+		}
+	});
+
+	onDestroy(() => {
+		destroySortable();
+	});
+</script>
+
+{#key `${collectionStamp}`}
+	{#if collection.docs.length}
+		<div
+			class="rz-collection-sortable rz-collection-sortable--root"
+			data-id="root"
+			style="--data-rows-count={countRows(collection.nested)}"
+			data-empty={collection.nested.length === 0 ? '' : null}
+		>
+			{#each collection.nested as doc, index (index)}
+				<CollectionTreeNode {collection} parentId="root" {doc} />
+			{/each}
+		</div>
+	{:else}
+		<Empty {collection} />
+	{/if}
+{/key}
+
+<style>
+	.rz-collection-sortable {
+		--gap: var(--rz-size-4);
+		--h: var(--rz-row-height);
+		--half-h: calc(var(--rz-row-height) / 2);
+
+		height: 100%;
+		background-color: hsl(var(--rz-color-bg));
+		background-position: 0 0;
+		position: relative;
+
+		& :global {
+			.rz-collection-sortable {
+				display: grid;
+				margin-left: var(--rz-size-12);
+				min-height: var(--gap);
+			}
+			.rz-collection-sortable:has(.rz-collection-node) {
+				--rows: var(--data-rows-count);
+				&::before {
+					border-bottom-left-radius: 1rem;
+					content: '';
+					border-left: var(--rz-border);
+					translate: calc(-1 * var(--rz-size-6)) calc(-1 * var(--gap));
+					position: absolute;
+					top: 0;
+					height: calc(var(--gap) + var(--half-h) + (var(--rows) - 1) * calc(var(--h) + var(--gap)));
+					left: 0;
+				}
+				margin-top: var(--gap);
+				position: relative;
+			}
+		}
+	}
+</style>

package/dist/panel/components/sections/collection/tree/CollectionTree.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollectionContext } from '../../../../context/collection.svelte';
+type Props = {
+    collection: CollectionContext;
+};
+declare const CollectionTree: import("svelte").Component<Props, {}, "">;
+type CollectionTree = ReturnType<typeof CollectionTree>;
+export default CollectionTree;