vue-intergrall-plugins 0.0.243 → 0.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.243",
+  "version": "0.0.246",
   "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: {
@@ -606,7 +613,7 @@ ul {
       align-items: center;
       justify-content: flex-end;
       position: absolute;
-      top: -20px;
+      top: -30px;
       right: 35px;
       background-color: #FAFAFA;
     }

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/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;
     },