Composants produit
Composants specifiques au domaine b.connect : gestion des API, OIDC, avatars.
BcApiKeysManager
Gestionnaire complet de cles API : creation, revelation, copie, rotation, revocation.
Manager API keys
| Nom | Prefix | Dernier usage | Actions |
|---|---|---|---|
| Cle sandbox | sk_test_ | 2026-02-21 | |
| Cle production | sk_live_ | 2026-02-28 |
Aucune action recente.
vue
<BcApiKeysManager
:keys="apiKeys"
:canRotate="true"
:canRevoke="true"
@create="handleCreate"
@copy="handleCopy"
@rotate="handleRotate"
@revoke="handleRevoke"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
keys | ApiKeyItem[] | [] | Liste des cles |
canRotate | boolean | false | Activer la rotation |
canRevoke | boolean | false | Activer la revocation |
ApiKeyItem
| Propriete | Type | Description |
|---|---|---|
id | string | Identifiant unique |
name | string | Nom de la cle |
prefix | string | Debut visible de la cle |
lastUsed | string? | Date de derniere utilisation |
created | string | Date de creation |
active | boolean | Cle active ou revoquee |
Evenements
| Evenement | Payload | Description |
|---|---|---|
create | — | Creer une nouvelle cle |
copy | ApiKeyItem | Copier une cle |
rotate | ApiKeyItem | Rotation d'une cle |
revoke | ApiKeyItem | Revoquer une cle |
reveal | ApiKeyItem | Reveler la valeur |
BcOidcClaimsEditor
Editeur de scopes et mapping de claims OIDC avec apercu JSON du token.
vue
<BcOidcClaimsEditor
v-model:scopes="selectedScopes"
v-model:claims-map="claimsMapping"
@preview-token="showTokenPreview"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
scopes | OidcScope[] | [] | Scopes disponibles |
claimsMap | Record<string, string> | {} | Mapping claim → valeur |
OidcScope
| Propriete | Type | Description |
|---|---|---|
id | string | Identifiant du scope |
label | string | Libelle affiche |
description | string? | Description du scope |
required | boolean? | Scope obligatoire (non desactivable) |
claims | string[]? | Claims inclus dans ce scope |
Evenements
| Evenement | Payload | Description |
|---|---|---|
update:scopes | OidcScope[] | Scopes selectionnes mis a jour |
update:claimsMap | Record<string, string> | Mapping mis a jour |
preview-token | — | Afficher l'apercu du token |
BcScopeList
Selecteur de scopes OIDC avec cases a cocher style carte.
vue
<BcScopeList
v-model="selectedScopes"
:scopes="[
{ id: 'openid', label: 'openid', required: true },
{ id: 'email', label: 'email', description: 'Adresse email' },
{ id: 'profile', label: 'profile' },
]"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
scopes | ScopeItem[] | [] | Scopes disponibles |
modelValue | string[] | [] | Scopes selectionnes (v-model) |
disabled | boolean | false | Mode lecture seule |
BcAvatarGroup
Groupe d'avatars empiles avec indicateur de surplus.
MDJMSL+2
vue
<BcAvatarGroup
:items="teamMembers"
:max="4"
size="md"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AvatarItem[] | [] | Liste des membres |
size | "sm" | "md" | "lg" | "md" | Taille des avatars |
max | number | 5 | Nombre max affiche avant indicateur +N |
overlap | number | 8 | Chevauchement en px |
BcAvatar
Avatar individuel avec image, initiales de fallback et badge de statut.
MDJMSLMP
vue
<BcAvatar name="Marie Dupont" size="sm" />
<BcAvatar name="Jean Martin" size="md" status="online" />
<BcAvatar src="/avatar.jpg" alt="Photo de profil" size="lg" status="busy" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string? | "" | Nom (genere les initiales) |
src | string? | — | URL de l'image |
alt | string? | — | Texte alternatif de l'image |
size | "sm" | "md" | "lg" | "md" | Taille |
status | "none" | "online" | "busy" | "away" | "none" | Badge de statut |
rounded | boolean | false | Forme carree arrondie au lieu de cercle |
Statuts
| Valeur | Couleur | Usage |
|---|---|---|
online | Vert | En ligne, disponible |
busy | Rouge | Occupe, en reunion |
away | Orange | Absent, inactif |
none | — | Pas de badge |