Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[19.1] Update RC #3313

Merged
merged 10 commits into from
Dec 19, 2024
Prev Previous commit
MD format (#3309)
  • Loading branch information
jeremie-lucca authored Dec 18, 2024
commit 4d9bc400a04d8d92d997ed3741fcab5d17a555a0
18 changes: 8 additions & 10 deletions docs/dialog.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Documentation Dialog

`LuDialogService` sert à ouvrir des dialog à travers vos applications, avec tous les attributs et la structure nécessaires à une bonne accessibilité.

Il peut être utilisé de deux manières principales: via le service ou via les directives (template-driven)

## Imports et providers
### Imports et providers

Afin de pouvoir utiliser `LuDialogService` , vous devez appeler la fonction `configureLuDialog` en tant qu’`EnvironmentProvider` , idéalement dans `bootstrapApplication`:

Expand All @@ -29,7 +27,7 @@ import { provideLuDialog } from '@lucca-front/ng/dialog';
})
```

## Via le service
### Via le service

Pour ouvrir une dialog via le service, vous pouvez simplement appeler la méthode `LuDialogService.open(options: LuDialogConfig)`:

Expand All @@ -46,7 +44,7 @@ openDialog(): void {

```

### Envoyer des données à la dialog
#### Envoyer des données à la dialog

Le système de dialog propose une approche qui se repose sur le composant qui contient le contenu du dialog, ce qui signifie que tout le typage se passe à un seul endroit: dans le composant.

Expand Down Expand Up @@ -104,7 +102,7 @@ this.#dialog.open({

```

### Récupérer le résultat du dialog
#### Récupérer le résultat du dialog

`LuDialogRef` possède trois observables qui permettent de réagir aux résultats possibles de l'ouverture d'une dialog:

Expand All @@ -131,7 +129,7 @@ dialogRef.result$.pipe(

```

## Via le template
### Via le template

Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les directives et composants mises à disposition:

Expand All @@ -140,7 +138,7 @@ Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les di
- `luDialogClose` pour fermer la dialog via la méthode `close` lors du click sur son élément hôte.
- `luDialogDismiss` pour fermer la dialog via la méthode `dismiss` lors du click sur son élément hôte.

### Exemple:
#### Exemple:

```html
<!-- luDialogOpen va ouvrir la dialog déclaré dans #dialogTpl au click sur le bouton. Il est possible de passer une config via l'input luDialogConfig -->
Expand Down Expand Up @@ -170,12 +168,12 @@ Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les di

```

### Envoyer et reçevoir des données en Template-driven
#### Envoyer et reçevoir des données en Template-driven

Du fait que tout soit géré depuis le template, vous pouvez totalement ignorer la partie transmission de données car par définition,
la dialog box a accès à tout ce que le composant expose au template, fonctions et propriétés.

## Utilisation des formulaires
### Utilisation des formulaires

Dans le cas où vous souhaitez utiliser un formulaire au sein d’une [dialog box](https://prisme.lucca.io/94310e217/p/841b0b-dialogs), il vous suffit de placer la balise `form` avec une classe `dialog-inside-formOptional` autour du contenu de votre dialog, que celle-ci soit template-driven ou non :

Expand Down
20 changes: 9 additions & 11 deletions docs/user-popover.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# Documentation User Popover

La UserPopover est un composant qui apparaît au survol d'un élément et qui affiche différentes informations sur l'utilisateur.

## Setup
### Setup

Afin de pouvoir installer la UserPopover, vous devez appeler la fonction `provideLuUserPopover` dans votre module racine.

Expand All @@ -18,7 +16,7 @@ import { provideLuUserPopover } from '@lucca-front/ng/user-popover';
export class AppModule { }
```

## Utilisation
### Utilisation

Pour utiliser la UserPopover, il vous suffit d'utiliser la directive `[luUserPopover]` et de lui fournir un LuUser

Expand All @@ -40,9 +38,9 @@ import { LuUserPopoverDirective } from '@lucca-front/ng/user-popover';
export class MyComponent { }
```

## Inputs
### Inputs

### luEmployeeCard
#### luEmployeeCard

```html
<div [luUserPopover]="user"></div>
Expand All @@ -51,31 +49,31 @@ export class MyComponent { }
Permet de fournir un utilisateur à la UserPopover.


### luUserPopoverEnterDelay
#### luUserPopoverEnterDelay

```html
<div [luUserPopover]="user" [luUserPopoverEnterDelay]="200"></div>
```

Permet de définir le délai avant l'affichage du UserPopover en millisecondes. Par défaut 300

### luUserPopoverLeaveDelay
#### luUserPopoverLeaveDelay

```html
<div [luUserPopover]="user" [luUserPopoverLeaveDelay]="200"></div>
```

Permet de définir le délai avant la disparition du UserPopover en millisecondes. Par défaut 100

### luUserPopoverDisabled
#### luUserPopoverDisabled

```html
<div [luUserPopover]="user" [luUserPopoverDisabled]="true"></div>
```

Permet de désactiver le UserPopover

## Feature Flag
### Feature Flag
Au moment où sont écrites ces lignes, la UserPopover est branché sur un feature flag de la librairie `Lucca.Core.FeatureFlags`.
Il est donc nécessaire de l'activer dans votre application pour pouvoir l'utiliser.

Expand All @@ -95,7 +93,7 @@ export class AppModule { }

Ce feature flag est temporaire et sera supprimé dans une prochaine version.

## Store et Services
### Store et Services
Le User popover est fournit avec un service qui gère la récupération des données, mais aussi qui stocke les informations des utilisateurs déjà récupérés, y compris les images.
Ce service est un singleton et est donc partagé entre tous les UserPopover de l'application.

Expand Down
Loading