rimecms 0.27.6 → 0.28.1

package/dist/live.d.ts

@@ -1,3 +1,4 @@
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
+import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
 import LiveProvider from './panel/components/sections/live/Provider.svelte';
-export { LiveConsumer, LiveProvider };
+export { LiveConsumer, LiveEdit, LiveProvider };

package/dist/live.js

@@ -1,3 +1,4 @@
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
+import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
 import LiveProvider from './panel/components/sections/live/Provider.svelte';
-export { LiveConsumer, LiveProvider };
+export { LiveConsumer, LiveEdit, LiveProvider };

package/dist/panel/components/fields/Error.svelte

@@ -27,13 +27,7 @@
   </div>
 {/if}
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-field-error {
+<style>.rz-field-error {
     color: hsl(var(--rz-ground-6) / 1);
     background-color: hsl(var(--rz-color-alert));
     position: absolute;

package/dist/panel/components/sections/collection/Empty.svelte

@@ -18,6 +18,7 @@
   .rz-no-document {
     height: var(--rz-input-height);
     background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+    color: hsl(var(--rz-gray-10));
     display: flex;
     align-items: center;
     border-radius: var(--rz-radius-md);

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

@@ -29,18 +29,12 @@
   {@render children()}
 </h3>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-: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)));
+<style>:root {
+    --rz-folder-light: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6)));
+    --rz-folder-dark: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-4)));
   }
 
-h3 {
+  h3 {
     font-variation-settings: 'wght' 600;
     font-weight: 600;
     overflow: hidden;
@@ -51,17 +45,14 @@ h3 {
     text-align: center;
     margin-block: var(--rz-size-3);
   }
-
-.rz-folder-svg {
+  .rz-folder-svg {
     aspect-ratio: 5 / 4;
     width: 100%;
   }
-
-.rz-folder-svg path:first-child {
+  .rz-folder-svg path:first-child {
     fill: var(--rz-folder-dark);
   }
-
-.rz-folder-svg path:last-child {
+  .rz-folder-svg path:last-child {
     fill: var(--rz-folder-light);
   }
 </style>

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

@@ -205,7 +205,7 @@
 
 <style>
   :root {
-    --rz-folder-hover-bg: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-1)));
+    --rz-folder-hover-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-1)));
   }
 
   .rz-folder--dragging {

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte

@@ -11,10 +11,13 @@
 
   type Props = { collection: CollectionContext };
   const { collection }: Props = $props();
+
   let createDirectoryDialogOpen = $state(false);
 
   const currentPathDocuments = $derived(
-    collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
+    collection.docs.filter((doc) =>
+      !collection.isUpload ? true : doc._path === collection.upload.currentPath
+    )
   );
 
   function onDeleteFolder(path: string) {
@@ -24,9 +27,10 @@
   const hasContentUnfiltered = $derived(
     !collection.isFiltered &&
       (collection.docs.length ||
-        collection.upload.directories.length ||
-        collection.upload.parentDirectory)
+        (collection.isUpload && collection.upload.directories.length) ||
+        (collection.isUpload && collection.upload.parentDirectory))
   );
+
   const hasDocsFiltered = $derived(collection.isFiltered && collection.docs.length);
 
   /**
@@ -44,7 +48,8 @@
   }
 
   const dragEnabled = $derived(
-    !!(collection.upload.directories.length || collection.upload.parentDirectory)
+    collection.isUpload &&
+      !!(collection.upload.directories.length || collection.upload.parentDirectory)
   );
 </script>
 
@@ -52,7 +57,7 @@
   <div class="rz-page-collection__grid">
     <div class="rz-page-collection__grid-inner">
       <!-- Parent directory -->
-      {#if collection.upload.parentDirectory && !collection.isFiltered}
+      {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
         <Folder
           {onDocumentDrop}
           folder={{ ...collection.upload.parentDirectory, name: '...' }}
@@ -61,7 +66,7 @@
       {/if}
 
       <!-- All children directories -->
-      {#if !collection.isFiltered}
+      {#if !collection.isFiltered && collection.isUpload}
         {#each collection.upload.directories as folder (folder.id)}
           <Folder
             draggable="true"
@@ -76,11 +81,14 @@
       <!-- All children docs -->
       {#each currentPathDocuments as doc (doc.id)}
         {@const checked = collection.selected.includes(doc.id)}
-        {#if dragEnabled}
-          <GridItem draggable="true" {doc} {checked} />
-        {:else}
-          <GridItem {doc} {checked} />
-        {/if}
+        <GridItem
+          config={collection.config}
+          toggleSelectOf={collection.toggleSelectOf}
+          isSelectMode={collection.selectMode}
+          draggable={dragEnabled ? 'true' : undefined}
+          {doc}
+          {checked}
+        />
       {/each}
 
       <ContextMenu>
@@ -95,7 +103,9 @@
         {/snippet}
       </ContextMenu>
 
-      <CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
+      {#if collection.isUpload}
+        <CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
+      {/if}
     </div>
   </div>
 {:else}

package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte

@@ -7,18 +7,17 @@
   import * as Dialog from '../../../../ui/dialog/index.js';
   import type { CollectionContext } from '../../../../../context/collection.svelte.js';
   import { getConfigContext } from '../../../../../context/config.svelte.js';
-  import {
-    setDocumentFormContext,
-    type FormSuccessData
-  } from '../../../../../context/documentForm.svelte.js';
+  import { setDocumentFormContext } from '../../../../../context/documentForm.svelte.js';
 
   type Props = { collection: CollectionContext; open: boolean };
   let { collection, open = $bindable() }: Props = $props();
 
   let formElement = $state<HTMLFormElement>();
   const configCtx = getConfigContext();
+
   // svelte-ignore state_referenced_locally
   const directoriesConfig = configCtx.getCollection(withDirectoriesSuffix(collection.config.slug));
+
   // svelte-ignore state_referenced_locally
   const form = setDocumentFormContext({
     initial: {
@@ -31,7 +30,7 @@
   });
 
   // Prevent redirection after directory creation
-  async function beforeRedirect(data?: FormSuccessData) {
+  async function beforeRedirect() {
     open = false;
     invalidateAll();
     return false;

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;