@nexxtmove/ui 1.37.0 → 1.38.0

package/dist/components/molecules/Tree/Tree.vue.d.ts

@@ -6,12 +6,35 @@ export interface NexxtTreeNode {
     icon?: NexxtIconName;
     /** A node with children gets a chevron and can be folded. */
     children?: NexxtTreeNode[];
+    /** Whether this node accepts drops when it currently has no children. */
+    canHaveChildren?: boolean;
+    /** Whether this node can be dragged when the tree's `draggable` prop is enabled. */
+    draggable?: boolean;
+}
+export interface NexxtTreeMove {
+    /** The node being moved. */
+    id: string;
+    /** The node that will contain the moved node, or `null` for the tree root. */
+    parentId: string | null;
+    /** The zero-based position in the target parent's children. */
+    index: number;
 }
 export interface NexxtTreeProps {
     /** The top-level nodes; nest `children` for deeper levels. */
     nodes: NexxtTreeNode[];
     /** Accessible name for the tree, e.g. the heading above it. */
     label: string;
+    /** Enables native drag-and-drop for rows and emits the intended new position. */
+    draggable?: boolean;
+    /**
+     * Decides per spot whether the dragged node may land there, on top of the built-in rules (no
+     * drop into its own subtree, only into nodes that can have children). Gets the same shape as
+     * the `move` payload. A refused spot shows no ghost row and drops nothing, like letting go
+     * outside the tree. It runs on every `dragover` — which the browser keeps firing while the
+     * pointer rests — and on every touch move, so keep it cheap and pure: the same spot must always
+     * get the same answer.
+     */
+    canDrop?: (target: NexxtTreeMove) => boolean;
 }
 export type NexxtTreeSlots = {
     /** Actions at the end of a row, e.g. a delete button. Hidden until the row is hovered or holds focus, and always shown on a coarse pointer. Clicks and keys inside it never reach the tree, so they neither select the row nor move focus. Put `tabindex` on every focusable element in it: it is `0` only on the row that is the tree's tab stop, which keeps one extra Tab stop for the whole tree. Keep the content at most 24px high, or the rows grow. */
@@ -31,9 +54,11 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     focusNode: (id: string) => Promise<boolean>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    move: (move: NexxtTreeMove) => any;
     "update:selected": (value: string | null) => any;
     "update:collapsed": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onMove?: ((move: NexxtTreeMove) => any) | undefined;
     "onUpdate:selected"?: ((value: string | null) => any) | undefined;
     "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/molecules/Tree/tree-drop.d.ts

@@ -0,0 +1,81 @@
+import { NexxtTreeNode } from './Tree.vue';
+/** A visible row of the tree, in document order. */
+export interface TreeRow {
+    node: NexxtTreeNode;
+    depth: number;
+    parentId: string | null;
+    expandable: boolean;
+    canHaveChildren: boolean;
+    draggable: boolean;
+    expanded: boolean;
+    /** One-based position among its siblings. */
+    position: number;
+    setSize: number;
+}
+export type DropMarker = 'before' | 'inside' | 'after';
+export interface TreeDrop {
+    /** The row the pointer was over when this spot was picked. */
+    rowId: string;
+    parentId: string | null;
+    index: number;
+    marker: DropMarker;
+}
+/**
+ * Where a row sits with the ghost row taken out, relative to the top of the tree. `bottom` takes
+ * in the gap below the row: a gap belongs to the row above it, so moving across it never reads
+ * as leaving the tree.
+ */
+export interface RestSlot {
+    id: string;
+    top: number;
+    height: number;
+    bottom: number;
+}
+export interface DropLayout {
+    slots: RestSlot[];
+    /** The ghost row as it is laid out now, gap included; `null` while there is none. */
+    ghost: {
+        top: number;
+        bottom: number;
+    } | null;
+}
+/** `keep` leaves the current spot as it is: the pointer is on the ghost row, or there are no rows. */
+export type DropHit = {
+    kind: 'keep';
+} | {
+    kind: 'row';
+    id: string;
+    ratio: number;
+};
+export declare const containsNode: (node: NexxtTreeNode, id: string) => boolean;
+export declare const findNode: (nodes: NexxtTreeNode[], id: string) => NexxtTreeNode | null;
+/**
+ * Reads the pointer against where the rows land without the ghost row, not against what is under
+ * it now. The ghost pushes rows aside, so reading what is under the pointer would find a shifted
+ * row or the ghost itself, pick another spot, move the ghost and flicker. Measured this way the
+ * same pointer always gives the same answer, however the ghost moves.
+ *
+ * @param layout - The rows at rest and the ghost row as it is laid out now.
+ * @param y - The pointer, relative to the top of the tree.
+ */
+export declare const hitTest: ({ slots, ghost }: DropLayout, y: number) => DropHit;
+/**
+ * The spot a pointer at `ratio` of `row` stands for. A group splits into before (top 30%),
+ * inside and after (bottom 30%), a leaf into before and after at the middle. Inside always lands
+ * as the first child, right under the group row, so the ghost shows up next to the pointer. The
+ * dragged node and everything inside it are no target at all.
+ */
+export declare const resolveDrop: (row: TreeRow, ratio: number, moving: NexxtTreeNode) => TreeDrop | null;
+/** A spot where the dragged row already is: dropping there changes nothing, so it is no target. */
+export declare const isNoOp: (drop: TreeDrop, source: TreeRow) => boolean;
+/** Two spots are the same when they land the node in the same place, whichever row picked them. */
+export declare const samePlace: (a: TreeDrop | null, b: TreeDrop | null) => boolean;
+/**
+ * Where the ghost row goes among the visible rows, and how deep. Right before the row of the
+ * sibling now at `index`, or after the last visible row inside the parent when `index` is past
+ * its last child. `null` for a spot inside a collapsed group: that group row marks itself.
+ */
+export declare const ghostSlot: (rows: TreeRow[], nodes: NexxtTreeNode[], drop: TreeDrop | null) => {
+    at: number;
+    depth: number;
+} | null;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue';
 export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molecules/PageCard/PageCard.vue';
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
 export type { NexxtPickerGroupData, NexxtPickerItemData, } from './components/molecules/PickerList/PickerList.vue';
-export type { NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
+export type { NexxtTreeMove, NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
 export type { NexxtPlaceholderGroup, NexxtPlaceholderInputMessages, NexxtPlaceholderInputProps, } from './components/molecules/PlaceholderInput/PlaceholderInput.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
 export type { EditorBackgroundSizeMessages, EditorBackgroundSizeValue, } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';