vue-intergrall-plugins 1.0.32 → 1.0.33

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

@@ -1,39 +1,55 @@
 <template>
-  <div class="email-item box-shadow" :class="`${isOpen ? isOpenClass : isClosedClass}`">
-    <div class="email-header" @click="toggleIsOpen()">
+  <div :class="['email-item box-shadow', 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>
+          <p class="email-subject" :title="htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)'">
+            {{ htmlEntityToEmoji(replaceUnicodeWithEmoji(tratarTextoLongo(assunto, 30))) || '(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" />
+            <div class="email-to-from-container">
+              <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">
-            <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" />
+            <div class="email-to-from-container">
+              <EmailTo v-for="(recipient, index) in para" :key="`to-${index}`"
+                :currentName="formattedToName(recipient.name, index, para.length)" :mail="recipient.mail"
+                :showMail="para.length === 1" />
+              <div class="email-to-btn" @click.stop="toggleShowInfos()">
+                <fa-icon :icon="['fas', 'caret-down']" />
+              </div>
+              <ul v-if="showInfos" class="email-to-infos box-shadow" v-clickaway="() => showInfos = false" @click.stop>
+                <li v-for="(info, index) in mailInfos" :key="`info-${index}`" class="email-info">
+                  <span v-text="info.label"></span>
+                  {{ info.value }}
+                </li>
+              </ul>
+            </div>
           </template>
         </div>
       </div>
-      <span class="email-date" :title="formataDateHoraDateFns(dataHora, dataServer, dicionario)">
+      <span class="email-date" :title="formattedDate">
         <fa-icon :icon="['fas', 'calendar']" />
-        {{ formataDateHoraDateFns(dataHora, dataServer, dicionario) }}
+        {{ formattedDate }}
       </span>
+      <span v-if="isOpen" :class="['email-actions box-shadow', { active: actionsOpen }]" @click.stop="toggleActions">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+      <ul class="email-actions-list box-shadow" v-if="actionsOpen && isOpen" v-clickaway="closeActions" @click.stop>
+        <li class="email-action" @click="toggleOpenMessage">
+          {{ !openMessage ? 'Visualizar' : 'Esconder' }} texto do e-mail
+        </li>
+      </ul>
     </div>
     <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-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>
+        <section class="email-html" v-html="cleanHtml"></section>
+        <span class="email-raw" v-if="openMessage">{{ mensagem }}</span>
       </div>
     </transition>
     <div v-if="anexos && anexos.length" class="email-files">
@@ -43,10 +59,10 @@
 </template>
 
 <script>
-import EmailFile from "./EmailFile.vue"
-import EmailTo from "./EmailTo.vue"
-import EmailFrom from "./EmailFrom.vue"
-import { textoLongo } from "@/mixins/formatarTexto"
+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';
 
 export default {
@@ -66,98 +82,134 @@ export default {
     },
     from: {
       type: Array,
-      required: false,
       default: () => []
     },
     para: {
       type: Array,
-      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 [] }
+      default: () => []
     },
     iniciarAberto: {
       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'
     },
     sanitizeOptions: {
       type: Object,
-      required: false,
       default: null
     }
   },
   data() {
     return {
-      isOpen: false,
+      isOpen: this.iniciarAberto,
       openMessage: false,
-      actionsOpen: false
-    }
+      actionsOpen: false,
+      showInfos: false
+    };
   },
-  methods: {
-    toggleIsOpen() {
-      this.isOpen = !this.isOpen
-    },
-    toggleActions() {
-      this.actionsOpen = !this.actionsOpen
-    },
-    toggleOpenMessage() {
-      this.openMessage = !this.openMessage
+  computed: {
+    formattedDate() {
+      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario);
     },
-    returnCleanHtml(html) {
-      const options = this.sanitizeOptions ? this.sanitizeOptions : {
-        allowedTags: [
-          'a', 'b', 'br', 'div', 'i', 'p', 'span', 'strong', 'u', 'ul', 'ol', 'li', 'img', 'link'
-        ],
+    cleanHtml() {
+      const defaultOptions = {
+        allowedTags: ['a', 'b', 'br', 'div', 'i', 'p', 'span', 'strong', 'u', 'ul', 'ol', 'li', 'img', 'link'],
         allowedAttributes: {
           'a': ['href'],
           'img': ['src', 'width', 'height', 'alt'],
           'link': ['rel', 'href'],
           '*': ['style']
         }
+      };
+      return this.$sanitize(this.html, this.sanitizeOptions || defaultOptions);
+    },
+    mailInfos() {
+      const formatAsString = (arr) => {
+        let str = ''
+        arr.forEach(({ name, mail }, index) => {
+          str += `${name} <${mail}>${index !== arr.length - 1 ? ', ' : ''}`
+        })
+        return str
       }
-      return this.$sanitize(html, options);
+
+      return [
+        {
+          label: 'De:',
+          value: formatAsString(this.from)
+        },
+        {
+          label: 'Para:',
+          value: formatAsString(this.para)
+        },
+        {
+          label: 'Assunto:',
+          value: this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
+        },
+        {
+          label: 'Data:',
+          value: this.formataDataHora(this.dataHora)
+        },
+      ]
+    },
+  },
+  methods: {
+    toggleShowInfos() {
+      this.showInfos = !this.showInfos
+    },
+    toggleIsOpen() {
+      this.isOpen = !this.isOpen;
+      if (!this.isOpen) this.actionsOpen = false;
+    },
+    toggleActions() {
+      this.actionsOpen = !this.actionsOpen;
+    },
+    toggleOpenMessage() {
+      this.openMessage = !this.openMessage;
+    },
+    closeActions() {
+      this.actionsOpen = false;
+    },
+    formattedName(name, index, length, isOpen) {
+      return `${name}${index !== length - 1 && !isOpen ? ', ' : ''}`;
+    },
+    formattedMail(mail, index, length, isOpen) {
+      return `<${mail}${index !== length - 1 && isOpen ? '>, ' : '>'}`;
+    },
+    formattedToName(name, index, length) {
+      return index === 0 ? `Para: ${name || ''}` : name ? `${name}${index !== length - 1 ? ', ' : ''}` : '';
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -186,7 +238,7 @@ export default {
 
 .email-item {
   flex: 1;
-  margin: 0 10px 10px;
+  margin: 0 0 10px 0;
   color: #222;
   min-height: 60px;
   display: flex;
@@ -206,32 +258,39 @@ export default {
   cursor: pointer;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
+  position: relative;
 }
 
 .email-header-content {
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin: 10px
+  margin: 10px;
+  flex: 1;
+  min-width: 275px;
 }
 
 .email-header-infos {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .email-subject {
-  margin: 0;
+  margin: 0 0 5px 0;
   font-weight: bold;
-  font-size: .9rem;
+  font-size: .95rem;
 }
 
 .email-date {
+  --width: 245px;
   font-size: .8rem;
   margin-right: 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden
+  overflow: hidden;
+  min-width: var(--width);
+  width: var(--width);
+  max-width: var(--width);
 }
 
 .email-content {
@@ -249,13 +308,17 @@ export default {
 .email-actions {
   align-self: flex-end;
   display: flex;
-  border-radius: 5px;
+  border-radius: 10px;
   cursor: pointer;
   align-items: center;
   justify-content: center;
   gap: 3px;
-  padding: 10px 5px;
-  background-color: #FFF;
+  padding: 5px 7px;
+  background-color: #dddddd;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
 }
 
 .email-actions.active {
@@ -263,17 +326,17 @@ export default {
 }
 
 .email-actions>span {
-  width: 7px;
-  height: 7px;
+  width: 4px;
+  height: 4px;
   background-color: #222;
   border-radius: 50%;
 }
 
 .email-actions-list {
   position: absolute;
-  right: 60px;
+  right: 45px;
   width: 250px;
-  top: 15px;
+  top: 5px;
   margin: 0;
   list-style-type: none;
   padding: 0;
@@ -305,11 +368,13 @@ export default {
 }
 
 .email-html {
+  width: 100%;
   max-width: 100%;
   padding: 10px;
 }
 
 .email-raw {
+  width: 100%;
   max-width: 100%;
   font-size: .9rem;
   color: #222;
@@ -321,4 +386,60 @@ export default {
   flex-wrap: wrap;
   width: 100%
 }
+
+.email-header-content,
+.email-header-infos {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.email-to-from-container {
+  margin-bottom: 10px;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  gap: 5px;
+}
+
+.email-to-from-container:last-child {
+  margin-bottom: 0;
+}
+
+.email-to-btn {
+  padding: 5px 15px;
+  margin-left: 5px;
+  font-size: .9rem;
+  cursor: pointer;
+  color: #666;
+}
+
+.email-to-infos {
+  position: absolute;
+  bottom: -315px;
+  border: 1px solid #CCC;
+  z-index: 1;
+  padding: 10px;
+  background-color: #FFF;
+  height: 300px;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 0;
+}
+
+.email-info {
+  width: 100%;
+  font-size: .8rem;
+}
+
+.email-info>span {
+  font-size: .75rem;
+  color: gray;
+  margin-left: 5px;
+}
 </style>

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

@@ -7,8 +7,6 @@
 
 <style scoped>
 .email-to {
-  width: 100%;
-  flex: 1;
   display: flex;
   align-items: center;
 }
@@ -48,16 +46,6 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    },
-    isLastIndex: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    filteredName() {
-      return !this.isLastIndex ? `${this.currentName}, ` : this.currentName
     }
   }
 }