@xui/dock-manager 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-dock-manager.mjs +24 -29
- package/fesm2022/xui-dock-manager.mjs.map +1 -1
- package/package.json +3 -3
- package/types/xui-dock-manager.d.ts +3 -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).
|
|
@@ -5,6 +5,7 @@ import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
|
5
5
|
import { matOpenInNewRound, matCloseFullscreenRound, matOpenInFullRound, matPushPinRound, matDockRound, matCloseRound } from '@ng-icons/material-icons/round';
|
|
6
6
|
import { xui } from '@xui/core';
|
|
7
7
|
import { injectXDirection, arrowDirectionOnAxis } from '@xui/core/a11y';
|
|
8
|
+
import { injectXPointerDrag } from '@xui/core/interactions';
|
|
8
9
|
import { XuiIcon } from '@xui/icon';
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -31,11 +32,11 @@ class XuiDockContent {
|
|
|
31
32
|
contentId = input.required({ ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'xuiDockContent' });
|
|
32
33
|
template = inject(TemplateRef);
|
|
33
34
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
34
|
-
/** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContent, isStandalone: true, selector: "ng-template[xuiDockContent]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
35
|
+
/** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContent, isStandalone: true, selector: "ng-template[xuiDockContent]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContent", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["xuiDockContent"], ngImport: i0 });
|
|
35
36
|
}
|
|
36
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContent, decorators: [{
|
|
37
38
|
type: Directive,
|
|
38
|
-
args: [{ selector: 'ng-template[xuiDockContent]' }]
|
|
39
|
+
args: [{ selector: 'ng-template[xuiDockContent]', exportAs: 'xuiDockContent' }]
|
|
39
40
|
}], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xuiDockContent", required: true }] }] } });
|
|
40
41
|
const XUI_DOCK_CONTENT_MOUNTER = new InjectionToken('XuiDockContentMounter');
|
|
41
42
|
/**
|
|
@@ -59,11 +60,11 @@ class XuiDockContentOutlet {
|
|
|
59
60
|
});
|
|
60
61
|
}
|
|
61
62
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContentOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
62
|
-
/** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContentOutlet, isStandalone: true, selector: "[xuiDockContentOutlet]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContentOutlet", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
63
|
+
/** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContentOutlet, isStandalone: true, selector: "[xuiDockContentOutlet]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContentOutlet", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["xuiDockContentOutlet"], ngImport: i0 });
|
|
63
64
|
}
|
|
64
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContentOutlet, decorators: [{
|
|
65
66
|
type: Directive,
|
|
66
|
-
args: [{ selector: '[xuiDockContentOutlet]' }]
|
|
67
|
+
args: [{ selector: '[xuiDockContentOutlet]', exportAs: 'xuiDockContentOutlet' }]
|
|
67
68
|
}], ctorParameters: () => [], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xuiDockContentOutlet", required: true }] }] } });
|
|
68
69
|
|
|
69
70
|
/**
|
|
@@ -1035,7 +1036,7 @@ class XuiDockManager {
|
|
|
1035
1036
|
const delta = this.clampSplitterDelta((position - start) * sign, beforePx, afterPx);
|
|
1036
1037
|
this.resizeSiblings(before, after, beforePx + delta, beforePx + afterPx);
|
|
1037
1038
|
};
|
|
1038
|
-
this.trackPointer(onMove);
|
|
1039
|
+
this.trackPointer(event, onMove);
|
|
1039
1040
|
}
|
|
1040
1041
|
onSplitterKeydown(parent, gutter, event) {
|
|
1041
1042
|
const vertical = parent.orientation === 'vertical';
|
|
@@ -1104,7 +1105,7 @@ class XuiDockManager {
|
|
|
1104
1105
|
window.floatingHeight = nextHeight;
|
|
1105
1106
|
this.commit({ normalize: false });
|
|
1106
1107
|
};
|
|
1107
|
-
this.trackPointer(onMove);
|
|
1108
|
+
this.trackPointer(event, onMove);
|
|
1108
1109
|
}
|
|
1109
1110
|
// ─── dragging panes and docking ───────────────────────────────────────────
|
|
1110
1111
|
/**
|
|
@@ -1154,7 +1155,7 @@ class XuiDockManager {
|
|
|
1154
1155
|
}
|
|
1155
1156
|
this.paneDragEnd.emit(pane);
|
|
1156
1157
|
};
|
|
1157
|
-
this.trackPointer(onMove, onUp);
|
|
1158
|
+
this.trackPointer(event, onMove, onUp);
|
|
1158
1159
|
}
|
|
1159
1160
|
cancelDrag() {
|
|
1160
1161
|
const state = this.drag();
|
|
@@ -1396,23 +1397,11 @@ class XuiDockManager {
|
|
|
1396
1397
|
return found;
|
|
1397
1398
|
}
|
|
1398
1399
|
// ─── pointer plumbing ─────────────────────────────────────────────────────
|
|
1400
|
+
pointerDrag = injectXPointerDrag();
|
|
1399
1401
|
release = null;
|
|
1400
1402
|
/** Follow the pointer until it is released, then clean up after ourselves. */
|
|
1401
|
-
trackPointer(onMove, onUp) {
|
|
1402
|
-
this.
|
|
1403
|
-
const move = (event) => onMove(event);
|
|
1404
|
-
const up = (event) => {
|
|
1405
|
-
this.stopPointerTracking();
|
|
1406
|
-
onUp?.(event);
|
|
1407
|
-
};
|
|
1408
|
-
this.document.addEventListener('pointermove', move);
|
|
1409
|
-
this.document.addEventListener('pointerup', up);
|
|
1410
|
-
this.document.addEventListener('pointercancel', up);
|
|
1411
|
-
this.release = () => {
|
|
1412
|
-
this.document.removeEventListener('pointermove', move);
|
|
1413
|
-
this.document.removeEventListener('pointerup', up);
|
|
1414
|
-
this.document.removeEventListener('pointercancel', up);
|
|
1415
|
-
};
|
|
1403
|
+
trackPointer(event, onMove, onUp) {
|
|
1404
|
+
this.release = this.pointerDrag(event, { onMove, onEnd: onUp });
|
|
1416
1405
|
}
|
|
1417
1406
|
stopPointerTracking() {
|
|
1418
1407
|
this.release?.();
|
|
@@ -1543,7 +1532,9 @@ class XuiDockManager {
|
|
|
1543
1532
|
return xui('text-foreground-muted hover:bg-hover-overlay hover:text-foreground grid size-6 shrink-0 place-items-center', 'rounded focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus');
|
|
1544
1533
|
}
|
|
1545
1534
|
gutterClass(pane) {
|
|
1546
|
-
return xui(
|
|
1535
|
+
return xui(
|
|
1536
|
+
// eslint-disable-next-line local/no-hand-z-index -- the resize gutter rides above pane content on the dock’s internal z scale
|
|
1537
|
+
'group relative z-10 flex shrink-0 touch-none items-center justify-center', 'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus', isSplitPane(pane) && pane.orientation === 'vertical'
|
|
1547
1538
|
? 'h-1.5 w-full cursor-row-resize'
|
|
1548
1539
|
: 'w-1.5 cursor-col-resize');
|
|
1549
1540
|
}
|
|
@@ -1559,7 +1550,8 @@ class XuiDockManager {
|
|
|
1559
1550
|
return xui('text-foreground-muted hover:bg-hover-overlay hover:text-foreground max-h-40 max-w-40 truncate rounded px-1.5 py-1', 'text-xs focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus', vertical && '[writing-mode:vertical-rl]', pane === this.flyout() && 'bg-primary-muted text-foreground');
|
|
1560
1551
|
}
|
|
1561
1552
|
flyoutClass() {
|
|
1562
|
-
|
|
1553
|
+
// eslint-disable-next-line local/no-hand-z-index -- flyouts stack on the dock manager’s internal z scale
|
|
1554
|
+
return xui('bg-surface border-border shadow-overlay absolute z-20 flex overflow-hidden border');
|
|
1563
1555
|
}
|
|
1564
1556
|
flyoutStyle(pane) {
|
|
1565
1557
|
const location = pane.unpinnedLocation ?? defaultUnpinnedLocation(this.layout(), pane);
|
|
@@ -1577,7 +1569,8 @@ class XuiDockManager {
|
|
|
1577
1569
|
}
|
|
1578
1570
|
}
|
|
1579
1571
|
floatingClass() {
|
|
1580
|
-
|
|
1572
|
+
// eslint-disable-next-line local/no-hand-z-index -- floating panes stack on the dock manager’s internal z scale
|
|
1573
|
+
return xui('bg-surface border-border shadow-overlay absolute z-40 flex flex-col overflow-hidden rounded-lg border');
|
|
1581
1574
|
}
|
|
1582
1575
|
floatingStyle(window) {
|
|
1583
1576
|
const location = window.floatingLocation ?? FLOATING_ORIGIN;
|
|
@@ -1592,7 +1585,8 @@ class XuiDockManager {
|
|
|
1592
1585
|
return xui(
|
|
1593
1586
|
// Never interactive: the pointer is already captured by the drag, and the
|
|
1594
1587
|
// indicators are hit-tested by rectangle rather than by event target.
|
|
1595
|
-
|
|
1588
|
+
// eslint-disable-next-line local/no-hand-z-index -- drop indicators top the dock’s internal z scale during a drag
|
|
1589
|
+
'bg-surface-overlay shadow-elevation-2 pointer-events-none absolute z-55 rounded border', indicator.active ? 'border-primary' : 'border-border-strong');
|
|
1596
1590
|
}
|
|
1597
1591
|
/**
|
|
1598
1592
|
* The shaded block inside an indicator, showing which part of the target the
|
|
@@ -1915,7 +1909,7 @@ class XuiDockManager {
|
|
|
1915
1909
|
|
|
1916
1910
|
@if (dragGhost(); as ghost) {
|
|
1917
1911
|
<div
|
|
1918
|
-
class="bg-surface-overlay border-border text-foreground pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs
|
|
1912
|
+
class="bg-surface-overlay border-border text-foreground shadow-overlay pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs"
|
|
1919
1913
|
[style.left.px]="ghost.x + 12"
|
|
1920
1914
|
[style.top.px]="ghost.y + 12"
|
|
1921
1915
|
>
|
|
@@ -1938,7 +1932,7 @@ class XuiDockManager {
|
|
|
1938
1932
|
}
|
|
1939
1933
|
</div>
|
|
1940
1934
|
</ng-template>
|
|
1941
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "
|
|
1935
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }, { kind: "directive", type: XuiDockContentOutlet, selector: "[xuiDockContentOutlet]", inputs: ["xuiDockContentOutlet"], exportAs: ["xuiDockContentOutlet"] }], viewProviders: [
|
|
1942
1936
|
provideIcons({
|
|
1943
1937
|
matCloseRound,
|
|
1944
1938
|
matDockRound,
|
|
@@ -1965,6 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1965
1959
|
})
|
|
1966
1960
|
],
|
|
1967
1961
|
providers: [{ provide: XUI_DOCK_CONTENT_MOUNTER, useExisting: forwardRef((() => XuiDockManager)) }],
|
|
1962
|
+
// eslint-disable-next-line local/no-hand-z-index -- maximized pane, drop rect and drag ghost layer on the dock’s internal z scale, not the overlay container
|
|
1968
1963
|
template: `
|
|
1969
1964
|
<!-- ─── one content pane: header chrome plus the body outlet ─────────── -->
|
|
1970
1965
|
<ng-template #contentTpl let-pane let-hideHeader="hideHeader">
|
|
@@ -2268,7 +2263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2268
2263
|
|
|
2269
2264
|
@if (dragGhost(); as ghost) {
|
|
2270
2265
|
<div
|
|
2271
|
-
class="bg-surface-overlay border-border text-foreground pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs
|
|
2266
|
+
class="bg-surface-overlay border-border text-foreground shadow-overlay pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs"
|
|
2272
2267
|
[style.left.px]="ghost.x + 12"
|
|
2273
2268
|
[style.top.px]="ghost.y + 12"
|
|
2274
2269
|
>
|