rimecms 0.33.0 → 1.0.0

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

@@ -3,7 +3,6 @@
   import type { BlocksFieldBlock } from '../../types';
   import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
   import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-  import { useOnce } from '../../../panel/util/once.svelte.js';
   import { capitalize } from '../../../util/string.js';
   import { GripVertical, ToyBrick } from '@lucide/svelte';
   import BlockActions from './BlockActions.svelte';
@@ -11,179 +10,216 @@
   type Props = {
     config: BlocksFieldBlock;
     path: string;
+    form: DocumentFormContext;
+    /** Its fields on show under its row. */
+    open: boolean;
     sorting: boolean;
+    toggle: () => void;
     deleteBlock: () => void;
     duplicateBlock: () => void;
-    form: DocumentFormContext;
+    /** Absent on the first block. */
+    moveUp?: () => void;
+    /** Absent on the last block. */
+    moveDown?: () => void;
+    /** Opens the document's focus mode on this block; absent in a nested form. */
+    focusBlock?: () => void;
   };
 
-  const { config, path, deleteBlock, duplicateBlock, form, sorting = false }: Props = $props();
+  const {
+    config,
+    path,
+    form,
+    open,
+    sorting = false,
+    toggle,
+    deleteBlock,
+    duplicateBlock,
+    moveUp,
+    moveDown,
+    focusBlock
+  }: Props = $props();
 
-  let isOpen = $state(true);
   const position = $derived(parseInt(path.split('.').pop() || '0'));
   const blockValue = $derived(form.getValue<GenericBlock>(path));
 
-  const { once } = useOnce();
-
-  once(() => {
-    if (blockValue) {
-      isOpen = (localStorage.getItem(`${blockValue.id}:open`) || 'true') === 'true';
-    }
-  });
-
-  export const setCollapse = (bool: boolean) => {
-    isOpen = !bool;
-  };
-
-  export const toggleBlock = (e: MouseEvent) => {
-    if (e && e.stopPropagation) {
-      e.stopPropagation();
-    }
-    isOpen = !isOpen;
-  };
-
-  const renderBlockTitle = () => {
+  const title = $derived.by(() => {
     if (config.renderTitle) {
       try {
-        const title = config.renderTitle({ values: blockValue || {}, position });
-        if (title) return title;
+        const rendered = config.renderTitle({ values: blockValue || {}, position });
+        if (rendered) return rendered;
       } catch (err) {
         console.error(`Can't render title in block`, err);
       }
     }
-    const title = config.label ? config.label : capitalize(config.name);
-    return title;
-  };
-
-  $effect(() => {
-    if (blockValue) {
-      localStorage.setItem(`${blockValue.id}:open`, isOpen.toString());
-    }
+    return config.label ? config.label : capitalize(config.name);
   });
 
+  const fieldsId = $derived(`rz-block-fields-${blockValue?.id ?? path}`);
   const BlockIcon = $derived(config.icon || ToyBrick);
 </script>
 
-<div data-sorting={sorting} class="rz-block">
-  <div class="rz-block__content" class:rz-block__content--closed={!isOpen}>
-    <header class="rz-block__header">
-      <button type="button" onclick={toggleBlock} class="rz-block__title-button">
-        <div class="rz-block__title">
-          <div class="rz-block__icon">
-            <BlockIcon size={12} />
-          </div>
-          <h3 class="rz-block__heading">
-            {renderBlockTitle()}
-          </h3>
-        </div>
-      </button>
-
-      <BlockActions {duplicateBlock} {deleteBlock} />
-
-      <div class="rz-block__grip">
-        <GripVertical size={15} />
-      </div>
-    </header>
-
-    <div class="rz-block__fields" class:rz-block__fields--hidden={!isOpen}>
-      <RenderFields fields={config.fields} {path} {form} />
-    </div>
+<!-- A row: grip, icon, name, actions. A click on it shows its fields under it. -->
+<div class="rz-block" data-open={open ? '' : null} data-sorting={sorting}>
+  <div class="rz-block__header">
+    <span class="rz-block__grip" aria-hidden="true">
+      <GripVertical size={15} />
+    </span>
+
+    <button
+      type="button"
+      class="rz-block__title-button"
+      aria-expanded={open}
+      aria-controls={fieldsId}
+      onclick={toggle}
+    >
+      <span class="rz-block__icon"><BlockIcon size={14} /></span>
+      <span class="rz-block__heading">{title}</span>
+    </button>
+
+    <BlockActions {duplicateBlock} {deleteBlock} {moveUp} {moveDown} {focusBlock} />
+  </div>
+
+  <div class="rz-block__fields" id={fieldsId} hidden={!open}>
+    <RenderFields fields={config.fields} {path} {form} />
   </div>
 </div>
 
-<style>.rz-block {
+<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 row of the list's card. The list's radius, `--rz-blocks-radius`, rounds the first and the
+   * last row so their tint stays inside the card.
+   */
+  .rz-block {
     --rz-fields-padding: var(--rz-size-5);
     position: relative;
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-sm);
-  }
 
-  .rz-block__grip {
-    cursor: grab;
+    &:first-child,
+    &:first-child > .rz-block__header {
+      border-top-left-radius: var(--rz-blocks-radius, 0);
+      border-top-right-radius: var(--rz-blocks-radius, 0);
+    }
+    &:last-child,
+    &:last-child:not([data-open]) > .rz-block__header {
+      border-bottom-left-radius: var(--rz-blocks-radius, 0);
+      border-bottom-right-radius: var(--rz-blocks-radius, 0);
+    }
   }
 
-  .rz-block:hover > :global(.rz-block__content > .rz-block__header > .rz-block-actions) {
-    opacity: 1;
-    pointer-events: all;
+  /* Open, the row and its fields read as one: a hairline around both, another between them. */
+  .rz-block[data-open] {
+    outline: 1px solid var(--rz-border-strong);
+    outline-offset: -1px;
+
+    > .rz-block__header {
+      border-bottom: 1px solid var(--rz-border);
+    }
   }
 
-  .rz-block__content {
-    background-color: var(--rz-collapse-fields-content-bg);
+  /* Closed on a field with an error: a red edge, since the field itself is out of sight. */
+  .rz-block:not([data-open]):has(:global(.rz-field-error)) {
+    outline: 1px solid var(--rz-danger);
+    outline-offset: -1px;
   }
 
   .rz-block__header {
     display: flex;
-    position: relative;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    border-bottom: var(--rz-border);
-    padding-right: var(--rz-size-2);
-    height: var(--rz-row-height);
-    background-color: hsl(var(--rz-row-bg));
+    gap: var(--rz-size-2);
+    min-height: var(--rz-size-11);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-1);
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+    }
   }
 
-  .rz-block__title-button {
-    flex: 1;
-    justify-content: flex-start;
-    flex-direction: row;
-    padding: var(--rz-size-3);
+  /* The handle the list drags by, shown with the row's hover. */
+  .rz-block__grip {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--rz-fg-subtle);
+    cursor: grab;
+    opacity: 0;
+    transition: opacity 0.15s;
   }
 
-  .rz-block__content--closed {
-    border-radius: var(--rz-radius-md);
-    .rz-block__header {
-      border-color: transparent;
-      width: 100%;
-    }
+  .rz-block__header:is(:hover, :focus-within) .rz-block__grip {
+    opacity: 1;
+  }
 
-    :global(.rz-block-actions) {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-      top: var(--rz-size-3);
-      right: var(--rz-size-11);
-    }
-    &: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));
+  @media (hover: none) {
+    .rz-block__grip {
+      opacity: 1;
     }
   }
 
-  .rz-block__title {
+  .rz-block__title-button {
     display: flex;
-    height: var(--rz-size-6);
+    flex: 1;
     align-items: center;
-    justify-content: flex-start;
-    gap: var(--rz-size-2);
-    padding: var(--rz-size-1);
-    font-size: var(--rz-text-xs);
+    gap: var(--rz-size-2-5);
+    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-block__icon {
+    display: grid;
+    place-items: center;
+    width: calc(6.5 * var(--rz-unit));
+    height: calc(6.5 * var(--rz-unit));
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
   }
 
   .rz-block__heading {
     font-variation-settings: 'wght' 500;
     font-weight: 500;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--rz-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .rz-block__fields {
-    flex: 1;
-    padding: var(--rz-size-6) 0;
-  }
+    padding: var(--rz-size-5) 0;
 
-  .rz-block__fields--hidden {
-    display: none;
+    &[hidden] {
+      display: none;
+    }
   }
 
-  .rz-block[data-sorting='true'] .rz-block__grip {
-    display: none;
+  /* While the list sorts, the rows show their name and nothing to click. */
+  .rz-block[data-sorting='true'] :global(.rz-block-actions) {
+    visibility: hidden;
   }
 
-  :global(.rz-block-actions) {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    /*top: var(--rz-size-1);*/
-    right: var(--rz-size-11);
+  .rz-block:global(.sortable-ghost) > .rz-block__header {
+    opacity: 0.4;
   }
 </style>

package/dist/fields/blocks/component/Block.svelte.d.ts

@@ -3,14 +3,20 @@ import { type DocumentFormContext } from '../../../panel/context/documentForm.sv
 type Props = {
     config: BlocksFieldBlock;
     path: string;
+    form: DocumentFormContext;
+    /** Its fields on show under its row. */
+    open: boolean;
     sorting: boolean;
+    toggle: () => void;
     deleteBlock: () => void;
     duplicateBlock: () => void;
-    form: DocumentFormContext;
+    /** Absent on the first block. */
+    moveUp?: () => void;
+    /** Absent on the last block. */
+    moveDown?: () => void;
+    /** Opens the document's focus mode on this block; absent in a nested form. */
+    focusBlock?: () => void;
 };
-declare const Block: import("svelte").Component<Props, {
-    setCollapse: (bool: boolean) => void;
-    toggleBlock: (e: MouseEvent) => void;
-}, "">;
+declare const Block: import("svelte").Component<Props, {}, "">;
 type Block = ReturnType<typeof Block>;
 export default Block;

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

@@ -1,48 +1,98 @@
 <script lang="ts">
-  import { CopyPlus, Trash2 } from '@lucide/svelte';
+  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, CopyPlus, Ellipsis, Maximize2, Trash2 } from '@lucide/svelte';
 
   type Props = {
     deleteBlock: () => void;
     duplicateBlock: () => void;
+    moveUp?: () => void;
+    moveDown?: () => void;
+    focusBlock?: () => void;
   };
 
-  const { deleteBlock, duplicateBlock }: Props = $props();
+  const { deleteBlock, duplicateBlock, moveUp, moveDown, focusBlock }: Props = $props();
 </script>
 
+<!-- A ghost ⋯ on the row, its menu what the block can do; the moves are the keyboard's drag. -->
 <div class="rz-block-actions">
-  <button class="rz-block-action" type="button" onclick={duplicateBlock}>
-    <CopyPlus size={11} />
-  </button>
-  <button class="rz-block-action" type="button" onclick={deleteBlock}>
-    <Trash2 size={11} />
-  </button>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          icon={Ellipsis}
+          title={t__('fields.block_actions')}
+          aria-label={t__('fields.block_actions')}
+          {...props}
+        />
+      {/snippet}
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content align="end">
+        {#if focusBlock}
+          <DropdownMenu.Item onclick={focusBlock} data-focus-block>
+            <Maximize2 size="12" />
+            {t__('fields.open_in_editor')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+        {/if}
+        <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.Item onclick={duplicateBlock}>
+          <CopyPlus size="12" />
+          {t__('common.duplicate')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item class="rz-block-actions__delete" onclick={deleteBlock}>
+          <Trash2 size="12" />
+          {t__('fields.delete_block')}
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
 </div>
 
 <style>
+  /* Quiet until the row is hovered or the menu is open. */
   .rz-block-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);
+    }
   }
-  .rz-block-action {
-    border: var(--rz-border);
-    border-radius: 1rem;
-    height: var(--rz-size-6);
-    width: var(--rz-size-6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+  :global(.rz-block__header:is(:hover, :focus-within)) .rz-block-actions,
+  .rz-block-actions:has(:global([data-state='open'])) {
+    opacity: 1;
   }
 
-  :global(.rz-block-actions__content) {
-    width: auto;
-    padding: var(--rz-size-1);
+  @media (hover: none) {
+    .rz-block-actions {
+      opacity: 1;
+    }
   }
 
-  :global(.rz-block-actions__delete-button) {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--rz-size-3);
+  :global(.rz-dropdown-item.rz-block-actions__delete) {
+    color: var(--rz-danger);
   }
 </style>

package/dist/fields/blocks/component/BlockActions.svelte.d.ts

@@ -1,6 +1,9 @@
 type Props = {
     deleteBlock: () => void;
     duplicateBlock: () => void;
+    moveUp?: () => void;
+    moveDown?: () => void;
+    focusBlock?: () => void;
 };
 declare const BlockActions: import("svelte").Component<Props, {}, "">;
 type BlockActions = ReturnType<typeof BlockActions>;