@xui/tree 2.0.0-alpha.11 → 2.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -156
- package/fesm2022/xui-tree.mjs +23 -101
- package/fesm2022/xui-tree.mjs.map +1 -1
- package/package.json +3 -3
- package/types/xui-tree.d.ts +9 -18
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
package/fesm2022/xui-tree.mjs
CHANGED
|
@@ -4,7 +4,8 @@ import { inject, ElementRef, input, model, output, signal, computed, effect, unt
|
|
|
4
4
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
5
5
|
import { matChevronRightRound } from '@ng-icons/material-icons/round';
|
|
6
6
|
import { xui } from '@xui/core';
|
|
7
|
-
import { injectXDirection
|
|
7
|
+
import { injectXDirection } from '@xui/core/a11y';
|
|
8
|
+
import { flattenVisibleTree, collectExpandedIds, isTreeNodeExpandable, toggleExpandedId, treeKeyAction } from '@xui/core/tree';
|
|
8
9
|
import { XuiIcon } from '@xui/icon';
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -33,39 +34,14 @@ class XuiTree {
|
|
|
33
34
|
computedClass = computed(() => xui('block text-sm select-none', this.class()), /* @ts-ignore */
|
|
34
35
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
35
36
|
/** Every node flattened in visual (depth-first) order, respecting expansion. */
|
|
36
|
-
visible = computed(() =>
|
|
37
|
-
const out = [];
|
|
38
|
-
const walk = (list, level, parentId) => {
|
|
39
|
-
for (const node of list) {
|
|
40
|
-
const expandable = this.isExpandable(node);
|
|
41
|
-
out.push({ node, level, parentId, expandable });
|
|
42
|
-
if (expandable && this.expanded().has(node.id)) {
|
|
43
|
-
walk(node.childNodes ?? [], level + 1, node.id);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
walk(this.nodes(), 0, null);
|
|
48
|
-
return out;
|
|
49
|
-
}, /* @ts-ignore */
|
|
37
|
+
visible = computed(() => flattenVisibleTree(this.nodes(), this.expanded()), /* @ts-ignore */
|
|
50
38
|
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
51
39
|
constructor() {
|
|
52
40
|
// Seed expansion from each node's `isExpanded` flag, and the initial focus.
|
|
53
41
|
effect(() => {
|
|
54
42
|
const nodes = this.nodes();
|
|
55
43
|
untracked(() => {
|
|
56
|
-
|
|
57
|
-
const seed = (list) => {
|
|
58
|
-
for (const n of list) {
|
|
59
|
-
if (n.isExpanded) {
|
|
60
|
-
set.add(n.id);
|
|
61
|
-
}
|
|
62
|
-
if (n.childNodes) {
|
|
63
|
-
seed(n.childNodes);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
seed(nodes);
|
|
68
|
-
this.expanded.set(set);
|
|
44
|
+
this.expanded.set(collectExpandedIds(nodes));
|
|
69
45
|
if (this.focusedId() == null && nodes.length) {
|
|
70
46
|
this.focusedId.set(nodes[0].id);
|
|
71
47
|
}
|
|
@@ -73,7 +49,7 @@ class XuiTree {
|
|
|
73
49
|
});
|
|
74
50
|
}
|
|
75
51
|
isExpandable(node) {
|
|
76
|
-
return
|
|
52
|
+
return isTreeNodeExpandable(node);
|
|
77
53
|
}
|
|
78
54
|
isExpanded(node) {
|
|
79
55
|
return this.expanded().has(node.id);
|
|
@@ -92,26 +68,9 @@ class XuiTree {
|
|
|
92
68
|
if (node.disabled || !this.isExpandable(node)) {
|
|
93
69
|
return;
|
|
94
70
|
}
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
this.nodeCollapsed.emit(node);
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
set.add(node.id);
|
|
102
|
-
this.nodeExpanded.emit(node);
|
|
103
|
-
}
|
|
104
|
-
this.expanded.set(set);
|
|
105
|
-
}
|
|
106
|
-
expand(node) {
|
|
107
|
-
if (!this.isExpanded(node)) {
|
|
108
|
-
this.toggle(node);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
collapse(node) {
|
|
112
|
-
if (this.isExpanded(node)) {
|
|
113
|
-
this.toggle(node);
|
|
114
|
-
}
|
|
71
|
+
const wasExpanded = this.isExpanded(node);
|
|
72
|
+
this.expanded.update(set => toggleExpandedId(set, node.id));
|
|
73
|
+
(wasExpanded ? this.nodeCollapsed : this.nodeExpanded).emit(node);
|
|
115
74
|
}
|
|
116
75
|
onRowClick(node) {
|
|
117
76
|
if (node.disabled) {
|
|
@@ -124,63 +83,26 @@ class XuiTree {
|
|
|
124
83
|
onKeydown(event, node) {
|
|
125
84
|
const flat = this.visible();
|
|
126
85
|
const index = flat.findIndex(f => f.node.id === node.id);
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
const inline = arrowDirectionOnAxis(event.key, this.direction(), 'horizontal');
|
|
130
|
-
if (inline === 'next') {
|
|
131
|
-
event.preventDefault();
|
|
132
|
-
if (this.isExpandable(node) && !this.isExpanded(node)) {
|
|
133
|
-
this.expand(node);
|
|
134
|
-
}
|
|
135
|
-
else if (this.isExpandable(node)) {
|
|
136
|
-
this.focusIndex(index + 1); // step into the first child
|
|
137
|
-
}
|
|
86
|
+
const action = treeKeyAction(event.key, this.direction(), flat, index, this.expanded());
|
|
87
|
+
if (!action) {
|
|
138
88
|
return;
|
|
139
89
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
else {
|
|
146
|
-
// Step out to the parent.
|
|
147
|
-
const parentId = flat[index]?.parentId;
|
|
148
|
-
const parentIndex = flat.findIndex(f => f.node.id === parentId);
|
|
149
|
-
if (parentIndex >= 0) {
|
|
150
|
-
this.focusIndex(parentIndex);
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
switch (event.key) {
|
|
156
|
-
case 'ArrowDown':
|
|
157
|
-
event.preventDefault();
|
|
158
|
-
this.focusIndex(index + 1);
|
|
159
|
-
break;
|
|
160
|
-
case 'ArrowUp':
|
|
161
|
-
event.preventDefault();
|
|
162
|
-
this.focusIndex(index - 1);
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
switch (action.kind) {
|
|
92
|
+
case 'expand':
|
|
93
|
+
case 'collapse':
|
|
94
|
+
this.toggle(action.node);
|
|
163
95
|
break;
|
|
164
|
-
case '
|
|
165
|
-
|
|
166
|
-
this.focusIndex(0);
|
|
96
|
+
case 'focus':
|
|
97
|
+
this.focusIndex(action.index);
|
|
167
98
|
break;
|
|
168
|
-
case '
|
|
169
|
-
|
|
170
|
-
this.focusIndex(flat.length - 1);
|
|
99
|
+
case 'select':
|
|
100
|
+
this.onRowClick(action.node);
|
|
171
101
|
break;
|
|
172
|
-
case 'Enter':
|
|
173
|
-
case ' ':
|
|
174
|
-
event.preventDefault();
|
|
175
|
-
this.onRowClick(node);
|
|
176
|
-
break;
|
|
177
|
-
default:
|
|
178
|
-
return;
|
|
179
102
|
}
|
|
180
103
|
}
|
|
181
104
|
focusIndex(index) {
|
|
182
|
-
const
|
|
183
|
-
const target = flat[Math.max(0, Math.min(flat.length - 1, index))];
|
|
105
|
+
const target = this.visible()[index];
|
|
184
106
|
if (!target) {
|
|
185
107
|
return;
|
|
186
108
|
}
|
|
@@ -231,7 +153,7 @@ class XuiTree {
|
|
|
231
153
|
|
|
232
154
|
@if (isExpandable(node) && isExpanded(node)) {
|
|
233
155
|
<ul role="group" class="m-0 list-none p-0">
|
|
234
|
-
@for (child of node.
|
|
156
|
+
@for (child of node.children ?? []; track child.id) {
|
|
235
157
|
<ng-container
|
|
236
158
|
[ngTemplateOutlet]="nodeTpl"
|
|
237
159
|
[ngTemplateOutletContext]="{ $implicit: child, level: level + 1 }"
|
|
@@ -247,7 +169,7 @@ class XuiTree {
|
|
|
247
169
|
<ng-container [ngTemplateOutlet]="nodeTpl" [ngTemplateOutletContext]="{ $implicit: node, level: 0 }" />
|
|
248
170
|
}
|
|
249
171
|
</ul>
|
|
250
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "
|
|
172
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }], viewProviders: [provideIcons({ matChevronRightRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
251
173
|
}
|
|
252
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiTree, decorators: [{
|
|
253
175
|
type: Component,
|
|
@@ -294,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
294
216
|
|
|
295
217
|
@if (isExpandable(node) && isExpanded(node)) {
|
|
296
218
|
<ul role="group" class="m-0 list-none p-0">
|
|
297
|
-
@for (child of node.
|
|
219
|
+
@for (child of node.children ?? []; track child.id) {
|
|
298
220
|
<ng-container
|
|
299
221
|
[ngTemplateOutlet]="nodeTpl"
|
|
300
222
|
[ngTemplateOutletContext]="{ $implicit: child, level: level + 1 }"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-tree.mjs","sources":["../../../../../../libs/ui/tree/xui/src/lib/tree.ts","../../../../../../libs/ui/tree/xui/src/index.ts","../../../../../../libs/ui/tree/xui/src/xui-tree.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n input,\n model,\n output,\n signal,\n untracked,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { arrowDirectionOnAxis, injectXDirection } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport type { XuiTreeNode } from './tree.types';\n\ninterface FlatNode {\n node: XuiTreeNode;\n level: number;\n parentId: string | number | null;\n expandable: boolean;\n}\n\n/**\n * A hierarchical tree of {@link XuiTreeNode}s with expand/collapse carets, single\n * selection, optional icons and secondary labels, and full keyboard support\n * (Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select).\n */\n@Component({\n selector: 'xui-tree',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n template: `\n <ng-template #nodeTpl let-node let-level=\"level\">\n <li\n role=\"treeitem\"\n [attr.aria-expanded]=\"isExpandable(node) ? isExpanded(node) : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n >\n <div\n [class]=\"rowClass(node)\"\n [style.padding-inline-start.rem]=\"0.5 + level * 1.25\"\n [attr.data-node-id]=\"node.id\"\n [tabindex]=\"node.id === focusedId() ? 0 : -1\"\n (click)=\"onRowClick(node)\"\n (keydown)=\"onKeydown($event, node)\"\n >\n <span class=\"flex size-5 shrink-0 items-center justify-center\">\n @if (isExpandable(node)) {\n <ng-icon\n xui\n name=\"matChevronRightRound\"\n size=\"sm\"\n [class]=\"caretClass(isExpanded(node))\"\n (click)=\"toggle(node); $event.stopPropagation()\"\n />\n }\n </span>\n\n @if (node.icon) {\n <ng-icon xui [name]=\"node.icon\" size=\"sm\" class=\"text-foreground-muted shrink-0\" />\n }\n\n <span class=\"flex-1 truncate\">{{ node.label }}</span>\n\n @if (node.secondaryLabel) {\n <span class=\"text-foreground-muted ms-2 shrink-0 text-xs\">{{ node.secondaryLabel }}</span>\n }\n </div>\n\n @if (isExpandable(node) && isExpanded(node)) {\n <ul role=\"group\" class=\"m-0 list-none p-0\">\n @for (child of node.childNodes ?? []; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n />\n }\n </ul>\n }\n </li>\n </ng-template>\n\n <ul role=\"tree\" class=\"m-0 list-none p-0\" [attr.aria-label]=\"ariaLabel()\">\n @for (node of nodes(); track node.id) {\n <ng-container [ngTemplateOutlet]=\"nodeTpl\" [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\" />\n }\n </ul>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matChevronRightRound })]\n})\nexport class XuiTree {\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n protected readonly direction = injectXDirection();\n\n readonly class = input<ClassValue>('');\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n readonly nodes = input<XuiTreeNode[]>([]);\n\n /** The selected node id. Two-way bindable with `[(selectedId)]`. */\n readonly selectedId = model<string | number | null>(null);\n\n readonly nodeClick = output<XuiTreeNode>();\n readonly nodeExpanded = output<XuiTreeNode>();\n readonly nodeCollapsed = output<XuiTreeNode>();\n\n private readonly expanded = signal(new Set<string | number>());\n protected readonly focusedId = signal<string | number | null>(null);\n\n protected readonly computedClass = computed(() => xui('block text-sm select-none', this.class()));\n\n /** Every node flattened in visual (depth-first) order, respecting expansion. */\n private readonly visible = computed<FlatNode[]>(() => {\n const out: FlatNode[] = [];\n const walk = (list: XuiTreeNode[], level: number, parentId: string | number | null) => {\n for (const node of list) {\n const expandable = this.isExpandable(node);\n out.push({ node, level, parentId, expandable });\n if (expandable && this.expanded().has(node.id)) {\n walk(node.childNodes ?? [], level + 1, node.id);\n }\n }\n };\n walk(this.nodes(), 0, null);\n return out;\n });\n\n constructor() {\n // Seed expansion from each node's `isExpanded` flag, and the initial focus.\n effect(() => {\n const nodes = this.nodes();\n untracked(() => {\n const set = new Set<string | number>();\n const seed = (list: XuiTreeNode[]) => {\n for (const n of list) {\n if (n.isExpanded) {\n set.add(n.id);\n }\n if (n.childNodes) {\n seed(n.childNodes);\n }\n }\n };\n seed(nodes);\n this.expanded.set(set);\n if (this.focusedId() == null && nodes.length) {\n this.focusedId.set(nodes[0].id);\n }\n });\n });\n }\n\n protected isExpandable(node: XuiTreeNode): boolean {\n return !!node.hasCaret || !!node.childNodes?.length;\n }\n\n protected isExpanded(node: XuiTreeNode): boolean {\n return this.expanded().has(node.id);\n }\n\n /**\n * The expand caret. It is drawn pointing right, so a collapsed node has to be\n * flipped in RTL to keep pointing \"further in\"; expanded always points down.\n */\n protected caretClass(expanded: boolean): string {\n return xui('transition-transform', expanded ? 'rotate-90' : this.direction() === 'rtl' && 'rotate-180');\n }\n\n protected rowClass(node: XuiTreeNode): string {\n return xui(\n 'flex items-center gap-1.5 rounded py-1 pe-2 transition-colors',\n node.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-surface-inset/60',\n 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-focus',\n node.id === this.selectedId() && 'bg-primary/10 text-primary'\n );\n }\n\n protected toggle(node: XuiTreeNode): void {\n if (node.disabled || !this.isExpandable(node)) {\n return;\n }\n\n const set = new Set(this.expanded());\n if (set.has(node.id)) {\n set.delete(node.id);\n this.nodeCollapsed.emit(node);\n } else {\n set.add(node.id);\n this.nodeExpanded.emit(node);\n }\n this.expanded.set(set);\n }\n\n private expand(node: XuiTreeNode): void {\n if (!this.isExpanded(node)) {\n this.toggle(node);\n }\n }\n\n private collapse(node: XuiTreeNode): void {\n if (this.isExpanded(node)) {\n this.toggle(node);\n }\n }\n\n protected onRowClick(node: XuiTreeNode): void {\n if (node.disabled) {\n return;\n }\n\n this.focusedId.set(node.id);\n this.selectedId.set(node.id);\n this.nodeClick.emit(node);\n }\n\n protected onKeydown(event: KeyboardEvent, node: XuiTreeNode): void {\n const flat = this.visible();\n const index = flat.findIndex(f => f.node.id === node.id);\n\n // Expanding walks *into* the tree, which is the inline-end arrow — ArrowLeft\n // in RTL. Collapsing walks back out.\n const inline = arrowDirectionOnAxis(event.key, this.direction(), 'horizontal');\n\n if (inline === 'next') {\n event.preventDefault();\n if (this.isExpandable(node) && !this.isExpanded(node)) {\n this.expand(node);\n } else if (this.isExpandable(node)) {\n this.focusIndex(index + 1); // step into the first child\n }\n return;\n }\n\n if (inline === 'previous') {\n event.preventDefault();\n if (this.isExpandable(node) && this.isExpanded(node)) {\n this.collapse(node);\n } else {\n // Step out to the parent.\n const parentId = flat[index]?.parentId;\n const parentIndex = flat.findIndex(f => f.node.id === parentId);\n if (parentIndex >= 0) {\n this.focusIndex(parentIndex);\n }\n }\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.focusIndex(index + 1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.focusIndex(index - 1);\n break;\n case 'Home':\n event.preventDefault();\n this.focusIndex(0);\n break;\n case 'End':\n event.preventDefault();\n this.focusIndex(flat.length - 1);\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.onRowClick(node);\n break;\n default:\n return;\n }\n }\n\n private focusIndex(index: number): void {\n const flat = this.visible();\n const target = flat[Math.max(0, Math.min(flat.length - 1, index))];\n if (!target) {\n return;\n }\n\n this.focusedId.set(target.node.id);\n // Roving tabindex updates on the next tick; move DOM focus to the row.\n queueMicrotask(() => {\n this.host.nativeElement.querySelector<HTMLElement>(`[data-node-id=\"${target.node.id}\"]`)?.focus();\n });\n }\n}\n","import { XuiTree } from './lib/tree';\n\nexport * from './lib/tree';\nexport * from './lib/tree.types';\n\nexport const XuiTreeImports = [XuiTree] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"xui-tree.mjs","sources":["../../../../../../libs/ui/tree/xui/src/lib/tree.ts","../../../../../../libs/ui/tree/xui/src/index.ts","../../../../../../libs/ui/tree/xui/src/xui-tree.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n input,\n model,\n output,\n signal,\n untracked,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { injectXDirection } from '@xui/core/a11y';\nimport {\n collectExpandedIds,\n flattenVisibleTree,\n isTreeNodeExpandable,\n toggleExpandedId,\n treeKeyAction,\n type XFlatTreeNode\n} from '@xui/core/tree';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport type { XuiTreeNode } from './tree.types';\n\n/**\n * A hierarchical tree of {@link XuiTreeNode}s with expand/collapse carets, single\n * selection, optional icons and secondary labels, and full keyboard support\n * (Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select).\n */\n@Component({\n selector: 'xui-tree',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n template: `\n <ng-template #nodeTpl let-node let-level=\"level\">\n <li\n role=\"treeitem\"\n [attr.aria-expanded]=\"isExpandable(node) ? isExpanded(node) : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n >\n <div\n [class]=\"rowClass(node)\"\n [style.padding-inline-start.rem]=\"0.5 + level * 1.25\"\n [attr.data-node-id]=\"node.id\"\n [tabindex]=\"node.id === focusedId() ? 0 : -1\"\n (click)=\"onRowClick(node)\"\n (keydown)=\"onKeydown($event, node)\"\n >\n <span class=\"flex size-5 shrink-0 items-center justify-center\">\n @if (isExpandable(node)) {\n <ng-icon\n xui\n name=\"matChevronRightRound\"\n size=\"sm\"\n [class]=\"caretClass(isExpanded(node))\"\n (click)=\"toggle(node); $event.stopPropagation()\"\n />\n }\n </span>\n\n @if (node.icon) {\n <ng-icon xui [name]=\"node.icon\" size=\"sm\" class=\"text-foreground-muted shrink-0\" />\n }\n\n <span class=\"flex-1 truncate\">{{ node.label }}</span>\n\n @if (node.secondaryLabel) {\n <span class=\"text-foreground-muted ms-2 shrink-0 text-xs\">{{ node.secondaryLabel }}</span>\n }\n </div>\n\n @if (isExpandable(node) && isExpanded(node)) {\n <ul role=\"group\" class=\"m-0 list-none p-0\">\n @for (child of node.children ?? []; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n />\n }\n </ul>\n }\n </li>\n </ng-template>\n\n <ul role=\"tree\" class=\"m-0 list-none p-0\" [attr.aria-label]=\"ariaLabel()\">\n @for (node of nodes(); track node.id) {\n <ng-container [ngTemplateOutlet]=\"nodeTpl\" [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\" />\n }\n </ul>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matChevronRightRound })]\n})\nexport class XuiTree {\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n protected readonly direction = injectXDirection();\n\n readonly class = input<ClassValue>('');\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n readonly nodes = input<XuiTreeNode[]>([]);\n\n /** The selected node id. Two-way bindable with `[(selectedId)]`. */\n readonly selectedId = model<string | number | null>(null);\n\n readonly nodeClick = output<XuiTreeNode>();\n readonly nodeExpanded = output<XuiTreeNode>();\n readonly nodeCollapsed = output<XuiTreeNode>();\n\n private readonly expanded = signal(new Set<string | number>());\n protected readonly focusedId = signal<string | number | null>(null);\n\n protected readonly computedClass = computed(() => xui('block text-sm select-none', this.class()));\n\n /** Every node flattened in visual (depth-first) order, respecting expansion. */\n private readonly visible = computed<XFlatTreeNode<XuiTreeNode>[]>(() =>\n flattenVisibleTree(this.nodes(), this.expanded())\n );\n\n constructor() {\n // Seed expansion from each node's `isExpanded` flag, and the initial focus.\n effect(() => {\n const nodes = this.nodes();\n untracked(() => {\n this.expanded.set(collectExpandedIds(nodes));\n if (this.focusedId() == null && nodes.length) {\n this.focusedId.set(nodes[0].id);\n }\n });\n });\n }\n\n protected isExpandable(node: XuiTreeNode): boolean {\n return isTreeNodeExpandable(node);\n }\n\n protected isExpanded(node: XuiTreeNode): boolean {\n return this.expanded().has(node.id);\n }\n\n /**\n * The expand caret. It is drawn pointing right, so a collapsed node has to be\n * flipped in RTL to keep pointing \"further in\"; expanded always points down.\n */\n protected caretClass(expanded: boolean): string {\n return xui('transition-transform', expanded ? 'rotate-90' : this.direction() === 'rtl' && 'rotate-180');\n }\n\n protected rowClass(node: XuiTreeNode): string {\n return xui(\n 'flex items-center gap-1.5 rounded py-1 pe-2 transition-colors',\n node.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-surface-inset/60',\n 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-focus',\n node.id === this.selectedId() && 'bg-primary/10 text-primary'\n );\n }\n\n protected toggle(node: XuiTreeNode): void {\n if (node.disabled || !this.isExpandable(node)) {\n return;\n }\n\n const wasExpanded = this.isExpanded(node);\n this.expanded.update(set => toggleExpandedId(set, node.id));\n (wasExpanded ? this.nodeCollapsed : this.nodeExpanded).emit(node);\n }\n\n protected onRowClick(node: XuiTreeNode): void {\n if (node.disabled) {\n return;\n }\n\n this.focusedId.set(node.id);\n this.selectedId.set(node.id);\n this.nodeClick.emit(node);\n }\n\n protected onKeydown(event: KeyboardEvent, node: XuiTreeNode): void {\n const flat = this.visible();\n const index = flat.findIndex(f => f.node.id === node.id);\n const action = treeKeyAction(event.key, this.direction(), flat, index, this.expanded());\n\n if (!action) {\n return;\n }\n event.preventDefault();\n\n switch (action.kind) {\n case 'expand':\n case 'collapse':\n this.toggle(action.node);\n break;\n case 'focus':\n this.focusIndex(action.index);\n break;\n case 'select':\n this.onRowClick(action.node);\n break;\n }\n }\n\n private focusIndex(index: number): void {\n const target = this.visible()[index];\n if (!target) {\n return;\n }\n\n this.focusedId.set(target.node.id);\n // Roving tabindex updates on the next tick; move DOM focus to the row.\n queueMicrotask(() => {\n this.host.nativeElement.querySelector<HTMLElement>(`[data-node-id=\"${target.node.id}\"]`)?.focus();\n });\n }\n}\n","import { XuiTree } from './lib/tree';\n\nexport * from './lib/tree';\nexport * from './lib/tree.types';\n\nexport const XuiTreeImports = [XuiTree] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/tree",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.12",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@angular/core": "22",
|
|
41
41
|
"@ng-icons/core": "34",
|
|
42
42
|
"@ng-icons/material-icons": "34",
|
|
43
|
-
"@xui/core": "2.0.0-alpha.
|
|
44
|
-
"@xui/icon": "2.0.0-alpha.
|
|
43
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
44
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
45
45
|
"clsx": "^2.1.1"
|
|
46
46
|
},
|
|
47
47
|
"publishConfig": {
|
package/types/xui-tree.d.ts
CHANGED
|
@@ -1,27 +1,20 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import * as _xui_core_a11y from '@xui/core/a11y';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
|
+
import { XTreeNode } from '@xui/core/tree';
|
|
4
5
|
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
/**
|
|
7
|
+
* A single node in a {@link XuiTree} — the shared {@link XTreeNode} shape
|
|
8
|
+
* (`id`, `label`, `children`, `isExpanded`, `hasCaret`, `disabled`, `data`)
|
|
9
|
+
* plus the styled extras.
|
|
10
|
+
*/
|
|
11
|
+
interface XuiTreeNode extends XTreeNode {
|
|
12
|
+
/** Child nodes; presence (or `hasCaret`) makes the node expandable. */
|
|
13
|
+
children?: XuiTreeNode[];
|
|
11
14
|
/** Muted text shown at the trailing edge of the row. */
|
|
12
15
|
secondaryLabel?: string;
|
|
13
16
|
/** Optional leading icon name (from the app's icon registry). */
|
|
14
17
|
icon?: string;
|
|
15
|
-
/** Child nodes; presence (or `hasCaret`) makes the node expandable. */
|
|
16
|
-
childNodes?: XuiTreeNode[];
|
|
17
|
-
/** Start expanded. */
|
|
18
|
-
isExpanded?: boolean;
|
|
19
|
-
/** Force a caret even without loaded children (e.g. lazy loading). */
|
|
20
|
-
hasCaret?: boolean;
|
|
21
|
-
/** Non-selectable, non-expandable. */
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
/** Arbitrary payload echoed back on events. */
|
|
24
|
-
data?: unknown;
|
|
25
18
|
}
|
|
26
19
|
|
|
27
20
|
/**
|
|
@@ -55,8 +48,6 @@ declare class XuiTree {
|
|
|
55
48
|
protected caretClass(expanded: boolean): string;
|
|
56
49
|
protected rowClass(node: XuiTreeNode): string;
|
|
57
50
|
protected toggle(node: XuiTreeNode): void;
|
|
58
|
-
private expand;
|
|
59
|
-
private collapse;
|
|
60
51
|
protected onRowClick(node: XuiTreeNode): void;
|
|
61
52
|
protected onKeydown(event: KeyboardEvent, node: XuiTreeNode): void;
|
|
62
53
|
private focusIndex;
|