vue-intergrall-plugins 1.1.50 → 1.1.52

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

@@ -100,15 +100,14 @@
       <div class="header-container">
         <div :class="`email-header-content${isOpen ? ' open' : ''}`">
           <div class="email-header-infos">
-            <template v-if="para && para.length">
-              <div class="email-to-from-container" ref="emailToContainer">
+            <template>
+              <div v-if="para && para.length" class="email-to-from-container" ref="emailToContainer">
                 <EmailTo v-for="(recipient, index) in para" :key="`to-${recipient.email}`"
                   :currentName="formattedToName(recipient.name, index, para.length)" :email="recipient.email"
                   :showMail="isOpen" />
               </div>
-            </template>
-            <template v-if="copia && copia.length">
-              <div class="email-cc-container">
+
+              <div v-if="copia && copia.length" class="email-cc-container">
                 <EmailTo v-for="(recipient, index) in copia" :key="`cc-${recipient.email}`"
                   :currentName="formattedCcName(recipient.name, index, copia.length)" :email="recipient.email"
                   :showMail="isOpen" />
@@ -212,6 +211,7 @@ import EmailFile from "./EmailFile.vue";
 import EmailTo from "./EmailTo.vue";
 import { textoLongo } from "@/mixins/formatarTexto";
 import Clickaway from '@/directives/clickaway';
+import '../../styles/style.css';
 
 export default {
   mixins: [textoLongo],
@@ -738,605 +738,4 @@ export default {
     }
   }
 };
-</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>
-.visibility-hidden {
-  visibility: hidden;
-}
-
-.box-shadow-active {
-  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);
-}
-
-.bg-dark-white-2 {
-  background-color: #f7f7f7;
-}
-
-.bg-white {
-  background-color: #FFF;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.email-overlay {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.email-item {
-  --konecta-gray-3: #515050;
-  --konecta-light: #f8f9fa;
-  --blue-silver-4: #dae0e5;
-  --email-principal: #faa732;
-  --email-outros: #86b7fe;
-  font-family: "Roboto", sans-serif;
-  flex: 1;
-  margin: 0 0 10px 0;
-  color: #222;
-  min-height: 60px;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px;
-  border-radius: 5px;
-  transition: all 150ms ease-in-out;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.divBtnReplyEmail {
-  display: flex;
-  align-items: center;
-  background-color: #f0adad;
-  border-radius: 6px;
-  padding: 7px 9px;
-  margin: 5px 0;
-  gap: 8px;
-}
-
-.reply-email-open {
-  width: calc(100% - 10px - 45px);
-}
-
-.btnReplyEmail {
-  display: block;
-  background-color: #faa732;
-  border: 1px solid #da8205;
-  margin: 8px 0 8px 5px;
-  padding: 5px 10px 5px 10px;
-  font-size: 14.4px;
-  font-weight: bold;
-  border-radius: 3px;
-  color: #000000;
-  cursor: pointer;
-}
-
-.ja-marcado-spam {
-  width: 100%;
-  background: #fffbe6;
-  border: 1px solid #ffe58f;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  padding: 5px 30px;
-  margin: 9px 0px 5px 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.ja-marcado-spam > span {
-  color: #614500;
-  font-weight: 500;
-  font-size: 14px;
-  margin-bottom: 0;
-  align-self: center;
-  align-items: center;
-}
-
-.ja-marcado-spam-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-items: flex-end;
-}
-
-.ja-marcado-spam button {
-  min-width: 110px;
-  padding: 4px 10px;
-  border: none;
-  border-radius: 5px;
-  background: #ffe58f;
-  color: #333;
-  cursor: pointer;
-  font-size: 13.4px;
-}
-
-.ja-marcado-spam-buttons .btn-nao-spam {
-  background: #36b87b;
-  color: var(--white);
-  border: 1px solid var(--konecta-success-hover, #309264);
-  font-weight: bold;
-}
-
-.ja-marcado-spam-buttons .btn-nao-spam:hover {
-  background: #309264;
-}
-
-.ja-marcado-spam-buttons .btn-e-spam {
-  background: #e74c3c;
-  color: var(--white);
-  border: 1px solid var(--konecta-danger-hover, #c92e1e);
-  font-weight: bold;
-}
-
-.ja-marcado-spam-buttons .btn-e-spam:hover {
-  background: #c92e1e;
-}
-
-.icon-btn-encerrar-spam {
-  margin-right: 2px;
-}
-
-.btn-loader {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  pointer-events: none;
-}
-
-.strongMsg {
-  flex: 1;
-  font-size: 13px;
-}
-
-.email-custom-action-buttons {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-  cursor: default;
-}
-
-.email-custom-action-button {
-  margin-top: 10px;
-  background-color: var(--konecta-light) !important;
-  color: var(--konecta-dark) !important;
-  border: 1px solid var(--blue-silver-4) !important;
-  flex: 1;
-  min-width: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 5px;
-  overflow: hidden;
-  border-radius: 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: all 100ms ease-in-out;
-  max-width: 100%;
-  cursor: pointer
-}
-
-.email-custom-action-button:hover {
-  background-color: #e9ecef !important;
-}
-
-.email-custom-action-button:disabled {
-  background-color: var(--konecta-gray-3) !important;
-  border: 1px solid #25282b !important;
-  cursor: not-allowed !important;
-}
-
-.email-item.outros {
-  border-left: 3px solid var(--email-outros);
-}
-
-.email-author-name {
-  margin: 0 5px;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.email-author.outros {
-  color: var(--email-outros);
-}
-
-.email-author.outros>svg:nth-child(1) {
-  transform: rotate(180deg);
-}
-
-.email-author.principal {
-  color: var(--email-principal);
-}
-
-.email-author.main {
-  font-size: 16.4px;
-}
-
-.email-item.principal {
-  border-left: 3px solid var(--email-principal);
-}
-
-.email-item.info-open {
-  overflow: visible
-}
-
-.email-header {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  position: relative;
-  overflow: visible;
-}
-
-.header-container {
-  display: flex;
-  overflow: hidden;
-  position: relative;
-}
-
-.email-header-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 250px;
-}
-
-.email-header-infos {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.email-subject {
-  margin: 5px 0 0 0;
-  font-size: 16.4px;
-  cursor: pointer;
-}
-
-.email-date {
-  --width: 245px;
-  font-size: 12.8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-  min-width: var(--width);
-  width: var(--width);
-  max-width: var(--width);
-  display: flex;
-  justify-content: flex-end;
-  gap: 3px;
-  align-items: center;
-}
-
-.email-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  background-color: #FFF;
-  position: relative;
-  max-width: 100%;
-}
-
-.email-actions {
-  align-self: flex-end;
-  display: flex;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  padding: 5px 7px;
-  background-color: #dddddd;
-  position: absolute;
-  right: 0;
-  top: 30px;
-  z-index: 1;
-}
-
-.email-actions.main {
-  top: 10px
-}
-
-.email-actions.active {
-  background-color: #dfdfdf;
-}
-
-.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%;
-}
-
-.email-actions-list {
-  position: absolute;
-  right: 45px;
-  width: 250px;
-  top: 5px;
-  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: 14.4px;
-  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 {
-  width: 100%;
-  min-width: 300px;
-  max-width: 100%;
-  border: none;
-  overflow: auto;
-}
-
-.email-raw {
-  width: 100%;
-  max-width: 100%;
-  padding: 15px;
-  font-size: 14.4px;
-  color: #222;
-}
-
-.email-files {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 5px;
-}
-
-.email-header-content,
-.email-header-infos {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.email-to-from-container {
-  margin-bottom: 5px;
-  max-width: 100%;
-  min-width: 250px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  gap: 5px;
-}
-
-.email-cc-container {
-  margin-bottom: 5px;
-  max-width: 100%;
-  min-width: 250px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  gap: 5px;
-}
-
-.email-to-btn {
-  padding: 0 5px;
-  font-size: 14.4px;
-  cursor: pointer;
-  color: #666;
-}
-
-.email-to-infos {
-  position: absolute;
-  bottom: -325px;
-  border: 1px solid #CCC;
-  z-index: 2;
-  padding: 10px;
-  background-color: #FFF;
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin: 0;
-  cursor: default;
-}
-
-.email-info {
-  width: 100%;
-  font-size: 12.8px;
-}
-
-.email-info>span {
-  font-size: 12px;
-  color: gray;
-  margin-right: 3px;
-}
-
-.email-author {
-  display: flex;
-  align-items: center;
-  height: 5px;
-  font-size: 12px;
-  font-weight: bold;
-  transform: translateY(-2px);
-  width: 100%;
-  cursor: pointer;
-}
-
-.email-subject-secondary {
-  margin-top: -5px;
-}
-
-.email-subject-span {
-  font-size: 11.2px;
-  color: gray;
-}
-
-.email-to-svg {
-  font-size: 13.6px;
-}
-
-.email-custom-buttons {
-  display: flex;
-  gap: 7px;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-  font-size: 12.8px;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-  opacity: .7;
-  transition: opacity 100ms ease-in-out;
-}
-
-.menu-mensagem:hover,
-.menu-mensagem:focus,
-.menu-mensagem:active {
-  opacity: 1;
-}
-
-.email-error-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 5px;
-  padding: 10px;
-}
-
-.email-error-content p {
-  margin: 0;
-  color: #E74C3C;
-}
-
-.email-error-content button {
-  border: 1px solid #CCC;
-  border-radius: 3px;
-  padding: 5px 10px;
-  background-color: #FFF;
-  cursor: pointer;
-  transition: background-color 150ms ease-in-out;
-}
-
-.email-error-content button:hover {
-  background-color: #EEE;
-}
-
-.btnReplyEmail:hover, .btnReplyEmail:active {
-  background-color: #da8205;
-  color: #000000;
-}
-
-.email-attachments-clip {
-  display: flex;
-  cursor: pointer;
-  margin-top: 5px;
-}
-
-.clip-icon {
-  position: relative;
-  font-size: 22px;
-  color: #999;
-  transform: rotate(-15deg);
-}
-
-.clip-badge {
-  position: absolute;
-  transform: rotate(15deg);
-  top: 0px;
-  right: -15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #999 40%, #515050 100%);
-  color: #fff;
-  border-radius: 50%;
-  min-width: 22px;
-  height: 22px;
-  font-size: 12.4px;
-  border: 1px solid #fff;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
-  text-align: center;
-  padding: 0 4px;
-  box-sizing: border-box;
-}
-
-.clip-icon:hover {
-  color: #777;
-}
-
-.clip-icon:hover .clip-badge {
-  background: linear-gradient(135deg, #999 20%, #515050 70%);
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
-}
-
-</style>
+</script>