fcad-core-dragon 2.1.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/.editorconfig +7 -7
  2. package/.gitlab-ci.yml +124 -0
  3. package/.prettierrc +11 -11
  4. package/.vscode/extensions.json +8 -8
  5. package/.vscode/settings.json +46 -16
  6. package/CHANGELOG +520 -520
  7. package/README.md +57 -57
  8. package/documentation/.vitepress/config.js +114 -114
  9. package/documentation/api-examples.md +49 -49
  10. package/documentation/composants/app-base-button.md +58 -58
  11. package/documentation/composants/app-base-error-display.md +59 -59
  12. package/documentation/composants/app-base-popover.md +68 -68
  13. package/documentation/composants/app-comp-audio.md +75 -75
  14. package/documentation/composants/app-comp-branch-buttons.md +111 -111
  15. package/documentation/composants/app-comp-button-progress.md +53 -53
  16. package/documentation/composants/app-comp-carousel.md +53 -53
  17. package/documentation/composants/app-comp-container.md +53 -53
  18. package/documentation/composants/app-comp-input-checkbox-next.md +42 -42
  19. package/documentation/composants/app-comp-input-dropdown-next.md +34 -34
  20. package/documentation/composants/app-comp-input-radio-next.md +39 -39
  21. package/documentation/composants/app-comp-input-text-next.md +35 -35
  22. package/documentation/composants/app-comp-input-text-table-next.md +34 -34
  23. package/documentation/composants/app-comp-input-text-to-fill-dropdown-next.md +53 -53
  24. package/documentation/composants/app-comp-input-text-to-fill-next.md +31 -31
  25. package/documentation/composants/app-comp-jauge.md +31 -31
  26. package/documentation/composants/app-comp-menu-item.md +55 -55
  27. package/documentation/composants/app-comp-menu.md +29 -29
  28. package/documentation/composants/app-comp-navigation.md +41 -41
  29. package/documentation/composants/app-comp-note-call.md +53 -53
  30. package/documentation/composants/app-comp-note-credit.md +53 -53
  31. package/documentation/composants/app-comp-play-bar-next.md +53 -53
  32. package/documentation/composants/app-comp-pop-up-next.md +93 -93
  33. package/documentation/composants/app-comp-quiz-next.md +235 -235
  34. package/documentation/composants/app-comp-quiz-recall.md +53 -53
  35. package/documentation/composants/app-comp-svg-next.md +53 -53
  36. package/documentation/composants/app-comp-table-of-content.md +50 -50
  37. package/documentation/composants/app-comp-video-player.md +82 -82
  38. package/documentation/composants.md +46 -46
  39. package/documentation/composants_critiques/ModelPageComposant.md +53 -53
  40. package/documentation/composants_critiques/app-base-module.md +43 -43
  41. package/documentation/composants_critiques/app-base-page.md +48 -48
  42. package/documentation/composants_critiques/app-base.md +311 -311
  43. package/documentation/composants_critiques/main.md +15 -15
  44. package/documentation/demarrage.md +50 -50
  45. package/documentation/deploiement.md +57 -57
  46. package/documentation/index.md +33 -33
  47. package/documentation/markdown-examples.md +85 -85
  48. package/documentation/public/vite.svg +14 -14
  49. package/documentation/public/vuejs.svg +1 -1
  50. package/documentation/public/vuetify.svg +5 -5
  51. package/eslint.config.js +60 -60
  52. package/junit-report.xml +182 -0
  53. package/package.json +66 -59
  54. package/playwright/index.html +12 -0
  55. package/playwright/index.js +21 -0
  56. package/playwright-ct.config.js +95 -0
  57. package/src/$locales/en.json +157 -157
  58. package/src/$locales/fr.json +120 -120
  59. package/src/assets/data/onboardingMessages.json +47 -47
  60. package/src/components/AppBase.vue +1171 -1169
  61. package/src/components/AppBaseButton.vue +90 -95
  62. package/src/components/AppBaseErrorDisplay.vue +438 -438
  63. package/src/components/AppBaseFlipCard.vue +84 -84
  64. package/src/components/AppBaseModule.vue +1639 -1634
  65. package/src/components/AppBasePage.vue +867 -866
  66. package/src/components/AppBasePopover.vue +41 -41
  67. package/src/components/AppBaseSkeleton.vue +66 -66
  68. package/src/components/AppCompAudio.vue +261 -256
  69. package/src/components/AppCompBranchButtons.vue +508 -508
  70. package/src/components/AppCompButtonProgress.vue +137 -132
  71. package/src/components/AppCompCarousel.vue +342 -336
  72. package/src/components/AppCompContainer.vue +29 -29
  73. package/src/components/AppCompInputCheckBoxNx.vue +325 -323
  74. package/src/components/AppCompInputDropdownNx.vue +302 -299
  75. package/src/components/AppCompInputRadioNx.vue +287 -284
  76. package/src/components/AppCompInputTextNx.vue +156 -153
  77. package/src/components/AppCompInputTextTableNx.vue +205 -202
  78. package/src/components/AppCompInputTextToFillDropdownNx.vue +343 -340
  79. package/src/components/AppCompInputTextToFillNx.vue +316 -313
  80. package/src/components/AppCompJauge.vue +81 -81
  81. package/src/components/AppCompMenu.vue +6 -1
  82. package/src/components/AppCompMenuItem.vue +246 -240
  83. package/src/components/AppCompNavigation.vue +977 -972
  84. package/src/components/AppCompNoteCall.vue +167 -161
  85. package/src/components/AppCompNoteCredit.vue +496 -491
  86. package/src/components/AppCompPlayBarNext.vue +2290 -2288
  87. package/src/components/AppCompPopUpNext.vue +508 -504
  88. package/src/components/AppCompQuizNext.vue +515 -510
  89. package/src/components/AppCompQuizRecall.vue +355 -350
  90. package/src/components/AppCompSVGNext.vue +346 -346
  91. package/src/components/AppCompSettingsMenu.vue +177 -172
  92. package/src/components/AppCompTableOfContent.vue +433 -427
  93. package/src/components/AppCompVideoPlayer.vue +377 -377
  94. package/src/components/AppCompViewDisplay.vue +6 -6
  95. package/src/components/BaseModule.vue +55 -55
  96. package/src/composables/useIdleDetector.js +56 -56
  97. package/src/composables/useQuiz.js +89 -89
  98. package/src/composables/useTimer.js +172 -172
  99. package/src/directives/nvdaFix.js +53 -53
  100. package/src/externalComps/ModuleView.vue +22 -22
  101. package/src/externalComps/SummaryView.vue +91 -91
  102. package/src/main.js +493 -476
  103. package/src/module/stores/appStore.js +960 -947
  104. package/src/module/xapi/ADL.js +520 -520
  105. package/src/module/xapi/Crypto/Hasher.js +241 -241
  106. package/src/module/xapi/Crypto/WordArray.js +278 -278
  107. package/src/module/xapi/Crypto/algorithms/BufferedBlockAlgorithm.js +103 -103
  108. package/src/module/xapi/Crypto/algorithms/C_algo.js +315 -315
  109. package/src/module/xapi/Crypto/algorithms/HMAC.js +9 -9
  110. package/src/module/xapi/Crypto/algorithms/SHA1.js +9 -9
  111. package/src/module/xapi/Crypto/encoders/Base.js +105 -105
  112. package/src/module/xapi/Crypto/encoders/Base64.js +99 -99
  113. package/src/module/xapi/Crypto/encoders/Hex.js +61 -61
  114. package/src/module/xapi/Crypto/encoders/Latin1.js +61 -61
  115. package/src/module/xapi/Crypto/encoders/Utf8.js +45 -45
  116. package/src/module/xapi/Crypto/index.js +53 -53
  117. package/src/module/xapi/Statement/activity.js +47 -47
  118. package/src/module/xapi/Statement/agent.js +55 -55
  119. package/src/module/xapi/Statement/group.js +26 -26
  120. package/src/module/xapi/Statement/index.js +259 -259
  121. package/src/module/xapi/Statement/statement.js +253 -253
  122. package/src/module/xapi/Statement/statementRef.js +23 -23
  123. package/src/module/xapi/Statement/substatement.js +22 -22
  124. package/src/module/xapi/Statement/verb.js +36 -36
  125. package/src/module/xapi/activitytypes.js +17 -17
  126. package/src/module/xapi/launch.js +157 -157
  127. package/src/module/xapi/utils.js +167 -167
  128. package/src/module/xapi/verbs.js +294 -294
  129. package/src/module/xapi/wrapper.js +1895 -1895
  130. package/src/module/xapi/xapiStatement.js +444 -444
  131. package/src/plugins/analytics.js +34 -34
  132. package/src/plugins/bus.js +12 -8
  133. package/src/plugins/gsap.js +17 -17
  134. package/src/plugins/helper.js +355 -358
  135. package/src/plugins/i18n.js +27 -26
  136. package/src/plugins/idb.js +227 -227
  137. package/src/plugins/save.js +37 -37
  138. package/src/plugins/scorm.js +287 -287
  139. package/src/plugins/xapi.js +11 -11
  140. package/src/public/index.html +33 -33
  141. package/src/router/index.js +57 -57
  142. package/src/router/routes.js +312 -312
  143. package/src/shared/generalfuncs.js +344 -344
  144. package/src/shared/validators.js +1018 -1018
  145. package/tests/component/AppBaseButton.spec.js +53 -0
  146. package/tests/component/pinia.spec.js +24 -0
  147. package/{src/components/tests__ → tests/unit}/AppBaseButton.spec.js +53 -53
  148. package/tests/unit/AppCompInputCheckBoxNx.spec.js +59 -0
  149. package/tests/unit/AppCompInputDropdownNx.spec.js +51 -0
  150. package/tests/unit/AppCompInputRadioNx.spec.js +59 -0
  151. package/tests/unit/AppCompInputTextNx.spec.js +44 -0
  152. package/tests/unit/AppCompInputTextTableNx.spec.js +77 -0
  153. package/tests/unit/AppCompInputTextToFillDropdownNx.spec.js +60 -0
  154. package/tests/unit/AppCompInputTextToFillNx.spec.js +45 -0
  155. package/tests/unit/AppCompQuizNext.spec.js +114 -0
  156. package/tests/unit/AppCompVideoPlayer.spec.js +177 -0
  157. package/{src/components/tests__ → tests/unit}/useTimer.spec.js +91 -91
  158. package/vitest.config.js +28 -19
  159. package/vitest.setup.js +28 -0
  160. package/src/components/AppBaseButton.test.js +0 -21
@@ -1,53 +1,53 @@
1
- ---
2
- title: Model de page
3
-
4
- ---
5
- ::: warning 🚩 Important
6
- Utilisez ce model comme depart pour écrire la page de votre composant:
7
-
8
- 1) Copiez /dubliquez cette page
9
- 2) Renommez votre copie avec le nom de votre composant
10
- 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
- :::
12
-
13
-
14
- Composant pour ....
15
-
16
- ## Aperçu
17
-
18
- Le composant permet de...
19
- Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
-
21
- ## Comportement
22
-
23
- 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.
24
-
25
- ## Référence du composant
26
-
27
- **ModelComposantPage** `<model-composant/>`
28
-
29
-
30
- ## Paramètre
31
-
32
- Aucun paramètre n'est nécessaire pour ce composant.
33
-
34
- ### Props
35
-
36
- | Propriété | Type | Description | valeur par défaut |
37
- |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
- | 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é. |
39
-
40
- ### Slots
41
- `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
-
43
-
44
- ## Style
45
-
46
- `nomde class`[class]
47
-
48
- Aucune manipulation requise.
49
-
50
-
51
- ## Accessibilité
52
- Aucune manipulation requise.
53
-
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -1,53 +1,53 @@
1
- ---
2
- title: Model de page
3
-
4
- ---
5
- ::: warning 🚩 Important
6
- Utilisez ce model comme depart pour écrire la page de votre composant:
7
-
8
- 1) Copiez /dubliquez cette page
9
- 2) Renommez votre copie avec le nom de votre composant
10
- 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
- :::
12
-
13
-
14
- Composant pour ....
15
-
16
- ## Aperçu
17
-
18
- Le composant permet de...
19
- Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
-
21
- ## Comportement
22
-
23
- 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.
24
-
25
- ## Référence du composant
26
-
27
- **ModelComposantPage** `<model-composant/>`
28
-
29
-
30
- ## Paramètre
31
-
32
- Aucun paramètre n'est nécessaire pour ce composant.
33
-
34
- ### Props
35
-
36
- | Propriété | Type | Description | valeur par défaut |
37
- |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
- | 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é. |
39
-
40
- ### Slots
41
- `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
-
43
-
44
- ## Style
45
-
46
- `nomde class`[class]
47
-
48
- Aucune manipulation requise.
49
-
50
-
51
- ## Accessibilité
52
- Aucune manipulation requise.
53
-
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -1,93 +1,93 @@
1
- # Pop up
2
-
3
- Se composant est repris de vuetify.
4
-
5
- ## Aperçu
6
-
7
- Ce composant est un pop-up qui permet de visualiser du contenu. Il peut être appelé par la machine ou par l'utlisateur. Vous pouvez donc à n'importe quel endroit de votre page ou de votre autre composant appeler ce POP-UP pour afficher les messages de type: `information et personnalisé`.
8
-
9
- ## Comportement
10
-
11
- Le FCAD offre un composant POP-UP pour afficher une boite de dialogue à l'utilisateur. Ce composant est paramètré pour générer **2 types de boite de dialogue**.
12
-
13
- Vous devez utiliser le bus pour appeler l'ouverture du pop-up. Voici comment faire:
14
-
15
- - Emettre l'événement `open-popup`.
16
- - Passer en "argument" l'objet POP-UP à générer.
17
-
18
- ```vue
19
- <script>
20
- export default {
21
- //...
22
- methods: {
23
- openPopup(data) {
24
- this.$bus.$emit("open-popup", data);
25
- }
26
- },
27
- };
28
- </script>
29
- ```
30
-
31
- Dans la section **`<template/>`** de votre page ou de votre composant, vous pouvez maintenant faire afficher le POP-UP, par l'appel de votre méthode sur le clique d'un bouton par exemple.
32
-
33
- ```vue
34
- <template>
35
- <div>
36
- <app-base-button @click="openPopup(myPopupExemple1)">
37
- Information
38
- </app-base-button>
39
- </div>
40
- </template>
41
- ```
42
-
43
-
44
- ## Paramètre
45
-
46
- Le pop-up doit recevoir l'information à afficher d'object. Voici le contenu que doit avoir l'objet pop-up:
47
-
48
- | Propriété | Type | Description |valeur | Required |
49
- |-----------|--------|-------------------------------|------------------------------------------|----------|
50
- | type | String | défini le type de pop-up à être générer | `popup-info`, `popup-custom` | true |
51
- | value | Object | défini le contenu à générer dans le pop-up | `title`, `text_n`, `hypertext`\*, `hypertext_n`\*\*, `audio_n`, `video_n`, `link_n`, `image_n`, `cb_$open`,`cb_$close`, `cb_$cancel`, `cb_$confirm`,`$bvArgs`\*\*\*, <br><br> **_NOTES: <br> `n` étant un entier de 1 à infini <br>\* Doit être uniquement utiliser avec le Pop-up Custom<br>\*\* Doit être utilisé iniquement avec les pop-up<br>\*\*\* liste de proprietés Boostrap-vue à passer_** | true |
52
-
53
- Voici comment définir l'objet à générer :
54
-
55
- ```vue
56
- <script>
57
- export default {
58
- //...
59
- data() {
60
- return {
61
- //...
62
- myPopupExemple1: {
63
- type: "popup-info",
64
- value: {text_1:"voici une information de pop-up à afficher"},
65
- },
66
- };
67
- },
68
- };
69
- </script>
70
- ```
71
-
72
- Voici le tableau de tous les paramètres possible pour les pop-ups :
73
- | Propriété | Type | Description | Usage | Required |
74
- |-------------------------|----------|-----------------------------------------|-----------|-------------|
75
- | title | String | Le titre que doit afficher le POP-UP dans l'entête<br><br>_exemple : information_ | title: 'information' | optionnelle |
76
- | text_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu textuel que doit afficher le POP-UP. | text_1:"Hello world" | optionnelle |
77
- | image_n <br><br>**`n` étant un entier de 1 à infini** | Object | une image à faire afficher dans le POP-UP avec une source et un alt | image_1:{path:'img/mon_image.png', label:'nom de mon image'} <br><br> **Note: les clés `path` et `label` sont obligatoire**. | optionnelle |
78
- | audio_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | audio_1:'audio/mon_image.png' | optionnelle |
79
- | video_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | video_1:'video/mon_image.png' | optionnelle |
80
- | link_n <br><br>**`n` étant un entier de 1 à infini** | Object | un lien à faire afficher dans le POP-UP, avec une source et un libélé | link_1:{ ref:'https://FCADdocumentation.netlify.app/guide/', label:'libélé de mon lien' }<br><br>**Note: les clés `ref` et `label` sont obligatoire**. | optionnelle |
81
- | hypertext_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu html à faire afficher dans le POP-UP. | hypertext_1:'voici un texte avec du &lt;strong&gt;html&lt;/strong&gt; à afficher' | |
82
- | cb\_\$open | Function | une fonction de callback à exécuter lorsque le POP-UP sera ouvert | cb\_\$open:foo() | optionnelle |
83
- | cb\_\$close | Function | une fonction de callback à exécuter lorsque le POP-UP sera fermé | cb\_\$close:foo() | optionnelle |
84
- | cb\_\$cancel | Function | une fonction de callback à exécuter lorsque le button d'annulation sera appuyé<br> | cb\_\$cancel:foo() | optionnelle |
85
- | cb\_\$confirm | Function | une fonction de callback à exécuter lorsque le button de confirmation sera appuyé<br> | cb\_\$confirm:foo() | optionnelle | | optionnelle |
86
-
87
- ## Style
88
-
89
- N/A
90
-
91
- ## Accessibilité
92
-
93
- Pour l'instant aucune action n'a été fait pour l'accessibilité.
1
+ # Pop up
2
+
3
+ Se composant est repris de vuetify.
4
+
5
+ ## Aperçu
6
+
7
+ Ce composant est un pop-up qui permet de visualiser du contenu. Il peut être appelé par la machine ou par l'utlisateur. Vous pouvez donc à n'importe quel endroit de votre page ou de votre autre composant appeler ce POP-UP pour afficher les messages de type: `information et personnalisé`.
8
+
9
+ ## Comportement
10
+
11
+ Le FCAD offre un composant POP-UP pour afficher une boite de dialogue à l'utilisateur. Ce composant est paramètré pour générer **2 types de boite de dialogue**.
12
+
13
+ Vous devez utiliser le bus pour appeler l'ouverture du pop-up. Voici comment faire:
14
+
15
+ - Emettre l'événement `open-popup`.
16
+ - Passer en "argument" l'objet POP-UP à générer.
17
+
18
+ ```vue
19
+ <script>
20
+ export default {
21
+ //...
22
+ methods: {
23
+ openPopup(data) {
24
+ this.$bus.$emit("open-popup", data);
25
+ }
26
+ },
27
+ };
28
+ </script>
29
+ ```
30
+
31
+ Dans la section **`<template/>`** de votre page ou de votre composant, vous pouvez maintenant faire afficher le POP-UP, par l'appel de votre méthode sur le clique d'un bouton par exemple.
32
+
33
+ ```vue
34
+ <template>
35
+ <div>
36
+ <app-base-button @click="openPopup(myPopupExemple1)">
37
+ Information
38
+ </app-base-button>
39
+ </div>
40
+ </template>
41
+ ```
42
+
43
+
44
+ ## Paramètre
45
+
46
+ Le pop-up doit recevoir l'information à afficher d'object. Voici le contenu que doit avoir l'objet pop-up:
47
+
48
+ | Propriété | Type | Description |valeur | Required |
49
+ |-----------|--------|-------------------------------|------------------------------------------|----------|
50
+ | type | String | défini le type de pop-up à être générer | `popup-info`, `popup-custom` | true |
51
+ | value | Object | défini le contenu à générer dans le pop-up | `title`, `text_n`, `hypertext`\*, `hypertext_n`\*\*, `audio_n`, `video_n`, `link_n`, `image_n`, `cb_$open`,`cb_$close`, `cb_$cancel`, `cb_$confirm`,`$bvArgs`\*\*\*, <br><br> **_NOTES: <br> `n` étant un entier de 1 à infini <br>\* Doit être uniquement utiliser avec le Pop-up Custom<br>\*\* Doit être utilisé iniquement avec les pop-up<br>\*\*\* liste de proprietés Boostrap-vue à passer_** | true |
52
+
53
+ Voici comment définir l'objet à générer :
54
+
55
+ ```vue
56
+ <script>
57
+ export default {
58
+ //...
59
+ data() {
60
+ return {
61
+ //...
62
+ myPopupExemple1: {
63
+ type: "popup-info",
64
+ value: {text_1:"voici une information de pop-up à afficher"},
65
+ },
66
+ };
67
+ },
68
+ };
69
+ </script>
70
+ ```
71
+
72
+ Voici le tableau de tous les paramètres possible pour les pop-ups :
73
+ | Propriété | Type | Description | Usage | Required |
74
+ |-------------------------|----------|-----------------------------------------|-----------|-------------|
75
+ | title | String | Le titre que doit afficher le POP-UP dans l'entête<br><br>_exemple : information_ | title: 'information' | optionnelle |
76
+ | text_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu textuel que doit afficher le POP-UP. | text_1:"Hello world" | optionnelle |
77
+ | image_n <br><br>**`n` étant un entier de 1 à infini** | Object | une image à faire afficher dans le POP-UP avec une source et un alt | image_1:{path:'img/mon_image.png', label:'nom de mon image'} <br><br> **Note: les clés `path` et `label` sont obligatoire**. | optionnelle |
78
+ | audio_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | audio_1:'audio/mon_image.png' | optionnelle |
79
+ | video_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | video_1:'video/mon_image.png' | optionnelle |
80
+ | link_n <br><br>**`n` étant un entier de 1 à infini** | Object | un lien à faire afficher dans le POP-UP, avec une source et un libélé | link_1:{ ref:'https://FCADdocumentation.netlify.app/guide/', label:'libélé de mon lien' }<br><br>**Note: les clés `ref` et `label` sont obligatoire**. | optionnelle |
81
+ | hypertext_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu html à faire afficher dans le POP-UP. | hypertext_1:'voici un texte avec du &lt;strong&gt;html&lt;/strong&gt; à afficher' | |
82
+ | cb\_\$open | Function | une fonction de callback à exécuter lorsque le POP-UP sera ouvert | cb\_\$open:foo() | optionnelle |
83
+ | cb\_\$close | Function | une fonction de callback à exécuter lorsque le POP-UP sera fermé | cb\_\$close:foo() | optionnelle |
84
+ | cb\_\$cancel | Function | une fonction de callback à exécuter lorsque le button d'annulation sera appuyé<br> | cb\_\$cancel:foo() | optionnelle |
85
+ | cb\_\$confirm | Function | une fonction de callback à exécuter lorsque le button de confirmation sera appuyé<br> | cb\_\$confirm:foo() | optionnelle | | optionnelle |
86
+
87
+ ## Style
88
+
89
+ N/A
90
+
91
+ ## Accessibilité
92
+
93
+ Pour l'instant aucune action n'a été fait pour l'accessibilité.