fcad-core-dragon 2.0.1-beta.1 → 2.0.1

package/src/components/AppBaseFlipCard.vue

@@ -1,84 +1,84 @@
-<template>
-  <!--
-     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
-    -->
-  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
-    <div class="inside-card" :class="{ flip: isFlipped }">
-      <div class="front-card" name="front-card">
-        <slot name="front-card" />
-      </div>
-      <div class="back-card">
-        <slot name="back-card" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  data() {
-    return {
-      isFlipped: false
-    }
-  },
-  methods: {
-    /**
-     * @fires click to parent componant or page
-     */
-    fnClick() {
-      this.$emit('click', this.$el)
-      this.isFlipped = !this.isFlipped
-    }
-  }
-}
-</script>
-<style lang="scss">
-.flip-card {
-  height: auto;
-  cursor: pointer;
-
-  /***** Parameretre modifiable *****/
-  perspective: 100%;
-  width: 90%;
-
-  .inside-card {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    /***** Parameretre modifiable *****/
-    transform-style: preserve-3d;
-    transition: transform 0.5s;
-
-    &.flip {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-
-    .front-card,
-    .back-card {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-
-      .img-flip-card {
-        width: 90%;
-        height: auto;
-      }
-    }
-
-    .back-card {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-  }
-}
-</style>
+<template>
+  <!--
+     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
+    -->
+  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
+    <div class="inside-card" :class="{ flip: isFlipped }">
+      <div class="front-card" name="front-card">
+        <slot name="front-card" />
+      </div>
+      <div class="back-card">
+        <slot name="back-card" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  data() {
+    return {
+      isFlipped: false
+    }
+  },
+  methods: {
+    /**
+     * @fires click to parent componant or page
+     */
+    fnClick() {
+      this.$emit('click', this.$el)
+      this.isFlipped = !this.isFlipped
+    }
+  }
+}
+</script>
+<style lang="scss">
+.flip-card {
+  height: auto;
+  cursor: pointer;
+
+  /***** Parameretre modifiable *****/
+  perspective: 100%;
+  width: 90%;
+
+  .inside-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    /***** Parameretre modifiable *****/
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+
+    &.flip {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+
+    .front-card,
+    .back-card {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+
+      .img-flip-card {
+        width: 90%;
+        height: auto;
+      }
+    }
+
+    .back-card {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+  }
+}
+</style>

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/AppCompCarousel.vue

@@ -50,9 +50,9 @@
               />
             </div>
             <div v-if="slide.title || slide.hypertext" class="carousel-text">
-              <h3 v-if="slide.title">
+              <p v-if="slide.title" class="carousel-slide-title">
                 {{ slide.title }}
-              </h3>
+              </p>
               <div v-html="slide.hypertext"></div>
             </div>
           </div>

package/src/components/AppCompJauge.vue

@@ -1,74 +1,74 @@
-<template>
-  <div v-if="!error" class="box-g" :class="state">
-    <v-progress-linear
-      class="jauge"
-      :model-value="value"
-      :height="12"
-      :max="maxValue"
-      aria-hidden="true"
-    ></v-progress-linear>
-    <p class="prcnt">{{ getPourcent }} %</p>
-  </div>
-  <div v-else>
-    <div class="warning">
-      <p class="title">Attention</p>
-      <p class="info">
-        Attention les valeurs que vous donnez au composant ne sont pas des
-        nombres.
-      </p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    // props Give value to show progress
-    state: {
-      type: String,
-      default: 'started'
-    },
-    maxValue: {
-      type: Number,
-      default: 100
-    },
-    value: { type: Number, default: 0 },
-    pourcent: { type: Boolean, default: false },
-    fraction: { type: Boolean, default: false }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    getPourcent() {
-      // Calculate on a 100%
-      let result = (this.value * 100) / this.maxValue
-      if (result > 100) return 100
-      else return Math.round(result)
-    },
-    error() {
-      if (typeof this.value != 'number' || typeof this.maxValue != 'number') {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  methods: {}
-}
-</script>
-<style lang="scss">
-.box-g {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  .jauge {
-    width: 70%;
-  }
-
-  .prcnt {
-    margin-left: 10px;
-  }
-}
-</style>
+<template>
+  <div v-if="!error" class="box-g" :class="state">
+    <v-progress-linear
+      class="jauge"
+      :model-value="value"
+      :height="12"
+      :max="maxValue"
+      aria-hidden="true"
+    ></v-progress-linear>
+    <p class="prcnt">{{ getPourcent }} %</p>
+  </div>
+  <div v-else>
+    <div class="warning">
+      <p class="title">Attention</p>
+      <p class="info">
+        Attention les valeurs que vous donnez au composant ne sont pas des
+        nombres.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    // props Give value to show progress
+    state: {
+      type: String,
+      default: 'started'
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+    },
+    value: { type: Number, default: 0 },
+    pourcent: { type: Boolean, default: false },
+    fraction: { type: Boolean, default: false }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    getPourcent() {
+      // Calculate on a 100%
+      let result = (this.value * 100) / this.maxValue
+      if (result > 100) return 100
+      else return Math.round(result)
+    },
+    error() {
+      if (typeof this.value != 'number' || typeof this.maxValue != 'number') {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss">
+.box-g {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .jauge {
+    width: 70%;
+  }
+
+  .prcnt {
+    margin-left: 10px;
+  }
+}
+</style>

package/src/components/AppCompPlayBarProgress.vue

@@ -1,82 +1,82 @@
-<!--@ Description: This component is used to display the playbar associate with the videoPlayer
- @ What it does: The component is used to interacted with the videoPlayer via buttons.
- v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
-<template>
-  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
-  <div ref="$playbar-timeline" class="pb-timeline">
-    <div ref="$progress-area" class="progress-area">
-      <div
-        id="progress-bar"
-        ref="$progress-bar"
-        draggable="false"
-        tabindex="0"
-        class="v-media pb-progress-bar"
-        role="slider"
-        aria-valuemin="0"
-        :aria-label="mediaA11Y.label"
-        :aria-valuenow="mediaA11Y.valNow"
-        :aria-valuemax="mediaA11Y.valMax"
-        :aria-valuetext="mediaA11Y.valueText"
-        @focus="changeFocusState('progressBar', true)"
-        @blur="changeFocusState('progressBar', false)"
-      >
-        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-        <div
-          id="progress-indicator"
-          ref="$progress-indicator"
-          draggable="false"
-          class="progress-indicator"
-          :class="{ 'progress-animation': !progressThumbDown }"
-          :style="{ width: progressBarPercentage + '%' }"
-        >
-          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-          <!-- <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mousedown="
-              savedIsPlaying = isPlaying
-              progressThumbDown = true
-            "
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div> -->
-
-          <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div>
-        </div>
-      </div>
-      <div
-        v-if="tooTipTimeCode"
-        id="seek-tooltip"
-        ref="$seek-tooltip"
-        aria-hidden="true"
-        class="seek-tooltip"
-      >
-        {{ tooTipTimeCode }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $extendsMedia from '../mixins/$mediaMixins'
-
-export default {
-  mixins: [$extendsMedia],
-  data() {
-    return {
-      tooTipTimeCode: null
-    }
-  },
-  mounted() {}
-}
-</script>
+<!--@ Description: This component is used to display the playbar associate with the videoPlayer
+ @ What it does: The component is used to interacted with the videoPlayer via buttons.
+ v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
+<template>
+  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
+  <div ref="$playbar-timeline" class="pb-timeline">
+    <div ref="$progress-area" class="progress-area">
+      <div
+        id="progress-bar"
+        ref="$progress-bar"
+        draggable="false"
+        tabindex="0"
+        class="v-media pb-progress-bar"
+        role="slider"
+        aria-valuemin="0"
+        :aria-label="mediaA11Y.label"
+        :aria-valuenow="mediaA11Y.valNow"
+        :aria-valuemax="mediaA11Y.valMax"
+        :aria-valuetext="mediaA11Y.valueText"
+        @focus="changeFocusState('progressBar', true)"
+        @blur="changeFocusState('progressBar', false)"
+      >
+        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
+        <div
+          id="progress-indicator"
+          ref="$progress-indicator"
+          draggable="false"
+          class="progress-indicator"
+          :class="{ 'progress-animation': !progressThumbDown }"
+          :style="{ width: progressBarPercentage + '%' }"
+        >
+          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
+             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
+          <!-- <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mousedown="
+              savedIsPlaying = isPlaying
+              progressThumbDown = true
+            "
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div> -->
+
+          <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div>
+        </div>
+      </div>
+      <div
+        v-if="tooTipTimeCode"
+        id="seek-tooltip"
+        ref="$seek-tooltip"
+        aria-hidden="true"
+        class="seek-tooltip"
+      >
+        {{ tooTipTimeCode }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $extendsMedia from '../mixins/$mediaMixins'
+
+export default {
+  mixins: [$extendsMedia],
+  data() {
+    return {
+      tooTipTimeCode: null
+    }
+  },
+  mounted() {}
+}
+</script>