rimecms 0.32.1 → 1.0.0

package/dist/fields/relation/component/upload/Browse.svelte.d.ts

@@ -1,8 +1,16 @@
-import type { BuiltCollection } from '../../../../types';
+import type { BuiltCollection, UploadDoc } from '../../../../types';
 type Props = {
     open: boolean;
-    addValue: (item: string) => void;
     config: BuiltCollection;
+    many: boolean;
+    /** Document ids, in the order they were picked. */
+    selected: string[];
+    /** The whole selection once confirmed; `seen` are the docs the grid has shown. */
+    onChange: (ids: string[], seen: UploadDoc[]) => void;
+    /** The level of a document created from the picker. */
+    nestedLevel: number;
+    /** A document is being created, or no longer: the one underneath holds its saves meanwhile. */
+    onCreating?: (creating: boolean) => void;
 };
 declare const Browse: import("svelte").Component<Props, {}, "open">;
 type Browse = ReturnType<typeof Browse>;

package/dist/fields/relation/component/upload/Create.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { BuiltCollection } from '../../../../core/config/types.js';
+  import type { GenericDoc } from '../../../../core/prototype/types.js';
+  import Doc from '../../../../panel/components/sections/document/Document.svelte';
+  import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
+
+  type Props = {
+    open: boolean;
+    config: BuiltCollection;
+    /** The level of the new document's form: one above the document it is created for. */
+    nestedLevel: number;
+    onCreated: (doc: GenericDoc) => void;
+    onCancel: () => void;
+  };
+  let { open = $bindable(), config, nestedLevel, onCreated, onCancel }: Props = $props();
+</script>
+
+<!-- A new document of the related collection, in a sheet from the right. -->
+<Sheet.Root
+  bind:open
+  onOpenChange={(value) => {
+    if (!value) onCancel();
+  }}
+>
+  <Sheet.Content style="--rz-page-gutter:var(--rz-size-6)" showCloseButton={false} side="right">
+    <Doc
+      doc={config.blank()}
+      readOnly={false}
+      onClose={() => {
+        open = false;
+        onCancel();
+      }}
+      operation="create"
+      onNestedDocumentCreated={(doc: GenericDoc) => {
+        open = false;
+        onCreated(doc);
+      }}
+      {nestedLevel}
+    />
+  </Sheet.Content>
+</Sheet.Root>

package/dist/fields/relation/component/upload/Create.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BuiltCollection } from '../../../../core/config/types.js';
+import type { GenericDoc } from '../../../../core/prototype/types.js';
+type Props = {
+    open: boolean;
+    config: BuiltCollection;
+    /** The level of the new document's form: one above the document it is created for. */
+    nestedLevel: number;
+    onCreated: (doc: GenericDoc) => void;
+    onCancel: () => void;
+};
+declare const Create: import("svelte").Component<Props, {}, "open">;
+type Create = ReturnType<typeof Create>;
+export default Create;

package/dist/fields/relation/component/upload/Upload.svelte

@@ -1,140 +1,326 @@
 <script lang="ts">
-  import type { GenericDoc } from '../../../../core/prototype/types.js';
-  import Doc from '../../../../panel/components/sections/document/Document.svelte';
-  import Button from '../../../../panel/components/ui/button/button.svelte';
-  import CardResource from '../../../../panel/components/ui/card-resource/card-resource.svelte';
-  import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
-  import { getUserContext } from '../../../../panel/context/user.svelte.js';
-  import { createBlankDocument } from '../../../../core/prototype/doc.js';
-  import { Plus } from '@lucide/svelte';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { apiUrl, panelPath } from '../../../../core/routes/util.js';
+  import FileDrop from '../../../../panel/components/sections/collection/bulk-upload/FileDrop.svelte';
+  import SpinLoader from '../../../../panel/components/ui/spin-loader/SpinLoader.svelte';
+  import { getAPIProxyContext } from '../../../../panel/context/api-proxy.svelte.js';
+  import {
+    acceptLabel,
+    typeLabel,
+    uploadFiles,
+    type UploadProgress
+  } from '../../../../panel/util/upload-file.js';
+  import { Upload, X } from '@lucide/svelte';
   import Sortable from 'sortablejs';
-  import { onDestroy } from 'svelte';
-  import type { RelationComponentProps, RelationFieldItem } from '../types.js';
+  import type { RelationComponentProps } from '../types.js';
   import Browse from './Browse.svelte';
   import './upload.css';
 
-  const {
-    isFull,
+  type Props = RelationComponentProps & {
+    /** The library picker is open. */
+    browsing?: boolean;
+  };
+
+  let {
     hasError,
-    addValue,
+    readOnly,
+    setValue,
+    addUploaded,
     many,
     selectedItems,
     removeValue,
-    availableItems,
     relationConfig,
     onOrderChange,
     formNestedLevel,
     onRelationCreation,
     onRelationCreationCanceled,
-    onRelationCreated,
-    stamp
-  }: Omit<RelationComponentProps, 'readOnly'> = $props();
+    stamp,
+    browsing = $bindable(false)
+  }: Props = $props();
 
-  const user = getUserContext();
+  const APIProxy = getAPIProxyContext();
+  /** What the picker marks, in order. */
+  const selected = $derived(selectedItems.map((item) => item.documentId));
+  const accept = $derived(relationConfig.upload?.accept);
 
-  let open = $state(false);
-  let create = $state(false);
-  let instance: ReturnType<typeof Sortable.create>;
+  /* ------------------------------------------------------------ uploading */
 
-  const sortableOptions: Sortable.Options = {
-    animation: 150,
+  let progress = $state<UploadProgress | null>(null);
+  let failed = $state<string[]>([]);
 
-    // group: new Date().getTime().toString(),
-    onEnd: function (evt) {
-      const { oldIndex, newIndex } = evt;
-      if (oldIndex !== undefined && newIndex !== undefined) {
-        onOrderChange(oldIndex, newIndex);
-      }
-    }
-  };
+  /** Each file becomes a media of the library, then a pick of the field. */
+  async function upload(files: File[]) {
+    failed = [];
+    const target = { url: apiUrl(relationConfig.kebab), accept };
+    const result = await uploadFiles(files, target, (state) => (progress = state));
+    progress = null;
+    failed = result.failed;
+    if (!result.docs.length) return;
+    addUploaded(result.docs);
+    APIProxy.invalidate(apiUrl(relationConfig.kebab));
+  }
 
-  const onNestedDocumentCreated = (doc: GenericDoc) => {
-    create = false;
-    onRelationCreated(doc);
-  };
+  /* ------------------------------------------------------------ ordering */
 
-  $effect(() => {
-    if (many) {
-      const list = document.querySelector(
-        `.rz-relation-upload__list[data-list="${stamp}"]`
-      ) as HTMLDivElement;
-      instance = Sortable.create(list, sortableOptions);
-    }
-  });
+  let list = $state<HTMLElement>();
 
   $effect(() => {
-    if (isFull) {
-      open = false;
-    }
+    if (!many || !list || readOnly) return;
+    const sortable = Sortable.create(list, {
+      animation: 150,
+      draggable: '.rz-relation-upload__thumb',
+      onEnd: ({ oldDraggableIndex, newDraggableIndex }) => {
+        if (oldDraggableIndex !== undefined && newDraggableIndex !== undefined) {
+          onOrderChange(oldDraggableIndex, newDraggableIndex);
+        }
+      }
+    });
+    return () => sortable.destroy();
   });
 
-  onDestroy(() => {
-    if (instance) instance.destroy();
-  });
+  /* ------------------------------------------------------------ slots */
+
+  /**
+   * Empty squares after the picks, to the end of their row, five to a row.
+   *
+   * ```
+   * 3 picks  ■ ■ ■ □ □
+   * 5 picks  ■ ■ ■ ■ ■
+   * 6 picks  ■ ■ ■ ■ ■ / ■ □ □ □ □
+   * ```
+   */
+  const SLOTS = 5;
+  const slots = $derived(many ? (SLOTS - (selectedItems.length % SLOTS)) % SLOTS : 0);
 </script>
 
-{#snippet card(item: RelationFieldItem)}
-  {@const resource = { ...item, id: item.documentId }}
-  <CardResource {resource} onCloseClick={() => removeValue(item.documentId)} />
-{/snippet}
+{#if !readOnly}
+  <FileDrop
+    class="rz-relation-upload__drop"
+    multiple={many}
+    {accept}
+    disabled={!!progress}
+    data-error={hasError ? '' : undefined}
+    onfiles={upload}
+  >
+    {#snippet children({ browse })}
+      {#if progress}
+        <SpinLoader />
+        <span aria-live="polite">
+          {t__(
+            'fields.uploading',
+            String(Math.min(progress.uploaded + progress.failed.length + 1, progress.total)),
+            String(progress.total)
+          )}
+        </span>
+      {:else}
+        <Upload size={18} />
+        <span>
+          {many ? t__('common.drop_files') : t__('common.drop_file')}
+          {t__('common.or')}
+          <button type="button" class="rz-file-drop__link" onclick={browse}>
+            {t__('common.browse')}
+          </button>
+        </span>
+        {#if accept?.length}
+          <small>{acceptLabel(accept, t__('common.or'))}</small>
+        {/if}
+      {/if}
+    {/snippet}
+  </FileDrop>
+  {#if failed.length}
+    <p class="rz-relation-upload__failed">{t__('fields.upload_failed', failed.join(', '))}</p>
+  {/if}
+{/if}
 
 {#key stamp}
   <div
+    bind:this={list}
     class="rz-relation-upload__list"
     data-many={many ? '' : null}
-    data-list={stamp}
     data-error={hasError ? '' : null}
   >
     {#each selectedItems as item (item.documentId)}
-      {@render card(item)}
+      <div class="rz-relation-upload__thumb" title={item.title}>
+        <a
+          href={panelPath(relationConfig.kebab, item.documentId)}
+          aria-label={item.title}
+          draggable="false"
+        >
+          {#if item.isImage && item.url}
+            <img src={item.url} alt="" draggable="false" />
+          {:else}
+            <span class="rz-relation-upload__type">{typeLabel(item.mimeType)}</span>
+          {/if}
+        </a>
+        {#if !readOnly}
+          <button
+            type="button"
+            class="rz-relation-upload__remove"
+            aria-label={t__('fields.remove_item', item.title)}
+            onclick={() => removeValue(item.documentId)}
+          >
+            <X size={11} />
+          </button>
+        {/if}
+      </div>
+    {/each}
+    {#each { length: slots }, index (index)}
+      <div class="rz-relation-upload__slot" aria-hidden="true"></div>
     {/each}
   </div>
 {/key}
 
-<div
-  class="rz-relation-upload__actions"
-  class:rz-relation-upload__actions--list-empty={selectedItems.length === 0}
->
-  <Button
-    disabled={isFull || availableItems.length === 0}
-    onclick={() => (open = true)}
-    variant="outline"
-  >
-    Select a {relationConfig.label.singular || relationConfig.slug}
-  </Button>
-
-  <Button
-    disabled={isFull ||
-      !(relationConfig.access.create && relationConfig.access.create(user.attributes, {}))}
-    onclick={() => {
-      create = true;
-      onRelationCreation();
-    }}
-    variant="outline"
-  >
-    <Plus size="14" />
-  </Button>
-</div>
-
-<Browse bind:open {addValue} config={relationConfig} />
-
-<Sheet.Root
-  bind:open={create}
-  onOpenChange={(bool) => {
-    create = bool;
-    if (bool === false) {
-      onRelationCreationCanceled();
+<Browse
+  bind:open={browsing}
+  config={relationConfig}
+  {many}
+  {selected}
+  nestedLevel={formNestedLevel + 1}
+  onChange={setValue}
+  onCreating={(creating) => (creating ? onRelationCreation() : onRelationCreationCanceled())}
+/>
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:global(.rz-relation-upload__drop[data-error]) {
+    border-color: var(--rz-danger);
+  }
+
+  /* Narrow, in a side panel: the zone on one line. */
+  @container rz-field-root (max-width: 20rem) {
+    :global(.rz-relation-upload__drop) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--rz-size-2);
+      padding: var(--rz-size-3);
+    }
+    :global(.rz-relation-upload__drop > svg) {
+      margin: 0;
+    }
+    :global(.rz-relation-upload__drop small) {
+      flex-basis: 100%;
+    }
+  }
+
+  .rz-relation-upload__failed {
+    margin-top: var(--rz-size-1-5);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
+  /* Five squares to a row, each up to 5rem, shrinking together on a narrow field. */
+  .rz-relation-upload__list {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, var(--rz-size-20)));
+    gap: var(--rz-size-2);
+    margin-top: var(--rz-size-2);
+  }
+
+  .rz-relation-upload__list:not(:has(.rz-relation-upload__thumb)) {
+    display: none;
+  }
+
+  .rz-relation-upload__thumb,
+  .rz-relation-upload__slot {
+    aspect-ratio: 1;
+    border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-well);
+  }
+
+  .rz-relation-upload__thumb {
+    position: relative;
+    overflow: hidden;
+
+    /* A hairline over the image, so a light one keeps its edge. */
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px var(--rz-border);
+      pointer-events: none;
+    }
+
+    a {
+      display: grid;
+      place-items: center;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      &:focus-visible {
+        outline: 2px solid var(--rz-accent-border);
+        outline-offset: 2px;
+        outline-offset: -2px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      -o-object-fit: cover;
+         object-fit: cover;
+      pointer-events: none;
+    }
+  }
+
+  .rz-relation-upload__list[data-many] .rz-relation-upload__thumb {
+    cursor: grab;
+  }
+
+  .rz-relation-upload__type {
+    color: var(--rz-fg-subtle);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    letter-spacing: 0.04em;
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+  }
+
+  .rz-relation-upload__remove {
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+    position: absolute;
+    z-index: 1;
+    top: var(--rz-size-1);
+    right: var(--rz-size-1);
+    display: grid;
+    place-items: center;
+    width: var(--rz-size-5);
+    height: var(--rz-size-5);
+    border-radius: var(--rz-radius-sm);
+    color: var(--rz-fg);
+    opacity: 0;
+    transition: opacity 0.15s;
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-relation-upload__thumb:hover .rz-relation-upload__remove,
+  .rz-relation-upload__thumb:focus-within .rz-relation-upload__remove {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .rz-relation-upload__remove {
+      opacity: 1;
     }
-  }}
->
-  <Sheet.Content style="--rz-page-gutter:var(--rz-size-6)" showCloseButton={false} side="right">
-    <Doc
-      doc={createBlankDocument(relationConfig)}
-      readOnly={false}
-      onClose={() => (create = false)}
-      operation="create"
-      {onNestedDocumentCreated}
-      nestedLevel={formNestedLevel + 1}
-    />
-  </Sheet.Content>
-</Sheet.Root>
+  }
+</style>

package/dist/fields/relation/component/upload/Upload.svelte.d.ts

@@ -1,5 +1,10 @@
+import { Upload } from '@lucide/svelte';
 import type { RelationComponentProps } from '../types.js';
 import './upload.css';
-declare const Upload: import("svelte").Component<Omit<RelationComponentProps, "readOnly">, {}, "">;
+type Props = RelationComponentProps & {
+    /** The library picker is open. */
+    browsing?: boolean;
+};
+declare const Upload: import("svelte").Component<Props, {}, "browsing">;
 type Upload = ReturnType<typeof Upload>;
 export default Upload;

package/dist/fields/relation/component/upload/upload.css

@@ -1,82 +1,4 @@
-.rz-relation-upload__list {
-  container: relation-upload-list / inline-size;
-
-  .rz-card-resource {
-    --rz-thumbnail-size: var(--rz-size-20);
-    --rz-card-padding: var(--rz-size-1);
-    width: calc(var(--rz-thumbnail-size) + 2.5 * var(--rz-card-padding));
-
-    @container relation-upload-list (min-width: 425px) {
-      --rz-thumbnail-size: var(--rz-size-28);
-    }
-
-    .rz-card-resource__info {
-      display: none;
-    }
-    .rz-card-resource__filesize,
-    .rz-card-resource__mimetype {
-      display: none;
-    }
-  }
-}
-.rz-relation-upload__list[data-many] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--rz-size-4);
-}
-
-.rz-relation-upload__list:not(.rz-relation-upload__list[data-many]) {
-  @container relation-upload-list (min-width: 285px) {
-    .rz-card-resource {
-      width: min(310px, 100%);
-      .rz-card-resource__info {
-        display: block;
-      }
-    }
-  }
-  @container relation-upload-list (min-width: 425px) {
-    .rz-card-resource__filesize,
-    .rz-card-resource__mimetype {
-      display: block;
-    }
-  }
-}
-
-.rz-relation-upload__actions {
-  display: flex;
-  margin-top: var(--rz-size-3);
-  :first-child {
-    --rz-button-tr-radius: 0;
-    --rz-button-br-radius: 0;
-    --rz-button-outline-border-right-width: 0;
-  }
-  :last-child {
-    --rz-button-tl-radius: 0;
-    --rz-button-bl-radius: 0;
-  }
-}
-.rz-relation-upload__actions.rz-relation-upload__actions--list-empty {
-  margin-top: 0;
-}
-
-.rz-relation-upload__search {
-  height: var(--rz-size-10);
-  align-items: center;
-  border-top-left-radius: var(--rz-radius-xl);
-  border-top-right-radius: var(--rz-radius-xl);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.rz-relation-upload__command-list {
-  padding: var(--rz-size-2);
-}
-
-.rz-relation-upload__command-item[aria-selected='true'] {
-  /* background-color: hsl(var(--rz-gray-5)); */
-  background-color: var(--rz-popover-high-light-bg);
-}
-
+/* A media as a row: its thumbnail, then its name, size and type. */
 .rz-relation-upload__grid-item {
   display: flex;
   gap: var(--rz-size-4);
@@ -99,11 +21,13 @@
   overflow: hidden;
   word-break: break-all;
   text-align: left;
-  font-variation-settings: 'wght' 600;
-  font-weight: 600;
+  font-variation-settings: 'wght' 500;
+  font-weight: 500;
 }
 
 .rz-relation-upload__grid-filesize,
 .rz-relation-upload__grid-mimetype {
   text-align: left;
+  color: var(--rz-fg-subtle);
+  font-size: var(--rz-text-sm);
 }

package/dist/fields/relation/module.server.js

@@ -9,9 +9,15 @@ import { toKebabCase } from '../../util/string.js';
 export const ensureRelationExists = async (value, { config }) => {
     const output = [];
     const retrieveRelation = async (id) => {
+        // Forward auth, not the incoming body's headers: Bun's fetch keeps a `content-length` on a
+        // bodiless GET (Node's drops it), and the server then waits for a body that never comes.
+        const headers = new Headers(getRequestEvent().request.headers);
+        for (const name of ['content-length', 'content-type', 'transfer-encoding']) {
+            headers.delete(name);
+        }
         const [err, response] = await trycatchFetch(`${env.PUBLIC_RIME_URL}/api/${toKebabCase(config.relationTo)}/${id}?${PARAMS.SELECT}=id`, {
             method: 'GET',
-            headers: getRequestEvent().request.headers
+            headers
         });
         if (err)
             return null;

package/dist/fields/relation/value.d.ts

@@ -0,0 +1,25 @@
+import type { GenericDoc } from '../../core/prototype/types.js';
+import type { Relation } from './index.js';
+/** A related document as the field holds it before it is written: its id, and its row if any. */
+export type RelationItem = {
+    documentId: string;
+    id?: string;
+    livePreview?: GenericDoc;
+};
+/**
+ * The value a relation field writes for these documents, in this order.
+ *
+ * ```ts
+ * toRelationValue([{ documentId: 'a' }, { documentId: 'b', id: 'r1' }], { relationTo: 'medias', path: 'photos' })
+ * // [{ relationTo: 'medias', path: 'photos', position: 0, documentId: 'a' },
+ * //  { id: 'r1', relationTo: 'medias', path: 'photos', position: 1, documentId: 'b' }]
+ * ```
+ *
+ * `locale` is set on a localized field; `livePreview` rides along in a live-edit form.
+ */
+export declare function toRelationValue(items: RelationItem[], args: {
+    relationTo: string;
+    path: string;
+    locale?: string;
+    live?: boolean;
+}): Omit<Relation, 'ownerId'>[];