vue-intergrall-plugins 0.0.244 → 0.0.247

package/package.json

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

package/src/lib-components/Chat/BtnDownloadAllFiles.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('click-trigger')" :title="dictionary.msg_baixar_todos_anexos">
+    <span class="multiplos">
+      <fa-icon :icon="['fas', 'download']" />
+      <fa-icon :icon="['fas', 'paperclip']" class="small" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+  .multiplos {
+    display: flex;
+  }
+  .multiplos svg {
+    font-size: .95rem
+  }
+  .multiplos svg.small {
+    font-size: .7rem!important;
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/TextFooter.vue

@@ -38,7 +38,13 @@
         :message="message"
         :maxCharacters="textareaSettings.maxCharacters"
       />
-      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages || buttons.hasScreenShare" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages || buttons.hasScreenShare || buttons.hasDownloadAll" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+        <BtnDownloadAllFiles 
+          v-show="buttons.hasDownloadAll && !audioFile"
+          @click-trigger="$emit('handle-download-files')"
+          :dictionary="dictionary"
+          :ref="`${textId}-download-files`"
+        />
         <BtnScreenShare 
           v-show="buttons.hasScreenShare && !audioFile"
           @handle-screen-share="handleScreenShare"
@@ -123,9 +129,10 @@ import BtnExpand from "./BtnExpand"
 import BtnStandardMessages from "./BtnStandardMessages"
 import StandardMessages from "./StandardMessages"
 import BtnScreenShare from "./BtnScreenShare"
+import BtnDownloadAllFiles from './BtnDownloadAllFiles'
 
 export default {
-  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages, BtnScreenShare },
+  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages, BtnScreenShare, BtnDownloadAllFiles },
   mixins: [ clickaway ],
   props: {
     buttons: {

package/src/lib-components/Loader/Loader.vue

@@ -31,6 +31,7 @@ export default {
 <style>
 .req-loader-container {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;

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

@@ -1,43 +1,41 @@
 <template>
   <div class="mensagem-div-anexo">
-    <transition-group name="fade" mode="out-in" class="anexo-transition">
-      <div v-if="imgErro" key="error-msg" v-tippy :content="imgMsgErro">
-        <div class="alert alert-danger" role="alert">
-          <fa-icon :icon="['fas', 'file-image']" />
-          {{dictionary.img_com_erro}}
-        </div>
+    <div class="anexo-mensagem">
+      <img v-if="imageURL" @click="showImage(imageURL)" :src="imageURL" :alt="dictionary.alt_msg_img">
+      <audio v-else-if="audio" controls>
+        <source :src="docURL" :type="fileType" />
+        Sem suporte para o elemento audio
+      </audio>
+      <video v-else-if="video" controls>
+        <source :src="docURL" :type="fileType" />
+        Sem suporte para o elemento video
+      </video>
+      <a v-else-if="docURL" :href="docURL" target="_blank" rel="noreferrer noopener" class="default-doc">
+        <fa-icon :class="[iconClass]" :icon="icon" />
+        <p v-text="filename" :title="filename"></p>
+      </a>
+      <span v-else class="default-doc">
+        <fa-icon :class="[iconClass ? iconClass : '']" :icon="['fas', 'file-alt']" />
+        <p v-text="filename" :title="filename"></p>
+      </span>
+      <!-- Acoes -->
+      <div class="file-actions">
+        <span v-if="imageURL" class="file-action-button" @click="showImage(imageURL)">
+          <fa-icon :icon="['fas', 'search-plus']" v-tippy :content="`${dictionary.titulo_visualizar_img}`" />
+        </span>
+        <a v-if="docURL" :href="docURL" target="_blank" rel="noreferrer noopener" v-tippy :content="`Visualizar anexo`" class="file-action-button">
+          <fa-icon :icon="['fas', 'search-plus']" />
+        </a>
+        <a v-if="imageURL || docURL" :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" v-tippy :content="`Fazer o download do anexo`" class="file-action-button">
+          <fa-icon :icon="['fas', 'download']" />
+        </a>
+        <span  class="file-action-button" v-tippy :content="`Fazer download de todos anexos da tela`" @click="downloadAllFilesHandler">
+          <fa-icon :icon="['fas', 'download']" />
+          <fa-icon :icon="['fas', 'download']" />
+          <fa-icon :icon="['fas', 'download']" />
+        </span>
       </div>
-      <Loader v-if="isLoading" :small="true" key="anexo-loader" :slow="true" />
-      <div v-else key="anexo-mensagem" class="anexo-mensagem">
-        <img v-if="imageURL" @click="showImage(imageURL)" :src="imageURL" :alt="dictionary.alt_msg_img">
-        <div class="anexos-links-container" v-if="imageURL">
-          <a href="#" @click.prevent="showImage(imageURL)"> {{ dictionary.titulo_visualizar_img }} </a>
-          <fa-icon :icon="['fas', 'search-plus']" @click="showImage(imageURL)" />
-        </div>
-        <div v-else-if="docURL" class="anexo-container">
-          <template v-if="audio || video">
-            <audio v-if="audio" :src="docURL" controls :title="`${fileType} - ${filename}`">
-              <p> {{ dictionary.msg_erro_audio }} <a :href="docURL" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_audio }} </a> </p>
-            </audio>
-            <video v-if="video" :src="docURL" controls :title="`${fileType} - ${filename}`">
-              <p> {{ dictionary.msg_erro_video }} <a v-if="fileType != 'erro'" :href="docURL" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_video }} </a> </p>
-            </video>
-          </template>
-          <template v-else>
-            <a v-if="fileType != 'erro'" :href="docURL" target="_blank" rel="noreferrer noopener" :title="`${fileType} - ${filename}`">
-              <fa-icon :class="[iconClass]" :icon="icon" />
-              <p v-text="filename"></p>
-            </a>
-            <p v-else :title="`${fileType} - ${filename}`" class="arquivo-erro">
-              <fa-icon :icon="['fas', 'file-alt']" />
-              {{ filename }}
-            </p>
-          </template>
-        </div>
-        <a v-if="imageURL" :href="imageURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_img }} <fa-icon :icon="['fas', 'download']" /> </a>
-        <a v-if="docURL" :href="docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_doc }} <fa-icon :icon="['fas', 'download']" /> </a>
-      </div>
-    </transition-group>
+    </div>
   </div>
 </template>
 
@@ -105,6 +103,73 @@ export default {
 </script>
 
 <style scoped>
+  .mensagem__principal .default-doc {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .mensagem__outros .default-doc {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+
+  .default-doc {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 5px;
+    width: 100%;
+    max-width: 100%;
+  }
+  .default-doc svg {
+    font-size: 1.2rem;
+    margin-right: 5px;
+  }
+  .default-doc p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-actions {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 5px;
+  }
+  .file-actions a {
+    margin-right: 0;
+  }
+
+  .mensagem__principal .file-action-button {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .mensagem__outros .file-action-button {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+
+  .mensagem__principal .file-action-button:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .mensagem__outros .file-action-button:hover {
+    background-color: rgba(100, 100, 100, 0.3);
+  }
+
+  .file-action-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 12px;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 5px;
+    transition: background-color 150ms ease-in-out;
+  }
+
+  .file-action-button a {
+    margin: 0
+  }
+
   .fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
   }
@@ -145,15 +210,19 @@ export default {
   .anexo-container svg{
     font-size: 2rem;
   }
-  .anexo-container audio{
+  
+  .anexo-mensagem audio{
     outline: none;
     width: 100%;
+    margin-bottom: 5px;
   }
-  .anexo-container video{
+  
+  .anexo-mensagem video{
     flex: 1;
     width: 100%;
     max-width: 350px;
     cursor: pointer;
+    margin-bottom: 5px;
   }
 
   .anexos-links-container{
@@ -193,6 +262,7 @@ export default {
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    width: 100%;
   }
   
   .alert-danger {
@@ -222,4 +292,4 @@ export default {
   .doc {
     color: #006bc9
   }
-</style>
+</style>

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

@@ -11,7 +11,7 @@
     <div v-else class="mensagem" :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}">
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
-          <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
+          <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
         </div>
       </template>
       <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
@@ -78,7 +78,10 @@ import LinkPreview from './LinkPreview'
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
-  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao"],
+  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector"],
+  created() {
+    if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
+  },
   data(){
     return{
       strTooltipAux: "",

package/src/lib-components/Templates/TemplateGenerator.vue

@@ -11,7 +11,9 @@
         :reduce="template => template.cod"
         :clearable="false"
         @input="setTemplate"
-        :getOptionLabel="template => template.label">
+        :getOptionLabel="template => template.label"
+        ref="template-v-select"
+        >
         <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
       </v-select>
     </div>
@@ -131,11 +133,17 @@
           this.selectedTemplate = this.templates[key]
           this.codTemplate = key
           this.$emit('selected-template', key)
+          this.$nextTick(() => {
+            if(this.$root.$refs[`template-single-${this.identifier}`]) this.$root.$refs[`template-single-${this.identifier}`].handleInitialFocus()
+          })
         }else{
           this.selectedTemplate = null
         }
         this.adjustOnSelect()
       },
+      focusSelect() {
+        if(this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) this.$refs["template-v-select"].$el.querySelector("input").focus()
+      },
       selectIfIsUnique() {
         if(Object.keys(this.templates).length === 1) {
           for(let key in this.templates) {
@@ -145,6 +153,7 @@
             this.adjustOnSelect()
           }
         }
+        if(!this.codTemplate) this.focusSelect()
       },
       selectIfHasContact24h() {
         if(this.templates['envio_msg']) {
@@ -383,7 +392,6 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   align-items: center;
 }
 .tg-btn button {
-  outline: unset;
   border: unset;
   display: block;
   min-width: 180px;
@@ -392,7 +400,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   font-weight: 500;
   background-color: #007bff;
   color: #FFF;
-  transition-duration: 300ms;
+  transition: transform 300ms ease-in-out;
   user-select: none;
   cursor: pointer;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
@@ -425,11 +433,11 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   transform: translateY(1px); 
 }
 .tg-btn button:focus, .tg-btn button:active {
-  outline: unset; 
+  outline: 2px solid black; 
 }
 .tg-btn.small-btn {
   width: auto;
-  margin-left: 5px;
+  margin: 0 5px;
 }
 .tg-btn.small-btn svg {
   margin-right: 0;

package/src/lib-components/Templates/TemplateMessage.vue

@@ -11,6 +11,7 @@
           :placeholderMessage="'Escreva sua mensagem'"
           :ignoreHideTextarea="true"
           :dictionary="dictionary"
+          ref="text-footer-template-message"
         ></TextFooter>
         <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
           <button @click="sendMessage">
@@ -47,7 +48,17 @@ export default {
         required: true
     }
   },
+  mounted() {
+    this.initFocus()
+  },
   methods: {
+    initFocus() {
+      this.$nextTick(() => {
+        if(this.$refs["text-footer-template-message"] && this.$refs["text-footer-template-message"].$el) {
+          this.$refs["text-footer-template-message"].$el.querySelector("textarea").focus()
+        }
+      })
+    },
     sendMessage() {
       this.$emit('click-trigger')
     },

package/src/lib-components/Templates/TemplateSingle.vue

@@ -52,7 +52,7 @@
       </div>
     </div>
     <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
-      <button @click="$emit('click-trigger')">
+      <button @click="$emit('click-trigger')" ref="template-single-button">
         <template v-if="!iconButton"> 
           <fa-icon :icon="['fas', 'paper-plane']" />
           {{ dictionary.btn_contatar_clientes }} 
@@ -121,6 +121,11 @@ export default {
     })
   },
   methods: {
+    handleInitialFocus() {
+      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+      if(allInputs.length) allInputs[0].focus()
+      else if(this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+    },
     limparInputVar() {
       const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
       allInputs.forEach((input) => {
@@ -166,6 +171,8 @@ export default {
     setEvent(input) {
       const varList = input.nextSibling
 
+      const currentInstance = this
+
       input.setAttribute("placeholder", `{{var_${this.lastVar}}}`);
       input.setAttribute("id", `{{var_${this.lastVar}}}`);
       input.addEventListener("input", (event) => {
@@ -176,11 +183,26 @@ export default {
         input.classList.remove("invalid");
         input.classList.add("active");
         if(varList) {
+          const handleNextFocus = () => {
+            const allInputs = document.querySelectorAll(`.input-var-${currentInstance.identifier}`)
+            let stop = false
+            if(allInputs.length) {
+              allInputs.forEach(elem => {
+                if(!elem.value && !stop) {
+                  stop = true
+                  elem.focus()
+                }
+              })
+            }
+            if(!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+          }
+
           for(let i = 0; i < varList.children.length; i++) {
             varList.children[i].addEventListener("click", function() {
               input.value = `[${this.innerText}]`
               input.classList.add("active")
               input.dispatchEvent(new Event('input'))
+              handleNextFocus()
             })
           }
 
@@ -208,8 +230,7 @@ export default {
         if(varList) varList.classList.remove("visible")
       });
       input.addEventListener("keydown", (event) => {
-        if (event.keyCode == 13 && this.hasButton)
-          this.$emit("click-trigger");
+        if (event.keyCode == 13 && this.hasButton) this.$emit("click-trigger");
       });
       this.lastVar += 1;
     },