@cadriciel/ui 0.1.0
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 +50 -0
- package/fesm2022/cadriciel-ui.mjs +17451 -0
- package/fesm2022/cadriciel-ui.mjs.map +1 -0
- package/package.json +59 -0
- package/styles/base.scss +32 -0
- package/styles/tokens.scss +98 -0
- package/types/cadriciel-ui.d.ts +6327 -0
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @cadriciel/ui
|
|
2
|
+
|
|
3
|
+
Bibliothèque de composants **Angular 21** du Cadriciel (CEREMA). 100 % sans PrimeNG : formulaires (select, multiselect, date, nombre, slider, switch/case/radio, segmenté, listbox, orderlist, picklist), **table niveau grille** (arbre, groupes, responsive, virtual scroll, réordonnancement, édition, menu d'en-tête, filtres à opérateurs, panneau latéral), layout responsive (breakpoints, primitives), overlays (dialog, drawer, confirm, tooltip, popover, menu, toast, bottom-sheet mobile), navigation (tabs, stepper, accordéon, breadcrumb, orgchart), affichage (chip, tag, badge, avatar, card, progress, skeleton), **carte MapLibre** (`cad-map`, fonds IGN Géoplateforme, couches GeoJSON/WMS/WMTS, chrome, outils, `cad-map-card`), **~390 icônes** in-house.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i @cadriciel/ui @angular/cdk
|
|
9
|
+
npm i maplibre-gl # optionnel : seulement si vous utilisez <cad-map>
|
|
10
|
+
npm i chart.js # optionnel : seulement si vous utilisez <cad-chart>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`styles.scss` de l'application :
|
|
14
|
+
|
|
15
|
+
```scss
|
|
16
|
+
@use '@cadriciel/ui/styles/tokens'; // variables --cad-* (alias des tokens du studio : --surface-*, --text-*, --accent-*)
|
|
17
|
+
@use '@cadriciel/ui/styles/base'; // reset ciblé, focus, .cad-input, CDK overlay
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Thème sombre = classe `.theme-dark` sur `<html>`. Densité tactile automatique (`.cad-touch`) et bottom-sheets sous `md`.
|
|
21
|
+
|
|
22
|
+
## Utilisation
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import { CadButtonComponent, CadFieldComponent, CadInputDirective, CadSelectComponent, CadTableComponent, CadColumnComponent, CadToastService } from '@cadriciel/ui';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<cad-field label="Template" required>
|
|
30
|
+
<cad-select [(value)]="tpl" [options]="templates" filter clearable/>
|
|
31
|
+
</cad-field>
|
|
32
|
+
<cad-table [value]="rows" dataKey="id" showSearch paginator [rows]="25" selectionMode="multiple" [(selection)]="sel">
|
|
33
|
+
<cad-column field="name" header="Nom" sortable/>
|
|
34
|
+
</cad-table>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Services API-compatibles PrimeNG pour la migration : `CadToastService.add({severity, summary, detail})`, `CadConfirmService.confirm({...})`.
|
|
38
|
+
|
|
39
|
+
## Développement
|
|
40
|
+
|
|
41
|
+
Workspace : `projects/ui` (lib) + `projects/showcase` (démo, `ng serve showcase`). Tests Vitest : `ng test ui`. Build : `ng build ui` → `dist/ui`.
|
|
42
|
+
|
|
43
|
+
## Publication (mainteneurs)
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
tools/pack.sh # build + cadriciel-ui-<version>.tgz
|
|
47
|
+
npm publish ./dist/ui --access public # npmjs, scope @cadriciel — fait par la CI GitLab (job publish-ui) quand la version change
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Licence MIT — icônes dérivées de Lucide (ISC).
|