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

package/src/components/AppCompInputCheckBoxNext.vue

@@ -1,205 +0,0 @@
-<!-- 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"
-          >
-            <div class="box-input">
-              <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}`"
-              />
-            </div>
-            <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">
-.box-input {
-  position: relative;
-}
-
-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;
-}
-
-fieldset {
-  border: 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>

package/src/components/AppCompInputDropdownNext.vue

@@ -1,201 +0,0 @@
-<!-- About this Component--
- * Renders a SELECT input to display choices of response for the Quiz component
- * Related Quiz to question: DROPDOWN
- * Receives the a data object defined by user
- * Used by AppCompQuizNext
- * Uses useQuiz composable
--->
-<template>
-  <div class="input-box">
-    <div
-      v-for="singleDropdown in inputData"
-      :key="singleDropdown.id"
-      class="dropdown-container"
-      :class="`dropdownlist-${singleDropdown.id} ${classInput(singleDropdown.id, quizInputTypeValue)}`"
-    >
-      <label
-        :for="`${inputDataId}_${singleDropdown.id}`"
-        v-html="singleDropdown.ennonce"
-      ></label>
-
-      <v-select
-        :id="inputDataId + '_' + singleDropdown.id"
-        v-model="quizInputTypeValue[singleDropdown.id]"
-        item-title="text"
-        :item-props="true"
-        :items="singleDropdown.option"
-        :disabled="quizLimitActive"
-        :open-text="$t('message.dropdown_list') + ' ' + singleDropdown.ennonce"
-        close-text=""
-      ></v-select>
-    </div>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputDropdown',
-
-  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
-    },
-    quizLimitActive: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-
-    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 {
-      quizInputTypeValue: [], //not using quizInputType because quizInputType is a prop
-      quizSolution: null
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @emits input-change
-     */
-    quizInputTypeValue: {
-      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
-        })
-      }
-      //to show the defaultAnswer
-      const defaultAnswer = {
-        value: null,
-        disabled: true,
-        text: this.$t('message.first_option_dropdown'),
-        selected: true
-      }
-      let selectedChoices = []
-      for (let i = 0; i < this.inputData.length; i++) {
-        let singleDropdown = this.inputData[i]
-        if (this.shuffleAnswers)
-          singleDropdown.option = this.shuffleArray(singleDropdown.option)
-
-        if (
-          this.inputData[i].option[0].text !==
-          this.$t('message.first_option_dropdown')
-        ) {
-          singleDropdown.option.unshift(defaultAnswer)
-        }
-        selectedChoices.push(null)
-      }
-      if (this.quizInputType.length == 0) {
-        this.quizInputTypeValue = selectedChoices
-      } else {
-        this.quizInputTypeValue = this.quizInputType
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-.dropdown-container {
-  position: relative;
-}
-
-div.texteatrou {
-  display: inline !important;
-  .cnt-input {
-    display: inline;
-
-    .v-input {
-      display: inline-block !important;
-
-      .v-input__control,
-      .v-field {
-        width: 240px !important;
-        grid-area: inherit !important;
-
-        .v-field__field {
-          height: 25px !important;
-          padding: 0 !important;
-          min-height: inherit !important;
-
-          .v-field__input {
-            padding-top: 0 !important;
-            padding-bottom: 0 !important;
-            min-height: inherit !important;
-
-            .v-select__selection {
-              min-height: inherit !important;
-            }
-          }
-        }
-
-        .v-field__append-inner {
-          margin-right: 6px;
-        }
-      }
-
-      .v-input__details {
-        display: none;
-      }
-    }
-  }
-}
-</style>

package/src/components/AppCompInputRadioNext.vue

@@ -1,158 +0,0 @@
-<!-- About this Component--
- * Renders a RADIO BUTTON input to display choices of response for the Quiz component
- * Related Quiz to question: REPONSE_UNIQUE
- * Receives the a data object defined by user
- * Used by AppCompQuizNext
- * Uses useQuiz composable
--->
-
-<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 quizInputDataValue"
-        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
-      >
-        <div class="box-radio" role="group">
-          <label
-            :key="`lbl_chx_${inputDataId}_${choixReponse.id}`"
-            :for="`chx_${inputDataId}_${choixReponse.id}`"
-            :class="classInput(choixReponse.id)"
-            class="radio-label"
-          >
-            <div class="box-input">
-              <input
-                :id="`chx_${inputDataId}_${choixReponse.id}`"
-                :key="`chx_${inputDataId}_${choixReponse.id}`"
-                v-model="inputUniqueValue"
-                :disabled="quizLimitActive"
-                type="radio"
-                :value="choixReponse.id"
-                :name="`btn-radios-${inputDataId}`"
-                class="radio-input"
-                :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
-              />
-            </div>
-            <span
-              :id="`span_${inputDataId}_${choixReponse.id}`"
-              aria-hidden="true"
-              class="radio-contenu"
-              v-html="choixReponse.value"
-            />
-            <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: 'AppCompInputRadioNext',
-
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizInputType: {
-      type: String,
-      default: ''
-    },
-    solution: {
-      type: String,
-      default: ''
-    }, //may be null
-    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 { shuffleArray, classInput, messageAccessibility } = useQuiz(
-      toRefs(props)
-    )
-
-    return { shuffleArray, classInput, messageAccessibility }
-  },
-  data() {
-    return {
-      quizInputDataValue: [],
-      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    // /**
-    //  * @description to pass value to AppCompQuiz
-    //  * @fires input-change to AppCompQuiz.vue
-    //  */
-    inputUniqueValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.initQuiz()
-  },
-
-  methods: {
-    initQuiz() {
-      this.inputUniqueValue = this.quizInputType
-      if (this.shuffleAnswers) {
-        this.quizInputDataValue = this.shuffleArray(this.inputData)
-      } else {
-        this.quizInputDataValue = this.inputData
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-.box-input {
-  position: relative;
-}
-</style>

package/src/components/AppCompInputTextNext.vue

@@ -1,124 +0,0 @@
-<!-- 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 AppCompQuizNext
- * Uses useQuiz composable
--->
-<template>
-  <div class="input-box box-reponse-ouverte">
-    <v-textarea
-      :id="`textArea_${inputDataId}`"
-      v-model="quizInputTypeValue"
-      :aria-labelledby="`textArea_${inputDataId}`"
-      :class="classInput()"
-      :placeholder="$t('text.place_holder.for_textarea')"
-      rows="3"
-      no-resize
-      :aria-describedby="`${inputDataId}-msg-erreur`"
-      clearable
-    />
-
-    <span :id="`${inputDataId}-msg-erreur`" class="sr-only">
-      {{ messageAccessibility() }}
-    </span>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputTextNext',
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-
-    inputData: {
-      type: Array,
-      default: () => []
-    }, //not used just here to be the same
-
-    quizInputType: {
-      type: String,
-      default: ''
-    },
-
-    solution: {
-      type: String,
-      default: ''
-    },
-    showSolution: {
-      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 { classInput, messageAccessibility } = useQuiz(toRefs(props))
-
-    return { classInput, messageAccessibility }
-  },
-  data() {
-    return {
-      quizInputTypeValue: '' //not using quizInputType because quizInputType is a prop
-    }
-  },
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizInputTypeValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.quizInputTypeValue = this.quizInputType
-  }
-}
-</script>
-<style lang="scss">
-.quiz-texte-troue {
-  .texteatrou {
-    .v-input {
-      display: inline-block !important;
-      width: 150px;
-
-      .v-field {
-        height: 25px;
-
-        input {
-          padding: 0 24px;
-          min-height: 25px !important;
-        }
-      }
-
-      .v-input__details {
-        display: none;
-      }
-    }
-  }
-}
-</style>