rimecms 0.26.7 → 0.26.9

package/dist/panel/components/sections/collection/header/DisplayMode.svelte

@@ -1,72 +1,72 @@
 <script lang="ts">
-	import Button from '../../../ui/button/button.svelte';
-	import {
-		DISPLAY_MODE,
-		getCollectionContext,
-		type DisplayMode
-	} from '../../../../context/collection.svelte.js';
-	import { LayoutGrid, List, TextQuote } from '@lucide/svelte';
+  import Button from '../../../ui/button/button.svelte';
+  import {
+    DISPLAY_MODE,
+    getCollectionContext,
+    type DisplayMode
+  } from '../../../../context/collection.svelte.js';
+  import { LayoutGrid, List, TextQuote } from '@lucide/svelte';
 
-	const collection = getCollectionContext('list');
-	const listIconClass = $derived(collection.isList() ? 'rz-header-display-mode__icon--active' : '');
-	const gridIconClass = $derived(collection.isGrid() ? 'rz-header-display-mode__icon--active' : '');
-	const nestedIconClass = $derived(
-		collection.isNested() ? 'rz-header-display-mode__icon--active' : ''
-	);
+  const collection = getCollectionContext('list');
+  const listIconClass = $derived(collection.isList() ? 'rz-header-display-mode__icon--active' : '');
+  const gridIconClass = $derived(collection.isGrid() ? 'rz-header-display-mode__icon--active' : '');
+  const nestedIconClass = $derived(
+    collection.isNested() ? 'rz-header-display-mode__icon--active' : ''
+  );
 
-	const setVariant = (mode: DisplayMode) => (mode === collection.display ? 'secondary' : 'ghost');
-	const isActive = (mode: DisplayMode) => mode === collection.display;
+  const setVariant = (mode: DisplayMode) => (mode === collection.display ? 'secondary' : 'ghost');
+  const isActive = (mode: DisplayMode) => mode === collection.display;
 
-	function handleListClick() {
-		collection.display = DISPLAY_MODE.LIST;
-	}
-	function handleGridClick() {
-		collection.display = DISPLAY_MODE.GRID;
-	}
-	function handleNestedClick() {
-		collection.display = DISPLAY_MODE.NESTED;
-	}
+  function handleListClick() {
+    collection.display = DISPLAY_MODE.LIST;
+  }
+  function handleGridClick() {
+    collection.display = DISPLAY_MODE.GRID;
+  }
+  function handleNestedClick() {
+    collection.display = DISPLAY_MODE.NESTED;
+  }
 </script>
 
 <div class="rz-header-display-mode">
-	<Button
-		size="icon-sm"
-		variant={setVariant(DISPLAY_MODE.LIST)}
-		inert={isActive(DISPLAY_MODE.LIST)}
-		onclick={handleListClick}
-	>
-		<List size={17} class="rz-header-display-mode__icon {listIconClass}" />
-	</Button>
+  <Button
+    size="icon-sm"
+    variant={setVariant(DISPLAY_MODE.LIST)}
+    inert={isActive(DISPLAY_MODE.LIST)}
+    onclick={handleListClick}
+  >
+    <List size={17} class="rz-header-display-mode__icon {listIconClass}" />
+  </Button>
 
-	{#if collection.config.upload}
-		<Button
-			size="icon-sm"
-			variant={setVariant(DISPLAY_MODE.GRID)}
-			inert={isActive(DISPLAY_MODE.GRID)}
-			onclick={handleGridClick}
-		>
-			<LayoutGrid size={17} class="rz-header-display-mode__icon {gridIconClass}" />
-		</Button>
-	{/if}
-	{#if collection.config.nested}
-		<Button
-			size="icon-sm"
-			variant={setVariant(DISPLAY_MODE.NESTED)}
-			inert={isActive(DISPLAY_MODE.NESTED)}
-			onclick={handleNestedClick}
-		>
-			<TextQuote size={17} class="rz-header-display-mode__icon {nestedIconClass}" />
-		</Button>
-	{/if}
+  {#if collection.config.upload}
+    <Button
+      size="icon-sm"
+      variant={setVariant(DISPLAY_MODE.GRID)}
+      inert={isActive(DISPLAY_MODE.GRID)}
+      onclick={handleGridClick}
+    >
+      <LayoutGrid size={17} class="rz-header-display-mode__icon {gridIconClass}" />
+    </Button>
+  {/if}
+  {#if collection.config.nested}
+    <Button
+      size="icon-sm"
+      variant={setVariant(DISPLAY_MODE.NESTED)}
+      inert={isActive(DISPLAY_MODE.NESTED)}
+      onclick={handleNestedClick}
+    >
+      <TextQuote size={17} class="rz-header-display-mode__icon {nestedIconClass}" />
+    </Button>
+  {/if}
 </div>
 
 <style global>
-	.rz-header-display-mode {
-		display: flex;
-		gap: var(--rz-size-2);
+  .rz-header-display-mode {
+    display: flex;
+    gap: var(--rz-size-2);
 
-		:global(.rz-header-display-mode__icon--active) {
-			color: hsl(229, 89%, 60%);
-		}
-	}
+    :global(.rz-header-display-mode__icon--active) {
+      color: hsl(229, 89%, 60%);
+    }
+  }
 </style>

package/dist/panel/components/sections/collection/header/Header.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { getCollectionContext } from '../../../../context/collection.svelte.js';
-	import DisplayMode from './DisplayMode.svelte';
-	import SelectUI from './SelectUI.svelte';
-	import Separator from './Separator.svelte';
+  import { getCollectionContext } from '../../../../context/collection.svelte.js';
+  import DisplayMode from './DisplayMode.svelte';
+  import SelectUI from './SelectUI.svelte';
+  import Separator from './Separator.svelte';
 
-	const collection = getCollectionContext('list');
-	const showSelectUI = $derived(!collection.isNested());
-	const showDisplayMode = $derived(collection.isUpload || collection.config.nested);
+  const collection = getCollectionContext('list');
+  const showSelectUI = $derived(!collection.isNested());
+  const showDisplayMode = $derived(collection.isUpload || collection.config.nested);
 </script>
 
 {#if showDisplayMode}
-	<Separator />
-	<DisplayMode />
+  <Separator />
+  <DisplayMode />
 {/if}
 
 {#if showSelectUI}
-	<Separator />
-	<SelectUI />
+  <Separator />
+  <SelectUI />
 {/if}

package/dist/panel/components/sections/collection/header/SearchInput.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-	import { t__ } from '../../../../../core/i18n/index.js';
-	import Input from '../../../ui/input/input.svelte';
-	import { getCollectionContext } from '../../../../context/collection.svelte.js';
-	import { Search } from '@lucide/svelte';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import Input from '../../../ui/input/input.svelte';
+  import { getCollectionContext } from '../../../../context/collection.svelte.js';
+  import { Search } from '@lucide/svelte';
 
-	const collection = getCollectionContext('list');
-	let searchValue = $state('');
+  const collection = getCollectionContext('list');
+  let searchValue = $state('');
 
-	$effect(() => {
-		collection.filterBy(searchValue);
-	});
+  $effect(() => {
+    collection.filterBy(searchValue);
+  });
 </script>
 
 <div class="rz-header-search-input">
-	<Input
-		name="search"
-		icon={Search}
-		placeholder={t__('common.search', `${collection.length} document(s)`)}
-		type="text"
-		bind:value={searchValue}
-	/>
+  <Input
+    name="search"
+    icon={Search}
+    placeholder={t__('common.search', `${collection.length} document(s)`)}
+    type="text"
+    bind:value={searchValue}
+  />
 </div>
 
 <style>/**************************************/
@@ -29,31 +29,31 @@
 /**************************************/
 
 .rz-header-search-input {
-		position: relative;
-		display: none;
-		height: var(--rz-size-11);
-		align-items: center;
-		width: var(--rz-size-80);
-
-		:global {
-			.rz-input {
-				height: var(--rz-size-9);
-				font-size: var(--rz-text-sm);
-			}
-			.rz-input-wrapper {
-				width: 100%;
-				&:focus-visible {
-					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));
-				}
-			}
-		}
-	}
+    position: relative;
+    display: none;
+    height: var(--rz-size-11);
+    align-items: center;
+    width: var(--rz-size-80);
+
+    :global {
+      .rz-input {
+        height: var(--rz-size-9);
+        font-size: var(--rz-text-sm);
+      }
+      .rz-input-wrapper {
+        width: 100%;
+        &:focus-visible {
+          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));
+        }
+      }
+    }
+  }
 
 @container (min-width: 720px) {
-		.rz-header-search-input {
-			display: flex;
-		}
-	}
+    .rz-header-search-input {
+      display: flex;
+    }
+  }
 </style>

package/dist/panel/components/sections/collection/header/SelectUI.svelte

@@ -1,62 +1,62 @@
 <script lang="ts">
-	import { t__ } from '../../../../../core/i18n/index.js';
-	import Button from '../../../ui/button/button.svelte';
-	import { getCollectionContext } from '../../../../context/collection.svelte.js';
-	import { ListChecks, SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import Button from '../../../ui/button/button.svelte';
+  import { getCollectionContext } from '../../../../context/collection.svelte.js';
+  import { ListChecks, SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
 
-	const collection = getCollectionContext('list');
-	const selectedCount = $derived(collection.selected.length);
-	const pluralSuffix = $derived(selectedCount > 1 ? 's' : '');
-	const activeListClass = $derived(collection.selectMode ? 'rz-header-select__icon--active' : '');
+  const collection = getCollectionContext('list');
+  const selectedCount = $derived(collection.selected.length);
+  const pluralSuffix = $derived(selectedCount > 1 ? 's' : '');
+  const activeListClass = $derived(collection.selectMode ? 'rz-header-select__icon--active' : '');
 </script>
 
 <div class="rz-header-select">
-	<Button
-		size="icon-sm"
-		variant="ghost"
-		onclick={() => (collection.selectMode = !collection.selectMode)}
-		disabled={collection.length === 0}
-	>
-		<ListChecks size={17} class="rz-header-select__icon {activeListClass}" />
-	</Button>
+  <Button
+    size="icon-sm"
+    variant="ghost"
+    onclick={() => (collection.selectMode = !collection.selectMode)}
+    disabled={collection.length === 0}
+  >
+    <ListChecks size={17} class="rz-header-select__icon {activeListClass}" />
+  </Button>
 
-	{#if collection.selectMode}
-		{#if collection.isAllSelected}
-			<Button
-				variant="text"
-				size="sm"
-				icon={SquareMinus}
-				onclick={() => (collection.selected = [])}
-			>
-				Deselect All
-			</Button>
-		{:else}
-			<Button variant="text" size="sm" icon={SquareCheck} onclick={collection.selectAll}>
-				{t__('common.select_all')}
-			</Button>
-		{/if}
-		<Button
-			disabled={selectedCount === 0}
-			size="sm"
-			icon={Trash}
-			variant="text"
-			onclick={collection.deleteSelection}
-		>
-			{t__('common.delete', `${selectedCount} doc${pluralSuffix}`)}
-		</Button>
-	{/if}
+  {#if collection.selectMode}
+    {#if collection.isAllSelected}
+      <Button
+        variant="text"
+        size="sm"
+        icon={SquareMinus}
+        onclick={() => (collection.selected = [])}
+      >
+        Deselect All
+      </Button>
+    {:else}
+      <Button variant="text" size="sm" icon={SquareCheck} onclick={collection.selectAll}>
+        {t__('common.select_all')}
+      </Button>
+    {/if}
+    <Button
+      disabled={selectedCount === 0}
+      size="sm"
+      icon={Trash}
+      variant="text"
+      onclick={collection.deleteSelection}
+    >
+      {t__('common.delete', `${selectedCount} doc${pluralSuffix}`)}
+    </Button>
+  {/if}
 </div>
 
 <style>
-	.rz-header-select {
-		display: flex;
-		gap: var(--rz-size-4);
-		align-items: center;
+  .rz-header-select {
+    display: flex;
+    gap: var(--rz-size-4);
+    align-items: center;
 
-		:global {
-			.rz-header-select__icon--active {
-				color: hsl(var(--rz-color-spot));
-			}
-		}
-	}
+    :global {
+      .rz-header-select__icon--active {
+        color: hsl(var(--rz-color-spot));
+      }
+    }
+  }
 </style>

package/dist/panel/components/sections/collection/header/Separator.svelte

@@ -1,8 +1,8 @@
 <div class="rz-collection-header__separator"></div>
 
 <style>
-	.rz-collection-header__separator {
-		border-left: var(--rz-border);
-		height: 1rem;
-	}
+  .rz-collection-header__separator {
+    border-left: var(--rz-border);
+    height: 1rem;
+  }
 </style>

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -1,59 +1,59 @@
 <script lang="ts">
-	import type { CollectionContext } from '../../../../context/collection.svelte.js';
-	import Empty from '../Empty.svelte';
-	import Folder from '../folder/FolderWithActions.svelte';
-	import Row from './row/Row.svelte';
-	type Props = { collection: CollectionContext };
-	const { collection }: Props = $props();
+  import type { CollectionContext } from '../../../../context/collection.svelte.js';
+  import Empty from '../Empty.svelte';
+  import Folder from '../folder/FolderWithActions.svelte';
+  import Row from './row/Row.svelte';
+  type Props = { collection: CollectionContext };
+  const { collection }: Props = $props();
 
-	const documents = $derived.by(() => {
-		return collection.isUpload
-			? collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
-			: collection.docs;
-	});
+  const documents = $derived.by(() => {
+    return collection.isUpload
+      ? collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
+      : collection.docs;
+  });
 
-	function onDeleteFolder(path: string) {
-		collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
-	}
+  function onDeleteFolder(path: string) {
+    collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
+  }
 </script>
 
 {#if collection.docs.length}
-	<div class="rz-page-collection__list">
-		<!-- Parent directory -->
-		{#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
-			<Folder
-				onDocumentDrop={() => {}}
-				folder={{ ...collection.upload.parentDirectory, name: '...' }}
-				display="list"
-				collection={collection.config}
-			/>
-		{/if}
+  <div class="rz-page-collection__list">
+    <!-- Parent directory -->
+    {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
+      <Folder
+        onDocumentDrop={() => {}}
+        folder={{ ...collection.upload.parentDirectory, name: '...' }}
+        display="list"
+        collection={collection.config}
+      />
+    {/if}
 
-		{#if !collection.isFiltered && collection.isUpload}
-			{#each collection.upload.directories as folder (folder.id)}
-				<Folder
-					draggable="true"
-					onDocumentDrop={() => {}}
-					{folder}
-					collection={collection.config}
-					display="list"
-					onDelete={onDeleteFolder}
-				/>
-			{/each}
-		{/if}
+    {#if !collection.isFiltered && collection.isUpload}
+      {#each collection.upload.directories as folder (folder.id)}
+        <Folder
+          draggable="true"
+          onDocumentDrop={() => {}}
+          {folder}
+          collection={collection.config}
+          display="list"
+          onDelete={onDeleteFolder}
+        />
+      {/each}
+    {/if}
 
-		{#each documents as doc, index (index)}
-			{@const checked = collection.selected.includes(doc.id)}
-			<Row {doc} {checked} />
-		{/each}
-	</div>
+    {#each documents as doc, index (index)}
+      {@const checked = collection.selected.includes(doc.id)}
+      <Row {doc} {checked} />
+    {/each}
+  </div>
 {:else}
-	<Empty config={collection.config} />
+  <Empty config={collection.config} />
 {/if}
 
 <style>
-	.rz-page-collection__list {
-		gap: var(--rz-size-2);
-		display: grid;
-	}
+  .rz-page-collection__list {
+    gap: var(--rz-size-2);
+    display: grid;
+  }
 </style>

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -1,57 +1,57 @@
 <script lang="ts">
-	import type { FormField } from '../../../../../../fields/types.js';
-	import { getCollectionContext } from '../../../../../context/collection.svelte.js';
-	import { capitalize } from '../../../../../../util/string.js';
-	import { ChevronDown, ChevronUp } from '@lucide/svelte';
+  import type { FormField } from '../../../../../../fields/types.js';
+  import { getCollectionContext } from '../../../../../context/collection.svelte.js';
+  import { capitalize } from '../../../../../../util/string.js';
+  import { ChevronDown, ChevronUp } from '@lucide/svelte';
 
-	type TableColumn = Partial<FormField> & { name: string; label?: string };
+  type TableColumn = Partial<FormField> & { name: string; label?: string };
 
-	const collection = getCollectionContext('list');
-	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
+  const collection = getCollectionContext('list');
+  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));`;
-	});
+  $effect(() => {
+    const columnLength = collection.columns.length + 2;
+    gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
+  });
 </script>
 
 {#snippet columnHeader(label: string)}
-	<div class="rz-list-header__column">
-		{capitalize(label)}
-	</div>
+  <div class="rz-list-header__column">
+    {capitalize(label)}
+  </div>
 {/snippet}
 
 {#snippet sortableColumnHeader(column: TableColumn)}
-	<div>
-		<button
-			onclick={() => collection.sortBy(column.name)}
-			aria-label="sort {column.name}"
-			type="button"
-			class="rz-list-header__sort-button"
-		>
-			{capitalize(column.label || column.name)}
+  <div>
+    <button
+      onclick={() => collection.sortBy(column.name)}
+      aria-label="sort {column.name}"
+      type="button"
+      class="rz-list-header__sort-button"
+    >
+      {capitalize(column.label || column.name)}
 
-			{#if collection.sortingBy === column.name && collection.sortingOrder === 'dsc'}
-				<ChevronUp size={12} />
-			{:else}
-				<ChevronDown size={12} />
-			{/if}
-		</button>
-	</div>
+      {#if collection.sortingBy === column.name && collection.sortingOrder === 'dsc'}
+        <ChevronUp size={12} />
+      {:else}
+        <ChevronDown size={12} />
+      {/if}
+    </button>
+  </div>
 {/snippet}
 
 <div style={gridTemplateColumn} class="rz-list-header">
-	{@render sortableColumnHeader({ name: collection.config.asTitle.split('.').at(-1) || 'title' })}
+  {@render sortableColumnHeader({ name: collection.config.asTitle.split('.').at(-1) || 'title' })}
 
-	{#each collection.columns as column, index (index)}
-		{#if column.table.sort}
-			{@render sortableColumnHeader(column)}
-		{:else}
-			{@render columnHeader(column.label || column.name)}
-		{/if}
-	{/each}
+  {#each collection.columns as column, index (index)}
+    {#if column.table.sort}
+      {@render sortableColumnHeader(column)}
+    {:else}
+      {@render columnHeader(column.label || column.name)}
+    {/if}
+  {/each}
 
-	{@render sortableColumnHeader({ name: 'updatedAt' })}
+  {@render sortableColumnHeader({ name: 'updatedAt' })}
 </div>
 
 <style>/**************************************/
@@ -61,26 +61,26 @@
 /**************************************/
 
 .rz-list-header {
-		display: grid;
-		height: var(--rz-size-14);
-		/* width: calc(100% - var(--rz-size-10)); */
-		align-items: center;
-		border-bottom: var(--rz-border);
-		/* margin-left: var(--rz-size-5); */
-		font-size: var(--rz-text-sm);
-	}
+    display: grid;
+    height: var(--rz-size-14);
+    /* width: calc(100% - var(--rz-size-10)); */
+    align-items: center;
+    border-bottom: var(--rz-border);
+    /* margin-left: var(--rz-size-5); */
+    font-size: var(--rz-text-sm);
+  }
 
 .rz-list-header__column {
-		color: hsl(var(--rz-ground-2) / 1);
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-1);
-	}
+    color: hsl(var(--rz-ground-2) / 1);
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-1);
+  }
 
 .rz-list-header__sort-button {
-		color: hsl(var(--rz-ground-2) / 1);
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-1);
-	}
+    color: hsl(var(--rz-ground-2) / 1);
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-1);
+  }
 </style>