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.
- package/.editorconfig +7 -7
- package/.gitlab-ci.yml +124 -0
- package/.prettierrc +11 -11
- package/.vscode/extensions.json +8 -8
- package/.vscode/settings.json +46 -16
- package/CHANGELOG +520 -520
- package/README.md +57 -57
- package/documentation/.vitepress/config.js +114 -114
- package/documentation/api-examples.md +49 -49
- package/documentation/composants/app-base-button.md +58 -58
- package/documentation/composants/app-base-error-display.md +59 -59
- package/documentation/composants/app-base-popover.md +68 -68
- package/documentation/composants/app-comp-audio.md +75 -75
- package/documentation/composants/app-comp-branch-buttons.md +111 -111
- package/documentation/composants/app-comp-button-progress.md +53 -53
- package/documentation/composants/app-comp-carousel.md +53 -53
- package/documentation/composants/app-comp-container.md +53 -53
- package/documentation/composants/app-comp-input-checkbox-next.md +42 -42
- package/documentation/composants/app-comp-input-dropdown-next.md +34 -34
- package/documentation/composants/app-comp-input-radio-next.md +39 -39
- package/documentation/composants/app-comp-input-text-next.md +35 -35
- package/documentation/composants/app-comp-input-text-table-next.md +34 -34
- package/documentation/composants/app-comp-input-text-to-fill-dropdown-next.md +53 -53
- package/documentation/composants/app-comp-input-text-to-fill-next.md +31 -31
- package/documentation/composants/app-comp-jauge.md +31 -31
- package/documentation/composants/app-comp-menu-item.md +55 -55
- package/documentation/composants/app-comp-menu.md +29 -29
- package/documentation/composants/app-comp-navigation.md +41 -41
- package/documentation/composants/app-comp-note-call.md +53 -53
- package/documentation/composants/app-comp-note-credit.md +53 -53
- package/documentation/composants/app-comp-play-bar-next.md +53 -53
- package/documentation/composants/app-comp-pop-up-next.md +93 -93
- package/documentation/composants/app-comp-quiz-next.md +235 -235
- package/documentation/composants/app-comp-quiz-recall.md +53 -53
- package/documentation/composants/app-comp-svg-next.md +53 -53
- package/documentation/composants/app-comp-table-of-content.md +50 -50
- package/documentation/composants/app-comp-video-player.md +82 -82
- package/documentation/composants.md +46 -46
- package/documentation/composants_critiques/ModelPageComposant.md +53 -53
- package/documentation/composants_critiques/app-base-module.md +43 -43
- package/documentation/composants_critiques/app-base-page.md +48 -48
- package/documentation/composants_critiques/app-base.md +311 -311
- package/documentation/composants_critiques/main.md +15 -15
- package/documentation/demarrage.md +50 -50
- package/documentation/deploiement.md +57 -57
- package/documentation/index.md +33 -33
- package/documentation/markdown-examples.md +85 -85
- package/documentation/public/vite.svg +14 -14
- package/documentation/public/vuejs.svg +1 -1
- package/documentation/public/vuetify.svg +5 -5
- package/eslint.config.js +60 -60
- package/junit-report.xml +182 -0
- package/package.json +66 -59
- package/playwright/index.html +12 -0
- package/playwright/index.js +21 -0
- package/playwright-ct.config.js +95 -0
- package/src/$locales/en.json +157 -157
- package/src/$locales/fr.json +120 -120
- package/src/assets/data/onboardingMessages.json +47 -47
- package/src/components/AppBase.vue +1171 -1169
- package/src/components/AppBaseButton.vue +90 -95
- package/src/components/AppBaseErrorDisplay.vue +438 -438
- package/src/components/AppBaseFlipCard.vue +84 -84
- package/src/components/AppBaseModule.vue +1639 -1634
- package/src/components/AppBasePage.vue +867 -866
- package/src/components/AppBasePopover.vue +41 -41
- package/src/components/AppBaseSkeleton.vue +66 -66
- package/src/components/AppCompAudio.vue +261 -256
- package/src/components/AppCompBranchButtons.vue +508 -508
- package/src/components/AppCompButtonProgress.vue +137 -132
- package/src/components/AppCompCarousel.vue +342 -336
- package/src/components/AppCompContainer.vue +29 -29
- package/src/components/AppCompInputCheckBoxNx.vue +325 -323
- package/src/components/AppCompInputDropdownNx.vue +302 -299
- package/src/components/AppCompInputRadioNx.vue +287 -284
- package/src/components/AppCompInputTextNx.vue +156 -153
- package/src/components/AppCompInputTextTableNx.vue +205 -202
- package/src/components/AppCompInputTextToFillDropdownNx.vue +343 -340
- package/src/components/AppCompInputTextToFillNx.vue +316 -313
- package/src/components/AppCompJauge.vue +81 -81
- package/src/components/AppCompMenu.vue +6 -1
- package/src/components/AppCompMenuItem.vue +246 -240
- package/src/components/AppCompNavigation.vue +977 -972
- package/src/components/AppCompNoteCall.vue +167 -161
- package/src/components/AppCompNoteCredit.vue +496 -491
- package/src/components/AppCompPlayBarNext.vue +2290 -2288
- package/src/components/AppCompPopUpNext.vue +508 -504
- package/src/components/AppCompQuizNext.vue +515 -510
- package/src/components/AppCompQuizRecall.vue +355 -350
- package/src/components/AppCompSVGNext.vue +346 -346
- package/src/components/AppCompSettingsMenu.vue +177 -172
- package/src/components/AppCompTableOfContent.vue +433 -427
- package/src/components/AppCompVideoPlayer.vue +377 -377
- package/src/components/AppCompViewDisplay.vue +6 -6
- package/src/components/BaseModule.vue +55 -55
- package/src/composables/useIdleDetector.js +56 -56
- package/src/composables/useQuiz.js +89 -89
- package/src/composables/useTimer.js +172 -172
- package/src/directives/nvdaFix.js +53 -53
- package/src/externalComps/ModuleView.vue +22 -22
- package/src/externalComps/SummaryView.vue +91 -91
- package/src/main.js +493 -476
- package/src/module/stores/appStore.js +960 -947
- package/src/module/xapi/ADL.js +520 -520
- package/src/module/xapi/Crypto/Hasher.js +241 -241
- package/src/module/xapi/Crypto/WordArray.js +278 -278
- package/src/module/xapi/Crypto/algorithms/BufferedBlockAlgorithm.js +103 -103
- package/src/module/xapi/Crypto/algorithms/C_algo.js +315 -315
- package/src/module/xapi/Crypto/algorithms/HMAC.js +9 -9
- package/src/module/xapi/Crypto/algorithms/SHA1.js +9 -9
- package/src/module/xapi/Crypto/encoders/Base.js +105 -105
- package/src/module/xapi/Crypto/encoders/Base64.js +99 -99
- package/src/module/xapi/Crypto/encoders/Hex.js +61 -61
- package/src/module/xapi/Crypto/encoders/Latin1.js +61 -61
- package/src/module/xapi/Crypto/encoders/Utf8.js +45 -45
- package/src/module/xapi/Crypto/index.js +53 -53
- package/src/module/xapi/Statement/activity.js +47 -47
- package/src/module/xapi/Statement/agent.js +55 -55
- package/src/module/xapi/Statement/group.js +26 -26
- package/src/module/xapi/Statement/index.js +259 -259
- package/src/module/xapi/Statement/statement.js +253 -253
- package/src/module/xapi/Statement/statementRef.js +23 -23
- package/src/module/xapi/Statement/substatement.js +22 -22
- package/src/module/xapi/Statement/verb.js +36 -36
- package/src/module/xapi/activitytypes.js +17 -17
- package/src/module/xapi/launch.js +157 -157
- package/src/module/xapi/utils.js +167 -167
- package/src/module/xapi/verbs.js +294 -294
- package/src/module/xapi/wrapper.js +1895 -1895
- package/src/module/xapi/xapiStatement.js +444 -444
- package/src/plugins/analytics.js +34 -34
- package/src/plugins/bus.js +12 -8
- package/src/plugins/gsap.js +17 -17
- package/src/plugins/helper.js +355 -358
- package/src/plugins/i18n.js +27 -26
- package/src/plugins/idb.js +227 -227
- package/src/plugins/save.js +37 -37
- package/src/plugins/scorm.js +287 -287
- package/src/plugins/xapi.js +11 -11
- package/src/public/index.html +33 -33
- package/src/router/index.js +57 -57
- package/src/router/routes.js +312 -312
- package/src/shared/generalfuncs.js +344 -344
- package/src/shared/validators.js +1018 -1018
- package/tests/component/AppBaseButton.spec.js +53 -0
- package/tests/component/pinia.spec.js +24 -0
- package/{src/components/tests__ → tests/unit}/AppBaseButton.spec.js +53 -53
- package/tests/unit/AppCompInputCheckBoxNx.spec.js +59 -0
- package/tests/unit/AppCompInputDropdownNx.spec.js +51 -0
- package/tests/unit/AppCompInputRadioNx.spec.js +59 -0
- package/tests/unit/AppCompInputTextNx.spec.js +44 -0
- package/tests/unit/AppCompInputTextTableNx.spec.js +77 -0
- package/tests/unit/AppCompInputTextToFillDropdownNx.spec.js +60 -0
- package/tests/unit/AppCompInputTextToFillNx.spec.js +45 -0
- package/tests/unit/AppCompQuizNext.spec.js +114 -0
- package/tests/unit/AppCompVideoPlayer.spec.js +177 -0
- package/{src/components/tests__ → tests/unit}/useTimer.spec.js +91 -91
- package/vitest.config.js +28 -19
- package/vitest.setup.js +28 -0
- 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 <strong>html</strong> à 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 <strong>html</strong> à 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é.
|