fcad-core-dragon 2.1.1 → 2.1.2

package/documentation/composants/app-base-error-display.md

@@ -1,59 +1,59 @@
-# Error Display
-
-Composant pour l'affichage d'erreurs en environnement de développement. 
-
-## Aperçu
-
-Ce composant n'est pas affiché pour les étudiants. Il sert plutôt à avertir l'intégrateur/développeurs qu'il a une erreur avec l'utilisant de l'application. 
-
-Il y a deux niveaux de couleur pour l`affichage d'erreurs: 
-
-- Rouge (niveau majeur): Indique une erreur qui brise le fonctionnement de l'application (l'application n'est plus navigable ou plus rien ne peut être affiché)
-- Jaune (niveau mineur): Indique la présence d`erreurs qui ne brisent pas l'application (il y a une erreur, mais on peut toujours naviguer dans l'application et certains éléments sont affichables).
-
-## Référence du composant
-
-**AppBaseErrorDisplay** 
-`<app-base-error-display/>`
-
-## Comportement 
-
-Le composant affiche un message avec la liste d`erreurs passées en paramètre lors de son appel.
- 
-
-::: danger Important
-
-Vous ne devez pas faire la gestion de vos erreurs à l'intérieur du composant. Gérez plutôt vos erreurs dans votre composant et faites-les afficher en utilisant `<app-base-error-display/>`. 
-
-Ajoutez les messages d'erreurs qui conviennent à votre situation. Copiez et collez la structure et modifiez le message pour convenir à votre situation.
-
-:::
-
-::: tip 💡 Note
-
-Si vous jugez qu'utiliser le composant est trop pour l'erreur à afficher, vous pouvez toujours afficher l'erreur dans votre composant. Utilisez les styles présents dans la feuille de style pour garder l'uniformité du look.
-
-:::
-
-## Paramètre 
-
-Voici les éléments paramétrable d'Error Display.
-
-::: details <b>Props</b>
-
-| Propriété | Type  | Description   | valeur par défaut | valeur accepté | 
-|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
-| errorMessage | String | Le type de message d'erreur à afficher | ' ' | 404 / errorPage / errorMenu / errorModule   | 
-| errorsList | Array | Liste des valeurs des erreurs que vous voulez afficher | tableau vide | un array de *string*  | 
-| docLink | String | lien url de référence pour plus d`information | [documentation](https://fcaddocumentation.netlify.com/guide/proceduries.html) | *string*  | 
-
-:::
-
-## Style
-
-Les classes et la structure sont déjà faites pour vous, si vous voulez rajouter un type d'erreur dupliquer la section avec sa structure. Vous remarquerez dans la feuille de style ce sont les seules couleurs en dur. Il en est ainsi pour ne pas créer d'erreur avec le style des cours. 
-
-## Accessibilité
-
-Ce composant sert seulement à éviter les codes 18 pour l'intégrateur, il n'est donc pas tenu d'être accessible.  
-
+# Error Display
+
+Composant pour l'affichage d'erreurs en environnement de développement. 
+
+## Aperçu
+
+Ce composant n'est pas affiché pour les étudiants. Il sert plutôt à avertir l'intégrateur/développeurs qu'il a une erreur avec l'utilisant de l'application. 
+
+Il y a deux niveaux de couleur pour l`affichage d'erreurs: 
+
+- Rouge (niveau majeur): Indique une erreur qui brise le fonctionnement de l'application (l'application n'est plus navigable ou plus rien ne peut être affiché)
+- Jaune (niveau mineur): Indique la présence d`erreurs qui ne brisent pas l'application (il y a une erreur, mais on peut toujours naviguer dans l'application et certains éléments sont affichables).
+
+## Référence du composant
+
+**AppBaseErrorDisplay** 
+`<app-base-error-display/>`
+
+## Comportement 
+
+Le composant affiche un message avec la liste d`erreurs passées en paramètre lors de son appel.
+ 
+
+::: danger Important
+
+Vous ne devez pas faire la gestion de vos erreurs à l'intérieur du composant. Gérez plutôt vos erreurs dans votre composant et faites-les afficher en utilisant `<app-base-error-display/>`. 
+
+Ajoutez les messages d'erreurs qui conviennent à votre situation. Copiez et collez la structure et modifiez le message pour convenir à votre situation.
+
+:::
+
+::: tip 💡 Note
+
+Si vous jugez qu'utiliser le composant est trop pour l'erreur à afficher, vous pouvez toujours afficher l'erreur dans votre composant. Utilisez les styles présents dans la feuille de style pour garder l'uniformité du look.
+
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrable d'Error Display.
+
+::: details <b>Props</b>
+
+| Propriété | Type  | Description   | valeur par défaut | valeur accepté | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| errorMessage | String | Le type de message d'erreur à afficher | ' ' | 404 / errorPage / errorMenu / errorModule   | 
+| errorsList | Array | Liste des valeurs des erreurs que vous voulez afficher | tableau vide | un array de *string*  | 
+| docLink | String | lien url de référence pour plus d`information | [documentation](https://fcaddocumentation.netlify.com/guide/proceduries.html) | *string*  | 
+
+:::
+
+## Style
+
+Les classes et la structure sont déjà faites pour vous, si vous voulez rajouter un type d'erreur dupliquer la section avec sa structure. Vous remarquerez dans la feuille de style ce sont les seules couleurs en dur. Il en est ainsi pour ne pas créer d'erreur avec le style des cours. 
+
+## Accessibilité
+
+Ce composant sert seulement à éviter les codes 18 pour l'intégrateur, il n'est donc pas tenu d'être accessible.  
+

package/documentation/composants/app-base-popover.md

@@ -1,68 +1,68 @@
-# Popover
-
-Une infobulle pouvant être générée automatiquement.
-
-## Aperçu
-
-
-
-## Comportement
-
-Le target doit être reçu et appliqué avant l'ouverture/création du popover. 
-
-## Paramètre 
-
-### Target
-
-**Type:** `String`
-
-**Usage:** Obligatoire.
-
-Définit l'emplacement où pointe la flèche du popover. Doit être initaliser avant le "mounted" du popover.
-
-### Option
-
-**Type:** `Object`
-
-**Usage:** Obligatoire.
-
-Définit le contenu du popover. Il y a plusieurs paramettres de disponible:
-- title
-- content
-- cb_$cancel 
-- cb_$confirm
-
-#### Title
-
-**Type:** `String`
-
-**Usage:** Optionel.
-Le titre du popover.
-
-#### Content
-
-**Type:** `String`
-
-**Usage:** Optionel.
-
-Le contenu du popover en HTML.
-
-#### Cb_$cancel
-
-**Type:** `Function`
-
-**Usage:** Optionel.
-
-La function quand on clique sur le bouton "cancel". N'est pas utilisé par le OnBoarding.
-
-#### Cb_$confirm
-
-**Type:** `Function`
-
-**Usage:** Optionel.
-
-La function quand on clique sur le bouton "confim" qui est mis sur un délai pour le faire sur le "onHidden".
-
-## Style
-
-## Accessibilité
+# Popover
+
+Une infobulle pouvant être générée automatiquement.
+
+## Aperçu
+
+
+
+## Comportement
+
+Le target doit être reçu et appliqué avant l'ouverture/création du popover. 
+
+## Paramètre 
+
+### Target
+
+**Type:** `String`
+
+**Usage:** Obligatoire.
+
+Définit l'emplacement où pointe la flèche du popover. Doit être initaliser avant le "mounted" du popover.
+
+### Option
+
+**Type:** `Object`
+
+**Usage:** Obligatoire.
+
+Définit le contenu du popover. Il y a plusieurs paramettres de disponible:
+- title
+- content
+- cb_$cancel 
+- cb_$confirm
+
+#### Title
+
+**Type:** `String`
+
+**Usage:** Optionel.
+Le titre du popover.
+
+#### Content
+
+**Type:** `String`
+
+**Usage:** Optionel.
+
+Le contenu du popover en HTML.
+
+#### Cb_$cancel
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "cancel". N'est pas utilisé par le OnBoarding.
+
+#### Cb_$confirm
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "confim" qui est mis sur un délai pour le faire sur le "onHidden".
+
+## Style
+
+## Accessibilité

package/documentation/composants/app-comp-audio.md

@@ -1,75 +1,75 @@
-# Lecteur Audio 
-
-Composant pour afficher un audio et sont lecteur.
-
-## Aperçu
-
-Le composant permet d'afficher un lecteur audio et tout ses fonctionalités.
-
-## Comportement
-
-S'affiche dans un  en cadré avec un titre (obligatoire), une image (pas obligatoire), lecteur de média et un tirroire d'accordéon qui contient les sous-titre. 
-
-## Référence du composant
-
-`<app-comp-audio-player :aud-data="audioData2"/>` 
-
-
-## Structure de données
-Voici la structure à utiliser pour les données d'un contenu audio
-> [!IMPORTANT]
-> audiosData doit être un tableau (array)
-```js
-import aud1 from '@/assets/medias/exemple_audio.mp3'
-import posterAud1 from '@/assets/img/audio_poster.png'
-
-export default {
-  data() {
-    return {
-      id: 'P01',
-      activityRef: 'A03',
-      title: 'Lecteurs médias',
-      type: 'pg_normal',
-      audiosData: [
-        {
-          id: 'aud1',
-          mTitle: 'Et si... Annie Ernaux nous parlait',
-          mSources: [
-            {
-              type: 'mp3',
-              src: aud1
-            }
-          ],
-          mPoster: posterAud1,
-          mAlt: "Portrait de l'autrice Annie Ernaux",
-          mTranscript:
-            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
-        }
-      ]
-    }
-  }
-}
-```
-
-### Props
-
-| Propriété | Type  | Description   | valeur par défaut | 
-|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
-| id | string | identification unique | N/A |
-| mTitle | string | Titre afficher dans le composant (obligatoire) | N/A |
-| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp3` et `src` doit être la source du mp3 | N/A |
-| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
-| mAlt | string | texte alternatif de l'image (si image il y a ) | N/A |
-| mTranscript | string | Structure html de la transcription afficher dans le composant | N/A |
-
-## Style
-
-`nomde class`[class]
-
-Aucune manipulation requise.
-
-
-## Accessibilité
-
-Aucune manipulation requise.
-
+# Lecteur Audio 
+
+Composant pour afficher un audio et sont lecteur.
+
+## Aperçu
+
+Le composant permet d'afficher un lecteur audio et tout ses fonctionalités.
+
+## Comportement
+
+S'affiche dans un  en cadré avec un titre (obligatoire), une image (pas obligatoire), lecteur de média et un tirroire d'accordéon qui contient les sous-titre. 
+
+## Référence du composant
+
+`<app-comp-audio-player :aud-data="audioData2"/>` 
+
+
+## Structure de données
+Voici la structure à utiliser pour les données d'un contenu audio
+> [!IMPORTANT]
+> audiosData doit être un tableau (array)
+```js
+import aud1 from '@/assets/medias/exemple_audio.mp3'
+import posterAud1 from '@/assets/img/audio_poster.png'
+
+export default {
+  data() {
+    return {
+      id: 'P01',
+      activityRef: 'A03',
+      title: 'Lecteurs médias',
+      type: 'pg_normal',
+      audiosData: [
+        {
+          id: 'aud1',
+          mTitle: 'Et si... Annie Ernaux nous parlait',
+          mSources: [
+            {
+              type: 'mp3',
+              src: aud1
+            }
+          ],
+          mPoster: posterAud1,
+          mAlt: "Portrait de l'autrice Annie Ernaux",
+          mTranscript:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+        }
+      ]
+    }
+  }
+}
+```
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| id | string | identification unique | N/A |
+| mTitle | string | Titre afficher dans le composant (obligatoire) | N/A |
+| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp3` et `src` doit être la source du mp3 | N/A |
+| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
+| mAlt | string | texte alternatif de l'image (si image il y a ) | N/A |
+| mTranscript | string | Structure html de la transcription afficher dans le composant | N/A |
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-branch-buttons.md

@@ -1,111 +1,111 @@
-# Branch Buttons
-
-
-Composant qui génère des boutons d'embranchment dans une page.
-
-## Aperçu
-
-Le composant affiche des boutons ou cartes clicables dans la page. Chaque element est accompagné d'un affichage de l'état de progression dans la branche. 
-
-## Référence du composant
-
-**AppCompBranchButtons**
-`<app-comp-branch-buttons/>` 
-
-## Comportement
-
-Le composant génère des boutons pour chaque branch disponible dans l'activité. Il crée un lien qui ouvre une fenêtre latérale. Son état change de normal à complet, si le bas de la fenêtre latérale est visité. 
-
-Le composant affiche un message d'erreur, lorsque les données passées en reférence, durant la phase de production, ne sont pas valides.
-
-::: tip 💡 Note
-En cas d'erreur, pretez attention au message(s) affiché(s) par le composant dans la console du navigateur et dans la page. Cela vous permettra de savoir ce qui doit être corrigé.
-:::
-
-## Paramètre 
-
-### Props
-
-<table>
-  <thead>
-    <tr>
-      <th>Propriété</th>
-      <th>Type</th>
-      <th>Description</th>
-      <th>valeur par défaut</th>
-      <th>valeur accepté</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>customButtons (optionnelle) </td>
-      <td>Array</td>
-      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement.
-      </td>
-      <td>null</td>
-      <td> Un Array d'Object (name, brchName)
-        <br><br>Exemple pour une page avec 2 embranchments chaque objet bouton sera defini comme suit:<br><br>
-        <pre class="code-in-table">
-          <code>
-            [
-              { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
-              { name: 'bouton_A02_P01_E02',brchName: 'P02_E02' }
-            ]
-          </code>
-        </pre>
-      </td>
-    </tr>
-    <tr>
-      <td>cards (optionnelle) </td>
-      <td>Array</td>
-      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement. Chaque bouton est presenté sous forme d'une carte
-      </td>
-      <td>null</td>
-      <td> Un Array d'Object (imgFile, title, text, brchName, btnTitle)
-        <br><br>Exemple chaque carte d'embranchments sera un objet défini de la forme ci-dessous:<br><br>
-        <pre class="code-in-table">
-          <code>
-            [
-              {
-                imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet)
-                imgAlt: 'Test img 1',
-                title: 'Titre embranchment',
-                text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
-                brchName: 'P02_E01'
-                btnTitle: ''
-              }
-            ]
-          </code>
-        </pre>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-
-### Slots
-
-Un template custom est disponible pour habiller chaque bouton en faisant reférence au nom de la branch qui le lie. Ceci n'est applicable qu'avec l'utilisation de la propriété `customButtons`
-
-
-
-Exemple:
-
-```vue
-<app-comp-branch-buttons :custom-buttons="buttonData">
-  <template #bouton_A02_P01_E01>
-      <h1>Peu</h1>
-    </template>
-    <template #bouton_A02_P01_E02>
-      <h1>Peut être ici le titre d'une page</h1>
-    </template>
-</app-comp-branch-buttons>
-```
-
-Si le composant est appelée sans prop, les boutons par défaut seront générés.
-
-## Style
-
-
-## Accessibilité
-une variable `imgAlt` est disponible sur chaque objet, pour définir la valeur de l'attribut  `alt` de l'image de la carte.
+# Branch Buttons
+
+
+Composant qui génère des boutons d'embranchment dans une page.
+
+## Aperçu
+
+Le composant affiche des boutons ou cartes clicables dans la page. Chaque element est accompagné d'un affichage de l'état de progression dans la branche. 
+
+## Référence du composant
+
+**AppCompBranchButtons**
+`<app-comp-branch-buttons/>` 
+
+## Comportement
+
+Le composant génère des boutons pour chaque branch disponible dans l'activité. Il crée un lien qui ouvre une fenêtre latérale. Son état change de normal à complet, si le bas de la fenêtre latérale est visité. 
+
+Le composant affiche un message d'erreur, lorsque les données passées en reférence, durant la phase de production, ne sont pas valides.
+
+::: tip 💡 Note
+En cas d'erreur, pretez attention au message(s) affiché(s) par le composant dans la console du navigateur et dans la page. Cela vous permettra de savoir ce qui doit être corrigé.
+:::
+
+## Paramètre 
+
+### Props
+
+<table>
+  <thead>
+    <tr>
+      <th>Propriété</th>
+      <th>Type</th>
+      <th>Description</th>
+      <th>valeur par défaut</th>
+      <th>valeur accepté</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>customButtons (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement.
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (name, brchName)
+        <br><br>Exemple pour une page avec 2 embranchments chaque objet bouton sera defini comme suit:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
+              { name: 'bouton_A02_P01_E02',brchName: 'P02_E02' }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>cards (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement. Chaque bouton est presenté sous forme d'une carte
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (imgFile, title, text, brchName, btnTitle)
+        <br><br>Exemple chaque carte d'embranchments sera un objet défini de la forme ci-dessous:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              {
+                imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet)
+                imgAlt: 'Test img 1',
+                title: 'Titre embranchment',
+                text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
+                brchName: 'P02_E01'
+                btnTitle: ''
+              }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+### Slots
+
+Un template custom est disponible pour habiller chaque bouton en faisant reférence au nom de la branch qui le lie. Ceci n'est applicable qu'avec l'utilisation de la propriété `customButtons`
+
+
+
+Exemple:
+
+```vue
+<app-comp-branch-buttons :custom-buttons="buttonData">
+  <template #bouton_A02_P01_E01>
+      <h1>Peu</h1>
+    </template>
+    <template #bouton_A02_P01_E02>
+      <h1>Peut être ici le titre d'une page</h1>
+    </template>
+</app-comp-branch-buttons>
+```
+
+Si le composant est appelée sans prop, les boutons par défaut seront générés.
+
+## Style
+
+
+## Accessibilité
+une variable `imgAlt` est disponible sur chaque objet, pour définir la valeur de l'attribut  `alt` de l'image de la carte.