UxFileTree
components/ux/FileTree.vue
Explorer-style file tree (the VS Code explorer look) — builds its folders from the '/'-separated paths, collapse chevrons, small file-type glyphs by extension, compact mono rows, the selected file highlighted. Roving-focus keyboard: ↑/↓ move, Home/End, → expands (or steps in), ← collapses (or steps out to the parent), Enter/Space selects a file or toggles a folder. A selection inside a closed folder opens its ancestors. Presentational — no fetching.
assets
pipeline.png○
reference
release-train.md
scripts
force-unlock.sh⚙○
preflight.sh⚙
SKILL.md
v-model:
"SKILL.md"@select: —Keyboard: click a row, then ↑ ↓ Home End · → expand / step in · ← collapse / step out · Enter selectsScenarios
empty
No files scanned.
single file
SKILL.md
typical — skill directory, files first
SKILL.md
scripts
preflight.sh
with adornments (#adornment)
SKILL.md
assets
pipeline.png○
reference
release-train.md
scripts
force-unlock.sh⚙○
preflight.sh⚙
overflow — 50 files, 5 levels deep, long names (box scrolls at 18 rem)
assets
diagram.svg
config
environments.yaml
feature-flags.json
reference
chapter-1-a-rather-long-descriptive-file-name.md
chapter-2-a-rather-long-descriptive-file-name.md
chapter-3-a-rather-long-descriptive-file-name.md
chapter-4-a-rather-long-descriptive-file-name.md
chapter-5-a-rather-long-descriptive-file-name.md
chapter-6-a-rather-long-descriptive-file-name.md
chapter-7-a-rather-long-descriptive-file-name.md
chapter-8-a-rather-long-descriptive-file-name.md
chapter-9-a-rather-long-descriptive-file-name.md
chapter-10-a-rather-long-descriptive-file-name.md
chapter-11-a-rather-long-descriptive-file-name.md
chapter-12-a-rather-long-descriptive-file-name.md
chapter-13-a-rather-long-descriptive-file-name.md
chapter-14-a-rather-long-descriptive-file-name.md
chapter-15-a-rather-long-descriptive-file-name.md
chapter-16-a-rather-long-descriptive-file-name.md
chapter-17-a-rather-long-descriptive-file-name.md
chapter-18-a-rather-long-descriptive-file-name.md
chapter-19-a-rather-long-descriptive-file-name.md
chapter-20-a-rather-long-descriptive-file-name.md
chapter-21-a-rather-long-descriptive-file-name.md
chapter-22-a-rather-long-descriptive-file-name.md
chapter-23-a-rather-long-descriptive-file-name.md
chapter-24-a-rather-long-descriptive-file-name.md
chapter-25-a-rather-long-descriptive-file-name.md
chapter-26-a-rather-long-descriptive-file-name.md
chapter-27-a-rather-long-descriptive-file-name.md
chapter-28-a-rather-long-descriptive-file-name.md
chapter-29-a-rather-long-descriptive-file-name.md
chapter-30-a-rather-long-descriptive-file-name.md
chapter-31-a-rather-long-descriptive-file-name.md
chapter-32-a-rather-long-descriptive-file-name.md
chapter-33-a-rather-long-descriptive-file-name.md
chapter-34-a-rather-long-descriptive-file-name.md
chapter-35-a-rather-long-descriptive-file-name.md
chapter-36-a-rather-long-descriptive-file-name.md
chapter-37-a-rather-long-descriptive-file-name.md
chapter-38-a-rather-long-descriptive-file-name.md
chapter-39-a-rather-long-descriptive-file-name.md
chapter-40-a-rather-long-descriptive-file-name.md
scripts
deploy
regions
eu-west-2
promote.sh⚙
us-east-1
canary
rollback.sh⚙
verify-health-and-roll-forward.sh⚙
lib
common.py
templates
pull-request-body.md
README.md
SKILL.md
components/ux/FileTree.vue
Usage
<UxFileTree
:files = "[]"
modelValue = "null"
:foldersFirst = "true"
label = "Files"
empty = "No files."
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | { path, ...meta }[] | [] | The files; folders come from the paths. Meta rides along untouched to #adornment and the select event |
| modelValue | String | null | The selected file's path (v-model) |
| foldersFirst | Boolean | true | Folders before files in each directory (explorer default); false puts files first — e.g. SKILL.md above scripts/ |
| label | String | 'Files' | Accessible name of the tree |
| empty | String | 'No files.' | Text when there are no files (#empty replaces it) |
Events
| Event | Description |
|---|---|
| update:modelValue | A file row was selected (click, Enter, Space) — its path |
| select | Same moment — the file object as passed in, meta included |
Slots
| Slot | Description |
|---|---|
| adornment | Right-aligned per-file marks (⚙ executable, ○ bundled only, a size…); scope { file } |
| empty | Replaces the empty text |