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

package/src/components/AppCompInputCheckBoxNext.vue

@@ -1,195 +1,195 @@
-<!-- About this Component--
- * Renders a checkboxe input type  for the Quiz component
- * Related Quiz to question: REPONSE_MULTIPLE
- * Receives the a data object defined by user
- * Used by AppCompQuizNext
--->
-<template>
-  <div class="input-box">
-    <fieldset>
-      <legend
-        :id="`lgd_${inputDataId}`"
-        class="sr-only"
-        tabindex="-1"
-        v-html="$t('quizState.answers')"
-      />
-
-      <template
-        v-for="choixReponse in inputDataValue"
-        :Key="`div_chx_${inputDataId}_${choixReponse.id}`"
-      >
-        <div class="box-checkbox" role="group">
-          <label
-            :key="`lbl_chx_${inputDataId}-${choixReponse.id}`"
-            :for="`chx_${inputDataId}_${choixReponse.id}`"
-            :class="classInput(choixReponse.id)"
-            class="checkbox-label"
-          >
-            <input
-              :id="`chx_${inputDataId}_${choixReponse.id}`"
-              :key="`chx_${inputDataId}_${inputDataId}-${choixReponse.id}`"
-              v-model="quizInputMultipleValue"
-              type="checkbox"
-              :value="choixReponse.id"
-              :name="`btn-checkbox-${inputDataId}`"
-              :disabled="quizLimitActive"
-              class="checkbox-input"
-              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
-            />
-            <span
-              :id="`span_${inputDataId}_${choixReponse.id}`"
-              class="checkbox-contenu"
-              aria-hidden="true"
-              v-html="choixReponse.value"
-            ></span>
-            <span
-              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
-              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
-              class="sr-only"
-            >
-              {{ messageAccessibility(choixReponse.id) }}
-            </span>
-          </label>
-        </div>
-      </template>
-    </fieldset>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputCheckBoxNext',
-
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizInputType: {
-      type: Array,
-      default: () => []
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizLimitActive: {
-      type: Boolean,
-      default: false
-    }, //use to set if quiz should be active or not
-
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-  emits: ['input-change'],
-  setup(props) {
-    const { containsValue, shuffleArray, classInput, messageAccessibility } =
-      useQuiz(toRefs(props))
-
-    return { containsValue, shuffleArray, classInput, messageAccessibility }
-  },
-
-  data() {
-    return {
-      inputDataValue: [],
-      quizInputMultipleValue: [], //not using quizInputMultiple because quizInputMultiple is a prop
-      quizSolution: null
-    }
-  },
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizInputMultipleValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.initQuiz()
-  },
-
-  methods: {
-    initQuiz() {
-      this.quizSolution = this.solution
-      if (this.quizSolution !== null) {
-        this.quizSolution.sort(function (a, b) {
-          return a - b
-        })
-      }
-      this.quizInputMultipleValue = this.quizInputType
-
-      if (this.shuffleAnswers)
-        return (this.inputDataValue = this.shuffleArray(this.inputData))
-
-      this.inputDataValue = this.inputData
-    }
-  }
-}
-</script>
-<style lang="scss">
-fieldset {
-  border: inherit;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  border: inherit;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: inherit;
-  -webkit-box-shadow: inherit;
-}
-
-.custom-checkbox {
-  width: 100%;
-  height: 100%;
-  padding-left: 0;
-
-  input {
-    width: 100%;
-    height: 100%;
-  }
-
-  label {
-    width: 100%;
-    height: 100%;
-
-    &:after,
-    &:before {
-      border: inherit;
-      top: 0px;
-      left: 0px;
-      height: 0;
-      width: 0;
-      background-color: inherit;
-      border: inherit;
-    }
-  }
-}
-</style>
+<!-- About this Component--
+ * Renders a checkboxe input type  for the Quiz component
+ * Related Quiz to question: REPONSE_MULTIPLE
+ * Receives the a data object defined by user
+ * Used by AppCompQuizNext
+-->
+<template>
+  <div class="input-box">
+    <fieldset>
+      <legend
+        :id="`lgd_${inputDataId}`"
+        class="sr-only"
+        tabindex="-1"
+        v-html="$t('quizState.answers')"
+      />
+
+      <template
+        v-for="choixReponse in inputDataValue"
+        :Key="`div_chx_${inputDataId}_${choixReponse.id}`"
+      >
+        <div class="box-checkbox" role="group">
+          <label
+            :key="`lbl_chx_${inputDataId}-${choixReponse.id}`"
+            :for="`chx_${inputDataId}_${choixReponse.id}`"
+            :class="classInput(choixReponse.id)"
+            class="checkbox-label"
+          >
+            <input
+              :id="`chx_${inputDataId}_${choixReponse.id}`"
+              :key="`chx_${inputDataId}_${inputDataId}-${choixReponse.id}`"
+              v-model="quizInputMultipleValue"
+              type="checkbox"
+              :value="choixReponse.id"
+              :name="`btn-checkbox-${inputDataId}`"
+              :disabled="quizLimitActive"
+              class="checkbox-input"
+              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
+            />
+            <span
+              :id="`span_${inputDataId}_${choixReponse.id}`"
+              class="checkbox-contenu"
+              aria-hidden="true"
+              v-html="choixReponse.value"
+            ></span>
+            <span
+              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
+              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
+              class="sr-only"
+            >
+              {{ messageAccessibility(choixReponse.id) }}
+            </span>
+          </label>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputCheckBoxNext',
+
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    quizInputType: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { containsValue, shuffleArray, classInput, messageAccessibility } =
+      useQuiz(toRefs(props))
+
+    return { containsValue, shuffleArray, classInput, messageAccessibility }
+  },
+
+  data() {
+    return {
+      inputDataValue: [],
+      quizInputMultipleValue: [], //not using quizInputMultiple because quizInputMultiple is a prop
+      quizSolution: null
+    }
+  },
+
+  watch: {
+    /**
+     * @description to pass value to AppCompQuiz
+     * @fires input-change to AppCompQuiz.vue
+     */
+    quizInputMultipleValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.quizSolution = this.solution
+      if (this.quizSolution !== null) {
+        this.quizSolution.sort(function (a, b) {
+          return a - b
+        })
+      }
+      this.quizInputMultipleValue = this.quizInputType
+
+      if (this.shuffleAnswers)
+        return (this.inputDataValue = this.shuffleArray(this.inputData))
+
+      this.inputDataValue = this.inputData
+    }
+  }
+}
+</script>
+<style lang="scss">
+fieldset {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: inherit;
+  -webkit-box-shadow: inherit;
+}
+
+.custom-checkbox {
+  width: 100%;
+  height: 100%;
+  padding-left: 0;
+
+  input {
+    width: 100%;
+    height: 100%;
+  }
+
+  label {
+    width: 100%;
+    height: 100%;
+
+    &:after,
+    &:before {
+      border: inherit;
+      top: 0px;
+      left: 0px;
+      height: 0;
+      width: 0;
+      background-color: inherit;
+      border: inherit;
+    }
+  }
+}
+</style>