fcad-core-dragon 2.1.0 → 2.1.2

package/documentation/composants_critiques/app-base.md

@@ -1,311 +1,311 @@
-# Base App
-
-
-
-## Aperçu
-
-Composant racine pour utilisation de la librairie.  
-
-## Référence du composant
-
-**AppBase** `<app-base/>` 
-
-## Comportement
-
-Ce composant reçoit les premières données de configuration pour la création de application. Les données sont fournie au composant sous forme de props. Il valide le type certaines des données fournie et fait afficher un message d'erreur à lécran et dans la console du navigateur, lorsque des erreurs sont détectées. Une fois les données validées, le composant les transmet au Store de application.
-
-Le composants est également en charge de faire la communication avec le serveur et les autres module de stockage. Il gère la recuperation et la mise à jours des données de progression dans l'application.
-
-
-
-::: tip Note
-Le composant rendra l'application inutilisable Lorsque des erreurs de configuration seront détéctée.
-Prêtez attention au message(s) affiché(s) par le composant dans la console du navigateur et l'application. Cela vous permettra de savoir ce qui doit être corrigé.
-:::
-
-## Paramètres
-
-Aucun paramètre n'est nécessaire pour ce composant.
-
-### Props
-
-| Propriété | Type  | Description &nbsp;&nbsp;&nbsp;  | valeur par défaut | 
-|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
-| appConfig | Object | Récoit les données de configuration de application | Doit contenir au minimum les valeurs suivantes: `{lang(String), specification(String), id(String), crs_id(String), idb_id(String), no_menu(Boolean), is_single_activity(Boolean), auto_next_activity(Boolean) }`.   Valeur Optionnelles: `{remote(Boolean), actor (Oject), linkedResource(Object) }`.   Référez-vous à la section ci dessous pour plus de details|
-
-### Exemple
-
-Voici ci dessous un exemple d'utilisation du composant dans une application 
-
-
-```vue 
-<!--App.vue-->
-<template>
-  <app-base :app-config="$data">
-</template>
-<script>
-export default {
-  data() {
-    return {
-      lang: 'fr', // Set Language for the Activities and App French (fr)| English(en)
-      specification: 'xapi', // connection specification (xapi|scorm)
-      id: 'v2', // This activity ID
-      crs_id: 'template_fcad_dragon', //The Group ID this activity is part of.
-      idb_id: '$template_fcad_dragon', // This activity ID in LocalDB. Only when APP is not remote.
-      no_menu: false, // Set permission to view and navigate to SUMMARY VIEW (true|false) -default :false; (CAN BE REMOVED)
-      is_single_activity: false, //set app as a single activity ( ex:Introduction | Conclusion | Prep_devoir)(true|false) - default:false; (CAN BE REMOVED)
-      auto_next_activity: true, // set Previous/Next can allow navigation between activities. Set false if do not want navigation between activities with Previous/Next button (true|false) - default:true
-      // remote: false, // Force App to access server remotely while in production mode (true|false) - default:false, (CAN BE REMOVED)
-      actor: {
-        name: 'Luke Skywalker',
-        mbox: 'mailto:skywalker2@mymailbox.com'
-      }
-    }
-  }
-}
-</script>
-```
-
-
-
-### Paramètres Pour AppConfig 
-
-<h3>⚙️<b>actor</b></h3> 
-Défini l'agent pour l'envoi des statements xAPI
-
-- **Type:** `Object`
-- **Usage:** `Optionel` 
-- **Valeur(s):** 
-  - `name (String)`- nom de agent
-  - `mbox(String)`- l'email de l'agent. Doit commencer par <i>mailto:</i>  
-
-<h3>⚙️<b>auto_next_activity</b></h3>  
-Défini si la navigation est permise entre activité. Doit être mis à `false` si on ne veut pas de navigation entre les activités avec les boutons de navigation Précedent/Suivant button.
-
-- **Type:** `Boolean`
-- **Usage:** `Requis` 
-- **Valeur(s):** `true|false` valeur par defaut est `true`
-
-<h3>⚙️<b>crs_id</b></h3>  
-Défini l'identification du group auquel doit faire partie l'activité (l'application).
-
-- **Type:** `String`
-- **Usage:** `Requis` 
-- **Valeur(s):** Sans Objet. Doit être défini.
-
-<h3>⚙️<b>id</b></h3> 
-Défini l'identification de l'application. Doit être unique pour éviter toute corruption de données.
-
-- **Type:** `String`
-- **Usage:** `Requis` 
-- **Valeur(s):**  Sans Objet. Doit être défini.
-
-
-<h3>⚙️<b>idb_id</b></h3> 
-Défini l'identification pour l'environement de stockage local (indexDB).  Doit être unique pour eviter toute corruption de données.
-
-- **Type:** `String`
-- **Usage:** `Requis` 
-- **Valeur(s):**  Sans Objet. Doit être défini.
-
-<h3>⚙️<b>is_single_activity</b></h3>  
-Configure l'application pour être traité comme étant une activité independante.
-
-- **Type:** `Boolean`
-- **Usage:** `Requis` 
-- **Valeur(s):** `true|false` valeur par defaut est `false`
-
-
-<h3>⚙️<b>no_menu</b></h3>  
-Défini si le menu (sommaire) de l'application doit être accessible où non.
-
-- **Type:** `Boolean`
-- **Usage:** `Requis` 
-- **Valeur(s):** `[true|false]` valeur par defaut est `false`. Mettre à `true` si la page sommaire ne doit pas être accessible
-
-<h3>⚙️<b>lang</b></h3>  
-Défini la langue dans la quelle sera presenté l'application.
-
-- **Type:** `String`
-- **Usage:** `Requis` 
-- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
-
-<h3>⚙️<b>specification</b></h3>  
-Défini la norme de specification à utiliser par l'application pour la gestion des données (xAPI ou Scorm).
-
-- **Type:** `String`
-- **Usage:** `Requis` 
-- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
-
-
-#### TYPE_QUESTION
-
-**Type:** `String` _(choix_mult | choix_unique | dropdown | reponse_ouverte | texte_tableau | texte_troue | texte_troue_select)__
-
-**Usage:** Obligatoire.  
-Définie le type de question.
-
-### Slots
-`content`[named-slot] - permet de recevoir tout le contenu HTML à afficher.
-
-
-## Liste d'écouteurs
-
-le composant écoutes globalement les émetteurs ci-dessous attachés au `$bus`
-
-::: details <b>set-comp-status</b>
-
-Utilisé pour définir le status d'un composant. Un composant peut ainsi émettre son état en indicant s'il est prêt ou non. `AppBase` mettra à jour global de application selon les états des composants. 
-
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| name | \{String\} | `` | `(éditable)`nom du composant qui émet. |
-| status | \{String\} | `[loading\|ready]` | `(éditable)` status à communiquer|
-| updateTracker | \{Function\} | `name, status` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
-| compStatusTracker | \{Array\} | `[]` | `(non-éditable)` Ce paramettre est mis à jour dans le `store`. |
-
-- Exemple
-
-```js
-// Le composant toto indique sont status de loading
-this.$bus.$emit('set-comp-status', 'comp_toto', 'loading')
-// AppBase met ajour le status du tracker dans le store 
-// AppBase met le status de toute l'application à LOADING
-
-//Deux minutes plus tard composant toto indique qu'il est prêt
-setTimeout(()=>this.$bus.$emit('set-comp-status', 'comp_toto', 'ready'), 2000)
-// AppBase met ajour le status du tracker dans le store 
-// AppBase met le status de toute l'application à READY 
-```
- ::: tip Note
-  l'Application passe seulement à l'état `ready` quand TOUS les composants qui émettent cet événement sont en status `ready`.
-
-
-:::
-
-
-
-
-::: details <b>reset-userdata</b>
-
-Utilisé pour reinitialiser la progression de utilisateur
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| resetUserData | \{Function\} |  | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
-
-
-- Exemple
-
-```js
-// Le composant toto demande de rénitialiser la progression
-this.$bus.$emit('reset-userdata')
-// AppBase réinitalise la progression
-```
-:::
-
-::: details <b>fire-exit-event</b>
-
-Cet  évènement  utilisé pour signaler la fermeture de l'application dans le navigateur.
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| cb | \{Function\} | `` | `(éditable, optionnel)`fonction à executer après la réalisation de l'événement |
-| option | \{Boolean\} | `[true\|false]` | `(éditable)` indique si la fonction associée doit utiliser l'API Fecth ou pas|
-| endLesson | \{Function\} | `cb, option` | `(non-éditable)` Cette fonction est executée par application lorsque évènement est réçu|
-
-- Exemple
-
-```js
- // Le composant AppBaseModule annonce la fermeture de application en cour avant de lancer une autre leçon.
-this.$bus.$emit('fire-exit-event', () => {
-  window.location.replace(newUrlToLaunch)// newUrlToLaunch est url dans le LRS vers la prochaine ressource à initializer 
-}) 
-// AppBase exécute la fermeture de l'application
-
-```
-
-:::
-
-::: details <b>move-to-target</b>
-
-Utilisé pour signaler le déplacement (skip) vers un élément du DOM
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| target | \{String\} | `` | `(éditable, requis)`Attribut ID de l'élément HTML vers quel va se faire le deplacement |
-| opt | \{Object\} | `{ top, left, behavior}` | `(éditable, optionnel)` paramettre de scroll|
-| moveTo | \{Function\} | `target, opt` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
-
-- Exemple
-
-```js
-// Le composant toto demande de scroller vers une DIV avec ID main
-this.$bus.$emit('move-to-target', 'main')
-// AppBase déplace le contenu de l'écran vers la DIV main
-```
-:::
-
-::: details <b>send-xapi-statement</b>
-
-Utilisé pour demander l'envoi d'un nouveau statement vers le LRS
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| stmt | \{Object\} | `` | `(éditable, requis)` objet statement à envoyer au LRS|
-| cb | \{Function\} | `[loading\|ready]` | `(éditable)` fonction à executer après la réalisation de l'envoi|
-| withFetch | \{Boolean\} | `[true\|false]` | `(éditable)`Defini si l'API Fetch doit être utilisé ou non|
-| sendXapiStatements | \{Function\} | `stmt, cb, withFetch` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
-
-- Exemple
-
-```js
- // Le composant toto demande l'envoi d'un statement
- let stmt = {...} // ceci est un statement abstrait (voir la spécification xAPI pour la definition de statement)
- this.$bus.$emit('send-xapi-statement', stmt)
-//  AppBase met ajour le status du tracker dans le store 
-//  AppBase envoie le statement vers le LRS 
-```
-:::
-
-::: details <b>reset-focus-on</b>
-
-Force le focus sur un element dans application
-
-| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
-|----|----|----|---------|
-| e | \{Objet\} | `` | `(éditable,requis)` l'HTMLElement qui doit recevoir le focus |
-| resetFocus | \{Function\} | `e` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
-
-- Exemple
-
-```js
-// Le composant toto demande le focus sur une DIV main
-let main = document.querySelector('#main')
-this.$bus.$emit('reset-focus-on', main)
-// AppBase force le focus sur main
-```
-:::
-
-<!-- - __`set-comp-status`__ `(loading | ready)`: utiliser pour setter l'etat d'un composant this.updateTracker
-- `send-xapi-statement`, this.onSendXapiStatement
-- `reset-userdata`, this.resetUserData
-- `fire-exit-event`, this.endLesson
-- `move-to-target`, this.skipToMain
-- `reset-focus-on`, this.resetFocus -->
-
-
-
-
-## Style
-
-`.app-page`[class]
-
-Aucune manipulation requise.
-
-
-
-## Accessibilité
-Aucune manipulation requise.
-
+# Base App
+
+
+
+## Aperçu
+
+Composant racine pour utilisation de la librairie.  
+
+## Référence du composant
+
+**AppBase** `<app-base/>` 
+
+## Comportement
+
+Ce composant reçoit les premières données de configuration pour la création de application. Les données sont fournie au composant sous forme de props. Il valide le type certaines des données fournie et fait afficher un message d'erreur à lécran et dans la console du navigateur, lorsque des erreurs sont détectées. Une fois les données validées, le composant les transmet au Store de application.
+
+Le composants est également en charge de faire la communication avec le serveur et les autres module de stockage. Il gère la recuperation et la mise à jours des données de progression dans l'application.
+
+
+
+::: tip Note
+Le composant rendra l'application inutilisable Lorsque des erreurs de configuration seront détéctée.
+Prêtez attention au message(s) affiché(s) par le composant dans la console du navigateur et l'application. Cela vous permettra de savoir ce qui doit être corrigé.
+:::
+
+## Paramètres
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description &nbsp;&nbsp;&nbsp;  | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| appConfig | Object | Récoit les données de configuration de application | Doit contenir au minimum les valeurs suivantes: `{lang(String), specification(String), id(String), crs_id(String), idb_id(String), no_menu(Boolean), is_single_activity(Boolean), auto_next_activity(Boolean) }`.   Valeur Optionnelles: `{remote(Boolean), actor (Oject), linkedResource(Object) }`.   Référez-vous à la section ci dessous pour plus de details|
+
+### Exemple
+
+Voici ci dessous un exemple d'utilisation du composant dans une application 
+
+
+```vue 
+<!--App.vue-->
+<template>
+  <app-base :app-config="$data">
+</template>
+<script>
+export default {
+  data() {
+    return {
+      lang: 'fr', // Set Language for the Activities and App French (fr)| English(en)
+      specification: 'xapi', // connection specification (xapi|scorm)
+      id: 'v2', // This activity ID
+      crs_id: 'template_fcad_dragon', //The Group ID this activity is part of.
+      idb_id: '$template_fcad_dragon', // This activity ID in LocalDB. Only when APP is not remote.
+      no_menu: false, // Set permission to view and navigate to SUMMARY VIEW (true|false) -default :false; (CAN BE REMOVED)
+      is_single_activity: false, //set app as a single activity ( ex:Introduction | Conclusion | Prep_devoir)(true|false) - default:false; (CAN BE REMOVED)
+      auto_next_activity: true, // set Previous/Next can allow navigation between activities. Set false if do not want navigation between activities with Previous/Next button (true|false) - default:true
+      // remote: false, // Force App to access server remotely while in production mode (true|false) - default:false, (CAN BE REMOVED)
+      actor: {
+        name: 'Luke Skywalker',
+        mbox: 'mailto:skywalker2@mymailbox.com'
+      }
+    }
+  }
+}
+</script>
+```
+
+
+
+### Paramètres Pour AppConfig 
+
+<h3>⚙️<b>actor</b></h3> 
+Défini l'agent pour l'envoi des statements xAPI
+
+- **Type:** `Object`
+- **Usage:** `Optionel` 
+- **Valeur(s):** 
+  - `name (String)`- nom de agent
+  - `mbox(String)`- l'email de l'agent. Doit commencer par <i>mailto:</i>  
+
+<h3>⚙️<b>auto_next_activity</b></h3>  
+Défini si la navigation est permise entre activité. Doit être mis à `false` si on ne veut pas de navigation entre les activités avec les boutons de navigation Précedent/Suivant button.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `true|false` valeur par defaut est `true`
+
+<h3>⚙️<b>crs_id</b></h3>  
+Défini l'identification du group auquel doit faire partie l'activité (l'application).
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** Sans Objet. Doit être défini.
+
+<h3>⚙️<b>id</b></h3> 
+Défini l'identification de l'application. Doit être unique pour éviter toute corruption de données.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):**  Sans Objet. Doit être défini.
+
+
+<h3>⚙️<b>idb_id</b></h3> 
+Défini l'identification pour l'environement de stockage local (indexDB).  Doit être unique pour eviter toute corruption de données.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):**  Sans Objet. Doit être défini.
+
+<h3>⚙️<b>is_single_activity</b></h3>  
+Configure l'application pour être traité comme étant une activité independante.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `true|false` valeur par defaut est `false`
+
+
+<h3>⚙️<b>no_menu</b></h3>  
+Défini si le menu (sommaire) de l'application doit être accessible où non.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[true|false]` valeur par defaut est `false`. Mettre à `true` si la page sommaire ne doit pas être accessible
+
+<h3>⚙️<b>lang</b></h3>  
+Défini la langue dans la quelle sera presenté l'application.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
+
+<h3>⚙️<b>specification</b></h3>  
+Défini la norme de specification à utiliser par l'application pour la gestion des données (xAPI ou Scorm).
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
+
+
+#### TYPE_QUESTION
+
+**Type:** `String` _(choix_mult | choix_unique | dropdown | reponse_ouverte | texte_tableau | texte_troue | texte_troue_select)__
+
+**Usage:** Obligatoire.  
+Définie le type de question.
+
+### Slots
+`content`[named-slot] - permet de recevoir tout le contenu HTML à afficher.
+
+
+## Liste d'écouteurs
+
+le composant écoutes globalement les émetteurs ci-dessous attachés au `$bus`
+
+::: details <b>set-comp-status</b>
+
+Utilisé pour définir le status d'un composant. Un composant peut ainsi émettre son état en indicant s'il est prêt ou non. `AppBase` mettra à jour global de application selon les états des composants. 
+
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| name | \{String\} | `` | `(éditable)`nom du composant qui émet. |
+| status | \{String\} | `[loading\|ready]` | `(éditable)` status à communiquer|
+| updateTracker | \{Function\} | `name, status` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+| compStatusTracker | \{Array\} | `[]` | `(non-éditable)` Ce paramettre est mis à jour dans le `store`. |
+
+- Exemple
+
+```js
+// Le composant toto indique sont status de loading
+this.$bus.$emit('set-comp-status', 'comp_toto', 'loading')
+// AppBase met ajour le status du tracker dans le store 
+// AppBase met le status de toute l'application à LOADING
+
+//Deux minutes plus tard composant toto indique qu'il est prêt
+setTimeout(()=>this.$bus.$emit('set-comp-status', 'comp_toto', 'ready'), 2000)
+// AppBase met ajour le status du tracker dans le store 
+// AppBase met le status de toute l'application à READY 
+```
+ ::: tip Note
+  l'Application passe seulement à l'état `ready` quand TOUS les composants qui émettent cet événement sont en status `ready`.
+
+
+:::
+
+
+
+
+::: details <b>reset-userdata</b>
+
+Utilisé pour reinitialiser la progression de utilisateur
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| resetUserData | \{Function\} |  | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+
+- Exemple
+
+```js
+// Le composant toto demande de rénitialiser la progression
+this.$bus.$emit('reset-userdata')
+// AppBase réinitalise la progression
+```
+:::
+
+::: details <b>fire-exit-event</b>
+
+Cet  évènement  utilisé pour signaler la fermeture de l'application dans le navigateur.
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| cb | \{Function\} | `` | `(éditable, optionnel)`fonction à executer après la réalisation de l'événement |
+| option | \{Boolean\} | `[true\|false]` | `(éditable)` indique si la fonction associée doit utiliser l'API Fecth ou pas|
+| endLesson | \{Function\} | `cb, option` | `(non-éditable)` Cette fonction est executée par application lorsque évènement est réçu|
+
+- Exemple
+
+```js
+ // Le composant AppBaseModule annonce la fermeture de application en cour avant de lancer une autre leçon.
+this.$bus.$emit('fire-exit-event', () => {
+  window.location.replace(newUrlToLaunch)// newUrlToLaunch est url dans le LRS vers la prochaine ressource à initializer 
+}) 
+// AppBase exécute la fermeture de l'application
+
+```
+
+:::
+
+::: details <b>move-to-target</b>
+
+Utilisé pour signaler le déplacement (skip) vers un élément du DOM
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| target | \{String\} | `` | `(éditable, requis)`Attribut ID de l'élément HTML vers quel va se faire le deplacement |
+| opt | \{Object\} | `{ top, left, behavior}` | `(éditable, optionnel)` paramettre de scroll|
+| moveTo | \{Function\} | `target, opt` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+// Le composant toto demande de scroller vers une DIV avec ID main
+this.$bus.$emit('move-to-target', 'main')
+// AppBase déplace le contenu de l'écran vers la DIV main
+```
+:::
+
+::: details <b>send-xapi-statement</b>
+
+Utilisé pour demander l'envoi d'un nouveau statement vers le LRS
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| stmt | \{Object\} | `` | `(éditable, requis)` objet statement à envoyer au LRS|
+| cb | \{Function\} | `[loading\|ready]` | `(éditable)` fonction à executer après la réalisation de l'envoi|
+| withFetch | \{Boolean\} | `[true\|false]` | `(éditable)`Defini si l'API Fetch doit être utilisé ou non|
+| sendXapiStatements | \{Function\} | `stmt, cb, withFetch` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+ // Le composant toto demande l'envoi d'un statement
+ let stmt = {...} // ceci est un statement abstrait (voir la spécification xAPI pour la definition de statement)
+ this.$bus.$emit('send-xapi-statement', stmt)
+//  AppBase met ajour le status du tracker dans le store 
+//  AppBase envoie le statement vers le LRS 
+```
+:::
+
+::: details <b>reset-focus-on</b>
+
+Force le focus sur un element dans application
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| e | \{Objet\} | `` | `(éditable,requis)` l'HTMLElement qui doit recevoir le focus |
+| resetFocus | \{Function\} | `e` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+// Le composant toto demande le focus sur une DIV main
+let main = document.querySelector('#main')
+this.$bus.$emit('reset-focus-on', main)
+// AppBase force le focus sur main
+```
+:::
+
+<!-- - __`set-comp-status`__ `(loading | ready)`: utiliser pour setter l'etat d'un composant this.updateTracker
+- `send-xapi-statement`, this.onSendXapiStatement
+- `reset-userdata`, this.resetUserData
+- `fire-exit-event`, this.endLesson
+- `move-to-target`, this.skipToMain
+- `reset-focus-on`, this.resetFocus -->
+
+
+
+
+## Style
+
+`.app-page`[class]
+
+Aucune manipulation requise.
+
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants_critiques/main.md

@@ -1,15 +1,15 @@
-# Main
-Fichier de configuration qui sert de point entrée principal de la librairie FCAD
-
-## Aperçu/ Utilité
-
-- Enregistement global des plugins 
-- Enregistrement global des composants
-- Création de stogage local
-- Configuration de connection au serveur
-- Configuration de l'application
-
-::: warning  Important
-  Lorsque vous créez un nouveau `composant global`, engegistrez le dans ce fichier.
-:::
-
+# Main
+Fichier de configuration qui sert de point entrée principal de la librairie FCAD
+
+## Aperçu/ Utilité
+
+- Enregistement global des plugins 
+- Enregistrement global des composants
+- Création de stogage local
+- Configuration de connection au serveur
+- Configuration de l'application
+
+::: warning  Important
+  Lorsque vous créez un nouveau `composant global`, engegistrez le dans ce fichier.
+:::
+