rimecms 0.22.0

package/dist/fields/relation/component/Relation.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import { apiUrl } from '../../../core/api/index.js';
+	import { isUploadConfig } from '../../../core/collections/upload/util/config.js';
+	import type { GenericDoc } from '../../../core/types/doc.js';
+	import { Field } from '../../../panel/components/fields/index.js';
+	import { root } from '../../../panel/components/fields/root.svelte.js';
+	import { getCollectionContext } from '../../../panel/context/collection.svelte.js';
+	import { getConfigContext } from '../../../panel/context/config.svelte';
+	import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+	import { getLocaleContext } from '../../../panel/context/locale.svelte';
+	import { panelUrl } from '../../../panel/util/url.js';
+	import { moveItem } from '../../../util/array.js';
+	import { getValueAtPath } from '../../../util/object.js';
+	import { snapshot } from '../../../util/state.js';
+	import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
+	import type { Relation, RelationField } from '../index.js';
+	import Default from './default/Default.svelte';
+	import type { RelationFieldItem } from './types.js';
+	import Upload from './upload/Upload.svelte';
+
+	// Props
+	type Props = { path: string; config: RelationField; form: DocumentFormContext };
+	const { path, config, form }: Props = $props();
+
+	// Context
+	const { getCollection } = getConfigContext();
+	const locale = getLocaleContext();
+	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+	const field = $derived(form.useField(path, config));
+	const relationConfig = getCollection(config.relationTo);
+	const relationCollectionCtx = getCollectionContext(relationConfig.slug);
+
+	let initialized = $state(false);
+	// the fetched items
+	let initialItems: RelationFieldItem[] = $state([]);
+	// value from the form
+	let initialValue = form.getRawValue<Relation[]>(path) || [];
+	// timestamp to force re-render
+	let stamp = $state(new Date().getTime().toString());
+
+	let selectedItems = $state<RelationFieldItem[]>([]);
+	// fetched items minus selected items
+	let availableItems = $state<RelationFieldItem[]>([]);
+	const nothingToSelect = $derived(initialItems.length === 0);
+
+	let isFull = $derived.by(() => {
+		if (!config.many) {
+			if (selectedItems.length === 1) return true;
+		} else {
+			if (availableItems.length === 0 && selectedItems.length > 0) {
+				return true;
+			}
+		}
+		return false;
+	});
+
+	// Convert a document to a relation field item value
+	function documentToRelationFieldItem(doc: GenericDoc) {
+		const itemInFieldValue = retreiveRelation(doc.id);
+		const item: RelationFieldItem = {
+			label: getValueAtPath(relationConfig.asTitle, doc) || '[untitled]',
+			documentId: doc.id,
+			title: doc.title,
+			editUrl: panelUrl(relationConfig.kebab, doc.id),
+			_type: doc._type,
+			_prototype: doc._prototype
+		};
+		if (itemInFieldValue) {
+			item.id = itemInFieldValue.id;
+		}
+		if (isUploadConfig(relationConfig)) {
+			const isRelationToImage = doc.mimeType?.includes('image');
+			item.isImage = isRelationToImage;
+			item.filename = doc.filename;
+			item.filesize = doc.filesize;
+			item.mimeType = doc.mimeType;
+			if (isRelationToImage) {
+				item.url = doc._thumbnail;
+			}
+		}
+		if (form.isLive) {
+			item.livePreview = doc;
+		}
+		return item;
+	}
+
+	// Build the API URL for fetching the collection
+	function makeRessourceURL() {
+		const url = new URL(apiUrl(relationConfig.kebab));
+
+		// Add depth parameter if in live context
+		if (form.isLive) {
+			url.searchParams.append('depth', '1');
+		}
+
+		// Add custom query parameters if provided
+		if (config.query) {
+			if (typeof config.query === 'string') {
+				// Parse the query string and add each parameter
+				const queryParams = new URLSearchParams(config.query);
+				queryParams.forEach((value, key) => {
+					url.searchParams.append(key, value);
+				});
+			} else if (typeof config.query === 'function') {
+				// Parse the function result and add each parameter
+				const queryString = config.query(form.values);
+				const queryParams = new URLSearchParams(queryString);
+				queryParams.forEach((value, key) => {
+					url.searchParams.append(key, value);
+				});
+			}
+		}
+
+		return url.pathname + url.search;
+	}
+
+	const ressourceURL = makeRessourceURL();
+
+	// Fetch the collection data
+	const ressource = APIProxy.getRessource<{ docs: GenericDoc[] }>(ressourceURL);
+
+	// Initialize the initial items and selected items
+	$effect(() => {
+		if (ressource.data) {
+			initialItems = ressource.data.docs.map((doc: GenericDoc) => documentToRelationFieldItem(doc));
+			if (!initialized) {
+				const findItem = (relation: Relation) => {
+					return initialItems.find((item) => item.documentId === relation.documentId);
+				};
+				selectedItems = initialValue.map(findItem).filter((item) => !!item);
+				initialized = true;
+			}
+		}
+	});
+
+	const retreiveRelation = (documentId: string) => {
+		if (initialValue && Array.isArray(initialValue) && initialValue.length) {
+			for (const relation of initialValue) {
+				if (relation.documentId === documentId) {
+					return relation;
+				}
+			}
+		}
+		return null;
+	};
+
+	const getAvailableItems = () => {
+		return initialItems.filter(
+			(initialItem) => !selectedItems.some((selectedItem) => selectedItem.documentId === initialItem.documentId)
+		);
+	};
+
+	$effect(() => {
+		availableItems = getAvailableItems();
+	});
+
+	// Actions
+	const buildRelationFieldValue = () => {
+		const relations = selectedItems.map((item, index) => {
+			let relation: Omit<Relation, 'ownerId'> = {
+				id: item.id,
+				relationTo: config.relationTo,
+				path,
+				position: index,
+				documentId: item.documentId
+			};
+			if (config.localized) {
+				relation.locale = locale.code;
+			}
+			if (form.isLive) {
+				if (item && item.livePreview) {
+					relation.livePreview = snapshot(item.livePreview);
+				}
+			}
+			return relation;
+		});
+
+		return relations;
+	};
+
+	// Disabled the parent form (this one)
+	// So when user save the nested doc
+	// it doesn't save this one
+	const onRelationCreation = () => {
+		form.isDisabled = true;
+	};
+
+	// Enable the form on cancel
+	const onRelationCreationCanceled = () => {
+		form.isDisabled = false;
+	};
+
+	const onRelationCreated = async (doc: GenericDoc) => {
+		// Enabled the form
+		form.isDisabled = false;
+		// update resssource
+		ressource.data?.docs.push(doc);
+		// update collection if present
+		if (relationCollectionCtx) {
+			relationCollectionCtx.addDoc(doc);
+		}
+		// Set value if not full
+		if (isFull) return;
+		selectedItems = [...selectedItems, documentToRelationFieldItem(doc)];
+		field.value = buildRelationFieldValue();
+	};
+
+	const onOrderChange = async (oldIndex: number, newIndex: number) => {
+		selectedItems = moveItem(selectedItems, oldIndex, newIndex);
+		field.value = buildRelationFieldValue();
+		stamp = new Date().getTime().toString();
+	};
+
+	const addValue = async (documentId: string) => {
+		if (isFull) return;
+		const itemToAdd = availableItems.find((item) => item.documentId === documentId);
+		if (!itemToAdd) {
+			throw new Error(`Can't find relation at ${path}`);
+		}
+		selectedItems = [...selectedItems, itemToAdd];
+		field.value = buildRelationFieldValue();
+	};
+
+	const removeValue = async (incomingId: string) => {
+		selectedItems = selectedItems.filter((item) => item.documentId !== incomingId);
+		field.value = buildRelationFieldValue();
+	};
+
+	const isRelationToUpload = isUploadConfig(relationConfig);
+	const RelationComponent = isRelationToUpload ? Upload : Default;
+</script>
+
+<fieldset class="rz-field-relation {config.className || ''}" use:root={field}>
+	<Field.Label {config} for={path || config.name} />
+	<Field.Hint {config} />
+
+	<RelationComponent
+		{path}
+		many={!!config.many}
+		hasError={!!field.error}
+		formNestedLevel={form.nestedLevel}
+		readOnly={form.readOnly}
+		{nothingToSelect}
+		{onRelationCreated}
+		{onRelationCreationCanceled}
+		{onRelationCreation}
+		{isFull}
+		{stamp}
+		{addValue}
+		{availableItems}
+		{selectedItems}
+		{removeValue}
+		{relationConfig}
+		{onOrderChange}
+	/>
+
+	<Field.Error error={field.error} />
+</fieldset>

package/dist/fields/relation/component/Relation.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+import type { Relation, RelationField } from '../index.js';
+type Props = {
+    path: string;
+    config: RelationField;
+    form: DocumentFormContext;
+};
+declare const Relation: import("svelte").Component<Props, {}, "">;
+type Relation = ReturnType<typeof Relation>;
+export default Relation;

package/dist/fields/relation/component/default/Default.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { t__ } from '../../../../core/i18n/index.js';
+	import type { GenericDoc } from '../../../../core/types/doc.js';
+	import Document from '../../../../panel/components/sections/document/Document.svelte';
+	import Button from '../../../../panel/components/ui/button/button.svelte';
+	import * as Command from '../../../../panel/components/ui/command/index.js';
+	import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
+	import Tag from '../../../../panel/components/ui/tag/tag.svelte';
+	import { getUserContext } from '../../../../panel/context/user.svelte.js';
+	import { dataError } from '../../../../panel/util/dataError.js';
+	import { dataFocused } from '../../../../panel/util/dataFocused.js';
+	import { useSortable } from '../../../../panel/util/Sortable.js';
+	import { createBlankDocument } from '../../../../util/doc.js';
+	import type { RelationComponentProps, RelationFieldItem } from '../types.js';
+
+	const {
+		isFull,
+		hasError,
+		addValue,
+		many,
+		selectedItems,
+		removeValue,
+		availableItems,
+		readOnly,
+		nothingToSelect,
+		relationConfig,
+		onOrderChange,
+		formNestedLevel,
+		onRelationCreated,
+		onRelationCreation,
+		onRelationCreationCanceled
+	}: RelationComponentProps = $props();
+
+	const user = getUserContext();
+
+	let search = $state('');
+	let relationList: HTMLElement;
+	let inputFocused = $state(false);
+	let create = $state(false);
+	let commandInput = $state<HTMLInputElement>();
+
+	const onNestedDocumentCreated = (doc: GenericDoc) => {
+		create = false;
+		onRelationCreated(doc);
+		addValue(doc.id);
+	};
+
+	const { sortable } = useSortable({
+		animation: 150,
+		filter: '.rz-command-input .rz-command-list',
+		draggable: '.rz-relation__item',
+		onEnd: function (evt) {
+			if (evt.oldIndex !== undefined && evt.newIndex !== undefined) {
+				onOrderChange(evt.oldIndex, evt.newIndex);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (many) {
+			sortable(relationList);
+		}
+	});
+
+	const onSelect = (item: RelationFieldItem) => {
+		addValue(item.documentId);
+		search = '';
+	};
+
+	const inputWithItemsClass = $derived(
+		selectedItems.length === 0 ? '' : 'rz-command-input-select--with-items'
+	);
+</script>
+
+<div class="rz-relation">
+	<Command.Root>
+		<div
+			class="rz-relation__list"
+			use:dataError={hasError}
+			use:dataFocused={inputFocused}
+			bind:this={relationList}
+			class:rz-relation__list--readonly={readOnly}
+		>
+			{#each selectedItems as item (item.documentId)}
+				<Tag onRemove={() => removeValue(item.documentId)} {readOnly}>
+					{item.label}
+				</Tag>
+			{/each}
+
+			{#if nothingToSelect}
+				<span class="rz-relation__no-items">
+					No {relationConfig.label.singular.toLowerCase()} to select
+				</span>
+			{/if}
+
+			{#if !readOnly && !isFull && availableItems.length > 0}
+				<Command.InputSelect
+					onfocus={() => (inputFocused = true)}
+					onblur={() => setTimeout(() => (inputFocused = false), 150)}
+					ref={commandInput}
+					class={inputWithItemsClass}
+					bind:value={search}
+					placeholder={relationConfig.label.search ||
+						t__(`common.search_a`, relationConfig.label.singular)}
+				/>
+
+				{#if inputFocused}
+					<Command.List>
+						{#each availableItems as item (item.documentId)}
+							<Command.Item value={item.label} onSelect={() => onSelect(item)}>
+								<span>{item.label}</span>
+							</Command.Item>
+						{/each}
+						<Command.Empty>Nothing to select</Command.Empty>
+					</Command.List>
+				{/if}
+			{/if}
+		</div>
+	</Command.Root>
+
+	{#if relationConfig.access.create && relationConfig.access.create(user.attributes, {}) && !isFull}
+		<Button
+			class="rz-relation__create-button"
+			onclick={() => {
+				onRelationCreation();
+				create = true;
+			}}
+			variant="secondary"
+			size="sm"
+		>
+			{t__(`common.create_new`, relationConfig.label.singular || relationConfig.slug)}
+		</Button>
+
+		<Sheet.Root
+			bind:open={create}
+			onOpenChange={(bool) => {
+				create = bool;
+				if (bool === false) {
+					onRelationCreationCanceled();
+				}
+			}}
+		>
+			<Sheet.Trigger />
+			<Sheet.Content style="--rz-page-gutter:var(--rz-size-6)" side="right" showCloseButton={false}>
+				<Document
+					doc={createBlankDocument(relationConfig)}
+					readOnly={false}
+					onClose={() => (create = false)}
+					operation="create"
+					{onNestedDocumentCreated}
+					nestedLevel={formNestedLevel + 1}
+				/>
+			</Sheet.Content>
+		</Sheet.Root>
+	{/if}
+</div>
+
+<style>
+	.rz-relation {
+		position: relative;
+
+		:global {
+			> * + * {
+				margin-top: var(--rz-size-2);
+			}
+			.rz-command {
+				width: 100%;
+				border-radius: var(--rz-radius-md);
+
+				.rz-command-input-select--with-items {
+					margin-left: var(--rz-size-2);
+				}
+
+				.rz-command-list {
+					border: var(--rz-border);
+					position: absolute;
+					left: 0;
+					right: 0;
+					top: var(--rz-size-12);
+					z-index: 20;
+					border-radius: var(--rz-radius-md);
+					box-shadow: var(--rz-shadow-md);
+				}
+
+				.rz-command-item {
+					height: var(--rz-size-11);
+				}
+			}
+		}
+
+		.rz-relation__no-items {
+			font-size: var(--rz-text-sm);
+			opacity: 0.4;
+		}
+
+		.rz-relation__list {
+			background-color: hsl(var(--rz-input-bg));
+			border: 1px solid var(--rz-input-border-color);
+			border-radius: var(--rz-radius-md);
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--rz-size-1);
+			min-height: var(--rz-size-11);
+			padding: var(--rz-size-2) var(--rz-size-3);
+			transition: all 0.2s ease;
+		}
+
+		.rz-relation__list:global([data-focused]) {
+			outline: none;
+			/* --rz-ring-offset: 2px; */
+			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));
+		}
+
+		.rz-relation__list:global([data-error]) {
+			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-alert) / var(--rz-ring-opacity, 1));
+		}
+
+		.rz-relation__list--readonly {
+			cursor: no-drop;
+		}
+	}
+</style>

package/dist/fields/relation/component/default/Default.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RelationComponentProps } from '../types.js';
+declare const Default: import("svelte").Component<RelationComponentProps, {}, "">;
+type Default = ReturnType<typeof Default>;
+export default Default;

package/dist/fields/relation/component/types.d.ts

@@ -0,0 +1,36 @@
+import type { BuiltCollection } from '../../../core/config/types.js';
+import type { GenericDoc } from '../../../core/types/doc.js';
+export type RelationFieldItem = {
+    id?: string;
+    documentId: string;
+    label: string;
+    title: string;
+    filename?: string;
+    filesize?: string;
+    mimeType?: string;
+    isImage?: boolean;
+    url?: string;
+    livePreview?: GenericDoc;
+    editUrl: string;
+    _type: string;
+    _prototype: string;
+};
+export type RelationComponentProps = {
+    path: string;
+    relationConfig: BuiltCollection;
+    stamp: string;
+    hasError: boolean;
+    isFull: boolean;
+    readOnly: boolean;
+    nothingToSelect: boolean;
+    many: boolean;
+    addValue: (relationToId: string) => void;
+    removeValue: (relationToId: string) => void;
+    availableItems: RelationFieldItem[];
+    selectedItems: RelationFieldItem[];
+    formNestedLevel: number;
+    onOrderChange: (oldIndex: number, newIndex: number) => void;
+    onRelationCreated: (doc: GenericDoc) => void;
+    onRelationCreationCanceled: () => void;
+    onRelationCreation: () => void;
+};

package/dist/fields/relation/component/types.js

@@ -0,0 +1 @@
+export {};

package/dist/fields/relation/component/upload/Browse.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { apiUrl } from '../../../../core/api/index.js';
+	import type { Directory } from '../../../../core/collections/upload/upload';
+	import { withDirectoriesSuffix } from '../../../../core/naming.js';
+	import Folder from '../../../../panel/components/sections/collection/grid/grid-item/Folder.svelte';
+	import CardDocument from '../../../../panel/components/ui/card-document/card-document.svelte';
+	import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
+	import { API_PROXY, getAPIProxyContext } from '../../../../panel/context/api-proxy.svelte';
+	import type { BuiltCollection, UploadDoc } from '../../../../types';
+
+	type Props = { open: boolean; addValue: (item: string) => void; config: BuiltCollection };
+	let { open = $bindable(), addValue, config }: Props = $props();
+
+	let path = $state('root');
+
+	const parentPath = $derived.by(() => {
+		if (path.includes(':')) {
+			const segments = path.split(':');
+			return segments.slice(0, -1).join(':');
+		} else {
+			return null;
+		}
+	});
+
+	const filesURL = $derived.by(() => {
+		return `${apiUrl(config.kebab)}?where[_path][equals]=${path}`;
+	});
+	const foldersURL = $derived.by(() => {
+		return `${apiUrl(withDirectoriesSuffix(config.kebab))}?where[parent][equals]=${path}`;
+	});
+
+	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+	let files = $derived(APIProxy.getRessource<{ docs: UploadDoc[] }>(filesURL));
+	let folders = $derived(APIProxy.getRessource<{ docs: Directory[] }>(foldersURL));
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Content showCloseButton={false} side="right">
+		<div class="rz-relation-browse">
+			{#if parentPath}
+				<button class="rz-browse__folder" onclick={() => (path = parentPath)}>
+					<Folder>...</Folder>
+				</button>
+			{/if}
+
+			{#if folders.data}
+				{#each folders.data.docs as doc (doc.id)}
+					<button class="rz-browse__folder" onclick={() => (path = doc.id)}>
+						<Folder>{doc.name}</Folder>
+					</button>
+				{/each}
+			{/if}
+
+			{#if files.data}
+				{#each files.data.docs as doc (doc.id)}
+					<button onclick={() => addValue(doc.id)}>
+						<CardDocument {doc} />
+					</button>
+				{/each}
+			{/if}
+		</div>
+	</Sheet.Content>
+</Sheet.Root>
+
+<style>
+	.rz-relation-browse {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+		gap: var(--rz-size-4);
+		padding: var(--rz-size-4);
+	}
+
+	.rz-browse__folder {
+		width: 100%;
+		aspect-ratio: 4 / 5;
+		padding: var(--rz-size-5);
+		border-radius: var(--rz-radius-lg);
+		&:hover {
+			background-color: var(--rz-folder-hover-bg);
+		}
+	}
+</style>

package/dist/fields/relation/component/upload/Browse.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BuiltCollection } from '../../../../types';
+type Props = {
+    open: boolean;
+    addValue: (item: string) => void;
+    config: BuiltCollection;
+};
+declare const Browse: import("svelte").Component<Props, {}, "open">;
+type Browse = ReturnType<typeof Browse>;
+export default Browse;