@xui/tree-select 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-select.mjs +302 -161
- package/fesm2022/xui-tree-select.mjs.map +1 -1
- package/package.json +3 -3
- package/types/xui-tree-select.d.ts +54 -9
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).
|
|
@@ -1,20 +1,43 @@
|
|
|
1
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
2
|
+
import { viewChild, input, model, booleanAttribute, signal, computed, linkedSignal, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
3
|
import { xui } from '@xui/core';
|
|
4
|
+
import { injectXDirection, uniqueId } from '@xui/core/a11y';
|
|
5
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
6
|
+
import { injectXOverlay } from '@xui/core/overlay';
|
|
7
|
+
import { collectExpandedIds, flattenVisibleTree, treeKeyAction, toggleExpandedId } from '@xui/core/tree';
|
|
5
8
|
|
|
9
|
+
const toTreeNode = (node) => ({
|
|
10
|
+
id: node.value,
|
|
11
|
+
label: node.label,
|
|
12
|
+
isExpanded: node.isExpanded,
|
|
13
|
+
hasCaret: node.hasCaret,
|
|
14
|
+
disabled: node.disabled,
|
|
15
|
+
children: node.children?.map(toTreeNode),
|
|
16
|
+
data: node
|
|
17
|
+
});
|
|
6
18
|
/**
|
|
7
19
|
* A select whose options are a tree. Single-select binds `value`; with
|
|
8
20
|
* `multiple`, `value` is a string array shown as removable chips. Branches
|
|
9
21
|
* expand/collapse; leaf (or any) nodes are selectable.
|
|
10
22
|
*
|
|
23
|
+
* The panel follows the APG tree keyboard contract from the trigger:
|
|
24
|
+
* Up/Down move the active row, the inline-end/-start arrows (RTL-aware)
|
|
25
|
+
* expand/collapse or step in/out, Home/End jump, Enter/Space select and
|
|
26
|
+
* Escape closes.
|
|
27
|
+
*
|
|
11
28
|
* ```html
|
|
12
29
|
* <xui-tree-select [nodes]="tree" [(value)]="picked" placeholder="Pick a node" />
|
|
13
30
|
* ```
|
|
14
31
|
*/
|
|
15
32
|
class XuiTreeSelect {
|
|
16
|
-
|
|
17
|
-
|
|
33
|
+
direction = injectXDirection();
|
|
34
|
+
panelId = uniqueId('xui-tree-select-panel');
|
|
35
|
+
overlay = injectXOverlay();
|
|
36
|
+
trigger = viewChild.required('trigger', /* @ts-ignore */
|
|
37
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
38
|
+
panel = viewChild.required('panel', /* @ts-ignore */
|
|
39
|
+
...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
|
|
40
|
+
ref = null;
|
|
18
41
|
class = input('', /* @ts-ignore */
|
|
19
42
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
20
43
|
nodes = input([], /* @ts-ignore */
|
|
@@ -25,10 +48,35 @@ class XuiTreeSelect {
|
|
|
25
48
|
placeholder = input('Select', /* @ts-ignore */
|
|
26
49
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
27
50
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
51
|
+
cva = createXValueAccessor({
|
|
52
|
+
onWrite: value => this.value.set(value ?? null),
|
|
53
|
+
disabled: this.disabled
|
|
54
|
+
});
|
|
55
|
+
isDisabled = this.cva.disabled;
|
|
56
|
+
/** Whether the panel has ever been open — so the initial closed state is not "touched". */
|
|
57
|
+
hasOpened = false;
|
|
28
58
|
open = signal(false, /* @ts-ignore */
|
|
29
59
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
30
|
-
|
|
31
|
-
|
|
60
|
+
/** The shared headless tree, keyed by each node's `value`. */
|
|
61
|
+
tree = computed(() => this.nodes().map(toTreeNode), /* @ts-ignore */
|
|
62
|
+
...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
|
|
63
|
+
/** Expanded branch values; reseeded from `isExpanded` when the nodes change. */
|
|
64
|
+
expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), source: this.tree,
|
|
65
|
+
computation: nodes => collectExpandedIds(nodes) });
|
|
66
|
+
/** The visible rows of the panel, flattened in visual order. */
|
|
67
|
+
rows = computed(() => flattenVisibleTree(this.tree(), this.expanded()), /* @ts-ignore */
|
|
68
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
69
|
+
/** The keyboard-active row's value (the trigger keeps DOM focus). */
|
|
70
|
+
activeValue = signal(null, /* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
|
|
72
|
+
activeDescendant = computed(() => {
|
|
73
|
+
if (!this.open()) {
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
const index = this.rows().findIndex(row => row.node.id === this.activeValue());
|
|
77
|
+
return index >= 0 ? this.rowId(index) : null;
|
|
78
|
+
}, /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
32
80
|
byValue = computed(() => {
|
|
33
81
|
const map = new Map();
|
|
34
82
|
const walk = (list) => {
|
|
@@ -55,13 +103,55 @@ class XuiTreeSelect {
|
|
|
55
103
|
}, /* @ts-ignore */
|
|
56
104
|
...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
57
105
|
constructor() {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
106
|
+
// The `open` signal is the single source of truth; the overlay follows it.
|
|
107
|
+
effect(() => {
|
|
108
|
+
const open = this.open();
|
|
109
|
+
untracked(() => (open ? this.attach() : this.detach()));
|
|
110
|
+
});
|
|
111
|
+
// Mark the control touched once the panel closes after having been open.
|
|
112
|
+
effect(() => {
|
|
113
|
+
if (this.open()) {
|
|
114
|
+
this.hasOpened = true;
|
|
61
115
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
116
|
+
else if (this.hasOpened) {
|
|
117
|
+
untracked(() => this.cva.markTouched());
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
attach() {
|
|
122
|
+
if (this.ref) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
// DOM focus stays on the trigger (the combobox contract points at rows via
|
|
126
|
+
// `aria-activedescendant`), so the overlay must not trap, steal or restore
|
|
127
|
+
// focus. Outside clicks dismiss through the overlay's click-phase check, so
|
|
128
|
+
// an outside press that starts a drag does not close the panel early.
|
|
129
|
+
const ref = this.overlay.open(this.panel(), {
|
|
130
|
+
origin: this.trigger().nativeElement,
|
|
131
|
+
placement: 'bottom-start',
|
|
132
|
+
offset: 4,
|
|
133
|
+
matchOriginWidth: true,
|
|
134
|
+
restoreFocus: false
|
|
135
|
+
});
|
|
136
|
+
this.ref = ref;
|
|
137
|
+
// The overlay can close itself (Escape, outside click). Fold that back into
|
|
138
|
+
// `open` so the model never lies about what is on screen; a stale ref's late
|
|
139
|
+
// close must not clobber a panel that was reopened in the meantime.
|
|
140
|
+
void ref.closed.then(() => {
|
|
141
|
+
if (this.ref === ref) {
|
|
142
|
+
this.ref = null;
|
|
143
|
+
untracked(() => this.open.set(false));
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
detach() {
|
|
148
|
+
// Null synchronously so a reopen in the same tick does not see a stale ref.
|
|
149
|
+
const ref = this.ref;
|
|
150
|
+
this.ref = null;
|
|
151
|
+
ref?.close();
|
|
152
|
+
}
|
|
153
|
+
rowId(index) {
|
|
154
|
+
return `${this.panelId}-row-${index}`;
|
|
65
155
|
}
|
|
66
156
|
labelOf(value) {
|
|
67
157
|
return (value != null && this.byValue().get(value)?.label) || '';
|
|
@@ -70,60 +160,131 @@ class XuiTreeSelect {
|
|
|
70
160
|
return this.selectedValues().includes(value);
|
|
71
161
|
}
|
|
72
162
|
toggle() {
|
|
73
|
-
if (
|
|
74
|
-
|
|
163
|
+
if (this.isDisabled()) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
if (this.open()) {
|
|
167
|
+
this.open.set(false);
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
this.openPanel();
|
|
75
171
|
}
|
|
76
172
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
173
|
+
openPanel() {
|
|
174
|
+
this.open.set(true);
|
|
175
|
+
// Land the active row on the (first) selected value, else the first row.
|
|
176
|
+
const rows = this.rows();
|
|
177
|
+
const selected = this.selectedValues();
|
|
178
|
+
const active = rows.find(row => selected.includes(String(row.node.id))) ?? rows[0];
|
|
179
|
+
this.activeValue.set(active ? String(active.node.id) : null);
|
|
180
|
+
}
|
|
181
|
+
onTriggerKeydown(event) {
|
|
182
|
+
if (this.isDisabled()) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
if (!this.open()) {
|
|
186
|
+
if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
|
|
187
|
+
event.preventDefault();
|
|
188
|
+
this.openPanel();
|
|
86
189
|
}
|
|
87
|
-
return
|
|
88
|
-
}
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
if (event.key === 'Escape') {
|
|
193
|
+
event.preventDefault();
|
|
194
|
+
this.open.set(false);
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
if (event.key === 'Tab') {
|
|
198
|
+
this.open.set(false);
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
const rows = this.rows();
|
|
202
|
+
const index = rows.findIndex(row => row.node.id === this.activeValue());
|
|
203
|
+
const action = treeKeyAction(event.key, this.direction(), rows, index, this.expanded());
|
|
204
|
+
if (!action) {
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
event.preventDefault();
|
|
208
|
+
switch (action.kind) {
|
|
209
|
+
case 'focus':
|
|
210
|
+
this.activeValue.set(String(action.node.id));
|
|
211
|
+
break;
|
|
212
|
+
case 'expand':
|
|
213
|
+
case 'collapse':
|
|
214
|
+
this.expanded.update(set => toggleExpandedId(set, action.node.id));
|
|
215
|
+
break;
|
|
216
|
+
case 'select':
|
|
217
|
+
this.pick(action.node.data);
|
|
218
|
+
break;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
toggleExpand(id, event) {
|
|
222
|
+
event.stopPropagation();
|
|
223
|
+
this.expanded.update(set => toggleExpandedId(set, id));
|
|
89
224
|
}
|
|
90
225
|
pick(node) {
|
|
91
|
-
if (node.disabled) {
|
|
226
|
+
if (node.disabled || this.isDisabled()) {
|
|
92
227
|
return;
|
|
93
228
|
}
|
|
229
|
+
this.activeValue.set(node.value);
|
|
94
230
|
if (this.multiple()) {
|
|
95
231
|
const current = this.selectedValues();
|
|
96
|
-
|
|
232
|
+
const next = current.includes(node.value) ? current.filter(v => v !== node.value) : [...current, node.value];
|
|
233
|
+
this.value.set(next);
|
|
234
|
+
this.cva.notifyChange(next);
|
|
97
235
|
}
|
|
98
236
|
else {
|
|
99
237
|
this.value.set(node.value);
|
|
238
|
+
this.cva.notifyChange(node.value);
|
|
100
239
|
this.open.set(false);
|
|
101
240
|
}
|
|
102
241
|
}
|
|
103
242
|
removeChip(value, event) {
|
|
104
243
|
event.stopPropagation();
|
|
105
|
-
|
|
244
|
+
if (this.isDisabled()) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
const next = this.selectedValues().filter(v => v !== value);
|
|
248
|
+
this.value.set(next);
|
|
249
|
+
this.cva.notifyChange(next);
|
|
106
250
|
}
|
|
107
|
-
computedClass = computed(() => xui('
|
|
251
|
+
computedClass = computed(() => xui('block', this.class()), /* @ts-ignore */
|
|
108
252
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
109
253
|
triggerClass = computed(() => xui('border-border bg-surface text-foreground flex min-h-(--control-height-md) w-full items-center gap-1 rounded-md border px-(--control-padding-md) py-1 text-sm outline-none focus-visible:border-primary disabled:opacity-50'), /* @ts-ignore */
|
|
110
254
|
...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
111
|
-
panelClass = computed(() => xui('border-border bg-surface-overlay
|
|
255
|
+
panelClass = computed(() => xui('border-border bg-surface-overlay max-h-72 w-full overflow-auto rounded-lg border p-1 shadow-overlay'), /* @ts-ignore */
|
|
112
256
|
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
257
|
+
/**
|
|
258
|
+
* The expand caret. It is drawn pointing right, so a collapsed node has to be
|
|
259
|
+
* flipped in RTL to keep pointing "further in"; expanded always points down.
|
|
260
|
+
*/
|
|
261
|
+
caretClass(expanded) {
|
|
262
|
+
return xui('h-3.5 w-3.5 transition-transform', expanded ? 'rotate-90' : this.direction() === 'rtl' && 'rotate-180');
|
|
263
|
+
}
|
|
113
264
|
rowClass(node) {
|
|
114
|
-
return xui('flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-sm select-none', node.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset', !this.multiple() && this.isSelected(node.value) && 'bg-primary/10 text-primary');
|
|
265
|
+
return xui('flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-sm select-none', node.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset', node.id === this.activeValue() && 'bg-surface-inset', !this.multiple() && this.isSelected(node.data.value) && 'bg-primary/10 text-primary');
|
|
115
266
|
}
|
|
116
267
|
checkboxClass(selected) {
|
|
117
268
|
return xui('flex h-4 w-4 items-center justify-center rounded border', selected ? 'bg-primary border-primary text-primary-foreground' : 'border-border');
|
|
118
269
|
}
|
|
270
|
+
writeValue = this.cva.writeValue;
|
|
271
|
+
registerOnChange = this.cva.registerOnChange;
|
|
272
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
273
|
+
setDisabledState = this.cva.setDisabledState;
|
|
119
274
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTreeSelect, isStandalone: true, selector: "xui-tree-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: `
|
|
275
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTreeSelect, isStandalone: true, selector: "xui-tree-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "computedClass()" } }, providers: [provideXValueAccessor((() => XuiTreeSelect))], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
121
276
|
<button
|
|
277
|
+
#trigger
|
|
122
278
|
type="button"
|
|
279
|
+
role="combobox"
|
|
280
|
+
aria-haspopup="tree"
|
|
123
281
|
[class]="triggerClass()"
|
|
124
|
-
[disabled]="
|
|
125
|
-
(click)="toggle()"
|
|
282
|
+
[disabled]="isDisabled()"
|
|
126
283
|
[attr.aria-expanded]="open()"
|
|
284
|
+
[attr.aria-controls]="open() ? panelId : null"
|
|
285
|
+
[attr.aria-activedescendant]="activeDescendant()"
|
|
286
|
+
(click)="toggle()"
|
|
287
|
+
(keydown)="onTriggerKeydown($event)"
|
|
127
288
|
>
|
|
128
289
|
@if (multiple()) {
|
|
129
290
|
@if (selectedValues().length) {
|
|
@@ -151,87 +312,79 @@ class XuiTreeSelect {
|
|
|
151
312
|
</svg>
|
|
152
313
|
</button>
|
|
153
314
|
|
|
154
|
-
|
|
155
|
-
<div [class]="panelClass()" role="tree">
|
|
156
|
-
@for (
|
|
157
|
-
<ng-container [ngTemplateOutlet]="nodeTpl" [ngTemplateOutletContext]="{ $implicit: node, level: 0 }" />
|
|
158
|
-
}
|
|
159
|
-
</div>
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
<ng-template #nodeTpl let-node let-level="level">
|
|
163
|
-
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
164
|
-
<div
|
|
165
|
-
role="treeitem"
|
|
166
|
-
[class]="rowClass(node)"
|
|
167
|
-
[style.padding-left.px]="8 + level * 16"
|
|
168
|
-
[attr.aria-selected]="isSelected(node.value)"
|
|
169
|
-
(click)="pick(node)"
|
|
170
|
-
>
|
|
171
|
-
@if (node.children?.length) {
|
|
315
|
+
<ng-template #panel>
|
|
316
|
+
<div [class]="panelClass()" role="tree" [id]="panelId">
|
|
317
|
+
@for (row of rows(); track row.node.id; let i = $index) {
|
|
172
318
|
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
173
|
-
<
|
|
174
|
-
|
|
175
|
-
|
|
319
|
+
<div
|
|
320
|
+
role="treeitem"
|
|
321
|
+
[id]="rowId(i)"
|
|
322
|
+
[class]="rowClass(row.node)"
|
|
323
|
+
[style.padding-inline-start.px]="8 + row.level * 16"
|
|
324
|
+
[attr.aria-expanded]="row.expandable ? expanded().has(row.node.id) : null"
|
|
325
|
+
[attr.aria-selected]="isSelected(row.node.data!.value)"
|
|
326
|
+
[attr.aria-disabled]="row.node.disabled || null"
|
|
327
|
+
[attr.aria-level]="row.level + 1"
|
|
328
|
+
(click)="pick(row.node.data!)"
|
|
176
329
|
>
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
@if (multiple()) {
|
|
196
|
-
<span [class]="checkboxClass(isSelected(node.value))">
|
|
197
|
-
@if (isSelected(node.value)) {
|
|
198
|
-
<svg viewBox="0 0 24 24" class="h-3 w-3" fill="none">
|
|
199
|
-
<path
|
|
200
|
-
d="M20 6 9 17l-5-5"
|
|
201
|
-
stroke="currentColor"
|
|
202
|
-
stroke-width="3"
|
|
203
|
-
stroke-linecap="round"
|
|
204
|
-
stroke-linejoin="round"
|
|
205
|
-
/>
|
|
206
|
-
</svg>
|
|
330
|
+
@if (row.expandable) {
|
|
331
|
+
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
332
|
+
<span
|
|
333
|
+
class="hover:text-foreground text-foreground-muted -ms-1 flex h-4 w-4 items-center justify-center"
|
|
334
|
+
(click)="toggleExpand(row.node.id, $event)"
|
|
335
|
+
>
|
|
336
|
+
<svg viewBox="0 0 24 24" [class]="caretClass(expanded().has(row.node.id))" fill="none">
|
|
337
|
+
<path
|
|
338
|
+
d="M9 6l6 6-6 6"
|
|
339
|
+
stroke="currentColor"
|
|
340
|
+
stroke-width="2"
|
|
341
|
+
stroke-linecap="round"
|
|
342
|
+
stroke-linejoin="round"
|
|
343
|
+
/>
|
|
344
|
+
</svg>
|
|
345
|
+
</span>
|
|
346
|
+
} @else {
|
|
347
|
+
<span class="w-3"></span>
|
|
207
348
|
}
|
|
208
|
-
|
|
349
|
+
@if (multiple()) {
|
|
350
|
+
<span [class]="checkboxClass(isSelected(row.node.data!.value))">
|
|
351
|
+
@if (isSelected(row.node.data!.value)) {
|
|
352
|
+
<svg viewBox="0 0 24 24" class="h-3 w-3" fill="none">
|
|
353
|
+
<path
|
|
354
|
+
d="M20 6 9 17l-5-5"
|
|
355
|
+
stroke="currentColor"
|
|
356
|
+
stroke-width="3"
|
|
357
|
+
stroke-linecap="round"
|
|
358
|
+
stroke-linejoin="round"
|
|
359
|
+
/>
|
|
360
|
+
</svg>
|
|
361
|
+
}
|
|
362
|
+
</span>
|
|
363
|
+
}
|
|
364
|
+
<span class="truncate">{{ row.node.label }}</span>
|
|
365
|
+
</div>
|
|
209
366
|
}
|
|
210
|
-
<span class="truncate">{{ node.label }}</span>
|
|
211
367
|
</div>
|
|
212
|
-
@if (expanded().has(node.value)) {
|
|
213
|
-
@for (child of node.children ?? []; track child.value) {
|
|
214
|
-
<ng-container
|
|
215
|
-
[ngTemplateOutlet]="nodeTpl"
|
|
216
|
-
[ngTemplateOutletContext]="{ $implicit: child, level: level + 1 }"
|
|
217
|
-
/>
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
368
|
</ng-template>
|
|
221
|
-
`, isInline: true,
|
|
369
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
222
370
|
}
|
|
223
371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiTreeSelect, decorators: [{
|
|
224
372
|
type: Component,
|
|
225
373
|
args: [{
|
|
226
374
|
selector: 'xui-tree-select',
|
|
227
|
-
imports: [NgTemplateOutlet],
|
|
228
375
|
template: `
|
|
229
376
|
<button
|
|
377
|
+
#trigger
|
|
230
378
|
type="button"
|
|
379
|
+
role="combobox"
|
|
380
|
+
aria-haspopup="tree"
|
|
231
381
|
[class]="triggerClass()"
|
|
232
|
-
[disabled]="
|
|
233
|
-
(click)="toggle()"
|
|
382
|
+
[disabled]="isDisabled()"
|
|
234
383
|
[attr.aria-expanded]="open()"
|
|
384
|
+
[attr.aria-controls]="open() ? panelId : null"
|
|
385
|
+
[attr.aria-activedescendant]="activeDescendant()"
|
|
386
|
+
(click)="toggle()"
|
|
387
|
+
(keydown)="onTriggerKeydown($event)"
|
|
235
388
|
>
|
|
236
389
|
@if (multiple()) {
|
|
237
390
|
@if (selectedValues().length) {
|
|
@@ -259,81 +412,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
259
412
|
</svg>
|
|
260
413
|
</button>
|
|
261
414
|
|
|
262
|
-
|
|
263
|
-
<div [class]="panelClass()" role="tree">
|
|
264
|
-
@for (
|
|
265
|
-
<ng-container [ngTemplateOutlet]="nodeTpl" [ngTemplateOutletContext]="{ $implicit: node, level: 0 }" />
|
|
266
|
-
}
|
|
267
|
-
</div>
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
<ng-template #nodeTpl let-node let-level="level">
|
|
271
|
-
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
272
|
-
<div
|
|
273
|
-
role="treeitem"
|
|
274
|
-
[class]="rowClass(node)"
|
|
275
|
-
[style.padding-left.px]="8 + level * 16"
|
|
276
|
-
[attr.aria-selected]="isSelected(node.value)"
|
|
277
|
-
(click)="pick(node)"
|
|
278
|
-
>
|
|
279
|
-
@if (node.children?.length) {
|
|
415
|
+
<ng-template #panel>
|
|
416
|
+
<div [class]="panelClass()" role="tree" [id]="panelId">
|
|
417
|
+
@for (row of rows(); track row.node.id; let i = $index) {
|
|
280
418
|
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
281
|
-
<
|
|
282
|
-
|
|
283
|
-
|
|
419
|
+
<div
|
|
420
|
+
role="treeitem"
|
|
421
|
+
[id]="rowId(i)"
|
|
422
|
+
[class]="rowClass(row.node)"
|
|
423
|
+
[style.padding-inline-start.px]="8 + row.level * 16"
|
|
424
|
+
[attr.aria-expanded]="row.expandable ? expanded().has(row.node.id) : null"
|
|
425
|
+
[attr.aria-selected]="isSelected(row.node.data!.value)"
|
|
426
|
+
[attr.aria-disabled]="row.node.disabled || null"
|
|
427
|
+
[attr.aria-level]="row.level + 1"
|
|
428
|
+
(click)="pick(row.node.data!)"
|
|
284
429
|
>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
@if (multiple()) {
|
|
304
|
-
<span [class]="checkboxClass(isSelected(node.value))">
|
|
305
|
-
@if (isSelected(node.value)) {
|
|
306
|
-
<svg viewBox="0 0 24 24" class="h-3 w-3" fill="none">
|
|
307
|
-
<path
|
|
308
|
-
d="M20 6 9 17l-5-5"
|
|
309
|
-
stroke="currentColor"
|
|
310
|
-
stroke-width="3"
|
|
311
|
-
stroke-linecap="round"
|
|
312
|
-
stroke-linejoin="round"
|
|
313
|
-
/>
|
|
314
|
-
</svg>
|
|
430
|
+
@if (row.expandable) {
|
|
431
|
+
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
432
|
+
<span
|
|
433
|
+
class="hover:text-foreground text-foreground-muted -ms-1 flex h-4 w-4 items-center justify-center"
|
|
434
|
+
(click)="toggleExpand(row.node.id, $event)"
|
|
435
|
+
>
|
|
436
|
+
<svg viewBox="0 0 24 24" [class]="caretClass(expanded().has(row.node.id))" fill="none">
|
|
437
|
+
<path
|
|
438
|
+
d="M9 6l6 6-6 6"
|
|
439
|
+
stroke="currentColor"
|
|
440
|
+
stroke-width="2"
|
|
441
|
+
stroke-linecap="round"
|
|
442
|
+
stroke-linejoin="round"
|
|
443
|
+
/>
|
|
444
|
+
</svg>
|
|
445
|
+
</span>
|
|
446
|
+
} @else {
|
|
447
|
+
<span class="w-3"></span>
|
|
315
448
|
}
|
|
316
|
-
|
|
449
|
+
@if (multiple()) {
|
|
450
|
+
<span [class]="checkboxClass(isSelected(row.node.data!.value))">
|
|
451
|
+
@if (isSelected(row.node.data!.value)) {
|
|
452
|
+
<svg viewBox="0 0 24 24" class="h-3 w-3" fill="none">
|
|
453
|
+
<path
|
|
454
|
+
d="M20 6 9 17l-5-5"
|
|
455
|
+
stroke="currentColor"
|
|
456
|
+
stroke-width="3"
|
|
457
|
+
stroke-linecap="round"
|
|
458
|
+
stroke-linejoin="round"
|
|
459
|
+
/>
|
|
460
|
+
</svg>
|
|
461
|
+
}
|
|
462
|
+
</span>
|
|
463
|
+
}
|
|
464
|
+
<span class="truncate">{{ row.node.label }}</span>
|
|
465
|
+
</div>
|
|
317
466
|
}
|
|
318
|
-
<span class="truncate">{{ node.label }}</span>
|
|
319
467
|
</div>
|
|
320
|
-
@if (expanded().has(node.value)) {
|
|
321
|
-
@for (child of node.children ?? []; track child.value) {
|
|
322
|
-
<ng-container
|
|
323
|
-
[ngTemplateOutlet]="nodeTpl"
|
|
324
|
-
[ngTemplateOutletContext]="{ $implicit: child, level: level + 1 }"
|
|
325
|
-
/>
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
468
|
</ng-template>
|
|
329
469
|
`,
|
|
330
470
|
host: {
|
|
331
471
|
'[class]': 'computedClass()'
|
|
332
472
|
},
|
|
473
|
+
providers: [provideXValueAccessor((() => XuiTreeSelect))],
|
|
333
474
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
334
475
|
encapsulation: ViewEncapsulation.None
|
|
335
476
|
}]
|
|
336
|
-
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
477
|
+
}], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
337
478
|
|
|
338
479
|
const XuiTreeSelectImports = [XuiTreeSelect];
|
|
339
480
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-tree-select.mjs","sources":["../../../../../../libs/ui/tree-select/xui/src/lib/tree-select.ts","../../../../../../libs/ui/tree-select/xui/src/index.ts","../../../../../../libs/ui/tree-select/xui/src/xui-tree-select.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\nexport interface XuiTreeSelectNode {\n value: string;\n label: string;\n children?: XuiTreeSelectNode[];\n disabled?: boolean;\n}\n\n/**\n * A select whose options are a tree. Single-select binds `value`; with\n * `multiple`, `value` is a string array shown as removable chips. Branches\n * expand/collapse; leaf (or any) nodes are selectable.\n *\n * ```html\n * <xui-tree-select [nodes]=\"tree\" [(value)]=\"picked\" placeholder=\"Pick a node\" />\n * ```\n */\n@Component({\n selector: 'xui-tree-select',\n imports: [NgTemplateOutlet],\n template: `\n <button\n type=\"button\"\n [class]=\"triggerClass()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open()\"\n >\n @if (multiple()) {\n @if (selectedValues().length) {\n <span class=\"flex flex-wrap gap-1\">\n @for (val of selectedValues(); track val) {\n <span\n class=\"bg-surface-inset text-foreground inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs\"\n >\n {{ labelOf(val) }}\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span class=\"hover:text-error cursor-pointer\" (click)=\"removeChip(val, $event)\">×</span>\n </span>\n }\n </span>\n } @else {\n <span class=\"text-foreground-muted\">{{ placeholder() }}</span>\n }\n } @else {\n <span [class]=\"displayLabel() ? 'text-foreground' : 'text-foreground-muted'\">{{\n displayLabel() || placeholder()\n }}</span>\n }\n <svg viewBox=\"0 0 24 24\" class=\"text-foreground-muted ms-auto h-4 w-4 shrink-0\" fill=\"none\">\n <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n @if (open()) {\n <div [class]=\"panelClass()\" role=\"tree\">\n @for (node of nodes(); track node.value) {\n <ng-container [ngTemplateOutlet]=\"nodeTpl\" [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\" />\n }\n </div>\n }\n\n <ng-template #nodeTpl let-node let-level=\"level\">\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div\n role=\"treeitem\"\n [class]=\"rowClass(node)\"\n [style.padding-left.px]=\"8 + level * 16\"\n [attr.aria-selected]=\"isSelected(node.value)\"\n (click)=\"pick(node)\"\n >\n @if (node.children?.length) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span\n class=\"hover:text-foreground text-foreground-muted -ms-1 flex h-4 w-4 items-center justify-center\"\n (click)=\"toggleExpand(node.value, $event)\"\n >\n <svg\n viewBox=\"0 0 24 24\"\n class=\"h-3.5 w-3.5 transition-transform\"\n [style.transform]=\"expanded().has(node.value) ? 'rotate(90deg)' : ''\"\n fill=\"none\"\n >\n <path\n d=\"M9 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n } @else {\n <span class=\"w-3\"></span>\n }\n @if (multiple()) {\n <span [class]=\"checkboxClass(isSelected(node.value))\">\n @if (isSelected(node.value)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </span>\n }\n <span class=\"truncate\">{{ node.label }}</span>\n </div>\n @if (expanded().has(node.value)) {\n @for (child of node.children ?? []; track child.value) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n />\n }\n }\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTreeSelect {\n private readonly el = inject(ElementRef).nativeElement as HTMLElement;\n private readonly document = this.el.ownerDocument;\n\n readonly class = input<ClassValue>('');\n readonly nodes = input<XuiTreeSelectNode[]>([]);\n readonly value = model<string | string[] | null>(null);\n readonly multiple = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly placeholder = input<string>('Select');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly open = signal(false);\n protected readonly expanded = signal(new Set<string>());\n\n private readonly byValue = computed(() => {\n const map = new Map<string, XuiTreeSelectNode>();\n const walk = (list: XuiTreeSelectNode[]): void => {\n for (const node of list) {\n map.set(node.value, node);\n if (node.children) {\n walk(node.children);\n }\n }\n };\n walk(this.nodes());\n return map;\n });\n\n protected readonly selectedValues = computed(() => {\n const value = this.value();\n return Array.isArray(value) ? value : value != null ? [value] : [];\n });\n\n /** The single-select label (empty in multiple mode or when unset). */\n protected readonly displayLabel = computed(() => {\n const value = this.value();\n return typeof value === 'string' && value ? this.labelOf(value) : '';\n });\n\n constructor() {\n const onDocClick = (event: MouseEvent): void => {\n if (this.open() && !this.el.contains(event.target as Node)) {\n this.open.set(false);\n }\n };\n this.document.addEventListener('click', onDocClick, true);\n inject(DestroyRef).onDestroy(() => this.document.removeEventListener('click', onDocClick, true));\n }\n\n protected labelOf(value: string | null): string {\n return (value != null && this.byValue().get(value)?.label) || '';\n }\n\n protected isSelected(value: string): boolean {\n return this.selectedValues().includes(value);\n }\n\n protected toggle(): void {\n if (!this.disabled()) {\n this.open.update(open => !open);\n }\n }\n\n protected toggleExpand(value: string, event: Event): void {\n event.stopPropagation();\n this.expanded.update(set => {\n const next = new Set(set);\n if (next.has(value)) {\n next.delete(value);\n } else {\n next.add(value);\n }\n return next;\n });\n }\n\n protected pick(node: XuiTreeSelectNode): void {\n if (node.disabled) {\n return;\n }\n if (this.multiple()) {\n const current = this.selectedValues();\n this.value.set(current.includes(node.value) ? current.filter(v => v !== node.value) : [...current, node.value]);\n } else {\n this.value.set(node.value);\n this.open.set(false);\n }\n }\n\n protected removeChip(value: string, event: Event): void {\n event.stopPropagation();\n this.value.set(this.selectedValues().filter(v => v !== value));\n }\n\n protected readonly computedClass = computed(() => xui('relative block', this.class()));\n protected readonly triggerClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground flex min-h-(--control-height-md) w-full items-center gap-1 rounded-md border px-(--control-padding-md) py-1 text-sm outline-none focus-visible:border-primary disabled:opacity-50'\n )\n );\n protected readonly panelClass = computed(() =>\n xui(\n 'border-border bg-surface-overlay absolute z-50 mt-1 max-h-72 w-full overflow-auto rounded-lg border p-1 shadow-lg'\n )\n );\n\n protected rowClass(node: XuiTreeSelectNode): string {\n return xui(\n 'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-sm select-none',\n node.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n !this.multiple() && this.isSelected(node.value) && 'bg-primary/10 text-primary'\n );\n }\n\n protected checkboxClass(selected: boolean): string {\n return xui(\n 'flex h-4 w-4 items-center justify-center rounded border',\n selected ? 'bg-primary border-primary text-primary-foreground' : 'border-border'\n );\n }\n}\n","import { XuiTreeSelect } from './lib/tree-select';\n\nexport * from './lib/tree-select';\n\nexport const XuiTreeSelectImports = [XuiTreeSelect] 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-select.mjs","sources":["../../../../../../libs/ui/tree-select/xui/src/lib/tree-select.ts","../../../../../../libs/ui/tree-select/xui/src/index.ts","../../../../../../libs/ui/tree-select/xui/src/xui-tree-select.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n input,\n linkedSignal,\n model,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport type { ControlValueAccessor } from '@angular/forms';\nimport { xui } from '@xui/core';\nimport { injectXDirection, uniqueId } from '@xui/core/a11y';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport { injectXOverlay, type XOverlayRef } from '@xui/core/overlay';\nimport {\n collectExpandedIds,\n flattenVisibleTree,\n toggleExpandedId,\n treeKeyAction,\n type XTreeNode,\n type XTreeNodeId\n} from '@xui/core/tree';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A node in the tree-select panel — the shared {@link XTreeNode} shape, keyed\n * by `value` instead of `id`.\n */\nexport interface XuiTreeSelectNode extends Omit<XTreeNode, 'id' | 'children' | 'data'> {\n /** The option value; doubles as the node's identity in the tree. */\n value: string;\n children?: XuiTreeSelectNode[];\n}\n\n/** The headless tree node backing a {@link XuiTreeSelectNode}. */\ntype PanelNode = XTreeNode<XuiTreeSelectNode>;\n\nconst toTreeNode = (node: XuiTreeSelectNode): PanelNode => ({\n id: node.value,\n label: node.label,\n isExpanded: node.isExpanded,\n hasCaret: node.hasCaret,\n disabled: node.disabled,\n children: node.children?.map(toTreeNode),\n data: node\n});\n\n/**\n * A select whose options are a tree. Single-select binds `value`; with\n * `multiple`, `value` is a string array shown as removable chips. Branches\n * expand/collapse; leaf (or any) nodes are selectable.\n *\n * The panel follows the APG tree keyboard contract from the trigger:\n * Up/Down move the active row, the inline-end/-start arrows (RTL-aware)\n * expand/collapse or step in/out, Home/End jump, Enter/Space select and\n * Escape closes.\n *\n * ```html\n * <xui-tree-select [nodes]=\"tree\" [(value)]=\"picked\" placeholder=\"Pick a node\" />\n * ```\n */\n@Component({\n selector: 'xui-tree-select',\n template: `\n <button\n #trigger\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"tree\"\n [class]=\"triggerClass()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (multiple()) {\n @if (selectedValues().length) {\n <span class=\"flex flex-wrap gap-1\">\n @for (val of selectedValues(); track val) {\n <span\n class=\"bg-surface-inset text-foreground inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs\"\n >\n {{ labelOf(val) }}\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span class=\"hover:text-error cursor-pointer\" (click)=\"removeChip(val, $event)\">×</span>\n </span>\n }\n </span>\n } @else {\n <span class=\"text-foreground-muted\">{{ placeholder() }}</span>\n }\n } @else {\n <span [class]=\"displayLabel() ? 'text-foreground' : 'text-foreground-muted'\">{{\n displayLabel() || placeholder()\n }}</span>\n }\n <svg viewBox=\"0 0 24 24\" class=\"text-foreground-muted ms-auto h-4 w-4 shrink-0\" fill=\"none\">\n <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <ng-template #panel>\n <div [class]=\"panelClass()\" role=\"tree\" [id]=\"panelId\">\n @for (row of rows(); track row.node.id; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div\n role=\"treeitem\"\n [id]=\"rowId(i)\"\n [class]=\"rowClass(row.node)\"\n [style.padding-inline-start.px]=\"8 + row.level * 16\"\n [attr.aria-expanded]=\"row.expandable ? expanded().has(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.data!.value)\"\n [attr.aria-disabled]=\"row.node.disabled || null\"\n [attr.aria-level]=\"row.level + 1\"\n (click)=\"pick(row.node.data!)\"\n >\n @if (row.expandable) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span\n class=\"hover:text-foreground text-foreground-muted -ms-1 flex h-4 w-4 items-center justify-center\"\n (click)=\"toggleExpand(row.node.id, $event)\"\n >\n <svg viewBox=\"0 0 24 24\" [class]=\"caretClass(expanded().has(row.node.id))\" fill=\"none\">\n <path\n d=\"M9 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n } @else {\n <span class=\"w-3\"></span>\n }\n @if (multiple()) {\n <span [class]=\"checkboxClass(isSelected(row.node.data!.value))\">\n @if (isSelected(row.node.data!.value)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </span>\n }\n <span class=\"truncate\">{{ row.node.label }}</span>\n </div>\n }\n </div>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n providers: [provideXValueAccessor(() => XuiTreeSelect)],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTreeSelect implements ControlValueAccessor {\n protected readonly direction = injectXDirection();\n protected readonly panelId = uniqueId('xui-tree-select-panel');\n private readonly overlay = injectXOverlay();\n private readonly trigger = viewChild.required<ElementRef<HTMLElement>>('trigger');\n private readonly panel = viewChild.required<TemplateRef<unknown>>('panel');\n private ref: XOverlayRef | null = null;\n\n readonly class = input<ClassValue>('');\n readonly nodes = input<XuiTreeSelectNode[]>([]);\n readonly value = model<string | string[] | null>(null);\n readonly multiple = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly placeholder = input<string>('Select');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly cva = createXValueAccessor<string | string[] | null>({\n onWrite: value => this.value.set(value ?? null),\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n /** Whether the panel has ever been open — so the initial closed state is not \"touched\". */\n private hasOpened = false;\n\n protected readonly open = signal(false);\n\n /** The shared headless tree, keyed by each node's `value`. */\n private readonly tree = computed<PanelNode[]>(() => this.nodes().map(toTreeNode));\n\n /** Expanded branch values; reseeded from `isExpanded` when the nodes change. */\n protected readonly expanded = linkedSignal<PanelNode[], Set<XTreeNodeId>>({\n source: this.tree,\n computation: nodes => collectExpandedIds(nodes)\n });\n\n /** The visible rows of the panel, flattened in visual order. */\n protected readonly rows = computed(() => flattenVisibleTree(this.tree(), this.expanded()));\n\n /** The keyboard-active row's value (the trigger keeps DOM focus). */\n protected readonly activeValue = signal<string | null>(null);\n\n protected readonly activeDescendant = computed(() => {\n if (!this.open()) {\n return null;\n }\n const index = this.rows().findIndex(row => row.node.id === this.activeValue());\n return index >= 0 ? this.rowId(index) : null;\n });\n\n private readonly byValue = computed(() => {\n const map = new Map<string, XuiTreeSelectNode>();\n const walk = (list: XuiTreeSelectNode[]): void => {\n for (const node of list) {\n map.set(node.value, node);\n if (node.children) {\n walk(node.children);\n }\n }\n };\n walk(this.nodes());\n return map;\n });\n\n protected readonly selectedValues = computed(() => {\n const value = this.value();\n return Array.isArray(value) ? value : value != null ? [value] : [];\n });\n\n /** The single-select label (empty in multiple mode or when unset). */\n protected readonly displayLabel = computed(() => {\n const value = this.value();\n return typeof value === 'string' && value ? this.labelOf(value) : '';\n });\n\n constructor() {\n // The `open` signal is the single source of truth; the overlay follows it.\n effect(() => {\n const open = this.open();\n\n untracked(() => (open ? this.attach() : this.detach()));\n });\n\n // Mark the control touched once the panel closes after having been open.\n effect(() => {\n if (this.open()) {\n this.hasOpened = true;\n } else if (this.hasOpened) {\n untracked(() => this.cva.markTouched());\n }\n });\n }\n\n private attach(): void {\n if (this.ref) {\n return;\n }\n\n // DOM focus stays on the trigger (the combobox contract points at rows via\n // `aria-activedescendant`), so the overlay must not trap, steal or restore\n // focus. Outside clicks dismiss through the overlay's click-phase check, so\n // an outside press that starts a drag does not close the panel early.\n const ref = this.overlay.open(this.panel(), {\n origin: this.trigger().nativeElement,\n placement: 'bottom-start',\n offset: 4,\n matchOriginWidth: true,\n restoreFocus: false\n });\n\n this.ref = ref;\n\n // The overlay can close itself (Escape, outside click). Fold that back into\n // `open` so the model never lies about what is on screen; a stale ref's late\n // close must not clobber a panel that was reopened in the meantime.\n void ref.closed.then(() => {\n if (this.ref === ref) {\n this.ref = null;\n untracked(() => this.open.set(false));\n }\n });\n }\n\n private detach(): void {\n // Null synchronously so a reopen in the same tick does not see a stale ref.\n const ref = this.ref;\n this.ref = null;\n ref?.close();\n }\n\n protected rowId(index: number): string {\n return `${this.panelId}-row-${index}`;\n }\n\n protected labelOf(value: string | null): string {\n return (value != null && this.byValue().get(value)?.label) || '';\n }\n\n protected isSelected(value: string): boolean {\n return this.selectedValues().includes(value);\n }\n\n protected toggle(): void {\n if (this.isDisabled()) {\n return;\n }\n if (this.open()) {\n this.open.set(false);\n } else {\n this.openPanel();\n }\n }\n\n private openPanel(): void {\n this.open.set(true);\n // Land the active row on the (first) selected value, else the first row.\n const rows = this.rows();\n const selected = this.selectedValues();\n const active = rows.find(row => selected.includes(String(row.node.id))) ?? rows[0];\n this.activeValue.set(active ? String(active.node.id) : null);\n }\n\n protected onTriggerKeydown(event: KeyboardEvent): void {\n if (this.isDisabled()) {\n return;\n }\n\n if (!this.open()) {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.openPanel();\n }\n return;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.open.set(false);\n return;\n }\n if (event.key === 'Tab') {\n this.open.set(false);\n return;\n }\n\n const rows = this.rows();\n const index = rows.findIndex(row => row.node.id === this.activeValue());\n const action = treeKeyAction(event.key, this.direction(), rows, index, this.expanded());\n\n if (!action) {\n return;\n }\n event.preventDefault();\n\n switch (action.kind) {\n case 'focus':\n this.activeValue.set(String(action.node.id));\n break;\n case 'expand':\n case 'collapse':\n this.expanded.update(set => toggleExpandedId(set, action.node.id));\n break;\n case 'select':\n this.pick(action.node.data!);\n break;\n }\n }\n\n protected toggleExpand(id: XTreeNodeId, event: Event): void {\n event.stopPropagation();\n this.expanded.update(set => toggleExpandedId(set, id));\n }\n\n protected pick(node: XuiTreeSelectNode): void {\n if (node.disabled || this.isDisabled()) {\n return;\n }\n this.activeValue.set(node.value);\n if (this.multiple()) {\n const current = this.selectedValues();\n const next = current.includes(node.value) ? current.filter(v => v !== node.value) : [...current, node.value];\n this.value.set(next);\n this.cva.notifyChange(next);\n } else {\n this.value.set(node.value);\n this.cva.notifyChange(node.value);\n this.open.set(false);\n }\n }\n\n protected removeChip(value: string, event: Event): void {\n event.stopPropagation();\n if (this.isDisabled()) {\n return;\n }\n const next = this.selectedValues().filter(v => v !== value);\n this.value.set(next);\n this.cva.notifyChange(next);\n }\n\n protected readonly computedClass = computed(() => xui('block', this.class()));\n protected readonly triggerClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground flex min-h-(--control-height-md) w-full items-center gap-1 rounded-md border px-(--control-padding-md) py-1 text-sm outline-none focus-visible:border-primary disabled:opacity-50'\n )\n );\n protected readonly panelClass = computed(() =>\n xui('border-border bg-surface-overlay max-h-72 w-full overflow-auto rounded-lg border p-1 shadow-overlay')\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('h-3.5 w-3.5 transition-transform', expanded ? 'rotate-90' : this.direction() === 'rtl' && 'rotate-180');\n }\n\n protected rowClass(node: PanelNode): string {\n return xui(\n 'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-sm select-none',\n node.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n node.id === this.activeValue() && 'bg-surface-inset',\n !this.multiple() && this.isSelected(node.data!.value) && 'bg-primary/10 text-primary'\n );\n }\n\n protected checkboxClass(selected: boolean): string {\n return xui(\n 'flex h-4 w-4 items-center justify-center rounded border',\n selected ? 'bg-primary border-primary text-primary-foreground' : 'border-border'\n );\n }\n\n readonly writeValue = this.cva.writeValue;\n readonly registerOnChange = this.cva.registerOnChange;\n readonly registerOnTouched = this.cva.registerOnTouched;\n readonly setDisabledState = this.cva.setDisabledState;\n}\n","import { XuiTreeSelect } from './lib/tree-select';\n\nexport * from './lib/tree-select';\n\nexport const XuiTreeSelectImports = [XuiTreeSelect] 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-select",
|
|
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",
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
|
-
"@angular/common": "22",
|
|
41
40
|
"@angular/core": "22",
|
|
42
|
-
"@
|
|
41
|
+
"@angular/forms": "22",
|
|
42
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
43
43
|
"clsx": "^2.1.1"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
@@ -1,49 +1,94 @@
|
|
|
1
|
+
import * as _xui_core_tree from '@xui/core/tree';
|
|
2
|
+
import { XTreeNode, XTreeNodeId } from '@xui/core/tree';
|
|
3
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
4
|
import * as _angular_core from '@angular/core';
|
|
5
|
+
import * as _xui_core_a11y from '@xui/core/a11y';
|
|
2
6
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
7
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
8
|
import { ClassValue } from 'clsx';
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
/**
|
|
11
|
+
* A node in the tree-select panel — the shared {@link XTreeNode} shape, keyed
|
|
12
|
+
* by `value` instead of `id`.
|
|
13
|
+
*/
|
|
14
|
+
interface XuiTreeSelectNode extends Omit<XTreeNode, 'id' | 'children' | 'data'> {
|
|
15
|
+
/** The option value; doubles as the node's identity in the tree. */
|
|
6
16
|
value: string;
|
|
7
|
-
label: string;
|
|
8
17
|
children?: XuiTreeSelectNode[];
|
|
9
|
-
disabled?: boolean;
|
|
10
18
|
}
|
|
19
|
+
/** The headless tree node backing a {@link XuiTreeSelectNode}. */
|
|
20
|
+
type PanelNode = XTreeNode<XuiTreeSelectNode>;
|
|
11
21
|
/**
|
|
12
22
|
* A select whose options are a tree. Single-select binds `value`; with
|
|
13
23
|
* `multiple`, `value` is a string array shown as removable chips. Branches
|
|
14
24
|
* expand/collapse; leaf (or any) nodes are selectable.
|
|
15
25
|
*
|
|
26
|
+
* The panel follows the APG tree keyboard contract from the trigger:
|
|
27
|
+
* Up/Down move the active row, the inline-end/-start arrows (RTL-aware)
|
|
28
|
+
* expand/collapse or step in/out, Home/End jump, Enter/Space select and
|
|
29
|
+
* Escape closes.
|
|
30
|
+
*
|
|
16
31
|
* ```html
|
|
17
32
|
* <xui-tree-select [nodes]="tree" [(value)]="picked" placeholder="Pick a node" />
|
|
18
33
|
* ```
|
|
19
34
|
*/
|
|
20
|
-
declare class XuiTreeSelect {
|
|
21
|
-
|
|
22
|
-
|
|
35
|
+
declare class XuiTreeSelect implements ControlValueAccessor {
|
|
36
|
+
protected readonly direction: _angular_core.Signal<_xui_core_a11y.XDirection>;
|
|
37
|
+
protected readonly panelId: string;
|
|
38
|
+
private readonly overlay;
|
|
39
|
+
private readonly trigger;
|
|
40
|
+
private readonly panel;
|
|
41
|
+
private ref;
|
|
23
42
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
24
43
|
readonly nodes: _angular_core.InputSignal<XuiTreeSelectNode[]>;
|
|
25
44
|
readonly value: _angular_core.ModelSignal<string | string[] | null>;
|
|
26
45
|
readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
27
46
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
28
47
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
48
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<string | string[] | null>;
|
|
49
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
50
|
+
/** Whether the panel has ever been open — so the initial closed state is not "touched". */
|
|
51
|
+
private hasOpened;
|
|
29
52
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
30
|
-
|
|
53
|
+
/** The shared headless tree, keyed by each node's `value`. */
|
|
54
|
+
private readonly tree;
|
|
55
|
+
/** Expanded branch values; reseeded from `isExpanded` when the nodes change. */
|
|
56
|
+
protected readonly expanded: _angular_core.WritableSignal<Set<XTreeNodeId>>;
|
|
57
|
+
/** The visible rows of the panel, flattened in visual order. */
|
|
58
|
+
protected readonly rows: _angular_core.Signal<_xui_core_tree.XFlatTreeNode<PanelNode>[]>;
|
|
59
|
+
/** The keyboard-active row's value (the trigger keeps DOM focus). */
|
|
60
|
+
protected readonly activeValue: _angular_core.WritableSignal<string | null>;
|
|
61
|
+
protected readonly activeDescendant: _angular_core.Signal<string | null>;
|
|
31
62
|
private readonly byValue;
|
|
32
63
|
protected readonly selectedValues: _angular_core.Signal<string[]>;
|
|
33
64
|
/** The single-select label (empty in multiple mode or when unset). */
|
|
34
65
|
protected readonly displayLabel: _angular_core.Signal<string>;
|
|
35
66
|
constructor();
|
|
67
|
+
private attach;
|
|
68
|
+
private detach;
|
|
69
|
+
protected rowId(index: number): string;
|
|
36
70
|
protected labelOf(value: string | null): string;
|
|
37
71
|
protected isSelected(value: string): boolean;
|
|
38
72
|
protected toggle(): void;
|
|
39
|
-
|
|
73
|
+
private openPanel;
|
|
74
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
75
|
+
protected toggleExpand(id: XTreeNodeId, event: Event): void;
|
|
40
76
|
protected pick(node: XuiTreeSelectNode): void;
|
|
41
77
|
protected removeChip(value: string, event: Event): void;
|
|
42
78
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
43
79
|
protected readonly triggerClass: _angular_core.Signal<string>;
|
|
44
80
|
protected readonly panelClass: _angular_core.Signal<string>;
|
|
45
|
-
|
|
81
|
+
/**
|
|
82
|
+
* The expand caret. It is drawn pointing right, so a collapsed node has to be
|
|
83
|
+
* flipped in RTL to keep pointing "further in"; expanded always points down.
|
|
84
|
+
*/
|
|
85
|
+
protected caretClass(expanded: boolean): string;
|
|
86
|
+
protected rowClass(node: PanelNode): string;
|
|
46
87
|
protected checkboxClass(selected: boolean): string;
|
|
88
|
+
readonly writeValue: (value: string | string[] | null) => void;
|
|
89
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<string | string[] | null>) => void;
|
|
90
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
91
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
47
92
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiTreeSelect, never>;
|
|
48
93
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiTreeSelect, "xui-tree-select", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
49
94
|
}
|