vue-intergrall-plugins 0.0.136 → 0.0.140

package/package.json

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

package/src/lib-components/Cards/Card.vue

@@ -0,0 +1,410 @@
+<template>
+  <div 
+    v-if="origin"
+    :class="[currentClasses]" 
+    :id="`card-${messageIndex ? messageIndex : randomizeValue}`"
+  >
+    <transition name="fade">
+      <span v-if="newMessage" class="new-messages" v-text="`Nova mensagem`"></span>
+    </transition>
+    <div class="card box-shadow">
+      <div class="card-header">
+        <div class="card-author">
+          <fa-icon :icon="currentIcon" />
+          <p 
+            v-if="author"
+            class="text-bold" 
+            v-text="`${tratarTextoLongo(author)}`" 
+            :title="author">
+          </p>
+          <p  
+            v-if="origin === 'principal' && login" 
+            v-text="`| ${login}`" 
+            :title="login">
+          </p> 
+        </div>
+        <div class="card-right">
+          <div class="card-dates">
+            <div 
+              v-if="date" 
+              class="card-date" 
+              :title="`${dictionary.data_criacao}: ${origin === 'outros' ? formataTimezoneData(date) : returnFormataDataHora(date)}`"
+            >
+              <span v-text="origin === 'outros' ? formataTimezoneData(date) : returnFormataDataHora(date)"></span>
+            </div>
+          </div>
+          <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
+            <fa-icon :icon="['fas', 'expand-alt']" />
+          </div>
+        </div>
+      </div>
+      <p 
+        v-if="chipInfos.cod && chipInfos.desc"
+        class="card-chip" 
+        :class="[chipInfosClasses]" 
+        v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`">
+      </p>
+      <p class="card-message" v-html="formattedMessage"></p>
+      <div class="card-footer" v-if="files && files.length">
+        <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
+          <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { textoLongo } from "@/mixins/formatarTexto"
+import { formataTimezoneData, formataDataHora } from "../../services/textFormatting"
+import CardFile from "./CardFile"
+
+export default {
+  components: { CardFile },
+  props: {
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    messageIndex: {
+      type: [Number, String],
+      required: true
+    },
+    domain: {
+      type: String,
+      required: true
+    },
+    hasExpand: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    origin: {
+      type: String,
+      required: true
+    },
+    author: {
+      type: String
+    },
+    login: {
+      type: String
+    },
+    message: {
+      type: String
+    },
+    files: {
+      type: Array
+    },
+    date: {
+      type: String
+    },
+    chipInfos: {
+      type: Object
+    },
+    newMessage: {
+      type: Boolean
+    }
+  },
+  mixins: [textoLongo],
+  computed: {
+    randomizeValue() {
+      return `${(Math.floor(Math.random() * 7770))}${Date.now()}`
+    },
+    formattedMessage() {
+      if(this.message) {
+        const regex = /(\n|\r|&nbsp;)/g
+        if(regex.test(this.message)) return this.message.replace(regex, "<br>")
+      }
+      return this.message
+    },
+    currentIcon() {
+      return this.origin === "outros" ? ['fas', 'user'] : ['fas', 'headset']
+    },
+    currentClasses() {
+      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${this.newMessage ? "newMessage" : ""}`
+    },
+    chipInfosClasses() {
+      if(!this.chipInfos || !this.chipInfos.cod) return ""
+      const { cod } = this.chipInfos
+      switch(cod) {
+        case 9:
+        case "9":
+        case 8:
+        case "8":
+          return "red"
+        case 3:
+        case "3":
+        case 6:
+        case "6":
+          return "yellow"
+        default:
+          return ""
+      }
+    }
+  },
+  methods: {
+    formataTimezoneData(timezoneData) {
+      return formataTimezoneData(timezoneData)
+    },
+    returnFormataDataHora(dataHora) {
+      return formataDataHora(dataHora, false, false, this.dictionary)
+    },
+    cardExpand() {
+      this.$emit("card-expand", this.$props)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+  
+.card-cli, .card-ope {
+  display: flex;
+  width: 95%;
+  margin: 5px 0;
+  position: relative;
+}
+.card-cli.newMessage, .card-ope.newMessage {
+  margin-top: 30px;
+}
+
+.new-messages {
+  position: absolute;
+  top: -30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px 0;
+  background-color: lighten(#FFF249, 15)
+}
+
+.card-cli .card {
+  border-left: 3px solid #90B823;
+}
+
+
+.card-ope {
+  align-self: flex-end;
+  background-color: lighten(#007535, 72);
+}
+.card-ope .card {
+  border-right: 3px solid #007535;
+}
+
+.card {
+  background-color: rgba(255, 255, 255, .9);
+  overflow: hidden;
+  width: 100%;
+  padding: 2.5px 5px;
+}
+.card p {
+  word-break: break-all;
+}
+
+.card-header {
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+.card-header svg {
+  font-size: 1rem
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+}
+.card-author svg {
+  margin-right: 5px;
+}
+
+.card-canal {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.card-dates {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-size: .9rem
+}
+
+.card-date {
+  overflow: hidden;
+  display: flex;
+  align-content: center;
+}
+.card-date span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.card-date svg {
+  margin-right: 5px;
+  color: #232323;
+}
+
+.card-expand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px;
+  cursor: pointer;
+  opacity: .8;
+  transition: opacity 150ms;
+}
+.card-expand:hover {
+  opacity: 1;
+}
+
+.card-footer {
+  margin-top: 5px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+.card-chip {
+  font-size: .8rem;
+  width: fit-content;
+  border-radius: 15px;
+  transition: all 150ms ease-in-out;
+  padding: 2.5px 7px;
+  color: rgb(31, 105, 193);
+  background-color: rgba(207, 216, 244, .6);
+  margin-bottom: 5px;
+}
+.card-chip:hover {
+  background-color: rgba(207, 216, 244, 1);
+}
+.card-chip.orange {
+  color: #e14924;
+  background-color: rgba(228, 92, 58, .15);
+}
+.card-chip.orange:hover {
+  background-color: rgba(228, 92, 58, .2);
+}
+.card-chip.yellow {
+  color: #f4a304;
+  background-color: rgba(252, 191, 73, .15);
+}
+.card-chip.yellow:hover {
+  background-color: rgba(252, 191, 73, .2);
+}
+.card-chip.red {
+  color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, .2);
+}
+.card-chip.red:hover {
+  background-color: rgba(231, 76, 60, .25);
+}
+
+.card-file {
+  width: 50px;
+  height: 50px;
+  margin-right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.file-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.file-item-transition {
+  max-width: 100%;
+  max-height: 100%;
+}
+.file-item .req-loader {
+  position: absolute;
+  top: calc(50% - 12.5px);
+  right: calc(50% - 12.5px);
+}
+.file-item-transition img {
+  max-width: 45px;
+  max-height: 45px;
+}
+
+.file-icon {
+  opacity: .9;
+  transition: opacity 200ms;
+  color: #222;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.file-icon:hover {
+  opacity: 1
+}
+.file-icon:visited {
+  color: inherit;
+}
+svg {
+  font-size: 30px;
+  z-index: 1;
+}
+.file-icon.pdf {
+  position: relative;
+}
+.file-icon.pdf svg {
+  color: rgb(231, 76, 60);
+}
+.file-icon.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-icon.doc {
+  color: #15517F; 
+}
+.file-icon.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, .2);
+  border-radius: 2.5px;
+  cursor: pointer;
+  opacity: .9;
+  transition: opacity 150ms;
+}
+
+.file-img:hover {
+  opacity: 1;
+}
+.file-img img {
+  width: 95%;
+}
+
+</style>

package/src/lib-components/Cards/CardFile.vue

@@ -0,0 +1,117 @@
+<template>
+  <span class="file-item">
+    <transition-group name="fade" mode="out-in" class="file-item-transition">
+      <div v-if="loading" :small="true" key="card-file-loader" class="req-loader slow"></div>
+      <template v-else>
+        <span v-if="imageUrl" class="file-img box-shadow" @click="openFile(imageUrl, true)" key="card-file-img" :title="fileName">
+          <img :src="`${imageUrl}`" :alt="fileName" />
+        </span>
+        <span 
+          v-else
+          class="file-icon"
+          key="card-file-doc" 
+          :class="[currentClass]"
+          @click="openFile(docUrl, false)"
+          :title="fileName"
+          target="_blank" 
+          rel="noreferrer noopener"
+        >
+          <fa-icon :icon="icon" />
+        </span>
+        <a :href="imageUrl ? imageUrl : docUrl" :download="`${fileName}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${fileName}`">
+          <fa-icon :icon="['fas', 'download']" />
+        </a>
+      </template>
+    </transition-group>
+  </span>
+</template>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+import { gerarVariaveisAnexo } from "../../services/formatMessage"
+
+export default {
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    domain: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    currentClass() {
+      return this.fileExt === "pdf" ? "pdf" : "doc"
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      isAnexo: false,
+      imageUrl: "",
+      fileExt: "", 
+      docUrl: "",
+      fileName: "",
+      audio: false,
+      video:  false,
+      icon: []
+    }
+  },
+  mounted() {
+    this.setFileVars()
+  },
+  methods: {
+    setFileVars() {
+      try {
+        const {
+          anexo,
+          imgAnexo,
+          tipoDoc,
+          docAnexo,
+          nomeArquivo,
+          audio,
+          video
+        } = gerarVariaveisAnexo(this.file, { dominio: this.domain });
+    
+        this.isAnexo = anexo;
+        this.imageUrl = imgAnexo;
+        this.fileExt = tipoDoc;
+        this.docUrl = docAnexo;
+        this.fileName = nomeArquivo;
+        this.audio = audio;
+        this.video = video;
+
+        this.generateIcon();
+
+        this.loading = false;
+      }catch(e) {
+        console.error("Erro ao gerar as variaveis dos anexos")
+        console.error(e)
+      }
+    },
+    generateIcon() {
+      this.icon = this.fileExt === "pdf" ? ['fas', 'file-pdf'] : ['fas', 'file-alt']
+    },
+    openFile(link, isImg) {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      const options = !isImg ? `width=${width},height=${height}` : "width=auto,height=auto"
+      window.open(link, "card-file", options)
+    }
+  }
+}
+</script>

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>