rimecms 0.33.0 → 1.0.0

package/dist/fields/blocks/component/Blocks.svelte

@@ -7,60 +7,94 @@
   import Button from '../../../panel/components/ui/button/button.svelte';
   import { getLocaleContext } from '../../../panel/context/locale.svelte';
   import { useSortable } from '../../../panel/util/Sortable.js';
-  import { Download } from '@lucide/svelte';
-  import Sortable from 'sortablejs';
-  import { onDestroy } from 'svelte';
+  import { normalizeFieldPath } from '../../../util/string.js';
+  import { Download, Maximize2 } from '@lucide/svelte';
+  import { onMount } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
   import AddBlockButton from './AddBlockButton.svelte';
   import Block from './Block.svelte';
+  import { getBlocksFocusContext } from './focus/focus.svelte.js';
   import type { BlocksProps } from './props.js';
 
   const { path, config, form }: BlocksProps = $props();
 
-  let blockList: HTMLElement;
+  /** The document's focus mode, absent in a nested form. */
+  const focus = getBlocksFocusContext();
+  const list = $derived(normalizeFieldPath(path));
+  const summary = $derived(config.get.layout === 'summary' && !!focus);
 
   const field = $derived(form.useField(path, config));
   const blockState = $derived(form.useBlocks(path));
-  const hasBlocks = $derived(blockState.blocks && blockState.blocks.length);
-  let sortingInitialized = $state(false);
+  const count = $derived(blockState.blocks.length);
   let sorting = $state(false);
-  let sortableInstance = $state<any>(null);
-  let blocksComponents: ReturnType<typeof Block>[] = $state([]);
 
   const locale = getLocaleContext();
 
+  /**
+   * The blocks shown open, by id; the others are rows. The browser keeps the open ones:
+   * `rz-block-open:<id>` is set while a block is open.
+   */
+  const OPEN_KEY = 'rz-block-open:';
+  const opened = new SvelteSet<string>();
+  const anyOpen = $derived(blockState.blocks.some((block) => opened.has(block.id)));
+
+  onMount(() => {
+    for (const block of blockState.blocks) {
+      if (localStorage.getItem(OPEN_KEY + block.id)) opened.add(block.id);
+    }
+  });
+
+  function setOpen(id: string, open: boolean) {
+    if (open) {
+      opened.add(id);
+      localStorage.setItem(OPEN_KEY + id, '1');
+    } else {
+      opened.delete(id);
+      localStorage.removeItem(OPEN_KEY + id);
+    }
+  }
+
+  function toggleAll() {
+    const open = !anyOpen;
+    for (const block of blockState.blocks) setOpen(block.id, open);
+  }
+
+  /** A block added from the form opens, its fields ready to fill. */
+  const add = (options: Omit<GenericBlock, 'id' | 'path'>) => {
+    blockState.addBlock({ ...options, position: count });
+    const added = blockState.blocks.at(-1);
+    if (added) setOpen(added.id, true);
+  };
+
+  /** The copy opens when the block it copies is open. */
+  const duplicate = (index: number) => {
+    const source = blockState.blocks[index];
+    blockState.duplicateBlock(index);
+    const copy = blockState.blocks[index + 1];
+    if (source && copy && opened.has(source.id)) setOpen(copy.id, true);
+  };
+
   // svelte-ignore state_referenced_locally
-  const sortableOptions: Sortable.Options = {
+  const { sortable } = useSortable({
     handle: '.rz-block__grip',
     group: path,
     animation: 150,
     onStart: () => (sorting = true),
     onUnchoose: () => (sorting = false),
-    onEnd: function (evt) {
-      const { oldIndex, newIndex } = evt;
+    onEnd: (event) => {
+      const { oldIndex, newIndex } = event;
       if (oldIndex !== undefined && newIndex !== undefined) {
         blockState.moveBlock(oldIndex, newIndex);
       }
       sorting = false;
     }
-  };
-
-  const add = (options: Omit<GenericBlock, 'id' | 'path'>) => {
-    blockState.addBlock({
-      ...options,
-      position: blockState.blocks.length
-    });
-  };
-
-  const shouldInit = $derived(!sortingInitialized && blockState.blocks.length > 0);
-  const { sortable } = useSortable(sortableOptions);
-
-  $effect(() => {
-    if (shouldInit) {
-      sortableInstance = sortable(blockList);
-      sortingInitialized = true;
-    }
   });
 
+  function sortableList(node: HTMLElement) {
+    const instance = sortable(node);
+    return { destroy: () => instance.destroy() };
+  }
+
   function getConfigByBlockType(type: string): BlocksFieldBlock {
     const blockConfig = config.get.blocks.find((b) => type === b.name);
     if (!blockConfig) {
@@ -68,104 +102,227 @@
     }
     return blockConfig.block;
   }
-
-  function collapseAll() {
-    blocksComponents.forEach((comp) => comp.setCollapse(true));
-  }
-  function expandAll() {
-    blocksComponents.forEach((comp) => comp.setCollapse(false));
-  }
-
-  onDestroy(() => {
-    if (sortableInstance) sortableInstance.destroy();
-  });
 </script>
 
 <fieldset class="rz-field-blocks {config.get.className || ''}" use:fieldset={field}>
-  <Field.Error error={field.error} />
+  <!-- The label's line: its name, and on the right the ways to see the blocks. -->
+  <div class="rz-blocks__header">
+    <Field.Label {config} />
+    <div class="rz-blocks__actions">
+      {#if !summary && count > 1}
+        <Button variant="ghost" size="sm" onclick={toggleAll}>
+          {anyOpen ? t__('fields.collapse_all') : t__('fields.expand_all')}
+        </Button>
+      {/if}
+      {#if focus && !summary}
+        <Button
+          variant="ghost"
+          size="sm"
+          icon={Maximize2}
+          onclick={() => focus.open(list)}
+          data-focus-open={list}
+        >
+          {t__('fields.open_editor')}
+        </Button>
+      {/if}
+    </div>
+  </div>
+  <Field.Hint {config} />
 
-  <header class="rz-blocks__header">
-    <div>
-      <h3 class="rz-blocks__title">
-        {config.get.label}
-        {#if config.get.localized}
-          <sup>{locale.code}</sup>
-        {/if}
-      </h3>
-      <Field.Hint {config} />
+  {#if summary && focus}
+    <!-- One row: how many blocks, and the way into focus mode where they are edited. -->
+    <div class="rz-blocks__summary">
+      <span class="rz-blocks__count">
+        {count === 1
+          ? t__('fields.blocks_count', '1')
+          : t__('fields.blocks_count|m|p', String(count))}
+      </span>
+      <Button
+        onclick={() => focus.open(list)}
+        size="sm"
+        variant="ghost"
+        icon={Maximize2}
+        data-focus-open={list}
+      >
+        {t__('fields.edit')}
+      </Button>
     </div>
-    {#if hasBlocks}
-      <div class="rz-blocks__actions">
-        <Button onclick={collapseAll} size="xs" variant="outline">Collapse all</Button>
-        <Button onclick={expandAll} size="xs" variant="outline">Expand all</Button>
-      </div>
-    {/if}
-  </header>
-
-  <div class="rz-blocks__list" data-empty={!hasBlocks ? '' : null} bind:this={blockList}>
-    {#if hasBlocks}
+  {:else}
+    <!-- One raised card, a row per block. -->
+    <div class="rz-blocks__list" data-empty={count ? null : ''} use:sortableList>
       {#each blockState.blocks as block, index (block.id)}
         <Block
-          bind:this={blocksComponents[index]}
+          open={opened.has(block.id)}
+          toggle={() => setOpen(block.id, !opened.has(block.id))}
           deleteBlock={() => blockState.deleteBlock(index)}
-          duplicateBlock={() => blockState.duplicateBlock(index)}
+          duplicateBlock={() => duplicate(index)}
+          moveUp={index > 0 ? () => blockState.moveBlock(index, index - 1) : undefined}
+          moveDown={index < count - 1 ? () => blockState.moveBlock(index, index + 1) : undefined}
+          focusBlock={focus ? () => focus.open(list, `${list}.${index}`) : undefined}
           {form}
           {sorting}
           path="{path}.{index}:{block.type}"
           config={getConfigByBlockType(block.type)}
         />
       {/each}
-    {/if}
-  </div>
+    </div>
 
-  <div class="rz-blocks__actions-bottom">
-    <AddBlockButton addBlock={add} {config} />
+    <div class="rz-blocks__actions-bottom">
+      <AddBlockButton addBlock={add} {config} />
 
-    {#if locale && locale.code !== locale.defaultCode && config.get.localized}
-      <Button icon={Download} size="sm" onclick={field.setValueFromDefaultLocale} variant="text">
-        {t__('fields.get_data_from')}
-        {locale.defaultCode}
-      </Button>
-    {/if}
-  </div>
+      {#if locale && locale.code !== locale.defaultCode && config.get.localized}
+        <Button icon={Download} size="sm" onclick={field.setValueFromDefaultLocale} variant="ghost">
+          {t__('fields.get_data_from')}
+          {locale.defaultCode}
+        </Button>
+      {/if}
+    </div>
+  {/if}
+
+  <Field.Error error={field.error} />
 </fieldset>
 
-<style>.rz-blocks__title {
-    font-variation-settings: 'wght' 500;
-    font-weight: 500;
+<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-blocks__header {
+    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;
+    }
   }
 
-  sup {
-    font-size: var(--rz-text-2xs);
-    text-transform: uppercase;
+  .rz-blocks__header + :global(.rz-field-hint) {
+    margin-top: 0;
+    margin-bottom: var(--rz-size-2);
+  }
+
+  /* Small ghost buttons on the label's line and under the card, quiet until hovered. */
+  .rz-blocks__actions,
+  .rz-blocks__actions-bottom {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+
+    :global(.rz-button:not(.rz-add-block)) {
+      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-blocks__actions {
-    /* translate: 0 calc(-1 * var(--rz-size-2)); */
+    margin-right: calc(-2 * var(--rz-unit));
+  }
+
+  .rz-blocks__summary {
     display: flex;
-    align-items: end;
-    gap: var(--rz-size-2);
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-4);
+    min-height: var(--rz-size-11);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-3-5);
+    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);
+
+    :global(.rz-button) {
+      height: var(--rz-size-7);
+      color: var(--rz-fg-muted);
+    }
+    :global(.rz-button:hover:not(:disabled)) {
+      color: var(--rz-fg);
+    }
   }
 
+  .rz-blocks__count {
+    font-size: var(--rz-text-md);
+    color: var(--rz-fg-subtle);
+  }
+
+  /* One raised card, the blocks its rows, a hairline between two. */
   .rz-blocks__list {
+    --rz-blocks-radius: var(--rz-radius-xl);
     display: grid;
-    gap: var(--rz-size-4);
+    /* One column the card's width: a long preview ellipsizes instead of widening the row. */
+    grid-template-columns: minmax(0, 1fr);
+    border-radius: var(--rz-blocks-radius);
 
     &:not([data-empty]) {
-      margin-bottom: var(--rz-size-4);
+      background-color: var(--rz-bg-raised);
+      box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    }
+
+    > :global(.rz-block + .rz-block) {
+      border-top: 1px solid var(--rz-border);
+    }
+
+    /* An open block draws its own edge. */
+    > :global(.rz-block[data-open] + .rz-block) {
+      border-top-color: transparent;
     }
   }
 
-  .rz-blocks__header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--rz-size-4);
+  /* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
+  :global(.rz-group-field__content) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
+  :global(.rz-block__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
+  :global(.rz-tree-item__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
+  :global(.rz-stage__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary) {
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--rz-border);
   }
+
+  /* Under the card: the add button on the left, the locale import on the right. */
   .rz-blocks__actions-bottom {
-    display: flex;
-    gap: var(--rz-size-3);
-    padding-right: var(--rz-size-3);
-    align-items: center;
     justify-content: space-between;
+    margin-top: var(--rz-size-2-5);
+    margin-left: calc(-0.5 * var(--rz-unit));
+  }
+
+  .rz-blocks__list[data-empty] + .rz-blocks__actions-bottom {
+    margin-top: 0;
+  }
+
+  /* The error sits under the field, clear of the buttons on the label's line. */
+  .rz-field-blocks > :global(.rz-field-error) {
+    position: static;
+    display: inline-block;
+    margin-top: var(--rz-size-1-5);
   }
 </style>