@xui/cascader 2.0.0-alpha.11 → 2.0.0-alpha.13
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-cascader.mjs +56 -18
- package/fesm2022/xui-cascader.mjs.map +1 -1
- package/package.json +2 -2
- package/types/xui-cascader.d.ts +9 -2
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,19 +1,27 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { viewChild, input, model, booleanAttribute, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { xui } from '@xui/core';
|
|
4
|
+
import { injectXOverlay } from '@xui/core/overlay';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* A cascading, column-based select. Each level opens the next column of children;
|
|
7
8
|
* choosing a leaf commits the full path. `value` is a two-way bindable array of
|
|
8
9
|
* values from root to leaf.
|
|
9
10
|
*
|
|
11
|
+
* The column panel floats on `@xui/core/overlay`, connected to the trigger, so
|
|
12
|
+
* stacking, Escape and outside-click dismissal behave like every other overlay.
|
|
13
|
+
*
|
|
10
14
|
* ```html
|
|
11
15
|
* <xui-cascader [options]="regions" [(value)]="path" placeholder="Select region" />
|
|
12
16
|
* ```
|
|
13
17
|
*/
|
|
14
18
|
class XuiCascader {
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
overlay = injectXOverlay();
|
|
20
|
+
trigger = viewChild.required('trigger', /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
22
|
+
panel = viewChild.required('panel', /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
|
|
24
|
+
ref = null;
|
|
17
25
|
class = input('', /* @ts-ignore */
|
|
18
26
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
19
27
|
options = input([], /* @ts-ignore */
|
|
@@ -61,13 +69,11 @@ class XuiCascader {
|
|
|
61
69
|
}, /* @ts-ignore */
|
|
62
70
|
...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
|
|
63
71
|
constructor() {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
};
|
|
69
|
-
this.document.addEventListener('click', onDocClick, true);
|
|
70
|
-
inject(DestroyRef).onDestroy(() => this.document.removeEventListener('click', onDocClick, true));
|
|
72
|
+
// The `open` signal is the single source of truth; the overlay follows it.
|
|
73
|
+
effect(() => {
|
|
74
|
+
const open = this.open();
|
|
75
|
+
untracked(() => (open ? this.attach() : this.detach()));
|
|
76
|
+
});
|
|
71
77
|
}
|
|
72
78
|
toggle() {
|
|
73
79
|
if (this.disabled()) {
|
|
@@ -90,18 +96,49 @@ class XuiCascader {
|
|
|
90
96
|
this.open.set(false);
|
|
91
97
|
}
|
|
92
98
|
}
|
|
93
|
-
|
|
99
|
+
attach() {
|
|
100
|
+
if (this.ref) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
// Outside clicks dismiss through the overlay's own click-phase check, so a
|
|
104
|
+
// press that starts a drag outside still does not close the panel. Focus is
|
|
105
|
+
// never moved into the panel, so nothing is trapped or restored.
|
|
106
|
+
const ref = this.overlay.open(this.panel(), {
|
|
107
|
+
origin: this.trigger().nativeElement,
|
|
108
|
+
placement: 'bottom-start',
|
|
109
|
+
offset: 4,
|
|
110
|
+
restoreFocus: false
|
|
111
|
+
});
|
|
112
|
+
this.ref = ref;
|
|
113
|
+
// The overlay can close itself (Escape, outside click). Fold that back into
|
|
114
|
+
// `open` so the model never lies about what is on screen; a stale ref's late
|
|
115
|
+
// close must not clobber a panel that was reopened in the meantime.
|
|
116
|
+
void ref.closed.then(() => {
|
|
117
|
+
if (this.ref === ref) {
|
|
118
|
+
this.ref = null;
|
|
119
|
+
untracked(() => this.open.set(false));
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
detach() {
|
|
124
|
+
// Null synchronously so a reopen in the same tick does not see a stale ref.
|
|
125
|
+
const ref = this.ref;
|
|
126
|
+
this.ref = null;
|
|
127
|
+
ref?.close();
|
|
128
|
+
}
|
|
129
|
+
computedClass = computed(() => xui('inline-block', this.class()), /* @ts-ignore */
|
|
94
130
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
95
131
|
triggerClass = computed(() => xui('border-border bg-surface text-foreground flex h-(--control-height-md) w-full min-w-48 items-center gap-1 rounded-md border px-(--control-padding-md) text-sm outline-none focus-visible:border-primary disabled:opacity-50'), /* @ts-ignore */
|
|
96
132
|
...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
97
|
-
panelClass = computed(() => xui('border-border bg-surface-overlay
|
|
133
|
+
panelClass = computed(() => xui('border-border bg-surface-overlay flex rounded-lg border p-1 shadow-overlay'), /* @ts-ignore */
|
|
98
134
|
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
99
135
|
optionClass(option, active) {
|
|
100
136
|
return xui('flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm select-none', option.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset', active && 'bg-primary/10 text-primary font-medium');
|
|
101
137
|
}
|
|
102
138
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiCascader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiCascader, isStandalone: true, selector: "xui-cascader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: `
|
|
139
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiCascader, isStandalone: true, selector: "xui-cascader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
104
140
|
<button
|
|
141
|
+
#trigger
|
|
105
142
|
type="button"
|
|
106
143
|
[class]="triggerClass()"
|
|
107
144
|
[disabled]="disabled()"
|
|
@@ -116,7 +153,7 @@ class XuiCascader {
|
|
|
116
153
|
</svg>
|
|
117
154
|
</button>
|
|
118
155
|
|
|
119
|
-
|
|
156
|
+
<ng-template #panel>
|
|
120
157
|
<div [class]="panelClass()">
|
|
121
158
|
@for (column of columns(); track $index; let col = $index) {
|
|
122
159
|
<ul class="border-border max-h-64 min-w-40 overflow-auto border-e last:border-e-0">
|
|
@@ -145,7 +182,7 @@ class XuiCascader {
|
|
|
145
182
|
</ul>
|
|
146
183
|
}
|
|
147
184
|
</div>
|
|
148
|
-
|
|
185
|
+
</ng-template>
|
|
149
186
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
150
187
|
}
|
|
151
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiCascader, decorators: [{
|
|
@@ -154,6 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
154
191
|
selector: 'xui-cascader',
|
|
155
192
|
template: `
|
|
156
193
|
<button
|
|
194
|
+
#trigger
|
|
157
195
|
type="button"
|
|
158
196
|
[class]="triggerClass()"
|
|
159
197
|
[disabled]="disabled()"
|
|
@@ -168,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
168
206
|
</svg>
|
|
169
207
|
</button>
|
|
170
208
|
|
|
171
|
-
|
|
209
|
+
<ng-template #panel>
|
|
172
210
|
<div [class]="panelClass()">
|
|
173
211
|
@for (column of columns(); track $index; let col = $index) {
|
|
174
212
|
<ul class="border-border max-h-64 min-w-40 overflow-auto border-e last:border-e-0">
|
|
@@ -197,7 +235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
197
235
|
</ul>
|
|
198
236
|
}
|
|
199
237
|
</div>
|
|
200
|
-
|
|
238
|
+
</ng-template>
|
|
201
239
|
`,
|
|
202
240
|
host: {
|
|
203
241
|
'[class]': 'computedClass()'
|
|
@@ -205,7 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
205
243
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
206
244
|
encapsulation: ViewEncapsulation.None
|
|
207
245
|
}]
|
|
208
|
-
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
246
|
+
}], 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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
209
247
|
|
|
210
248
|
const XuiCascaderImports = [XuiCascader];
|
|
211
249
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-cascader.mjs","sources":["../../../../../../libs/ui/cascader/xui/src/lib/cascader.ts","../../../../../../libs/ui/cascader/xui/src/index.ts","../../../../../../libs/ui/cascader/xui/src/xui-cascader.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\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 XuiCascaderOption {\n value: string;\n label: string;\n children?: XuiCascaderOption[];\n disabled?: boolean;\n}\n\n/**\n * A cascading, column-based select. Each level opens the next column of children;\n * choosing a leaf commits the full path. `value` is a two-way bindable array of\n * values from root to leaf.\n *\n * ```html\n * <xui-cascader [options]=\"regions\" [(value)]=\"path\" placeholder=\"Select region\" />\n * ```\n */\n@Component({\n selector: 'xui-cascader',\n template: `\n <button\n type=\"button\"\n [class]=\"triggerClass()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open()\"\n >\n <span [class]=\"selectedLabels().length ? 'text-foreground truncate' : 'text-foreground-muted'\">\n {{ selectedLabels().length ? selectedLabels().join(' / ') : placeholder() }}\n </span>\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()\">\n @for (column of columns(); track $index; let col = $index) {\n <ul class=\"border-border max-h-64 min-w-40 overflow-auto border-e last:border-e-0\">\n @for (option of column; track option.value) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [class]=\"optionClass(option, activePath()[col] === option.value)\"\n [attr.aria-selected]=\"activePath()[col] === option.value\"\n (click)=\"select(col, option)\"\n >\n <span class=\"truncate\">{{ option.label }}</span>\n @if (option.children?.length) {\n <svg viewBox=\"0 0 24 24\" class=\"ms-auto h-3.5 w-3.5 shrink-0\" 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 }\n </li>\n }\n </ul>\n }\n </div>\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCascader {\n private readonly el = inject(ElementRef).nativeElement as HTMLElement;\n private readonly document = this.el.ownerDocument;\n\n readonly class = input<ClassValue>('');\n readonly options = input<XuiCascaderOption[]>([]);\n readonly value = model<string[]>([]);\n readonly placeholder = input<string>('Select');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly open = signal(false);\n /** The path currently being navigated (may be deeper than the committed value). */\n protected readonly activePath = signal<string[]>([]);\n\n /** The columns to render: root options, then children of each active selection. */\n protected readonly columns = computed(() => {\n const result: XuiCascaderOption[][] = [];\n let level: XuiCascaderOption[] = this.options();\n result.push(level);\n for (const value of this.activePath()) {\n const option = level.find(o => o.value === value);\n if (option?.children?.length) {\n level = option.children;\n result.push(level);\n } else {\n break;\n }\n }\n return result;\n });\n\n protected readonly selectedLabels = computed(() => {\n const labels: string[] = [];\n let level: XuiCascaderOption[] = this.options();\n for (const value of this.value()) {\n const option = level.find(o => o.value === value);\n if (!option) {\n break;\n }\n labels.push(option.label);\n level = option.children ?? [];\n }\n return labels;\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 toggle(): void {\n if (this.disabled()) {\n return;\n }\n if (!this.open()) {\n // Reopen at the committed path.\n this.activePath.set([...this.value()]);\n }\n this.open.update(open => !open);\n }\n\n protected select(columnIndex: number, option: XuiCascaderOption): void {\n if (option.disabled) {\n return;\n }\n const path = [...this.activePath().slice(0, columnIndex), option.value];\n this.activePath.set(path);\n if (!option.children?.length) {\n this.value.set(path);\n this.open.set(false);\n }\n }\n\n protected readonly computedClass = computed(() => xui('relative inline-block', this.class()));\n protected readonly triggerClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground flex h-(--control-height-md) w-full min-w-48 items-center gap-1 rounded-md border px-(--control-padding-md) 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 absolute z-50 mt-1 flex rounded-lg border p-1 shadow-lg')\n );\n\n protected optionClass(option: XuiCascaderOption, active: boolean): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm select-none',\n option.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n active && 'bg-primary/10 text-primary font-medium'\n );\n }\n}\n","import { XuiCascader } from './lib/cascader';\n\nexport * from './lib/cascader';\n\nexport const XuiCascaderImports = [XuiCascader] 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-cascader.mjs","sources":["../../../../../../libs/ui/cascader/xui/src/lib/cascader.ts","../../../../../../libs/ui/cascader/xui/src/index.ts","../../../../../../libs/ui/cascader/xui/src/xui-cascader.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n input,\n model,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport { injectXOverlay, type XOverlayRef } from '@xui/core/overlay';\nimport type { ClassValue } from 'clsx';\n\nexport interface XuiCascaderOption {\n value: string;\n label: string;\n children?: XuiCascaderOption[];\n disabled?: boolean;\n}\n\n/**\n * A cascading, column-based select. Each level opens the next column of children;\n * choosing a leaf commits the full path. `value` is a two-way bindable array of\n * values from root to leaf.\n *\n * The column panel floats on `@xui/core/overlay`, connected to the trigger, so\n * stacking, Escape and outside-click dismissal behave like every other overlay.\n *\n * ```html\n * <xui-cascader [options]=\"regions\" [(value)]=\"path\" placeholder=\"Select region\" />\n * ```\n */\n@Component({\n selector: 'xui-cascader',\n template: `\n <button\n #trigger\n type=\"button\"\n [class]=\"triggerClass()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open()\"\n >\n <span [class]=\"selectedLabels().length ? 'text-foreground truncate' : 'text-foreground-muted'\">\n {{ selectedLabels().length ? selectedLabels().join(' / ') : placeholder() }}\n </span>\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()\">\n @for (column of columns(); track $index; let col = $index) {\n <ul class=\"border-border max-h-64 min-w-40 overflow-auto border-e last:border-e-0\">\n @for (option of column; track option.value) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [class]=\"optionClass(option, activePath()[col] === option.value)\"\n [attr.aria-selected]=\"activePath()[col] === option.value\"\n (click)=\"select(col, option)\"\n >\n <span class=\"truncate\">{{ option.label }}</span>\n @if (option.children?.length) {\n <svg viewBox=\"0 0 24 24\" class=\"ms-auto h-3.5 w-3.5 shrink-0\" 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 }\n </li>\n }\n </ul>\n }\n </div>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCascader {\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 options = input<XuiCascaderOption[]>([]);\n readonly value = model<string[]>([]);\n readonly placeholder = input<string>('Select');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly open = signal(false);\n /** The path currently being navigated (may be deeper than the committed value). */\n protected readonly activePath = signal<string[]>([]);\n\n /** The columns to render: root options, then children of each active selection. */\n protected readonly columns = computed(() => {\n const result: XuiCascaderOption[][] = [];\n let level: XuiCascaderOption[] = this.options();\n result.push(level);\n for (const value of this.activePath()) {\n const option = level.find(o => o.value === value);\n if (option?.children?.length) {\n level = option.children;\n result.push(level);\n } else {\n break;\n }\n }\n return result;\n });\n\n protected readonly selectedLabels = computed(() => {\n const labels: string[] = [];\n let level: XuiCascaderOption[] = this.options();\n for (const value of this.value()) {\n const option = level.find(o => o.value === value);\n if (!option) {\n break;\n }\n labels.push(option.label);\n level = option.children ?? [];\n }\n return labels;\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\n protected toggle(): void {\n if (this.disabled()) {\n return;\n }\n if (!this.open()) {\n // Reopen at the committed path.\n this.activePath.set([...this.value()]);\n }\n this.open.update(open => !open);\n }\n\n protected select(columnIndex: number, option: XuiCascaderOption): void {\n if (option.disabled) {\n return;\n }\n const path = [...this.activePath().slice(0, columnIndex), option.value];\n this.activePath.set(path);\n if (!option.children?.length) {\n this.value.set(path);\n this.open.set(false);\n }\n }\n\n private attach(): void {\n if (this.ref) {\n return;\n }\n\n // Outside clicks dismiss through the overlay's own click-phase check, so a\n // press that starts a drag outside still does not close the panel. Focus is\n // never moved into the panel, so nothing is trapped or restored.\n const ref = this.overlay.open(this.panel(), {\n origin: this.trigger().nativeElement,\n placement: 'bottom-start',\n offset: 4,\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 readonly computedClass = computed(() => xui('inline-block', this.class()));\n protected readonly triggerClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground flex h-(--control-height-md) w-full min-w-48 items-center gap-1 rounded-md border px-(--control-padding-md) 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 flex rounded-lg border p-1 shadow-overlay')\n );\n\n protected optionClass(option: XuiCascaderOption, active: boolean): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm select-none',\n option.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n active && 'bg-primary/10 text-primary font-medium'\n );\n }\n}\n","import { XuiCascader } from './lib/cascader';\n\nexport * from './lib/cascader';\n\nexport const XuiCascaderImports = [XuiCascader] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AA2BA;;;;;;;;;;;AAWG;MAyDU,WAAW,CAAA;IACL,OAAO,GAAG,cAAc,EAAE;AAC1B,IAAA,OAAO,GAAG,SAAS,CAAC,QAAQ,CAA0B,SAAS;gFAAC;AAChE,IAAA,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAuB,OAAO;8EAAC;IAClE,GAAG,GAAuB,IAAI;IAE7B,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAC7B,OAAO,GAAG,KAAK,CAAsB,EAAE;gFAAC;IACxC,KAAK,GAAG,KAAK,CAAW,EAAE;8EAAC;IAC3B,WAAW,GAAG,KAAK,CAAS,QAAQ;oFAAC;IACrC,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAErE,IAAI,GAAG,MAAM,CAAC,KAAK;6EAAC;;IAEpB,UAAU,GAAG,MAAM,CAAW,EAAE;mFAAC;;AAGjC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QACzC,MAAM,MAAM,GAA0B,EAAE;AACxC,QAAA,IAAI,KAAK,GAAwB,IAAI,CAAC,OAAO,EAAE;AAC/C,QAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QAClB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;AACjD,YAAA,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5B,gBAAA,KAAK,GAAG,MAAM,CAAC,QAAQ;AACvB,gBAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YACpB;iBAAO;gBACL;YACF;QACF;AACA,QAAA,OAAO,MAAM;IACf,CAAC;gFAAC;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;QAChD,MAAM,MAAM,GAAa,EAAE;AAC3B,QAAA,IAAI,KAAK,GAAwB,IAAI,CAAC,OAAO,EAAE;QAC/C,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;AAChC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;YACjD,IAAI,CAAC,MAAM,EAAE;gBACX;YACF;AACA,YAAA,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;AACzB,YAAA,KAAK,GAAG,MAAM,CAAC,QAAQ,IAAI,EAAE;QAC/B;AACA,QAAA,OAAO,MAAM;IACf,CAAC;uFAAC;AAEF,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;YAExB,SAAS,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AACzD,QAAA,CAAC,CAAC;IACJ;IAEU,MAAM,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;;AAEhB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACxC;AACA,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;IACjC;IAEU,MAAM,CAAC,WAAmB,EAAE,MAAyB,EAAA;AAC7D,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB;QACF;QACA,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC;AACvE,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;QACtB;IACF;IAEQ,MAAM,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ;QACF;;;;AAKA,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AAC1C,YAAA,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,aAAa;AACpC,YAAA,SAAS,EAAE,cAAc;AACzB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG;;;;AAKd,QAAA,KAAK,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAK;AACxB,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,GAAG,EAAE;AACpB,gBAAA,IAAI,CAAC,GAAG,GAAG,IAAI;AACf,gBAAA,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACvC;AACF,QAAA,CAAC,CAAC;IACJ;IAEQ,MAAM,GAAA;;AAEZ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG;AACpB,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI;QACf,GAAG,EAAE,KAAK,EAAE;IACd;AAEmB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFAAC;IACjE,YAAY,GAAG,QAAQ,CAAC,MACzC,GAAG,CACD,4NAA4N,CAC7N;qFACF;IACkB,UAAU,GAAG,QAAQ,CAAC,MACvC,GAAG,CAAC,4EAA4E,CAAC;mFAClF;IAES,WAAW,CAAC,MAAyB,EAAE,MAAe,EAAA;QAC9D,OAAO,GAAG,CACR,gFAAgF,EAChF,MAAM,CAAC,QAAQ,GAAG,2CAA2C,GAAG,wBAAwB,EACxF,MAAM,IAAI,wCAAwC,CACnD;IACH;0HAlIW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAtDZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAOU,WAAW,EAAA,UAAA,EAAA,CAAA;kBAxDvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE;AACZ,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;AAGwE,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,SAAS,+DACd,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AC9FpE,MAAM,kBAAkB,GAAG,CAAC,WAAW;;ACJ9C;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/cascader",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.13",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@xui/core": "2.0.0-alpha.
|
|
41
|
+
"@xui/core": "2.0.0-alpha.13",
|
|
42
42
|
"clsx": "^2.1.1"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
package/types/xui-cascader.d.ts
CHANGED
|
@@ -13,13 +13,18 @@ interface XuiCascaderOption {
|
|
|
13
13
|
* choosing a leaf commits the full path. `value` is a two-way bindable array of
|
|
14
14
|
* values from root to leaf.
|
|
15
15
|
*
|
|
16
|
+
* The column panel floats on `@xui/core/overlay`, connected to the trigger, so
|
|
17
|
+
* stacking, Escape and outside-click dismissal behave like every other overlay.
|
|
18
|
+
*
|
|
16
19
|
* ```html
|
|
17
20
|
* <xui-cascader [options]="regions" [(value)]="path" placeholder="Select region" />
|
|
18
21
|
* ```
|
|
19
22
|
*/
|
|
20
23
|
declare class XuiCascader {
|
|
21
|
-
private readonly
|
|
22
|
-
private readonly
|
|
24
|
+
private readonly overlay;
|
|
25
|
+
private readonly trigger;
|
|
26
|
+
private readonly panel;
|
|
27
|
+
private ref;
|
|
23
28
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
24
29
|
readonly options: _angular_core.InputSignal<XuiCascaderOption[]>;
|
|
25
30
|
readonly value: _angular_core.ModelSignal<string[]>;
|
|
@@ -34,6 +39,8 @@ declare class XuiCascader {
|
|
|
34
39
|
constructor();
|
|
35
40
|
protected toggle(): void;
|
|
36
41
|
protected select(columnIndex: number, option: XuiCascaderOption): void;
|
|
42
|
+
private attach;
|
|
43
|
+
private detach;
|
|
37
44
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
38
45
|
protected readonly triggerClass: _angular_core.Signal<string>;
|
|
39
46
|
protected readonly panelClass: _angular_core.Signal<string>;
|