fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppBasePage.vue

@@ -47,6 +47,7 @@
 import { computed } from 'vue'
 import { useAppStore } from '../module/stores/appStore'
 import { mapState, mapActions } from 'pinia'
+import { useI18n } from 'vue-i18n'
 
 export default {
   provide() {
@@ -97,12 +98,12 @@ export default {
   setup(props) {
     const store = useAppStore()
     const { activityRef, id: pageID, type: pageType } = props.pageData
-
+    const { t } = useI18n()
     //Getting initial existing userIntaction from store
     const { userInteraction: previousInteraction = {} } =
       store.getPageInteraction(activityRef, pageID)
 
-    return { store, previousInteraction, pageID, pageType }
+    return { store, previousInteraction, pageID, pageType, t }
   },
 
   data() {

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

@@ -1,66 +1,66 @@
-<!--
- @ Description: This component is used to display skeleton screens while content is loading.
-
--->
-
-<template>
-  <div class="skeleton-wrapper">
-    <div v-if="skeletonText" class="skeleton-text">{{ skeletonText }}</div>
-    <div v-for="line in skeletonLines" :key="line" class="skeleton-line" />
-
-    <div v-show="skeletonType == `quiz-choix`">
-      <v-skeleton-loader
-        type="heading, avatar,paragraph,
-      "
-      ></v-skeleton-loader>
-      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
-      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
-    </div>
-
-    <div v-show="skeletonType == `quiz-texte`">
-      <v-skeleton-loader
-        type="heading, image,
-      "
-      ></v-skeleton-loader>
-    </div>
-
-    <div v-show="skeletonType == `quiz-recall`">
-      <v-skeleton-loader type="heading, paragraph,image"></v-skeleton-loader>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppBaseSkeleton',
-  props: {
-    skeletonLines: { type: Number, default: 0 }, //number of skeleton lines to display
-    skeletonText: { type: String, default: `` }, //number of skeleton lines to display
-    skeletonType: { type: String, default: `line` }
-  }
-}
-</script>
-
-<style lang="scss">
-.skeleton-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 8px;
-}
-skeleton-text {
-  font-size: larger;
-}
-.skeleton-line {
-  height: 25px;
-  background: linear-gradient(90deg, #ddd, #eee, #ddd);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.2s infinite linear;
-  border-radius: 4px;
-}
-@keyframes skeleton-loading {
-  to {
-    background-position-x: -200%;
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display skeleton screens while content is loading.
+
+-->
+
+<template>
+  <div class="skeleton-wrapper">
+    <div v-if="skeletonText" class="skeleton-text">{{ skeletonText }}</div>
+    <div v-for="line in skeletonLines" :key="line" class="skeleton-line" />
+
+    <div v-show="skeletonType == `quiz-choix`">
+      <v-skeleton-loader
+        type="heading, avatar,paragraph,
+      "
+      ></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-texte`">
+      <v-skeleton-loader
+        type="heading, image,
+      "
+      ></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-recall`">
+      <v-skeleton-loader type="heading, paragraph,image"></v-skeleton-loader>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppBaseSkeleton',
+  props: {
+    skeletonLines: { type: Number, default: 0 }, //number of skeleton lines to display
+    skeletonText: { type: String, default: `` }, //number of skeleton lines to display
+    skeletonType: { type: String, default: `line` }
+  }
+}
+</script>
+
+<style lang="scss">
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+skeleton-text {
+  font-size: larger;
+}
+.skeleton-line {
+  height: 25px;
+  background: linear-gradient(90deg, #ddd, #eee, #ddd);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.2s infinite linear;
+  border-radius: 4px;
+}
+@keyframes skeleton-loading {
+  to {
+    background-position-x: -200%;
+  }
+}
+</style>