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

package/vite.config.js

@@ -0,0 +1,27 @@
+// vite.config.js
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'lib/main.js'),
+      name: 'FcadLib',
+      // the proper extensions will be added
+      fileName: 'fcad-lib'
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+})

package/.prettierrc.js

@@ -1,5 +0,0 @@
-//Special confirugation for pettier for this project. Creating this file is optional in a project.
-module.exports = {
-  // singleQuote: true,
-  // semi: false
-}

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
-}

package/src/components/AppBaseDragChoice.vue

@@ -1,91 +0,0 @@
-<template>
-  <div
-    :id="choiceId"
-    class="quizDragDropChoice"
-    draggable
-    @drop="dropEvent($event)"
-    @dragstart="dragStartEvent($event)"
-    @dragover="dragOverEvent($event)"
-  >
-    <!---is img--->
-    <div v-if="choiceContenu.type == 'img'" class="quizChoiceWithImg">
-      <img :src="choiceContenu.affichage" :alt="choiceContenu.alt" />
-    </div>
-    <!---is text--->
-    <div v-if="choiceContenu.type == 'str'" class="quizChoiceWithText">
-      <div v-html="choiceContenu.affichage"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppBaseDragChoice',
-  props: {
-    choiceId: {
-      type: String,
-      default: ''
-    },
-    choiceValue: {
-      type: String,
-      default: ''
-    },
-    choiceContenu: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  mounted() {},
-  methods: {
-    /**
-     * @param {Object} ev the event
-     * @description to control the ondrop
-     */
-    dropEvent(ev) {
-      ev.preventDefault()
-      return ''
-    },
-    /**
-     * @param {Object} ev the event
-     * @description to control the ondragover
-     */
-    dragOverEvent(ev) {
-      ev.preventDefault()
-      return ''
-    },
-    /**
-     * @param {Object} ev the event
-     * @description to control the onDragStart
-     */
-    dragStartEvent(ev) {
-      ev.dataTransfer.setData('dataId', this.choiceId)
-      ev.dataTransfer.setData('zoneStart', this.$parent.zoneId)
-      ev.dataTransfer.dropEffect = 'move'
-      ev.dataTransfer.effectAllowed = 'move'
-      return ''
-    },
-    /**
-     * @param {Object} ev the event
-     * @description to open the sub menu for accessibility use
-     */
-    openContextZone(ev) {
-      console.log(ev)
-      return ''
-    }
-  }
-}
-</script>
-
-<style scoped>
-.quizDragDropChoice {
-  display: flex;
-  height: 300px;
-  width: 300px;
-  border: solid black 1px;
-}
-</style>

package/src/components/AppBaseDropZone.vue

@@ -1,112 +0,0 @@
-<template>
-  <!--zone is default position for choices-->
-  <div
-    v-if="zoneId === 'default'"
-    class="quizDragDropZoneDefault"
-    @drop="dropEvent($event)"
-    @dragover="dragOverEvent($event)"
-  >
-    <app-base-drag-choice
-      v-for="choice in choicesContenu"
-      :key="choice.choiceId"
-      :choice-value="choice.choiceValue"
-      :choice-id="choice.choiceId"
-      :choice-contenu="choice.choiceContenu"
-    />
-  </div>
-  <!--zone is not default position for choices-->
-  <div
-    v-else
-    class="quizDragDropZone"
-    @drop="dropEvent($event)"
-    @dragover="dragOverEvent($event)"
-  >
-    <!--zone is img-->
-    <div v-if="zoneContenu.type == 'img'" class="quizZoneIsImg">
-      <img :src="zoneContenu.affichage" :alt="zoneContenu.alt" />
-    </div>
-    <!--zone is text-->
-    <div v-if="zoneContenu.type == 'str'" class="quizZoneIsText">
-      <div v-html="zoneContenu.affichage"></div>
-    </div>
-    <app-base-drag-choice
-      v-for="choice in choicesContenu"
-      :key="choice.choiceId"
-      :choice-value="choice.choiceValue"
-      :choice-id="choice.choiceId"
-      :choice-contenu="choice.choiceContenu"
-    />
-  </div>
-</template>
-
-<script>
-import AppBaseDragChoice from './AppBaseDragChoice.vue'
-export default {
-  name: 'AppBaseDropZone',
-  components: {
-    AppBaseDragChoice
-  },
-  props: {
-    zoneId: {
-      type: String,
-      default: ''
-    },
-    zoneContenu: {
-      type: Object,
-      default: () => {}
-    },
-    choicesContenu: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  mounted() {},
-  methods: {
-    /**
-     * @description to control the ondrop
-     * @param {Object} ev the event
-     * @fires drop-event-zone to AppCompDragAndDrop.vue
-     */
-    dropEvent(ev) {
-      ev.preventDefault()
-      const data = ev.dataTransfer.getData('dataId')
-      const zoneStart = ev.dataTransfer.getData('zoneStart')
-      const value = {
-        choiceId: data,
-        zoneEnd: this.zoneId,
-        zoneStart: zoneStart
-      }
-      this.$emit('drop-event-zone', value)
-      return ''
-    },
-    /**
-     * @description to control the ondragover
-     * @param {Object} ev the event
-     */
-    dragOverEvent(ev) {
-      ev.preventDefault()
-      ev.dataTransfer.dropEffect = 'move'
-      return ''
-    }
-  }
-}
-</script>
-<style scoped>
-.quizDragDropZone,
-.quizDragDropZoneDefault {
-  min-height: 300px;
-  border: solid black 1px;
-}
-.quizDragDropZone {
-  width: 300px;
-}
-.quizDragDropZoneDefault {
-  min-width: 300px;
-  display: flex;
-}
-</style>

package/src/components/AppCompBif.vue

@@ -1,120 +0,0 @@
-<!--
- *@ Description: This component is used to display button for each choice
- *@ What it does: The component set value a or b to the store and go to the next page
- *
- *@Note :
- This component effect TOC(disable if the choice is not made) and  NavigationFull(make jump if choise is not made).
- This component need Menu setting to declare where the branching start and when the branching end.
- To switch between choice see getchoiceBif() in PageMixing
- See template for usage exemple
--->
-
-<template>
-  <div class="box-bif">
-    <app-base-button
-      id="btn-bif-a"
-      class="btn-bif"
-      :title="titleA"
-      @click="setChoice('A')"
-    >
-      <div class="choice-a">
-        <slot name="content-a" />
-      </div>
-    </app-base-button>
-
-    <app-base-button
-      id="btn-bif-b"
-      class="btn-bif"
-      :title="titleB"
-      @click="setChoice('B')"
-    >
-      <div class="choice-b">
-        <slot name="content-b" />
-      </div>
-    </app-base-button>
-
-  </div>
-</template>
-<script>
-import AppBaseButton from './AppBaseButton.vue'
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'AppCompBif',
-  components: { AppBaseButton },
-  props: {
-    titleA: {
-      type: String,
-      default: ''
-    },
-    titleB: {
-      type: String,
-      default: ''
-    },
-    consigne: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapGetters(['getUserInteraction', 'getCurrentPage'])
-  },
-  mounted() {},
-  methods: {
-    setChoice(choix) {
-      const userInteraction = this.getProgress()
-      this.$set(userInteraction, 'bifChoice', choix)
-
-      let data
-      let num
-      let dataAct
-
-      // gestion go to next page
-      if (this.getCurrentPage.id.indexOf('0') == 1) {
-        data = this.getCurrentPage.id.substring(
-          this.getCurrentPage.id.indexOf('P') + 2
-        )
-      } else {
-        data = this.getCurrentPage.id.substring(
-          this.getCurrentPage.id.indexOf('P') + 1
-        )
-      }
-
-      num = parseInt(data)
-
-      // gestion go to next activity
-      if (this.$route.meta.activity_ref.indexOf('0') == 1) {
-        dataAct = this.$route.meta.activity_ref.substring(
-          this.$route.meta.activity_ref.indexOf('A') + 2
-        )
-      } else {
-        dataAct = this.$route.meta.activity_ref.substring(
-          this.$route.meta.activity_ref.indexOf('A') + 1
-        )
-      }
-
-      // go to next page
-      this.$router.push({
-        name: `activite_${dataAct}.page_${num + 1}`
-      })
-    },
-    getProgress() {
-      const { id, activity_ref } = this.$route.meta
-
-      const record = this.$store.getters.getUserInteraction
-      if (
-        Object.entries(record).length &&
-        record[activity_ref] &&
-        record[activity_ref][id]
-      ) {
-        const { userInteraction } = record[activity_ref][id]
-        return userInteraction
-      }
-      return {}
-    }
-  }
-}
-</script>

package/src/components/AppCompDragAndDrop.vue

@@ -1,339 +0,0 @@
-<template>
-  <div class="input-box">
-    <!--choices-->
-    <div class="parentQuizChoices" style="display:flex">
-      <app-base-drop-zone
-        key="default"
-        zone-id="default"
-        :choices-contenu="listZoneChoices['default']"
-        @drop-event-zone="dropEventZone($event)"
-      />
-    </div>
-    <!--zones-->
-    <div style="display:flex">
-      <div
-        v-for="singleDragDropZone in inputData.zone_depots"
-        :key="singleDragDropZone.id"
-        :class="
-          `dragdroplist-${singleDragDropZone.id} ` +
-            classInput(singleDragDropZone.id)
-        "
-      >
-        <label
-          :for="`${inputDataId}_${singleDragDropZone.id}`"
-          v-html="singleDragDropZone.contenu.alt"
-        ></label>
-        <app-base-drop-zone
-          :zone-id="singleDragDropZone.id"
-          :zone-contenu="singleDragDropZone.contenu"
-          :choices-contenu="listZoneChoices[singleDragDropZone.id]"
-          @drop-event-zone="dropEventZone($event)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-import AppBaseDropZone from './AppBaseDropZone.vue'
-export default {
-  components: {
-    AppBaseDropZone
-  },
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Object,
-      default: () => {}
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Object,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean, //@todo add shuffle
-      default: false
-    },
-    quizDragDrop: {
-      type: Object,
-      default: () => {}
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizDragDropValue: {}, //not using quizDragDrop because quizDragDrop is a prop
-      listZoneChoices: {} //the choice in the actives zones
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @param {Object} newValue
-     * @fires input-change
-     */
-    quizDragDropValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to receive the value from AppCompQuiz
-     * @param {Object} newValue
-     */
-    quizDragDrop(newValue) {
-      //check if all zone are empty
-      if (Object.keys(newValue).length > 0) {
-        let isReset = true
-        let isAnswered = false
-        for (const key in newValue) {
-          if (Object.hasOwnProperty.call(newValue, key)) {
-            const element = newValue[key]
-            if (element.length > 0) {
-              isReset = false
-            }
-          }
-        }
-        if (isReset) {
-          for (const key in this.listZoneChoices) {
-            if (Object.hasOwnProperty.call(this.listZoneChoices, key)) {
-              const element = this.listZoneChoices[key]
-              if (element.length > 0 && key !== 'default') {
-                isAnswered = true
-              }
-            }
-          }
-        }
-        if (isReset && isAnswered) {
-          //reset choice to default
-          this.listZoneChoices = { default: [] }
-          let listChoices = []
-          for (
-            let index2 = 0;
-            index2 < this.inputData.zone_depots.length;
-            index2++
-          ) {
-            const element = this.inputData.zone_depots[index2]
-            this.$set(this.listZoneChoices, element.id, [])
-          }
-          //fill listZoneChoices to populate the zone
-          for (
-            let index = 0;
-            index < this.inputData.choix_deplaceable.length;
-            index++
-          ) {
-            const choiceType = this.inputData.choix_deplaceable[index]
-            for (let repeat = 0; repeat < choiceType.repetition; repeat++) {
-              const singleChoice = {
-                choiceId: choiceType.id + '_' + repeat,
-                choiceValue: choiceType.id,
-                choiceContenu: choiceType.contenu
-              }
-              listChoices.push(singleChoice)
-            }
-          }
-          this.listZoneChoices['default'] = listChoices
-        }
-        this.quizDragDropValue = newValue
-      }
-    },
-    /**
-     * @description to change the value passed
-     * @fires input-change to AppCompQuiz.vue
-     */
-    listZoneChoices: {
-      handler(newValue) {
-        let newDragDropValue = {}
-        for (const key in newValue) {
-          if (key !== 'default') {
-            this.$set(newDragDropValue, key, [])
-            if (Object.hasOwnProperty.call(newValue, key)) {
-              if (key !== 'default') {
-                const zone = newValue[key]
-                //each item in the array
-                zone.forEach((choice) => {
-                  newDragDropValue[key].push(choice.choiceValue)
-                })
-              }
-            }
-          }
-        }
-        this.$emit('input-change', newDragDropValue)
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-
-  mounted() {
-    this.listZoneChoices = { default: [] }
-    let listChoices = []
-    for (let index2 = 0; index2 < this.inputData.zone_depots.length; index2++) {
-      const element = this.inputData.zone_depots[index2]
-      this.$set(this.listZoneChoices, element.id, [])
-    }
-    //fill listZoneChoices to populate the zone
-    for (
-      let index = 0;
-      index < this.inputData.choix_deplaceable.length;
-      index++
-    ) {
-      const choiceType = this.inputData.choix_deplaceable[index]
-      for (let repeat = 0; repeat < choiceType.repetition; repeat++) {
-        const singleChoice = {
-          choiceId: choiceType.id + '_' + repeat,
-          choiceValue: choiceType.id,
-          choiceContenu: choiceType.contenu
-        }
-        listChoices.push(singleChoice)
-      }
-    }
-
-    if (Object.keys(this.quizDragDrop).length > 0) {
-      for (const key in this.quizDragDrop) {
-        if (Object.hasOwnProperty.call(this.quizDragDrop, key)) {
-          const theZoneChoices = this.quizDragDrop[key]
-          for (let index3 = 0; index3 < theZoneChoices.length; index3++) {
-            const element = theZoneChoices[index3]
-            //find singleChoice
-            const theChoice = listChoices.filter(
-              (choice) => choice.choiceValue == element
-            )[0]
-            //add to zone
-            this.listZoneChoices[key].push(theChoice)
-            //remove from listChoices
-            listChoices = listChoices.filter(
-              (choice) => choice.choiceId !== theChoice.choiceId
-            )
-          }
-        }
-      }
-    }
-    //put the choices left in the default zone
-    this.listZoneChoices['default'] = listChoices
-  },
-
-  methods: {
-    /**
-     * @description check if a values exists in a array
-     * @param {Array} array
-     * @param value
-     * @returns {Boolean}
-     */
-    containsValue(array, value) {
-      return array.includes(value)
-    },
-
-    /**
-     * @description shuffles an array used to randomized the option order if shuffleAnswers is true
-     * @param {Array} array
-     * @returns {Array}
-     * @todo redo shuffle
-     */
-    shuffleArray(array) {
-      let newArray = []
-      let newArray2 = []
-
-      for (let i = 0; i < array.length; i++) {
-        const element = array[i]
-        //todo remove null values
-        newArray.push(element)
-      }
-      while (newArray.length > 0) {
-        let pos = Math.floor(newArray.length * Math.random())
-        newArray2.push(newArray[pos])
-        newArray.splice(pos, 1)
-      }
-      return newArray2
-    },
-
-    /**
-     * @description move 1 choice from zoneStart to zoneEnd
-     * @param {Object} value object with 3 attributes
-     * @param {String} value.zoneStart the original zone of the choice
-     * @param {String} value.zoneEnd the final zone of the choice
-     * @param {String} value.choiceId the choice
-     */
-    dropEventZone(value) {
-      const zoneStart = value.zoneStart
-      const zoneEnd = value.zoneEnd
-      const choiceId = value.choiceId
-      if (zoneStart == zoneEnd) {
-        //do nothing or move
-        //@todo code here
-        console.log('same zone')
-      } else {
-        //find choice in zoneStart
-        const choicesList = this.listZoneChoices[zoneStart]
-        const theChoice = choicesList.filter(
-          (choice) => choice.choiceId == choiceId
-        )[0]
-        //move choice from zoneStart to zoneEnd
-        this.listZoneChoices[zoneEnd].push(theChoice)
-        const newChoicesList = choicesList.filter(
-          (choice) => choice.choiceId !== choiceId
-        )
-        this.listZoneChoices[zoneStart] = newChoicesList
-      }
-    },
-    /**
-     * @description compares 2 array
-     * @param {Array} array1
-     * @param {Array} array2
-     * @returns {Boolean}
-     */
-    isEqual(array1, array2) {
-      // if length is not equal
-      if (array1.length != array2.length) {
-        return false
-      } else {
-        // comapring each element of array
-        for (let i = 0; i < array1.length; i++) {
-          if (array1[i] != array2[i]) {
-            return false
-          }
-        }
-        return true
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.quizZone,
-.quizZoneActive {
-  height: 300px;
-  width: 300px;
-  border: solid 1px;
-}
-
-.quizZone {
-  border-color: black;
-}
-.quizZoneActive {
-  border-color: red;
-}
-</style>