vue-intergrall-plugins 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
-    "kind-of": "^6.0.3"
+    "kind-of": "^6.0.3",
+    "vue-sanitize": "^0.2.3"
   }
 }

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

@@ -1,21 +1,17 @@
 <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-center">
-      <span v-if="imageURL" class="anexo-img box-shadow" @click="openWindowFromURL(imageURL, true)" :title="`Visualizar ${filename}`">
+    <div v-else key="file-container" class="email-file">
+      <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 mr-5"
-        :class="[iconClass]"
-        @click="openWindowFromURL(docURL, false)"
-        :title="`Visualizar ${filename}`"
-        target="_blank"
-      >
+      <span v-else class="anexo-icone" :class="[iconClass]" @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}`">
+      <a class="anexo-download box-shadow" :href="imageURL ? imageURL : docURL" :download="`${filename}`"
+        target="_blank" :title="`Download ${filename}`">
         <fa-icon :icon="['fas', 'download']" />
       </a>
     </div>
@@ -43,9 +39,16 @@ export default {
 }
 </script>
 <style>
-.mr-5 {
-  margin-right: 5px;
+.email-file {
+  display: flex;
+  align-items: center;
+  min-width: 50px;
+  width: auto;
+  max-width: 100px;
+  height: 70px;
+  position: relative;
 }
+
 .anexo-img {
   display: flex;
   justify-content: center;
@@ -59,37 +62,47 @@ export default {
   opacity: .9;
   transition: opacity 150ms;
 }
+
 .anexo-img:hover {
   opacity: 1;
 }
+
 .anexo-img img {
-  width: 95%;
-  max-height: 50px;
+  max-width: 100%;
+  max-height: 100%;
 }
+
 .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 {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
+  margin-right: 5px;
 }
+
 .anexo-icone:hover {
   opacity: 1
 }
+
 .anexo-icone:visited {
   color: inherit;
 }
+
 .anexo-icone.pdf {
   position: relative;
 }
+
 .anexo-icone.pdf svg {
   color: rgb(231, 76, 60);
 }
+
 .anexo-icone.pdf::after {
   content: "";
   position: absolute;
@@ -98,29 +111,30 @@ export default {
   width: 20px;
   height: 20px;
 }
+
 .anexo-icone.doc {
-  color: #15517F; 
+  color: #15517F;
 }
+
 .anexo-icone.doc::after {
   content: "";
   position: absolute;
   width: 20px;
   height: 20px;
 }
-.align-items-center {
-  align-items: center;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.d-flex {
+
+.anexo-download {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 5px;
+  padding: 5px;
   display: flex;
-}
-.mb-5 {
-    margin-bottom: 5px;
-}
-.mx-5 {
-    margin-left: 5px;
-    margin-right: 5px;
+  justify-content: center;
+  align-items: center;
+  color: #222;
+  background-color: #FFF;
+  z-index: 1;
+  font-size: .8rem
 }
 </style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="email-from">
+    <p class="from" v-if="currentName" v-text="currentName" :title="currentName"></p>
+    <div v-if="showMail" class="additional-container">
+      <span class="additional" v-text="`<${mail}>`" :title="mail"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.email-from {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.email-from .from {
+  font-size: .75rem;
+  font-weight: bold;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.email-from .additional-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.email-from .additional {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 5px;
+  font-size: .75rem;
+  color: gray;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    currentName: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    mail: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    showMail: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isLastIndex: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    filteredName() {
+      return !this.isLastIndex ? `${this.currentName}, ` : this.currentName
+    }
+  }
+}
+</script>

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

@@ -1,58 +1,76 @@
 <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 class="email-item box-shadow" :class="`${isOpen ? isOpenClass : isClosedClass}`">
+    <div class="email-header" @click="toggleIsOpen()">
+      <div class="email-header-content">
+        <div class="email-header-infos">
+          <p class="email-subject" v-text="tratarTextoLongo(assunto || '(Sem assunto)', 30)"
+            :title="assunto || '(Sem assunto)'"></p>
+          <template v-if="from && from.length">
+            <EmailFrom v-for="({ name, mail }, index) in from" :key="`from-${index}`" :currentName="name" :mail="mail"
+              :showMail="from.length == 1" :isLastIndex="index == from.length - 1" />
+          </template>
+          <template v-if="para && para.length && isOpen">
+            <EmailTo v-for="({ name, mail }, index) in para" :key="`to-${index}`"
+              :currentName="index == '0' ? `Para: ${name ? name : ''}` : name ? name : ''" :mail="mail"
+              :showMail="para.length == 1" :isLastIndex="index == para.length - 1" />
+          </template>
         </div>
       </div>
-      <span class="fs-_8 mr-10 text-ellipsis" :title="formataDataHora(dataHora)">
+      <span class="email-date" :title="formataDateHoraDateFns(dataHora, dataServer, dicionario)">
         <fa-icon :icon="['fas', 'calendar']" />
-        {{ formataDataHora(dataHora) }}
+        {{ formataDateHoraDateFns(dataHora, dataServer, dicionario) }}
       </span>
     </div>
-    <div class="d-flex-center w-100 p-15" v-if="estado != 0">
-      <section v-html="html"></section>
+    <transition name="show-y-top">
+      <div class="email-content" v-if="isOpen">
+        <span :class="`email-actions box-shadow${actionsOpen ? ' active' : ''}`" @click="toggleActions()">
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <ul class="email-actions-list box-shadow" v-if="actionsOpen" v-on-clickaway="() => actionsOpen = false">
+          <li class="email-action" @click="toggleOpenMessage()"
+            v-text="`${!openMessage ? 'Visualizar' : 'Esconder'} texto do e-mail`"></li>
+        </ul>
+        <section class="email-html" v-html="returnCleanHtml(html)"></section>
+        <span class="email-raw" v-if="openMessage" v-text="mensagem"></span>
+      </div>
+    </transition>
+    <div v-if="anexos && anexos.length" class="email-files">
+      <EmailFile v-for="(anexo, index) in anexos" :key="index" :anexo="anexo" :dominio="dominio" />
     </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 sanitizeHtml from 'sanitize-html'
 import EmailFile from "./EmailFile.vue"
+import EmailTo from "./EmailTo.vue"
+import EmailFrom from "./EmailFrom.vue"
 import { textoLongo } from "@/mixins/formatarTexto"
+import * as VueClickAway from "vue-clickaway";
 
 export default {
-  mixins: [textoLongo],
-  components: { EmailFile },
+  mixins: [textoLongo, VueClickAway.mixin],
+  components: { EmailFile, EmailTo, EmailFrom },
   props: {
     dominio: {
       type: String,
       required: true
     },
     dicionario: {
-        type: Object,
-        required: true
+      type: Object,
+      required: true
     },
-    de: {
-      type: String,
+    from: {
+      type: Array,
       required: false,
-      default: ""
+      default: () => []
     },
     para: {
-      type: String,
+      type: Array,
       required: false,
-      default: ""
+      default: () => []
     },
     html: {
       type: String,
@@ -83,104 +101,212 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    dataServer: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    isOpenClass: {
+      type: String,
+      required: false,
+      default: 'bg-dark-white-2'
+    },
+    isClosedClass: {
+      type: String,
+      required: false,
+      default: 'bg-light-gray-2'
     }
   },
   data() {
     return {
-      estado: 0
-    }
-  },
-  computed: {
-    siglaNome() {
-      return this.de[0] ? this.de[0].toUpperCase() : ""
+      isOpen: false,
+      openMessage: false,
+      actionsOpen: false
     }
   },
   methods: {
-    toggleEstado() {
-      this.estado = this.estado == 0 ? 1 : 0
+    toggleIsOpen() {
+      this.isOpen = !this.isOpen
+    },
+    toggleActions() {
+      this.actionsOpen = !this.actionsOpen
+    },
+    toggleOpenMessage() {
+      this.openMessage = !this.openMessage
+    },
+    returnCleanHtml(html) {
+      const options = {
+        allowedTags: [
+          'a', 'b', 'br', 'div', 'i', 'p', 'span', 'strong', 'u', 'ul', 'ol', 'li'
+        ],
+        allowedAttributes: {
+          'a': ['href'],
+          '*': ['style']
+        }
+      };
+      return this.$sanitize(html, options);
     }
   }
 }
 </script>
+
+<style scoped>
+.show-y-top-enter-active,
+.show-y-top-leave-enter {
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 200ms linear;
+}
+
+.show-y-top-enter,
+.show-y-top-leave-to {
+  opacity: 0;
+  transform: translateY(-2%);
+}
+</style>
+
 <style>
-    .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: 14.4px;
-    }
-    .fs-_8 {
-        font-size: 12.8px;
-    }
-    .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
-    }
+.bg-dark-white-2 {
+  background-color: #f7f7f7;
+}
+
+.bg-light-gray-2 {
+  background-color: #d8d8d8;
+}
+
+.email-item {
+  flex: 1;
+  margin: 0 10px 10px;
+  color: #222;
+  min-height: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  border-radius: 5px;
+  transition: all 150ms ease-in-out;
+}
+
+.email-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.email-header-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px
+}
+
+.email-header-infos {
+  display: flex;
+  flex-direction: column;
+}
+
+.email-subject {
+  margin: 0;
+  font-weight: bold;
+  font-size: .9rem;
+}
+
+.email-date {
+  font-size: .8rem;
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.email-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 15px;
+  background-color: #FFF;
+  position: relative;
+}
+
+.email-actions {
+  align-self: flex-end;
+  display: flex;
+  border-radius: 5px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 10px 5px;
+  background-color: #FFF;
+}
+
+.email-actions.active {
+  background-color: #dfdfdf;
+}
+
+.email-actions>span {
+  width: 7px;
+  height: 7px;
+  background-color: #222;
+  border-radius: 50%;
+}
+
+.email-actions-list {
+  position: absolute;
+  right: 60px;
+  width: 250px;
+  top: 15px;
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.email-action {
+  background-color: #dfdfdf;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+  font-size: .9rem;
+  user-select: none;
+}
+
+.email-action:nth-child(1) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.email-action:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.email-action:hover {
+  background-color: #CCC;
+}
+
+.email-html {
+  max-width: 100%;
+  padding: 10px;
+}
+
+.email-raw {
+  max-width: 100%;
+  font-size: .9rem;
+  color: #222;
+}
+
+.email-files {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  width: 100%
+}
 </style>