rimecms 0.24.0 → 0.24.2

package/README.md

@@ -31,6 +31,7 @@ Headless CMS powered by SvelteKit.
 ### Content Management
 
 Fields types:
+
 - Blocks
 - Tree (nested array)
 - Tabs
@@ -52,6 +53,7 @@ Fields types:
 npx sv create my-app
 cd my-app
 ```
+
 > [!NOTE]
 > Select TypeScript when prompted
 
@@ -83,7 +85,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { rime } from 'rimecms/vite';
 
 export default defineConfig({
-  plugins: [rime(), sveltekit()]
+	plugins: [rime(), sveltekit()]
 });
 ```
 
@@ -198,29 +200,37 @@ export default rime({
 
 ```ts
 export const load = async (event: LayoutServerLoadEvent) => {
-  const { rime } = event.locals;
-  // Get an Area document
-  const menu = await rime.area('menu').find();
-  // Get all pages documents
-  const pages = await rime.collection('pages').findAll({ locale: 'en' });
-  // Get a page byId
-  const home = await rime.collection('pages').findById({ locale: 'en', id: 'some-id' });
-  // Get a user with a query
-  const [user] = await rime.collection('users').find({
-    query: `where[email][equals]=some@email.com` // qs query or ParsedQsQuery
-  });
-  // Get some config values
-  const languages = rime.config.getLocalesCodes();
-  const collections = rime.config.collections;
-  //...
+	const { rime } = event.locals;
+	// Get an Area document
+	const menu = await rime.area('menu').find();
+	// Get all pages documents
+	const pages = await rime.collection('pages').findAll({ locale: 'en' });
+	// Get a page byId
+	const home = await rime.collection('pages').findById({ locale: 'en', id: 'some-id' });
+	// Get a user with a query
+	const [user] = await rime.collection('users').find({
+		query: `where[email][equals]=some@email.com` // qs query or ParsedQsQuery
+	});
+	// Get some config values
+	const languages = rime.config.getLocalesCodes();
+	const collections = rime.config.collections;
+	//...
 };
 ```
 
 ### From the API :
+
 ```ts
-const { docs } = await fetch('http://localhost:5173/api/pages').then(r => r.json())
-const { docs } = await fetch('http://localhost:5173/api/pages?sort=title&limit=1').then(r => r.json())
-const { docs } = await fetch('http://localhost:5173/api/pages?where[author][like]=some-id&locale=en`;').then(r => r.json())
+const { docs } = await fetch('http://localhost:5173/api/pages').then((r) => r.json());
+const { docs } = await fetch('http://localhost:5173/api/pages?sort=title&limit=1').then((r) =>
+	r.json()
+);
+const { docs } = await fetch(
+	'http://localhost:5173/api/pages?where[author][equals]=some-id&locale=en`;'
+).then((r) => r.json());
+const { docs } = await fetch(
+	'http://localhost:5173/api/pages?where[author.email][equals]=some@email.com&locale=en`;'
+).then((r) => r.json());
 ```
 
 ## DEPLOYING
@@ -228,10 +238,12 @@ const { docs } = await fetch('http://localhost:5173/api/pages?where[author][like
 For now I am using it with @svelte/adapter-node, other adapter not tested and probably not working.
 
 With the node adapter :
+
 ```sh
 npx rime build
 npx rime build -d # to copy the database directory
 ```
+
 It's doing bascically `vite build` under the hood and create the polka server file inside an app directory, plus giving some info on how to run it.
 
 ## ROADMAP
@@ -246,6 +258,7 @@ It's doing bascically `vite build` under the hood and create the polka server fi
 - [x] Document version
 - [x] collection nested
 - [x] more better-auth integration
+- [x] Handle relation poperties in queries
 - [~] Documentation
 - [ ] Live Edit system in practice
 - [ ] auto-saved draft

package/dist/core/config/shared/find-title.d.ts

@@ -4,8 +4,8 @@ import type { DateField } from '../../../fields/date/index.js';
 import type { EmailField } from '../../../fields/email/index.js';
 import type { SlugField } from '../../../fields/slug/index.js';
 import type { TextField } from '../../../fields/text/index.js';
-import type { Field, FormField } from '../../../fields/types.js';
-export declare const hasMaybeTitle: (field: Field) => field is TextField | DateField | SlugField | EmailField;
+import type { Field, FormField, RichTextField } from '../../../fields/types.js';
+export declare const hasMaybeTitle: (field: Field) => field is TextField | DateField | SlugField | EmailField | RichTextField;
 interface TitleFieldResult {
     field: FormFieldBuilder<FormField>;
     path: string;

package/dist/core/config/shared/find-title.js

@@ -1,7 +1,7 @@
 import { FormFieldBuilder } from '../../fields/builders/form-field-builder.js';
 import { isGroupField } from '../../../fields/group/index.js';
 import { TabsBuilder } from '../../../fields/tabs/index.js';
-export const hasMaybeTitle = (field) => ['text', 'date', 'slug', 'email'].includes(field.type);
+export const hasMaybeTitle = (field) => ['text', 'date', 'slug', 'email', 'richText'].includes(field.type);
 export function findTitleField(fields = [], basePath = '') {
     for (const field of fields) {
         // Direct check for isTitle

package/dist/core/operations/hooks/before-read/set-document-title.server.js

@@ -1,4 +1,5 @@
-import { getValueAtPath } from '../../../../util/object.js';
+import { getValueAtPath, isObjectLiteral } from '../../../../util/object.js';
+import { richTextJSONToText } from '../../../../fields/rich-text/client.js';
 import { Hooks } from '../index.server.js';
 export const setDocumentTitle = Hooks.beforeRead(async (args) => {
     const config = args.config;
@@ -7,8 +8,20 @@ export const setDocumentTitle = Hooks.beforeRead(async (args) => {
     const hasSelect = Array.isArray(paramSelect) && paramSelect.length;
     const shouldSetTitle = !doc.title && (!hasSelect || (hasSelect && paramSelect.includes('title')));
     if (shouldSetTitle) {
+        function computeTitleFromValue(value) {
+            // Handle rich text value
+            if (isObjectLiteral(value) && 'content' in value) {
+                return richTextJSONToText(value);
+            }
+            if (typeof value === 'string') {
+                return value;
+            }
+            return doc.id;
+        }
+        const titleRaw = getValueAtPath(config.asTitle, doc);
+        const title = computeTitleFromValue(titleRaw);
         doc = {
-            title: getValueAtPath(config.asTitle, doc),
+            title,
             ...doc
         };
     }

package/dist/fields/blocks/component/AddBlockButton.svelte

@@ -30,7 +30,12 @@
 </script>
 
 {#if config.blocks.length === 1}
-	<Button onclick={() => add(config.blocks[0].block)} variant="ghost" icon={CirclePlus} size="icon" />
+	<Button
+		onclick={() => add(config.blocks[0].block)}
+		variant="ghost"
+		icon={CirclePlus}
+		size="icon"
+	/>
 {:else}
 	<Button onclick={() => (open = true)} variant="ghost" icon={CirclePlus} size="icon" />
 
@@ -77,13 +82,13 @@
 			</Command.List>
 
 			<div class="rz-add-block-button__preview-wrap">
-				{#each config.blocks as block, index (index)}
+				{#each config.blocks as blockFieldBuilder, index (index)}
 					<div
-						class:rz-add-block-button__preview--active={ariaSelected === block.name}
+						class:rz-add-block-button__preview--active={ariaSelected === blockFieldBuilder.name}
 						class="rz-add-block-button__preview"
 					>
-						{#if block.block.image}
-							<img src="{env.PUBLIC_RIME_URL}{block.image}" alt="preview" />
+						{#if blockFieldBuilder.block.image}
+							<img src="{env.PUBLIC_RIME_URL}{blockFieldBuilder.block.image}" alt="preview" />
 						{:else}
 							no preview
 						{/if}

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

@@ -17,7 +17,7 @@
 	let { value }: Props = $props();
 	let displayCount = $derived(value && value.length > 1);
 
-	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+	const APIProxy = getAPIProxyContext(API_PROXY.ROOT);
 
 	let APIUrl = $derived.by(() => {
 		if (value && value.length && value[0].documentId) {
@@ -33,7 +33,7 @@
 	});
 </script>
 
-<span>
+<span class="rz-relation-cell">
 	{#if displayCount}
 		{value.length} items
 	{:else if ressource?.data?.doc}
@@ -44,15 +44,21 @@
 			/>
 			{ressource.data.doc.title}
 		{:else}
-			{ressource.data.doc.title}
+			<span class="rz-relation-cell__title">{ressource.data.doc.title}</span>
 		{/if}
 	{/if}
 </span>
 
 <style>
-	span {
+	.rz-relation-cell {
 		display: flex;
 		gap: var(--rz-size-2);
 		align-items: center;
 	}
+	.rz-relation-cell__title {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
 </style>

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

@@ -83,7 +83,7 @@
 		>
 			{#each selectedItems as item (item.documentId)}
 				<Tag onRemove={() => removeValue(item.documentId)} {readOnly}>
-					{item.label}
+					<a href={item.editUrl}>{item.label}</a>
 				</Tag>
 			{/each}
 

package/dist/fields/rich-text/index.d.ts

@@ -9,6 +9,7 @@ export declare class RichTextFieldBuilder extends FormFieldBuilder<RichTextField
     get cell(): import("svelte").Component<{
         value: string;
     }, {}, "">;
+    isTitle(): this;
     /**
      * Sets a custom TipTap editor configuration for the rich text field.
      *
@@ -44,6 +45,7 @@ type RichTextContent = {
 };
 export type RichTextField = FormField & {
     type: 'richText';
+    isTitle?: true;
     features?: Array<RichTextFeature>;
     defaultValue?: RichTextContent | DefaultValueFn<RichTextContent>;
 };

package/dist/fields/rich-text/index.js

@@ -33,6 +33,10 @@ export class RichTextFieldBuilder extends FormFieldBuilder {
     get cell() {
         return Cell;
     }
+    isTitle() {
+        this.field.isTitle = true;
+        return this;
+    }
     /**
      * Sets a custom TipTap editor configuration for the rich text field.
      *

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

@@ -90,6 +90,8 @@
 			width: var(--rz-size-10);
 			border-radius: var(--rz-radius-md);
 			display: flex;
+			flex-shrink: 0;
+			flex-grow: 0;
 			align-items: center;
 			justify-content: center;
 			background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-1)));

package/dist/panel/components/ui/breadcrumb/BreadCrumb.svelte

@@ -41,6 +41,10 @@
 		}
 	}
 	.rz-aria__last {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
 		opacity: 1;
 	}
 </style>

package/dist/panel/components/ui/page-header/PageHeader.svelte

@@ -70,6 +70,10 @@
 	}
 
 	h1 {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
 		font-size: var(--rz-text-3xl);
 		font-variation-settings: 'wght' 600;
 		font-weight: 600;

package/dist/panel/context/documentForm.svelte.js

@@ -23,6 +23,7 @@ import { getCollectionContext } from './collection.svelte.js';
 import { setErrorsContext } from './errors.svelte.js';
 import { getLocaleContext } from './locale.svelte.js';
 import { getUserContext } from './user.svelte.js';
+import { richTextJSONToText } from '../../fields/rich-text/client.js';
 function createDocumentFormState({ initial, element, config, readOnly, key, onNestedDocumentCreated, onDataChange, beforeSubmit, beforeRedirect, onFieldFocus }) {
     //
     let intialDoc = $state(initial);
@@ -56,8 +57,19 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
             return documentConfig.label;
         }
         else {
+            function computeTitleFromValue(value) {
+                // Handle rich text value
+                if (isObjectLiteral(value) && 'content' in value) {
+                    return richTextJSONToText(value);
+                }
+                if (typeof value === 'string') {
+                    return value;
+                }
+                return initialTitle || doc.id;
+            }
             $effect(() => {
-                title = getValueAtPath(documentConfig.asTitle, doc) || '[untitled]';
+                const rawTitle = getValueAtPath(documentConfig.asTitle, doc) || '[untitled]';
+                title = computeTitleFromValue(rawTitle);
                 if (nestedLevel === 0) {
                     titleContext.value = title;
                 }

package/dist/site/components/avatar/avatar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { isRelationPopulated } from '../../../fields/relation/client';
 
-	type Props = { user: UsersDoc };
+	type Props = { user: StaffDoc };
 	const { user }: Props = $props();
 
 	const avatar = $derived(user.avatar && isRelationPopulated(user.avatar) ? user.avatar : null);

package/dist/site/components/avatar/avatar.svelte.d.ts

@@ -1,5 +1,5 @@
 type Props = {
-    user: UsersDoc;
+    user: StaffDoc;
 };
 declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/site/components/button/button.svelte

@@ -259,8 +259,8 @@
 
 	/** Text */
 	.button--text {
-		padding-left: 0;
-		padding-right: 0;
+		padding: 0;
+		height: auto;
 		background-color: var(--button-text-bg);
 		color: var(--button-text-fg);
 

package/dist/site/components/card-document/card-document.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { UploadDoc } from '../../../types';
+	import UploadThumbnail from '../upload-thumbnail/upload-thumbnail.svelte';
+
+	type Props = { doc: UploadDoc };
+	const { doc }: Props = $props();
+
+	const thumbnailUrl = $derived.by(() => {
+		if (doc.mimeType && doc.mimeType.includes('image')) {
+			return doc._thumbnail;
+		}
+		return null;
+	});
+</script>
+
+<div class="document-card">
+	<div class="document-card__preview">
+		<UploadThumbnail mimeType={doc.mimeType} url={thumbnailUrl} />
+	</div>
+
+	<div class="document-card__body">
+		<p class="document-card__title">
+			{doc.title}
+		</p>
+	</div>
+</div>
+
+<style>
+	:root {
+		--card-hover-bg: light-dark(var(--gray-14), var(--gray-3));
+		--card-bg: light-dark(var(--gray-16), var(--gray-2));
+	}
+
+	.document-card {
+		max-height: 200px;
+		border: var(--border);
+		background-color: var(--card-bg);
+		border-radius: var(--radius-sm);
+		aspect-ratio: 4 / 5;
+		width: 100%;
+		display: grid;
+	}
+
+	.document-card:hover {
+		background-color: var(--card-hover-bg);
+	}
+
+	.document-card__preview {
+		width: 100%;
+		height: 100%;
+		border-top-left-radius: var(--radius-sm);
+		border-top-right-radius: var(--radius-sm);
+		background-color: light-dark(var(--gray-12), var(--gray-4));
+		overflow: hidden;
+	}
+
+	.document-card :global(.upload-preview-cell) {
+		width: 100%;
+		height: 100%;
+		aspect-ratio: 5/4;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		padding: var(--size-1);
+		overflow: hidden;
+		> div {
+			border-radius: var(--radius-sm);
+			overflow: hidden;
+		}
+	}
+
+	.document-card__title {
+		margin-top: var(--size-2);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		word-break: break-all;
+		text-align: left;
+		font-family: var(--font-text);
+		font-size: var(--font-size-text-xs);
+		line-height: 1.33;
+		font-weight: 400;
+	}
+
+	.document-card__body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+		text-align: left;
+		padding: 0 0.6rem 0.6rem 0.6rem;
+	}
+</style>

package/dist/site/components/card-document/card-document.svelte.d.ts

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

package/dist/site/components/dialog/dialog-content.css

@@ -0,0 +1,47 @@
+.dialog-content {
+	--gutter: var(--size-4);
+	background-color: var(--color-bg);
+	position: fixed;
+	left: calc(50% - var(--gutter));
+	top: 30%;
+	z-index: 1010;
+	display: grid;
+	width: calc(100% - 2 * var(--gutter));
+	transform: translate(-50%, -50%);
+	gap: var(--size-4);
+	padding: var(--size-3);
+	box-shadow: var(--shadow-lg);
+	border-radius: var(--radius-lg);
+	margin: 0 var(--gutter);
+}
+
+@media (min-width: 768px) {
+	.dialog-content--sm {
+		width: var(--size-xs);
+	}
+	.dialog-content--default {
+		width: var(--size-sm);
+	}
+	.dialog-content--lg {
+		width: var(--size-lg);
+	}
+}
+
+.dialog-content__close {
+	color: hsl(from var(--color-fg) h s l / 0.7);
+	position: absolute;
+	right: var(--size-4);
+	top: var(--size-3);
+	border-radius: var(--radius-sm);
+	opacity: 0.7;
+	transition: opacity 0.2s;
+}
+
+.dialog-content__close:focus {
+	outline-offset: 2px;
+	outline: 2px solid var(--color-fg);
+}
+
+.dialog-content__close:disabled {
+	pointer-events: none;
+}

package/dist/site/components/dialog/dialog-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import './dialog-content.css';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = 'default',
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		children: Snippet;
+		size?: 'sm' | 'default' | 'lg';
+	} = $props();
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		class="dialog-content dialog-content--{size} {className}"
+		{...restProps}
+	>
+		{@render children?.()}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

package/dist/site/components/dialog/dialog-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import './dialog-content.css';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    children: Snippet;
+    size?: 'sm' | 'default' | 'lg';
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/site/components/dialog/dialog-overlay.css

@@ -0,0 +1,8 @@
+.dialog-overlay {
+	background-color: hsl(from var(--color-fg) h s l / 0.05);
+	position: fixed;
+	inset: 0;
+	z-index: 1010;
+	-webkit-backdrop-filter: blur(3px);
+	        backdrop-filter: blur(3px);
+}

package/dist/site/components/dialog/dialog-overlay.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import './dialog-overlay.css';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay bind:ref class="dialog-overlay {className}" {...restProps} />

package/dist/site/components/dialog/dialog-overlay.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import './dialog-overlay.css';
+declare const DialogOverlay: import("svelte").Component<DialogPrimitive.OverlayProps, {}, "ref">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
+export default DialogOverlay;

package/dist/site/components/dialog/index.d.ts

@@ -0,0 +1,8 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export { Root, Portal, Trigger, Overlay, Content, Close, Root as Dialog, Portal as DialogPortal, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Close as DialogClose };

package/dist/site/components/dialog/index.js

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+const Portal = DialogPrimitive.Portal;
+export { Root, Portal, Trigger, Overlay, Content, Close, 
+//
+Root as Dialog, Portal as DialogPortal, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Close as DialogClose };

package/dist/site/components/feed/feed.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import Post from '../post/post.svelte';
+  import Post from '../post/post.svelte';
+
+  let { posts }: { posts: PostsDoc[] } = $props();
 </script>
 
 <div>
-	{#each page.data.posts as post}
-		<Post {post} />
-	{/each}
+  {#each posts as post (post.id)}
+    <Post {post} />
+  {/each}
 </div>
 
 <style>
-	div {
-		padding-inline: var(--size-8);
-		padding-block: var(--size-8);
-	}
+  div {
+    padding-inline: var(--size-8);
+    padding-block: var(--size-8);
+    display: grid;
+    gap: var(--size-10);
+  }
 </style>

package/dist/site/components/feed/feed.svelte.d.ts

@@ -1,18 +1,6 @@
-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;
-}
-declare const Feed: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Feed = InstanceType<typeof Feed>;
+type $$ComponentProps = {
+    posts: PostsDoc[];
+};
+declare const Feed: import("svelte").Component<$$ComponentProps, {}, "">;
+type Feed = ReturnType<typeof Feed>;
 export default Feed;