better modalCard, integrated i18n with vuejs-i18n and drupal's strings_i18n_json_export

remain to automaticly export jsons and updated json files with webpack
and to understand how to access nested translations

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -50,7 +50,7 @@
       :items="item.images"
       :index="lightbox_index"
       srcName="src"
-      loop="true"
+      :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
   </article>

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -7,6 +7,12 @@
         <span class="ref">{{ item.field_reference }}</span>
       </header>
       <nav class="tools">
+        <section class="tool close">
+          <span
+            class="btn mdi mdi-close"
+            @click.prevent="onCloseModalCard"
+          />
+        </section>
         <section class="tool flags">
           <span class="btn mdi mdi-folder-outline"/>
           <div class="tool-content">
@@ -27,6 +33,18 @@
           </div>
         </section>
       </nav>
+      <section class="samples">
+        <h3>{{ $t("Validation.Bundle") }}</h3>
+        <ul>
+          <li
+            v-for="sample in item.field_samples"
+            :key="sample.target_id"
+          >
+            <span class="showroom">{{ showrooms[sample.target_id].name }}</span>: {{ sample.location }}
+          </li>
+        </ul>
+      </section>
+      <section class="body" v-html="item.body.processed"/>
     </section>
     <section class="col col-left images" v-switcher>
       <figure
@@ -50,7 +68,7 @@
       :items="item.images"
       :index="lightbox_index"
       srcName="src"
-      loop="true"
+      :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
   </article>
@@ -73,9 +91,13 @@ export default {
   },
   computed: {
     ...mapState({
-      flagcolls: state => state.User.flagcolls
+      flagcolls: state => state.User.flagcolls,
+      showrooms: state => state.Showrooms.showrooms_by_tid
     })
   },
+  created () {
+    console.log('modale item', this.item)
+  },
   methods: {
     ...mapActions({
       flagUnflag: 'User/flagUnflag'
@@ -105,6 +127,9 @@ export default {
           this.loadingFlag = false;
         })
       }
+    },
+    onCloseModalCard (e) {
+      this.$modal.hideAll()
     }
   }
 }

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -64,7 +64,7 @@
         <CoolLightBox
           :items="content.lightbox_items"
           :index="lightbox_index"
-          loop
+          :loop="true"
           @close="lightbox_index = null">
         </CoolLightBox>
         <div class="gallery-wrapper">