fcad-core-dragon 2.1.1 → 2.2.0-beta.1

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.

package/documentation/composants/app-comp-button-progress.md

@@ -1,53 +1,53 @@
----
-title: Model de page
-
----
-::: warning  🚩 Important
-  Utilisez ce model comme depart pour écrire la page de votre composant:
-
-  1) Copiez /dubliquez cette page
-  2) Renommez votre copie avec le nom de votre composant
-  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
-:::
-
-
-Composant pour ....  
-
-## Aperçu
-
-Le composant permet de...
-Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
-
-## Comportement
-
-Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
-
-## Référence du composant
-
-**ModelComposantPage** `<model-composant/>` 
-
-
-## Paramètre 
-
-Aucun paramètre n'est nécessaire pour ce composant.
-
-### Props
-
-| Propriété | Type  | Description   | valeur par défaut | 
-|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
-| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
-
-### Slots
-`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
-
-
-## Style
-
-`nomde class`[class]
-
-Aucune manipulation requise.
-
-
-## Accessibilité
-Aucune manipulation requise.
-
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+