@xui/steps 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-steps.mjs +27 -36
- package/fesm2022/xui-steps.mjs.map +1 -1
- package/package.json +5 -2
- package/types/xui-steps.d.ts +18 -10
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
package/fesm2022/xui-steps.mjs
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, model, booleanAttribute, contentChildren, computed } from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
4
|
+
import { matCloseRound, matCheckRound } from '@ng-icons/material-icons/round';
|
|
5
|
+
import { createXConfigToken, xui } from '@xui/core';
|
|
6
|
+
import { XuiIcon } from '@xui/icon';
|
|
4
7
|
|
|
5
8
|
/**
|
|
6
9
|
* One step inside {@link XuiSteps}. `title`/`description` describe it; `status`
|
|
@@ -27,6 +30,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
27
30
|
}]
|
|
28
31
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
|
|
29
32
|
|
|
33
|
+
const [injectXuiStepsConfig, provideXuiStepsConfig] = createXConfigToken('XuiStepsConfig', {
|
|
34
|
+
orientation: 'horizontal',
|
|
35
|
+
clickable: false
|
|
36
|
+
});
|
|
37
|
+
|
|
30
38
|
/**
|
|
31
39
|
* A step / wizard progress indicator. Wrap `<xui-step>` entries and bind
|
|
32
40
|
* `current` (two-way) to the active index; each step's status is derived
|
|
@@ -42,13 +50,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
42
50
|
* ```
|
|
43
51
|
*/
|
|
44
52
|
class XuiSteps {
|
|
53
|
+
config = injectXuiStepsConfig();
|
|
45
54
|
class = input('', /* @ts-ignore */
|
|
46
55
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
47
56
|
current = model(0, /* @ts-ignore */
|
|
48
57
|
...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
|
|
49
|
-
|
|
50
|
-
...(ngDevMode ? [{ debugName: "
|
|
51
|
-
clickable = input(
|
|
58
|
+
orientation = input(this.config.orientation, /* @ts-ignore */
|
|
59
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
60
|
+
clickable = input(this.config.clickable, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
52
61
|
steps = contentChildren(XuiStep, /* @ts-ignore */
|
|
53
62
|
...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
54
63
|
statusAt(index) {
|
|
@@ -65,16 +74,16 @@ class XuiSteps {
|
|
|
65
74
|
}
|
|
66
75
|
}
|
|
67
76
|
get vertical() {
|
|
68
|
-
return this.
|
|
77
|
+
return this.orientation() === 'vertical';
|
|
69
78
|
}
|
|
70
|
-
computedClass = computed(() => xui('flex', this.
|
|
79
|
+
computedClass = computed(() => xui('flex', this.orientation() === 'vertical' ? 'flex-col gap-1' : 'flex-row items-start', this.class()), /* @ts-ignore */
|
|
71
80
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
72
81
|
itemClass = computed(() => xui('flex', this.vertical ? 'flex-col' : 'flex-1 items-center gap-3 last:flex-none'), /* @ts-ignore */
|
|
73
82
|
...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
|
|
74
|
-
headerClass = computed(() => xui('flex items-center gap-3 rounded',
|
|
83
|
+
headerClass = computed(() => xui('flex items-center gap-3 rounded', this.clickable() ? 'cursor-pointer' : 'cursor-default'), /* @ts-ignore */
|
|
75
84
|
...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
|
|
76
85
|
circleClass(status) {
|
|
77
|
-
return xui('flex
|
|
86
|
+
return xui('flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors', status === 'process'
|
|
78
87
|
? 'bg-primary text-primary-foreground border-primary'
|
|
79
88
|
: status === 'finish'
|
|
80
89
|
? 'border-primary text-primary'
|
|
@@ -92,25 +101,15 @@ class XuiSteps {
|
|
|
92
101
|
: xui('h-px flex-1', done ? 'bg-primary' : 'bg-border');
|
|
93
102
|
}
|
|
94
103
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSteps, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiSteps, isStandalone: true, selector: "xui-steps", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null },
|
|
104
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiSteps, isStandalone: true, selector: "xui-steps", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, host: { properties: { "class": "computedClass()" } }, queries: [{ propertyName: "steps", predicate: XuiStep, isSignal: true }], ngImport: i0, template: `
|
|
96
105
|
@for (step of steps(); track $index; let i = $index, last = $last) {
|
|
97
106
|
<div [class]="itemClass()">
|
|
98
107
|
<button type="button" [class]="headerClass()" [disabled]="!clickable()" (click)="select(i)">
|
|
99
108
|
<span [class]="circleClass(statusAt(i))">
|
|
100
109
|
@if (statusAt(i) === 'finish') {
|
|
101
|
-
<
|
|
102
|
-
<path
|
|
103
|
-
d="M20 6 9 17l-5-5"
|
|
104
|
-
stroke="currentColor"
|
|
105
|
-
stroke-width="2.5"
|
|
106
|
-
stroke-linecap="round"
|
|
107
|
-
stroke-linejoin="round"
|
|
108
|
-
/>
|
|
109
|
-
</svg>
|
|
110
|
+
<ng-icon xui size="sm" name="matCheckRound" />
|
|
110
111
|
} @else if (statusAt(i) === 'error') {
|
|
111
|
-
<
|
|
112
|
-
<path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
|
|
113
|
-
</svg>
|
|
112
|
+
<ng-icon xui size="sm" name="matCloseRound" />
|
|
114
113
|
} @else {
|
|
115
114
|
{{ i + 1 }}
|
|
116
115
|
}
|
|
@@ -127,7 +126,7 @@ class XuiSteps {
|
|
|
127
126
|
}
|
|
128
127
|
</div>
|
|
129
128
|
}
|
|
130
|
-
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
129
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }], viewProviders: [provideIcons({ matCheckRound, matCloseRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
131
130
|
}
|
|
132
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSteps, decorators: [{
|
|
133
132
|
type: Component,
|
|
@@ -139,19 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
139
138
|
<button type="button" [class]="headerClass()" [disabled]="!clickable()" (click)="select(i)">
|
|
140
139
|
<span [class]="circleClass(statusAt(i))">
|
|
141
140
|
@if (statusAt(i) === 'finish') {
|
|
142
|
-
<
|
|
143
|
-
<path
|
|
144
|
-
d="M20 6 9 17l-5-5"
|
|
145
|
-
stroke="currentColor"
|
|
146
|
-
stroke-width="2.5"
|
|
147
|
-
stroke-linecap="round"
|
|
148
|
-
stroke-linejoin="round"
|
|
149
|
-
/>
|
|
150
|
-
</svg>
|
|
141
|
+
<ng-icon xui size="sm" name="matCheckRound" />
|
|
151
142
|
} @else if (statusAt(i) === 'error') {
|
|
152
|
-
<
|
|
153
|
-
<path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
|
|
154
|
-
</svg>
|
|
143
|
+
<ng-icon xui size="sm" name="matCloseRound" />
|
|
155
144
|
} @else {
|
|
156
145
|
{{ i + 1 }}
|
|
157
146
|
}
|
|
@@ -172,10 +161,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
172
161
|
host: {
|
|
173
162
|
'[class]': 'computedClass()'
|
|
174
163
|
},
|
|
164
|
+
imports: [NgIcon, XuiIcon],
|
|
165
|
+
viewProviders: [provideIcons({ matCheckRound, matCloseRound })],
|
|
175
166
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
176
167
|
encapsulation: ViewEncapsulation.None
|
|
177
168
|
}]
|
|
178
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }],
|
|
169
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XuiStep), { isSignal: true }] }] } });
|
|
179
170
|
|
|
180
171
|
const XuiStepsImports = [XuiSteps, XuiStep];
|
|
181
172
|
|
|
@@ -183,5 +174,5 @@ const XuiStepsImports = [XuiSteps, XuiStep];
|
|
|
183
174
|
* Generated bundle index. Do not edit.
|
|
184
175
|
*/
|
|
185
176
|
|
|
186
|
-
export { XuiStep, XuiSteps, XuiStepsImports };
|
|
177
|
+
export { XuiStep, XuiSteps, XuiStepsImports, injectXuiStepsConfig, provideXuiStepsConfig };
|
|
187
178
|
//# sourceMappingURL=xui-steps.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-steps.mjs","sources":["../../../../../../libs/ui/steps/xui/src/lib/step.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.ts","../../../../../../libs/ui/steps/xui/src/index.ts","../../../../../../libs/ui/steps/xui/src/xui-steps.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error';\n\n/**\n * One step inside {@link XuiSteps}. `title`/`description` describe it; `status`\n * overrides the status the parent would otherwise derive from `current`.\n */\n@Component({\n selector: 'xui-step',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiStep {\n readonly title = input<string>('');\n readonly description = input<string>('');\n /** Force a status instead of deriving it from the active step. */\n readonly status = input<StepStatus>();\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n input,\n model,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\nimport { XuiStep, type StepStatus } from './step';\n\n/**\n * A step / wizard progress indicator. Wrap `<xui-step>` entries and bind\n * `current` (two-way) to the active index; each step's status is derived\n * (`finish` before, `process` at, `wait` after) unless the step overrides it.\n * With `clickable`, clicking a step moves `current`.\n *\n * ```html\n * <xui-steps [(current)]=\"step\">\n * <xui-step title=\"Cart\" />\n * <xui-step title=\"Pay\" description=\"Card or PayPal\" />\n * <xui-step title=\"Done\" />\n * </xui-steps>\n * ```\n */\n@Component({\n selector: 'xui-steps',\n template: `\n @for (step of steps(); track $index; let i = $index, last = $last) {\n <div [class]=\"itemClass()\">\n <button type=\"button\" [class]=\"headerClass()\" [disabled]=\"!clickable()\" (click)=\"select(i)\">\n <span [class]=\"circleClass(statusAt(i))\">\n @if (statusAt(i) === 'finish') {\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n } @else if (statusAt(i) === 'error') {\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path d=\"M18 6 6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"flex flex-col text-start\">\n <span [class]=\"titleClass(statusAt(i))\">{{ step.title() }}</span>\n @if (step.description()) {\n <span class=\"text-foreground-muted text-xs\">{{ step.description() }}</span>\n }\n </span>\n </button>\n @if (!last) {\n <span [class]=\"connectorClass(statusAt(i))\"></span>\n }\n </div>\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiSteps {\n readonly class = input<ClassValue>('');\n\n readonly current = model<number>(0);\n readonly direction = input<'horizontal' | 'vertical'>('horizontal');\n readonly clickable = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly steps = contentChildren(XuiStep);\n\n protected statusAt(index: number): StepStatus {\n const override = this.steps()[index]?.status();\n if (override) {\n return override;\n }\n const current = this.current();\n return index < current ? 'finish' : index === current ? 'process' : 'wait';\n }\n\n protected select(index: number): void {\n if (this.clickable()) {\n this.current.set(index);\n }\n }\n\n private get vertical(): boolean {\n return this.direction() === 'vertical';\n }\n\n protected readonly computedClass = computed(() =>\n xui('flex', this.direction() === 'vertical' ? 'flex-col gap-1' : 'flex-row items-start', this.class())\n );\n protected readonly itemClass = computed(() =>\n xui('flex', this.vertical ? 'flex-col' : 'flex-1 items-center gap-3 last:flex-none')\n );\n protected readonly headerClass = computed(() =>\n xui(\n 'flex items-center gap-3 rounded',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',\n this.clickable() ? 'cursor-pointer' : 'cursor-default'\n )\n );\n\n protected circleClass(status: StepStatus): string {\n return xui(\n 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',\n status === 'process'\n ? 'bg-primary text-primary-foreground border-primary'\n : status === 'finish'\n ? 'border-primary text-primary'\n : status === 'error'\n ? 'border-error text-error'\n : 'border-border text-foreground-muted'\n );\n }\n\n protected titleClass(status: StepStatus): string {\n return xui(\n 'text-sm font-medium',\n status === 'wait' ? 'text-foreground-muted' : status === 'error' ? 'text-error' : 'text-foreground'\n );\n }\n\n protected connectorClass(status: StepStatus): string {\n const done = status === 'finish';\n return this.vertical\n ? xui('ms-4 min-h-4 w-px flex-1 self-stretch', done ? 'bg-primary' : 'bg-border')\n : xui('h-px flex-1', done ? 'bg-primary' : 'bg-border');\n }\n}\n","import { XuiStep } from './lib/step';\nimport { XuiSteps } from './lib/steps';\n\nexport * from './lib/step';\nexport * from './lib/steps';\n\nexport const XuiStepsImports = [XuiSteps, XuiStep] 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-steps.mjs","sources":["../../../../../../libs/ui/steps/xui/src/lib/step.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.token.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.ts","../../../../../../libs/ui/steps/xui/src/index.ts","../../../../../../libs/ui/steps/xui/src/xui-steps.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type XuiStepStatus = 'wait' | 'process' | 'finish' | 'error';\n\n/**\n * One step inside {@link XuiSteps}. `title`/`description` describe it; `status`\n * overrides the status the parent would otherwise derive from `current`.\n */\n@Component({\n selector: 'xui-step',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiStep {\n readonly title = input<string>('');\n readonly description = input<string>('');\n /** Force a status instead of deriving it from the active step. */\n readonly status = input<XuiStepStatus>();\n}\n","import { createXConfigToken } from '@xui/core';\n\nexport interface XuiStepsConfig {\n orientation: 'horizontal' | 'vertical';\n clickable: boolean;\n}\n\nexport const [injectXuiStepsConfig, provideXuiStepsConfig] = createXConfigToken<XuiStepsConfig>('XuiStepsConfig', {\n orientation: 'horizontal',\n clickable: false\n});\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n input,\n model,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound, matCloseRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { XuiStep, type XuiStepStatus } from './step';\nimport { injectXuiStepsConfig } from './steps.token';\n\n/**\n * A step / wizard progress indicator. Wrap `<xui-step>` entries and bind\n * `current` (two-way) to the active index; each step's status is derived\n * (`finish` before, `process` at, `wait` after) unless the step overrides it.\n * With `clickable`, clicking a step moves `current`.\n *\n * ```html\n * <xui-steps [(current)]=\"step\">\n * <xui-step title=\"Cart\" />\n * <xui-step title=\"Pay\" description=\"Card or PayPal\" />\n * <xui-step title=\"Done\" />\n * </xui-steps>\n * ```\n */\n@Component({\n selector: 'xui-steps',\n template: `\n @for (step of steps(); track $index; let i = $index, last = $last) {\n <div [class]=\"itemClass()\">\n <button type=\"button\" [class]=\"headerClass()\" [disabled]=\"!clickable()\" (click)=\"select(i)\">\n <span [class]=\"circleClass(statusAt(i))\">\n @if (statusAt(i) === 'finish') {\n <ng-icon xui size=\"sm\" name=\"matCheckRound\" />\n } @else if (statusAt(i) === 'error') {\n <ng-icon xui size=\"sm\" name=\"matCloseRound\" />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"flex flex-col text-start\">\n <span [class]=\"titleClass(statusAt(i))\">{{ step.title() }}</span>\n @if (step.description()) {\n <span class=\"text-foreground-muted text-xs\">{{ step.description() }}</span>\n }\n </span>\n </button>\n @if (!last) {\n <span [class]=\"connectorClass(statusAt(i))\"></span>\n }\n </div>\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n imports: [NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matCheckRound, matCloseRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiSteps {\n private readonly config = injectXuiStepsConfig();\n\n readonly class = input<ClassValue>('');\n\n readonly current = model<number>(0);\n readonly orientation = input<'horizontal' | 'vertical'>(this.config.orientation);\n readonly clickable = input<boolean, BooleanInput>(this.config.clickable, { transform: booleanAttribute });\n\n protected readonly steps = contentChildren(XuiStep);\n\n protected statusAt(index: number): XuiStepStatus {\n const override = this.steps()[index]?.status();\n if (override) {\n return override;\n }\n const current = this.current();\n return index < current ? 'finish' : index === current ? 'process' : 'wait';\n }\n\n protected select(index: number): void {\n if (this.clickable()) {\n this.current.set(index);\n }\n }\n\n private get vertical(): boolean {\n return this.orientation() === 'vertical';\n }\n\n protected readonly computedClass = computed(() =>\n xui('flex', this.orientation() === 'vertical' ? 'flex-col gap-1' : 'flex-row items-start', this.class())\n );\n protected readonly itemClass = computed(() =>\n xui('flex', this.vertical ? 'flex-col' : 'flex-1 items-center gap-3 last:flex-none')\n );\n protected readonly headerClass = computed(() =>\n xui('flex items-center gap-3 rounded', this.clickable() ? 'cursor-pointer' : 'cursor-default')\n );\n\n protected circleClass(status: XuiStepStatus): string {\n return xui(\n 'flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',\n status === 'process'\n ? 'bg-primary text-primary-foreground border-primary'\n : status === 'finish'\n ? 'border-primary text-primary'\n : status === 'error'\n ? 'border-error text-error'\n : 'border-border text-foreground-muted'\n );\n }\n\n protected titleClass(status: XuiStepStatus): string {\n return xui(\n 'text-sm font-medium',\n status === 'wait' ? 'text-foreground-muted' : status === 'error' ? 'text-error' : 'text-foreground'\n );\n }\n\n protected connectorClass(status: XuiStepStatus): string {\n const done = status === 'finish';\n return this.vertical\n ? xui('ms-4 min-h-4 w-px flex-1 self-stretch', done ? 'bg-primary' : 'bg-border')\n : xui('h-px flex-1', done ? 'bg-primary' : 'bg-border');\n }\n}\n","import { XuiStep } from './lib/step';\nimport { XuiSteps } from './lib/steps';\n\nexport * from './lib/step';\nexport * from './lib/steps';\nexport * from './lib/steps.token';\n\nexport const XuiStepsImports = [XuiSteps, XuiStep] 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/steps",
|
|
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",
|
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@
|
|
41
|
+
"@ng-icons/core": "34",
|
|
42
|
+
"@ng-icons/material-icons": "34",
|
|
43
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
44
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
42
45
|
"clsx": "^2.1.1"
|
|
43
46
|
},
|
|
44
47
|
"publishConfig": {
|
package/types/xui-steps.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
type XuiStepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
6
6
|
/**
|
|
7
7
|
* One step inside {@link XuiSteps}. `title`/`description` describe it; `status`
|
|
8
8
|
* overrides the status the parent would otherwise derive from `current`.
|
|
@@ -11,7 +11,7 @@ declare class XuiStep {
|
|
|
11
11
|
readonly title: _angular_core.InputSignal<string>;
|
|
12
12
|
readonly description: _angular_core.InputSignal<string>;
|
|
13
13
|
/** Force a status instead of deriving it from the active step. */
|
|
14
|
-
readonly status: _angular_core.InputSignal<
|
|
14
|
+
readonly status: _angular_core.InputSignal<XuiStepStatus | undefined>;
|
|
15
15
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiStep, never>;
|
|
16
16
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiStep, "xui-step", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
17
17
|
}
|
|
@@ -31,25 +31,33 @@ declare class XuiStep {
|
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
33
|
declare class XuiSteps {
|
|
34
|
+
private readonly config;
|
|
34
35
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
35
36
|
readonly current: _angular_core.ModelSignal<number>;
|
|
36
|
-
readonly
|
|
37
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
37
38
|
readonly clickable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
38
39
|
protected readonly steps: _angular_core.Signal<readonly XuiStep[]>;
|
|
39
|
-
protected statusAt(index: number):
|
|
40
|
+
protected statusAt(index: number): XuiStepStatus;
|
|
40
41
|
protected select(index: number): void;
|
|
41
42
|
private get vertical();
|
|
42
43
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
43
44
|
protected readonly itemClass: _angular_core.Signal<string>;
|
|
44
45
|
protected readonly headerClass: _angular_core.Signal<string>;
|
|
45
|
-
protected circleClass(status:
|
|
46
|
-
protected titleClass(status:
|
|
47
|
-
protected connectorClass(status:
|
|
46
|
+
protected circleClass(status: XuiStepStatus): string;
|
|
47
|
+
protected titleClass(status: XuiStepStatus): string;
|
|
48
|
+
protected connectorClass(status: XuiStepStatus): string;
|
|
48
49
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiSteps, never>;
|
|
49
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiSteps, "xui-steps", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "
|
|
50
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiSteps, "xui-steps", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; }, ["steps"], never, true, never>;
|
|
50
51
|
}
|
|
51
52
|
|
|
53
|
+
interface XuiStepsConfig {
|
|
54
|
+
orientation: 'horizontal' | 'vertical';
|
|
55
|
+
clickable: boolean;
|
|
56
|
+
}
|
|
57
|
+
declare const injectXuiStepsConfig: () => XuiStepsConfig;
|
|
58
|
+
declare const provideXuiStepsConfig: (config: Partial<XuiStepsConfig>) => _angular_core.ValueProvider;
|
|
59
|
+
|
|
52
60
|
declare const XuiStepsImports: readonly [typeof XuiSteps, typeof XuiStep];
|
|
53
61
|
|
|
54
|
-
export { XuiStep, XuiSteps, XuiStepsImports };
|
|
55
|
-
export type {
|
|
62
|
+
export { XuiStep, XuiSteps, XuiStepsImports, injectXuiStepsConfig, provideXuiStepsConfig };
|
|
63
|
+
export type { XuiStepStatus, XuiStepsConfig };
|