rimecms 0.33.0 → 1.0.1

package/dist/fields/tree/component/TreeBlock.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { t__ } from '../../../core/i18n/index.js';
   import type { TreeBlock } from '../../../core/prototype/types.js';
   import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
   import { useOnce } from '../../../panel/util/once.svelte.js';
-  import { GripVertical } from '@lucide/svelte';
+  import { capitalize } from '../../../util/string.js';
+  import { ChevronDown, ChevronRight, GripVertical } from '@lucide/svelte';
   import { extractFieldName } from '../util.js';
+  import AddItemButton from './AddItemButton.svelte';
   import TreeBlockComp from './TreeBlock.svelte';
   import TreeBlockActions from './TreeBlockActions.svelte';
   import type { TreeBlockProps } from './props.js';
@@ -18,7 +21,13 @@
   );
   const position = $derived(parseInt(path.split('.').pop() || '0'));
   const itemValue = $derived(form.getValue<TreeBlock>(path));
+  const children = $derived(itemValue?._children ?? []);
   const parentPath = $derived(path.split('.').slice(0, -1).join('.'));
+  const siblingsCount = $derived(form.getValue<TreeBlock[]>(parentPath)?.length ?? 0);
+  /** Deep enough that nothing more goes inside. */
+  const canHoldItems = $derived(depth <= config.get.maxDepth);
+
+  // tree.0._children.2 -> 1.3
   const parentPathFormated = $derived.by(() => {
     if (depth === 1) return '';
     const [, relativePath] = extractFieldName(parentPath);
@@ -30,169 +39,374 @@
         .join('.') + '.'
     );
   });
+
+  /** Open: its fields, then the items inside it, under its header. */
   let isOpen = $state(true);
 
   const { once } = useOnce();
 
+  // A new item opens, its fields ready to fill; a saved one as it was left.
   once(() => {
-    if (!itemValue) {
-      isOpen = true;
-    } else if (itemValue) {
-      isOpen = (localStorage.getItem(`${itemValue.id}:open`) || 'false') === 'true';
-    }
+    if (!itemValue) return;
+    isOpen =
+      itemValue.id.startsWith('temp-') || localStorage.getItem(`${itemValue.id}:open`) === 'true';
   });
 
-  const toggleBlock = (e: MouseEvent) => {
-    if (e && e.stopPropagation) {
-      e.stopPropagation();
-    }
+  const toggleOpen = () => {
     isOpen = !isOpen;
-    if (itemValue) {
-      localStorage.setItem(`${itemValue.id}:open`, isOpen.toString());
-    }
+    if (itemValue) localStorage.setItem(`${itemValue.id}:open`, isOpen.toString());
   };
 
-  const renderBlockTitle = (position: string) => {
+  /** `renderTitle`, else the field's label and the item's place: `Links 1.2`. */
+  const title = $derived.by(() => {
+    const place = `${parentPathFormated}${position + 1}`;
     if (config.get.renderTitle) {
       try {
-        const title = config.get.renderTitle({ position, values: itemValue || {} });
-        if (title) return title;
+        const rendered = config.get.renderTitle({ position: place, values: itemValue || {} });
+        if (rendered) return rendered;
       } catch (err) {
         console.error(`Can't render title in treeBlock`, err);
       }
     }
-    return `${position} - ${config.get.label}`;
-  };
+    return `${config.get.label || capitalize(config.name)} ${place}`;
+  });
+
+  // Paths relative to the tree: the move of a sibling up or down.
+  const relative = (to: number) => `${parentPath}.${to}`.replace(`${treeState.path}.`, '');
+  const moveUp = $derived(
+    position > 0 ? () => treeState.moveItem(relative(position), relative(position - 1)) : undefined
+  );
+  const moveDown = $derived(
+    position < siblingsCount - 1
+      ? () => treeState.moveItem(relative(position), relative(position + 1))
+      : undefined
+  );
+
+  const bodyId = $derived(`rz-tree-item-body-${itemValue?.id ?? path}`);
 </script>
 
+<!-- A card: its header, then, open, its fields and the items inside it. -->
 <div
+  class="rz-tree-item"
   data-path={path}
-  data-tree-children={itemValue?._children.length || 0}
+  data-tree-children={children.length}
   data-sorting={sorting}
-  class="rz-tree-item"
+  data-open={isOpen ? '' : null}
+  data-deep={depth > 2 ? '' : null}
 >
-  <div class="rz-tree-item__grip">
-    <GripVertical size={15} />
-  </div>
+  <div class="rz-tree-item__header">
+    <span class="rz-tree-item__grip" aria-hidden="true"><GripVertical size={12} /></span>
 
-  <div class="rz-tree-item__content" class:rz-tree-item__content--closed={!isOpen}>
-    <header class="rz-tree-item__header">
-      <button type="button" onclick={toggleBlock} class="rz-tree-item__title-button">
-        <div class="rz-tree-item__title">
-          {renderBlockTitle(`${parentPathFormated}${position + 1}`)}
-        </div>
-      </button>
+    <button
+      type="button"
+      class="rz-tree-item__toggle"
+      aria-expanded={isOpen}
+      aria-controls={bodyId}
+      onclick={toggleOpen}
+    >
+      <span class="rz-tree-item__chevron">
+        {#if isOpen}<ChevronDown size={14} />{:else}<ChevronRight size={14} />{/if}
+      </span>
+      <span class="rz-tree-item__title">{title}</span>
+      {#if !isOpen && children.length}
+        <span class="rz-tree-item__count">{children.length}</span>
+      {/if}
+    </button>
 
-      <TreeBlockActions deleteItem={() => treeState.deleteItem(parentPath, position)} />
-    </header>
+    <TreeBlockActions
+      {moveUp}
+      {moveDown}
+      deleteItem={() => treeState.deleteItem(parentPath, position)}
+    />
+  </div>
 
-    <div class="rz-tree-item__fields" class:rz-tree-item__fields--hidden={!isOpen}>
+  <div class="rz-tree-item__body" id={bodyId} hidden={!isOpen}>
+    <div class="rz-tree-item__fields">
       <RenderFields fields={config.get.fields} {path} {form} />
     </div>
-  </div>
 
-  {#if depth <= config.get.maxDepth}
-    <div data-path={path} data-tree-depth={depth} data-tree-key={treeKey} class="rz-tree__list">
-      {#if itemValue && itemValue._children && itemValue._children.length}
-        {#each itemValue._children as child, index (child.id)}
-          <TreeBlockComp
-            {treeState}
-            {form}
-            {sorting}
-            {treeKey}
-            path="{path}._children.{index}"
-            {config}
-          />
-        {/each}
-      {/if}
-    </div>
-  {:else}
-    <div class="rz-tree-item__list-placeholder"></div>
-  {/if}
+    {#if canHoldItems}
+      <div class="rz-tree-item__inside">
+        <div class="rz-tree-item__inside-head">
+          <span class="rz-tree-item__inside-title">
+            {t__('fields.inside', title)}{#if children.length}&nbsp;· {children.length}{/if}
+          </span>
+          <AddItemButton
+            class="rz-tree-item__add"
+            size="sm"
+            fields={config.get.fields}
+            addItem={(values) => treeState.addItem(values, `${path}._children`)}
+          >
+            {t__('fields.add')}
+          </AddItemButton>
+        </div>
+
+        <div
+          class="rz-tree__list"
+          data-path={path}
+          data-tree-depth={depth}
+          data-tree-key={treeKey}
+          data-empty-label={t__('fields.nothing_inside')}
+        >
+          {#each children as child, index (child.id)}
+            <TreeBlockComp
+              {treeState}
+              {form}
+              {sorting}
+              {treeKey}
+              path="{path}._children.{index}"
+              {config}
+            />
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
 </div>
 
-<style>.rz-tree-item {
+<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. */
+/* A raised card; one inside another, a well; from the third level, a hairline alone. */
+  .rz-tree-item {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    border-radius: var(--rz-radius-xl);
+  }
+
+  .rz-tree-item :global(.rz-tree-item) {
+    background-color: var(--rz-bg-well);
+    box-shadow: 0 0 0 1px var(--rz-border);
+  }
+
+  .rz-tree-item[data-deep] {
+    background-color: transparent;
+  }
+
+  /* Inside a group, a block or a stage card: a hairline, no second fill. */
+  :global(:is(.rz-group-field__content, .rz-block__fields, .rz-stage__fields)) .rz-tree-item {
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--rz-border);
+  }
+
+  /* [grip][chevron title count][⋯] */
+  .rz-tree-item__header {
     position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--rz-row-height);
+    padding-right: var(--rz-size-2);
+  }
+
+  .rz-tree-item[data-open] > .rz-tree-item__header {
+    box-shadow: inset 0 -1px 0 var(--rz-border);
   }
 
   .rz-tree-item__grip {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    align-self: stretch;
+    width: var(--rz-size-6);
+    color: var(--rz-fg-subtle);
+    opacity: 0.5;
     cursor: grab;
-    position: absolute;
-    top: 1rem;
-    left: -1rem;
+    transition: opacity 0.15s;
   }
 
-  .rz-tree-item__header:hover {
-    > :global(.rz-tree-item-actions) {
-      opacity: 1;
-      pointer-events: all;
-    }
+  .rz-tree-item__header:hover .rz-tree-item__grip {
+    opacity: 1;
   }
 
-  .rz-tree-item__header {
+  /* The chevron and the title are one button: it opens the fields and the items inside. */
+  .rz-tree-item__toggle {
     display: flex;
+    flex: 1;
     align-items: center;
-    justify-content: space-between;
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-md) var(--rz-radius-md) 0 0;
-    padding: var(--rz-size-2) var(--rz-size-2) var(--rz-size-2) var(--rz-size-4);
-    height: var(--rz-row-height);
-    flex-direction: row;
-    background-color: hsl(var(--rz-row-bg));
-    width: 100%;
-  }
-
-  .rz-tree-item__content--closed {
-    .rz-tree-item__header {
-      border-radius: var(--rz-radius-md);
-    }
-    &:global(:has(.rz-field-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));
+    gap: var(--rz-size-2);
+    min-width: 0;
+    align-self: stretch;
+    font-size: var(--rz-text-md);
+    text-align: left;
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: -2px;
     }
   }
 
-  .rz-tree-item__content + .rz-tree-item__list-placeholder,
-  .rz-tree-item__content + .rz-tree__list {
-    margin-top: 1rem;
-    min-height: 5px;
+  .rz-tree-item__chevron {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--rz-size-4);
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-tree-item__toggle:hover .rz-tree-item__chevron {
+    color: var(--rz-fg);
   }
 
   .rz-tree-item__title {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* A closed item hiding an error: its title says so. */
+  .rz-tree-item:not([data-open]):has(> .rz-tree-item__body :global(.rz-field-error))
+    > .rz-tree-item__header
+    .rz-tree-item__title {
+    color: var(--rz-danger);
+  }
+
+  /* How many items a closed one holds. */
+  .rz-tree-item__count {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: calc(4.5 * var(--rz-unit));
+    padding-inline: var(--rz-size-1-5);
+    border-radius: var(--rz-radius-full);
+    background-color: var(--rz-bg-well);
+    box-shadow: inset 0 0 0 1px var(--rz-border);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-xs);
+  }
+
+  .rz-tree-item__body[hidden] {
+    display: none;
+  }
+
+  .rz-tree-item__fields {
+    --rz-fields-padding: var(--rz-size-3-5);
+    --rz-fields-gap: var(--rz-size-5);
+    padding: var(--rz-size-4);
+  }
+
+  /* The items inside: a small heading, then their cards, inset a little. */
+  .rz-tree-item__inside {
+    padding: 0 var(--rz-size-3) var(--rz-size-3);
+  }
+
+  .rz-tree-item__inside-head {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: var(--rz-size-2);
+    min-height: var(--rz-size-7);
+    padding-left: var(--rz-size-1);
+    margin-bottom: var(--rz-size-1-5);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+
+    :global(.rz-add-item-button.rz-button) {
+      height: var(--rz-size-6);
+      font-size: var(--rz-text-sm);
+    }
   }
 
-  .rz-tree-item__fields {
-    --rz-fields-padding: var(--rz-size-4);
-    background-color: var(--rz-collapse-fields-content-bg);
-    border: var(--rz-border);
-    border-top: none;
-    border-radius: 0 0 var(--rz-radius-md) (--rz-radius-md);
-    padding-top: max(var(--rz-fields-padding), var(--rz-size-4));
-    padding-bottom: max(var(--rz-fields-padding), var(--rz-size-4));
-    flex: 1;
+  .rz-tree-item__inside-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .rz-tree-item__fields--hidden {
-    display: none;
+  .rz-tree__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-2);
+  }
+
+  /* Nothing inside: a dashed zone to drop an item in. */
+  .rz-tree__list:not(:has(> :global(.rz-tree-item)))::before {
+    content: attr(data-empty-label);
+    display: grid;
+    place-items: center;
+    min-height: var(--rz-size-10);
+    padding: 0 var(--rz-size-3);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-lg);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    text-align: center;
   }
 
-  .rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
+  /* Picked up: the card shrinks to its header. */
+  .rz-tree-item:global(.sortable-chosen) > .rz-tree-item__body {
     display: none;
   }
 
-  .rz-tree-item__content--closed:has(:global(.rz-field-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));
+  /* Where it lands: its place kept, an accent line across it. */
+  :global(.rz-field-tree .rz-tree-item.rz-tree-item--landing) {
+    position: relative;
+    background-color: transparent;
+    box-shadow: none;
+
+    > * {
+      visibility: hidden;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+    }
+
+    &::before {
+      left: 0;
+      right: 0;
+      height: 2px;
+      margin-top: -1px;
+      border-radius: 2px;
+      background-color: var(--rz-accent);
+    }
+
+    &::after {
+      left: -4px;
+      width: 8px;
+      height: 8px;
+      margin-top: -4px;
+      border: 2px solid var(--rz-accent);
+      border-radius: var(--rz-radius-full);
+      background-color: var(--rz-bg-page);
+    }
   }
 
-  :global(.rz-tree-item-actions) {
-    opacity: 0;
-    pointer-events: none;
+  /* In hand: its header, floating over the page. */
+  :global(.rz-tree-item.rz-tree-item--floating) {
+    opacity: 1 !important;
+    background-color: var(--rz-bg-float);
+    box-shadow:
+      0 0 0 1px var(--rz-border-strong),
+      var(--rz-shadow-float);
+    cursor: grabbing;
+
+    > .rz-tree-item__body {
+      display: none;
+    }
+    > .rz-tree-item__header {
+      box-shadow: none;
+    }
   }
 </style>

package/dist/fields/tree/component/TreeBlockActions.svelte

@@ -1,23 +1,87 @@
 <script lang="ts">
-  import { Trash2 } from '@lucide/svelte';
-  import { Button } from '../../../panel/components/ui/button/index.js';
+  import { t__ } from '../../../core/i18n/index.js';
+  import Button from '../../../panel/components/ui/button/button.svelte';
+  import * as DropdownMenu from '../../../panel/components/ui/dropdown-menu/index.js';
+  import { ArrowDown, ArrowUp, Ellipsis, Trash2 } from '@lucide/svelte';
 
   type Props = {
     deleteItem: () => void;
+    /** Absent on the first item of its list. */
+    moveUp?: () => void;
+    /** Absent on the last item of its list. */
+    moveDown?: () => void;
   };
 
-  const { deleteItem }: Props = $props();
+  const { deleteItem, moveUp, moveDown }: Props = $props();
 </script>
 
+<!-- A ghost ⋯ on the row, its menu what the item can do; the moves are the keyboard's drag. -->
 <div class="rz-tree-item-actions">
-  <Button variant="ghost" size="icon-sm" onclick={deleteItem}>
-    <Trash2 size={11} />
-  </Button>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          icon={Ellipsis}
+          title={t__('fields.item_actions')}
+          aria-label={t__('fields.item_actions')}
+          {...props}
+        />
+      {/snippet}
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content align="end">
+        <DropdownMenu.Item disabled={!moveUp} onclick={() => moveUp?.()}>
+          <ArrowUp size="12" />
+          {t__('fields.move_up')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item disabled={!moveDown} onclick={() => moveDown?.()}>
+          <ArrowDown size="12" />
+          {t__('fields.move_down')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item class="rz-tree-item-actions__delete" onclick={deleteItem}>
+          <Trash2 size="12" />
+          {t__('fields.delete_item')}
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
 </div>
 
 <style>
+  /* Quiet until the row is hovered or the menu is open. */
   .rz-tree-item-actions {
+    --rz-button-ghost-fg: var(--rz-fg-subtle);
     display: flex;
-    gap: var(--rz-size-2);
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.15s;
+
+    :global(.rz-button) {
+      width: var(--rz-size-7);
+      height: var(--rz-size-7);
+    }
+    :global(.rz-button:hover),
+    :global(.rz-button[data-state='open']) {
+      color: var(--rz-fg);
+    }
+  }
+
+  :global(.rz-tree-row:is(:hover, :focus-within)) .rz-tree-item-actions,
+  .rz-tree-item-actions:has(:global([data-state='open'])) {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .rz-tree-item-actions {
+      opacity: 1;
+    }
+  }
+
+  :global(.rz-dropdown-item.rz-tree-item-actions__delete) {
+    color: var(--rz-danger);
   }
 </style>

package/dist/fields/tree/component/TreeBlockActions.svelte.d.ts

@@ -1,5 +1,9 @@
 type Props = {
     deleteItem: () => void;
+    /** Absent on the first item of its list. */
+    moveUp?: () => void;
+    /** Absent on the last item of its list. */
+    moveDown?: () => void;
 };
 declare const TreeBlockActions: import("svelte").Component<Props, {}, "">;
 type TreeBlockActions = ReturnType<typeof TreeBlockActions>;

package/dist/fields/tree/component/props.d.ts

@@ -11,7 +11,8 @@ export type TreeBlockProps = {
     path: string;
     sorting: boolean;
     treeState: {
-        addItem: (emptyValues: Dic) => void;
+        /** At the end of the tree, or of the list `atPath` names: `links.0._children`. */
+        addItem: (emptyValues: Dic, atPath?: string) => void;
         moveItem: (fromPath: string, toPath: string) => void;
         deleteItem: (path: string, index: number) => void;
         readonly path: string;

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

@@ -1,4 +1,4 @@
-import { FieldBuilder } from '../../core/fields/builders/field-builder.js';
+import { FieldBuilder, type FieldNode, type ValueNode } from '../../core/fields/builders/field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { Field, FormField } from '../types.js';
 import type { Dic } from '../../util/types.js';
@@ -66,11 +66,23 @@ export declare class TreeBuilder extends FormFieldBuilder<TreeField> {
         defaultValue?: import("../types.js").DefaultValueFn<any> | unknown;
         isEmpty: (value: unknown) => boolean;
         root?: boolean;
+        index?: boolean;
         maxDepth: number;
         renderTitle?: TreeFieldBlockRenderTitle;
         addItemLabel: string;
     };
     protected generateType(): string;
+    /** One branch, nesting into itself through `_children`, in a table of its own. */
+    protected nodes(): FieldNode[];
+    private get storage();
+    /**
+     * The rows a value has, the nesting flattened into the segment.
+     *
+     * ```
+     * [{ label: 'a', _children: [{ label: 'b' }] }]  ->  0  ·  0._children.0
+     * ```
+     */
+    protected nodesFor(value: unknown): ValueNode[];
 }
 /**
  * Checks if a field is a tree field.