rimecms 0.26.7 → 0.26.9

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

@@ -1,106 +1,106 @@
 <script lang="ts">
-	import type { VersionsStatus } from '../../../../core/constant.js';
-	import type { GenericDoc } from '../../../../core/types/doc.js';
-	import { getLocaleContext } from '../../../context/locale.svelte.js';
-	import { panelUrl } from '../../../util/url.js';
-	import { toKebabCase } from '../../../../util/string.js';
-	import { X } from '@lucide/svelte';
-	import { t__ } from '../../../../core/i18n/index.js';
-	import Button from '../../ui/button/button.svelte';
-	import ScrollArea from '../../ui/scroll-area/scroll-area.svelte';
-	import StatusDot from '../collection/StatusDot.svelte';
+  import type { VersionsStatus } from '../../../../core/constant.js';
+  import type { GenericDoc } from '../../../../core/types/doc.js';
+  import { getLocaleContext } from '../../../context/locale.svelte.js';
+  import { panelUrl } from '../../../util/url.js';
+  import { toKebabCase } from '../../../../util/string.js';
+  import { X } from '@lucide/svelte';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import Button from '../../ui/button/button.svelte';
+  import ScrollArea from '../../ui/scroll-area/scroll-area.svelte';
+  import StatusDot from '../collection/StatusDot.svelte';
 
-	type Props = {
-		doc: GenericDoc;
-		versions: { id: string; updatedAt: Date; status: VersionsStatus }[];
-	};
-	const { doc, versions }: Props = $props();
+  type Props = {
+    doc: GenericDoc;
+    versions: { id: string; updatedAt: Date; status: VersionsStatus }[];
+  };
+  const { doc, versions }: Props = $props();
 
-	const locale = getLocaleContext();
+  const locale = getLocaleContext();
 
-	const makeVersionUrl = (version: Props['versions'][number]) => {
-		const kebabSlug = toKebabCase(doc._type);
-		if (doc._prototype === 'collection') {
-			return `${panelUrl(kebabSlug, doc.id)}/versions?versionId=${version.id}`;
-		} else {
-			return `${panelUrl(kebabSlug)}/versions?versionId=${version.id}`;
-		}
-	};
+  const makeVersionUrl = (version: Props['versions'][number]) => {
+    const kebabSlug = toKebabCase(doc._type);
+    if (doc._prototype === 'collection') {
+      return `${panelUrl(kebabSlug, doc.id)}/versions?versionId=${version.id}`;
+    } else {
+      return `${panelUrl(kebabSlug)}/versions?versionId=${version.id}`;
+    }
+  };
 
-	const returnUrl = $derived.by(() => {
-		const kebabSlug = toKebabCase(doc._type);
-		if (doc._prototype === 'collection') {
-			return `${panelUrl(kebabSlug, doc.id)}?versionId=${doc.versionId}`;
-		} else {
-			return `${panelUrl(kebabSlug)}/panel/${toKebabCase(doc._type)}?versionId=${doc.versionId}`;
-		}
-	});
+  const returnUrl = $derived.by(() => {
+    const kebabSlug = toKebabCase(doc._type);
+    if (doc._prototype === 'collection') {
+      return `${panelUrl(kebabSlug, doc.id)}?versionId=${doc.versionId}`;
+    } else {
+      return `${panelUrl(kebabSlug)}/panel/${toKebabCase(doc._type)}?versionId=${doc.versionId}`;
+    }
+  });
 </script>
 
 <section class="rz-document-versions">
-	<ScrollArea>
-		<div class="rz-document-versions__header">
-			<Button href={returnUrl} size="icon-sm" variant="ghost" icon={X}></Button>
-			<h2>{t__('common.versions_history')}</h2>
-		</div>
+  <ScrollArea>
+    <div class="rz-document-versions__header">
+      <Button href={returnUrl} size="icon-sm" variant="ghost" icon={X}></Button>
+      <h2>{t__('common.versions_history')}</h2>
+    </div>
 
-		<div class="rz-document-versions__list">
-			{#each versions as version}
-				<a
-					class="rz-document-versions__list-item"
-					class:rz-document-versions__list--active={doc.versionId === version.id}
-					href={makeVersionUrl(version)}
-				>
-					<span>{locale.dateFormat(version.updatedAt!, { short: true, withTime: true })}</span>
-					<StatusDot --rz-dot-size="0.5rem" status={version.status} />
-				</a>
-			{/each}
-		</div>
-	</ScrollArea>
+    <div class="rz-document-versions__list">
+      {#each versions as version}
+        <a
+          class="rz-document-versions__list-item"
+          class:rz-document-versions__list--active={doc.versionId === version.id}
+          href={makeVersionUrl(version)}
+        >
+          <span>{locale.dateFormat(version.updatedAt!, { short: true, withTime: true })}</span>
+          <StatusDot --rz-dot-size="0.5rem" status={version.status} />
+        </a>
+      {/each}
+    </div>
+  </ScrollArea>
 </section>
 
 <style>
-	.rz-document-versions {
-		position: sticky;
-		top: 0;
-		height: 100vh;
-		border-left: var(--rz-border);
+  .rz-document-versions {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    border-left: var(--rz-border);
 
-		.rz-document-versions__list {
-			padding: var(--rz-size-5);
-			margin-top: var(--rz-size-4);
-			display: grid;
-			gap: var(--rz-size-2);
-		}
-		:global(.rz-scroll-area) {
-			height: 100vh;
-		}
-	}
+    .rz-document-versions__list {
+      padding: var(--rz-size-5);
+      margin-top: var(--rz-size-4);
+      display: grid;
+      gap: var(--rz-size-2);
+    }
+    :global(.rz-scroll-area) {
+      height: 100vh;
+    }
+  }
 
-	.rz-document-versions__list-item {
-		height: calc(var(--rz-input-height));
-		padding: 0 var(--rz-size-6);
-		display: flex;
-		border-radius: var(--rz-radius-lg);
-		align-items: center;
-		background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
-		justify-content: space-between;
-	}
+  .rz-document-versions__list-item {
+    height: calc(var(--rz-input-height));
+    padding: 0 var(--rz-size-6);
+    display: flex;
+    border-radius: var(--rz-radius-lg);
+    align-items: center;
+    background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
+    justify-content: space-between;
+  }
 
-	.rz-document-versions__list--active {
-		text-decoration: underline;
-	}
+  .rz-document-versions__list--active {
+    text-decoration: underline;
+  }
 
-	.rz-document-versions__header {
-		display: flex;
-		gap: var(--rz-size-2);
-		padding: var(--rz-size-5) var(--rz-size-5) 0 var(--rz-size-5);
-		margin-left: calc(-1 * var(--rz-size-2));
-		align-items: center;
-		/* justify-content: space-between; */
-	}
-	h2 {
-		font-variation-settings: 'wght' 700;
-		font-weight: 700;
-	}
+  .rz-document-versions__header {
+    display: flex;
+    gap: var(--rz-size-2);
+    padding: var(--rz-size-5) var(--rz-size-5) 0 var(--rz-size-5);
+    margin-left: calc(-1 * var(--rz-size-2));
+    align-items: center;
+    /* justify-content: space-between; */
+  }
+  h2 {
+    font-variation-settings: 'wght' 700;
+    font-weight: 700;
+  }
 </style>

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -1,108 +1,108 @@
 <script lang="ts">
-	import type { WithUpload } from '../../../../../core/collections/upload/util/config';
-	import type { BuiltCollection } from '../../../../../core/config/types';
-	import Button from '../../../ui/button/button.svelte';
-	import { type DocumentFormContext } from '../../../../context/documentForm.svelte.js';
-	import { mimeTypeToIcon } from '../../../../util/upload.js';
-	import * as util from '../../../../../util/file.js';
-	import { capitalize } from '../../../../../util/string.js';
-	import { toast } from 'svelte-sonner';
-	import DropZone from './drop-zone/DropZone.svelte';
-
-	type Props = {
-		form: DocumentFormContext;
-		create: boolean;
-		accept: WithUpload<BuiltCollection>['upload']['accept'];
-	};
-	const { form, create, accept }: Props = $props();
-
-	let preview = $state<string | null>(null);
-	let file = $state<File | null>(null);
-	let isValidFile = $state(false);
-
-	const hasAccept = $derived('accept' in form.config);
-	const allowedMimeTypes = $derived(accept || []);
-
-	const deleteFile = () => {
-		preview = null;
-		file = null;
-		form.setValue('file', null);
-		form.setValue('filename', null);
-		form.setValue('mimeType', null);
-		form.setValue('filesize', null);
-		form.errors.delete('mimeType');
-		form.setValue(`_thumbnail`, null);
-	};
-
-	const onGeneratingPreviewStart = () => (form.isDisabled = true);
-	const onGeneratingPreviewEnd = () => (form.isDisabled = false);
-
-	$effect(() => {
-		if (file) {
-			const validMimeType =
-				!hasAccept || (allowedMimeTypes.length && allowedMimeTypes.includes(file.type));
-			if (!validMimeType) {
-				const error = `File should be type of ${allowedMimeTypes.join(' | ')}, received ${file.type}`;
-				form.errors.set('mimeType', error);
-				toast.error(error);
-				isValidFile = false;
-				file = null;
-			} else {
-				form.errors.delete('mimeType');
-				isValidFile = true;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (file && isValidFile && form.values.filename !== file.name) {
-			form.setValue('filename', file.name);
-			form.setValue('filesize', util.fileSizeToString(file.size));
-			form.setValue('mimeType', file.type);
-			form.setValue('file', file);
-		}
-	});
-
-	$effect(() => {
-		if (preview && form.values._thumbnail !== preview) {
-			form.setValue(`_thumbnail`, preview);
-		}
-	});
+  import type { WithUpload } from '../../../../../core/collections/upload/util/config';
+  import type { BuiltCollection } from '../../../../../core/config/types';
+  import Button from '../../../ui/button/button.svelte';
+  import { type DocumentFormContext } from '../../../../context/documentForm.svelte.js';
+  import { mimeTypeToIcon } from '../../../../util/upload.js';
+  import * as util from '../../../../../util/file.js';
+  import { capitalize } from '../../../../../util/string.js';
+  import { toast } from 'svelte-sonner';
+  import DropZone from './drop-zone/DropZone.svelte';
+
+  type Props = {
+    form: DocumentFormContext;
+    create: boolean;
+    accept: WithUpload<BuiltCollection>['upload']['accept'];
+  };
+  const { form, create, accept }: Props = $props();
+
+  let preview = $state<string | null>(null);
+  let file = $state<File | null>(null);
+  let isValidFile = $state(false);
+
+  const hasAccept = $derived('accept' in form.config);
+  const allowedMimeTypes = $derived(accept || []);
+
+  const deleteFile = () => {
+    preview = null;
+    file = null;
+    form.setValue('file', null);
+    form.setValue('filename', null);
+    form.setValue('mimeType', null);
+    form.setValue('filesize', null);
+    form.errors.delete('mimeType');
+    form.setValue(`_thumbnail`, null);
+  };
+
+  const onGeneratingPreviewStart = () => (form.isDisabled = true);
+  const onGeneratingPreviewEnd = () => (form.isDisabled = false);
+
+  $effect(() => {
+    if (file) {
+      const validMimeType =
+        !hasAccept || (allowedMimeTypes.length && allowedMimeTypes.includes(file.type));
+      if (!validMimeType) {
+        const error = `File should be type of ${allowedMimeTypes.join(' | ')}, received ${file.type}`;
+        form.errors.set('mimeType', error);
+        toast.error(error);
+        isValidFile = false;
+        file = null;
+      } else {
+        form.errors.delete('mimeType');
+        isValidFile = true;
+      }
+    }
+  });
+
+  $effect(() => {
+    if (file && isValidFile && form.values.filename !== file.name) {
+      form.setValue('filename', file.name);
+      form.setValue('filesize', util.fileSizeToString(file.size));
+      form.setValue('mimeType', file.type);
+      form.setValue('file', file);
+    }
+  });
+
+  $effect(() => {
+    if (preview && form.values._thumbnail !== preview) {
+      form.setValue(`_thumbnail`, preview);
+    }
+  });
 </script>
 
 <div class="rz-doc-upload-header">
-	{#if form.values.mimeType}
-		<div class="rz-doc-upload-header__file">
-			<div class="rz-doc-upload-header__preview">
-				{#if form.values.mimeType.includes('image')}
-					<div class="rz-doc-upload-header__prewiew-grid">
-						{#key form.values.title}
-							<img src={form.values.url || form.values._thumbnail} alt="preview" />
-						{/key}
-					</div>
-				{:else}
-					{@const FileIcon = mimeTypeToIcon(form.values.mimeType)}
-					<div class="rz-doc-upload-header__prewiew-file">
-						<FileIcon size="40" />
-						<span>{form.values.mimeType}</span>
-					</div>
-				{/if}
-			</div>
-			<div class="rz-doc-upload-header__info">
-				{#each ['filename', 'filesize', 'mimeType'] as key, index (index)}
-					<h4>{capitalize(key)}</h4>
-					{#if !create && key === 'filename'}
-						<a target="_blank" href="/medias/{form.values[key]}">{form.values[key]}</a>
-					{:else}
-						<p>{form.values[key]}</p>
-					{/if}
-				{/each}
-				<Button onclick={deleteFile} size="sm" variant="outline">Delete</Button>
-			</div>
-		</div>
-	{:else}
-		<DropZone bind:preview bind:file {onGeneratingPreviewStart} {onGeneratingPreviewEnd} {accept} />
-	{/if}
+  {#if form.values.mimeType}
+    <div class="rz-doc-upload-header__file">
+      <div class="rz-doc-upload-header__preview">
+        {#if form.values.mimeType.includes('image')}
+          <div class="rz-doc-upload-header__prewiew-grid">
+            {#key form.values.title}
+              <img src={form.values.url || form.values._thumbnail} alt="preview" />
+            {/key}
+          </div>
+        {:else}
+          {@const FileIcon = mimeTypeToIcon(form.values.mimeType)}
+          <div class="rz-doc-upload-header__prewiew-file">
+            <FileIcon size="40" />
+            <span>{form.values.mimeType}</span>
+          </div>
+        {/if}
+      </div>
+      <div class="rz-doc-upload-header__info">
+        {#each ['filename', 'filesize', 'mimeType'] as key, index (index)}
+          <h4>{capitalize(key)}</h4>
+          {#if !create && key === 'filename'}
+            <a target="_blank" href="/medias/{form.values[key]}">{form.values[key]}</a>
+          {:else}
+            <p>{form.values[key]}</p>
+          {/if}
+        {/each}
+        <Button onclick={deleteFile} size="sm" variant="outline">Delete</Button>
+      </div>
+    </div>
+  {:else}
+    <DropZone bind:preview bind:file {onGeneratingPreviewStart} {onGeneratingPreviewEnd} {accept} />
+  {/if}
 </div>
 
 <style>/**************************************/
@@ -112,128 +112,128 @@
 /**************************************/
 
 .rz-doc-upload-header {
-		container: inline-size;
-		padding: 0 var(--rz-fields-padding);
-	}
+    container: inline-size;
+    padding: 0 var(--rz-fields-padding);
+  }
 
 .rz-doc-upload-header__file {
-		min-height: 250px;
-		border: var(--rz-border);
-		overflow: hidden;
-		border-radius: var(--radius-md);
-	}
+    min-height: 250px;
+    border: var(--rz-border);
+    overflow: hidden;
+    border-radius: var(--radius-md);
+  }
 
 .rz-doc-upload-header__preview {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-		width: clamp(var(--rz-size-60), 40vw, 80%);
-		max-height: 400px;
-		background-color: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-3)));
-		border-top-right-radius: var(--rz-radius-md);
-		border-top-left-radius: var(--rz-radius-md);
-	}
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: clamp(var(--rz-size-60), 40vw, 80%);
+    max-height: 400px;
+    background-color: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-3)));
+    border-top-right-radius: var(--rz-radius-md);
+    border-top-left-radius: var(--rz-radius-md);
+  }
 
 @container (min-width:28rem) {
-		.rz-doc-upload-header__file {
-			display: flex;
-		}
-		.rz-doc-upload-header__preview {
-			border-top-right-radius: var(--rz-radius-none);
-			border-top-left-radius: var(--rz-radius-none);
-			border-top-left-radius: var(--rz-radius-md);
-			border-bottom-left-radius: var(--rz-radius-md);
-		}
-		.rz-doc-upload-header__info {
-			padding-inline: var(--rz-size-8);
-		}
-	}
+    .rz-doc-upload-header__file {
+      display: flex;
+    }
+    .rz-doc-upload-header__preview {
+      border-top-right-radius: var(--rz-radius-none);
+      border-top-left-radius: var(--rz-radius-none);
+      border-top-left-radius: var(--rz-radius-md);
+      border-bottom-left-radius: var(--rz-radius-md);
+    }
+    .rz-doc-upload-header__info {
+      padding-inline: var(--rz-size-8);
+    }
+  }
 
 .rz-doc-upload-header__prewiew-grid {
-		width: 100%;
-		height: 100%;
-		--dark: hsl(var(--rz-gray-11) / 1);
-		--light: hsl(var(--rz-gray-14) / 1);
-		--size: 16px;
-		--half-size: calc(var(--size) / 2);
-		background-size: var(--size) var(--size);
-		background-image:
-			linear-gradient(
-				45deg,
-				var(--dark) 25%,
-				transparent 25%,
-				transparent 75%,
-				var(--dark) 75%,
-				var(--dark)
-			),
-			linear-gradient(
-				45deg,
-				var(--dark) 25%,
-				transparent 25%,
-				transparent 75%,
-				var(--dark) 75%,
-				var(--dark)
-			),
-			linear-gradient(
-				45deg,
-				var(--light) 25%,
-				transparent 25%,
-				transparent 75%,
-				var(--light) 75%,
-				var(--light)
-			),
-			linear-gradient(
-				45deg,
-				var(--light) 25%,
-				transparent 25%,
-				transparent 75%,
-				var(--light) 75%,
-				var(--light)
-			);
-		background-position:
-			0 0,
-			var(--half-size) var(--half-size),
-			var(--half-size) 0,
-			0 var(--half-size);
-	}
+    width: 100%;
+    height: 100%;
+    --dark: hsl(var(--rz-gray-11) / 1);
+    --light: hsl(var(--rz-gray-14) / 1);
+    --size: 16px;
+    --half-size: calc(var(--size) / 2);
+    background-size: var(--size) var(--size);
+    background-image:
+      linear-gradient(
+        45deg,
+        var(--dark) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--dark) 75%,
+        var(--dark)
+      ),
+      linear-gradient(
+        45deg,
+        var(--dark) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--dark) 75%,
+        var(--dark)
+      ),
+      linear-gradient(
+        45deg,
+        var(--light) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--light) 75%,
+        var(--light)
+      ),
+      linear-gradient(
+        45deg,
+        var(--light) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--light) 75%,
+        var(--light)
+      );
+    background-position:
+      0 0,
+      var(--half-size) var(--half-size),
+      var(--half-size) 0,
+      0 var(--half-size);
+  }
 
 .rz-doc-upload-header__prewiew-grid img {
-		height: 100%;
-		width: 100%;
-		-o-object-fit: contain;
-		   object-fit: contain;
-	}
+    height: 100%;
+    width: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
 
 .rz-doc-upload-header__info {
-		flex: 1;
-		font-size: var(--rz-text-sm);
-		padding-inline: var(--rz-size-4);
-		padding-block: var(--rz-size-4);
-	}
+    flex: 1;
+    font-size: var(--rz-text-sm);
+    padding-inline: var(--rz-size-4);
+    padding-block: var(--rz-size-4);
+  }
 
 .rz-doc-upload-header__info h4 {
-		opacity: 0.4;
-		margin-bottom: var(--rz-size-1);
-		font-size: var(--rz-text-xs);
-	}
+    opacity: 0.4;
+    margin-bottom: var(--rz-size-1);
+    font-size: var(--rz-text-xs);
+  }
 
 .rz-doc-upload-header__info a {
-		margin-bottom: var(--rz-size-3);
-		display: block;
-		text-decoration: underline;
-	}
+    margin-bottom: var(--rz-size-3);
+    display: block;
+    text-decoration: underline;
+  }
 
 .rz-doc-upload-header__info p {
-		margin-bottom: var(--rz-size-3);
-	}
+    margin-bottom: var(--rz-size-3);
+  }
 
 .rz-doc-upload-header__prewiew-file {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--rz-size-2);
-	}
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rz-size-2);
+  }
 </style>