vue-intergrall-plugins 1.1.90 → 1.2.0

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

@@ -1,270 +1,270 @@
-<template>
-  <div class="email-blocker" @click="close">
-    <div class="email-blocker-content konecta-box-shadow" @click.stop>
-      <svg @click="close" class="btn-exit" fill="var(--exit-button-color)" width="18px" height="18px"
-        viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="var(--exit-button-color)">
-        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-        <g id="SVGRepo_iconCarrier">
-          <path
-            d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z">
-          </path>
-        </g>
-      </svg>
-      <h1 class="email-title" v-text="assunto ? replaceUnicodeWithEmoji(htmlEntityToEmoji(assunto)) : '(Sem assunto)'">
-      </h1>
-      <table class="email-content-table">
-        <tbody>
-          <tr>
-            <th>
-              De:
-            </th>
-            <td>
-              <template v-if="from && from.length">
-                <span v-for="(sender, index) in from" :key="`from-${index}`">
-                  {{ formattedName(sender.name, index, from.length, true) }}
-                  {{ formattedMail(sender.email, index, from.length, true) }}
-                </span>
-              </template>
-              <span v-else> -- </span>
-            </td>
-          </tr>
-          <tr>
-            <th>
-              Para:
-            </th>
-            <td>
-              <template v-if="para && para.length">
-                <span v-for="(recipient, index) in para" :key="`to-${index}`">
-                  {{ formattedToName(recipient.name, index, para.length) }}
-                  {{ `<${recipient.email}>` }}
-                </span>
-              </template>
-              <span v-else> -- </span>
-            </td>
-          </tr>
-          <tr v-if="dataHora">
-            <th>Data:</th>
-            <td>{{ formataDataHora(dataHora, true, false) }} - {{ formattedDate }}</td>
-          </tr>
-          <template v-if="additionalTableData && additionalTableData.length">
-            <tr v-for="(data, index) in additionalTableData" :key="`info-${index}`">
-              <th v-text="data.label"></th>
-              <td v-text="data.value"></td>
-            </tr>
-          </template>
-          <tr v-if="anexos && anexos.length">
-            <th>Anexos:</th>
-            <td>
-              <div class="email-file-content">
-                <EmailFile v-for="(anexo, index) in anexos" :key="index" :anexo="anexo" :dominio="dominio" />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <hr class="email-divisor" />
-      <div class="email-raw-content">
-        <h2>Mensagem original</h2>
-        <div v-text="html || mensagem"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { textoLongo } from "@/mixins/formatarTexto"
-import EmailFile from './EmailFile'
-
-export default {
-  components: { EmailFile },
-  mixins: [textoLongo],
-  props: {
-    dicionario: {
-      type: Object
-    },
-    from: {
-      type: Array
-    },
-    para: {
-      type: Array
-    },
-    html: {
-      type: String
-    },
-    assunto: {
-      type: String
-    },
-    dataHora: {
-      type: String
-    },
-    mensagem: {
-      type: String
-    },
-    anexos: {
-      type: Array,
-      default: () => []
-    },
-    dominio: {
-      type: String,
-      required: true
-    },
-    additionalTableData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    formattedDate() {
-      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario)
-    }
-  },
-  data() {
-    return {
-      secondaryBlocker: false,
-      imageSource: ""
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    formattedName(name, index, length, isOpen) {
-      if (!name) return '';
-      return `${name}${index !== length - 1 && !isOpen ? ', ' : ''}`;
-    },
-    formattedMail(email, index, length, isOpen) {
-      if (!email) return '';
-      return `<${email}${index !== length - 1 && isOpen ? '>, ' : '>'}`;
-    },
-    formattedToName(name, index, length) {
-      if (!name) return '';
-      return index === 0 ? `${name || ''}` : name ? `${name}${index !== length - 1 ? ', ' : ''}` : '';
-    }
-  }
-}
-</script>
-
-<style scoped>
-.btn-exit {
-  cursor: pointer;
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  z-index: 1;
-}
-
-.konecta-box-shadow {
-  box-shadow: var(--konecta-box-shadow);
-}
-
-.email-blocker {
-  --konecta-pink: #d54286;
-  --konecta-light: #f8f9fa;
-  --konecta-dark: #212529;
-  --white: #fff;
-  --white-shadow: rgba(255, 255, 255, 0.5);
-  --konecta-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  --gray-3: #e2e6ea;
-  --exit-button-color: #999;
-  font-family: 'Roboto', sans-serif;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 99;
-  background-color: var(--white-shadow);
-  overflow: visible;
-}
-
-.email-blocker-content {
-  width: 90%;
-  height: 90%;
-  min-width: 300px;
-  min-height: 300px;
-  max-width: 90%;
-  max-height: 90%;
-  overflow: hidden auto;
-  position: relative;
-  background-color: var(--white);
-  color: var(--konecta-dark);
-  border-radius: 6px;
-}
-
-.email-title {
-  font-size: 17.6px;
-  width: 100%;
-  background-color: var(--konecta-light);
-  color: var(--konecta-pink);
-  border-bottom: 1px solid var(--gray-3);
-  padding: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  margin: 0 0 10px 0;
-  position: relative;
-}
-
-.email-content-table {
-  padding: 0;
-  margin: 0 10px 10px;
-  font-size: 15.2px;
-  border-collapse: collapse;
-  width: calc(100% - 20px);
-}
-
-.email-content-table th,
-.email-content-table td {
-  border: solid thin var(--gray-3);
-}
-
-.email-content-table th {
-  min-width: 100px;
-  text-align: left;
-  vertical-align: text-top;
-  padding: 12px 20px;
-  font-weight: 400;
-  border-right: unset;
-}
-
-.email-divisor {
-  margin-top: 15px;
-  margin-bottom: 10px;
-  height: 1px;
-  width: 100%;
-  background: var(--gray-3);
-  border: unset;
-}
-
-.email-content-table td {
-  padding: 8px;
-  border-left: unset;
-}
-
-.email-raw-content {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 0 15px 15px;
-  max-width: 100%;
-}
-
-.email-raw-content h2 {
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
-}
-
-.email-file-content {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="email-blocker" @click="close">
+    <div class="email-blocker-content konecta-box-shadow" @click.stop>
+      <svg @click="close" class="btn-exit" fill="var(--exit-button-color)" width="18px" height="18px"
+        viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="var(--exit-button-color)">
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+        <g id="SVGRepo_iconCarrier">
+          <path
+            d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z">
+          </path>
+        </g>
+      </svg>
+      <h1 class="email-title" v-text="assunto ? replaceUnicodeWithEmoji(htmlEntityToEmoji(assunto)) : '(Sem assunto)'">
+      </h1>
+      <table class="email-content-table">
+        <tbody>
+          <tr>
+            <th>
+              De:
+            </th>
+            <td>
+              <template v-if="from && from.length">
+                <span v-for="(sender, index) in from" :key="`from-${index}`">
+                  {{ formattedName(sender.name, index, from.length, true) }}
+                  {{ formattedMail(sender.email, index, from.length, true) }}
+                </span>
+              </template>
+              <span v-else> -- </span>
+            </td>
+          </tr>
+          <tr>
+            <th>
+              Para:
+            </th>
+            <td>
+              <template v-if="para && para.length">
+                <span v-for="(recipient, index) in para" :key="`to-${index}`">
+                  {{ formattedToName(recipient.name, index, para.length) }}
+                  {{ `<${recipient.email}>` }}
+                </span>
+              </template>
+              <span v-else> -- </span>
+            </td>
+          </tr>
+          <tr v-if="dataHora">
+            <th>Data:</th>
+            <td>{{ formataDataHora(dataHora, true, false) }} - {{ formattedDate }}</td>
+          </tr>
+          <template v-if="additionalTableData && additionalTableData.length">
+            <tr v-for="(data, index) in additionalTableData" :key="`info-${index}`">
+              <th v-text="data.label"></th>
+              <td v-text="data.value"></td>
+            </tr>
+          </template>
+          <tr v-if="anexos && anexos.length">
+            <th>Anexos:</th>
+            <td>
+              <div class="email-file-content">
+                <EmailFile v-for="(anexo, index) in anexos" :key="index" :anexo="anexo" :dominio="dominio" />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <hr class="email-divisor" />
+      <div class="email-raw-content">
+        <h2>Mensagem original</h2>
+        <div v-text="html || mensagem"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { textoLongo } from "@/mixins/formatarTexto"
+import EmailFile from './EmailFile'
+
+export default {
+  components: { EmailFile },
+  mixins: [textoLongo],
+  props: {
+    dicionario: {
+      type: Object
+    },
+    from: {
+      type: Array
+    },
+    para: {
+      type: Array
+    },
+    html: {
+      type: String
+    },
+    assunto: {
+      type: String
+    },
+    dataHora: {
+      type: String
+    },
+    mensagem: {
+      type: String
+    },
+    anexos: {
+      type: Array,
+      default: () => []
+    },
+    dominio: {
+      type: String,
+      required: true
+    },
+    additionalTableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    formattedDate() {
+      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario)
+    }
+  },
+  data() {
+    return {
+      secondaryBlocker: false,
+      imageSource: ""
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+    formattedName(name, index, length, isOpen) {
+      if (!name) return '';
+      return `${name}${index !== length - 1 && !isOpen ? ', ' : ''}`;
+    },
+    formattedMail(email, index, length, isOpen) {
+      if (!email) return '';
+      return `<${email}${index !== length - 1 && isOpen ? '>, ' : '>'}`;
+    },
+    formattedToName(name, index, length) {
+      if (!name) return '';
+      return index === 0 ? `${name || ''}` : name ? `${name}${index !== length - 1 ? ', ' : ''}` : '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.btn-exit {
+  cursor: pointer;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 1;
+}
+
+.konecta-box-shadow {
+  box-shadow: var(--konecta-box-shadow);
+}
+
+.email-blocker {
+  --konecta-pink: #d54286;
+  --konecta-light: #f8f9fa;
+  --konecta-dark: #212529;
+  --white: #fff;
+  --white-shadow: rgba(255, 255, 255, 0.5);
+  --konecta-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  --gray-3: #e2e6ea;
+  --exit-button-color: #999;
+  font-family: 'Roboto', sans-serif;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+  background-color: var(--white-shadow);
+  overflow: visible;
+}
+
+.email-blocker-content {
+  width: 90%;
+  height: 90%;
+  min-width: 300px;
+  min-height: 300px;
+  max-width: 90%;
+  max-height: 90%;
+  overflow: hidden auto;
+  position: relative;
+  background-color: var(--white);
+  color: var(--konecta-dark);
+  border-radius: 6px;
+}
+
+.email-title {
+  font-size: 17.6px;
+  width: 100%;
+  background-color: var(--konecta-light);
+  color: var(--konecta-pink);
+  border-bottom: 1px solid var(--gray-3);
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  margin: 0 0 10px 0;
+  position: relative;
+}
+
+.email-content-table {
+  padding: 0;
+  margin: 0 10px 10px;
+  font-size: 15.2px;
+  border-collapse: collapse;
+  width: calc(100% - 20px);
+}
+
+.email-content-table th,
+.email-content-table td {
+  border: solid thin var(--gray-3);
+}
+
+.email-content-table th {
+  min-width: 100px;
+  text-align: left;
+  vertical-align: text-top;
+  padding: 12px 20px;
+  font-weight: 400;
+  border-right: unset;
+}
+
+.email-divisor {
+  margin-top: 15px;
+  margin-bottom: 10px;
+  height: 1px;
+  width: 100%;
+  background: var(--gray-3);
+  border: unset;
+}
+
+.email-content-table td {
+  padding: 8px;
+  border-left: unset;
+}
+
+.email-raw-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 15px 15px;
+  max-width: 100%;
+}
+
+.email-raw-content h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+}
+
+.email-file-content {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+</style>