vue-intergrall-plugins 0.0.134 → 0.0.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.134",
+  "version": "0.0.138",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Buttons/SimpleButton.vue

@@ -13,7 +13,7 @@
       </span>
     </template>
     <span class="simple-btn--text" v-text="btnText" v-if="!activeLoader"></span>
-    <Loader v-else />
+    <VueLoader v-else />
   </div>
 </template>
 

package/src/lib-components/Chat/ExpandTextarea.vue

@@ -245,8 +245,6 @@ export default {
     insertEmoji(emoji) {
       try {
         const textarea = this.$refs[`${this.identifier}`]
-        console.log("emoji: ", emoji)
-        console.log(textarea)
         if (document.activeElement === textarea) {
           const cursorStart = textarea.selectionStart
           const cursorEnd = textarea.selectionEnd

package/src/lib-components/Chat/Picker.vue

@@ -214,7 +214,6 @@ export default {
       }else {
         this.filteredList = []
       }
-      console.log("this.filteredList: ", this.filteredList)
     }
   }
 }

package/src/lib-components/Chat/TextFooter.vue

@@ -180,8 +180,6 @@ export default {
     insertEmoji(emoji) {
       try {
         const textarea = document.querySelector(`#text-footer-${this.textId}`)
-        console.log("emoji: ", emoji)
-        console.log(textarea)
         if (document.activeElement === textarea) {
           const cursorStart = textarea.selectionStart
           const cursorEnd = textarea.selectionEnd

package/src/lib-components/Messages/AnexoMensagem.vue

@@ -11,14 +11,14 @@
         <div v-else-if="docAnexo" class="anexo-container">
           <template v-if="audio || video">
             <audio v-if="audio" :src="docAnexo" controls :title="`${tipoDoc} - ${nomeArquivo}`">
-              <p> {{ dictionary.msg_erro_audio }} <a :href="docAnexo" target="_blank"> {{ dictionary.msg_abrir_audio }} </a> </p>
+              <p> {{ dictionary.msg_erro_audio }} <a :href="docAnexo" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_audio }} </a> </p>
             </audio>
             <video v-if="video" :src="docAnexo" controls :title="`${tipoDoc} - ${nomeArquivo}`">
-              <p> {{ dictionary.msg_erro_video }} <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank"> {{ dictionary.msg_abrir_video }} </a> </p>
+              <p> {{ dictionary.msg_erro_video }} <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_video }} </a> </p>
             </video>
           </template>
           <template v-else>
-            <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank" :title="`${tipoDoc} - ${nomeArquivo}`">
+            <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank" rel="noreferrer noopener" :title="`${tipoDoc} - ${nomeArquivo}`">
               <fa-icon :icon="this.icone" />
               <p v-text="nomeArquivo"></p>
             </a>
@@ -28,8 +28,8 @@
             </p>
           </template>
         </div>
-        <a v-if="imgAnexo" :href="imgAnexo" :download="`${nomeArquivo}`" target="_blank"> {{ dictionary.titulo_baixar_img }} <fa-icon :icon="['fas', 'download']" /> </a>
-        <a v-if="docAnexo" :href="docAnexo" :download="`${nomeArquivo}`" target="_blank"> {{ dictionary.titulo_baixar_doc }} <fa-icon :icon="['fas', 'download']" /> </a>
+        <a v-if="imgAnexo" :href="imgAnexo" :download="`${nomeArquivo}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_img }} <fa-icon :icon="['fas', 'download']" /> </a>
+        <a v-if="docAnexo" :href="docAnexo" :download="`${nomeArquivo}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_doc }} <fa-icon :icon="['fas', 'download']" /> </a>
       </div>
     </transition-group>
   </div>

package/src/lib-components/Messages/CardAttachment.vue

@@ -13,11 +13,12 @@
           :class="[iconeClass]"
           @click="abrirAnexo(docAnexo, false)"
           :title="nomeArquivo"
-          target="_blank"
+          target="_blank" 
+          rel="noreferrer noopener"
         >
           <fa-icon :icon="icone" />
         </span>
-        <a :href="imgAnexo ? imgAnexo : docAnexo" :download="`${nomeArquivo}`" target="_blank" key="ra-download-icon" :title="`Download ${nomeArquivo}`">
+        <a :href="imgAnexo ? imgAnexo : docAnexo" :download="`${nomeArquivo}`" target="_blank" rel="noreferrer noopener" key="ra-download-icon" :title="`Download ${nomeArquivo}`">
           <fa-icon :icon="['fas', 'download']" />
         </a>
       </template>

package/src/lib-components/Messages/InteratividadeBotoes.vue

@@ -1,13 +1,36 @@
 <template>
   <div class="interatividade">
-    <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
-      <p v-text="btn.titulo" class="interatividade-titulo"></p>
-    </div>
+    <transition name="show-x">
+      <InteratividadePopup v-if="listaEstaAberta" :lista="listaExpandida" :titulo="objItens.list.title" @close="listaEstaAberta = false" />
+    </transition>
+    <template v-if="arrBotoes.length">
+      <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
+        <p v-text="btn.titulo" class="interatividade-titulo"></p>
+      </div>
+    </template>
+    <template v-else-if="Object.keys(objItens).length">
+      <div class="interatividade-lista">
+        <div class="interatividade-lista-conteudo">
+          <p v-if="objItens.header.text" v-text="objItens.header.text" class="interatividade-lista-titulo"></p>
+          <p v-if="objItens.body.text" v-text="objItens.body.text" class="interatividade-lista-corpo"></p>
+          <p v-if="objItens.footer.text" v-text="objItens.footer.text" class="interatividade-lista-rodape"></p>
+        </div>
+        <p v-if="objItens.list.title" v-text="objItens.list.title" @click="expandirLista" class="interatividade-lista-link"></p>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
+import InteratividadePopup from './InteratividadePopup'
+
 export default {
+  components: {InteratividadePopup},
+  data() {
+    return {
+      listaEstaAberta: false
+    }
+  },
   props: {
     interatividade: {
       type: Object,
@@ -19,13 +42,46 @@ export default {
       return this.interatividade.tipo
     },
     arrBotoes() {
-      return this.interatividade.botoes
+      const { botoes } = this.interatividade
+      return botoes ? botoes : []
+    },
+    objItens() {
+      const { itens } = this.interatividade
+      return itens ? itens : {}
+    },
+    listaExpandida() {
+      try {
+        const { list } = this.objItens
+        const { sections } = list
+        return sections ? sections : []
+      }catch(e) {
+        console.error("Erro ao definir a lista a ser expandida")
+        console.error(e)
+        return []
+      }
+    }
+  },
+  methods: {
+    expandirLista() {
+        this.listaEstaAberta = !this.listaEstaAberta
     }
   }
 }
 </script>
 
 <style>
+  .show-x-enter-active,
+  .show-x-leave-enter {
+    opacity: 1;
+    transform: translateX(0);
+    transition: all 200ms linear;
+  }
+  .show-x-enter,
+  .show-x-leave-to {
+    opacity: 0;
+    transform: translateX(5%);
+  }
+
   .interatividade-btn {
     width: 100%;
     display: flex;
@@ -48,4 +104,38 @@ export default {
     margin: 0;
     padding: 0;
   }
+
+  .interatividade-lista {
+    width: 100%;
+    min-width: 200px;
+    border-radius: 15px;
+    background-color: #FFF;
+    color: #333;
+    margin: 10px 0;
+  }
+  .interatividade-lista-conteudo {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+  .interatividade-lista-titulo {
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+  .interatividade-lista-rodape {
+    color: #818181;
+    margin-top: 5px;
+  }
+  .interatividade-lista-link {
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    color: rgb(0, 110, 255);
+    cursor: pointer;
+    transition: color 200ms ease-in-out;
+  }
+  .interatividade-lista-link:hover {
+    color: rgb(0, 98, 143);
+  }
+  
 </style>

package/src/lib-components/Messages/InteratividadePopup.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="interatividade-popup box-shadow" v-on-clickaway="away">
+    <div class="interatividade-popup-titulo" v-if="titulo">
+      <h1 v-text="titulo"></h1>
+    </div>
+    <div class="interatividade-popup-conteudo" v-for="(objItem, index) in lista" :key="index">
+      <template v-if="objItem.items && objItem.items.length">
+        <div class="interatividade-popup-item" v-for="(item, indexItem) in objItem.items" :key="`${index}${indexItem}`">
+          <p v-if="item.title" v-text="item.title" class="interatividade-popup-item-titulo"></p>
+          <p v-if="item.description" v-text="item.description" class="interatividade-popup-item-desc"></p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  mixins: [ clickaway ],
+  props: {
+    lista: {
+      type: [Array, Object],
+      required: true
+    },
+    titulo: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    away() {
+      this.$emit("close")
+    }
+  }
+}
+</script>
+
+<style>
+  .box-shadow {
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .interatividade-popup {
+    position: absolute;
+    top: -55px;
+    left: -265px;
+    width: 250px;
+    height: auto;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #FFF;
+    border-radius: 15px;
+    color: #333;
+    font-size: .875rem;
+  }
+
+  .interatividade-popup-titulo h1 {    
+    padding: 4px 10px;
+    background-color: #333;
+    color: #FFF;
+    font-size: 1.2em;
+  }
+  
+  .interatividade-popup-item {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+
+  .interatividade-popup-item-desc {
+    font-size: .9em;
+    color: #767676;
+  }
+</style>