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

package/src/components/AppBaseButton.test.js

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppBaseButton from './AppBaseButton.vue'
+
+const defaultProps = { isDisabled: false, type: 'button' }
+
+describe('AppBaseButton Tests', () => {
+  it('should render', () => {
+    const wrapper = mount(AppBaseButton, {
+      props: defaultProps
+    })
+    expect(wrapper.find('button').exists()).toBeTruthy()
+  })
+  it('should fire click event', async () => {
+    const wrapper = mount(AppBaseButton, {
+      props: defaultProps
+    })
+    wrapper.find('button').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+  })
+})

package/src/components/AppBaseButton.vue

@@ -5,12 +5,19 @@
 -->
 
   <button
-    type="button"
+    :type="type"
     class="btn"
-    :class="{ click: isClick, 'btn-visited': isVisited }"
-    :disabled="isActive"
+    :class="{
+      click: isClick,
+      'btn-visited': isVisited,
+      md_disabled: isDisabled
+    }"
+    :aria-disabled="isDisabled ? true : null"
     @click="click"
     @focus="focus"
+    @blur="blur"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
   >
     <slot>Button</slot>
   </button>
@@ -20,15 +27,21 @@
 export default {
   name: 'AppBaseButton',
   props: {
-    isActive: {
+    isDisabled: {
       type: Boolean,
       default: false
+    },
+    type: {
+      type: String,
+      default: 'button'
     }
   },
+  emits: ['click', 'focus', 'blur', 'mouseenter', 'mouseleave'],
   data() {
     return {
       isClick: false,
-      isVisited: false
+      isVisited: false,
+      count: 0
     }
   },
   methods: {
@@ -36,17 +49,38 @@ export default {
      * @fires click to parent component or page
      */
     click() {
+      if (this.isDisabled) return // prevent bouton action on click if button not available
+
       this.$emit('click', this.$el)
+      // this.$emit('click', (this.count += 2))
       this.isClick = !this.isClick
       if (!this.isVisited) {
         this.isVisited = true
       }
     },
     /**
-     * @fires click to parent component or page
+     * @fires focus to parent component or page
      */
     focus() {
       this.$emit('focus', this.$el)
+    },
+    /**
+     * @fires blur to parent component or page
+     */
+    blur() {
+      this.$emit('blur', this.$el)
+    },
+    /**
+     * @fires mouseenter to parent component or page
+     */
+    mouseenter() {
+      this.$emit('mouseenter', this.$el)
+    },
+    /**
+     * @fires mouseenter to parent component or page
+     */
+    mouseleave() {
+      this.$emit('mouseleave', this.$el)
     }
   }
 }
@@ -55,9 +89,7 @@ export default {
 .btn {
   display: flex;
   align-items: center;
-
-  &.md_disabled {
-    pointer-events: none;
-  }
+  //test
+  //test
 }
 </style>

package/src/components/AppBaseErrorDisplay.vue

@@ -4,199 +4,205 @@
 -->
 
 <template>
-  <div class="fd_Error-message">
-    <div v-show="errorMessage === 'errorModule'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore créé le
-            module.
-          </h2>
-          <br />
-          <p>
-            Pour créer le module
-            <br />
-          </p>
-          <ol type="number">
-            <li>
-              Ajoutez un fichier
-              <strong>module.vue</strong>
-              dans le dossier
-              <strong>views</strong>
-            </li>
-            <li>
-              Définissez le
-              <strong>$data</strong>
-              du module.vue
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details
-        </p>
+  <div>
+    <!------------------------ ERRORS APPLICATION ------------------->
+    <div v-if="errorGroup === 'application'" class="fd_Error-type">
+      <div class="box-error">
+        <!--------------------------- Module --------------------->
+        <template v-if="errorType === 'errorModule'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que le fichier ModuleView n'existe
+                pas où est mal configuré
+              </h2>
+
+              <p>Pour la vue du Module</p>
+              <ol type="number">
+                <li>
+                  Créez un fichier
+                  <i>.vue</i>
+                  avec pour nom
+                  <strong>ModuleView.vue</strong>
+                  dans le dossier
+                  <strong>views</strong>
+                </li>
+
+                <li>
+                  Referez-vous wnauirw à la documentation pour la création et la
+                  configuration de la vue du Module
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!---------------------------- Menu ---------------------->
+        <template v-if="errorType === 'errorMenu'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que le fichier SummaryView
+                n'existe pas où est mal configuré
+              </h2>
+
+              <p>Pour la vue du Sommaire (page de MENU)</p>
+              <ol type="number">
+                <li>
+                  Créez un fichier
+                  <i>.vue</i>
+                  avec pour nom
+                  <strong>SummaryView.vue</strong>
+                  dans le dossier
+                  <strong>views</strong>
+                </li>
+                <li>
+                  Referez-vous ensuite à la documentation pour la création et la
+                  configuration de la vue du sommaire
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!---------------------------- Page ---------------------->
+        <template v-if="errorType === 'errorPage'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que vous n'avez pas encore de page
+                d'activité pour votre module.
+              </h2>
+
+              <p>Pour créer une page</p>
+              <ol type="number">
+                <li>
+                  Ajoutez un dossier pour votre activité avec un nom de type
+                  <strong>Axx</strong>
+                  dans le dossier
+                  <strong>module</strong>
+                  <i>( exemple A00 )</i>
+                </li>
+                <li>
+                  Ajoutez un fichier pour votre page avec un nom de type
+                  <strong>Pxx.vue</strong>
+                  dans le dossier
+                  <strong>Axx</strong>
+                  <i>( exemple P01.vue )</i>
+                </li>
+                <li>
+                  Definissez le
+                  <strong>$data</strong>
+                  de la page
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!----------------------- Branching ---------------------->
+        <template v-if="errorType === 'errorMenuBranching'">
+          <div class="red-box">
+            <div class="box">
+              <h2>Erreur d'embranchement.</h2>
+
+              <p>
+                Vous ne pouvez pas avoir de pages d'embranchement(s) dans le
+                dossier A00
+              </p>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a
+                :href="`https://fcaddocumentation.netlify.app/guide/structure.html#pages-d-embranchements-dans-un-dossier`"
+                target="blank"
+              >
+                la documentation
+              </a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!------------------------- 404 -------------------------->
+        <template v-if="errorType === '404'">
+          <div class="red-box">
+            <div class="box">
+              <h2>404 OOPSSS!</h2>
+              <p>Il semble que la page que vous cherchez n'existe pas.</p>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Retrourner à la
+              <router-link :to="{ name: 'menu' }">page d'accueil</router-link>
+            </p>
+          </div>
+        </template>
       </div>
     </div>
-    <!---------------------------------------------------->
-    <div v-if="errorMessage === 'errorMenu'" class="box-error">
-      <div class="red-box">
-        <div class="box">
+    <!------------------- END ERRORS COMPONENTS -------------------->
+    <v-row v-if="errorGroup === 'component'" class="warning-error">
+      <v-col class="box-error">
+        <div class="yellow-box">
           <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore de page de
-            MENU pour votre activité
+            {{ errorTitle || 'Attention erreur dans le composant' }}
           </h2>
-
-          <p>Pour créer la PAGE DE MENU</p>
-          <ol type="number">
-            <li>
-              Ajoutez un dossier avec le nom
-              <strong>A00</strong>
-              dans le dossier
-              <strong>module</strong>
-            </li>
-            <li>
-              Ajoutez un fichier pour votre page de MENU avec un nom de type
-              <strong>Pxx.vue</strong>
-              dans le dossier
-              <strong>A00</strong>
-              <i>( exemple P01.vue )</i>
-            </li>
-            <li>
-              Dans le
-              <strong>$data</strong>
-              de ce la page, mettez la valeur de la variable
-              <strong>type</strong>
-              à
-              <strong>"pg_menu"</strong>
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <!---------------------------------------------------->
-    <div v-if="errorMessage === 'errorPage'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore de page
-            d'activité pour votre module.
-          </h2>
-
-          <p>Pour créer une page</p>
-          <ol type="number">
-            <li>
-              Ajoutez un dossier pour votre activité avec un nom de type
-              <strong>Axx</strong>
-              dans le dossier
-              <strong>module</strong>
-              <i>( exemple A00 )</i>
-            </li>
-            <li>
-              Ajoutez un fichier pour votre page avec un nom de type
-              <strong>Pxx.vue</strong>
-              dans le dossier
-              <strong>Axx</strong>
-              <i>( exemple P01.vue )</i>
-            </li>
-            <li>
-              Definissez le
-              <strong>$data</strong>
-              de la page
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <div v-if="errorMessage === 'errorMenuBranching'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreur d'embranchement.
-          </h2>
-
-          <p>
-            Vous ne pouvez pas avoir de pages d'embranchement(s) dans le dossier
-            A00
-          </p>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a
-            :href="
-              `https://fcaddocumentation.netlify.app/guide/structure.html#pages-d-embranchements-dans-un-dossier`
+          <p>{{ errorText }}</p>
+          <br />
+          <p>Veuillez corriger:</p>
+          <template
+            v-if="
+              errorsList.constructor == Array ||
+              errorsList.constructor == Object
             "
-            target="blank"
           >
-            la documentation
-          </a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <div v-if="errorMessage === '404'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            404 OOPSSS!
-          </h2>
-          <p>Il semble que la page que vous cherchez n'existe pas.</p>
+            <ul>
+              <li
+                v-for="err in errorsList"
+                :key="`error_type_${err}`"
+                v-html="err"
+              ></li>
+            </ul>
+          </template>
+          <template v-if="errorsList.constructor == String">
+            <ul>
+              <li v-html="errorsList"></li>
+            </ul>
+          </template>
         </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Retrourner à la
-          <router-link :to="{ name: 'menu' }">
-            page d'accueil
-          </router-link>
-        </p>
-      </div>
-    </div>
-    <div v-if="errorsList.length > 0" class="box-error">
-      <div class="red-box">
         <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Error: Creation de POPUP!
-          </h2>
-          <ul>
-            <li v-for="(error, index) of errorsList" :key="`${error}_${index}`">
-              {{ error }}
-            </li>
-          </ul>
+          <p class="doc">
+            Visitez
+            <a href="https://fcaddocumentation.netlify.app/" target="blank">
+              la documentation
+            </a>
+            pour plus de details
+          </p>
         </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
+      </v-col>
+    </v-row>
+
+    <!---------------------- END ERRORS COMPONENTS ------------------->
   </div>
 </template>
 
@@ -204,13 +210,25 @@
 export default {
   name: 'AppBaseErrorDisplay',
   props: {
-    errorMessage: { type: String, note: 'Error Message', default: '' },
+    errorGroup: { type: String, default: 'application' }, //group can be: application or component
+    errorType: { type: String, note: 'Error Message', default: '' },
+    errorTitle: {
+      type: String,
+      note: 'Title to display for the error',
+      default: ''
+    },
+    errorText: {
+      type: String,
+      note: 'text to display for the error',
+      default:
+        'Vous avez une/des erreure(s) qui empêche(ent) le bon rendu du composant'
+    },
+    errorsList: { type: Array, default: () => [] },
     docLink: {
       type: String,
       default: 'https://fcaddocumentation.netlify.com/guide/proceduries.html',
       note: 'Documentation link'
-    },
-    errorsList: { type: Array, default: () => [] }
+    }
   }
 }
 </script>
@@ -218,7 +236,7 @@ export default {
 <style lang="scss">
 //**** DO NOT TOUCHE ****/
 //**** ERROR ****/
-.fd_Error-message {
+.fd_Error-type {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -386,7 +404,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  .fd_Error-message {
+  .fd_Error-type {
     width: 100%;
     padding-bottom: 30px;
     background-color: white;

package/src/components/AppBaseFlipCard.vue

@@ -21,6 +21,7 @@ export default {
       default: false
     }
   },
+  emits: ['click'],
   data() {
     return {
       isFlipped: false