fcad-core-dragon 2.1.1 → 2.2.0-beta.1

package/src/components/AppCompInputTextNx.vue

@@ -1,153 +1,154 @@
-<!-- About this Component--
- * Renders a TEXTAREA input to collect input for the Quiz component
- * Related Quiz to question: REPONSE_OUVERTE
- Receives the a data object defined by user
- * Used by AppCompQuiz
- * Uses useQuiz composable
--->
-<template>
-  <div :id="id" class="input-box box-reponse-ouverte">
-    <v-textarea
-      :id="`textArea_${id}`"
-      :value="modelValue"
-      :aria-labelledby="`textArea_${id}`"
-      :placeholder="$t('text.place_holder.for_textarea')"
-      rows="3"
-      no-resize
-      :aria-describedby="`${id}-msg-erreur`"
-      @update:model-value="onInputUpdate($event)"
-    />
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-export default {
-  name: 'AppCompInputTextNx',
-  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    userAnswer: {
-      type: Array,
-      default: () => []
-    },
-    id: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:modelValue', 'enable-submit'],
-  setup(props) {
-    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
-    return { retroType, addRetroStyle, resetRetroStyle }
-  },
-  data() {
-    return {
-      quizInputDataValue: [],
-      result: null,
-      retro: [],
-      messageAccessibility: [],
-      textBox: null
-    }
-  },
-  computed: {
-    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
-
-    inputValue: {
-      get() {
-        return this.modelValue
-      },
-
-      set(newValue) {
-        this.$emit('update:modelValue', [newValue])
-      }
-    }
-  },
-  watch: {
-    inputValue: {
-      handler(newValue) {
-        if (this.$el && this.$el.id !== this.id) return
-        this.$emit('enable-submit', newValue[0] && newValue[0].trim() !== '')
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      let errors = this.validateInputData()
-      if (errors && errors.errorList.length) {
-        return this.$bus.$emit('input-error', { e: this.id, errors })
-      }
-    }
-
-    this.quizInputDataValue = this.inputData
-  },
-  methods: {
-    validateInputData() {
-      let errors = null //array for errors dectected
-
-      if (this.inputData != undefined) return errors
-
-      return errors
-    },
-    /**
-     * @description Method to force update of this.inputsValue.
-     * this force the old value and new value of the input to be tracked by VUE.
-     * @param newValue, the new value of the input
-     */
-
-    onInputUpdate(newValue) {
-      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
-      this.resetRetroStyle([this.retro, this.messageAccessibility])
-
-      this.inputValue = newValue //trigger vue reactivity for inputsValue
-    },
-    /**
-     * @description Component validation method to validate the user input against the solution
-     * can handle logic of Css style to apply (correct/wrong Answer)
-     */
-    validateAnswer() {
-      this.result = this.inputValue.map(
-        (a) =>
-          (a = {
-            filled: a,
-            correct: true
-          })
-      )
-
-      let { classRetro, mesA11y } = this.addRetroStyle(
-        this.solution,
-        this.result,
-        this.inputValue.length
-      )
-
-      this.retro = classRetro
-      this.messageAccessibility = mesA11y
-
-      let tr = this.retroType(this.solution, this.result)
-
-      return {
-        userAnswer: this.result,
-        correctAnswer: null,
-        retroType: tr
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-fieldset {
-  border: inherit;
-}
-</style>
+<!-- About this Component--
+ * Renders a TEXTAREA input to collect input for the Quiz component
+ * Related Quiz to question: REPONSE_OUVERTE
+ Receives the a data object defined by user
+ * Used by AppCompQuiz
+ * Uses useQuiz composable
+-->
+<template>
+  <div :id="id" class="input-box box-reponse-ouverte">
+    <v-textarea
+      :id="`textArea_${id}`"
+      :model-value="modelValue"
+      :aria-labelledby="`textArea_${id}`"
+      :placeholder="$t('text.place_holder.for_textarea')"
+      rows="3"
+      no-resize
+      :aria-describedby="`${id}-msg-erreur`"
+      @update:model-value="onInputUpdate($event)"
+    />
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompInputTextNx',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    userAnswer: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup(props) {
+    const { t } = useI18n()
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+    return { retroType, addRetroStyle, resetRetroStyle, t }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      result: null,
+      retro: [],
+      messageAccessibility: [],
+      textBox: null
+    }
+  },
+  computed: {
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+
+    inputValue: {
+      get() {
+        return this.modelValue
+      },
+
+      set(newValue) {
+        this.$emit('update:modelValue', [newValue])
+      }
+    }
+  },
+  watch: {
+    inputValue: {
+      handler(newValue) {
+        if (this.$el && this.$el.id !== this.id) return
+        this.$emit('enable-submit', newValue[0] && newValue[0].trim() !== '')
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+      if (errors && errors.errorList.length) {
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+      }
+    }
+
+    this.quizInputDataValue = this.inputData
+  },
+  methods: {
+    validateInputData() {
+      let errors = null //array for errors dectected
+      if (this.inputData != undefined) return errors
+      return errors
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     */
+
+    onInputUpdate(newValue) {
+      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+      this.inputValue = newValue //trigger vue reactivity for inputsValue
+    },
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer)
+     */
+    validateAnswer() {
+      this.result = this.inputValue.map(
+        (a) =>
+          (a = {
+            filled: a,
+            correct: true
+          })
+      )
+
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        this.result,
+        this.inputValue.length
+      )
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      let tr = this.retroType(this.solution, this.result)
+
+      return {
+        userAnswer: this.result,
+        correctAnswer: null,
+        retroType: tr
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+fieldset {
+  border: inherit;
+}
+</style>