rimecms 0.26.1 → 0.26.3

package/dist/core/collections/auth/hooks/before-create/create-better-auth-user.server.js

@@ -1,5 +1,6 @@
 import { dev } from '$app/environment';
 import { RimeError, RimeFormError } from '../../../../errors/index.js';
+import { t__ } from '../../../../i18n/index.js';
 import { Hooks } from '../../../../operations/hooks/index.server.js';
 import { access } from '../../../../../util/access/index.js';
 import { cases } from '../../../../../util/cases.js';
@@ -149,8 +150,8 @@ export const createBetterAuthUser = Hooks.beforeCreate(async (args) => {
             // Send api key by email to the user
             await rime.mailer.sendMail({
                 to: event.locals.user.email,
-                subject: 'Your API Key',
-                text: `Your ${args.data.name} apiKey : ${apiKey}, keep it safe, only server-side`
+                subject: t__(`mail.api_key_created_subject`, args.data.name),
+                text: t__(`mail.api_key_created_text`, args.data.name, apiKey.key)
             });
             return {
                 ...args,

package/dist/core/i18n/en/mail.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    let api_key_created_subject: string;
+    let api_key_created_text: string;
+}
+export default _default;

package/dist/core/i18n/en/mail.js

@@ -0,0 +1,4 @@
+export default {
+	api_key_created_subject: 'Your API Key',
+	api_key_created_text: `Your $1 apiKey : $2, keep it safe, only server-side`
+};

package/dist/core/i18n/fr/mail.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    let api_key_created_subject: string;
+    let api_key_created_text: string;
+}
+export default _default;

package/dist/core/i18n/fr/mail.js

@@ -0,0 +1,4 @@
+export default {
+	api_key_created_subject: 'Votre clé API',
+	api_key_created_text: `Votre clé API $1 : $2, gardez-la en sécurité, uniquement côté serveur`
+};

package/dist/core/i18n/index.d.ts

@@ -1,5 +1,5 @@
 export declare const languages: readonly ["fr", "en"];
-export declare const namespaces: readonly ["errors", "fields", "common"];
+export declare const namespaces: readonly ["errors", "fields", "common", "mail"];
 export declare const DEFAULT_LOCALE = "en";
 export type PanelLanguage = (typeof languages)[number];
 export type Namespace = (typeof namespaces)[number];

package/dist/core/i18n/index.js

@@ -1,5 +1,5 @@
 export const languages = ['fr', 'en'];
-export const namespaces = ['errors', 'fields', 'common'];
+export const namespaces = ['errors', 'fields', 'common', 'mail'];
 export const DEFAULT_LOCALE = 'en';
 function createI18n() {
     let dictionaries = {};

package/dist/core/i18n/register.server.js

@@ -5,12 +5,14 @@ const translationModules = {
     en: {
         common: () => import('./en/common.js'),
         errors: () => import('./en/errors.js'),
-        fields: () => import('./en/fields.js')
+        fields: () => import('./en/fields.js'),
+        mail: () => import('./en/mail.js')
     },
     fr: {
         common: () => import('./fr/common.js'),
         errors: () => import('./fr/errors.js'),
-        fields: () => import('./fr/fields.js')
+        fields: () => import('./fr/fields.js'),
+        mail: () => import('./fr/mail.js')
     }
 };
 export async function registerTranslation(locale) {

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

@@ -106,8 +106,8 @@
 
 				{#if inputFocused}
 					<Command.List>
-						{#each availableItems as item (item.documentId)}
-							<Command.Item value={item.title} onSelect={() => onSelect(item)}>
+						{#each availableItems as item, index (item.documentId)}
+							<Command.Item value="{item.title}-{index}" onSelect={() => onSelect(item)}>
 								<span>{item.title}</span>
 							</Command.Item>
 						{/each}
@@ -155,8 +155,13 @@
 	{/if}
 </div>
 
-<style>
-	.rz-relation {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-relation {
 		position: relative;
 
 		:global {

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

@@ -3,6 +3,7 @@
 	import type { Directory } from '../../../../core/collections/upload/upload';
 	import { t__ } from '../../../../core/i18n/index.js';
 	import { withDirectoriesSuffix } from '../../../../core/naming.js';
+	import Empty from '../../../../panel/components/sections/collection/Empty.svelte';
 	import Folder from '../../../../panel/components/sections/collection/folder/Folder.svelte';
 	import Button from '../../../../panel/components/ui/button/button.svelte';
 	import CardDocument from '../../../../panel/components/ui/card-document/card-document.svelte';
@@ -119,60 +120,107 @@
 			</div>
 
 			<!-- Grid -->
-			<div class="rz-relation-browse__grid">
-				{#if parentPath}
-					<button class="rz-browse__folder" onclick={() => (path = parentPath)}>
-						<Folder>...</Folder>
-					</button>
-				{/if}
-
-				{#if !isFiltered}
-					{#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}
+			<div class="rz-relation-browse__grid-wrapper">
+				<div class="rz-relation-browse__grid">
+					{#if isFiltered && files.data?.docs.length === 0}
+						<Empty {config} />
 					{/if}
-				{/if}
 
-				{#if files.data}
-					{#each files.data.docs as doc (doc.id)}
-						<button onclick={() => addValue(doc.id)}>
-							<CardDocument {doc} />
+					{#if parentPath}
+						<button class="rz-browse__folder" onclick={() => (path = parentPath)}>
+							<Folder>...</Folder>
 						</button>
-					{/each}
-				{/if}
+					{/if}
+
+					{#if !isFiltered}
+						{#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}
+
+					{#if files.data}
+						{#each files.data.docs as doc (doc.id)}
+							<button onclick={() => addValue(doc.id)}>
+								<CardDocument {doc} />
+							</button>
+						{/each}
+					{/if}
+				</div>
 			</div>
 		</div>
 	</Dialog.Content>
 </Dialog.Root>
 
 <style>
+	.rz-relation-browse {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+
+		:global {
+			.rz-no-document {
+				grid-column: 1 / -1;
+			}
+		}
+	}
+
 	.rz-relation-browse__header {
+		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		gap: var(--rz-size-4);
 		padding-bottom: var(--rz-size-4);
 		border-bottom: var(--rz-border);
-		margin-bottom: var(--rz-size-4);
+
+		padding-right: var(--rz-size-8);
+		position: sticky;
+		top: 0;
+		background-color: hsl(var(--rz-color-bg));
+		z-index: 10;
 
 		:global {
 			.rz-dropdown-item {
 				padding: var(--rz-size-3) var(--rz-size-3);
 			}
+			.rz-input-wrapper {
+				max-width: 50%;
+			}
 			.rz-input {
 				height: var(--rz-size-9);
 			}
 		}
 	}
 
+	.rz-relation-browse__grid-wrapper {
+		overflow-y: scroll;
+		flex: 1;
+		min-height: 0;
+	}
+
 	.rz-relation-browse__grid {
+		padding-top: var(--rz-size-4);
 		display: grid;
 		align-self: start;
 		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 		grid-auto-rows: auto;
 		gap: var(--rz-size-4);
+		width: 100%;
+
+		&::after {
+			content: '';
+			height: 5rem;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			z-index: 2;
+			background-image: linear-gradient(to top, hsl(var(--rz-color-bg)), transparent);
+		}
 	}
 
 	.rz-browse__folder {

package/dist/panel/components/sections/collection/Empty.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { CollectionContext } from '../../../context/collection.svelte.js';
+	import type { BuiltCollection } from '../../../../types';
 	import { t__ } from '../../../../core/i18n/index.js';
 
-	type Props = { collection: CollectionContext };
-	const { collection }: Props = $props();
+	type Props = { config: BuiltCollection };
+	const { config }: Props = $props();
 </script>
 
-<div class="rz-page-collection__empty">
+<div class="rz-no-document">
 	<div>
 		<span>
-			{collection.config.label.none || t__(`common.no_document`, collection.config.label.singular)}
+			{config.label.none || t__(`common.no_document`, config.label.singular)}
 		</span>
 	</div>
 </div>
 
 <style>
-	.rz-page-collection__empty {
+	.rz-no-document {
 		height: var(--rz-input-height);
 		background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
 		display: flex;

package/dist/panel/components/sections/collection/Empty.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { CollectionContext } from '../../../context/collection.svelte.js';
+import type { BuiltCollection } from '../../../../types';
 type Props = {
-    collection: CollectionContext;
+    config: BuiltCollection;
 };
 declare const Empty: import("svelte").Component<Props, {}, "">;
 type Empty = ReturnType<typeof Empty>;

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte

@@ -99,7 +99,7 @@
 		</div>
 	</div>
 {:else}
-	<Empty {collection} />
+	<Empty config={collection.config} />
 {/if}
 
 <style>

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

@@ -48,7 +48,7 @@
 		{/each}
 	</div>
 {:else}
-	<Empty {collection} />
+	<Empty config={collection.config} />
 {/if}
 
 <style>

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

@@ -104,7 +104,7 @@
 			{/each}
 		</div>
 	{:else}
-		<Empty {collection} />
+		<Empty config={collection.config} />
 	{/if}
 {/key}
 

package/dist/panel/components/sections/document/Document.svelte

@@ -54,10 +54,13 @@
 	const user = getUserContext();
 
 	let formElement = $state<HTMLFormElement>();
-
+	// This is used to intercept navigation when there are unsaved changes in the form
+	// It stores the URL the user is trying to navigate to, so we can redirect them there after they confirm they want to leave
 	let interceptedLeave = $state<{ url: string } | null>(null);
+	// This is used to prevent the beforeNavigate from triggering when we programmatically navigate
 	let isRedirect = $state(false);
 
+	// Intercept navigation when there are unsaved changes in the form
 	beforeNavigate(async ({ cancel, to }) => {
 		const hasCHanges = Object.keys(form.changes).length > 0;
 		if (!hasCHanges) return;
@@ -108,6 +111,7 @@
 			return new Promise<boolean>((resolve) => {
 				function checkAndResolve() {
 					if (!apiKey) {
+						isRedirect = !!data?.redirectUrl;
 						resolve(true);
 						clearInterval(intervalId);
 					}
@@ -150,7 +154,8 @@
 			<UploadHeader accept={config.upload.accept} create={operation === 'create'} {form} />
 		{/if}
 		<RenderFields fields={config.fields} {form} />
-		{#if config.type === 'collection' && isAuthConfig(config)}
+		<!--  -->
+		{#if config.type === 'collection' && isAuthConfig(config) && config.auth.type === 'password'}
 			<AuthFooter collection={config} {operation} {form} />
 		{/if}
 	</div>
@@ -192,13 +197,14 @@
 				{t__('common.leave_confirm_title')}
 			</Dialog.Header>
 			<p>{t__('common.leave_confirm_text')}</p>
+			<!--  -->
 			<Dialog.Footer --rz-justify-content="space-between">
-				<Button onclick={() => interceptedLeave && goto(interceptedLeave.url)}
-					>{t__('common.confirm')}</Button
-				>
-				<Button onclick={() => (interceptedLeave = null)} variant="secondary"
-					>{t__('common.cancel')}</Button
-				>
+				<Button onclick={() => interceptedLeave && goto(interceptedLeave.url)}>
+					{t__('common.confirm')}
+				</Button>
+				<Button onclick={() => (interceptedLeave = null)} variant="secondary">
+					{t__('common.cancel')}
+				</Button>
 			</Dialog.Footer>
 		</Dialog.Content>
 	</Dialog.Root>

package/dist/panel/components/ui/card-resource/card-resource.svelte

@@ -18,9 +18,11 @@
 
 	const isUpload = $derived('mimeType' in resource);
 	const isImage = $derived(
-		resource._thumbnail || (isUpload && resource.mimeType!.includes('image'))
+		resource._thumbnail || (isUpload && resource.mimeType?.includes('image'))
+	);
+	const Icon = $derived(
+		isUpload && resource.mimeType ? mimeTypeToIcon(resource.mimeType) : FileIcon
 	);
-	const Icon = $derived(isUpload ? mimeTypeToIcon(resource.mimeType!) : FileIcon);
 </script>
 
 <div class="rz-card-resource">
@@ -51,14 +53,19 @@
 	</button>
 </div>
 
-<style>
-	:root {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+:root {
 		--rz-ressource-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-4)));
 		--rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-2)));
 		--rz-border-radius: var(--rz-radius-md);
 	}
 
-	.rz-card-resource {
+.rz-card-resource {
 		--padding: var(--rz-card-padding, var(--rz-size-2));
 		--rz-size: var(--rz-thumbnail-size, var(--rz-size-20));
 		background-color: var(--rz-ressource-card-bg);
@@ -71,7 +78,7 @@
 		max-width: 400px;
 	}
 
-	.rz-card-resource__thumbnail {
+.rz-card-resource__thumbnail {
 		width: var(--rz-size);
 		height: var(--rz-size);
 		flex-shrink: 0;
@@ -83,19 +90,19 @@
 		border-radius: var(--rz-radius-md);
 	}
 
-	.rz-card-resource__image {
+.rz-card-resource__image {
 		height: 100%;
 		width: 100%;
 		-o-object-fit: cover;
 		   object-fit: cover;
 	}
 
-	.rz-card-resource__info {
+.rz-card-resource__info {
 		margin-top: var(--rz-size-3);
 		padding-right: 2rem;
 	}
 
-	.rz-card-resource__title {
+.rz-card-resource__title {
 		font-variation-settings: 'wght' 600;
 		font-weight: 600;
 		display: flex;
@@ -109,11 +116,11 @@
 		}
 	}
 
-	.rz-card-resource__info-text {
+.rz-card-resource__info-text {
 		font-size: var(--rz-text-sm);
 	}
 
-	.rz-card-resource__remove {
+.rz-card-resource__remove {
 		position: absolute;
 		color: hsl(var(--rz-color-fg));
 		right: var(--rz-size-2);

package/dist/panel/components/ui/dialog/dialog-content.css

@@ -17,8 +17,8 @@
 
 	&.rz-dialog-content--xl {
 		height: calc(100vh - 4 * var(--gutter));
-		overflow-y: auto;
 		top: 50%;
+		grid-template-rows: 1fr;
 	}
 }
 
@@ -45,11 +45,11 @@
 	border-radius: var(--rz-radius-sm);
 	opacity: 0.7;
 	transition: opacity 0.2s;
+	z-index: 20;
 }
 
 [data-dialog-close]:focus {
 	outline: none;
-	/* --rz-ring-offset-2: 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));

package/dist/panel/components/ui/dialog/dialog-content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { X } from '@lucide/svelte';
 	import {
 		Dialog as DialogPrimitive,
 		type DialogContentSnippetProps,
@@ -35,9 +34,6 @@
 		class="rz-dialog-content rz-dialog-content--{size} {className}"
 		{...restProps}
 	>
-		<Dialog.Close>
-			<X size="18" />
-		</Dialog.Close>
 		{@render children?.()}
 	</DialogPrimitive.Content>
 </Dialog.Portal>

package/dist/panel/components/ui/input/input.svelte

@@ -99,7 +99,6 @@ input.rz-input:is(:-webkit-autofill, :autofill):focus {
 
 .rz-input:focus-visible {
 		outline: none;
-		/* --rz-ring-offset: 1px; */
 		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));

package/dist/panel/components/ui/nav/Nav.svelte

@@ -83,9 +83,9 @@
 		--rz-nav-button-height: var(--rz-size-12);
 		--rz-nav-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
 
-		--rz-nav-button-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-3)));
-		--rz-nav-group-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-2)));
-		--rz-nav-group-border-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+		--rz-nav-button-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-2)));
+		--rz-nav-group-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-1)));
+		--rz-nav-group-border-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-2)));
 	}
 
 	.rz-nav {

package/dist/panel/components/ui/sonner/sonner.css

@@ -1,4 +1,4 @@
-.rz-toaster__toast {
+.rz-toaster__toast[data-sonner-toast][data-sonner-toast][data-styled='true'] {
 	background-color: hsl(var(--rz-color-bg));
 	border: var(--rz-border);
 	color: var(--rz-gray-2);

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

@@ -506,15 +506,14 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
                 }
                 return applyAction({ type: 'redirect', location: redirect, status: 301 });
             }
-            toast.success(message);
             // Assign document
             doc = (data?.document || doc);
+            toast.success(message);
             if (nestedLevel === 0) {
                 await invalidateAll();
                 initialDoc = doc;
             }
             else {
-                toast.success(t__('common.doc_created'));
                 apiProxy.invalidateAll();
                 // Do not redirect on creation if it's a nested form
                 // the form will auto close and we are back to the parent

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rimecms",
-	"version": "0.26.1",
+	"version": "0.26.3",
 	"homepage": "https://github.com/bienbiendev/rime",
 	"scripts": {
 		"dev": "vite dev",
@@ -26,7 +26,7 @@
 	"license": "MIT",
 	"type": "module",
 	"bin": {
-		"rime": "./dist/core/dev/cli/index.js"
+		"rime": "dist/core/dev/cli/index.js"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",