frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Tree/tree.cy.ts

@@ -1,144 +1,272 @@
 import Tree from './Tree.vue'
-import { h } from 'vue'
-import type { TreeNode } from './types'
+import { h, ref } from 'vue'
+import type { DropInfo, TreeNode } from './types'
 
-const data: TreeNode = {
-  id: 'root',
-  label: 'Root',
-  children: [
+// Fresh data per test — the tree mutates `node.expanded`, so a shared const
+// would leak expansion state between tests.
+function makeNodes(): TreeNode[] {
+  return [
     {
-      id: 'a',
-      label: 'Node A',
+      id: 'root',
+      label: 'Root',
       children: [
         {
-          id: 'a-1',
-          label: 'Node A-1',
-          children: [],
+          id: 'a',
+          label: 'Node A',
+          children: [{ id: 'a-1', label: 'Node A-1' }],
         },
+        { id: 'b', label: 'Node B' },
       ],
     },
-    {
-      id: 'b',
-      label: 'Node B',
-      children: [],
-    },
-  ],
+  ]
 }
 
 describe('Tree', () => {
-  it('renders root node', () => {
-    cy.mount(Tree, {
-      props: {
-        node: data,
-        nodeKey: 'id',
-      },
-    })
+  it('renders nodes expanded by default', () => {
+    cy.mount(Tree, { props: { nodes: makeNodes(), nodeKey: 'id' } })
+    cy.contains('Node A').should('exist')
+    cy.contains('Node A-1').should('exist')
+  })
 
+  it('starts a node collapsed when flagged expanded: false', () => {
+    const nodes = makeNodes()
+    nodes[0].expanded = false
+    cy.mount(Tree, { props: { nodes, nodeKey: 'id' } })
     cy.contains('Root').should('exist')
     cy.contains('Node A').should('not.exist')
   })
 
-  it('expand / collapse', () => {
+  it('expands all via the v-model:expanded switch', () => {
+    const nodes = makeNodes()
+    nodes[0].expanded = false // start collapsed; the switch should override it
+    cy.mount(Tree, { props: { nodes, nodeKey: 'id', expanded: true } })
+    cy.contains('Node A').should('exist')
+    cy.contains('Node A-1').should('exist')
+    cy.contains('Node B').should('exist')
+  })
+
+  it('expands late-arriving nodes while the switch is on', () => {
+    const data = ref<TreeNode[]>([])
+    cy.mount({
+      render: () =>
+        h(Tree, { nodes: data.value, nodeKey: 'id', expanded: true }),
+    })
+    cy.contains('Node A').should('not.exist')
+    cy.then(() => {
+      data.value = makeNodes()
+    })
+    cy.contains('Node A').should('exist')
+    cy.contains('Node A-1').should('exist')
+  })
+
+  it('reflects the switch back to the model when a row toggles', () => {
+    const onUpdate = cy.stub().as('update')
     cy.mount(Tree, {
       props: {
-        node: data,
+        nodes: makeNodes(),
         nodeKey: 'id',
-        options: {
-          defaultCollapsed: true,
-        },
+        expanded: true,
+        'onUpdate:expanded': onUpdate,
       },
     })
+    // Collapsing one node means "not all expanded" → switch flips to false.
+    cy.contains('[data-slot="row"]', 'Node A').click()
+    cy.get('@update').should('have.been.calledWith', false)
+  })
 
-    // collapse nodes
+  it('toggles via the chevron', () => {
+    cy.mount(Tree, { props: { nodes: makeNodes(), nodeKey: 'id' } })
+    cy.contains('Node A').should('exist')
+    cy.get('[data-slot="toggle"]').first().click()
     cy.contains('Node A').should('not.exist')
-
-    cy.contains('Root').click()
+    cy.get('[data-slot="toggle"]').first().click()
     cy.contains('Node A').should('exist')
-    cy.contains('Node B').should('exist')
-
-    cy.contains('Node A').click()
-    cy.contains('Node A-1').should('exist')
+  })
 
-    cy.contains('Node A').click()
-    cy.contains('Node A-1').should('not.exist')
+  it('toggles expansion by clicking the row', () => {
+    cy.mount(Tree, { props: { nodes: makeNodes(), nodeKey: 'id' } })
+    cy.contains('Node A').should('exist')
+    cy.contains('[data-slot="row"]', 'Root').click()
+    cy.contains('Node A').should('not.exist')
+    cy.contains('[data-slot="row"]', 'Root').click()
+    cy.contains('Node A').should('exist')
   })
 
-  it('renders recursively', () => {
+  it('exposes ARIA tree semantics', () => {
     cy.mount(Tree, {
-      props: {
-        node: data,
-        nodeKey: 'id',
-        options: {
-          defaultCollapsed: false,
-        },
-      },
+      props: { nodes: makeNodes(), nodeKey: 'id', expanded: true },
     })
+    cy.get('[role="tree"]').should('exist')
+    cy.get('[role="treeitem"]').should('have.length', 4)
+    cy.contains('[role="treeitem"]', 'Root')
+      .should('have.attr', 'aria-expanded', 'true')
+      .and('have.attr', 'aria-level', '1')
+    cy.contains('[role="treeitem"]', 'Node A-1').should(
+      'have.attr',
+      'aria-level',
+      '3',
+    )
+  })
 
-    cy.contains('Root').should('exist')
+  it('navigates with the keyboard', () => {
+    cy.mount(Tree, { props: { nodes: makeNodes(), nodeKey: 'id' } })
+    // Root is the only tabbable item initially.
+    cy.get('[role="treeitem"]').first().focus()
+    cy.focused().should('contain', 'Root')
+    // Tree starts expanded; Down steps into the first child.
+    cy.focused().trigger('keydown', { key: 'ArrowDown' })
+    cy.focused().should('contain', 'Node A')
+    // Left collapses the expanded node, Left again steps to the parent.
+    cy.focused().trigger('keydown', { key: 'ArrowLeft' }) // collapse A
+    cy.focused().trigger('keydown', { key: 'ArrowLeft' }) // -> Root
+    cy.focused().should('contain', 'Root')
+  })
+
+  it('toggles expansion with Enter/Space', () => {
+    cy.mount(Tree, { props: { nodes: makeNodes(), nodeKey: 'id' } })
+    cy.get('[role="treeitem"]').first().focus()
+    cy.focused().should('contain', 'Root')
+    cy.focused().trigger('keydown', { key: 'Enter' })
+    cy.contains('Node A').should('not.exist')
+    cy.focused().trigger('keydown', { key: 'Enter' })
     cy.contains('Node A').should('exist')
-    cy.contains('Node A-1').should('exist')
-    cy.contains('Node B').should('exist')
   })
 
-  it('options: rowHeight & indentation guides', () => {
+  it('renders custom item-label and item-prefix/item-suffix slots', () => {
     cy.mount(Tree, {
-      props: {
-        node: data,
-        nodeKey: 'id',
-        options: {
-          rowHeight: '40px',
-          showIndentationGuides: true,
-          defaultCollapsed: false,
-        },
+      props: { nodes: makeNodes(), nodeKey: 'id', expanded: true },
+      slots: {
+        'item-label': ({ node }: any) =>
+          h('span', { 'data-cy': `label-${node.id}` }, `label-${node.label}`),
+        'item-suffix': ({ node }: any) =>
+          h('span', { 'data-cy': `suffix-${node.id}` }, '★'),
       },
     })
-
-    cy.contains('Root')
-      .parent()
-      .should('have.css', 'height', '40px')
-
-    // indentation line
-    cy.get('.border-r').should('exist')
+    cy.get('[data-cy="label-root"]').should('exist')
+    cy.get('[data-cy="suffix-a"]').should('exist')
   })
 
-  it('slots', () => {
+  it('forwards class and style to the tree element', () => {
     cy.mount(Tree, {
       props: {
-        node: data,
+        nodes: makeNodes(),
         nodeKey: 'id',
-        options: { defaultCollapsed: false },
-      },
-      slots: {
-        label: ({ node }: any) =>
-          h(
-            'span',
-            {
-              'data-cy': `label-${node.id}`,
-            },
-            `label-${node.label}`,
-          ),
-
-        icon: () =>
-          h('span', { 'data-cy': 'icon' }, 'icon'),
+        class: 'my-tree',
+        style: '--tree-indent: 40px',
       },
     })
+    cy.get('[role="tree"]')
+      .should('have.class', 'my-tree')
+      .and('have.css', 'padding', '0px')
+    cy.get('[role="tree"]').then(($el) => {
+      expect($el[0].style.getPropertyValue('--tree-indent')).to.eq('40px')
+    })
+  })
 
-    cy.get('[data-cy="label-root"]').should('exist')
-    cy.get('[data-cy="label-a"]').should('exist')
-    cy.get('[data-cy="label-b"]').should('exist')
-    cy.get('[data-cy="icon"]').should('exist')
+  it('indents nested groups', () => {
+    cy.mount(Tree, {
+      props: { nodes: makeNodes(), nodeKey: 'id', expanded: true },
+    })
+    cy.get('[role="group"]')
+      .first()
+      .should(($ul) => {
+        expect(parseFloat($ul.css('padding-left'))).to.be.greaterThan(0)
+      })
   })
 
-  it('does not toggle when node has no children', () => {
+  it('renders connector guides', () => {
     cy.mount(Tree, {
       props: {
-        node: data,
+        nodes: makeNodes(),
         nodeKey: 'id',
-        options: { defaultCollapsed: false },
+        expanded: true,
+        guides: 'connectors',
       },
     })
+    cy.get('[role="tree"]').should('have.attr', 'data-guides', 'connectors')
+    cy.get('[role="group"]').should('exist')
+  })
 
-    cy.contains('Node B').click()
-    cy.contains('Node B').should('exist')
+  describe('drag and drop', () => {
+    function dndProps(onDragEnd: (info: DropInfo | null) => void, extra = {}) {
+      return {
+        nodes: makeNodes(),
+        nodeKey: 'id',
+        expanded: true,
+        draggable: true,
+        onDragEnd,
+        ...extra,
+      }
+    }
+
+    // Drag `sourceLabel` onto a `zone` of `targetLabel` and release.
+    function dragOnto(
+      sourceLabel: string,
+      targetLabel: string,
+      zone: 'before' | 'inside' | 'after',
+    ) {
+      const dataTransfer = new DataTransfer()
+      cy.contains('[data-slot="row"]', sourceLabel).trigger('dragstart', {
+        dataTransfer,
+      })
+      cy.contains('[data-slot="row"]', targetLabel).then(($el) => {
+        const rect = $el[0].getBoundingClientRect()
+        const clientY =
+          zone === 'before'
+            ? rect.top + 1
+            : zone === 'after'
+              ? rect.bottom - 1
+              : rect.top + rect.height / 2
+        cy.wrap($el).trigger('dragover', { dataTransfer, clientY })
+        cy.wrap($el).trigger('drop', { dataTransfer })
+      })
+      cy.contains('[data-slot="row"]', sourceLabel).trigger('dragend', {
+        dataTransfer,
+      })
+    }
+
+    it('emits drag-end with DropInfo on a valid reparent', () => {
+      const onDragEnd = cy.stub().as('dragEnd')
+      cy.mount(Tree, { props: dndProps(onDragEnd) })
+      dragOnto('Node B', 'Node A', 'inside')
+      cy.get('@dragEnd').should('have.been.calledOnce')
+      cy.get('@dragEnd').then((stub: any) => {
+        const info: DropInfo = stub.firstCall.args[0]
+        expect(info.node.id).to.eq('b')
+        expect(info.to).to.eq('a')
+        expect(info.position).to.eq('inside')
+      })
+    })
+
+    it('emits drag-end with null when dropping into a descendant', () => {
+      const onDragEnd = cy.stub().as('dragEnd')
+      cy.mount(Tree, { props: dndProps(onDragEnd) })
+      dragOnto('Node A', 'Node A-1', 'inside')
+      cy.get('@dragEnd').should('have.been.calledOnceWith', null)
+    })
+
+    it('respects the move predicate', () => {
+      const onDragEnd = cy.stub().as('dragEnd')
+      cy.mount(Tree, {
+        props: dndProps(onDragEnd, { move: () => false }),
+      })
+      dragOnto('Node B', 'Node A', 'inside')
+      cy.get('@dragEnd').should('have.been.calledOnceWith', null)
+    })
+
+    it('reports the final post-removal index when reordering down', () => {
+      const onDragEnd = cy.stub().as('dragEnd')
+      cy.mount(Tree, { props: dndProps(onDragEnd) })
+      // Drag Node A (index 0) to AFTER Node B (index 1) within the same parent.
+      dragOnto('Node A', 'Node B', 'after')
+      cy.get('@dragEnd').then((stub: any) => {
+        const info: DropInfo = stub.firstCall.args[0]
+        expect(info.node.id).to.eq('a')
+        expect(info.position).to.eq('after')
+        expect(info.oldIndex).to.eq(0)
+        // Source was before the target, so the final index is 1, not 2.
+        expect(info.newIndex).to.eq(1)
+      })
+    })
   })
 })

package/src/components/Tree/types.ts

@@ -1,47 +1,137 @@
-export type TreeNode = {
-  label: string
-  children: TreeNode[]
-  // added TreeNode[] due to enforcement that dynamic key types should accommodate all static key types
-  [nodeKey: string]: string | number | TreeNode[]
-}
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
-export interface TreeProps {
+/** A node key — the value read from `nodeKey` on each node. */
+export type TreeKey = string | number
+
+/**
+ * A tree node. Carries a display `label`, nested `children`, and a unique id
+ * under the field named by the `nodeKey` prop. Any extra fields are preserved
+ * and passed through to slots.
+ */
+export type TreeNode = {
+  [key: string]: unknown
+  label?: string
+  children?: TreeNode[]
   /**
-   * Root tree node to render.
-   * Can contain nested children to form the tree structure.
+   * Whether this node is expanded — the per-node source of truth. Expanded by
+   * default; set `false` to start it collapsed.
    */
+  expanded?: boolean
+}
+
+/** Where a dragged node lands relative to the hovered target. */
+export type DropPosition = 'inside' | 'before' | 'after'
+
+/** Context passed to the `move` predicate while dragging. */
+export interface MoveContext {
+  /** The node being dragged. */
+  node: TreeNode
+  /** The node currently hovered as the drop target. */
+  target: TreeNode
+  /** Resolved drop position relative to `target`. */
+  position: DropPosition
+}
+
+/**
+ * The committed move handed to `@drag-end`. `null` is emitted instead when a
+ * drag is cancelled (Escape, or released without a valid landing).
+ */
+export interface DropInfo {
+  /** The moved node. */
   node: TreeNode
+  /** Key of the previous parent, or `null` if it was a root. */
+  from: TreeKey | null
+  /** Key of the new parent, or `null` when moved to root level. */
+  to: TreeKey | null
+  /** Drop position relative to the target node. */
+  position: DropPosition
+  /** Index the node occupied in its previous parent. */
+  oldIndex: number
+  /** Final index of the node within its new parent's children. */
+  newIndex: number
+}
 
+export interface TreeProps {
   /**
-   * Unique key used to identify each node.
-   * Usually an id-like property present on every node.
+   * Forest roots to render. Each node may contain nested children to form the
+   * tree structure.
    */
-  nodeKey: string
+  nodes: TreeNode[]
 
   /**
-   * Optional configuration for tree layout and behavior.
+   * Name of the field that uniquely identifies each node.
+   * @default 'key'
    */
-  options?: TreeOptions
-}
+  nodeKey?: string
 
-export type TreeOptions = {
   /**
-   * Height of each tree row (e.g. "32px").
+   * Enable drag-and-drop. Nodes can be dragged onto one another to reparent, or
+   * between siblings to reorder.
+   * @default false
    */
-  rowHeight?: string
+  draggable?: boolean
 
   /**
-   * Horizontal indentation per tree level.
+   * Gate a drop while dragging. Receives the live drag context and returns
+   * whether the drop is allowed — a rejected target shows the no-drop cursor and
+   * hides the drop indicator. Built-in guards (drop-on-self, drop-into-own-
+   * descendant) run first, so this only carries your domain rules.
    */
-  indentWidth?: string
+  move?: (ctx: MoveContext) => boolean
 
   /**
-   * Whether to show vertical indentation guide lines.
+   * Visual style of the indentation guides.
+   * @default 'connectors'
    */
-  showIndentationGuides?: boolean
+  guides?: 'connectors' | 'lines' | 'none'
 
   /**
-   * Whether tree nodes should be collapsed by default.
+   * Disable all interaction — expand/collapse and drag.
+   * @default false
    */
-  defaultCollapsed?: boolean
+  disabled?: boolean
+}
+
+/** State + callbacks shared from `Tree` down to every recursive `TreeItem`. */
+export interface TreeContext {
+  nodeKey: Ref<string>
+  guides: Ref<'connectors' | 'lines' | 'none'>
+  draggable: Ref<boolean>
+  disabled: Ref<boolean>
+
+  focusedKey: Ref<TreeKey | null>
+
+  keyOf: (node: TreeNode) => TreeKey
+  labelOf: (node: TreeNode) => string
+  childrenOf: (node: TreeNode) => TreeNode[]
+  hasChildren: (node: TreeNode) => boolean
+
+  isExpanded: (node: TreeNode) => boolean
+  toggle: (node: TreeNode) => void
+  focus: (key: TreeKey) => void
+
+  registerItem: (key: TreeKey, el: HTMLElement) => void
+  unregisterItem: (key: TreeKey) => void
+
+  // Drag-and-drop
+  dragSourceKey: ComputedRef<TreeKey | null>
+  dropTargetKey: ComputedRef<TreeKey | null>
+  dropPosition: ComputedRef<DropPosition | null>
+  onDragStart: (e: DragEvent, node: TreeNode, parent: TreeNode | null) => void
+  onDragOver: (e: DragEvent, node: TreeNode) => void
+  onDragLeave: (node: TreeNode) => void
+  onDrop: (node: TreeNode, parent: TreeNode | null) => void
+  onDragEnd: () => void
+}
+
+export const TreeContextKey: InjectionKey<TreeContext> = Symbol('TreeContext')
+
+export interface TreeNodeSlotProps {
+  node: TreeNode
+  level: number
+  expanded: boolean
+  hasChildren: boolean
+  focused: boolean
+  disabled: boolean
+  toggle: () => void
 }