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,172 +1,172 @@
1
- export class Timer {
2
- static timers = new Map() // Store all timers by ID
3
-
4
- constructor(timerID) {
5
- this.timerID = timerID || this.createTimerID() //timerID of the timer
6
- this.timeCounter = 0 //time counter
7
- this.elapsedCounter = 0 //elapsed time counter how lofg the timer is running
8
- this.interval = null //interval for the timer
9
- this.timerState = 'stopped' //state of the timer, can be 'started' or 'stopped'
10
- Timer.timers.set(this.timerID, this) // Store the timer in the static map
11
- }
12
-
13
- /**
14
- * @description Start the timer
15
- */
16
- start() {
17
- if (this.getTimerState() == 'stopped') {
18
- this.interval = setInterval(() => {
19
- this.timeCounter += 1
20
- this.elapsedCounter += 1
21
- }, 1000)
22
- this.timerState = 'started'
23
- }
24
- }
25
-
26
- /** @description Pause the timer */
27
- pause() {
28
- if (this.getTimerState() == 'started') {
29
- clearInterval(this.interval)
30
- this.timerState = 'stopped'
31
- }
32
- }
33
-
34
- /** @description Stop the timer and reset the timer to zero */
35
- stop() {
36
- if (this.getTimerState() == 'started') {
37
- clearInterval(this.interval)
38
- this.timeCounter = 0
39
- this.elapsedCounter = 0
40
- this.timerState = 'stopped'
41
- }
42
- }
43
-
44
- /** @description Destroy the timer instance */
45
- destroy() {
46
- this.pause()
47
- Timer.timers.delete(this.timerID)
48
- }
49
-
50
- /** @description Get the timer ID */
51
- getTimerID() {
52
- return this.timerID
53
- }
54
-
55
- /**
56
- *
57
- * @description retrive a timer instance by its ID
58
- * If no ID is provided, it returns the current timer instance.
59
- * @param {String} id - the ID of the timer to retrieve
60
- * If no ID is provided, it returns the current timer instance.
61
- *
62
- * @throws {Error} - if the timer with the specified ID does not exist
63
- *
64
- * @returns {Timer} - the timer instance
65
- */
66
- getTimer(id = null) {
67
- if (!id) {
68
- console.warn('No timer ID provided. Returning the current timer.')
69
- return this
70
- }
71
- if (!Timer.timers.has(id))
72
- throw new Error(`Timer with ID ${id} does not exist.`)
73
- return Timer.timers.get(id)
74
- }
75
-
76
- /**
77
- * @description Get the current time counter in seconds
78
- *
79
- * @returns {Number} - the time counter in seconds
80
- */
81
- getTime() {
82
- return this.timeCounter
83
- }
84
- /**
85
- * @description Get the current state of the timer
86
- *
87
- * @returns {String} - timer state, can be 'started' or 'stopped'
88
- */
89
- getTimerState() {
90
- return this.timerState
91
- }
92
- /**
93
- * @description Get the elapsed time for the timer
94
- * This is the time the timer has been running since it was started.
95
- * It is not reset when the timer is paused.
96
- *
97
- * @returns {Number} - the time count in seconds
98
- */
99
- getElapsedTime() {
100
- return this.elapsedCounter
101
- }
102
-
103
- /**
104
- * @description Get all existing timers
105
- *
106
- * @returns {Map} - a map of all timer instances with their IDs as keys
107
- */
108
-
109
- static getAllTimers() {
110
- return Timer.timers
111
- }
112
-
113
- /**
114
- * @description - This method generates a unique timer ID
115
- *
116
- * @returns {String} - a unique timer ID
117
- */
118
- createTimerID() {
119
- const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
120
- let str = ''
121
- const n = 2
122
- for (let i = 0; i < n; i++) {
123
- str = `${str}${alphabet[Math.floor(Math.random() * alphabet.length)]}`
124
- }
125
-
126
- const id = `Tm$${str}${Math.floor(Math.random() * 1000)}`
127
-
128
- return id
129
- }
130
-
131
- /**
132
- * @description Format seconds to ISO 8601 format
133
- * Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
134
- * @param {Number} seconds - time in seconds
135
- *
136
- * @returns {String} - ISO 8601 formatted time string // YYYY-MM-DDTHH:mm:ss.sssZ
137
- */
138
- formatToISOString(seconds) {
139
- let d = new Date(null) //create a default date ref
140
- d.setSeconds(seconds) //set the time with passed numbers of seconds
141
-
142
- let ISOTime = d.toISOString()
143
-
144
- return ISOTime
145
- }
146
-
147
- /**
148
- * @description gives time period in the format of HH:mm:ss
149
- * @param {Number} seconds - time in seconds
150
- *
151
- * @returns {String} - time period in the format of HH:mm:ss
152
- */
153
- ISOTimeParser(seconds) {
154
- let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
155
- ISOTimePeriod = ISOTimePeriod.split('T')
156
- const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
157
- const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
158
-
159
- if (!periodOfTime) return '00:00:00'
160
-
161
- let timeString = ''
162
- let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
163
- let mm = periodOfTime[1]
164
- let ss = periodOfTime[2]
165
-
166
- if (HH.length === 1) HH = `0${HH}`
167
-
168
- timeString = `${HH}:${mm}:${ss}`
169
-
170
- return timeString
171
- }
172
- }
1
+ export class Timer {
2
+ static timers = new Map() // Store all timers by ID
3
+
4
+ constructor(timerID) {
5
+ this.timerID = timerID || this.createTimerID() //timerID of the timer
6
+ this.timeCounter = 0 //time counter
7
+ this.elapsedCounter = 0 //elapsed time counter how lofg the timer is running
8
+ this.interval = null //interval for the timer
9
+ this.timerState = 'stopped' //state of the timer, can be 'started' or 'stopped'
10
+ Timer.timers.set(this.timerID, this) // Store the timer in the static map
11
+ }
12
+
13
+ /**
14
+ * @description Start the timer
15
+ */
16
+ start() {
17
+ if (this.getTimerState() == 'stopped') {
18
+ this.interval = setInterval(() => {
19
+ this.timeCounter += 1
20
+ this.elapsedCounter += 1
21
+ }, 1000)
22
+ this.timerState = 'started'
23
+ }
24
+ }
25
+
26
+ /** @description Pause the timer */
27
+ pause() {
28
+ if (this.getTimerState() == 'started') {
29
+ clearInterval(this.interval)
30
+ this.timerState = 'stopped'
31
+ }
32
+ }
33
+
34
+ /** @description Stop the timer and reset the timer to zero */
35
+ stop() {
36
+ if (this.getTimerState() == 'started') {
37
+ clearInterval(this.interval)
38
+ this.timeCounter = 0
39
+ this.elapsedCounter = 0
40
+ this.timerState = 'stopped'
41
+ }
42
+ }
43
+
44
+ /** @description Destroy the timer instance */
45
+ destroy() {
46
+ this.pause()
47
+ Timer.timers.delete(this.timerID)
48
+ }
49
+
50
+ /** @description Get the timer ID */
51
+ getTimerID() {
52
+ return this.timerID
53
+ }
54
+
55
+ /**
56
+ *
57
+ * @description retrive a timer instance by its ID
58
+ * If no ID is provided, it returns the current timer instance.
59
+ * @param {String} id - the ID of the timer to retrieve
60
+ * If no ID is provided, it returns the current timer instance.
61
+ *
62
+ * @throws {Error} - if the timer with the specified ID does not exist
63
+ *
64
+ * @returns {Timer} - the timer instance
65
+ */
66
+ getTimer(id = null) {
67
+ if (!id) {
68
+ console.warn('No timer ID provided. Returning the current timer.')
69
+ return this
70
+ }
71
+ if (!Timer.timers.has(id))
72
+ throw new Error(`Timer with ID ${id} does not exist.`)
73
+ return Timer.timers.get(id)
74
+ }
75
+
76
+ /**
77
+ * @description Get the current time counter in seconds
78
+ *
79
+ * @returns {Number} - the time counter in seconds
80
+ */
81
+ getTime() {
82
+ return this.timeCounter
83
+ }
84
+ /**
85
+ * @description Get the current state of the timer
86
+ *
87
+ * @returns {String} - timer state, can be 'started' or 'stopped'
88
+ */
89
+ getTimerState() {
90
+ return this.timerState
91
+ }
92
+ /**
93
+ * @description Get the elapsed time for the timer
94
+ * This is the time the timer has been running since it was started.
95
+ * It is not reset when the timer is paused.
96
+ *
97
+ * @returns {Number} - the time count in seconds
98
+ */
99
+ getElapsedTime() {
100
+ return this.elapsedCounter
101
+ }
102
+
103
+ /**
104
+ * @description Get all existing timers
105
+ *
106
+ * @returns {Map} - a map of all timer instances with their IDs as keys
107
+ */
108
+
109
+ static getAllTimers() {
110
+ return Timer.timers
111
+ }
112
+
113
+ /**
114
+ * @description - This method generates a unique timer ID
115
+ *
116
+ * @returns {String} - a unique timer ID
117
+ */
118
+ createTimerID() {
119
+ const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
120
+ let str = ''
121
+ const n = 2
122
+ for (let i = 0; i < n; i++) {
123
+ str = `${str}${alphabet[Math.floor(Math.random() * alphabet.length)]}`
124
+ }
125
+
126
+ const id = `Tm$${str}${Math.floor(Math.random() * 1000)}`
127
+
128
+ return id
129
+ }
130
+
131
+ /**
132
+ * @description Format seconds to ISO 8601 format
133
+ * Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
134
+ * @param {Number} seconds - time in seconds
135
+ *
136
+ * @returns {String} - ISO 8601 formatted time string // YYYY-MM-DDTHH:mm:ss.sssZ
137
+ */
138
+ formatToISOString(seconds) {
139
+ let d = new Date(null) //create a default date ref
140
+ d.setSeconds(seconds) //set the time with passed numbers of seconds
141
+
142
+ let ISOTime = d.toISOString()
143
+
144
+ return ISOTime
145
+ }
146
+
147
+ /**
148
+ * @description gives time period in the format of HH:mm:ss
149
+ * @param {Number} seconds - time in seconds
150
+ *
151
+ * @returns {String} - time period in the format of HH:mm:ss
152
+ */
153
+ ISOTimeParser(seconds) {
154
+ let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
155
+ ISOTimePeriod = ISOTimePeriod.split('T')
156
+ const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
157
+ const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
158
+
159
+ if (!periodOfTime) return '00:00:00'
160
+
161
+ let timeString = ''
162
+ let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
163
+ let mm = periodOfTime[1]
164
+ let ss = periodOfTime[2]
165
+
166
+ if (HH.length === 1) HH = `0${HH}`
167
+
168
+ timeString = `${HH}:${mm}:${ss}`
169
+
170
+ return timeString
171
+ }
172
+ }
@@ -1,53 +1,53 @@
1
- /**
2
- * @file nvdaFix.js
3
- * @description Directive to fix NVDA screen reader issues with Vuetify dropdowns.
4
- * This directive hides the input field from screen readers and provides an aria-live region
5
- * to announce the selected option.
6
- *
7
- * @example
8
- * <v-select v-nvda-fix="selectedOptionText" ...>
9
- */
10
-
11
- export default {
12
- mounted(el, binding) {
13
- // 1. Hide Vuetify input by adding aria-hidden="true"
14
- const input = el.querySelector('input[type="text"]')
15
- if (input) {
16
- input.setAttribute('aria-hidden', 'true')
17
- }
18
-
19
- // 2. Create/update aria-live for screen reader
20
- const valueText =
21
- binding && binding.value ? binding.value : 'choisir une option'
22
- let liveRegion = el.querySelector('.nvda-live-region')
23
-
24
- if (!liveRegion) {
25
- liveRegion = document.createElement('div')
26
- liveRegion.className = 'nvda-live-region sr-only'
27
- liveRegion.setAttribute('aria-live', 'polite')
28
- el.appendChild(liveRegion)
29
- }
30
-
31
- liveRegion.textContent = `🍍${valueText}`
32
- },
33
- /**
34
- * @description Directive updated hook to handle changes in the selected option.
35
- * This updates the aria-live region with the new selected option text.
36
- * @param {Object} el - The element the directive is bound to.
37
- * @param {Object} binding - The binding object containing the new value.
38
- */
39
- updated(el, binding) {
40
- // update aria-live when selected option changes
41
- const valueText = binding.value?.text || ''
42
- const input = el.querySelector('input[type="text"]')
43
- const liveRegion = el.querySelector('.nvda-live-region')
44
-
45
- if (input) {
46
- input.setAttribute('aria-hidden', 'true')
47
- }
48
-
49
- if (liveRegion) {
50
- liveRegion.textContent = `🍍${valueText}`
51
- }
52
- }
53
- }
1
+ /**
2
+ * @file nvdaFix.js
3
+ * @description Directive to fix NVDA screen reader issues with Vuetify dropdowns.
4
+ * This directive hides the input field from screen readers and provides an aria-live region
5
+ * to announce the selected option.
6
+ *
7
+ * @example
8
+ * <v-select v-nvda-fix="selectedOptionText" ...>
9
+ */
10
+
11
+ export default {
12
+ mounted(el, binding) {
13
+ // 1. Hide Vuetify input by adding aria-hidden="true"
14
+ const input = el.querySelector('input[type="text"]')
15
+ if (input) {
16
+ input.setAttribute('aria-hidden', 'true')
17
+ }
18
+
19
+ // 2. Create/update aria-live for screen reader
20
+ const valueText =
21
+ binding && binding.value ? binding.value : 'choisir une option'
22
+ let liveRegion = el.querySelector('.nvda-live-region')
23
+
24
+ if (!liveRegion) {
25
+ liveRegion = document.createElement('div')
26
+ liveRegion.className = 'nvda-live-region sr-only'
27
+ liveRegion.setAttribute('aria-live', 'polite')
28
+ el.appendChild(liveRegion)
29
+ }
30
+
31
+ liveRegion.textContent = `🍍${valueText}`
32
+ },
33
+ /**
34
+ * @description Directive updated hook to handle changes in the selected option.
35
+ * This updates the aria-live region with the new selected option text.
36
+ * @param {Object} el - The element the directive is bound to.
37
+ * @param {Object} binding - The binding object containing the new value.
38
+ */
39
+ updated(el, binding) {
40
+ // update aria-live when selected option changes
41
+ const valueText = binding.value?.text || ''
42
+ const input = el.querySelector('input[type="text"]')
43
+ const liveRegion = el.querySelector('.nvda-live-region')
44
+
45
+ if (input) {
46
+ input.setAttribute('aria-hidden', 'true')
47
+ }
48
+
49
+ if (liveRegion) {
50
+ liveRegion.textContent = `🍍${valueText}`
51
+ }
52
+ }
53
+ }
@@ -1,22 +1,22 @@
1
- <template>
2
- <app-base-module :module-config="$data" />
3
- </template>
4
-
5
- <script>
6
- export default {
7
- data() {
8
- return {
9
- id: 'module_99',
10
- consigneBehavior: 'onHover', //Controle the behavior of desplaying instruction
11
- bookmarkActive: true, // Controle the use of saved point
12
- allowNavigationToActivity: null
13
-
14
- //main:''// Edit to define the ID of the node that will be main. When skipping to main content in the page.
15
- }
16
- },
17
- created() {
18
- this.allowNavigationToActivity =
19
- this.$helper.getSettingsFromStore('auto_next_activity')
20
- }
21
- }
22
- </script>
1
+ <template>
2
+ <app-base-module :module-config="$data" />
3
+ </template>
4
+
5
+ <script>
6
+ export default {
7
+ data() {
8
+ return {
9
+ id: 'module_99',
10
+ consigneBehavior: 'onHover', //Controle the behavior of desplaying instruction
11
+ bookmarkActive: true, // Controle the use of saved point
12
+ allowNavigationToActivity: null
13
+
14
+ //main:''// Edit to define the ID of the node that will be main. When skipping to main content in the page.
15
+ }
16
+ },
17
+ created() {
18
+ this.allowNavigationToActivity =
19
+ this.$helper.getSettingsFromStore('auto_next_activity')
20
+ }
21
+ }
22
+ </script>
@@ -1,91 +1,91 @@
1
- <template>
2
- <div>
3
- <app-comp-menu></app-comp-menu>
4
- <!-- <h6>normal</h6>
5
- <div class="t normal"></div>
6
- <h6>red</h6>
7
- <div class="t red"></div>
8
- <h6>green</h6>
9
- <div class="t green"></div>
10
- <h6>hue</h6>
11
- <div class="t hue"></div>
12
- <h6>Saturation</h6>
13
- <div class="t saturation"></div>
14
- <h6>desaturation</h6>
15
- <div class="t desaturation"></div>
16
- <h6>lighteness</h6>
17
- <div class="t lighteness"></div>
18
- <h6>darkness</h6>
19
- <div class="t darkness"></div>
20
- <h6>whiteness</h6>
21
- <div class="t whiteness"></div>
22
- <h6>blackness</h6>
23
- <div class="t blackness"></div> -->
24
- </div>
25
- </template>
26
-
27
- <script>
28
- export default {
29
- data() {
30
- return {}
31
- }
32
- }
33
- </script>
34
- <!-- <style lang="scss">
35
- @use 'sass:color';
36
- $color: #f11532;
37
- $color-red: color.change($color, $red: 155);
38
- $color-green: color.change($color, $green: 255);
39
- $color-hue: adjust-hue($color, -30deg);
40
- $color-saturation: color.scale($color, $saturation: 100%);
41
- $color-desaturate: color.scale($color, $saturation: -50%);
42
- $color-lighteness: color.scale($color, $lightness: 50%);
43
- $color-darkness: color.scale($color, $lightness: -50%);
44
- $color-whiteness: color.scale($color, $whiteness: 50%);
45
- $color-blackness: color.scale($color, $blackness: 50%);
46
-
47
- .t {
48
- width: 50px;
49
- height: 50px;
50
-
51
- &.normal {
52
- background: $color;
53
- }
54
-
55
- &.red {
56
- background: $color-red;
57
- }
58
-
59
- &.green {
60
- background: $color-green;
61
- }
62
-
63
- &.hue {
64
- background: $color-hue;
65
- }
66
-
67
- &.saturation {
68
- background: $color-saturation;
69
- }
70
-
71
- &.desaturation {
72
- background: $color-desaturate;
73
- }
74
-
75
- &.lighteness {
76
- background: $color-lighteness;
77
- }
78
-
79
- &.darkness {
80
- background: $color-darkness;
81
- }
82
-
83
- &.whiteness {
84
- background: $color-whiteness;
85
- }
86
-
87
- &.blackness {
88
- background: $color-blackness;
89
- }
90
- }
91
- </style> -->
1
+ <template>
2
+ <div>
3
+ <app-comp-menu></app-comp-menu>
4
+ <!-- <h6>normal</h6>
5
+ <div class="t normal"></div>
6
+ <h6>red</h6>
7
+ <div class="t red"></div>
8
+ <h6>green</h6>
9
+ <div class="t green"></div>
10
+ <h6>hue</h6>
11
+ <div class="t hue"></div>
12
+ <h6>Saturation</h6>
13
+ <div class="t saturation"></div>
14
+ <h6>desaturation</h6>
15
+ <div class="t desaturation"></div>
16
+ <h6>lighteness</h6>
17
+ <div class="t lighteness"></div>
18
+ <h6>darkness</h6>
19
+ <div class="t darkness"></div>
20
+ <h6>whiteness</h6>
21
+ <div class="t whiteness"></div>
22
+ <h6>blackness</h6>
23
+ <div class="t blackness"></div> -->
24
+ </div>
25
+ </template>
26
+
27
+ <script>
28
+ export default {
29
+ data() {
30
+ return {}
31
+ }
32
+ }
33
+ </script>
34
+ <!-- <style lang="scss">
35
+ @use 'sass:color';
36
+ $color: #f11532;
37
+ $color-red: color.change($color, $red: 155);
38
+ $color-green: color.change($color, $green: 255);
39
+ $color-hue: adjust-hue($color, -30deg);
40
+ $color-saturation: color.scale($color, $saturation: 100%);
41
+ $color-desaturate: color.scale($color, $saturation: -50%);
42
+ $color-lighteness: color.scale($color, $lightness: 50%);
43
+ $color-darkness: color.scale($color, $lightness: -50%);
44
+ $color-whiteness: color.scale($color, $whiteness: 50%);
45
+ $color-blackness: color.scale($color, $blackness: 50%);
46
+
47
+ .t {
48
+ width: 50px;
49
+ height: 50px;
50
+
51
+ &.normal {
52
+ background: $color;
53
+ }
54
+
55
+ &.red {
56
+ background: $color-red;
57
+ }
58
+
59
+ &.green {
60
+ background: $color-green;
61
+ }
62
+
63
+ &.hue {
64
+ background: $color-hue;
65
+ }
66
+
67
+ &.saturation {
68
+ background: $color-saturation;
69
+ }
70
+
71
+ &.desaturation {
72
+ background: $color-desaturate;
73
+ }
74
+
75
+ &.lighteness {
76
+ background: $color-lighteness;
77
+ }
78
+
79
+ &.darkness {
80
+ background: $color-darkness;
81
+ }
82
+
83
+ &.whiteness {
84
+ background: $color-whiteness;
85
+ }
86
+
87
+ &.blackness {
88
+ background: $color-blackness;
89
+ }
90
+ }
91
+ </style> -->