chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

<template>
   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
   <div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
      
      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom1">
            <ul class="list-unstyled">
               <li v-if="counter.notifications > 0">
                  <b>{{ counter.notifications }}</b> {{ $t('counter.unread_notifications') }}
               </li>
               <li v-if="counter.accompanyingCourses > 0">
                  <b>{{ counter.accompanyingCourses }}</b> {{ $t('counter.assignated_courses') }}
               </li>
               <li v-if="counter.works > 0">
                  <b>{{ counter.works }}</b> {{ $t('counter.assignated_actions') }}
               </li>
               <li v-if="counter.evaluations > 0">
                  <b>{{ counter.evaluations }}</b> {{ $t('counter.assignated_evaluations') }}
               </li>
               <li v-if="counter.tasksAlert > 0">
                  <b>{{ counter.tasksAlert }}</b> {{ $t('counter.alert_tasks') }}
               </li>
               <li v-if="counter.tasksWarning > 0">
                  <b>{{ counter.tasksWarning }}</b> {{ $t('counter.warning_tasks') }}
               </li>
            </ul>
         </div>
      </div>
      
      <!--
      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom2">
            Mon dashboard personnalisé
         </div>
      </div>
      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom3">
            Mon dashboard personnalisé
         </div>
      </div>
      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom4">
            Mon dashboard personnalisé
         </div>
      </div>
      -->

   </div>
</template>

<script>
import { mapGetters } from "vuex";
import Masonry from 'masonry-layout/masonry';

export default {
   name: "MyCustoms",
   computed: {
      ...mapGetters(['counter']),
      noResults() {
         return false
      },
   },
   mounted() {
      const elem = document.querySelector('#dashboards');
      const masonry = new Masonry(elem, {});
   }
}
</script>

<style scoped>
div.custom4,
div.custom3,
div.custom2 {
   font-style: italic;
   color: var(--bs-chill-gray);
}
</style>