vue-intergrall-plugins 1.0.86 → 1.0.88

package/src/lib-components/Messages/ChatMessages.vue

@@ -1,33 +1,11 @@
 <template>
-  <div
-    :class="'mensagem__' + origem"
-    v-if="origem && !erro"
-    :id="`a${messageIndex ? messageIndex : randomizeValue}`"
-  >
-    <InteratividadeFormulario
-      v-if="interatividade && validateInterativity()"
-      :interatividade="interatividade"
-      :dominio="dominio"
-      :anexos="anexos"
-      :dictionary="dictionary"
-    />
-    <div
-      v-else
-      class="mensagem"
-      :class="{ mapa, 'hist-msg': histMsg, 'max-w-60': link && !mapa }"
-    >
+  <div :class="'mensagem__' + origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`">
+    <InteratividadeFormulario v-if="interatividade && validateInterativity()" :interatividade="interatividade"
+      :dominio="dominio" :anexos="anexos" :dictionary="dictionary" />
+    <div v-else class="mensagem" :class="{ mapa, 'hist-msg': histMsg, 'max-w-60': link && !mapa }">
       <!-- Estilo da mensagem do tipo reply (que foi respondida) -->
-      <div
-        v-if="isReply && replyMessage"
-        class="mensagem-reply"
-        :class="`message-reply-${origem}`"
-      >
-        <p
-          v-if="replyMessage"
-          v-html="replyMessage"
-          @click.stop
-          @click.prevent="scrollToMessage()"
-        ></p>
+      <div v-if="isReply && replyMessage" class="mensagem-reply" :class="`message-reply-${origem}`">
+        <p v-if="replyMessage" v-html="replyMessage" @click.stop @click.prevent="scrollToMessage()"></p>
         <span v-else class="mensagem-reply-vazia">
           <fa-icon :icon="['fas', 'times']" v-if="showReplyIcon" />
           {{
@@ -38,34 +16,16 @@
       <!-- Anexos -->
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
-          <AnexoMensagem
-            :showControlFiles="showControlFiles"
-            :referenceSelector="referenceSelector"
-            :dictionary="dictionary"
-            :anexo="anexo"
-            :origemExterna="origemExterna"
-            :dominio="dominio"
-            @abrir-imagem="abrirImagem"
-            @download-all="$emit('download-all')"
-          />
+          <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector"
+            :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio"
+            @abrir-imagem="abrirImagem" @download-all="$emit('download-all')" />
         </div>
       </template>
       <!-- sticker -->
-      <img
-        class="default-stick-size"
-        v-if="urlSticker"
-        :src="urlSticker"
-        :title="urlFileName"
-      />
+      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName" />
       <!-- Mapa -->
       <div v-if="mapa" class="mensagem-div-mapa">
-        <GmapMap
-          :id="`mapa_${seq}`"
-          class="msg-mapa"
-          :center="center"
-          :zoom="17"
-          :options="mapOptions"
-        >
+        <GmapMap :id="`mapa_${seq}`" class="msg-mapa" :center="center" :zoom="17" :options="mapOptions">
           <GmapMarker :position="marker" />
         </GmapMap>
         <ul class="info-mapa" v-if="infos.length">
@@ -87,122 +47,56 @@
       <span class="horario-envio" v-text="horario"></span>
       <!-- Reenviar mensagem -->
       <transition name="fade" mode="out-in">
-        <span
-          :class="reply"
-          v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')"
-          v-tippy
-          :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'"
-          @click="$emit('replyMsg')"
-        >
+        <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')" v-tippy
+          :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'" @click="$emit('replyMsg')">
           <fa-icon :icon="['fas', 'reply']" />
         </span>
       </transition>
       <!-- ?? -->
       <transition name="fade" mode="out-in" v-if="validadeSeq">
-        <span
-          class="star dourado"
-          v-if="iniDialogo > 0"
-          :content="contentTooltipStar"
-          v-tippy
-          key="star-padrao-dourado"
-        >
+        <span class="star dourado" v-if="iniDialogo > 0" :content="contentTooltipStar" v-tippy
+          key="star-padrao-dourado">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path
-              fill="#FFD700"
-              d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"
-            />
+            <path fill="#FFD700"
+              d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z" />
           </svg>
         </span>
-        <span
-          class="star cinza"
-          v-if="iniDialogo == 0"
-          :content="contentTooltipStar"
-          v-tippy
-          key="star-padrao-cinza"
-        >
+        <span class="star cinza" v-if="iniDialogo == 0" :content="contentTooltipStar" v-tippy key="star-padrao-cinza">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path
-              fill="#808080"
-              d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"
-            />
+            <path fill="#808080"
+              d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z" />
           </svg>
         </span>
       </transition>
       <!-- Status da mensagem -->
       <transition name="fade" mode="out-in">
-        <span
-          class="check"
-          v-if="status == 'D'"
-          :content="contentTooltip"
-          v-tippy
-          key="check-padrao"
-        >
+        <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao">
           <fa-icon :icon="['fas', 'check']" />
         </span>
-        <span
-          class="check cinza"
-          v-else-if="status == 'Q'"
-          :content="contentTooltip"
-          v-tippy
-          key="check-cinza"
-        >
+        <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza">
           <fa-icon :icon="['fas', 'check']" />
         </span>
-        <span
-          class="check preto"
-          v-else-if="status == 'G'"
-          :content="contentTooltip"
-          v-tippy
-          key="check-preto"
-        >
+        <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto">
           <fa-icon :icon="['fas', 'check']" />
         </span>
-        <span
-          class="check preto"
-          v-else-if="status == 'E'"
-          :content="contentTooltip"
-          v-tippy
-          key="double-check-preto"
-        >
+        <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto">
           <fa-icon :icon="['fas', 'check-double']" />
         </span>
-        <span
-          class="check visualizado"
-          v-else-if="status == 'L'"
-          :content="contentTooltip"
-          v-tippy
-          key="double-check-visualizado"
-        >
+        <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy
+          key="double-check-visualizado">
           <fa-icon :icon="['fas', 'check-double']" />
         </span>
         <!-- Status finalizador -->
-        <span
-          class="check vermelho"
-          v-else-if="status == 'C' || status == 'ERRO'"
-          :content="contentTooltip"
-          v-tippy
-          key="times-circle"
-        >
+        <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy
+          key="times-circle">
           <fa-icon :icon="['fas', 'times-circle']" />
         </span>
         <!-- Status finalizador -->
-        <span
-          class="check vermelho"
-          v-else-if="status == 'T'"
-          :content="contentTooltip"
-          v-tippy
-          key="hourglass"
-        >
+        <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass">
           <fa-icon :icon="['fas', 'hourglass']" />
         </span>
         <!-- Status finalizador -->
-        <span
-          class="check vermelho"
-          v-else-if="status == 'O'"
-          :content="contentTooltip"
-          v-tippy
-          key="deleted"
-        >
+        <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted">
           <fa-icon :icon="['fas', 'times']" />
         </span>
         <!-- Status de mensagem deletada -->
@@ -214,52 +108,26 @@
         <!-- <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy :content="dictionary.tit_mais_msg">
           <fa-icon :icon="['fas', 'chevron-down']" />
         </span> -->
-        <span
-          class="menu-mensagem"
-          @click="responderMensagemHandler"
-          v-tippy
-          :content="dictionary.tit_responder_msg"
-          v-if="showMenu.reply"
-        >
+        <span class="menu-mensagem" @click="responderMensagemHandler" v-tippy :content="dictionary.tit_responder_msg"
+          v-if="showMenu.reply">
           <fa-icon :icon="['fas', 'reply']" />
         </span>
-        <span
-          class="menu-mensagem"
-          @click="reagirMensagemHandler"
-          v-tippy
-          :content="dictionary.tit_reagir_msg"
-          v-if="showMenu.reaction"
-        >
+        <span class="menu-mensagem" @click="reagirMensagemHandler" v-tippy :content="dictionary.tit_reagir_msg"
+          v-if="showMenu.reaction">
           <fa-icon :icon="['fas', 'smile']" />
         </span>
         <template v-if="showMenu.customButtons && showMenu.customButtons.length">
-          <span
-            v-for="(button, index) in showMenu.customButtons"
-            :key="button.id || index"
-            v-show="button.use"
-            @click="button.callback(returnParams(button.params))"
-            :class="`${button.customClass || 'menu-mensagem'}`"
-            v-tippy
-            :content="button.tippyContent"
-          >
-            <fa-icon
-              :icon="['fas', button.icon || 'question-circle']"
-              v-if="!button.svgIcon"
-            />
-            <span
-              v-else
-              v-html="button.svgIcon"
-              :class="button.svgClass ? button.svgClass : ''"
-            ></span>
+          <span v-for="(button, index) in showMenu.customButtons" :key="button.id || index" v-show="button.use"
+            @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+            v-tippy :content="button.tippyContent">
+            <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+            <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
           </span>
         </template>
       </div>
       <div class="emoji-message-container" v-if="isEmojisOpen" v-clickaway="closeEmojis">
-        <fa-icon
-          :icon="['fas', 'times-circle']"
-          class="sc-icone-fechar sc-icone-fechar--externo"
-          @click="closeEmojis"
-        />
+        <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo"
+          @click="closeEmojis" />
         <Picker @insert-emoji="addReaction" />
       </div>
       <transition name="fade" mode="out-in" v-if="isMenuOpen">
@@ -273,11 +141,7 @@
         </ul>
       </transition>
       <transition name="fade" mode="out-in" v-if="messageReaction">
-        <span
-          class="reaction"
-          v-tippy
-          :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`"
-        >
+        <span class="reaction" v-tippy :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`">
           <span v-html="messageReaction.finalEmoji"></span>
         </span>
       </transition>
@@ -419,17 +283,16 @@ export default {
         : "";
       tooltipStar += this.expSessao
         ? this.dictionary["expiracao_sessao"] +
-          " - " +
-          formataTimezoneData(this.expSessao) +
-          "<br/>"
+        " - " +
+        formataTimezoneData(this.expSessao) +
+        "<br/>"
         : "";
 
       if (this.tipo_origem) {
-        tooltipStar += `${this.dictionary["tipo_origem"]}: ${
-          this.dictionary[`tipo_origem_${this.tipo_origem}`]
+        tooltipStar += `${this.dictionary["tipo_origem"]}: ${this.dictionary[`tipo_origem_${this.tipo_origem}`]
             ? this.dictionary[`tipo_origem_${this.tipo_origem}`]
             : this.tipo_origem
-        }<br/>`;
+          }<br/>`;
       }
 
       return tooltipStar;
@@ -642,18 +505,18 @@ export default {
           : document.documentElement;
 
         // IF FIXO URGENCIA PARA O DAVID: CANAL HI
-        const isHI = this.seq.substring(0, 2) == "HI";
+        const isHI = this.seq && this.seq.substring(0, 2) == "HI";
         const textColor = isHI ? "#FFF" : l <= 50 ? "#FFF" : "#111B21";
         const filesBg = isHI
           ? "rgba(255, 255, 255, 0.1)"
           : l <= 50
-          ? "rgba(255, 255, 255, 0.1)"
-          : "rgba(100, 100, 100, 0.1)";
+            ? "rgba(255, 255, 255, 0.1)"
+            : "rgba(100, 100, 100, 0.1)";
         const filesBgHover = isHI
           ? "rgba(255, 255, 255, 0.3)"
           : l <= 50
-          ? "rgba(255, 255, 255, 0.3)"
-          : "rgba(100, 100, 100, 0.3)";
+            ? "rgba(255, 255, 255, 0.3)"
+            : "rgba(100, 100, 100, 0.3)";
 
         elem.style.setProperty("--text-color", textColor);
         elem.style.setProperty("--files-bg", filesBg);
@@ -918,6 +781,7 @@ export default {
 
 .menu-primario {
   transition: opacity 150ms ease-in-out;
+  height: 20px;
   position: absolute;
   font-size: 11.2px;
   top: 2px;
@@ -938,7 +802,7 @@ export default {
   background-color: #fff;
 }
 
-.menu-primario.outros > span:nth-child(1) {
+.menu-primario.outros>span:nth-child(1) {
   order: 10;
 }
 
@@ -1007,7 +871,7 @@ export default {
   justify-content: flex-end;
 }
 
-.mensagem__principal > .mensagem::after {
+.mensagem__principal>.mensagem::after {
   content: "";
   width: 0;
   height: 0;
@@ -1020,16 +884,16 @@ export default {
   transform: rotate(-90deg);
 }
 
-.mensagem__principal > .mensagem {
+.mensagem__principal>.mensagem {
   background-color: var(--message-color);
   color: var(--text-color);
 }
 
-.mensagem__principal > .mensagem .horario-envio {
+.mensagem__principal>.mensagem .horario-envio {
   color: var(--text-color);
 }
 
-.mensagem__principal > .mensagem .autor-mensagem {
+.mensagem__principal>.mensagem .autor-mensagem {
   right: 5px;
   color: var(--text-color);
 }
@@ -1040,12 +904,12 @@ export default {
   display: flex;
 }
 
-.mensagem__outros > .mensagem {
+.mensagem__outros>.mensagem {
   background-color: #fff;
   color: #333;
 }
 
-.mensagem__outros > .mensagem::after {
+.mensagem__outros>.mensagem::after {
   content: "";
   width: 0;
   height: 0;
@@ -1061,7 +925,7 @@ export default {
 /* .mensagem__outros .check{
           display: none
         } */
-.mensagem__outros > .autor-mensagem {
+.mensagem__outros>.autor-mensagem {
   left: 5px;
   color: #333;
 }
@@ -1170,7 +1034,7 @@ export default {
   max-height: 1.8em;
 }
 
-.reaction > span {
+.reaction>span {
   display: block;
   transform: translateY(-1px);
 }