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

package/documentation/.vitepress/config.js

@@ -1,114 +1,114 @@
-import { defineConfig } from 'vitepress'
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-  title: 'FCAD 2',
-  description: 'La documentation technique du FCAD 2',
-  ignoreDeadLinks: true,
-  themeConfig: {
-    /* il8n */
-    lang: 'fr-CA',
-    outline: {
-      label: 'Contenu de la page'
-    },
-    docFooter: {
-      prev: 'Page précédente',
-      next: 'Page suivante'
-    },
-    darkModeSwitchTitle : 'Activer le thème sombre',
-    lightModeSwitchTitle : 'Activer le thème clair',
-    lastUpdated: {
-      text: 'Dernière modification ',
-      formatOptions: {
-        dateStyle: 'short',
-        timeStyle: 'short'
-      }
-    },
-    search: {
-      provider: 'local',
-      options:{
-        locales: {
-          root: {
-            translations: {
-              button: {
-                buttonText: 'Recherche',
-                buttonAriaLabel: 'Recherche'
-              },
-              modal: {
-                displayDetails: 'Afficher la vue détaillée',
-                resetButtonTitle: 'Réinitialiser',
-                backButtonTitle: 'Retour',
-                noResultsText: 'Aucun résultat trouvé pour',
-                footer: {
-                  selectText: 'accéder à la page',
-                  navigateText: 'parcourir les résultats',
-                  closeText: 'quitter la recherche',
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    /* END - il8n */
-
-    nav: [
-      { text: 'Accueil', link: '/' },
-      { text: 'Démarrage', link: '/demarrage' },
-      { text: 'Composants', link: '/composants' },
-      { text: 'Déploiement', link: '/deploiement' },
-      // { text: 'Examples', link: '/markdown-examples' }
-    ],
-    sidebar: [
-      { text: 'Composants critiques',
-        collapsed: true,
-        items: [
-          { text: 'app-base', link: '/composants_critiques/app-base' },
-          { text: 'app-base-module', link: '/composants_critiques/app-base-module' },
-          { text: 'app-base-page', link: '/composants_critiques/app-base-page' },
-          { text: 'main', link: '/composants_critiques/main' },
-        ]
-      },
-      {
-        text: 'Tous les composants',
-        collapsed: true,
-        items: [
-          { text: 'app-base-button', link: '/composants/app-base-button' },
-          { text: 'app-base-error-display', link: '/composants/app-base-error-display' },
-          { text: 'app-base-popover', link: '/composants/app-base-popover' },
-          { text: 'app-comp-audio', link: '/composants/app-comp-audio' },
-          { text: 'app-comp-branch-buttons', link: '/composants/app-comp-branch-buttons' },
-          { text: 'app-comp-button-progress', link: '/composants/app-comp-button-progress' },
-          { text: 'app-comp-carousel', link: '/composants/app-comp-carousel' },
-          { text: 'app-comp-container', link: '/composants/app-comp-container' },
-          { text: 'app-comp-input-checkbox-next', link: '/composants/app-comp-input-checkbox-next' },
-          { text: 'app-comp-input-dropdown-next', link: '/composants/app-comp-input-dropdown-next' },
-          { text: 'app-comp-input-radio-next', link: '/composants/app-comp-input-radio-next' },
-          { text: 'app-comp-input-text-next', link: '/composants/app-comp-input-text-next' },
-          { text: 'app-comp-input-text-table-next', link: '/composants/app-comp-input-text-table-next' },
-          { text: 'app-comp-input-text-to-fill-dropdown-next', link: '/composants/app-comp-input-text-to-fill-dropdown-next' },
-          { text: 'app-comp-input-text-to-fill-next', link: '/composants/app-comp-input-text-to-fill-next' },
-          { text: 'app-comp-jauge', link: '/composants/app-comp-jauge' },
-          { text: 'app-comp-menu', link: '/composants/app-comp-menu' },
-          { text: 'app-comp-menu-item', link: '/composants/app-comp-menu-item' },
-          { text: 'app-comp-navigation', link: '/composants/app-comp-navigation' },
-          { text: 'app-comp-note-call', link: '/composants/app-comp-note-call' },
-          { text: 'app-comp-note-credit', link: '/composants/app-comp-note-credit' },
-          { text: 'app-comp-play-bar-next', link: '/composants/app-comp-play-bar-next' },
-          { text: 'app-comp-play-bar-progress', link: '/composants/app-comp-play-bar-progress' },
-          { text: 'app-comp-pop-up-next', link: '/composants/app-comp-pop-up-next' },
-          { text: 'app-comp-quiz-next', link: '/composants/app-comp-quiz-next' },
-          { text: 'app-comp-quiz-recall', link: '/composants/app-comp-quiz-recall' },
-          // { text: 'app-comp-settings-menu', link: '/composants/app-comp-settings-menu' },
-          { text: 'app-comp-svg-next', link: '/composants/app-comp-svg-next' },
-          { text: 'app-comp-table-of-content', link: '/composants/app-comp-table-of-content' },
-          { text: 'app-comp-video-player', link: '/composants/app-comp-video-player' },
-        ]
-      }
-    ],
-
-    socialLinks: [
-      { icon: 'gitlab', link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2' }
-    ]
-  }
-})
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'FCAD 2',
+  description: 'La documentation technique du FCAD 2',
+  ignoreDeadLinks: true,
+  themeConfig: {
+    /* il8n */
+    lang: 'fr-CA',
+    outline: {
+      label: 'Contenu de la page'
+    },
+    docFooter: {
+      prev: 'Page précédente',
+      next: 'Page suivante'
+    },
+    darkModeSwitchTitle : 'Activer le thème sombre',
+    lightModeSwitchTitle : 'Activer le thème clair',
+    lastUpdated: {
+      text: 'Dernière modification ',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    },
+    search: {
+      provider: 'local',
+      options:{
+        locales: {
+          root: {
+            translations: {
+              button: {
+                buttonText: 'Recherche',
+                buttonAriaLabel: 'Recherche'
+              },
+              modal: {
+                displayDetails: 'Afficher la vue détaillée',
+                resetButtonTitle: 'Réinitialiser',
+                backButtonTitle: 'Retour',
+                noResultsText: 'Aucun résultat trouvé pour',
+                footer: {
+                  selectText: 'accéder à la page',
+                  navigateText: 'parcourir les résultats',
+                  closeText: 'quitter la recherche',
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    /* END - il8n */
+
+    nav: [
+      { text: 'Accueil', link: '/' },
+      { text: 'Démarrage', link: '/demarrage' },
+      { text: 'Composants', link: '/composants' },
+      { text: 'Déploiement', link: '/deploiement' },
+      // { text: 'Examples', link: '/markdown-examples' }
+    ],
+    sidebar: [
+      { text: 'Composants critiques',
+        collapsed: true,
+        items: [
+          { text: 'app-base', link: '/composants_critiques/app-base' },
+          { text: 'app-base-module', link: '/composants_critiques/app-base-module' },
+          { text: 'app-base-page', link: '/composants_critiques/app-base-page' },
+          { text: 'main', link: '/composants_critiques/main' },
+        ]
+      },
+      {
+        text: 'Tous les composants',
+        collapsed: true,
+        items: [
+          { text: 'app-base-button', link: '/composants/app-base-button' },
+          { text: 'app-base-error-display', link: '/composants/app-base-error-display' },
+          { text: 'app-base-popover', link: '/composants/app-base-popover' },
+          { text: 'app-comp-audio', link: '/composants/app-comp-audio' },
+          { text: 'app-comp-branch-buttons', link: '/composants/app-comp-branch-buttons' },
+          { text: 'app-comp-button-progress', link: '/composants/app-comp-button-progress' },
+          { text: 'app-comp-carousel', link: '/composants/app-comp-carousel' },
+          { text: 'app-comp-container', link: '/composants/app-comp-container' },
+          { text: 'app-comp-input-checkbox-next', link: '/composants/app-comp-input-checkbox-next' },
+          { text: 'app-comp-input-dropdown-next', link: '/composants/app-comp-input-dropdown-next' },
+          { text: 'app-comp-input-radio-next', link: '/composants/app-comp-input-radio-next' },
+          { text: 'app-comp-input-text-next', link: '/composants/app-comp-input-text-next' },
+          { text: 'app-comp-input-text-table-next', link: '/composants/app-comp-input-text-table-next' },
+          { text: 'app-comp-input-text-to-fill-dropdown-next', link: '/composants/app-comp-input-text-to-fill-dropdown-next' },
+          { text: 'app-comp-input-text-to-fill-next', link: '/composants/app-comp-input-text-to-fill-next' },
+          { text: 'app-comp-jauge', link: '/composants/app-comp-jauge' },
+          { text: 'app-comp-menu', link: '/composants/app-comp-menu' },
+          { text: 'app-comp-menu-item', link: '/composants/app-comp-menu-item' },
+          { text: 'app-comp-navigation', link: '/composants/app-comp-navigation' },
+          { text: 'app-comp-note-call', link: '/composants/app-comp-note-call' },
+          { text: 'app-comp-note-credit', link: '/composants/app-comp-note-credit' },
+          { text: 'app-comp-play-bar-next', link: '/composants/app-comp-play-bar-next' },
+          { text: 'app-comp-play-bar-progress', link: '/composants/app-comp-play-bar-progress' },
+          { text: 'app-comp-pop-up-next', link: '/composants/app-comp-pop-up-next' },
+          { text: 'app-comp-quiz-next', link: '/composants/app-comp-quiz-next' },
+          { text: 'app-comp-quiz-recall', link: '/composants/app-comp-quiz-recall' },
+          // { text: 'app-comp-settings-menu', link: '/composants/app-comp-settings-menu' },
+          { text: 'app-comp-svg-next', link: '/composants/app-comp-svg-next' },
+          { text: 'app-comp-table-of-content', link: '/composants/app-comp-table-of-content' },
+          { text: 'app-comp-video-player', link: '/composants/app-comp-video-player' },
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'gitlab', link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2' }
+    ]
+  }
+})

package/documentation/api-examples.md

@@ -1,49 +1,49 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

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

@@ -1,58 +1,58 @@
-# Bouton de base
-
-Pour tous les boutons dans votre application, utiliser le bouton du FCAD. 
-
-
-
-## Aperçu
-
-Le FCAD génère un bouton à l'appel de la balise `<app-base-button/>`. Vous pouvez lui appliquer le style désiré en lui ajoutant une classe et/ou un *id*. Permet d'exécuter toute **Fonction** qui lui sera associée.
-
-## Référence du composant
-
-**AppBaseButton** 
-`<app-base-button/>`
-
-## Comportement
-
-De base le composant s'attend à exécuter une fonction. Il déclenche toutes les actions associées et émet l'évènement `click` (écoutable dans toute l'application). L'élément qui a été cliqué est aussi retourné en référence. Au clique, le bouton ajoute ou retire la classe `isClick` (qui peut servir pour créer un effet de toggle).  
-
-::: danger 👁️ Attention!
-
-Le bouton ne réagit pas au hover. Le bouton retourne l'information qu'au clique. Si vous développez un composant réactif au hover. Prenez cette information en compte 
-
-:::
-
-::: tip 💡 Note 
-Lorsque vous utilisez le bouton dans le développement d'un composant, pensez à rajouter son libellé au dictionnaire.
-:::
-
-## Paramètre 
-
-Voici les éléments paramétrables du bouton.
-
-| Propriété | Type             | Description                                                                                                                        | valeur par défaut | modifiable | 
-|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
-| name | Props type String | Nom du bouton pour les lecteurs d'écran ce label est fourni par le dictionnaire de l'application et devrait être le même que le label du bouton |   Si vide : Bouton   | oui |
-| type | String | Type d'élément html |  button  | non |
-| class | String | Toutes les classes par défaut du bouton. Si vous désirez en ajouter, ajoutez les lors de l'appelle du composant |  btn  | non |
-| :class | Object | Classe réactive selon les actions demandées |  isClick  | non |
-| :disabled | Props type boolean | Donne état **disabled** au bouton. Utiliser pour désactiver le bouton. Attribut important pour les lecteurs d'écran. |  false  | non |
-| @click | function | Fonction qui émet le clique et retourne l'élément cliqué |  click  | non |
-
-### Évènements
-
-`click`: Événement native émit lorsqu’un bouton actif est cliqué. Retourne l'élément cliqué en référence.
-
-`focus`: Événement native émit lorsqu’un bouton actif est en focus. Retourne l'élément en référence.
-
-## Style
-
-`.btn`[class]
-
-  Par défaut, le composant n'a que la classe `btn`, qui sert à tous les boutons de base de l'application. L'ajout de classe et *id* pour modifier son style devront être ajouter à l'appelle du composant. 
-
-## Accessibilité
-
-Le bouton de base vient avec un niveau d'accessibilité de base. Lors de son usage utilisez ces [paramètres](#parametre) pour respecter le critère du WCAG. 
-
+# Bouton de base
+
+Pour tous les boutons dans votre application, utiliser le bouton du FCAD. 
+
+
+
+## Aperçu
+
+Le FCAD génère un bouton à l'appel de la balise `<app-base-button/>`. Vous pouvez lui appliquer le style désiré en lui ajoutant une classe et/ou un *id*. Permet d'exécuter toute **Fonction** qui lui sera associée.
+
+## Référence du composant
+
+**AppBaseButton** 
+`<app-base-button/>`
+
+## Comportement
+
+De base le composant s'attend à exécuter une fonction. Il déclenche toutes les actions associées et émet l'évènement `click` (écoutable dans toute l'application). L'élément qui a été cliqué est aussi retourné en référence. Au clique, le bouton ajoute ou retire la classe `isClick` (qui peut servir pour créer un effet de toggle).  
+
+::: danger 👁️ Attention!
+
+Le bouton ne réagit pas au hover. Le bouton retourne l'information qu'au clique. Si vous développez un composant réactif au hover. Prenez cette information en compte 
+
+:::
+
+::: tip 💡 Note 
+Lorsque vous utilisez le bouton dans le développement d'un composant, pensez à rajouter son libellé au dictionnaire.
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrables du bouton.
+
+| Propriété | Type             | Description                                                                                                                        | valeur par défaut | modifiable | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| name | Props type String | Nom du bouton pour les lecteurs d'écran ce label est fourni par le dictionnaire de l'application et devrait être le même que le label du bouton |   Si vide : Bouton   | oui |
+| type | String | Type d'élément html |  button  | non |
+| class | String | Toutes les classes par défaut du bouton. Si vous désirez en ajouter, ajoutez les lors de l'appelle du composant |  btn  | non |
+| :class | Object | Classe réactive selon les actions demandées |  isClick  | non |
+| :disabled | Props type boolean | Donne état **disabled** au bouton. Utiliser pour désactiver le bouton. Attribut important pour les lecteurs d'écran. |  false  | non |
+| @click | function | Fonction qui émet le clique et retourne l'élément cliqué |  click  | non |
+
+### Évènements
+
+`click`: Événement native émit lorsqu’un bouton actif est cliqué. Retourne l'élément cliqué en référence.
+
+`focus`: Événement native émit lorsqu’un bouton actif est en focus. Retourne l'élément en référence.
+
+## Style
+
+`.btn`[class]
+
+  Par défaut, le composant n'a que la classe `btn`, qui sert à tous les boutons de base de l'application. L'ajout de classe et *id* pour modifier son style devront être ajouter à l'appelle du composant. 
+
+## Accessibilité
+
+Le bouton de base vient avec un niveau d'accessibilité de base. Lors de son usage utilisez ces [paramètres](#parametre) pour respecter le critère du WCAG. 
+

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.  
+