Skip to content

Add List (Tree) component #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
bendera wants to merge 68 commits into from
Closed

Add List (Tree) component #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
23a8c84
Add vscode-list component
bendera Feb 24, 2024
76bbc13
wip
bendera Feb 24, 2024
d584cc5
Use context instead of prop drilling
bendera Feb 24, 2024
3cff111
Add ability to select items
bendera Feb 25, 2024
6c0ccc2
Register selected item when selected manually
bendera Feb 25, 2024
801f3f1
Fix icons colors in selected mode
bendera Feb 25, 2024
e031585
Remove unused things
bendera Feb 25, 2024
59f88cd
Reflect indent property
bendera Feb 25, 2024
a9d0d15
Add text content customizations ability
bendera Feb 25, 2024
1451b80
Remove unused parts
bendera Feb 25, 2024
894f5dd
Rename private members
bendera Feb 25, 2024
c220cfc
Rename event handler
bendera Feb 25, 2024
72840bb
Save only the selected items to the context state
bendera Feb 25, 2024
7b61db5
Do not ad extra padding to leaf items
bendera Feb 25, 2024
2f41e87
Rename context state
bendera Feb 25, 2024
3dd9896
Add actions and decorations
bendera Feb 25, 2024
0a8ac23
Focus handling wip
bendera Feb 26, 2024
6aa046d
wip
bendera Mar 1, 2024
19ca291
Move focus highlight by keyboard
bendera Mar 7, 2024
641675a
wip focus handling
bendera May 13, 2024
4ae24d4
Rewrite the initial focus handling
bendera Sep 13, 2024
d768bef
Add ability to select item by enter key
bendera Sep 14, 2024
e283f08
Add ability to select item by space key
bendera Sep 14, 2024
bfb6d29
Control multi selection mode by property
bendera Sep 14, 2024
36ae0d6
Working range selection without edge cases
bendera Sep 15, 2024
d54c6ea
Fix range selection
bendera Sep 16, 2024
ad450b0
Change dev theme
bendera Sep 17, 2024
ab15cd3
Update dev page
bendera Jan 17, 2025
b202973
Update lock file with npm i
bendera Jan 17, 2025
b92d431
Upgrade @lit/context
bendera Jan 17, 2025
247181c
FIx TS issues
bendera Jun 19, 2025
e3f648b
Fix select previous closed branch item
bendera Jul 4, 2025
d8bd0ec
Focus item with keyboard
bendera Jul 4, 2025
65ec937
Set the default active element
bendera Jul 8, 2025
6dc8f67
Focus an item programmatically
bendera Jul 8, 2025
92077ca
Add config context
bendera Jul 8, 2025
e9225d8
Remove unused property
bendera Jul 8, 2025
3b1f9a0
Add path info to item
bendera Jul 8, 2025
20d8024
Remove outdated function
bendera Jul 8, 2025
fad7f58
Restructure
bendera Jul 9, 2025
fdd79ab
Simplify the active item focus logic
bendera Jul 10, 2025
b78ef02
Activate the first item by default
bendera Jul 10, 2025
c2adc7b
Add dev pages
bendera Jul 10, 2025
9ef8068
Finalize context logic
bendera Jul 10, 2025
7046fbf
Fix multiSelect
bendera Jul 10, 2025
4aa4b96
Restructure the file
bendera Jul 10, 2025
369a29d
Fix range the selection with shift button
bendera Jul 10, 2025
86cc310
Cleanup code
bendera Jul 10, 2025
cf0b6bd
Select multiple items with keyboard
bendera Jul 10, 2025
8684890
Handle single select
bendera Jul 10, 2025
22bedcd
Add tests
bendera Jul 11, 2025
a3cb54e
Add indent guides
bendera Jul 11, 2025
ad05c95
Highlight the indent guide
bendera Jul 11, 2025
a9cae44
Add highlighted guides property
bendera Jul 12, 2025
9ae02c3
Highlight indent guide
bendera Jul 12, 2025
c348811
Highlight guides
bendera Jul 12, 2025
c34b252
Add expand/collapse all feature
bendera Jul 12, 2025
bd3a0f7
A11Y aria-selected
bendera Jul 12, 2025
88cde07
Add aria-expanded and group role
bendera Jul 12, 2025
0efd643
Add more aria attributes
bendera Jul 12, 2025
c983bb1
Handle arrow right press
bendera Jul 12, 2025
4374890
Refactor
bendera Jul 12, 2025
9ae9b8d
Handle arrow left press
bendera Jul 12, 2025
ce2d739
Add expand mode
bendera Jul 12, 2025
0cc6e5e
Fix missing listened keys
bendera Jul 12, 2025
a9b14e8
Dispatch select event
bendera Jul 13, 2025
28fc820
Refactor
bendera Jul 13, 2025
a917089
Prettier fix
bendera Jul 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions dev/vscode-list/default-active-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<h1>Basic example</h1>
<main>
<vscode-demo>
<div style="background-color: var(--vscode-sideBar-background)">
<input type="text">
<vscode-list arrows indent="16" id="basic-example">
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item open>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
ipsum
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
ipsum
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
dolor
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
ipsum
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
</vscode-list-item>
</vscode-list-item>
<vscode-list-item open>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
dolor
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
ipsum
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
</vscode-list-item>
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
lorem
</vscode-list-item>
</vscode-list-item>
<vscode-list-item>
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
<vscode-icon
name="folder-opened"
slot="icon-branch-opened"
></vscode-icon>
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
dolor
</vscode-list-item>
</vscode-list>
<input type="text">
<button type="button" id="bt-set-active">Set active</button>
<script type="module">
const bt = document.querySelector('#bt-set-active');
bt.addEventListener('click', () => {
const li = document.querySelector('[data-path="1.1"]');
li.active = true;
li.updateComplete.then(() => {
li.focus();
});
});
</script>
</div>
</vscode-demo>
</main>
</body>
</html>
Loading