rimecms 0.26.7 → 0.26.9

package/dist/panel/components/sections/collection/bulk-upload/DropZone.svelte

@@ -1,178 +1,185 @@
 <script lang="ts">
-	import { PARAMS } from '../../../../../core/constant';
-	import { t__ } from '../../../../../core/i18n/index.js';
-	import SpinLoader from '../../../ui/spin-loader/SpinLoader.svelte';
-	import type { CollectionContext } from '../../../../context/collection.svelte';
-	import { trycatch, trycatchFetch } from '../../../../../util/function.js';
-
-	type Props = {
-		collection: CollectionContext;
-		onStart: () => void;
-		onFinish: (hasError: boolean) => void;
-	};
-
-	let { collection, onFinish, onStart }: Props = $props();
-
-	let input = $state<HTMLInputElement>();
-	let dragOver = $state(false);
-	let processingFile = $state(false);
-	let files = $state<File[]>([]);
-	let currentlyProcessing = $state('');
-	let processed = $state(0);
-	let errors = $state<string[]>([]);
-
-	const handleDragOver = (event: DragEvent) => {
-		dragOver = true;
-		event.preventDefault();
-	};
-
-	const handleDragLeave = (event: DragEvent) => {
-		dragOver = false;
-		event.preventDefault();
-	};
-
-	const handleDrop = (event: DragEvent) => {
-		dragOver = false;
-		event.preventDefault();
-
-		if ('dataTransfer' in event && event.dataTransfer && event.dataTransfer.files) {
-			files = Array.from(event.dataTransfer.files);
-			processFiles(files);
-		}
-	};
-
-	async function processFiles(files: File[]) {
-		onStart();
-		for (const file of files) {
-			currentlyProcessing = file.name;
-			const [conversionError, base64] = await trycatch(getBase64(file));
-
-			if (conversionError) {
-				errors.push(file.name);
-				continue;
-			}
-
-			const createUploadURL = `${collection.apiUrl}?${PARAMS.SKIP_VALIDATION}=true`;
-			const [error, success] = await trycatchFetch(createUploadURL, {
-				method: 'POST',
-				body: JSON.stringify({
-					_path: collection.upload.currentPath,
-					file: {
-						base64,
-						filename: file.name
-					}
-				})
-			});
-			if (error) {
-				errors.push(file.name);
-			} else if (success) {
-				processed++;
-			}
-		}
-
-		onFinish(!!errors.length);
-	}
-
-	async function getBase64(file: File): Promise<string> {
-		return new Promise((resolve, reject) => {
-			const reader = new FileReader();
-			reader.onload = () => {
-				const result = reader.result;
-				if (typeof result === 'string') {
-					resolve(result);
-				} else {
-					reject(new Error('Failed to read file as string'));
-				}
-			};
-			reader.readAsDataURL(file);
-		});
-	}
-
-	const dragOverClassModifier = $derived(dragOver ? 'rz-bulk-dropzone--dragover' : '');
+  import { PARAMS } from '../../../../../core/constant';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import SpinLoader from '../../../ui/spin-loader/SpinLoader.svelte';
+  import type { CollectionContext } from '../../../../context/collection.svelte';
+  import { trycatch, trycatchFetch } from '../../../../../util/function.js';
+
+  type Props = {
+    collection: CollectionContext;
+    onStart: () => void;
+    onFinish: (hasError: boolean) => void;
+  };
+
+  let { collection, onFinish, onStart }: Props = $props();
+
+  let input = $state<HTMLInputElement>();
+  let dragOver = $state(false);
+  let processingFile = $state(false);
+  let files = $state<File[]>([]);
+  let currentlyProcessing = $state('');
+  let processed = $state(0);
+  let errors = $state<string[]>([]);
+
+  const handleDragOver = (event: DragEvent) => {
+    dragOver = true;
+    event.preventDefault();
+  };
+
+  const handleDragLeave = (event: DragEvent) => {
+    dragOver = false;
+    event.preventDefault();
+  };
+
+  const handleDrop = (event: DragEvent) => {
+    dragOver = false;
+    event.preventDefault();
+
+    if ('dataTransfer' in event && event.dataTransfer && event.dataTransfer.files) {
+      files = Array.from(event.dataTransfer.files);
+      processFiles(files);
+    }
+  };
+
+  async function processFiles(files: File[]) {
+    onStart();
+    for (const file of files) {
+      currentlyProcessing = file.name;
+      const [conversionError, base64] = await trycatch(getBase64(file));
+
+      if (conversionError) {
+        errors.push(file.name);
+        continue;
+      }
+
+      const createUploadURL = `${collection.apiUrl}?${PARAMS.SKIP_VALIDATION}=true`;
+      const [error, success] = await trycatchFetch(createUploadURL, {
+        method: 'POST',
+        body: JSON.stringify({
+          _path: collection.upload.currentPath,
+          file: {
+            base64,
+            filename: file.name
+          }
+        })
+      });
+      if (error) {
+        errors.push(file.name);
+      } else if (success) {
+        processed++;
+      }
+    }
+
+    onFinish(!!errors.length);
+  }
+
+  async function getBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result;
+        if (typeof result === 'string') {
+          resolve(result);
+        } else {
+          reject(new Error('Failed to read file as string'));
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  const dragOverClassModifier = $derived(dragOver ? 'rz-bulk-dropzone--dragover' : '');
 </script>
 
 {#if files.length}
-	<div class="rz-bulk-infos">
-		<div class="rz-bulk-infos__current"><SpinLoader />{currentlyProcessing}</div>
-		<div class="rz-bulk-infos__processed">
-			{processed} / {files.length} created<br />
-		</div>
-		{#if errors.length}
-			<div class="rz-bulk-infos__errors">
-				{errors.length} errors.
-			</div>
-		{/if}
-	</div>
+  <div class="rz-bulk-infos">
+    <div class="rz-bulk-infos__current"><SpinLoader />{currentlyProcessing}</div>
+    <div class="rz-bulk-infos__processed">
+      {processed} / {files.length} created<br />
+    </div>
+    {#if errors.length}
+      <div class="rz-bulk-infos__errors">
+        {errors.length} errors.
+      </div>
+    {/if}
+  </div>
 {:else}
-	<label
-		for="file"
-		class="rz-bulk-dropzone {dragOverClassModifier}"
-		ondragover={handleDragOver}
-		ondragleave={handleDragLeave}
-		ondrop={handleDrop}
-	>
-		<p>{t__('common.drop_files')} {t__('common.or')} <strong>{t__('common.browse')}</strong></p>
-		{#if collection.config.upload?.accept}
-			<p class="rz-bulk-dropzone__accept">{collection.config.upload.accept.join(', ')} accepted</p>
-		{/if}
-
-		<input disabled={processingFile} bind:this={input} id="file" name="file" type="file" placeholder="upload" />
-	</label>
+  <label
+    for="file"
+    class="rz-bulk-dropzone {dragOverClassModifier}"
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
+  >
+    <p>{t__('common.drop_files')} {t__('common.or')} <strong>{t__('common.browse')}</strong></p>
+    {#if collection.config.upload?.accept}
+      <p class="rz-bulk-dropzone__accept">{collection.config.upload.accept.join(', ')} accepted</p>
+    {/if}
+
+    <input
+      disabled={processingFile}
+      bind:this={input}
+      id="file"
+      name="file"
+      type="file"
+      placeholder="upload"
+    />
+  </label>
 {/if}
 
 <style>
-	.rz-bulk-dropzone {
-		display: grid;
-		cursor: pointer;
-		height: var(--rz-size-32);
-		place-content: center;
-		border-radius: var(--rz-radius-lg);
-		border: 2px dashed light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-6)));
-		background: transparent;
-		text-align: center;
-		font-size: var(--rz-text-sm);
-	}
-
-	.rz-bulk-dropzone__processing {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-2);
-	}
-
-	.rz-bulk-dropzone:focus-visible {
-		outline: none;
-		--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));
-	}
-
-	.rz-bulk-dropzone--dragover {
-		border-color: hsl(var(--rz-color-ring) / 1);
-	}
-
-	.rz-bulk-dropzone input {
-		display: none;
-	}
-
-	.rz-bulk-dropzone__accept {
-		opacity: 0.5;
-		font-size: var(--rz-text-xs);
-	}
-
-	.rz-bulk-infos__current {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-2);
-		margin-bottom: var(--rz-size-2);
-	}
-
-	.rz-bulk-infos__errors {
-		color: hsl(var(--rz-color-error));
-	}
-
-	.rz-bulk-infos__processed {
-		font-variation-settings: 'wght' 500;
-		font-weight: 500;
-	}
+  .rz-bulk-dropzone {
+    display: grid;
+    cursor: pointer;
+    height: var(--rz-size-32);
+    place-content: center;
+    border-radius: var(--rz-radius-lg);
+    border: 2px dashed light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-6)));
+    background: transparent;
+    text-align: center;
+    font-size: var(--rz-text-sm);
+  }
+
+  .rz-bulk-dropzone__processing {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+  }
+
+  .rz-bulk-dropzone:focus-visible {
+    outline: none;
+    --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));
+  }
+
+  .rz-bulk-dropzone--dragover {
+    border-color: hsl(var(--rz-color-ring) / 1);
+  }
+
+  .rz-bulk-dropzone input {
+    display: none;
+  }
+
+  .rz-bulk-dropzone__accept {
+    opacity: 0.5;
+    font-size: var(--rz-text-xs);
+  }
+
+  .rz-bulk-infos__current {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    margin-bottom: var(--rz-size-2);
+  }
+
+  .rz-bulk-infos__errors {
+    color: hsl(var(--rz-color-error));
+  }
+
+  .rz-bulk-infos__processed {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
 </style>

package/dist/panel/components/sections/collection/folder/Folder.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = { children: Snippet };
-	const { children }: Props = $props();
+  type Props = { children: Snippet };
+  const { children }: Props = $props();
 </script>
 
 <svg
-	class="rz-folder-svg"
-	version="1.1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	viewBox="0 0 500 400"
-	xml:space="preserve"
+  class="rz-folder-svg"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 500 400"
+  xml:space="preserve"
 >
-	<path
-		d="M465.4,400H34.6C15.5,400,0,384.5,0,365.4V34.6C0,15.5,15.5,0,34.6,0c0,0,69,0,103,0c43.6,0,40.7,40,80.9,40
+  <path
+    d="M465.4,400H34.6C15.5,400,0,384.5,0,365.4V34.6C0,15.5,15.5,0,34.6,0c0,0,69,0,103,0c43.6,0,40.7,40,80.9,40
 		c27.6,0,247,0,247,0c19.1,0,34.6,15.5,34.6,34.6v290.9C500,384.5,484.5,400,465.4,400z"
-	/>
+  />
 
-	<path
-		d="M465.4,400H34.6C15.5,400,0,384.5,0,365.4V106.5C0,87.4,15.5,72,34.6,72h430.9c19.1,0,34.6,15.5,34.6,34.6
+  <path
+    d="M465.4,400H34.6C15.5,400,0,384.5,0,365.4V106.5C0,87.4,15.5,72,34.6,72h430.9c19.1,0,34.6,15.5,34.6,34.6
 		v258.9C500,384.5,484.5,400,465.4,400z"
-	/>
+  />
 </svg>
 <h3>
-	{@render children()}
+  {@render children()}
 </h3>
 
 <style>/**************************************/
@@ -36,32 +36,32 @@
 /**************************************/
 
 :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)));
-	}
+    --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 {
-		font-variation-settings: 'wght' 600;
-		font-weight: 600;
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
-		font-size: var(--rz-text-sm);
-		text-align: center;
-		margin-block: var(--rz-size-3);
-	}
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    font-size: var(--rz-text-sm);
+    text-align: center;
+    margin-block: var(--rz-size-3);
+  }
 
 .rz-folder-svg {
-		aspect-ratio: 5 / 4;
-		width: 100%;
-	}
+    aspect-ratio: 5 / 4;
+    width: 100%;
+  }
 
 .rz-folder-svg path:first-child {
-		fill: var(--rz-folder-dark);
-	}
+    fill: var(--rz-folder-dark);
+  }
 
 .rz-folder-svg path:last-child {
-		fill: var(--rz-folder-light);
-	}
+    fill: var(--rz-folder-light);
+  }
 </style>

package/dist/panel/components/sections/collection/folder/FolderEdit.svelte

@@ -1,67 +1,67 @@
 <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;
-		folder: Directory;
-		collection: BuiltCollectionClient;
-	};
-	let { folder, collection, open = $bindable() }: Props = $props();
+  type Props = {
+    open: boolean;
+    folder: Directory;
+    collection: BuiltCollectionClient;
+  };
+  let { folder, collection, open = $bindable() }: Props = $props();
 
-	setAPIProxyContext(API_PROXY.DOCUMENT);
-	let formElement = $state<HTMLFormElement>();
-	const user = getUserContext();
-	const configCtx = getConfigContext();
-	// svelte-ignore state_referenced_locally
-	const config = configCtx.getCollection(withDirectoriesSuffix(collection.slug));
-	// svelte-ignore state_referenced_locally
-	const form = setDocumentFormContext({
-		initial: folder,
-		config,
-		readOnly: !config.access.update(user.attributes, { id: folder.id }),
-		key: folder._type,
-		afterSuccess: () => (open = false)
-	});
+  setAPIProxyContext(API_PROXY.DOCUMENT);
+  let formElement = $state<HTMLFormElement>();
+  const user = getUserContext();
+  const configCtx = getConfigContext();
+  // svelte-ignore state_referenced_locally
+  const config = configCtx.getCollection(withDirectoriesSuffix(collection.slug));
+  // svelte-ignore state_referenced_locally
+  const form = setDocumentFormContext({
+    initial: folder,
+    config,
+    readOnly: !config.access.update(user.attributes, { id: folder.id }),
+    key: folder._type,
+    afterSuccess: () => (open = false)
+  });
 
-	function handleKeyDown(event: KeyboardEvent) {
-		if (!open) return;
-		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();
-			}
-		}
-	}
+  function handleKeyDown(event: KeyboardEvent) {
+    if (!open) return;
+    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();
+      }
+    }
+  }
 </script>
 
 <svelte:window onkeydown={handleKeyDown} />
 
 <Dialog.Root bind:open>
-	<Dialog.Content>
-		{#snippet child({ props })}
-			<form use:form.enhance bind:this={formElement} {...props}>
-				<RenderFields {form} fields={config.fields} />
-				<Dialog.Footer --rz-justify-content="space-between">
-					<Button data-submit disabled={!form.canSubmit} type="submit">{t__('common.save')}</Button>
-					<Button onclick={() => (open = false)} variant="secondary">{t__('common.cancel')}</Button>
-				</Dialog.Footer>
-			</form>
-		{/snippet}
-	</Dialog.Content>
+  <Dialog.Content>
+    {#snippet child({ props })}
+      <form use:form.enhance bind:this={formElement} {...props}>
+        <RenderFields {form} fields={config.fields} />
+        <Dialog.Footer --rz-justify-content="space-between">
+          <Button data-submit disabled={!form.canSubmit} type="submit">{t__('common.save')}</Button>
+          <Button onclick={() => (open = false)} variant="secondary">{t__('common.cancel')}</Button>
+        </Dialog.Footer>
+      </form>
+    {/snippet}
+  </Dialog.Content>
 </Dialog.Root>