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

package/src/components/AppCompPopUp.vue

@@ -1,583 +0,0 @@
-<template>
-  <div>
-    <div v-show="errors.length <= 0" class="p_popup">
-      <!----------------------- POPUP CUSTOM ---------------------------->
-      <b-modal
-        v-show="isPopupCustom === true"
-        id="popup-custom"
-        ref="popup-custom"
-        :content-class="[pType, pName]"
-        :no-fade="animationOff"
-        :header-close-label="$t('button.alert_close')"
-        v-bind="{ ...pContent.$bvArgs }"
-        @cancel="$cancel(pContent.cb_$cancel)"
-        @ok="$confirm(pContent.cb_$confirm)"
-        @hidden="$close(pContent.cb_$close)"
-      >
-        <template #default>
-          <div class="box-content-popUp" v-html="pContent.hypertext" />
-        </template>
-      </b-modal>
-      <!----------------------- OTHER POPUP  ---------------------------->
-      <b-modal
-        v-show="isPopupCustom === false"
-        :id="dynamicID"
-        ref="someModal"
-        :header-close-label="$t('button.alert_close')"
-        :hide-footer="true"
-        v-bind="pContent.$bvArgs"
-        :content-class="[pType, pName, typeRetro, dynamicID]"
-        :no-fade="animationOff"
-        @hidden="$close(pContent.cb_$close)"
-      >
-        <!------------------- Custom DIV: Use to add any custom Css (visual) to your Popup ------------------------->
-        <!-- <div v-show="pType == 'popup-retro'" class="pop-deco"></div> -->
-        <!----------------------------- END Custom DIV  ------------------------------------->
-        <div class="popUp-title">
-          <h4 v-html="pTitle"></h4>
-        </div>
-
-        <template v-if="contentLength > 0" class="box-content-popUp">
-          <template v-for="(content, _key, index) of pContent">
-            <!-------- Create TEXT element -------------->
-            <p
-              v-if="_key.includes('text') && !_key.includes('hyper')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-            >
-              {{ content }}
-            </p>
-
-            <!-------- Create HTMLelement -------------->
-            <div
-              v-else-if="_key.includes('hypertext')"
-              :id="`${_key}_${index}`"
-              :key="`hyp_${_key}`"
-              v-html="content"
-            />
-
-            <!-------- Create IMAGE element ------------->
-            <img
-              v-else-if="_key.includes('image')"
-              :id="`${_key}_${index}`"
-              :key="`img_${_key}`"
-              :src="content.path"
-              :alt="content.label || 'image'"
-            />
-
-            <!-------- Create LINK element -------------->
-            <a
-              v-else-if="_key.includes('link')"
-              :id="`${_key}_${index}`"
-              :key="`lnk_${_key}`"
-              :href="content.ref"
-              target="_blank"
-              :title="`${content.label}`"
-            >
-              {{ content.label }}
-            </a>
-
-            <!-------- Create VIDEO element ------------->
-            <video
-              v-else-if="_key.includes('video')"
-              :id="`${_key}_${index}`"
-              :key="`vid_${_key}`"
-              :src="content"
-              controls
-              disablepictureinpicture
-              controlslist="nofullscreen nodownload"
-            />
-
-            <!--------Create AUDIO element--------------->
-            <audio
-              v-else-if="_key.includes('audio')"
-              :id="`${_key}_${index}`"
-              :key="`aud_${_key}`"
-              :src="content"
-              controls
-              controlslist="nodownload"
-            />
-          </template>
-        </template>
-        <!--------Default Button of Pop up --------------->
-        <div v-if="pType === 'popup-avert'" class="col-bouton">
-          <app-base-button
-            id="btn-cancel-popup"
-            :name-acces="'Annuler'"
-            class="btn-cancel"
-            :title="$t('button.cancel_pop')"
-            @click="$cancel(pContent.cb_$cancel)"
-          >
-            {{ $t('button.cancel_pop') }} toto
-          </app-base-button>
-          <app-base-button
-            id="btn-confirm-popup"
-            :name-acces="'Confirmer'"
-            class="btn-confirm"
-            :title="$t('button.confirm_pop')"
-            @click="$confirm(pContent.cb_$confirm)"
-          >
-            {{ $t('button.confirm_pop') }}
-          </app-base-button>
-        </div>
-        <div v-if="pType === 'popup-info'" class="popup-bottom-buttons">
-          {{ pType }}
-
-          <button
-            id="popup-retro-close-btn"
-            type="button"
-            :title="$t('button.alert_close')"
-            aria-label="Close"
-            class="close"
-            @click="$close(pContent.cb_$close)"
-          >
-            {{ $t('button.alert_close') }}
-          </button>
-          <portal-target
-            id="end-activity"
-            name="wrap-end-activity"
-          ></portal-target>
-        </div>
-        <!----------------------------------------------------------------->
-        <div v-if="pType === 'popup-endActivity'" class="popup-bottom-buttons">
-          <portal-target
-            id="end-activity"
-            name="wrap-end-activity"
-          ></portal-target>
-        </div>
-      </b-modal>
-    </div>
-    <div v-show="errors.length > 0" class="pop-error">
-      <app-base-error-display :errors-list="errors" :doc-link="docLink" />
-    </div>
-  </div>
-</template>
-
-<script>
-//import { mapGetters } from 'vuex'
-export default {
-  name: 'AppCompPopUp',
-  data() {
-    return {
-      pType: 'popup-info',
-      pName: 'noName',
-      typeRetro: 'none',
-      pContent: {},
-      pContenttype: 'pg_normal',
-      pTitle: '',
-      errors: [],
-      docLink:
-        'https://fcaddocumentation.netlify.app/guide/ressources.html#creer-un-popup-custom',
-      animationOff: false
-    }
-  },
-  computed: {
-    contentLength() {
-      let size = null
-      if (this.pType && this.pType !== 'popup-custom') {
-        if (this.pContent && Object.keys(this.pContent).length > 0)
-          size = Object.keys(this.pContent).length
-      }
-      return size
-    },
-    isPopupCustom() {
-      if (this.pType && this.pType === 'popup-custom') return true
-      return false
-    },
-    popup() {
-      /**
-       * Get the istance of the bvModal that is open and return it as our active popup
-       */
-      let id
-      if (this.isPopupCustom) id = 'popup-custom'
-      else id = `${this.dynamicID}`
-      const p = this.$bvModal._vm.$children.find((p) => p.id === id)
-      return p
-    },
-    dynamicID() {
-      let c
-      c = 'not-popup-custom  full'
-      return c
-    }
-  },
-  mounted() {
-    this.$bus.$on('popup-open', (e) => {
-      if (e) {
-        this.validateContent(e)
-      }
-    })
-    this.$bus.$on('popup-close', (options, cb) => {
-      this.$close(options, cb)
-    })
-    this.$bus.$on('retro-type', (b) => {
-      this.retroType(b)
-    })
-  },
-  beforeUnmount() {
-    this.$bus.$off('popup-open')
-    this.$bus.$off('popup-close')
-    this.$bus.$off('retro-type')
-  },
-  methods: {
-    /**
-     * @description - Validate the data for the component
-     * @param {Object} data
-     */
-    validateContent(data) {
-      const typeList = [
-        'popup-info',
-        'popup-retro',
-        'popup-avert',
-        'popup-custom',
-        'popup-noanswer',
-        'popup-endActivity'
-      ]
-      const callbacksFunctionList = [
-        'cb_$confirm',
-        'cb_$cancel',
-        'cb_$open',
-        'cb_$close'
-      ]
-
-      if (this.errors.length > 0) this.errors = []
-
-      if (data.type) {
-        // validate the type value of popup
-        const validType = typeList.includes(data.type)
-
-        if (!validType) this.errors.push('Invalid value for type')
-      } else this.errors.push('Missing argument: type')
-
-      // validate value of the popup according to popup type
-      // Content must be String|Object
-      if (data.value) {
-        let validObject = false
-        if (
-          data.value.constructor === Object &&
-          Object.keys(data.value).length > 0
-        )
-          validObject = true
-        if (validObject) {
-          let KeywordsList
-          switch (true) {
-            case data.type === 'popup-custom':
-              KeywordsList = ['hypertext', '$bvArgs'] // accepted keyword in value declartion for pop-up custom
-
-              for (const key of Object.keys(data.value)) {
-                // search if key match lists
-                if (![...KeywordsList, ...callbacksFunctionList].includes(key))
-                  this.errors.push(`Invalid key declaration in value : ${key}`)
-
-                // Validating content of hypertext key
-                if (
-                  key.includes('hypertext') &&
-                  data.value[key].constructor != String
-                ) {
-                  this.errors.push(
-                    'Invalid assignment for hypertext. Must be a String'
-                  )
-                }
-
-                // validating content of cb_$ keys
-                if (
-                  key.includes('cb_$') &&
-                  data.value[key].constructor != Function
-                ) {
-                  this.errors.push(
-                    `Invalid assignment for ${key}. Must be a Function`
-                  )
-                }
-
-                // validating content of $bvArgs keys. Must be an array.
-                // validating content of $bvArgs. Content in $bvArgs must be objects
-                if (
-                  (key.includes('$bvArgs') &&
-                    data.value[key].constructor != Array) ||
-                  (data.value[key].constructor === Array &&
-                    data.value[key].length < 1)
-                ) {
-                  this.errors.push(
-                    `Invalid assignment for ${key}. Must be an Array of Objects`
-                  )
-                } else if (
-                  key.includes('$bvArgs') &&
-                  data.value[key].constructor === Array &&
-                  data.value[key].length > 0
-                ) {
-                  let count = 0
-                  data.value[key].forEach((element) => {
-                    if (element.constructor !== Object && count < 1) {
-                      this.errors.push(
-                        `Invalid value(s) found in ${key}. Must be an Array of Objects`
-                      )
-                      count++
-                    }
-                  })
-                }
-              }
-              break
-
-            default:
-              KeywordsList = [
-                'title',
-                'text_',
-                'image_',
-                'video_',
-                'audio_',
-                'link_',
-                'hypertext_',
-                'object',
-                'cb_$',
-                '$bvArgs'
-              ] // accepted keyword in value declaration for pop-up custom
-
-              for (let key of Object.keys(data.value)) {
-                let expectedKey = key
-
-                // search if key match lists
-                if (key.includes('_') && !key.includes('cb_$'))
-                  expectedKey = `${key.split('_')[0]}_`
-
-                //===============================================
-                const test = (regexp) => regexp.test(key) //defining the testing function
-
-                switch (true) {
-                  case ![...KeywordsList, ...callbacksFunctionList].includes(
-                    expectedKey
-                  ):
-                    this.errors.push(`Invalid key declaration in value: ${key}`)
-                    break
-
-                  case test(/\$bvArgs/):
-                    // validating content of $bvArgs keys. Must be an array.
-                    // validating content of $bvArgs. Content in $bvArgs must be objects
-                    if (
-                      data.value[key].constructor !== Array ||
-                      data.value[key].length < 1
-                    )
-                      this.errors.push(
-                        `Invalid assignment for ${key}. Must be an Array of Objects`
-                      )
-                    else {
-                      let count = 0
-                      data.value[key].forEach((element) => {
-                        if (element.constructor !== Object && count < 1) {
-                          this.errors.push(
-                            `Invalid value(s) found in ${key}. Must be an Array of Objects`
-                          )
-                          count++
-                        }
-                      })
-                    }
-                    break
-
-                  case test(/link/):
-                    // Validating content of link element
-                    if (!data.value[key].ref) {
-                      this.errors.push('Missing ref for link')
-                    }
-                    break
-
-                  case test(/image/):
-                    // Validating content of link element
-                    if (!data.value[key].path) {
-                      this.errors.push('Missing path for image')
-                    }
-                    break
-
-                  case test(/cb_\$/):
-                    // validating content of cb_$ keys to be a function
-                    if (data.value[key].constructor != Function)
-                      this.errors.push(
-                        `Invalid assignment for ${key}. Must be a Function`
-                      )
-                    break
-
-                  default: {
-                    if (data.value[key].constructor != String) {
-                      this.errors.push(
-                        'Invalid assignment for hypertext. Must be a String'
-                      )
-                    }
-                  }
-                }
-              }
-          }
-        } else this.errors.push('Invalid object declaration for value')
-      } else this.errors.push('Missing argument - value')
-
-      if (import.meta.env.DEV) {
-        for (const err of this.errors)
-          console.warn(
-            `%c WARNING!>>> POP-UP: ${err} `,
-            'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-          )
-      }
-
-      // No error detected proceed
-      if (!this.errors.length) {
-        if (data.type === 'popup-endActivity') {
-          const { title, ...filtered } = data.value
-          this.pContent = filtered
-          this.pTitle = title
-        } else if (data.type === 'popup-custom') {
-          this.pContent = data.value
-        } else {
-          const { title, ...filtered } = data.value
-          this.pContent = filtered
-          this.pTitle = title
-        }
-        this.pType = data.type
-        this.pName = data.name
-        const cb_open = data.value.cb_$open || null
-        this.$open(cb_open)
-      }
-    },
-
-    /**
-     * @param {String} type
-     */
-    retroType(type) {
-      this.typeRetro = type
-      return this.typeRetro
-    },
-    /**
-     * @description - method to open the popup
-     * @param {Function} cb
-     */
-    $open(cb) {
-      if (this.animationOff === true) this.animationOff = false
-      this.popup.show()
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method to close the popup
-     * @param {Function} cb
-     */
-    $close(options, cb) {
-      //this.animationOff =true
-      if (options && options.animationOff) {
-        this.animationOff = options.animationOff
-      }
-      this.popup.hide()
-      //reset popup class name
-      this.typeRetro = 'none'
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method for action confirm
-     * @param {Function} cb
-     */
-    $confirm(cb) {
-      cb = cb || null
-      this.popup.hide()
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method for action cancel
-     * @param {Function} cb
-     */
-    $cancel(cb) {
-      cb = cb || null
-      this.popup.hide()
-      if (cb && typeof cb === 'function') cb()
-    }
-  }
-}
-</script>
-<style lang="scss">
-.modal {
-  .modal-dialog {
-    max-width: 100% !important;
-    margin: 0 0 !important;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-
-    .popup-info,
-    .popup-noanswer {
-      width: 660px;
-      margin: 10% auto;
-      .modal-header {
-        border-bottom: 0 solid transparent;
-      }
-    }
-
-    .popup-endActivity {
-      justify-content: center;
-      align-items: center;
-      border-radius: 0;
-
-      .modal-header {
-        width: 100%;
-        border: 0 solid transparent;
-
-        .close {
-          padding: 1rem 1.5rem;
-          margin: -1rem -1rem -1rem auto;
-        }
-      }
-
-      .modal-body {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        .popup-bottom-buttons {
-          margin-left: auto;
-          margin-right: auto;
-          margin-top: 32px;
-          margin-bottom: 25px;
-        }
-
-        #hypertext_1_0 {
-          display: flex;
-          justify-content: center;
-
-          p {
-            font-size: 1.5rem;
-            font-weight: bold;
-          }
-        }
-
-        .popUp-title,
-        #end-activity {
-          display: flex;
-
-          .popup_primary_nav_btn {
-            border: #005ea1 solid 2px;
-            margin: 0 12px;
-
-            &:nth-child(1) {
-              color: #005ea1;
-            }
-
-            &:nth-child(2) {
-              background: #005ea1;
-              color: #ffffff;
-            }
-
-            &:hover {
-              border: #ffffff solid 2px;
-              background: #0898ff;
-              color: #ffffff;
-            }
-
-            &:active {
-              background: #00406e;
-              outline: 1px solid #00406e !important;
-              color: #ffffff;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/AppCompPopover.vue

@@ -1,27 +0,0 @@
-<!--
-  @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
- -->
-<template>
-  <b-popover v-bind="$attrs" triggers="hover click" @shown="onShown">
-    <slot>Popover</slot>
-  </b-popover>
-</template>
-
-<script>
-export default {
-  name: 'AppCompPopover',
-  data() {
-    return {}
-  },
-  methods: {
-    /* focus on the popover when it is shown, pressing tab returns the focus on the popover button*/
-    onShown(event) {
-      const button = event.target
-      event.relatedTarget.onblur = () => {
-        button.click()
-      }
-      event.relatedTarget.focus()
-    }
-  }
-}
-</script>