@joel_jsp/vortex-ui 0.1.0 → 0.1.1
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 +224 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,31 @@
|
|
|
1
|
-
#
|
|
1
|
+
# VortexUI
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Angular 22+ component suite** — Standalone, Signals-first, zoneless-ready.
|
|
4
|
+
DataGrid de alta performance, File Manager, Charts, Scheduler, AI opt-in e temas Fluent / LDS.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
[](https://www.npmjs.com/package/@joel_jsp/vortex-ui)
|
|
7
|
+
[](./LICENSE)
|
|
8
|
+
[](https://angular.dev/)
|
|
9
|
+
|
|
10
|
+
📦 **npm:** [`@joel_jsp/vortex-ui`](https://www.npmjs.com/package/@joel_jsp/vortex-ui)
|
|
11
|
+
📂 **GitHub:** [JoelSchecheleski/vortex-ui](https://github.com/JoelSchecheleski/vortex-ui)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Por que VortexUI?
|
|
16
|
+
|
|
17
|
+
| Diferencial | Detalhe |
|
|
18
|
+
|-------------|---------|
|
|
19
|
+
| **Angular nativo** | 100% Standalone + `input()` / `model()` / `output()` / `signal` / `computed` |
|
|
20
|
+
| **Zoneless** | `OnPush` e compatível com apps sem Zone.js |
|
|
21
|
+
| **DataGrid** | Virtualização, remote DataSource (1M+ rows), sort/filter/group/edit/export |
|
|
22
|
+
| **AI opt-in** | Assistant + AI Columns via entry separado `@joel_jsp/vortex-ui/ai` |
|
|
23
|
+
| **Temas** | Design tokens `--vx-*` · Fluent Blue/SaaS (Light/Dark) · LDS |
|
|
24
|
+
| **Tree-shakeable** | Importe só o que usa; CSS e AI não entram no bundle se não forem referenciados |
|
|
25
|
+
|
|
26
|
+
Inspirado na superfície de produto DevExtreme — **implementação própria**, MIT.
|
|
27
|
+
|
|
28
|
+
---
|
|
6
29
|
|
|
7
30
|
## Install
|
|
8
31
|
|
|
@@ -10,40 +33,224 @@ Repositório: [JoelSchecheleski/vortex-ui](https://github.com/JoelSchecheleski/v
|
|
|
10
33
|
npm install @joel_jsp/vortex-ui
|
|
11
34
|
```
|
|
12
35
|
|
|
13
|
-
|
|
36
|
+
**Peers:** `@angular/core`, `@angular/common`, `@angular/forms` ^22.
|
|
14
37
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Setup rápido (3 passos)
|
|
41
|
+
|
|
42
|
+
### 1. Estilos (uma vez no app)
|
|
43
|
+
|
|
44
|
+
No `styles` do `angular.json` / `project.json`, ou no CSS global:
|
|
19
45
|
|
|
20
46
|
```css
|
|
21
47
|
@import '@joel_jsp/vortex-ui/styles/vortex-ui.css';
|
|
22
48
|
```
|
|
23
49
|
|
|
50
|
+
### 2. Tema
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { inject, ApplicationConfig, provideAppInitializer } from '@angular/core';
|
|
54
|
+
import { VortexThemeService } from '@joel_jsp/vortex-ui';
|
|
55
|
+
|
|
56
|
+
export const appConfig: ApplicationConfig = {
|
|
57
|
+
providers: [
|
|
58
|
+
provideAppInitializer(() => {
|
|
59
|
+
inject(VortexThemeService).setTheme('fluent-blue-light');
|
|
60
|
+
}),
|
|
61
|
+
],
|
|
62
|
+
};
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Ou em qualquer componente:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
inject(VortexThemeService).setTheme('fluent-saas-dark');
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 3. Use um componente
|
|
72
|
+
|
|
24
73
|
```ts
|
|
25
|
-
|
|
26
|
-
|
|
74
|
+
import { Component } from '@angular/core';
|
|
75
|
+
import { VxButtonComponent, VxDataGridComponent, VxColumnDef } from '@joel_jsp/vortex-ui';
|
|
76
|
+
|
|
77
|
+
@Component({
|
|
78
|
+
standalone: true,
|
|
79
|
+
imports: [VxButtonComponent, VxDataGridComponent],
|
|
80
|
+
template: `
|
|
81
|
+
<vx-button variant="primary">Salvar</vx-button>
|
|
82
|
+
|
|
83
|
+
<vx-data-grid
|
|
84
|
+
[columns]="columns"
|
|
85
|
+
[data]="rows"
|
|
86
|
+
[rowHeight]="36"
|
|
87
|
+
[virtualScroll]="true"
|
|
88
|
+
/>
|
|
89
|
+
`,
|
|
90
|
+
})
|
|
91
|
+
export class DemoPage {
|
|
92
|
+
readonly columns: VxColumnDef[] = [
|
|
93
|
+
{ field: 'id', header: 'ID', width: 72 },
|
|
94
|
+
{ field: 'product', header: 'Produto' }, // fluida (preenche o grid)
|
|
95
|
+
{ field: 'region', header: 'Região', minWidth: 100 },
|
|
96
|
+
];
|
|
97
|
+
readonly rows = [
|
|
98
|
+
{ id: 1, product: 'SolarMax', region: 'África' },
|
|
99
|
+
{ id: 2, product: 'EcoCharge', region: 'Europa' },
|
|
100
|
+
];
|
|
101
|
+
}
|
|
27
102
|
```
|
|
28
103
|
|
|
104
|
+
---
|
|
105
|
+
|
|
29
106
|
## Temas
|
|
30
107
|
|
|
108
|
+
Aplique via `data-vx-theme` (feito automaticamente pelo `VortexThemeService`):
|
|
109
|
+
|
|
31
110
|
| ID | Descrição |
|
|
32
111
|
|----|-----------|
|
|
33
|
-
| `fluent-blue-light` | Default (alias `fluent`) |
|
|
112
|
+
| `fluent-blue-light` | **Default** (alias `fluent`) |
|
|
34
113
|
| `fluent-blue-dark` | Fluent Blue Dark |
|
|
35
114
|
| `fluent-saas-light` | Fluent SaaS Light |
|
|
36
115
|
| `fluent-saas-dark` | Fluent SaaS Dark |
|
|
37
|
-
| `lds` | LDS (Poppins) |
|
|
116
|
+
| `lds` | LDS (Poppins + guideline interno) |
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
import { VortexThemeService, VORTEX_THEMES, VORTEX_THEME_LABELS } from '@joel_jsp/vortex-ui';
|
|
120
|
+
|
|
121
|
+
const themes = inject(VortexThemeService);
|
|
122
|
+
themes.setTheme('lds');
|
|
123
|
+
themes.toggleTheme(); // cicla pelos oficiais
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Componentes usam **somente** tokens `--vx-*` (sem hex hardcoded no core).
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## AI (opt-in)
|
|
131
|
+
|
|
132
|
+
A IA **não** entra no bundle principal. Use o secondary entry:
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
import {
|
|
136
|
+
VortexAIConfig,
|
|
137
|
+
VortexMockAIIntegration,
|
|
138
|
+
} from '@joel_jsp/vortex-ui/ai';
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
```ts
|
|
142
|
+
readonly aiConfig: VortexAIConfig = {
|
|
143
|
+
enabled: true,
|
|
144
|
+
assistant: { enabled: true, title: 'AI Assistant' },
|
|
145
|
+
contextFields: ['id', 'product', 'region'],
|
|
146
|
+
maxRowsInContext: 50,
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
readonly ai = new VortexMockAIIntegration();
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<vx-data-grid
|
|
154
|
+
[columns]="columns"
|
|
155
|
+
[data]="rows"
|
|
156
|
+
[ai]="aiConfig"
|
|
157
|
+
[aiIntegration]="ai"
|
|
158
|
+
/>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
- Deny by default (`ai.enabled = false`)
|
|
162
|
+
- Contexto tipado (não lê o DOM)
|
|
163
|
+
- Command bus / allowlist de ações
|
|
164
|
+
- Pluggable: troque o mock por OpenAI, Azure, modelo local, etc.
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## Catálogo (v0.1)
|
|
169
|
+
|
|
170
|
+
### Data & grids
|
|
171
|
+
`vx-data-grid` · `vx-tree-list` · `vx-card-view` · `vx-pivot-grid` · `vx-pivot-field-chooser` · `vx-filter-builder` · `vx-list`
|
|
172
|
+
|
|
173
|
+
### Forms & editors
|
|
174
|
+
`vx-form` · `vx-text-box` · `vx-text-area` · `vx-number-box` · `vx-select-box` · `vx-date-box` · `vx-date-range-box` · `vx-checkbox` · `vx-switch` · `vx-radio-group` · `vx-slider` · `vx-range-slider` · `vx-color-box` · `vx-tag-box` · `vx-autocomplete` · `vx-lookup` · `vx-calendar` · `vx-field-set` · validation summary
|
|
175
|
+
|
|
176
|
+
### Buttons & actions
|
|
177
|
+
`vx-button` · `vx-button-group` · `vx-drop-down-button` · `vx-fab`
|
|
178
|
+
|
|
179
|
+
### Navigation & layout
|
|
180
|
+
`vx-tabs` · `vx-accordion` · `vx-drawer` · `vx-menu` · `vx-tree-view` · `vx-splitter` · `vx-stepper` · `vx-toolbar` · `vx-box` · `vx-multi-view` · `vx-pagination` · `vx-gallery` · `vx-tile-view` · `vx-scroll-view`
|
|
181
|
+
|
|
182
|
+
### Feedback & overlays
|
|
183
|
+
`vx-dialog` · `vx-toast` · `vx-load-panel` · `vx-tooltip` · `vx-popover` · `vx-context-menu` · `vx-action-sheet` · progress / load-indicator
|
|
184
|
+
|
|
185
|
+
### Visualization
|
|
186
|
+
`vx-chart` (bar/line/area/pie/funnel/polar) · `vx-sparkline` · `vx-bullet` · `vx-funnel` · `vx-tree-map` · `vx-sankey` · gauges · `vx-diagram`
|
|
38
187
|
|
|
39
|
-
|
|
188
|
+
### Scheduling & files
|
|
189
|
+
`vx-scheduler` (day/week/month) · `vx-gantt` · `vx-file-manager` · `vx-file-uploader`
|
|
190
|
+
|
|
191
|
+
### Messaging & maps
|
|
192
|
+
`vx-chat` · `vx-html-editor` · `vx-map` · `vx-vector-map`
|
|
193
|
+
|
|
194
|
+
### Wrappers
|
|
195
|
+
`vx-draggable` · `vx-sortable` · `vx-resizable`
|
|
196
|
+
|
|
197
|
+
> Maturidade atual: **M0–M1** na maior parte da Super Suite; DataGrid / temas / AI Foundation mais avançados. Roadmap no [PRD](https://github.com/JoelSchecheleski/vortex-ui/blob/main/VortexUI-PRD.md).
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
## DataGrid — tips
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<vx-data-grid
|
|
205
|
+
[columns]="columns"
|
|
206
|
+
[data]="rows"
|
|
207
|
+
[dataSource]="remoteSource"
|
|
208
|
+
[virtualScroll]="true"
|
|
209
|
+
[editable]="true"
|
|
210
|
+
[exportEnabled]="true"
|
|
211
|
+
(cellEdit)="onEdit($event)"
|
|
212
|
+
/>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
- **Sem `width`** → coluna fluida (reparte o espaço do container, estilo DX)
|
|
216
|
+
- **Com `width`** → fixa; use `minWidth` nas fluidas
|
|
217
|
+
- Remote: implemente `VxDataSource` / use `VxRemoteMockDataSource` nos demos
|
|
218
|
+
- Export CSV nativo na toolbar
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## Entries do pacote
|
|
223
|
+
|
|
224
|
+
| Import | Conteúdo |
|
|
225
|
+
|--------|----------|
|
|
226
|
+
| `@joel_jsp/vortex-ui` | Componentes + theme + validators |
|
|
227
|
+
| `@joel_jsp/vortex-ui/ai` | AI Bridge, dialogs, mock integration |
|
|
228
|
+
| `@joel_jsp/vortex-ui/styles/vortex-ui.css` | Tokens + temas oficiais |
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
## Requisitos
|
|
233
|
+
|
|
234
|
+
- Node 20+ recomendado
|
|
235
|
+
- Angular **22+**
|
|
236
|
+
- TypeScript 5.x
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
## Desenvolvimento (monorepo)
|
|
40
241
|
|
|
41
242
|
```bash
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
npm
|
|
243
|
+
git clone https://github.com/JoelSchecheleski/vortex-ui.git
|
|
244
|
+
cd vortex-ui
|
|
245
|
+
npm install
|
|
246
|
+
npm start # Widgets Gallery → http://localhost:4200
|
|
247
|
+
npm run storybook # Storybook
|
|
248
|
+
npm run build # build da lib
|
|
249
|
+
npm run prepare:npm # artefato em dist/libs/vortex-ui
|
|
45
250
|
```
|
|
46
251
|
|
|
252
|
+
---
|
|
253
|
+
|
|
47
254
|
## License
|
|
48
255
|
|
|
49
|
-
MIT
|
|
256
|
+
MIT © [Joel Schecheleski](https://github.com/JoelSchecheleski)
|
package/package.json
CHANGED