rimecms 0.33.0 → 1.0.1

package/dist/fields/link/component/RessourceInput.svelte

@@ -127,27 +127,45 @@
   </Command.Root>
 </div>
 
-<style>
-  .rz-ressource-input {
+<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-ressource-input {
     position: relative;
     width: 100%;
 
     :global {
       .rz-command {
         width: 100%;
+        height: 100%;
         border-radius: var(--rz-radius-md);
+        background-color: transparent;
       }
 
       .rz-command-list {
+        background-color: var(--rz-bg-float);
+        box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
         border-radius: var(--rz-radius-md);
         position: absolute;
         left: 0;
         right: 0;
-        top: var(--rz-size-12);
+        top: calc(100% + var(--rz-size-1-5));
         z-index: 20;
-        box-shadow: var(--rz-shadow-md);
         max-height: var(--rz-size-36);
-        border: var(--rz-border);
       }
 
       .rz-command-input-select {
@@ -160,32 +178,16 @@
     }
   }
 
+  /* Inside the link's well: the picked document, or the search for one. */
   .rz-ressource-input__wrapper {
-    background-color: hsl(var(--rz-input-bg));
     display: flex;
-    height: var(--rz-size-11);
-    flex-wrap: wrap;
+    height: 100%;
     align-items: center;
     gap: var(--rz-size-1);
-
-    border-top: 0;
-    padding: var(--rz-size-2) var(--rz-size-3);
+    padding: 0 var(--rz-size-1-5);
   }
 
   .rz-ressource-input__wrapper--readonly {
     cursor: no-drop;
   }
-
-  .rz-ressource-input__wrapper:global([data-focused]) {
-    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-spot) / var(--rz-ring-opacity, 1));
-    z-index: 20;
-  }
-
-  .rz-ressource-input__wrapper: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));
-  }
 </style>

package/dist/fields/link/index.d.ts

@@ -54,8 +54,9 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
         } | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
         layout: "compact" | "default";
-        types: "tel"[] | "email"[] | "url"[] | "anchor"[];
+        types: "url"[] | "email"[] | "tel"[] | "anchor"[];
     } & {
         component: import("svelte").Component<any>;
         cell?: import("svelte").Component<{

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

@@ -26,11 +26,9 @@ export const populateRessourceURL = async (link, { event, documentId, operation
                     locale: locale,
                     select: ['url']
                 });
+            // An area's url is built on read from the whole document: no `select`.
             case rime.config.isArea(slug):
-                return await rime.area(slug).find({
-                    locale: locale,
-                    select: ['url']
-                });
+                return await rime.area(slug).find({ locale: locale });
         }
     }
     const [error, doc] = await trycatch(getRessource(link.type));

package/dist/fields/number/component/Number.svelte

@@ -45,76 +45,94 @@
   <Field.Error error={field.error} />
 </fieldset>
 
-<style>
+<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. */
+/* One well: the value, then the steppers. */
   .rz-number-field__input-wrapper {
     width: 6rem;
     display: flex;
-    height: var(--rz-size-11);
+    height: var(--rz-input-height);
     align-items: center;
     border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
+    &:focus-within {
+      outline: none;
+      border-color: var(--rz-accent-border);
+      box-shadow: 0 0 0 3px var(--rz-ring);
+    }
   }
 
   .rz-number-field__input {
-    background-color: hsl(var(--rz-input-bg));
+    background-color: transparent;
     height: 100%;
     width: 100%;
     flex: 1;
     justify-content: center;
     border-top-left-radius: var(--rz-radius-lg);
     border-bottom-left-radius: var(--rz-radius-lg);
-    border: 1px solid var(--rz-input-border-color);
+    border: 0;
     text-align: center;
     transition: all 0.2s ease;
   }
 
   .rz-number-field__input:focus-visible {
-    position: relative;
-    z-index: 10;
-    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));
     outline: none;
   }
 
+  /* The steppers: a column of their own, a hairline before it and between them. */
   .rz-number-field__controls {
     display: flex;
     flex-direction: column;
-    height: var(--rz-size-11);
+    height: 100%;
+    border-left: 1px solid var(--rz-border);
   }
 
   .rz-number-field__chevron {
-    background-color: hsl(var(--rz-input-bg));
     display: flex;
     align-items: center;
     justify-content: center;
     width: var(--rz-size-8);
     flex: 1;
-    border-right: 1px solid var(--rz-input-border-color);
+    color: var(--rz-fg-subtle);
     transition: all 0.2s ease;
   }
 
   .rz-number-field__chevron:hover {
-    background-color: hsl(var(--rz-gray-9));
+    background-color: var(--rz-bg-hover);
+    color: var(--rz-fg);
   }
 
   .rz-number-field__chevron: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));
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
     position: relative;
     z-index: 10;
-    outline: none;
   }
 
   .rz-number-field__chevron--up {
-    border-top: 1px solid var(--rz-input-border-color);
     border-top-right-radius: var(--rz-radius-lg);
-    border-bottom: 1px solid var(--rz-input-border-color);
+    border-bottom: 1px solid var(--rz-border);
   }
 
   .rz-number-field__chevron--down {
     border-bottom-right-radius: var(--rz-radius-lg);
-    border-bottom: 1px solid var(--rz-input-border-color);
   }
 
   /* Chrome, Safari, Edge, Opera */

package/dist/fields/number/component/number.css

@@ -2,77 +2,79 @@
   width: 6rem;
 }
 
+/* One well: the value, then the steppers. */
 .rz-number__input-wrapper {
   display: flex;
   height: var(--rz-size-11);
   align-items: center;
   border-radius: var(--rz-radius-lg);
+  background-color: var(--rz-bg-well);
+  border: 1px solid var(--rz-border);
+  &:hover {
+    border-color: var(--rz-border-strong);
+  }
+  &:focus-within {
+    outline: none;
+    border-color: var(--rz-accent-border);
+    box-shadow: 0 0 0 3px var(--rz-ring);
+  }
 }
 
 .rz-number__input {
-  background-color: hsl(var(--rz-input-bg));
+  background-color: transparent;
   height: 100%;
   width: 100%;
   flex: 1;
   justify-content: center;
   border-top-left-radius: var(--rz-radius-lg);
   border-bottom-left-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
+  border: 0;
   text-align: center;
   font-size: var(--rz-text-sm);
   transition: all 0.2s ease;
 }
 
 .rz-number__input:focus-visible {
-  /* --rz-ring-offset: 1px; */
-  position: relative;
-  z-index: 10;
-  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));
   outline: none;
 }
 
+/* The steppers: a column of their own, a hairline before it and between them. */
 .rz-number__controls {
   display: flex;
   flex-direction: column;
-  height: var(--rz-size-11);
+  height: 100%;
+  border-left: 1px solid var(--rz-border);
 }
 
 .rz-number__chevron {
-  background-color: hsl(var(--rz-input-bg));
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--rz-size-8);
   flex: 1;
-  border-right: var(--rz-border);
+  color: var(--rz-fg-subtle);
   transition: all 0.2s ease;
 }
 
 .rz-number__chevron:hover {
-  background-color: hsl(var(--rz-gray-5));
+  background-color: var(--rz-bg-hover);
+  color: var(--rz-fg);
 }
 
 .rz-number__chevron:focus-visible {
-  /* --rz-ring-offset: 1px; */
-  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));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
   position: relative;
   z-index: 10;
-  outline: none;
 }
 
 .rz-number__chevron--up {
-  border-top: var(--rz-border);
   border-top-right-radius: var(--rz-radius-lg);
-  border-bottom: var(--rz-border);
+  border-bottom: 1px solid var(--rz-border);
 }
 
 .rz-number__chevron--down {
   border-bottom-right-radius: var(--rz-radius-lg);
-  border-bottom: var(--rz-border);
 }
 
 /* Chrome, Safari, Edge, Opera */

package/dist/fields/number/index.d.ts

@@ -45,6 +45,7 @@ export declare class NumberFieldBuilder extends FormFieldBuilder<NumberField> {
         defaultValue?: number | DefaultValueFn<number> | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
         min?: number | undefined;
         max?: number | undefined;
     } & {

package/dist/fields/radio/component/Radio.svelte

@@ -55,13 +55,25 @@
       .rz-radio__input {
         margin-right: var(--rz-size-2);
       }
+      /* An option reads as plain text, not as a field's name. */
       .rz-radio__label {
         cursor: pointer;
+        color: var(--rz-fg);
+        font-size: var(--rz-text-md);
+        font-variation-settings: 'wght' 400;
+        font-weight: 400;
       }
     }
     .rz-radio__option {
       display: flex;
       align-items: center;
+      min-height: var(--rz-size-7);
+    }
+  }
+
+  .rz-field-radio :global {
+    .rz-radio-row-group {
+      width: 100%;
     }
   }
 </style>

package/dist/fields/radio/index.js

@@ -4,7 +4,7 @@ export class RadioFieldBuilder extends PickOneFieldBuilder {
     constructor(name) {
         super(name, 'radio');
         this.field.many = false;
-        this.field.layout = 'default';
+        this.field.layout = 'row';
     }
     get component() {
         return Radio;

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

@@ -1,17 +1,23 @@
 <script lang="ts">
+  import { t__ } from '../../../core/i18n/index.js';
   import { isUploadConfig } from '../../../core/prototype/collection/upload/util/config.js';
   import type { GenericDoc } from '../../../core/prototype/types.js';
   import { apiUrl, panelPath } from '../../../core/routes/util.js';
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
+  import Button from '../../../panel/components/ui/button/button.svelte';
   import { getConfigContext } from '../../../panel/context/config.svelte.js';
   import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
   import type { FormContext } from '../../../panel/context/form.svelte.js';
   import { getLocaleContext } from '../../../panel/context/locale.svelte';
+  import { getUserContext } from '../../../panel/context/user.svelte.js';
   import { moveItem } from '../../../util/array.js';
   import { snapshot } from '../../../util/state.js';
+  import { Images, Plus, TextSearch } from '@lucide/svelte';
+  import { untrack } from 'svelte';
   import { getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
   import type { Relation, RelationFieldBuilder } from '../index.js';
+  import { toRelationValue } from '../value.js';
   import Default from './default/Default.svelte';
   import type { RelationFieldItem } from './types.js';
   import Upload from './upload/Upload.svelte';
@@ -136,6 +142,21 @@
     return null;
   };
 
+  // The value changed elsewhere, a render beside the field picking in place: the picks follow.
+  // A change of the field's own ends here equal to its picks and changes nothing.
+  $effect(() => {
+    if (!initialized) return;
+    const ids = initialValue.map((relation) => relation.documentId);
+    untrack(() => {
+      const current = selectedItems.map((item) => item.documentId);
+      if (ids.join() === current.join()) return;
+      const itemOf = (id: string) =>
+        selectedItems.find((item) => item.documentId === id) ??
+        initialItems.find((item) => item.documentId === id);
+      selectedItems = ids.map(itemOf).filter((item) => !!item);
+    });
+  });
+
   const getAvailableItems = () => {
     return initialItems.filter(
       (initialItem) =>
@@ -149,26 +170,17 @@
 
   // Actions
   const buildRelationFieldValue = () => {
-    const relations = selectedItems.map((item, index) => {
-      let relation: Omit<Relation, 'ownerId'> = {
-        id: item.id,
-        relationTo: config.get.relationTo,
-        path,
-        position: index,
-        documentId: item.documentId
-      };
-      if (config.get.localized) {
-        relation.locale = locale.code;
-      }
-      if ('isLive' in form && form.isLive) {
-        if (item && item.livePreview) {
-          relation.livePreview = snapshot(item.livePreview);
-        }
-      }
-      return relation;
+    const live = 'isLive' in form && form.isLive;
+    const items = selectedItems.map((item) => ({
+      ...item,
+      livePreview: live && item.livePreview ? snapshot(item.livePreview) : undefined
+    }));
+    return toRelationValue(items, {
+      relationTo: config.get.relationTo,
+      path,
+      locale: config.get.localized ? locale.code : undefined,
+      live
     });
-
-    return relations;
   };
 
   // Disabled the parent form (this one)
@@ -216,38 +228,155 @@
     field.value = buildRelationFieldValue();
   };
 
+  /**
+   * The whole selection at once, from the upload picker. A document the field did not fetch yet,
+   * uploaded meanwhile or found in a folder, comes from the docs the picker has shown.
+   */
+  const setValue = (ids: string[], seen: GenericDoc[]) => {
+    const itemOf = (id: string) =>
+      selectedItems.find((item) => item.documentId === id) ??
+      initialItems.find((item) => item.documentId === id) ??
+      (() => {
+        const doc = seen.find((candidate) => candidate.id === id);
+        return doc ? documentToRelationFieldItem(doc) : undefined;
+      })();
+    selectedItems = ids.map(itemOf).filter((item) => !!item);
+    field.value = buildRelationFieldValue();
+  };
+
   const removeValue = async (incomingId: string) => {
     selectedItems = selectedItems.filter((item) => item.documentId !== incomingId);
     field.value = buildRelationFieldValue();
   };
 
+  /** Documents made from files dropped on the field: listed from now on, and picked. */
+  const addUploaded = (docs: GenericDoc[]) => {
+    if (!docs.length) return;
+    ressource.data?.docs.push(...docs);
+    const items = docs.map(documentToRelationFieldItem);
+    selectedItems = config.get.many ? [...selectedItems, ...items] : items.slice(0, 1);
+    field.value = buildRelationFieldValue();
+  };
+
   const isRelationToUpload = isUploadConfig(relationConfig);
-  const RelationComponent = isRelationToUpload ? Upload : Default;
+  /** The library picker of an upload relation, opened from the label row. */
+  let browsing = $state(false);
+
+  /** The other relations: the label row picks and creates through the list below it. */
+  let list = $state<ReturnType<typeof Default>>();
+  const user = getUserContext();
+  const canCreate = $derived(!!relationConfig.access.create?.(user.attributes, {}));
+  const canChoose = $derived(!isFull && availableItems.length > 0);
+
+  const shared = $derived({
+    path,
+    many: !!config.get.many,
+    hasError: !!field.error,
+    formNestedLevel: 'nestedLevel' in form ? form.nestedLevel : 0,
+    readOnly: form.readOnly,
+    nothingToSelect,
+    onRelationCreated,
+    onRelationCreationCanceled,
+    onRelationCreation,
+    isFull,
+    stamp,
+    addValue,
+    setValue,
+    addUploaded,
+    availableItems,
+    selectedItems,
+    removeValue,
+    relationConfig,
+    onOrderChange
+  });
 </script>
 
 <fieldset class="rz-field-relation {config.get.className || ''}" use:fieldset={field}>
-  <Field.Label {config} for={path || config.name} />
+  <div class="rz-field-relation__head">
+    <Field.Label {config} for={path || config.name} />
+    {#if !form.readOnly}
+      <div class="rz-field-relation__actions">
+        {#if isRelationToUpload}
+          <Button variant="ghost" size="sm" icon={Images} onclick={() => (browsing = true)}>
+            {t__('fields.choose_from_library')}
+          </Button>
+        {:else}
+          {#if canChoose}
+            <Button variant="ghost" size="sm" icon={TextSearch} onclick={() => list?.choose()}>
+              {t__('fields.choose')}
+            </Button>
+          {/if}
+          {#if canCreate && !isFull}
+            <Button variant="ghost" size="sm" icon={Plus} onclick={() => list?.create()}>
+              {t__('common.create_new', relationConfig.label.singular || relationConfig.slug)}
+            </Button>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+  </div>
   <Field.Hint {config} />
 
-  <RelationComponent
-    {path}
-    many={!!config.get.many}
-    hasError={!!field.error}
-    formNestedLevel={'nestedLevel' in form ? form.nestedLevel : 0}
-    readOnly={form.readOnly}
-    {nothingToSelect}
-    {onRelationCreated}
-    {onRelationCreationCanceled}
-    {onRelationCreation}
-    {isFull}
-    {stamp}
-    {addValue}
-    {availableItems}
-    {selectedItems}
-    {removeValue}
-    {relationConfig}
-    {onOrderChange}
-  />
+  {#if isRelationToUpload}
+    <Upload {...shared} bind:browsing />
+  {:else}
+    <Default {...shared} {canCreate} bind:this={list} />
+  {/if}
 
   <Field.Error error={field.error} />
 </fieldset>
+
+<style>
+  .rz-field-relation__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-2);
+    min-height: var(--rz-size-7);
+    margin-bottom: var(--rz-size-2);
+
+    :global(.rz-field-label) {
+      margin-bottom: 0;
+      min-width: 0;
+    }
+  }
+
+  /* Ghost buttons on the label's line, quiet until hovered. */
+  .rz-field-relation__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+    margin-right: calc(-2 * var(--rz-unit));
+
+    :global(.rz-button) {
+      height: var(--rz-size-6);
+      gap: var(--rz-size-1-5);
+      padding-inline: var(--rz-size-2);
+      color: var(--rz-fg-muted);
+      font-size: var(--rz-text-sm);
+    }
+
+    :global(.rz-button__icon) {
+      width: auto;
+      height: auto;
+      color: var(--rz-fg-subtle);
+    }
+
+    :global(.rz-button:hover:not(:disabled)),
+    :global(.rz-button:hover:not(:disabled) .rz-button__icon) {
+      color: var(--rz-fg);
+    }
+  }
+
+  .rz-field-relation__head + :global(.rz-field-hint) {
+    margin-top: 0;
+    margin-bottom: var(--rz-size-2);
+  }
+
+  /* The error sits under the field, clear of the buttons on the label's line. */
+  .rz-field-relation > :global(.rz-field-error) {
+    position: static;
+    display: inline-block;
+    margin-top: var(--rz-size-1-5);
+  }
+</style>