edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/table/chrome.svelte.d.ts

@@ -1,51 +1,68 @@
-import type { Block } from '../../block/block.svelte.js';
+import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
-import type { TableLabels } from '../../labels.js';
-/** A table's grid box and its rows and columns, layer-relative. */
-export type TableLayout = {
-    table: string;
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    rows: {
-        id: string;
-        top: number;
-        height: number;
-    }[];
-    /** By position: the column id, its left edge and width. */
-    columns: {
-        id: string;
-        left: number;
-        width: number;
-    }[];
-};
-/** A column resize in progress: where the pointer went down, where it is, the width it started at. */
-type Drag = {
-    table: string;
-    column: number;
-    from: number;
-    at: number;
-    width: number;
-};
-/** What a grip's menu acts on. */
+import { type MenuItemPayload } from '../chrome.js';
+import { ChromeList } from '../list.svelte.js';
+type Kind = 'row' | 'column';
+/** What a grip's menu acts on: a row (its block id) or a column (its id) of a table. */
 export type TableMenu = {
-    kind: 'row';
-    table: string;
-    row: string;
-} | {
-    kind: 'column';
+    kind: Kind;
     table: string;
-    column: number;
+    id: string;
 };
-/** A row of a grip's menu. */
+/**
+ * A row of a grip's menu: `insert-above`, `insert-below`, `move-up`,
+ * `move-down`, `delete-row`; `insert-left`, `insert-right`, `move-left`,
+ * `move-right`, `delete-column`.
+ */
 export type TableMenuRow = {
     id: string;
-    label: string;
-    icon: string;
-    danger?: boolean;
-    isEnabled: () => boolean;
-    run: () => unknown;
+};
+/**
+ * One row of a grip's menu, for your `menu`: the row shape every menu
+ * shares (`item` is the row, `run` runs it and closes the menu), with
+ * whether it can run now and whether it deletes.
+ */
+export type TableMenuItem = MenuItemPayload<TableMenuRow> & {
+    /** It cannot run now (`aria-disabled`): the keys skip it, a click does nothing. */
+    disabled: boolean;
+    /** It deletes. */
+    danger: boolean;
+};
+/**
+ * What a `grip` snippet receives: the grip of the hovered row (left of the
+ * table) or column (above it). Put `{@attach grip}` on its element (a
+ * `button`): it drags the row or the column, a click opens its menu,
+ * ArrowDown opens it too and Escape closes it, and it carries the ARIA
+ * (`aria-haspopup`, `aria-expanded`, `aria-controls` while its menu is
+ * open; name it). The plugin centers it where the grip stands.
+ */
+export type TableGripPayload = {
+    kind: Kind;
+    /** The row's block id, or the column's id. */
+    id: string;
+    /** Its position among the table's rows (columns). */
+    index: number;
+    /** Its menu is open. */
+    expanded: boolean;
+    /** It is being dragged. */
+    dragging: boolean;
+    /** Open its menu, or close it when it is open (what a click does). */
+    toggle: () => void;
+    /** The grip's behavior and ARIA: `{@attach grip}`. */
+    grip: Attachment<HTMLElement>;
+    /** The table's chrome (its menu, its actions). */
+    chrome: TableChrome;
+};
+/**
+ * What an `add` snippet receives: the `+` under the hovered table (a row at
+ * its end) or beside it (a column at its end). The plugin places it along
+ * the table's edge, as wide (tall) as the table shows; a press on it keeps
+ * the editor's selection.
+ */
+export type TableAddPayload = {
+    kind: Kind;
+    /** Add the row or the column. */
+    add: () => void;
 };
 /**
  * The table's chrome (`table.*`), in the overlay: while the pointer is over
@@ -58,96 +75,72 @@ export type TableMenuRow = {
  * column's `data.columns[i].width` (one command, one undo step), Escape
  * drops the preview. Every action is a table command (`table.ts`): refused
  * when the view is readonly.
+ *
+ * What a `menu` snippet receives: the open menu (`menu`), its rows
+ * (`items`, each a `MenuItemPayload`), the keyboard's row (`index`), the
+ * attachments that give it the keys and the ARIA (`popup` and `keys` on
+ * the menu's element, `option(index)` on each row) and `close()`.
+ * A grip's own attachment is its payload's `grip`.
  */
-export declare class TableChrome {
+export declare class TableChrome extends ChromeList {
     #private;
-    readonly edytor: Edytor;
-    readonly labels: TableLabels;
-    /** A column's width when it sets none, and the narrowest a resize leaves. */
-    readonly columnWidth: number;
-    readonly minColumnWidth: number;
-    /** The table, row and column under the pointer. */
-    hovered: {
-        table: string;
-        row: string | null;
-        column: number | null;
-    } | null;
-    /** The grip menu open. */
+    /** What the open grip menu acts on (`null`: none is open). */
     menu: TableMenu | null;
-    /** The measured table the chrome is for. */
-    layout: TableLayout | null;
-    /** A block drag is in progress: no chrome takes the pointer. */
-    dragging: boolean;
-    /** The column resize in progress. */
-    drag: Drag | null;
+    constructor(edytor: Edytor, 
     /**
-     * The cell the caret was last in: the row and column the block menu's
-     * actions on its table act on. A block selection (the grip that opens
-     * the menu) keeps it; a caret outside every table clears it.
+     * A column's width when it sets none, and the narrowest a resize leaves.
+     * @internal
      */
-    cell: string | null;
-    constructor(edytor: Edytor, labels: TableLabels, 
-    /** A column's width when it sets none, and the narrowest a resize leaves. */
-    columnWidth: number, minColumnWidth: number);
-    /** The view is readonly (reactive). */
+    columnWidth: number, 
+    /** @internal */
+    minColumnWidth: number);
+    protected get count(): number;
+    /** The view is readonly (reactive): the chrome shows nothing. */
     get readonly(): boolean;
-    /** A text selection is in progress: the chrome takes no pointer. */
-    get selecting(): boolean;
-    /** The table the chrome is for: the one a band drags, a menu is open on, or under the pointer. */
-    get table(): string | null;
-    /** The selection changed: a caret in a cell is the one the block menu acts on. */
-    track: () => void;
-    /** Whether the chrome shows. */
-    get shown(): boolean;
-    /** The block of table `id`, if it is still a shown table. */
-    block: (id: string | null | undefined) => Block | null;
     /**
-     * The width column `index` of `table` shows (its `data.columns` entry, the
-     * resize preview while a band drags it): what the grid's template reads.
+     * Open the `kind` grip's menu on the row or column it stands for, its
+     * first row that can run the keyboard's, or close it when it is open
+     * there (a grip's click).
      */
-    width: (table: string, index: number, column: unknown) => number;
-    private dragWidth;
-    /** The pointer is over `target`: the table, row and column holding it (the innermost table). */
-    hover: (target: EventTarget | null) => void;
-    /** The pointer left for `to`: the chrome stays while it is over the editor or the overlay. */
-    leave: (to: EventTarget | null) => void;
-    /** The overlay measure: the shown table's grid, rows and columns. */
-    measure: (host: HTMLElement, origin: DOMRect) => () => void;
-    private read;
-    /** Open the menu of a row's or a column's grip (a second press on it closes it). */
-    open: (menu: TableMenu) => void;
+    toggle: (kind: Kind) => void;
+    /** Whether a menu is open (reactive). */
+    get isOpen(): boolean;
     /** Close the menu; the editor takes the keys back. */
     close: () => void;
-    /** The rows of the open menu. */
-    get rows(): TableMenuRow[];
-    /** Run a menu row, then close the menu. */
-    runRow: (row: TableMenuRow) => void;
-    /** The `+` under the table: a row at its end, the caret in its first cell. */
-    addRow: () => void;
-    /** The `+` beside the table: a column at its end. */
-    addColumn: () => void;
-    /** A `mousedown` on a band: no native selection; the press itself when no `pointerdown` came. */
-    mousedown: (event: MouseEvent, column: number) => void;
     /**
-     * Press on column `column`'s band: the drag starts; the preview follows
-     * the pointer and the release writes the width (`release`); Escape, a
-     * cancel or the view turning readonly drop the preview, nothing written.
+     * The open menu's rows for your `menu`: each the row shape every menu
+     * shares (`run` runs it and closes the menu, `select` makes it the
+     * keyboard's, `option` its attributes), whether it can run now
+     * (`disabled`) and whether it deletes (`danger`).
+     */
+    get items(): TableMenuItem[];
+    /**
+     * The attachment of the open menu's row at `index`
+     * (`{@attach chrome.option(index)}`). Its id, `menuitem` role,
+     * `aria-disabled` when it cannot run now; the keyboard's row scrolls into
+     * view. The menu's element takes
+     * `data-edytor-table-menu` (the kind it is open on) from `popup`.
      */
-    start: (event: PointerEvent | MouseEvent, column: number) => void;
-    /** The view turned readonly mid-drag: the preview goes, nothing written. */
-    lock: () => void;
+    option(index: number): Attachment<HTMLElement>;
     /**
-     * A key on a focused band: ArrowRight/ArrowLeft widen or narrow the
-     * column by 8px (Shift: 32px); each press is one width write.
+     * The element that holds the menu's keyboard (`{@attach chrome.keys}`,
+     * the menu's own): it takes the focus when it mounts and names the
+     * keyboard's row (`aria-activedescendant`); ArrowDown and ArrowUp walk
+     * the rows that can run (around the ends), Home and End reach the first
+     * and last, Enter or Space runs the row, Escape and Tab close the menu
+     * and give the keys back to the editor. No key reaches the page behind.
      */
-    key: (event: KeyboardEvent, column: number) => void;
+    keys: Attachment<HTMLElement>;
     /**
-     * The release: column `drag.column`'s width, one command; nothing when it
-     * did not change, or when the table does not list the column. The width
-     * is written on the column's entry by its item id (the first entry
-     * naming it), never by position: the stored array may hold an entry the
-     * grid does not show.
+     * The `kind` grip's attachment (`{@attach}` it on a grip's element; a
+     * `grip` snippet's payload carries it): in an editable view, dragging it
+     * moves its row or column within its table (`table.drag`); a click with
+     * no drag opens or closes its menu; ArrowDown opens the menu, Escape
+     * closes it and gives the keys back to the editor. It carries
+     * `aria-haspopup`, `aria-expanded`, `aria-controls` while its menu is
+     * open, and `data-dragging` during its drag. A press on it is never
+     * prevented: that would stop the native drag.
      */
-    private release;
+    gripOf: (kind: Kind) => Attachment<HTMLElement>;
 }
 export {};