nuxt / nuxt/ui

Tree: Selectable folders

Open
#6,478 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Description

Currently, selecting a folder always opens/closes it, they cant be selected as one would do in operating systems like macOS or Windows:

  • On click click item: select (dont toggle open/close, dont deselect if was selected)
  • On double-click item: select + toggle open/close
  • On arrow-click: toggle open/close (dont toggle open/close)

Video how it should look like (but chevron can stay on the right imo):

https://github.com/user-attachments/assets/cf114885-28ab-4159-a4b4-e1331c0fc399

A usable example which is more folder-ux-like: https://primereact.org/tree/

  • No deselect on second click
  • Open on chevron-click without selecting
  • Missing feature: Doubleclick to open

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Tree component and reproducing the current folder interactions in the usable example or the linked video. Implement and verify single-click selection, double-click selection plus open/close, and arrow or chevron toggling without unintended selection; done means the listed macOS/Windows-like behaviors work consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, tailwindcss, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.