rimecms 0.26.7 → 0.26.9

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -1,79 +1,79 @@
 <script lang="ts">
-	import type { GenericDoc } from '../../../../../../core/types/doc.js';
-	import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-	import { getCollectionContext } from '../../../../../context/collection.svelte.js';
-	import { getLocaleContext } from '../../../../../context/locale.svelte';
-	import { getValueAtPath } from '../../../../../../util/object';
-	import StatusDot from '../../StatusDot.svelte';
-	import UploadThumbCell from '../../upload-thumb-cell/UploadThumbCell.svelte';
-
-	type Props = {
-		checked: boolean;
-		doc: GenericDoc;
-	};
-
-	const { checked, doc }: Props = $props();
-
-	const collection = getCollectionContext('list');
-	const locale = getLocaleContext();
-
-	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
-
-	$effect(() => {
-		const columnLength = collection.columns.length + 2;
-		gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
-	});
-
-	const formattedDate = $derived(
-		doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
-	);
+  import type { GenericDoc } from '../../../../../../core/types/doc.js';
+  import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
+  import { getCollectionContext } from '../../../../../context/collection.svelte.js';
+  import { getLocaleContext } from '../../../../../context/locale.svelte';
+  import { getValueAtPath } from '../../../../../../util/object';
+  import StatusDot from '../../StatusDot.svelte';
+  import UploadThumbCell from '../../upload-thumb-cell/UploadThumbCell.svelte';
+
+  type Props = {
+    checked: boolean;
+    doc: GenericDoc;
+  };
+
+  const { checked, doc }: Props = $props();
+
+  const collection = getCollectionContext('list');
+  const locale = getLocaleContext();
+
+  let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
+
+  $effect(() => {
+    const columnLength = collection.columns.length + 2;
+    gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
+  });
+
+  const formattedDate = $derived(
+    doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
+  );
 </script>
 
 <div style={gridTemplateColumn} class="rz-list-row">
-	<div class="rz-list-row__main">
-		{#if collection.selectMode}
-			<!-- On select mode show the checkbox  -->
-			<Checkbox
-				id="checkbox-{doc.id}"
-				class="rz-list-row__checkbox"
-				{checked}
-				onCheckedChange={() => collection.toggleSelectOf(doc.id)}
-			/>
-			{#if doc._thumbnail}
-				<UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
-			{/if}
-			<label for="checkbox-{doc.id}" class="rz-list-row__title">{doc.title || '[untitled]'}</label>
-		{:else}
-			<a class="rz-list-row__link" href="/panel/{collection.config.kebab}/{doc.id}">
-				{#if doc._thumbnail}
-					<UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
-				{:else}
-					{@const Icon = collection.config.icon}
-					<div class="rz-list-row__icon"><Icon size="13" /></div>
-				{/if}
-
-				<span class="rz-list-row__title">{doc.title || '[untitled]'}</span>
-				{#if collection.hasDraft}
-					<StatusDot --rz-dot-size="0.28rem" status={doc.status} />
-				{/if}
-			</a>
-		{/if}
-	</div>
-
-	{#each collection.columns as column, index (index)}
-		<div class="rz-list-row__cell">
-			{#if column.cell}
-				{@const ColumnTableCell = column.cell}
-				<ColumnTableCell value={getValueAtPath(column.path, doc)} />
-			{:else}
-				{getValueAtPath(column.path, doc)}
-			{/if}
-		</div>
-	{/each}
-
-	<div class="rz-list-row__cell">
-		{formattedDate}
-	</div>
+  <div class="rz-list-row__main">
+    {#if collection.selectMode}
+      <!-- On select mode show the checkbox  -->
+      <Checkbox
+        id="checkbox-{doc.id}"
+        class="rz-list-row__checkbox"
+        {checked}
+        onCheckedChange={() => collection.toggleSelectOf(doc.id)}
+      />
+      {#if doc._thumbnail}
+        <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
+      {/if}
+      <label for="checkbox-{doc.id}" class="rz-list-row__title">{doc.title || '[untitled]'}</label>
+    {:else}
+      <a class="rz-list-row__link" href="/panel/{collection.config.kebab}/{doc.id}">
+        {#if doc._thumbnail}
+          <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
+        {:else}
+          {@const Icon = collection.config.icon}
+          <div class="rz-list-row__icon"><Icon size="13" /></div>
+        {/if}
+
+        <span class="rz-list-row__title">{doc.title || '[untitled]'}</span>
+        {#if collection.hasDraft}
+          <StatusDot --rz-dot-size="0.28rem" status={doc.status} />
+        {/if}
+      </a>
+    {/if}
+  </div>
+
+  {#each collection.columns as column, index (index)}
+    <div class="rz-list-row__cell">
+      {#if column.cell}
+        {@const ColumnTableCell = column.cell}
+        <ColumnTableCell value={getValueAtPath(column.path, doc)} />
+      {:else}
+        {getValueAtPath(column.path, doc)}
+      {/if}
+    </div>
+  {/each}
+
+  <div class="rz-list-row__cell">
+    {formattedDate}
+  </div>
 </div>
 
 <style>/**************************************/
@@ -83,57 +83,57 @@
 /**************************************/
 
 .rz-list-row {
-		display: grid;
-		height: var(--rz-row-height);
-		align-items: center;
-		border: var(--rz-border);
-		border-radius: var(--rz-radius-md);
-		background-color: hsl(var(--rz-row-bg));
-		.rz-list-row__icon {
-			height: var(--rz-size-10);
-			width: var(--rz-size-10);
-			border-radius: var(--rz-radius-md);
-			display: flex;
-			flex-shrink: 0;
-			flex-grow: 0;
-			align-items: center;
-			justify-content: center;
-			background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-1)));
-		}
-		:global {
-			.rz-list-row__checkbox {
-				margin-left: var(--rz-size-2);
-			}
-		}
-	}
+    display: grid;
+    height: var(--rz-row-height);
+    align-items: center;
+    border: var(--rz-border);
+    border-radius: var(--rz-radius-md);
+    background-color: hsl(var(--rz-row-bg));
+    .rz-list-row__icon {
+      height: var(--rz-size-10);
+      width: var(--rz-size-10);
+      border-radius: var(--rz-radius-md);
+      display: flex;
+      flex-shrink: 0;
+      flex-grow: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-1)));
+    }
+    :global {
+      .rz-list-row__checkbox {
+        margin-left: var(--rz-size-2);
+      }
+    }
+  }
 
 .rz-list-row__main {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-3);
-		padding-left: var(--rz-size-1);
-		padding-right: var(--rz-size-5);
-	}
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-3);
+    padding-left: var(--rz-size-1);
+    padding-right: var(--rz-size-5);
+  }
 
 .rz-list-row__link {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-4);
-	}
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-4);
+  }
 
 .rz-list-row__title {
-		display: -webkit-box;
-		-webkit-line-clamp: 1;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-		word-break: break-all;
-	}
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+  }
 
 label.rz-list-row__title {
-		cursor: pointer;
-	}
+    cursor: pointer;
+  }
 
 .rz-list-row__cell {
-		color: hsl(var(--rz-foreground) / 0.6);
-	}
+    color: hsl(var(--rz-foreground) / 0.6);
+  }
 </style>

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

@@ -1,147 +1,147 @@
 <script lang="ts">
-	import type { CollectionContext } from '../../../../context/collection.svelte';
-	import Sortable from 'sortablejs';
-	import { onDestroy } from 'svelte';
-	import { toast } from 'svelte-sonner';
-	import Empty from '../Empty.svelte';
-	import CollectionTreeNode from './CollectionTreeNode.svelte';
-	import { countRows } from './util';
-
-	type Props = { collection: CollectionContext };
-	const { collection }: Props = $props();
-
-	// Track collection stamp for reactivity
-	const collectionStamp = $derived(collection.stamp);
-
-	let sortingInitialized = $state(false);
-	let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
-	const shouldInit = $derived(!sortingInitialized && collection.docs.length > 0);
-
-	const sortableOptions: Sortable.Options = {
-		handle: '.rz-collection-node__grip',
-		animation: 150,
-		swapThreshold: 0.93,
-		group: {
-			name: `list-nested`
-		},
-		onEnd: function (evt) {
-			const { newIndex, oldIndex } = evt;
-
-			const fromParentId =
-				//@ts-expect-error annoying
-				evt.item.getAttribute('data-parent') || evt.item.__attributes?.['data-parent'];
-			//@ts-expect-error annoying
-			const toParentId = evt.to.getAttribute('data-id') || evt.to.__attributes?.['data-id'];
-			//@ts-expect-error annoying
-			const nodeId = evt.item.getAttribute('data-id') || evt.item.__attributes?.['data-id'];
-
-			collection
-				.handleNestedDocumentMove({
-					documentId: nodeId,
-					from: {
-						parent: fromParentId === 'root' ? null : fromParentId,
-						index: oldIndex || 0
-					},
-					to: {
-						parent: toParentId === 'root' ? null : toParentId,
-						index: newIndex || 0
-					}
-				})
-				.then((success) => {
-					if (success) {
-						toast.success('Order updated');
-						resetSortable();
-					} else {
-						toast.error('An error occured');
-					}
-				});
-		}
-	};
-
-	const initSortable = () => {
-		// Get all sortable containers including the root and nested ones
-		const sortableContainers = document.querySelectorAll('.rz-collection-sortable');
-
-		// Create Sortable instance for each container
-		sortableContainers.forEach((container) => {
-			const instance = Sortable.create(container as HTMLElement, sortableOptions);
-			sortableInstances.push(instance);
-		});
-	};
-
-	const resetSortable = () => {
-		destroySortable();
-		sortingInitialized = false;
-	};
-
-	const destroySortable = () => {
-		sortableInstances.forEach((instance) => instance.destroy());
-		sortableInstances = [];
-	};
-
-	$effect(() => {
-		if (shouldInit) {
-			initSortable();
-			sortingInitialized = true;
-		}
-	});
-
-	onDestroy(() => {
-		destroySortable();
-	});
+  import type { CollectionContext } from '../../../../context/collection.svelte';
+  import Sortable from 'sortablejs';
+  import { onDestroy } from 'svelte';
+  import { toast } from 'svelte-sonner';
+  import Empty from '../Empty.svelte';
+  import CollectionTreeNode from './CollectionTreeNode.svelte';
+  import { countRows } from './util';
+
+  type Props = { collection: CollectionContext };
+  const { collection }: Props = $props();
+
+  // Track collection stamp for reactivity
+  const collectionStamp = $derived(collection.stamp);
+
+  let sortingInitialized = $state(false);
+  let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
+  const shouldInit = $derived(!sortingInitialized && collection.docs.length > 0);
+
+  const sortableOptions: Sortable.Options = {
+    handle: '.rz-collection-node__grip',
+    animation: 150,
+    swapThreshold: 0.93,
+    group: {
+      name: `list-nested`
+    },
+    onEnd: function (evt) {
+      const { newIndex, oldIndex } = evt;
+
+      const fromParentId =
+        //@ts-expect-error annoying
+        evt.item.getAttribute('data-parent') || evt.item.__attributes?.['data-parent'];
+      //@ts-expect-error annoying
+      const toParentId = evt.to.getAttribute('data-id') || evt.to.__attributes?.['data-id'];
+      //@ts-expect-error annoying
+      const nodeId = evt.item.getAttribute('data-id') || evt.item.__attributes?.['data-id'];
+
+      collection
+        .handleNestedDocumentMove({
+          documentId: nodeId,
+          from: {
+            parent: fromParentId === 'root' ? null : fromParentId,
+            index: oldIndex || 0
+          },
+          to: {
+            parent: toParentId === 'root' ? null : toParentId,
+            index: newIndex || 0
+          }
+        })
+        .then((success) => {
+          if (success) {
+            toast.success('Order updated');
+            resetSortable();
+          } else {
+            toast.error('An error occured');
+          }
+        });
+    }
+  };
+
+  const initSortable = () => {
+    // Get all sortable containers including the root and nested ones
+    const sortableContainers = document.querySelectorAll('.rz-collection-sortable');
+
+    // Create Sortable instance for each container
+    sortableContainers.forEach((container) => {
+      const instance = Sortable.create(container as HTMLElement, sortableOptions);
+      sortableInstances.push(instance);
+    });
+  };
+
+  const resetSortable = () => {
+    destroySortable();
+    sortingInitialized = false;
+  };
+
+  const destroySortable = () => {
+    sortableInstances.forEach((instance) => instance.destroy());
+    sortableInstances = [];
+  };
+
+  $effect(() => {
+    if (shouldInit) {
+      initSortable();
+      sortingInitialized = true;
+    }
+  });
+
+  onDestroy(() => {
+    destroySortable();
+  });
 </script>
 
 {#key `${collectionStamp}`}
-	{#if collection.docs.length}
-		<div
-			class="rz-collection-sortable rz-collection-sortable--root"
-			data-id="root"
-			style="--data-rows-count={countRows(collection.nested)}"
-			data-empty={collection.nested.length === 0 ? '' : null}
-		>
-			{#each collection.nested as doc, index (index)}
-				<CollectionTreeNode {collection} parentId="root" {doc} />
-			{/each}
-		</div>
-	{:else}
-		<Empty config={collection.config} />
-	{/if}
+  {#if collection.docs.length}
+    <div
+      class="rz-collection-sortable rz-collection-sortable--root"
+      data-id="root"
+      style="--data-rows-count={countRows(collection.nested)}"
+      data-empty={collection.nested.length === 0 ? '' : null}
+    >
+      {#each collection.nested as doc, index (index)}
+        <CollectionTreeNode {collection} parentId="root" {doc} />
+      {/each}
+    </div>
+  {:else}
+    <Empty config={collection.config} />
+  {/if}
 {/key}
 
 <style>
-	.rz-collection-sortable {
-		--gap: var(--rz-size-4);
-		--h: var(--rz-row-height);
-		--half-h: calc(var(--rz-row-height) / 2);
-
-		height: 100%;
-		background-color: hsl(var(--rz-color-bg));
-		background-position: 0 0;
-		position: relative;
-
-		& :global {
-			.rz-collection-sortable {
-				display: grid;
-				margin-left: var(--rz-size-12);
-				min-height: var(--gap);
-			}
-			.rz-collection-sortable:has(.rz-collection-node) {
-				--rows: var(--data-rows-count);
-				&::before {
-					border-bottom-left-radius: 1rem;
-					content: '';
-					border-left: var(--rz-border);
-					translate: calc(-1 * var(--rz-size-6)) calc(-1 * var(--gap));
-					position: absolute;
-					top: 0;
-					height: calc(
-						var(--gap) + var(--half-h) + (var(--rows) - 1) * calc(var(--h) + var(--gap))
-					);
-					left: 0;
-				}
-				margin-top: var(--gap);
-				position: relative;
-			}
-		}
-	}
+  .rz-collection-sortable {
+    --gap: var(--rz-size-4);
+    --h: var(--rz-row-height);
+    --half-h: calc(var(--rz-row-height) / 2);
+
+    height: 100%;
+    background-color: hsl(var(--rz-color-bg));
+    background-position: 0 0;
+    position: relative;
+
+    & :global {
+      .rz-collection-sortable {
+        display: grid;
+        margin-left: var(--rz-size-12);
+        min-height: var(--gap);
+      }
+      .rz-collection-sortable:has(.rz-collection-node) {
+        --rows: var(--data-rows-count);
+        &::before {
+          border-bottom-left-radius: 1rem;
+          content: '';
+          border-left: var(--rz-border);
+          translate: calc(-1 * var(--rz-size-6)) calc(-1 * var(--gap));
+          position: absolute;
+          top: 0;
+          height: calc(
+            var(--gap) + var(--half-h) + (var(--rows) - 1) * calc(var(--h) + var(--gap))
+          );
+          left: 0;
+        }
+        margin-top: var(--gap);
+        position: relative;
+      }
+    }
+  }
 </style>

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

@@ -1,65 +1,65 @@
 <script lang="ts">
-	import type { GenericDoc } from '../../../../../core/types/doc.js';
-	import type { CollectionContext } from '../../../../context/collection.svelte.js';
-	import { GripVertical } from '@lucide/svelte';
-	import StatusDot from '../StatusDot.svelte';
-	import CollectionTreeNode from './CollectionTreeNode.svelte';
-	import { countRows } from './util';
+  import type { GenericDoc } from '../../../../../core/types/doc.js';
+  import type { CollectionContext } from '../../../../context/collection.svelte.js';
+  import { GripVertical } from '@lucide/svelte';
+  import StatusDot from '../StatusDot.svelte';
+  import CollectionTreeNode from './CollectionTreeNode.svelte';
+  import { countRows } from './util';
 
-	type Props = { parentId: string; doc: GenericDoc; collection: CollectionContext };
-	const { parentId, doc, collection }: Props = $props();
+  type Props = { parentId: string; doc: GenericDoc; collection: CollectionContext };
+  const { parentId, doc, collection }: Props = $props();
 </script>
 
 {#key `${parentId}-${doc.id}-${doc._position}`}
-	<div data-parent={parentId} data-id={doc.id} class="rz-collection-node">
-		<a href="/panel/{doc._type}/{doc.id}" class="rz-collection-node__row">
-			<div class="rz-collection-node__grip"><GripVertical size="12" /></div>
-			<div>
-				{doc.title}
-			</div>
-			{#if collection.hasDraft}
-				<StatusDot --rz-dot-size="0.3rem" status={doc.status} />
-			{/if}
-		</a>
-		<div
-			class="rz-collection-sortable"
-			style="--data-rows-count:{countRows(doc._children)}"
-			data-id={doc.id}
-		>
-			{#if doc._children && doc._children.length > 0}
-				{#each doc._children as child (child.id)}
-					<CollectionTreeNode {collection} doc={child} parentId={doc.id} />
-				{/each}
-			{/if}
-		</div>
-	</div>
+  <div data-parent={parentId} data-id={doc.id} class="rz-collection-node">
+    <a href="/panel/{doc._type}/{doc.id}" class="rz-collection-node__row">
+      <div class="rz-collection-node__grip"><GripVertical size="12" /></div>
+      <div>
+        {doc.title}
+      </div>
+      {#if collection.hasDraft}
+        <StatusDot --rz-dot-size="0.3rem" status={doc.status} />
+      {/if}
+    </a>
+    <div
+      class="rz-collection-sortable"
+      style="--data-rows-count:{countRows(doc._children)}"
+      data-id={doc.id}
+    >
+      {#if doc._children && doc._children.length > 0}
+        {#each doc._children as child (child.id)}
+          <CollectionTreeNode {collection} doc={child} parentId={doc.id} />
+        {/each}
+      {/if}
+    </div>
+  </div>
 {/key}
 
 <style>
-	.rz-collection-node__grip {
-		cursor: grab;
-	}
-	.rz-collection-node__row {
-		background-color: hsl(var(--rz-row-bg));
-		display: flex;
-		border: var(--rz-border);
-		border-radius: var(--rz-radius-lg);
-		height: var(--rz-row-height);
-		align-items: center;
-		gap: var(--rz-size-2);
-		padding: 0 1rem;
-		justify-self: self-start;
-		width: 100%;
-		position: relative;
-	}
-	.rz-collection-node:not([data-parent='root']) .rz-collection-node__row::before {
-		content: '';
-		border-top: var(--rz-border);
-		translate: calc(-1 * var(--rz-size-6)) calc(var(--half-h) - 1px);
-		position: absolute;
-		top: 0;
-		bottom: var(--half-h);
-		left: 0;
-		width: var(--rz-size-6);
-	}
+  .rz-collection-node__grip {
+    cursor: grab;
+  }
+  .rz-collection-node__row {
+    background-color: hsl(var(--rz-row-bg));
+    display: flex;
+    border: var(--rz-border);
+    border-radius: var(--rz-radius-lg);
+    height: var(--rz-row-height);
+    align-items: center;
+    gap: var(--rz-size-2);
+    padding: 0 1rem;
+    justify-self: self-start;
+    width: 100%;
+    position: relative;
+  }
+  .rz-collection-node:not([data-parent='root']) .rz-collection-node__row::before {
+    content: '';
+    border-top: var(--rz-border);
+    translate: calc(-1 * var(--rz-size-6)) calc(var(--half-h) - 1px);
+    position: absolute;
+    top: 0;
+    bottom: var(--half-h);
+    left: 0;
+    width: var(--rz-size-6);
+  }
 </style>