vue-intergrall-plugins 0.0.214 → 0.0.217

package/package.json

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

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

@@ -150,7 +150,15 @@ export default {
   },
   watch: {
     externalFiles() {
-      this.file = this.externalFiles
+      if(this.externalFiles.length + this.file.length > this.fileSettings.max) {
+        this.$emit("reset-file-system")
+        return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+      }
+      this.externalFiles = Array.from(this.externalFiles)
+      this.externalFiles.forEach(files => {
+        this.file.push(files)
+      });
+      // this.file = this.externalFiles
       this.fileSize = this.externalFiles.length
       this.multipleFileUpload()
     }

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

@@ -68,6 +68,7 @@
           @set-file-vars="setFileVars"
           @open-image="openImage"
           @open-file-system="openFileSystem"
+          @reset-file-system="resetFileSystem"
         />
         <BtnExpand 
           v-show="buttons.hasExpand && !audioFile"
@@ -372,6 +373,9 @@ export default {
     openFileSystem() {
       this.$emit("open-file-system")
     },
+    resetFileSystem() {
+      this.$emit("reset-file-system")
+    },
     setAudio(audioObj) {
       const { audioFile, audioSource } = audioObj
       this.audioFile = audioFile

package/src/lib-components/Email/EmailFile.vue

@@ -0,0 +1,131 @@
+<template>
+  <transition-group name="fade" mode="out-in">
+    <VueLoader v-if="isLoading" key="file-loader" />
+    <div v-else key="file-container" class="mb-5 mx-5 d-flex flex-wrap align-items-end">
+      <span v-if="imageURL" class="anexo-img box-shadow" @click="openWindowFromURL(imageURL, true)" :title="`Visualizar ${filename}`">
+        <img :src="`${imageURL}`" :alt="filename" />
+      </span>
+      <span 
+        v-else
+        class="anexo-icone"
+        :class="[iconeClass]"
+        @click="openWindowFromURL(docURL, false)"
+        :title="`Visualizar ${filename}`"
+        target="_blank"
+      >
+        <fa-icon :icon="icon" />
+      </span>
+      <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" :title="`Download ${filename}`">
+        <fa-icon :icon="['fas', 'download']" />
+      </a>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+import { fileHandler } from "@/mixins/fileHandler"
+
+export default {
+  mixins: [fileHandler],
+  props: {
+    anexo: {
+      type: [Object, String],
+      default: () => { return {} }
+    },
+    dominio: {
+      type: String,
+      required: true
+    }
+  },
+  mounted() {
+    this.setFileVars(this.anexo, { dominio: this.dominio })
+  },
+}
+</script>
+<style scoped>
+.anexo-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;
+}
+.anexo-img:hover {
+  opacity: 1;
+}
+.anexo-img img {
+  width: 95%;
+  max-height: 50px;
+}
+.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);
+}
+.anexo-icone:hover {
+  opacity: 1;
+}
+.anexo-icone:visited {
+  color: inherit;
+}
+.anexo-icone svg {
+  font-size: 30px;
+  z-index: 1;
+}
+.anexo-icone.pdf {
+  position: relative;
+}
+.anexo-icone.pdf svg{
+   color: #E74C3C;
+}
+.anexo-icone.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.anexo-icone.doc {
+  color: #15517F; 
+}
+.anexo-icone.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.anexo-icone {
+  opacity: .9;
+  transition: opacity 200ms;
+  color: #222;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.align-items-end {
+  align-items: flex-end;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.d-flex {
+  display: flex;
+}
+.mb-5 {
+    margin-bottom: 5px;
+}
+.mx-5 {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+</style>

package/src/lib-components/Email/EmailItem.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="w-100 text-dark min-h-60 d-flex flex-wrap px-35 border-bottom-1 border-color-gray transition-150">
+    <div class="w-100 d-flex d-flex align-items-center justify-content-between cursor-pointer" @click="toggleEstado()">
+      <div class="d-flex-center m-10">
+        <span class="align-self-start border-radius-round d-flex-center w-36px h-36px border-color-gray border-1 mr-10" v-text="siglaNome"></span>
+        <div class="d-flex flex-column">
+          <p class="text-bold fs-_9" v-text="de" :title="de"></p>
+          <p v-if="estado != 0" class="text-gray fs-_8" v-text="para" :title="para"></p>
+          <p class="text-gray fs-_8" v-text="tratarTextoLongo(assunto, 30)" :title="assunto"></p>
+        </div>
+      </div>
+      <span class="fs-_8 mr-10 text-ellipsis" :title="formataDataHora(dataHora)">
+        <fa-icon :icon="['fas', 'calendar']" />
+        {{ formataDataHora(dataHora) }}
+      </span>
+    </div>
+    <div class="d-flex-center w-100 p-15" v-if="estado != 0">
+      <section v-html="html"></section>
+    </div>
+    <template v-if="anexos && anexos.length">
+      <EmailFile 
+        class="d-flex flex-wrap align-items-center"
+        v-for="(anexo, index) in anexos" :key="index"
+        :anexo="anexo"
+        :dominio="dominio"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import EmailFile from "./EmailFile.vue"
+import { textoLongo } from "@/mixins/formatarTexto"
+
+export default {
+  mixins: [textoLongo],
+  components: { EmailFile },
+  props: {
+    dominio: {
+      type: String,
+      required: true
+    },
+    dicionario: {
+        type: Object,
+        required: true
+    },
+    de: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    para: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    html: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    assunto: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    dataHora: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    mensagem: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    anexos: {
+      type: [Array, String],
+      required: false,
+      default: () => { return [] }
+    },
+    iniciarAberto: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      estado: 0
+    }
+  },
+  computed: {
+    siglaNome() {
+      return this.de[0] ? this.de[0].toUpperCase() : ""
+    }
+  },
+  methods: {
+    toggleEstado() {
+      this.estado = this.estado == 0 ? 1 : 0
+    }
+  }
+}
+</script>
+<style scoped>
+    .w-100 {
+        width: 100%;
+    }
+    .text-dark {
+        color: #333
+    }
+    .min-h-60 {
+        min-height: 60px;
+    }
+    .d-flex {
+        display: flex;
+    }
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+    .border-bottom-1 {
+        border-bottom: 1px solid;
+    }
+    .border-color-gray {
+        border-color: #CCC
+    }
+    .transition-150 {
+        transition: all 150ms ease-in-out;
+    }
+    .cursor-pointer {
+        cursor: pointer;
+    }
+    .justify-content-between {
+        justify-content: space-between;
+    }
+    .align-items-center {
+        align-items: center;
+    }
+    .align-self-start {
+        align-self: flex-start;
+    }
+    .border-radius-round {
+        border-radius: 50%!important;
+    }
+    .w-36px {
+        width: 36px;
+    }
+    .h-36px {
+        height: 36px;
+    }
+    .border-1 {
+        border: 1px solid;
+    }
+    .mr-10 {
+        margin-right: 10px;
+    }
+    .flex-column {
+        display: flex;
+        flex-direction: column
+    }
+    .text-bold {
+        font-weight: bold;
+    }
+    .fs-_9 {
+        font-size: .9rem;
+    }
+    .fs-_8 {
+        font-size: .8rem;
+    }
+    .text-gray {
+        color: gray;
+    }
+    .p-15 {
+        padding: 15px;
+    }
+    .text-ellipsis{
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden
+    }
+    .d-flex-center{
+        display: flex;
+        justify-content: center;
+        align-items: center
+    }
+</style>

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

@@ -124,6 +124,8 @@ export default {
     width: 100%;
     margin-top: 5px;
     overflow: hidden;
+    display: flex;
+    max-height: 300px;
   }
   .anexo-container a, .anexo-container .arquivo-erro{
     padding: 10px 15px 15px 15px;
@@ -148,6 +150,7 @@ export default {
     width: 100%;
   }
   .anexo-container video{
+    flex: 1;
     width: 100%;
     max-width: 350px;
     cursor: pointer;

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

@@ -7,7 +7,7 @@
         :anexos="anexos"
         :dictionary="dictionary"
       />
-    <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg}">
+    <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}">
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
@@ -260,6 +260,9 @@ export default {
     font-size: .85rem;
     word-break: break-word;
   }
+  .mensagem.max-w-60 {
+    max-width: 60%;
+  }
   .mensagem.mapa {
     width: 100%
   }

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

@@ -140,7 +140,7 @@ export default {
 
   .link-preview-image img {
     min-width: 100px;
-    max-width: 100%;
+    max-width: 200px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }