rimecms 0.32.1 → 1.0.0

package/dist/fields/relation/component/RelationInline.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  import { t__ } from '../../../core/i18n/index.js';
+  import type { UploadDoc } from '../../../core/prototype/collection/upload/types.js';
+  import { isUploadConfig } from '../../../core/prototype/collection/upload/util/config.js';
+  import { apiUrl } 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 { getConfigContext } from '../../../panel/context/config.svelte.js';
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import { getLocaleContext } from '../../../panel/context/locale.svelte.js';
+  import { populate } from '../../../panel/util/populate.js';
+  import { uploadFiles, type UploadProgress } from '../../../panel/util/upload-file.js';
+  import { Image as ImageIcon } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
+  import type { Relation, RelationFieldBuilder } from '../index.js';
+  import { toRelationValue } from '../value.js';
+  import Browse from './upload/Browse.svelte';
+
+  type Props = {
+    path: string;
+    config: RelationFieldBuilder;
+    form: DocumentFormContext;
+    /** What the render draws for the related docs: resolved at depth 1, in order. */
+    children: Snippet<[{ docs: UploadDoc[]; open: () => void }]>;
+    /**
+     * Drawn while nothing is related; a drop zone by default. `open` opens the library,
+     * `upload` takes files for the field.
+     */
+    empty?: Snippet<[{ open: () => void; upload: (files: File[]) => void }]>;
+    class?: string;
+  };
+  const { path, config, form, children, empty, class: className }: Props = $props();
+
+  const { getCollection } = getConfigContext();
+  const locale = getLocaleContext();
+  const relationConfig = $derived(getCollection(config.get.relationTo));
+  const isUpload = $derived(isUploadConfig(relationConfig));
+  const many = $derived(!!config.get.many);
+
+  const field = $derived(form.useField<Relation[]>(path, config));
+  const refs = $derived(Array.isArray(field.value) ? field.value : []);
+  const ids = $derived(refs.map((ref) => ref.documentId));
+  /** Files and the library only reach an editable field to an upload collection. */
+  const canPick = $derived(field.editable && isUpload);
+
+  /** The docs drawn: a pick brings its own, a relation there on load is resolved once. */
+  const known = new SvelteMap<string, UploadDoc>();
+  $effect(() => {
+    for (const ref of refs) {
+      if (known.has(ref.documentId)) continue;
+      const lookup = { relationTo: ref.relationTo, documentId: ref.documentId };
+      populate<unknown>(lookup).then((doc) => {
+        if (doc && typeof doc === 'object' && '_type' in doc) {
+          known.set(ref.documentId, doc as UploadDoc);
+        }
+      });
+    }
+  });
+  const docs = $derived(ids.flatMap((id) => known.get(id) ?? []));
+
+  let browsing = $state(false);
+  const open = () => (browsing = true);
+
+  $effect(() => {
+    if (!isUpload) console.warn(`RelationInline at ${path}: ${config.get.relationTo} is no upload`);
+  });
+
+  /** The picker's selection, written the way the relation field writes it. */
+  function onChange(next: string[], seen: UploadDoc[]) {
+    for (const doc of seen) if (next.includes(doc.id)) known.set(doc.id, doc);
+    const items = next.map((documentId) => ({
+      documentId,
+      id: refs.find((ref) => ref.documentId === documentId)?.id
+    }));
+    field.value = toRelationValue(items, {
+      relationTo: config.get.relationTo,
+      path,
+      locale: config.get.localized ? locale.code : undefined
+    }) as Relation[];
+  }
+
+  /* ------------------------------------------------------------ uploading */
+
+  const APIProxy = getAPIProxyContext();
+  let progress = $state<UploadProgress | null>(null);
+  let failed = $state<string[]>([]);
+
+  /** Each file becomes a media of the library, then the pick: after the others, or in place. */
+  async function upload(files: File[]) {
+    failed = [];
+    const target = { url: apiUrl(relationConfig.kebab), accept: relationConfig.upload?.accept };
+    const result = await uploadFiles(files, target, (state) => (progress = state));
+    progress = null;
+    failed = result.failed;
+    if (!result.docs.length) return;
+    const added = result.docs.map((doc) => doc.id);
+    onChange(many ? [...ids, ...added] : added.slice(0, 1), result.docs);
+    APIProxy.invalidate(apiUrl(relationConfig.kebab));
+  }
+
+  /** A control does its job and stops there, before the block under it selects itself again. */
+  function control(event: MouseEvent, action: () => unknown) {
+    event.stopPropagation();
+    action();
+  }
+
+  /** On the stage, the first click selects the block; a click on the selected one opens. */
+  function onDrawnClick(event: MouseEvent) {
+    const block = (event.currentTarget as HTMLElement).closest('.rz-renders__item');
+    if (!block || block.hasAttribute('data-selected')) open();
+  }
+</script>
+
+<!-- What a render draws for its related docs, and the place where they are picked. -->
+<div class="rz-relation-inline {className ?? ''}" data-many={many ? '' : undefined}>
+  {#if docs.length}
+    <div class="rz-relation-inline__drawn" role="presentation" onclick={onDrawnClick}>
+      {@render children({ docs, open })}
+    </div>
+    {#if !field.editable}
+      <!-- Read-only: drawn, never picked. -->
+    {:else}
+      <div class="rz-relation-inline__controls">
+        {#if many}
+          <button type="button" onclick={(event) => control(event, open)}>
+            {t__('fields.edit_selection')}
+          </button>
+        {:else}
+          <button type="button" onclick={(event) => control(event, open)}>
+            {t__('fields.replace')}
+          </button>
+          <button type="button" onclick={(event) => control(event, () => onChange([], []))}>
+            {t__('fields.remove')}
+          </button>
+        {/if}
+      </div>
+    {/if}
+  {:else if ids.length}
+    <div class="rz-relation-inline__loading" aria-busy="true"></div>
+  {:else if empty}
+    {@render empty({ open, upload })}
+  {:else}
+    <FileDrop
+      class="rz-relation-inline__empty"
+      multiple={many}
+      accept={relationConfig.upload?.accept}
+      disabled={!canPick || !!progress}
+      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}
+          <ImageIcon size={18} />
+          <span>
+            {many ? t__('common.drop_files') : t__('common.drop_file')}
+            {t__('common.or')}
+            <button type="button" class="rz-file-drop__link" disabled={!canPick} onclick={browse}>
+              {t__('common.browse')}
+            </button>
+          </span>
+          <small>
+            {t__('common.or')}
+            <button type="button" class="rz-file-drop__link" disabled={!canPick} onclick={open}>
+              {t__('fields.choose_in_library')}
+            </button>
+          </small>
+          {#if failed.length}
+            <small>{t__('fields.upload_failed', failed.join(', '))}</small>
+          {/if}
+        {/if}
+      {/snippet}
+    </FileDrop>
+  {/if}
+</div>
+
+{#if isUpload}
+  <Browse
+    bind:open={browsing}
+    config={relationConfig}
+    {many}
+    selected={ids}
+    {onChange}
+    nestedLevel={form.nestedLevel + 1}
+    onCreating={(creating) => (form.isDisabled = creating)}
+  />
+{/if}
+
+<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. */
+.rz-relation-inline {
+    position: relative;
+  }
+
+  /* Over the drawn docs, top right: on a selected block, or under the pointer. */
+  .rz-relation-inline__controls {
+    position: absolute;
+    top: var(--rz-size-2);
+    right: var(--rz-size-2);
+    z-index: 2;
+    display: none;
+    gap: var(--rz-size-1);
+
+    button {
+      height: var(--rz-size-7);
+      padding-inline: var(--rz-size-3);
+      border-radius: var(--rz-radius-md);
+      background-color: var(--rz-bg-inverse);
+      color: var(--rz-fg-inverse);
+      font-size: var(--rz-text-xs);
+      &:hover {
+        filter: brightness(1.12);
+      }
+    }
+  }
+
+  .rz-relation-inline:hover .rz-relation-inline__controls,
+  :global(.rz-renders__item[data-selected]) .rz-relation-inline__controls {
+    display: flex;
+  }
+
+  /* On the stage, the zone stands on the page like the render it waits for. */
+  .rz-relation-inline :global(.rz-relation-inline__empty) {
+    width: 100%;
+    padding: var(--rz-size-11) var(--rz-size-4);
+    background-color: var(--rz-bg-raised);
+  }
+
+  .rz-relation-inline__loading {
+    width: 100%;
+    min-height: var(--rz-size-32);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
+  }
+</style>

package/dist/fields/relation/component/RelationInline.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { UploadDoc } from '../../../core/prototype/collection/upload/types.js';
+import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+import type { Snippet } from 'svelte';
+import type { RelationFieldBuilder } from '../index.js';
+type Props = {
+    path: string;
+    config: RelationFieldBuilder;
+    form: DocumentFormContext;
+    /** What the render draws for the related docs: resolved at depth 1, in order. */
+    children: Snippet<[{
+        docs: UploadDoc[];
+        open: () => void;
+    }]>;
+    /**
+     * Drawn while nothing is related; a drop zone by default. `open` opens the library,
+     * `upload` takes files for the field.
+     */
+    empty?: Snippet<[{
+        open: () => void;
+        upload: (files: File[]) => void;
+    }]>;
+    class?: string;
+};
+declare const RelationInline: import("svelte").Component<Props, {}, "">;
+type RelationInline = ReturnType<typeof RelationInline>;
+export default RelationInline;

package/dist/fields/relation/component/default/Default.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
   import { t__ } from '../../../../core/i18n/index.js';
-  import { createBlankDocument } from '../../../../core/prototype/doc.js';
   import type { GenericDoc } from '../../../../core/prototype/types.js';
   import Document from '../../../../panel/components/sections/document/Document.svelte';
-  import Button from '../../../../panel/components/ui/button/button.svelte';
   import * as Command from '../../../../panel/components/ui/command/index.js';
   import * as Sheet from '../../../../panel/components/ui/sheet/index.js';
-  import Tag from '../../../../panel/components/ui/tag/tag.svelte';
-  import { getUserContext } from '../../../../panel/context/user.svelte.js';
   import { dataError } from '../../../../panel/util/dataError.js';
   import { dataFocused } from '../../../../panel/util/dataFocused.js';
   import { useSortable } from '../../../../panel/util/Sortable.js';
+  import { X } from '@lucide/svelte';
   import type { RelationComponentProps, RelationFieldItem } from '../types.js';
 
+  /**
+   * A well of the picked documents, as chips, then a search to pick more.
+   *
+   * The field's label row holds its buttons and calls in: `choose()` opens the search,
+   * `create()` opens a new document of the related collection in a sheet.
+   */
+  type Props = RelationComponentProps & {
+    /** A new document of the related collection may be created from here. */
+    canCreate?: boolean;
+  };
+
   const {
     isFull,
     hasError,
@@ -29,19 +37,29 @@
     formNestedLevel,
     onRelationCreated,
     onRelationCreation,
-    onRelationCreationCanceled
-  }: RelationComponentProps = $props();
-
-  const user = getUserContext();
+    onRelationCreationCanceled,
+    canCreate = false
+  }: Props = $props();
 
   let search = $state('');
-  let relationList: HTMLElement;
+  let relationList = $state<HTMLElement>();
   let inputFocused = $state(false);
-  let create = $state(false);
-  let commandInput = $state<HTMLInputElement>();
+  let creating = $state(false);
+  let commandInput = $state<HTMLInputElement | null>(null);
+
+  /** Focuses the search, which opens the list of documents to pick. */
+  export function choose() {
+    commandInput?.focus();
+  }
+
+  /** Opens a new document of the related collection; this form stays disabled meanwhile. */
+  export function create() {
+    onRelationCreation();
+    creating = true;
+  }
 
   const onNestedDocumentCreated = (doc: GenericDoc) => {
-    create = false;
+    creating = false;
     onRelationCreated(doc);
     addValue(doc.id);
   };
@@ -57,10 +75,11 @@
     }
   });
 
+  /** The chips reorder by drag; the instance goes with the list. */
   $effect(() => {
-    if (many) {
-      sortable(relationList);
-    }
+    if (!many || !relationList || readOnly) return;
+    const instance = sortable(relationList);
+    return () => instance.destroy();
   });
 
   const onSelect = (item: RelationFieldItem) => {
@@ -68,9 +87,7 @@
     search = '';
   };
 
-  const inputWithItemsClass = $derived(
-    selectedItems.length === 0 ? '' : 'rz-command-input-select--with-items'
-  );
+  const canSearch = $derived(!readOnly && !isFull && availableItems.length > 0);
 </script>
 
 <div class="rz-relation">
@@ -81,25 +98,36 @@
       use:dataFocused={inputFocused}
       bind:this={relationList}
       class:rz-relation__list--readonly={readOnly}
+      data-many={many ? '' : null}
     >
       {#each selectedItems as item (item.documentId)}
-        <Tag onRemove={() => removeValue(item.documentId)} {readOnly}>
-          <a href={resolve(item.editUrl)}>{item.title}</a>
-        </Tag>
+        <div class="rz-relation__item">
+          <a class="rz-relation__item-title" href={resolve(item.editUrl)}>{item.title}</a>
+          {#if !readOnly}
+            <button
+              type="button"
+              class="rz-relation__remove"
+              aria-label={t__('fields.remove_item', item.title)}
+              onclick={() => removeValue(item.documentId)}
+            >
+              <X size={12} />
+            </button>
+          {/if}
+        </div>
       {/each}
 
-      {#if nothingToSelect}
-        <span class="rz-relation__no-items">
-          No {relationConfig.label.singular.toLowerCase()} to select
+      {#if nothingToSelect && !selectedItems.length}
+        <span class="rz-relation__empty">
+          {t__('fields.nothing_to_select', relationConfig.label.plural.toLowerCase())}
         </span>
       {/if}
 
-      {#if !readOnly && !isFull && availableItems.length > 0}
+      {#if canSearch}
         <Command.InputSelect
           onfocus={() => (inputFocused = true)}
           onblur={() => setTimeout(() => (inputFocused = false), 150)}
-          ref={commandInput}
-          class={inputWithItemsClass}
+          bind:ref={commandInput}
+          class="rz-relation__search"
           bind:value={search}
           placeholder={relationConfig.label.search ||
             t__(`common.search_a`, relationConfig.label.singular)}
@@ -112,41 +140,28 @@
                 <span>{item.title}</span>
               </Command.Item>
             {/each}
-            <Command.Empty>Nothing to select</Command.Empty>
+            <Command.Empty>{t__('common.nothing_found')}</Command.Empty>
           </Command.List>
         {/if}
       {/if}
     </div>
   </Command.Root>
 
-  {#if relationConfig.access.create && relationConfig.access.create(user.attributes, {}) && !isFull}
-    <Button
-      class="rz-relation__create-button"
-      onclick={() => {
-        onRelationCreation();
-        create = true;
-      }}
-      variant="secondary"
-      size="sm"
-    >
-      {t__(`common.create_new`, relationConfig.label.singular || relationConfig.slug)}
-    </Button>
-
+  {#if canCreate}
     <Sheet.Root
-      bind:open={create}
-      onOpenChange={(bool) => {
-        create = bool;
-        if (bool === false) {
-          onRelationCreationCanceled();
-        }
+      bind:open={creating}
+      onOpenChange={(open) => {
+        if (!open) onRelationCreationCanceled();
       }}
     >
-      <Sheet.Trigger />
       <Sheet.Content style="--rz-page-gutter:var(--rz-size-6)" side="right" showCloseButton={false}>
         <Document
-          doc={createBlankDocument(relationConfig)}
+          doc={relationConfig.blank()}
           readOnly={false}
-          onClose={() => (create = false)}
+          onClose={() => {
+            creating = false;
+            onRelationCreationCanceled();
+          }}
           operation="create"
           {onNestedDocumentCreated}
           nestedLevel={formNestedLevel + 1}
@@ -156,72 +171,167 @@
   {/if}
 </div>
 
-<style>.rz-relation {
+<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. */
+.rz-relation {
     position: relative;
 
     :global {
-      > * + * {
-        margin-top: var(--rz-size-2);
-      }
       .rz-command {
         width: 100%;
+        border-radius: var(--rz-radius-lg);
+      }
+
+      .rz-command-list {
+        background-color: var(--rz-bg-float);
+        box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: calc(100% + var(--rz-size-1-5));
+        z-index: 20;
+        border-radius: var(--rz-radius-xl);
+      }
+
+      .rz-command-item {
+        min-height: var(--rz-size-7);
         border-radius: var(--rz-radius-md);
+        font-size: var(--rz-text-md);
+      }
 
-        .rz-command-input-select--with-items {
-          margin-left: var(--rz-size-2);
-        }
-
-        .rz-command-list {
-          border: var(--rz-border);
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: var(--rz-size-12);
-          z-index: 20;
-          border-radius: var(--rz-radius-md);
-          box-shadow: var(--rz-shadow-md);
-        }
-
-        .rz-command-item {
-          height: var(--rz-size-11);
-        }
+      .rz-command-item[aria-selected='true'] {
+        background-color: var(--rz-bg-hover);
       }
-    }
 
-    .rz-relation__no-items {
-      font-size: var(--rz-text-sm);
-      opacity: 0.4;
+      /* Nothing matches: one quiet line. */
+      .rz-command-empty {
+        padding: var(--rz-size-2) var(--rz-size-2-5);
+        color: var(--rz-fg-subtle);
+        font-size: var(--rz-text-sm);
+      }
     }
+  }
 
-    .rz-relation__list {
-      background-color: hsl(var(--rz-input-bg));
-      border: 1px solid var(--rz-input-border-color);
-      border-radius: var(--rz-radius-md);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--rz-size-1);
-      min-height: var(--rz-size-11);
-      padding: var(--rz-size-2) var(--rz-size-3);
-      transition: all 0.2s ease;
-    }
+  /* One well: the chips, then the search. */
+  .rz-relation__list {
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rz-size-1);
+    min-height: var(--rz-input-height);
+    padding: var(--rz-size-1);
+    border-radius: var(--rz-radius-lg);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
 
-    .rz-relation__list:global([data-focused]) {
-      outline: none;
-      /* --rz-ring-offset: 2px; */
-      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));
+    :global(.rz-relation__search) {
+      min-width: var(--rz-size-32);
+      padding-inline: var(--rz-size-2);
     }
+  }
+
+  .rz-relation__list:global([data-focused]) {
+    outline: none;
+    border-color: var(--rz-accent-border);
+    box-shadow: 0 0 0 3px var(--rz-ring);
+  }
+
+  .rz-relation__list:global([data-error]) {
+    outline: none;
+    border-color: var(--rz-danger);
+    box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
+  }
+
+  .rz-relation__list--readonly {
+    cursor: no-drop;
+  }
+
+  /* A picked document: its title, a link to it, and a way out. */
+  .rz-relation__item {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+    max-width: 100%;
+    height: var(--rz-size-6);
+    padding-inline: var(--rz-size-2) var(--rz-size-0-5);
+    border-radius: var(--rz-radius-md);
+    font-size: var(--rz-text-sm);
+  }
+
+  .rz-relation__list[data-many] .rz-relation__item {
+    cursor: grab;
+  }
+
+  .rz-relation__list--readonly .rz-relation__item {
+    padding-inline-end: var(--rz-size-2);
+  }
+
+  .rz-relation__item-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-radius: var(--rz-radius-sm);
 
-    .rz-relation__list:global([data-error]) {
-      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-alert) / var(--rz-ring-opacity, 1));
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 2px;
     }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-relation__remove {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--rz-size-5);
+    height: var(--rz-size-5);
+    border-radius: var(--rz-radius-sm);
+    color: var(--rz-fg-subtle);
+    transition:
+      color 0.15s,
+      background-color 0.15s;
 
-    .rz-relation__list--readonly {
-      cursor: no-drop;
+    &:hover {
+      background-color: var(--rz-bg-hover);
+      color: var(--rz-fg);
     }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-relation__empty {
+    padding-inline: var(--rz-size-2);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
   }
 </style>