rimecms 0.25.14 → 0.26.0

package/dist/adapter-sqlite/where.js

@@ -27,12 +27,16 @@ export const buildWhereParam = ({ query, slug, db, locale, tables, configCtx })
     const buildCondition = (conditionObject) => {
         // Handle nested AND conditions
         if ('and' in conditionObject && Array.isArray(conditionObject.and)) {
-            const subConditions = conditionObject.and.map((condition) => buildCondition(condition)).filter(Boolean);
+            const subConditions = conditionObject.and
+                .map((condition) => buildCondition(condition))
+                .filter(Boolean);
             return subConditions.length ? and(...subConditions) : false;
         }
         // Handle nested OR conditions
         if ('or' in conditionObject && Array.isArray(conditionObject.or)) {
-            const subConditions = conditionObject.or.map((condition) => buildCondition(condition)).filter(Boolean);
+            const subConditions = conditionObject.or
+                .map((condition) => buildCondition(condition))
+                .filter(Boolean);
             return subConditions.length ? or(...subConditions) : false;
         }
         conditionObject = normalizedForVersion(conditionObject, slug);
@@ -130,7 +134,10 @@ export const buildWhereParam = ({ query, slug, db, locale, tables, configCtx })
                 return eq(table.id, '-1');
             }
             // Subquery of related document ids that match the property condition
-            const matchingRelatedIds = db.select({ id: relatedTable.id }).from(relatedTable).where(relatedCondition);
+            const matchingRelatedIds = db
+                .select({ id: relatedTable.id })
+                .from(relatedTable)
+                .where(relatedCondition);
             const relsTable = getTable(`${slug}Rels`);
             // Join relation rows to documents by matching the related id and the relation path
             const ownersWithMatching = db
@@ -295,7 +302,8 @@ function getConditionMembers(obj) {
 }
 // Determine if we should handle versioned hierarchy fields
 function shouldHandleVersionedHierarchyFields(slug, sqlColumn) {
-    return hasVersionsSuffix(slug) && (sqlColumn === '_parent' || sqlColumn === '_position' || sqlColumn === '_path');
+    return (hasVersionsSuffix(slug) &&
+        (sqlColumn === '_parent' || sqlColumn === '_position' || sqlColumn === '_path'));
 }
 // Normalize condition object for versioned collections
 function normalizedForVersion(conditionObject, slug) {

package/dist/core/collections/api/get.server.js

@@ -14,8 +14,12 @@ export default function (slug) {
             .toArray().length;
         const collectionAPI = rime.collection(slug);
         function buildSelect(params) {
-            const paramSelect = params.get(PARAMS.SELECT) ? params.get(PARAMS.SELECT).split(',') : undefined;
-            if (paramSelect && paramSelect.includes('title') && !paramSelect.includes(collectionAPI.config.asTitle)) {
+            const paramSelect = params.get(PARAMS.SELECT)
+                ? params.get(PARAMS.SELECT).split(',')
+                : undefined;
+            if (paramSelect &&
+                paramSelect.includes('title') &&
+                !paramSelect.includes(collectionAPI.config.asTitle)) {
                 paramSelect.push(collectionAPI.config.asTitle);
             }
             return paramSelect;

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

@@ -35,7 +35,7 @@ export default {
 	leave_confirm_text: 'Change that you made will be lost',
 	live_in_sync: 'Establishing connection with container',
 	newPassword: 'New password',
-	no_document: 'No $1 yet',
+	no_document: 'No $1 found',
 	or: 'or',
 	passwordResetLinkSent: 'An email has been sent to $1 with instructions to reset the password',
 	publish: 'publish',

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

@@ -8,5 +8,7 @@ declare namespace _default {
     let create_one: string;
     let generate_from: string;
     let get_data_from: string;
+    let filter_by_type: string;
+    let all_types: string;
 }
 export default _default;

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

@@ -7,5 +7,7 @@ export default {
 	delete_block: 'Delete block',
 	create_one: 'Create one $1',
 	generate_from: 'Generate from $1',
-	get_data_from: 'Get data from'
+	get_data_from: 'Get data from',
+	filter_by_type: 'Filter by type',
+	all_types: 'All types'
 };

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

@@ -8,5 +8,7 @@ declare namespace _default {
     let create_one: string;
     let generate_from: string;
     let get_data_from: string;
+    let filter_by_type: string;
+    let all_types: string;
 }
 export default _default;

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

@@ -7,5 +7,7 @@ export default {
 	delete_block: 'Supprimer le bloc',
 	create_one: 'Créer {un|une} $1',
 	generate_from: 'Générer à partir du champs $1',
-	get_data_from: 'Importer les données'
+	get_data_from: 'Importer les données',
+	filter_by_type: 'Filtrer par type',
+	all_types: 'Tous les types'
 };

package/dist/fields/link/component/Link.svelte

@@ -105,7 +105,10 @@
 	<Field.Label {config} for={path || config.name} />
 
 	<div class="rz-link-field__wrap">
-		<div class="rz-link-field__row" style="--rz-corner-radius:{hasTarget ? 0 : 'var(--rz-radius-md)'}">
+		<div
+			class="rz-link-field__row"
+			style="--rz-corner-radius:{hasTarget ? 0 : 'var(--rz-radius-md)'}"
+		>
 			<!-- Type -->
 			{#if linkTypes.length === 1}
 				<Button class="rz-link__type-single" variant="secondary">

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

@@ -1,17 +1,36 @@
 <script lang="ts">
 	import { apiUrl } from '../../../../core/api/index.js';
 	import type { Directory } from '../../../../core/collections/upload/upload';
+	import { t__ } from '../../../../core/i18n/index.js';
 	import { withDirectoriesSuffix } from '../../../../core/naming.js';
-	import Folder from '../../../../panel/components/sections/collection/grid/grid-item/Folder.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';
-	import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
+	import * as Dialog from '../../../../panel/components/ui/dialog/index.js';
+	import * as DropdownMenu from '../../../../panel/components/ui/dropdown-menu/index.js';
+	import Input from '../../../../panel/components/ui/input/input.svelte';
 	import { API_PROXY, getAPIProxyContext } from '../../../../panel/context/api-proxy.svelte.js';
 	import type { BuiltCollection, UploadDoc } from '../../../../types';
+	import { ListFilter, Search } from '@lucide/svelte';
 
 	type Props = { open: boolean; addValue: (item: string) => void; config: BuiltCollection };
 	let { open = $bindable(), addValue, config }: Props = $props();
 
 	let path = $state('root');
+	let searchValue = $state('');
+	let typeFilterValue = $state('');
+	let initialDocs = $state<UploadDoc[]>([]);
+
+	const isFiltered = $derived.by(() => {
+		return searchValue.trim() !== '' || typeFilterValue !== '';
+	});
+
+	const encodedMime = $derived.by(() => {
+		if (typeFilterValue) {
+			return encodeURIComponent(typeFilterValue);
+		}
+		return '';
+	});
 
 	const parentPath = $derived.by(() => {
 		if (path.includes(':')) {
@@ -23,8 +42,21 @@
 	});
 
 	const filesURL = $derived.by(() => {
-		return `${apiUrl(config.kebab)}?where[_path][equals]=${path}`;
+		if (!isFiltered) {
+			return `${apiUrl(config.kebab)}?where[_path][equals]=${path}`;
+		} else {
+			if (typeFilterValue && searchValue.trim()) {
+				return `${apiUrl(config.kebab)}?where[and][0][mimeType][equals]=${encodedMime}&where[and][1][filename][like]=%${searchValue.trim()}%`;
+			} else if (typeFilterValue) {
+				return `${apiUrl(config.kebab)}?where[mimeType][equals]=${encodedMime}`;
+			} else if (searchValue.trim()) {
+				return `${apiUrl(config.kebab)}?where[filename][like]=%${searchValue.trim()}%`;
+			} else {
+				return `${apiUrl(config.kebab)}?where[_path][equals]=${path}`;
+			}
+		}
 	});
+
 	const foldersURL = $derived.by(() => {
 		return `${apiUrl(withDirectoriesSuffix(config.kebab))}?where[parent][equals]=${path}`;
 	});
@@ -32,42 +64,115 @@
 	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
 	let files = $derived(APIProxy.getRessource<{ docs: UploadDoc[] }>(filesURL));
 	let folders = $derived(APIProxy.getRessource<{ docs: Directory[] }>(foldersURL));
+
+	$effect(() => {
+		if (!initialDocs.length && files.data?.docs.length) {
+			initialDocs = files.data.docs;
+		}
+	});
+
+	const fileTypes = $derived.by(() => {
+		if (initialDocs.length) {
+			const types = new Set(initialDocs.map((doc) => doc.mimeType));
+			return Array.from(types);
+		}
+		return [];
+	});
 </script>
 
-<Sheet.Root bind:open>
-	<Sheet.Content showCloseButton={false} side="right">
+<Dialog.Root bind:open>
+	<Dialog.Content size="xl">
 		<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}
+			<!-- Header -->
+			<div class="rz-relation-browse__header">
+				<!--  -->
+				<Input
+					icon={Search}
+					class="rz-header-search-input__input"
+					placeholder={t__('common.search', `${initialDocs.length || 0} document(s)`)}
+					type="text"
+					bind:value={searchValue}
+				/>
 
-			{#if files.data}
-				{#each files.data.docs as doc (doc.id)}
-					<button onclick={() => addValue(doc.id)}>
-						<CardDocument {doc} />
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger disabled={fileTypes.length <= 1}>
+						{#snippet child({ props })}
+							<Button variant="secondary" icon={ListFilter} {...props}>
+								{typeFilterValue || t__('fields.all_types')}
+							</Button>
+						{/snippet}
+					</DropdownMenu.Trigger>
+
+					<!-- <DropdownMenu.Portal> -->
+					<DropdownMenu.Content class="rz-link__type-content" align="start">
+						<DropdownMenu.Item onclick={() => (typeFilterValue = '')}>
+							{t__('fields.all_types')}
+						</DropdownMenu.Item>
+						{#each fileTypes as type, index (index)}
+							<DropdownMenu.Item onclick={() => (typeFilterValue = type)}>
+								{type}
+							</DropdownMenu.Item>
+						{/each}
+					</DropdownMenu.Content>
+					<!-- </DropdownMenu.Portal> -->
+				</DropdownMenu.Root>
+			</div>
+
+			<!-- Grid -->
+			<div class="rz-relation-browse__grid">
+				{#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>
-	</Sheet.Content>
-</Sheet.Root>
+	</Dialog.Content>
+</Dialog.Root>
 
 <style>
-	.rz-relation-browse {
+	.rz-relation-browse__header {
+		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);
+
+		:global {
+			.rz-dropdown-item {
+				padding: var(--rz-size-3) var(--rz-size-3);
+			}
+			.rz-input {
+				height: var(--rz-size-9);
+			}
+		}
+	}
+
+	.rz-relation-browse__grid {
 		display: grid;
+		align-self: start;
 		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+		grid-auto-rows: auto;
 		gap: var(--rz-size-4);
-		padding: var(--rz-size-4);
 	}
 
 	.rz-browse__folder {

package/dist/fields/select/component/Select.svelte

@@ -153,8 +153,13 @@
 	<Field.Hint {config} />
 </fieldset>
 
-<style>
-	.rz-select {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-select {
 		margin-bottom: var(--rz-size-2);
 		position: relative;
 
@@ -184,7 +189,7 @@
 		}
 	}
 
-	.rz-select__list {
+.rz-select__list {
 		background-color: hsl(var(--rz-input-bg));
 		border: var(--rz-border);
 		border-radius: var(--rz-radius-md);
@@ -195,19 +200,19 @@
 		padding: var(--rz-size-2) var(--rz-size-3);
 	}
 
-	.rz-select__list[data-focused] {
+.rz-select__list[data-focused] {
 		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-select__list[data-error] {
+.rz-select__list[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-select__list--readonly {
+.rz-select__list--readonly {
 		cursor: no-drop;
 	}
 </style>

package/dist/fields/slug/component/Slug.svelte

@@ -60,20 +60,25 @@
 	<Field.Label {config} for={path || config.name} />
 
 	<div class="rz-slug">
-		<Hash class="rz-slug__icon" size="14" />
-
 		<Input
 			id={path || config.name}
 			placeholder={config.placeholder}
 			data-error={field.error ? '' : null}
 			type="text"
+			icon={Hash}
 			value={field.value}
 			name={path || config.name}
 			oninput={onInput}
 		/>
 
 		{#if config.slugify}
-			<Button disabled={!field.editable} onclick={generateFromField} type="button" size="sm" variant="secondary">
+			<Button
+				disabled={!field.editable}
+				onclick={generateFromField}
+				type="button"
+				size="sm"
+				variant="secondary"
+			>
 				{t__('fields.generate_from', config.slugify)}
 			</Button>
 		{/if}
@@ -88,7 +93,6 @@
 
 		:global(.rz-input) {
 			font-family: var(--rz-font-mono);
-			padding: 0 0 0 2rem;
 		}
 
 		:global(.rz-button) {

package/dist/fields/textarea/component/TextArea.svelte

@@ -28,8 +28,13 @@
 	<Field.Hint {config} />
 </fieldset>
 
-<style>
-	textarea {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+textarea {
 		field-sizing: content;
 		border: 1px solid var(--rz-input-border-color);
 		background-color: hsl(var(--rz-input-bg));
@@ -38,10 +43,8 @@
 		border-radius: var(--rz-radius-md);
 		line-height: 1.5em;
 		min-height: var(--rz-size-20);
-		padding-left: var(--rz-size-3);
-		padding-right: var(--rz-size-3);
-		padding-top: var(--rz-size-2);
-		padding-bottom: var(--rz-size-2);
+		padding-inline: var(--rz-size-3);
+		padding-block: var(--rz-size-2);
 
 		&:global([data-error]) {
 			outline: none;
@@ -51,18 +54,20 @@
 		}
 	}
 
-	textarea:disabled {
+textarea:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
-	textarea::-moz-placeholder {
+
+textarea::-moz-placeholder {
 		color: hsl(var(--rz-color-fg) / 0.5);
 	}
-	textarea::placeholder {
+
+textarea::placeholder {
 		color: hsl(var(--rz-color-fg) / 0.5);
 	}
 
-	textarea:focus-visible {
+textarea:focus-visible {
 		outline: none;
 		/* --rz-ring-offset: 1px; */
 		box-shadow:

package/dist/fields/toggle/component/Toggle.svelte

@@ -6,7 +6,6 @@
 	import type { ToggleProps } from './props';
 
 	const { path, config, form }: ToggleProps = $props();
-
 	const field = $derived(form.useField<boolean>(path, config));
 	const inputId = slugify(`${form.key}-${path}`);
 
@@ -17,7 +16,12 @@
 
 <fieldset class="rz-toggle-field {config.className || ''}" use:root={field}>
 	<div class="rz-toggle-field-wrap">
-		<Switch data-error={field.error ? '' : null} checked={field.value} {onCheckedChange} id={inputId} />
+		<Switch
+			data-error={field.error ? '' : null}
+			checked={field.value}
+			{onCheckedChange}
+			id={inputId}
+		/>
 		<Field.LabelFor {config} for={inputId} />
 	</div>
 	<Field.Hint {config} />
@@ -28,13 +32,13 @@
 		display: flex;
 		align-items: center;
 	}
+
 	.rz-toggle-field-wrap > :global(* + *) {
 		margin-left: var(--rz-size-2);
 	}
 
 	.rz-toggle-field {
-		margin-top: var(--rz-size-3);
-		margin-bottom: var(--rz-size-3);
+		margin-block: var(--rz-size-3);
 	}
 
 	.rz-toggle-field :global {

package/dist/panel/components/fields/Error.svelte

@@ -10,7 +10,10 @@
 		// subfield::error
 		const cleanError = error.split('::').at(-1) ?? '';
 		// If it's a predefined error from RimeError or RimeFormError
-		if (Object.values(RimeError).includes(cleanError) || Object.values(RimeFormError).includes(cleanError)) {
+		if (
+			Object.values(RimeError).includes(cleanError) ||
+			Object.values(RimeFormError).includes(cleanError)
+		) {
 			return t__(`errors.${cleanError}`);
 		}
 		// Otherwise return as-is (user defined message)
@@ -24,8 +27,13 @@
 	</div>
 {/if}
 
-<style>
-	.rz-field-error {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-field-error {
 		color: hsl(var(--rz-ground-6) / 1);
 		background-color: hsl(var(--rz-color-alert));
 		position: absolute;
@@ -33,10 +41,8 @@
 		top: 0;
 		border-radius: var(--rz-radius-sm);
 		font-size: var(--rz-text-xs);
-		padding-left: var(--rz-size-1);
-		padding-right: var(--rz-size-1);
-		padding-top: var(--rz-size-0-5);
-		padding-bottom: var(--rz-size-0-5);
+		padding-inline: var(--rz-size-1);
+		padding-block: var(--rz-size-0-5);
 		font-variation-settings: 'wght' 500;
 		font-weight: 500;
 	}

package/dist/panel/components/sections/collection/{grid/grid-item → folder}/Folder.svelte

@@ -29,13 +29,18 @@
 	{@render children()}
 </h3>
 
-<style>
-	:root {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+:root {
 		--rz-folder-light: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-6)));
 		--rz-folder-dark: light-dark(hsl(var(--rz-gray-10)), hsl(var(--rz-gray-4)));
 	}
 
-	h3 {
+h3 {
 		font-variation-settings: 'wght' 600;
 		font-weight: 600;
 		overflow: hidden;
@@ -46,14 +51,17 @@
 		text-align: center;
 		margin-block: var(--rz-size-3);
 	}
-	.rz-folder-svg {
+
+.rz-folder-svg {
 		aspect-ratio: 5 / 4;
 		width: 100%;
 	}
-	.rz-folder-svg path:first-child {
+
+.rz-folder-svg path:first-child {
 		fill: var(--rz-folder-dark);
 	}
-	.rz-folder-svg path:last-child {
+
+.rz-folder-svg path:last-child {
 		fill: var(--rz-folder-light);
 	}
 </style>

package/dist/panel/components/sections/collection/{grid/grid-item → folder}/FolderEdit.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { Directory } from '../../../../../../core/collections/upload/upload';
-	import type { BuiltCollectionClient } from '../../../../../../core/config/types';
-	import { t__ } from '../../../../../../core/i18n/index.js';
-	import { withDirectoriesSuffix } from '../../../../../../core/naming';
-	import RenderFields from '../../../../fields/RenderFields.svelte';
-	import Button from '../../../../ui/button/button.svelte';
-	import * as Dialog from '../../../../ui/dialog/index.js';
-	import { API_PROXY, setAPIProxyContext } from '../../../../../context/api-proxy.svelte.js';
-	import { getConfigContext } from '../../../../../context/config.svelte.js';
-	import { setDocumentFormContext } from '../../../../../context/documentForm.svelte.js';
-	import { getUserContext } from '../../../../../context/user.svelte.js';
+	import type { Directory } from '../../../../../core/collections/upload/upload';
+	import type { BuiltCollectionClient } from '../../../../../core/config/types';
+	import { t__ } from '../../../../../core/i18n/index.js';
+	import { withDirectoriesSuffix } from '../../../../../core/naming';
+	import RenderFields from '../../../fields/RenderFields.svelte';
+	import Button from '../../../ui/button/button.svelte';
+	import * as Dialog from '../../../ui/dialog/index.js';
+	import { API_PROXY, setAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
+	import { getConfigContext } from '../../../../context/config.svelte.js';
+	import { setDocumentFormContext } from '../../../../context/documentForm.svelte.js';
+	import { getUserContext } from '../../../../context/user.svelte.js';
 
 	type Props = {
 		open: boolean;

package/dist/panel/components/sections/collection/{grid/grid-item → folder}/FolderEdit.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Directory } from '../../../../../../core/collections/upload/upload';
-import type { BuiltCollectionClient } from '../../../../../../core/config/types';
+import type { Directory } from '../../../../../core/collections/upload/upload';
+import type { BuiltCollectionClient } from '../../../../../core/config/types';
 type Props = {
     open: boolean;
     folder: Directory;