fcad-core-dragon 2.0.0-beta.4 → 2.0.0-beta.6

package/src/components/AppBasePopover.vue

@@ -1,41 +1,41 @@
-<!--
- @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
--->
-<template>
-  <v-tooltip
-    ref="tooltip"
-    v-bind="$attrs"
-    v-model="show"
-    transition="false"
-    :open-on-click="true"
-    :persistent="false"
-  >
-    <slot></slot>
-  </v-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'AppBasePopover',
-  data() {
-    return {
-      show: false,
-      alertContainer: null
-    }
-  },
-  watch: {
-    show: {
-      handler(newValue) {
-        if (newValue) {
-          const content = this.$refs.tooltip.contentEl.textContent
-          this.alertContainer.textContent = ''
-          this.alertContainer.textContent = content
-        }
-      }
-    }
-  },
-  mounted() {
-    this.alertContainer = document.getElementById('hiddenAlertContainer')
-  }
-}
-</script>
+<!--
+ @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
+-->
+<template>
+  <v-tooltip
+    ref="tooltip"
+    v-bind="$attrs"
+    v-model="show"
+    transition="false"
+    :open-on-click="true"
+    :persistent="false"
+  >
+    <slot></slot>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'AppBasePopover',
+  data() {
+    return {
+      show: false,
+      alertContainer: null
+    }
+  },
+  watch: {
+    show: {
+      handler(newValue) {
+        if (newValue) {
+          const content = this.$refs.tooltip.contentEl.textContent
+          this.alertContainer.textContent = ''
+          this.alertContainer.textContent = content
+        }
+      }
+    }
+  },
+  mounted() {
+    this.alertContainer = document.getElementById('hiddenAlertContainer')
+  }
+}
+</script>

package/src/components/AppCompAudio.vue

@@ -34,7 +34,7 @@
             <audio
               :id="id"
               ref="m-audio"
-              @loadedmetadata="updateMediaData($event)"
+              @loadedmetadata="updateMediaDataAudio($event.target)"
             >
               <source
                 v-for="(aSource, index) in mSources"
@@ -128,39 +128,42 @@ export default {
 
   methods: {
     ...mapActions(useAppStore, ['updateCurrentMediaElements']),
+    /**
+     * @description search the DOM for medias with duplicated ID declaration in the page
+     * @return return Array of all DOM MediaElement with same id
+     */
+    checkDuplicatedID() {
+      const mediaList = document.querySelectorAll('.__media-container')
+      const duplicate = Array.from(mediaList).filter((media) =>
+        media.id.includes(this.id)
+      )
+      return duplicate
+    },
     /**
      * @description update the information for the mediaElement in the store
      * @param {htmlElement} e
      * @fires update-page to AppBaseModule.vue
      */
-    updateMediaData(e) {
+    updateMediaDataAudio(e) {
       //dispatch loading status of for this component
-      this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
+      this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'loading')
       this.$bus.$emit('update-media-duration')
 
-      //Should Check that the the media Element is unique im Media Liste
-      const { mElements } = this.getCurrentPage
-
-      const hasEntry = mElements.findLastIndex(
-        (media) => media.id === e.target.id
-      )
-
-      if (hasEntry !== -1) {
-        // Should report Error to Console and Component template about this media
-        const errmsg = `Cet élément a le même ID q'un autre media. Vous ne devez pas avoir de médias avec le même ID dans une page.`
+      if (this.checkDuplicatedID().length > 1) {
+        const errmsg = `Cet élément a le même ID <b>${this.id}</b>q'un autre media. Vous ne devez pas avoir de médias avec le même ID dans une page.`
 
         console.warn(
-          `%c WARNING!>>> You cannot use the same ID in your media elements for your page.`,
+          `%c WARNING!>>> You cannot use the same ID (${this.id}) in your media elements for your page.`,
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
 
-        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+        this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'ready')
         return this.hasErr.push(errmsg)
       }
 
-      this.updateCurrentMediaElements(e.target).then(() => {
+      this.updateCurrentMediaElements(e).then(() => {
         this.isSet = true
-        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+        this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'ready')
       })
     },
     errorHandling(e) {

package/src/components/AppCompBranchButtons.vue

@@ -38,7 +38,7 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
     <v-row v-else>
       <v-col
         v-for="branch of branchsStateData"
-        :id="branch.id"
+        :id="`branch_${branch.id}`"
         :key="branch.id"
         class="branch-btn"
       >
@@ -65,24 +65,18 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
           v-else-if="isCard && cards.length"
           class="branch-btn-wrapper branch-btn-card"
         >
-          <v-card class="mx-auto" max-width="20rem">
-            <v-img :src="branch.imgFile" :alt="`${branch.imgAlt}`" cover>
-              <v-toolbar color="transparent">
-                <template #append>
-                  <app-comp-button-progress
-                    :set-target="sidebar"
-                    :percent="branch.progression ? branch.progression : 0"
-                    :branch-data="branch"
-                    :btn-title="getMatchingElement(branch.id).btnTitle"
-                  ></app-comp-button-progress>
-                </template>
-              </v-toolbar>
-            </v-img>
-
-            <v-card-title>{{ branch.title }}</v-card-title>
-            <v-card-text>
-              {{ branch.text }}
-            </v-card-text>
+          <v-card class="mx-auto" max-width="15rem">
+            <v-img :src="branch.imgFile" :alt="`${branch.imgAlt}`" cover />
+
+            <v-card-title v-html="branch.title"></v-card-title>
+            <v-card-text v-html="branch.text"></v-card-text>
+
+            <app-comp-button-progress
+              :set-target="sidebar"
+              :percent="branch.progression ? branch.progression : 0"
+              :branch-data="branch"
+              :btn-title="getMatchingElement(branch.id).btnTitle"
+            ></app-comp-button-progress>
           </v-card>
         </div>
         <div v-else class="branch-btn-wrapper">
@@ -98,7 +92,6 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
   </v-row>
 </template>
 <script>
-// ...
 import { mapState } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 import AppCompButtonProgress from './AppCompButtonProgress.vue'
@@ -141,35 +134,6 @@ export default {
                 break
               }
             }
-            //Start validation of required keys
-            if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
-              for (let el of dataArray) {
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  let index = dataArray.indexOf(el)
-
-                  if (!el[k]) {
-                    isValid = false
-                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${
-                      index + 1
-                    } in ➡ card \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
-                    break
-                  } else {
-                    if (el[k].constructor !== String) {
-                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${
-                        index + 1
-                      } ➡ of card. \n  🚩 Must be of type {String}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
-                if (!isValid) break
-              }
-            }
           }
 
           if (errMsg) console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
@@ -304,7 +268,6 @@ export default {
         let { state = 'new', progression = 0 } = this.getBranchProgression(
           branchData.id
         )
-        // if (!state || !progression) return
 
         branchData.state = state
         branchData.progression = progression
@@ -323,7 +286,11 @@ export default {
             btnTitle
           }
 
-          if (typeof branchData.imgAlt === 'undefined' && import.meta.env.DEV) {
+          if (
+            typeof branchData.imgAlt === 'undefined' &&
+            branchData.imgFile === 'undefined' &&
+            import.meta.env.DEV
+          ) {
             branchData.imgAlt = ''
             console.warn(
               `Bouton d’embranchement: ALT image sans valeur définie pour ${branchData.id}`
@@ -413,27 +380,8 @@ export default {
             }
             //Start validation of required keys
             if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
               for (let el of this.cards) {
                 let index = this.cards.indexOf(el)
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  if (!el[k]) {
-                    isValid = false
-                    errMsg = `l'Attribut 👉 ${k} 👈 pour la carte ${index + 1} n'as pas été défini`
-                    break
-                  } else {
-                    if (el[k].constructor !== String) {
-                      errMsg = `l'Attribut 👉 ${k} 👈  pour la carte  ${
-                        index + 1
-                      } doit être de type {String}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
 
                 // Start validation of existing branch for this element
                 let searchEl = this.branchs.find((b) =>
@@ -544,9 +492,19 @@ export default {
 <style lang="scss">
 .branch-btn-wrapper {
   position: relative;
+
   .branch-btn-custom {
     background-color: transparent;
     border: none;
   }
 }
+
+.v-card {
+  position: relative;
+  .button-progress-wrapper {
+    position: absolute;
+    right: 55px;
+    top: 15px;
+  }
+}
 </style>

package/src/components/AppCompButtonProgress.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="button-progress-wrapper">
-    <button
+    <app-base-button
       :id="`btn_branch_${branchData.id}`"
       :target-ref="branchData.id"
       :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
@@ -17,11 +17,13 @@
       <svg v-if="branchData.state != status.COMPLETE">
         <use href="#navigate-next-icon"></use>
       </svg>
-    </button>
+    </app-base-button>
   </div>
 </template>
 <script>
+import AppBaseButton from './AppBaseButton.vue'
 export default {
+  components: { AppBaseButton },
   props: {
     mini: {
       type: Boolean,
@@ -63,7 +65,6 @@ export default {
   },
 
   created() {
-    // if (isNaN(this.percent)) this.percent = 0
     this.$bus.$on('branching-hidden', this.resetIsActive)
   },
 
@@ -98,12 +99,6 @@ export default {
 .button-progress-wrapper {
   &:not(.card-btn) {
     .branch-btn-default {
-      // left: 4px;
-      // top: 4px;
-      // min-width: 42px;
-      // min-height: 42px;
-      right: 15px !important;
-      top: -15px !important;
       min-width: 42px;
       min-height: 42px;
     }

package/src/components/AppCompCarousel.vue

@@ -3,82 +3,95 @@
  @ What it does: Create an html element including an array of slides. These slides are objects including required property (imgSrc) and optional properties (imgAlt, Title, Hypertext).
 -->
 
-<template>
+<template v-if="slides">
   <section id="carousel" :aria-label="$t('text.carousel')">
-    <div class="carousel-inner">
-      <div id="mycarousel-slides" class="carousel-slides" aria-live="polite">
-        <div
-          v-for="(slide, index) in slides"
-          :key="index"
-          class="carousel-slide"
-          :class="{
-            current: currentSlide == index + 1,
-            prev: currentSlide >= index + 2,
-            next: currentSlide <= index
-          }"
-          role="group"
-          :aria-hidden="!(currentSlide == index + 1)"
-        >
-          <span class="sr-only">
-            {{
-              $t('text.slide') +
-              ' ' +
-              (index + 1) +
-              ' ' +
-              $t('text.of') +
-              ' ' +
-              slideLength
-            }}
-          </span>
+    <app-base-error-display
+      v-if="errorsSlider.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: CRÉATION CAROUSEL'"
+      :errors-list="errorsSlider"
+    ></app-base-error-display>
+    <template v-else>
+      <div class="carousel-inner">
+        <div id="mycarousel-slides" class="carousel-slides" aria-live="polite">
           <div
-            class="carousel-image"
-            :class="{ 'full-width': !(slide.title || slide.hypertext) }"
+            v-for="(slide, index) in slides"
+            :key="index"
+            class="carousel-slide"
+            :class="{
+              current: currentSlide == index + 1,
+              prev: currentSlide >= index + 2,
+              next: currentSlide <= index
+            }"
+            role="group"
+            :aria-hidden="!(currentSlide == index + 1)"
           >
-            <img
-              :src="slide.imgSrc"
-              :alt="slide.imgAlt"
-              :aria-hidden="slide.imgAlt == ' ' || !slide.imgAlt ? true : false"
-            />
-          </div>
-          <div v-if="slide.title || slide.hypertext" class="carousel-text">
-            <h3 v-if="slide.title">
-              {{ slide.title }}
-            </h3>
-            <div v-html="slide.hypertext"></div>
+            <span class="sr-only">
+              {{
+                $t('text.slide') +
+                ' ' +
+                (index + 1) +
+                ' ' +
+                $t('text.of') +
+                ' ' +
+                slideLength
+              }}
+            </span>
+            <div
+              class="carousel-image"
+              :class="{ 'full-width': !(slide.title || slide.hypertext) }"
+            >
+              <img
+                :src="slide.imgSrc"
+                :alt="slide.imgAlt"
+                :aria-hidden="
+                  slide.imgAlt == ' ' || !slide.imgAlt ? true : false
+                "
+              />
+            </div>
+            <div v-if="slide.title || slide.hypertext" class="carousel-text">
+              <h3 v-if="slide.title">
+                {{ slide.title }}
+              </h3>
+              <div v-html="slide.hypertext"></div>
+            </div>
           </div>
         </div>
+
+        <div class="carousel-controls">
+          <app-base-button
+            id="carousel-btn-prev"
+            class="carousel-btn"
+            :aria-label="$t('button.carousel_prev')"
+            aria-controls="mycarousel-slides"
+            :title="$t('button.carousel_prev')"
+            :aria-disabled="disablePrev"
+            :is-disabled="disablePrev"
+            :disabled="disablePrev"
+            @click="prevSlide()"
+          >
+            <svg>
+              <use href="#fleche-gauche-icon"></use>
+            </svg>
+          </app-base-button>
+          <app-base-button
+            id="carousel-btn-next"
+            class="carousel-btn"
+            :aria-label="$t('button.carousel_next')"
+            aria-controls="mycarousel-slides"
+            :title="$t('button.carousel_next')"
+            :aria-disabled="disableNext"
+            :is-disabled="disableNext"
+            :disabled="disableNext"
+            @click="nextSlide()"
+          >
+            <svg>
+              <use href="#fleche-droite-icon"></use>
+            </svg>
+          </app-base-button>
+        </div>
       </div>
-      <div class="carousel-controls">
-        <app-base-button
-          id="carousel-btn-prev"
-          class="carousel-btn"
-          :aria-label="$t('button.carousel_prev')"
-          aria-controls="mycarousel-slides"
-          :title="$t('button.carousel_prev')"
-          :disabled="disablePrev"
-          :aria-disabled="disablePrev"
-          @click="prevSlide()"
-        >
-          <svg>
-            <use href="#fleche-gauche-icon"></use>
-          </svg>
-        </app-base-button>
-        <app-base-button
-          id="carousel-btn-next"
-          class="carousel-btn"
-          :aria-label="$t('button.carousel_next')"
-          aria-controls="mycarousel-slides"
-          :title="$t('button.carousel_next')"
-          :disabled="disableNext"
-          :aria-disabled="disableNext"
-          @click="nextSlide()"
-        >
-          <svg>
-            <use href="#fleche-droite-icon"></use>
-          </svg>
-        </app-base-button>
-      </div>
-    </div>
+    </template>
     <div class="carousel-index">
       <p aria-hidden="true">{{ currentSlide }}/{{ slideLength }}</p>
     </div>
@@ -86,16 +99,20 @@
 </template>
 
 <script>
+import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
 export default {
   name: 'AppCompSlider',
+  components: { AppBaseErrorDisplay },
   props: {
-    slides: { type: Array, required: true } //Array of slides {imgSrc, imgAlt, title, hypertext}
+    slides: { type: Array, required: true }, //Array of slides {imgSrc, imgAlt, title, hypertext}
+    name: { type: String, default: 'toto cool' }
   },
   data() {
     return {
-      currentSlide: 1, //Slide management
+      currentSlide: null, //Slide management
       requiredProperties: ['imgSrc'], //For slides validation
-      optionalProperties: ['title', 'imgAlt', 'hypertext'] //For slides validation
+      optionalProperties: ['title', 'imgAlt', 'hypertext'], //For slides validation
+      errorsSlider: []
     }
   },
   computed: {
@@ -106,26 +123,14 @@ export default {
       return !(this.currentSlide < this.slideLength)
     },
     slideLength() {
-      return this.slides.length
+      return this.slides ? this.slides.length : 0
     }
   },
+  created() {
+    this.currentSlide = this.slides && this.slides.length ? 1 : 0
+  },
   mounted() {
-    //Validating slides
-    if (Array.isArray(this.slides) && this.slideLength > 0) {
-      //Validate properties for all the slides
-      for (const slide of this.slides) {
-        this.validateProperties(
-          this.requiredProperties,
-          this.optionalProperties,
-          slide
-        )
-      }
-    } else {
-      console.warn(
-        `%c WARNING!>>> AppCompSlider : slides must be an array of at least one item`,
-        'background: orange; color: white; display: block; margin:5px;'
-      )
-    }
+    this.validateCarousel()
   },
   methods: {
     prevSlide() {
@@ -138,6 +143,27 @@ export default {
         this.currentSlide++
       }
     },
+    validateCarousel() {
+      //Validating slides
+
+      if (Array.isArray(this.slides) && this.slideLength > 0) {
+        //Validate properties for all the slides
+        for (const slide of this.slides) {
+          this.validateProperties(
+            this.requiredProperties,
+            this.optionalProperties,
+            slide
+          )
+        }
+      } else {
+        let msg = `Le corrousel doit avoit au moins un element.`
+        this.errorsSlider.push(msg)
+        console.warn(
+          `%c WARNING!>>> AppCompSlider : slides must be an array of at least one item`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+    },
     //Validate the properties of a specific object (currentObject)
     validateProperties(requiredProperties, optionalProperties, currentObject) {
       let allProperties = requiredProperties.concat(optionalProperties)
@@ -154,6 +180,8 @@ export default {
           `%c WARNING!>>> AppCompSlider : slides ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
           'background: orange; color: white; display: block; margin:5px;'
         )
+        let msg = `Attribut(s) invalide(s): <i>${wrongProperties}</i> .  Consultez la console pour plus de details.`
+        this.errorsSlider.push(msg)
       }
       //Validate if all required properties are present in currentObject
       if (missingRequired.length > 0) {
@@ -161,6 +189,8 @@ export default {
           `%c WARNING!>>>  AppCompQuizSlider : slides missing required ${missingRequired} property. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
           'background: orange; color: white; display: block; margin:5px;'
         )
+        let msg = `Une/certaines propriété(s) sont manquante(s). Consultez la console pour plus de details.`
+        this.errorsSlider.push(msg)
       }
     },
     //Get all the invalids properties from the object

package/src/components/{AppCompTranscript.vue → AppCompContainer.vue}

@@ -1,13 +1,20 @@
 <template>
-  <div id="transcript-container" v-html="content"></div>
+  <div :id="id" v-html="content"></div>
 </template>
 <script>
 export default {
   props: {
+    id: {
+      type: String,
+      default: 'shadow-container'
+    },
     content: {
       type: String,
       default: `Hello Wolrd!`
     }
+  },
+  mounted() {
+    console.log('😶‍🌫️ ', this.$props.id)
   }
 }
 </script>

package/src/components/AppCompInputCheckBoxNext.vue

@@ -166,6 +166,11 @@ fieldset {
   -webkit-box-shadow: inherit;
 }
 
+fieldset{
+  border: inherit;
+}
+
+
 .custom-checkbox {
   width: 100%;
   height: 100%;