rimecms 0.27.6 → 0.28.0

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte

@@ -6,51 +6,54 @@
   import type { GenericDoc } from '../../../../../../core/types/doc';
   import CardDocument from '../../../../ui/card-document/card-document.svelte';
   import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-  import { getCollectionContext } from '../../../../../context/collection.svelte.js';
   import { panelUrl } from '../../../../../util/url.js';
+  import type { BuiltCollection } from '../../../../../../types';
 
-  type Props = { checked: boolean; doc: GenericDoc; draggable?: 'true' };
-  const { checked, doc, draggable }: Props = $props();
+  type Props = {
+    checked: boolean;
+    doc: GenericDoc;
+    draggable?: 'true';
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
+  };
 
-  const collection = getCollectionContext('list');
+  const { checked, doc, draggable, isSelectMode, config, toggleSelectOf }: Props = $props();
 
-  const isUploadCollection = $derived(isUploadConfig(collection.config));
+  const isUploadCollection = $derived(isUploadConfig(config));
 
   function handleEdit() {
     const uploadPath = isUploadCollection
       ? page.url.searchParams.get(PARAMS.UPLOAD_PATH) || UPLOAD_PATH.ROOT_NAME
       : null;
     const params = uploadPath ? `?${PARAMS.UPLOAD_PATH}=${uploadPath}` : '';
-    goto(`${panelUrl(collection.config.kebab, doc.id)}${params}`);
+    goto(`${panelUrl(config.kebab, doc.id)}${params}`);
   }
 
   function handleDragStart(e: DragEvent) {
     e.dataTransfer?.setData('text/plain', doc.id);
   }
+
+  function handleClick() {
+    if (isSelectMode) {
+      toggleSelectOf?.(doc.id);
+    } else {
+      handleEdit();
+    }
+  }
 </script>
 
-{#if collection.selectMode}
-  <div class="rz-grid-item">
-    <button
-      onclick={() => collection.toggleSelectOf(doc.id)}
-      type="button"
-      aria-label="select"
-      class="rz-grid-item__select-button"
-    >
-      <Checkbox {checked} />
-    </button>
-    <CardDocument {doc} />
-  </div>
-{:else}
-  <button
-    class="rz-grid-item"
-    onclick={handleEdit}
-    draggable={draggable || null}
-    ondragstart={draggable ? handleDragStart : null}
-  >
-    <CardDocument {doc} />
-  </button>
-{/if}
+<button
+  class="rz-grid-item"
+  onclick={handleClick}
+  draggable={draggable || null}
+  ondragstart={draggable ? handleDragStart : null}
+>
+  {#if isSelectMode}
+    <Checkbox {checked} />
+  {/if}
+  <CardDocument {doc} />
+</button>
 
 <style>
   button.rz-grid-item {
@@ -61,11 +64,16 @@
     --rz-card-color-bg: var(--rz-gray-10);
     display: block;
     position: relative;
-  }
 
-  .rz-grid-item__select-button {
-    position: absolute;
-    left: var(--rz-size-2);
-    top: var(--rz-size-2);
+    :global {
+      .rz-checkbox {
+        background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
+        border: var(--rz-border);
+        pointer-events: none;
+        position: absolute;
+        left: var(--rz-size-2);
+        top: var(--rz-size-2);
+      }
+    }
   }
 </style>

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte.d.ts

@@ -1,8 +1,12 @@
 import type { GenericDoc } from '../../../../../../core/types/doc';
+import type { BuiltCollection } from '../../../../../../types';
 type Props = {
     checked: boolean;
     doc: GenericDoc;
     draggable?: 'true';
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
 };
 declare const GridItem: import("svelte").Component<Props, {}, "">;
 type GridItem = ReturnType<typeof GridItem>;

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

@@ -3,35 +3,33 @@
   import { PARAMS } from '../../../../../core/constant.js';
   import { t__ } from '../../../../../core/i18n/index.js';
   import Button from '../../../ui/button/button.svelte';
-  import { getCollectionContext } from '../../../../context/collection.svelte.js';
+  import { panelUrl } from '../../../../util/url';
+  import type { BuiltCollection } from '../../../../../types';
   import { CirclePlus } from '@lucide/svelte';
 
   type ButtonSize = 'sm' | 'default';
-  const { size = 'default' }: { size?: ButtonSize } = $props();
+  const { config, size = 'default' }: { config: BuiltCollection; size?: ButtonSize } = $props();
 
-  const collection = getCollectionContext('list');
   const isSmallSize = $derived(size === 'sm');
   const buttonVariant = $derived(isSmallSize ? 'ghost' : 'default');
   const buttonSize = $derived(isSmallSize ? 'icon-sm' : 'default');
   const buttonLabel = $derived(
-    collection.config.label.create || t__(`common.create_new`, collection.config.label.singular)
+    config.label.create || t__(`common.create_new`, config.label.singular)
   );
 
   const createURL = $derived.by(() => {
     const currentUploadPath = page.url.searchParams.get(PARAMS.UPLOAD_PATH);
-    if (collection.config.upload) {
-      return `${collection.panelUrl}/create?${PARAMS.UPLOAD_PATH}=${currentUploadPath || 'root'}`;
+    if (config.upload) {
+      return `${panelUrl(config.kebab)}/create?${PARAMS.UPLOAD_PATH}=${currentUploadPath || 'root'}`;
     }
-    return `${collection.panelUrl}/create`;
+    return `${panelUrl(config.kebab)}/create`;
   });
 </script>
 
-{#if collection.canCreate}
-  <Button variant={buttonVariant} size={buttonSize} href={createURL}>
-    {#if isSmallSize}
-      <CirclePlus size={16} />
-    {:else}
-      {buttonLabel}
-    {/if}
-  </Button>
-{/if}
+<Button variant={buttonVariant} size={buttonSize} href={createURL}>
+  {#if isSmallSize}
+    <CirclePlus size={16} />
+  {:else}
+    {buttonLabel}
+  {/if}
+</Button>

package/dist/panel/components/sections/collection/header/ButtonCreate.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { BuiltCollection } from '../../../../../types';
 type ButtonSize = 'sm' | 'default';
 type $$ComponentProps = {
+    config: BuiltCollection;
     size?: ButtonSize;
 };
 declare const ButtonCreate: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -38,16 +38,16 @@
     <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.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"

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

@@ -22,13 +22,7 @@
   />
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-header-search-input {
+<style>.rz-header-search-input {
     position: relative;
     display: none;
     height: var(--rz-size-11);
@@ -51,7 +45,7 @@
     }
   }
 
-@container (min-width: 720px) {
+  @container (min-width: 720px) {
     .rz-header-search-input {
       display: flex;
     }

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

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { isUploadConfig } from '../../../../../core/collections/upload/util/config';
   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(() => {
@@ -15,6 +18,25 @@
   function onDeleteFolder(path: string) {
     collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
   }
+
+  /**
+   * When a document is moved into a folder
+   * change the document path inside collection.docs
+   */
+  function onDocumentDrop(args: { documentId: string; path: string }) {
+    const { documentId, path } = args;
+    const docIndex = collection.docs.findIndex((doc) => doc.id === documentId);
+    if (docIndex > -1) {
+      collection.docs[docIndex]._path = path;
+    } else {
+      console.error("can't find " + documentId, collection.docs);
+    }
+  }
+
+  const dragEnabled = $derived(
+    isUploadConfig(collection.config) &&
+      !!(collection.upload.directories.length || collection.upload.parentDirectory)
+  );
 </script>
 
 {#if collection.docs.length}
@@ -22,7 +44,7 @@
     <!-- Parent directory -->
     {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
       <Folder
-        onDocumentDrop={() => {}}
+        {onDocumentDrop}
         folder={{ ...collection.upload.parentDirectory, name: '...' }}
         display="list"
         collection={collection.config}
@@ -33,7 +55,7 @@
       {#each collection.upload.directories as folder (folder.id)}
         <Folder
           draggable="true"
-          onDocumentDrop={() => {}}
+          {onDocumentDrop}
           {folder}
           collection={collection.config}
           display="list"
@@ -44,7 +66,14 @@
 
     {#each documents as doc, index (index)}
       {@const checked = collection.selected.includes(doc.id)}
-      <Row {doc} {checked} />
+      <Row
+        config={collection.config}
+        {doc}
+        {checked}
+        draggable={dragEnabled ? 'true' : undefined}
+        isSelectMode={collection.selectMode}
+        toggleSelectOf={(id) => collection.toggleSelectOf(id)}
+      />
     {/each}
   </div>
 {:else}

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

@@ -54,13 +54,7 @@
   {@render sortableColumnHeader({ name: 'updatedAt' })}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-list-header {
+<style>.rz-list-header {
     display: grid;
     height: var(--rz-size-14);
     /* width: calc(100% - var(--rz-size-10)); */
@@ -70,14 +64,14 @@
     font-size: var(--rz-text-sm);
   }
 
-.rz-list-header__column {
+  .rz-list-header__column {
     color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;
     gap: var(--rz-size-1);
   }
 
-.rz-list-header__sort-button {
+  .rz-list-header__sort-button {
     color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import type { BuiltCollection } from '../../../../../../core/config/types.js';
   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';
@@ -10,57 +10,72 @@
   type Props = {
     checked: boolean;
     doc: GenericDoc;
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
+    columns?: Array<{ path: string; cell?: any }>;
+    draggable?: 'true';
   };
 
-  const { checked, doc }: Props = $props();
+  const { checked, doc, config, isSelectMode, toggleSelectOf, columns, draggable }: 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;
+    const columnLength = (columns?.length ?? 0) + 2;
     gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
   });
 
   const formattedDate = $derived(
     doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
   );
+
+  function handleDragStart(e: DragEvent) {
+    e.dataTransfer?.setData('text/plain', doc.id);
+  }
 </script>
 
-<div style={gridTemplateColumn} class="rz-list-row">
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  style={gridTemplateColumn}
+  class="rz-list-row"
+  draggable={draggable || null}
+  ondragstart={draggable ? handleDragStart : null}
+>
   <div class="rz-list-row__main">
-    {#if collection.selectMode}
+    {#if isSelectMode}
       <!-- On select mode show the checkbox  -->
       <Checkbox
         id="checkbox-{doc.id}"
         class="rz-list-row__checkbox"
         {checked}
-        onCheckedChange={() => collection.toggleSelectOf(doc.id)}
+        onCheckedChange={() => 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}">
+      <a class="rz-list-row__link" href="/panel/{config.kebab}/{doc.id}">
         {#if doc._thumbnail}
           <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
         {:else}
-          {@const Icon = collection.config.icon}
+          {@const Icon = 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}
+        {#if config.versions && config.versions.draft}
           <StatusDot --rz-dot-size="0.28rem" status={doc.status} />
         {/if}
       </a>
     {/if}
   </div>
 
-  {#each collection.columns as column, index (index)}
+  {#each columns as column, index (index)}
     <div class="rz-list-row__cell">
       {#if column.cell}
         {@const ColumnTableCell = column.cell}
@@ -76,13 +91,7 @@
   </div>
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-list-row {
+<style>.rz-list-row {
     --rz-upload-preview-cell-fit: cover;
 
     display: grid;
@@ -107,11 +116,13 @@
     :global {
       .rz-list-row__checkbox {
         margin-left: var(--rz-size-2);
+        background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
+        border: var(--rz-border);
       }
     }
   }
 
-.rz-list-row__main {
+  .rz-list-row__main {
     display: flex;
     align-items: center;
     gap: var(--rz-size-3);
@@ -119,25 +130,24 @@
     padding-right: var(--rz-size-5);
   }
 
-.rz-list-row__link {
+  .rz-list-row__link {
     display: flex;
     align-items: center;
     gap: var(--rz-size-4);
   }
 
-.rz-list-row__title {
+  .rz-list-row__title {
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
   }
-
-label.rz-list-row__title {
+  label.rz-list-row__title {
     cursor: pointer;
   }
 
-.rz-list-row__cell {
+  .rz-list-row__cell {
     color: hsl(var(--rz-foreground) / 0.6);
   }
 </style>

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

@@ -1,7 +1,16 @@
+import type { BuiltCollection } from '../../../../../../core/config/types.js';
 import type { GenericDoc } from '../../../../../../core/types/doc.js';
 type Props = {
     checked: boolean;
     doc: GenericDoc;
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
+    columns?: Array<{
+        path: string;
+        cell?: any;
+    }>;
+    draggable?: 'true';
 };
 declare const Row: import("svelte").Component<Props, {}, "">;
 type Row = ReturnType<typeof Row>;

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -15,9 +15,15 @@
     if (url) return getMimeTypeFromExtension(url.split('.').pop() || '') || '';
     return '';
   });
+
+  const mimeClass = $derived.by(() => {
+    if (!mimeTypeResolved) return '';
+    const [type, subType] = mimeTypeResolved.split('/');
+    return `rz-upload-preview-cell--${type}-${subType}`;
+  });
 </script>
 
-<div class="rz-upload-preview-cell {className}">
+<div class="rz-upload-preview-cell {mimeClass} {className}">
   <div>
     {#if url && mimeTypeResolved.includes('image')}
       <img class="rz-upload-preview-cell__image" src={url} alt="preview" />
@@ -62,6 +68,10 @@
     }
   }
 
+  .rz-upload-preview-cell--image-jpeg {
+    --rz-upload-preview-cell-fit: cover;
+  }
+
   .rz-upload-preview-cell__image {
     height: 100%;
     width: 100%;

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

@@ -75,26 +75,18 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-radio__option {
+<style>.rz-radio__option {
     display: flex;
     gap: var(--rz-size-3);
     padding: var(--rz-size-3);
     border: var(--rz-border);
   }
-
-:global {
+  :global {
     .rz-dialog-footer button {
       flex: 1;
     }
   }
-
-p {
+  p {
     font-variation-settings: 'wght' 400;
     font-weight: 400;
   }