vue-intergrall-plugins 1.0.51 → 1.0.53

package/package.json

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

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

@@ -2,8 +2,11 @@
   <div
     :class="['email-item box-shadow-active', isOpen ? isOpenClass : isClosedClass, showInfos ? 'info-open' : '', origem]">
     <div v-if="showInfos" class="email-overlay"></div>
-    <div class="email-author" v-if="autor" :class="[origem]">
+    <div class="email-author" v-if="autor" :class="[origem]" @click="toggleIsOpen">
       <fa-icon :icon="['fas', 'reply']" :class="[origem]" :title="`Enviado por: ${autor}`" />
+      <p class="email-author-name" v-text="returnAuthorName()" :title="returnAuthorName()"></p>
+      <fa-icon :icon="['fas', origem === 'outros' ? 'user' : 'headset']"
+        :title="`E-mail ${origem === 'outros' ? 'recebido' : 'enviado'}`" class="email-to-svg" />
     </div>
     <div class="email-header" @click="toggleIsOpen">
       <p class="email-subject" :title="returnMainValue()">
@@ -12,13 +15,6 @@
       <div class="header-container">
         <div class="email-header-content">
           <div class="email-header-infos">
-            <template v-if="from && from.length">
-              <div class="email-to-from-container" ref="fromContainer">
-                <EmailFrom v-for="(sender, index) in from" :key="`from-${index}`"
-                  :currentName="formattedName(sender.name, index, from.length, isOpen)"
-                  :mail="formattedMail(sender.mail, index, from.length, isOpen)" :showMail="isOpen" />
-              </div>
-            </template>
             <template v-if="para && para.length && isOpen">
               <div class="email-to-from-container">
                 <EmailTo v-for="(recipient, index) in para" :key="`to-${index}`"
@@ -72,7 +68,6 @@
 <script>
 import EmailFile from "./EmailFile.vue";
 import EmailTo from "./EmailTo.vue";
-import EmailFrom from "./EmailFrom.vue";
 import { textoLongo } from "@/mixins/formatarTexto";
 import Clickaway from '@/directives/clickaway';
 
@@ -81,7 +76,7 @@ export default {
   directives: {
     clickaway: Clickaway
   },
-  components: { EmailFile, EmailTo, EmailFrom },
+  components: { EmailFile, EmailTo },
   props: {
     dominio: {
       type: String,
@@ -201,11 +196,17 @@ export default {
   },
   mounted() {
     this.updateIframeContent();
-    this.updateFromContainerMaxWidth()
 
     if (this.refKey) this.$root.$refs[`${refKey}`] = this
   },
   methods: {
+    returnAuthorName() {
+      const { mail, name } = this.from[0]
+      if (!name) return mail
+      if (!mail) return name
+      if (this.isOpen) return `${name} (${mail})`
+      return name
+    },
     updateIframeContent() {
       this.$nextTick(() => {
         if (this.isOpen) {
@@ -218,15 +219,6 @@ export default {
         }
       })
     },
-    updateFromContainerMaxWidth() {
-      this.$nextTick(() => {
-        const fromContainer = this.$refs.fromContainer
-        const emailDate = this.$refs.emailDate
-        if (!fromContainer || !emailDate) return
-        const MARGIN = 15
-        fromContainer.style.maxWidth = `calc(100% - ${emailDate.getBoundingClientRect().width + MARGIN}px)`
-      })
-    },
     adjustIframeHeight() {
       this.$nextTick(() => {
         const iframe = this.$refs.emailIframe;
@@ -350,19 +342,24 @@ export default {
   border-left: 3px solid #33B8DF;
 }
 
+.email-author-name {
+  margin: 0 5px;
+}
+
 .email-author.outros {
   color: #33B8DF;
-  justify-content: flex-end;
-  transform: rotateY(180deg) translateY(-3px);
+}
+
+.email-author.outros>svg:nth-child(1) {
+  transform: rotate(180deg);
 }
 
 .email-author.principal {
-  justify-content: flex-end;
   color: #ebb552;
 }
 
 .email-item.principal {
-  border-right: 3px solid #ebb552;
+  border-left: 3px solid #ebb552;
 }
 
 .email-item.info-open {
@@ -457,6 +454,10 @@ export default {
 .email-actions>span {
   width: 4px;
   height: 4px;
+  min-width: 4px;
+  min-height: 4px;
+  max-width: 4px;
+  max-height: 4px;
   background-color: #222;
   border-radius: 50%;
 }
@@ -531,6 +532,7 @@ export default {
   min-width: 250px;
   overflow: hidden;
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   flex: 1;
   gap: 5px;
@@ -581,6 +583,7 @@ export default {
   font-weight: bold;
   transform: translateY(-2px);
   width: 100%;
+  cursor: pointer;
 }
 
 .email-subject-secondary {
@@ -591,4 +594,8 @@ export default {
   font-size: .7rem;
   color: gray;
 }
+
+.email-to-svg {
+  font-size: .85rem;
+}
 </style>