rimecms 0.22.0

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

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { beforeNavigate, goto } from '$app/navigation';
+	import { isAuthConfig } from '../../../../core/collections/auth/util';
+	import { isUploadConfig } from '../../../../core/collections/upload/util/config';
+	import { t__ } from '../../../../core/i18n/index.js';
+	import type { GenericDoc } from '../../../../core/types/doc';
+	import * as Dialog from '../../ui/dialog/index.js';
+	import { getConfigContext } from '../../../context/config.svelte';
+	import {
+		setDocumentFormContext,
+		type FormSuccessData
+	} from '../../../context/documentForm.svelte';
+	import { getLocaleContext } from '../../../context/locale.svelte';
+	import { getUserContext } from '../../../context/user.svelte';
+	import RenderFields from '../../fields/RenderFields.svelte';
+	import Button from '../../ui/button/button.svelte';
+	import AuthApiKeyDialog from './AuthAPIKeyDialog.svelte';
+	import AuthFooter from './AuthFooter.svelte';
+	import CurrentlyEdited from './CurrentlyEdited.svelte';
+	import FloatingUI from './FloatingUI.svelte';
+	import Header from './Header.svelte';
+	import UploadHeader from './upload-header/UploadHeader.svelte';
+
+	type Props = {
+		doc: GenericDoc;
+		operation: 'update' | 'create';
+		class?: string;
+		onDataChange?: any;
+		onFieldFocus?: any;
+		readOnly: boolean;
+		onClose?: any;
+		nestedLevel?: number;
+		onNestedDocumentCreated?: any;
+	};
+
+	const {
+		doc: initial,
+		operation,
+		readOnly,
+		onClose,
+		onNestedDocumentCreated,
+		nestedLevel = 0,
+		onDataChange = null,
+		onFieldFocus = null,
+		class: className
+	}: Props = $props();
+
+	const { getDocumentConfig } = getConfigContext();
+	const config = getDocumentConfig({
+		prototype: initial._prototype,
+		slug: initial._type
+	});
+
+	const user = getUserContext();
+
+	let formElement = $state<HTMLFormElement>();
+
+	let interceptedLeave = $state<{ url: string } | null>(null);
+	let isRedirect = $state(false);
+
+	beforeNavigate(async ({ cancel, complete, to, type }) => {
+		const hasCHanges = Object.keys(form.changes).length > 0;
+		if (!hasCHanges) return;
+		if (isRedirect) return;
+		if (interceptedLeave) return;
+		if (!to) return;
+		cancel();
+		interceptedLeave = { url: to.url.href };
+	});
+
+	const form = setDocumentFormContext({
+		element: () => formElement,
+		initial,
+		config,
+		readOnly,
+		onNestedDocumentCreated,
+		onDataChange,
+		onFieldFocus,
+		key: `${initial._type}_${nestedLevel}`,
+		beforeRedirect: beforeRedirect
+	});
+
+	const isConfirmLeaveOpen = $derived(!!interceptedLeave);
+	const locale = getLocaleContext();
+	const liveEditing = !!onDataChange;
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (!formElement) throw Error('formElement is not defined');
+		if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+			event.preventDefault();
+			if (!form.canSubmit) return;
+			const saveButton = formElement.querySelector('button[data-submit]');
+			if (saveButton) {
+				formElement.requestSubmit(saveButton as HTMLButtonElement);
+			} else {
+				// Fallback to default submit if no specific button found
+				formElement.requestSubmit();
+			}
+		}
+	}
+
+	let apiKey = $state<string | null>('');
+
+	async function beforeRedirect(data?: FormSuccessData) {
+		const IS_API_AUTH = config.type === 'collection' && config.auth?.type === 'apiKey';
+		if (IS_API_AUTH) {
+			apiKey = data?.document?.apiKey || null;
+			return new Promise<boolean>((resolve) => {
+				function checkAndResolve() {
+					if (!apiKey) {
+						resolve(true);
+						clearInterval(intervalId);
+					}
+				}
+				const intervalId = setInterval(checkAndResolve, 100);
+			});
+		}
+		isRedirect = !!data?.redirectUrl;
+		return true;
+	}
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+{#snippet meta(label: string, value: string)}
+	<p class="rz-document__metas">
+		<span>{label} : </span>
+		{value}
+	</p>
+{/snippet}
+
+<form
+	class="rz-document {className}"
+	bind:this={formElement}
+	use:form.enhance
+	action={form.buildPanelActionUrl()}
+	enctype="multipart/form-data"
+	method="post"
+>
+	{#if !liveEditing}
+		<Header {form} {config} {onClose}></Header>
+	{/if}
+
+	{#if form.values.editedBy && form.values.editedBy !== user.attributes.id}
+		<CurrentlyEdited by={form.values.editedBy} doc={form.values} user={user.attributes} />
+	{/if}
+
+	<div class="rz-document__fields">
+		{#if config.type === 'collection' && isUploadConfig(config)}
+			<UploadHeader accept={config.upload.accept} create={operation === 'create'} {form} />
+		{/if}
+		<RenderFields fields={config.fields} {form} />
+		{#if config.type === 'collection' && isAuthConfig(config)}
+			<AuthFooter collection={config} {operation} {form} />
+		{/if}
+	</div>
+
+	{#if !form.isLive}
+		<div class="rz-document__infos">
+			{#if form.values.createdAt}
+				{@render meta(t__('common.created_at'), locale.dateFormat(form.values.createdAt))}
+			{/if}
+			{#if form.values.updatedAt}
+				{@render meta(t__('common.last_update'), locale.dateFormat(form.values.updatedAt))}
+			{/if}
+			{#if form.values.editedBy}
+				{@render meta(t__('common.edited_by'), locale.dateFormat(form.values.editedBy))}
+			{/if}
+			{#if form.values.id}
+				{@render meta('id', form.values.id)}
+			{/if}
+		</div>
+	{:else}
+		<FloatingUI {form} {onClose} />
+	{/if}
+
+	<!-- This shows the create API Key after creation, for apiKey auth type collection -->
+	{#if !form.isLive && apiKey}
+		<AuthApiKeyDialog bind:apiKey />
+	{/if}
+
+	<Dialog.Root
+		open={isConfirmLeaveOpen}
+		onOpenChange={(open) => {
+			if (!open) {
+				interceptedLeave = null;
+			}
+		}}
+	>
+		<Dialog.Content>
+			<Dialog.Header>
+				{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
+				>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+</form>
+
+<style>
+	.rz-document {
+		container: rz-document / inline-size;
+		min-height: 100vh;
+		position: relative;
+	}
+	.rz-document__fields {
+		display: grid;
+		gap: var(--rz-size-4);
+		min-height: calc(100vh - var(--rz-size-14));
+		align-content: flex-start;
+		margin-left: calc(-1 * var(--rz-fields-padding));
+		margin-right: calc(-1 * var(--rz-fields-padding));
+		padding: var(--rz-size-5) var(--rz-page-gutter);
+		padding-bottom: var(--rz-size-24);
+	}
+	.rz-document__infos {
+		border-top: var(--rz-border);
+		padding-left: var(--rz-page-gutter);
+		padding-right: var(--rz-page-gutter);
+		padding-top: var(--rz-size-6);
+		padding-bottom: var(--rz-size-6);
+	}
+	.rz-document__metas {
+		font-size: var(--rz-text-xs);
+	}
+	.rz-document__metas span {
+		font-variation-settings: 'wght' 600;
+		font-weight: 600;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { GenericDoc } from '../../../../core/types/doc';
+type Props = {
+    doc: GenericDoc;
+    operation: 'update' | 'create';
+    class?: string;
+    onDataChange?: any;
+    onFieldFocus?: any;
+    readOnly: boolean;
+    onClose?: any;
+    nestedLevel?: number;
+    onNestedDocumentCreated?: any;
+};
+declare const Document: import("svelte").Component<Props, {}, "">;
+type Document = ReturnType<typeof Document>;
+export default Document;

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { apiUrl } from '../../../../core/api/index.js';
+	import type { GenericDoc } from '../../../../core/types/doc.js';
+	import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+	import { ChevronLeft } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+	import { t__ } from '../../../../core/i18n/index.js';
+	import Button from '../../ui/button/button.svelte';
+	import LanguageSwitcher from '../../ui/language-switcher/LanguageSwitcher.svelte';
+	import ButtonSave from './ButtonSave.svelte';
+
+	type Props = { form: DocumentFormContext; onClose: any };
+	const { form, onClose }: Props = $props();
+
+	function onLocaleClick(code: string) {
+		fetch(`${apiUrl(form.config.kebab)}?where[id][equals]=${form.values.id}&select=url&locale=${code}`)
+			.then((response) => response.json())
+			.then((data: { docs: GenericDoc[] }) => {
+				if (Array.isArray(data.docs) && data.docs.length) {
+					const url = data.docs[0].url;
+					window.location.href = url + '?live=1';
+				}
+			})
+			.catch((err) => {
+				toast.error(`an error occured getting ${code} url`);
+				console.error(err);
+			});
+	}
+</script>
+
+<div class="rz-floating-ui">
+	<Button icon={ChevronLeft} onclick={onClose} variant="secondary" size="icon"></Button>
+	{#if form.config.versions && form.config.versions.draft && form.values.status === 'published'}
+		<ButtonSave
+			label={t__('common.save')}
+			class="rz-floating-ui__save"
+			disabled={!form.canSubmit}
+			processing={form.processing}
+		/>
+	{:else if form.config.versions && form.config.versions.draft && form.values.status === 'draft'}
+		<ButtonSave
+			label={t__('common.save_draft')}
+			class="rz-floating-ui__save"
+			disabled={!form.canSubmit}
+			processing={form.processing}
+			data-draft
+		/>
+	{:else}
+		<ButtonSave
+			label={t__('common.save')}
+			class="rz-floating-ui__save"
+			disabled={!form.canSubmit}
+			processing={form.processing}
+		/>
+	{/if}
+
+	<LanguageSwitcher onLocalClick={onLocaleClick} />
+</div>
+
+<style>
+	.rz-floating-ui {
+		position: sticky;
+		width: calc(100% - var(--rz-size-4));
+		bottom: var(--rz-size-2);
+		margin-left: var(--rz-size-2);
+		margin-right: var(--rz-size-2);
+		height: var(--rz-size-14);
+		background-color: hsl(var(--rz-color-bg));
+		padding: var(--rz-size-2);
+		border-radius: var(--rz-radius-md);
+		z-index: 1000;
+		display: flex;
+		gap: var(--rz-size-2);
+
+		:global(.rz-floating-ui__save) {
+			flex: 1;
+		}
+	}
+</style>

package/dist/panel/components/sections/document/FloatingUI.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+type Props = {
+    form: DocumentFormContext;
+    onClose: any;
+};
+declare const FloatingUi: import("svelte").Component<Props, {}, "">;
+type FloatingUi = ReturnType<typeof FloatingUi>;
+export default FloatingUi;

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation';
+	import type { BuiltArea, BuiltCollection } from '../../../../core/config/types';
+	import { t__ } from '../../../../core/i18n/index.js';
+	import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+	import { ExternalLink, PencilRuler, X } from '@lucide/svelte';
+	import { Button } from '../../ui/button';
+	import LanguageSwitcher from '../../ui/language-switcher/LanguageSwitcher.svelte';
+	import PageHeader from '../../ui/page-header/PageHeader.svelte';
+	import ButtonSave from './ButtonSave.svelte';
+	import ButtonStatus from './ButtonStatus.svelte';
+	import Settings from './Settings.svelte';
+
+	// Props
+	type Props = {
+		onClose?: any;
+		form: DocumentFormContext;
+		config: BuiltArea | BuiltCollection;
+	};
+	const { form, onClose, config }: Props = $props();
+
+	const onCloseIsDefined = !!onClose;
+	const buttonLabel = $derived(form.values.id ? t__('common.save') : t__('common.create'));
+</script>
+
+{#snippet topLeft()}
+	<Button onclick={() => onClose()} icon={X} variant="text">{t__('common.close')}</Button>
+{/snippet}
+
+<PageHeader topLeft={onCloseIsDefined ? topLeft : undefined}>
+	{#snippet title()}
+		{form.title}
+	{/snippet}
+
+	{#snippet bottomRight()}
+		{#if form.values.url}
+			<Button icon={ExternalLink} target="_blank" href={form.values.url} size="icon-sm" variant="secondary" />
+		{/if}
+
+		{#if config.live && form.values._live}
+			<Button
+				size="icon-sm"
+				variant="secondary"
+				disabled={form.readOnly}
+				class="rz-button-live"
+				icon={PencilRuler}
+				href={form.values._live}
+			></Button>
+		{/if}
+
+		{#if form.values.id}
+			<Settings {form} />
+		{/if}
+
+		{#if !form.config.versions}
+			<!-- scenario 1: no versions -->
+			<ButtonSave size="sm" label={buttonLabel} disabled={!form.canSubmit} processing={form.processing} />
+		{:else if form.config.versions && !form.config.versions.draft}
+			<!-- scenario 2: versions without draft -->
+			<ButtonSave
+				size="sm"
+				label={buttonLabel}
+				disabled={!form.canSubmit}
+				processing={form.processing}
+				data-draft
+				data-submit
+			/>
+		{:else if form.config.versions && form.config.versions.draft && form.values.status === 'published'}
+			{#if form.values.id}
+				<ButtonStatus {form} />
+			{/if}
+
+			<!-- scenario 3: versions and draft, on a published doc -->
+			<ButtonSave
+				size="sm"
+				disabled={!form.canSubmit}
+				processing={form.processing}
+				label={buttonLabel}
+				data-status="published"
+				data-submit
+			/>
+		{:else if form.config.versions && form.config.versions.draft && form.values.status === 'draft'}
+			{#if form.values.id}
+				<ButtonStatus {form} />
+			{/if}
+			<!-- scenario 4: versions and draft, on a draft doc -->
+
+			<!-- PUBLISH -->
+			<ButtonSave size="sm" disabled={!form.canSubmit} processing={form.processing} label={buttonLabel} data-submit />
+		{/if}
+	{/snippet}
+
+	{#snippet topRight()}
+		<LanguageSwitcher onLocalClick={invalidateAll} />
+	{/snippet}
+</PageHeader>

package/dist/panel/components/sections/document/Header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BuiltArea, BuiltCollection } from '../../../../core/config/types';
+import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+type Props = {
+    onClose?: any;
+    form: DocumentFormContext;
+    config: BuiltArea | BuiltCollection;
+};
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

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

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { apiUrl } from '../../../../core/api/index.js';
+	import { PARAMS, VERSIONS_STATUS } from '../../../../core/constant.js';
+	import * as Dialog from '../../ui/dialog/index.js';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+	import { getLocaleContext } from '../../../context/locale.svelte.js';
+	import { panelUrl } from '../../../util/url.js';
+	import { trycatchFetch } from '../../../../util/function.js';
+	import { Copy, History, Import, Pickaxe, Settings, Trash2 } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+	import { t__ } from '../../../../core/i18n/index.js';
+	import Button from '../../ui/button/button.svelte';
+
+	type Props = { form: DocumentFormContext };
+
+	const { form }: Props = $props();
+
+	let deleteConfirmOpen = $state(false);
+	let dupplicateConfirmOpen = $state(false);
+	const isCollection = $derived(form.config.type === 'collection');
+	const allowDuplicate = $derived(form.config.type === 'collection' && !form.config.auth && !form.config.upload);
+	const locale = getLocaleContext();
+
+	function handleNewDraft() {
+		if (form.readOnly || !form.element) return;
+		const saveButton = form.element.querySelector('button[data-submit]') as HTMLButtonElement;
+		const initialSaveButtonDataDraft = saveButton.dataset.draft;
+		if (saveButton) {
+			saveButton.dataset.draft = 'true';
+			saveButton.dataset.status = VERSIONS_STATUS.DRAFT;
+			form.element.requestSubmit(saveButton as HTMLButtonElement);
+		} else {
+			// Fallback to default submit if no specific button found
+			form.element.requestSubmit();
+		}
+		saveButton.dataset.draft = initialSaveButtonDataDraft;
+	}
+
+	const isVersionPage = $derived(page.url.pathname.includes('/versions'));
+
+	function handleViewVersion() {
+		const basUrl = isCollection ? panelUrl(form.config.kebab, form.values.id) : panelUrl(form.config.kebab);
+		return goto(`${basUrl}/versions?${PARAMS.VERSION_ID}=${form.values.versionId}`);
+	}
+
+	async function handleDuplicate() {
+		if (Object.keys(form.changes).length) {
+			dupplicateConfirmOpen = true;
+		} else {
+			duplicate();
+		}
+	}
+
+	async function handleDelete() {
+		await fetch(`${apiUrl(form.config.kebab)}/${form.values.id}`, {
+			method: 'DELETE'
+		}).then((response) => {
+			if (response.ok) {
+				toast.success(t__('common.doc_deleted'));
+				goto(panelUrl(form.config.kebab));
+			} else {
+				toast.error(t__('error.generic'));
+			}
+		});
+	}
+
+	async function duplicate() {
+		const url = `${apiUrl(form.config.kebab, form.values.id)}/duplicate`;
+
+		const [error, success] = await trycatchFetch(url, {
+			method: 'POST'
+		});
+
+		if (error) {
+			toast.error(error.message);
+			return console.log(error);
+		}
+		const { id } = await success.json();
+		toast.success(t__('common.duplicate_success'));
+		await goto(panelUrl(form.config.kebab, form.values.id));
+	}
+
+	const shouldShowSettings = $derived.by(() => {
+		if (form.config.versions) return true;
+		if (locale.defaultCode && locale.code !== locale.defaultCode) return true;
+		if (form.config.type === 'collection') return true;
+	});
+</script>
+
+{#if shouldShowSettings}
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			{#snippet child({ props })}
+				<Button icon={Settings} size="icon-sm" variant="secondary" {...props} />
+			{/snippet}
+		</DropdownMenu.Trigger>
+
+		<DropdownMenu.Portal>
+			<DropdownMenu.Content align="end">
+				{#if form.config.versions}
+					<DropdownMenu.Item disabled={isVersionPage} onclick={() => handleViewVersion()}>
+						<History size="12" />
+						{t__('common.versions_history')}
+					</DropdownMenu.Item>
+				{/if}
+
+				{#if form.config.versions && form.config.versions.draft && form.values.status === VERSIONS_STATUS.PUBLISHED}
+					<DropdownMenu.Item onclick={() => handleNewDraft()}>
+						<Pickaxe size="12" />
+						{t__('common.save_new_draft')}
+					</DropdownMenu.Item>
+				{/if}
+
+				{#if form.config.type === 'collection'}
+					{#if allowDuplicate}
+						<DropdownMenu.Item onclick={handleDuplicate}>
+							<Copy size="12" />
+							{t__('common.duplicate')}
+						</DropdownMenu.Item>
+					{/if}
+				{/if}
+
+				{#if locale.defaultCode && locale.code !== locale.defaultCode}
+					<DropdownMenu.Item onclick={() => form.importDataFromDefaultLocale()}>
+						<Import size="12" />
+						{t__('common.import_default_locale', locale.defaultCode)}
+					</DropdownMenu.Item>
+				{/if}
+
+				{#if form.config.type === 'collection'}
+					<DropdownMenu.Item onclick={() => (deleteConfirmOpen = true)}>
+						<Trash2 size="12" />
+						{t__('common.delete')}
+					</DropdownMenu.Item>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
+	</DropdownMenu.Root>
+
+	<Dialog.Root bind:open={deleteConfirmOpen}>
+		<Dialog.Content>
+			<Dialog.Header>
+				{t__('common.delete_dialog_title')}
+			</Dialog.Header>
+			<p>{t__('common.delete_dialog_text')}</p>
+			<Dialog.Footer --rz-justify-content="space-between">
+				<Button onclick={handleDelete}>Delete</Button>
+				<Button onclick={() => (deleteConfirmOpen = false)} variant="secondary">Cancel</Button>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+
+	<Dialog.Root bind:open={dupplicateConfirmOpen}>
+		<Dialog.Content>
+			<Dialog.Header>
+				{t__('common.unsaved_dialog_title')}
+			</Dialog.Header>
+			<p>{t__('common.unsaved_dialog_text')}</p>
+			<Dialog.Footer --rz-justify-content="space-between">
+				<Button onclick={duplicate}>Duplicate</Button>
+				<Button onclick={() => (dupplicateConfirmOpen = false)} variant="secondary">Cancel</Button>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+{/if}

package/dist/panel/components/sections/document/Settings.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocumentFormContext } from '../../../context/documentForm.svelte';
+import { Settings } from '@lucide/svelte';
+type Props = {
+    form: DocumentFormContext;
+};
+declare const Settings: import("svelte").Component<Props, {}, "">;
+type Settings = ReturnType<typeof Settings>;
+export default Settings;