vue-intergrall-plugins 0.0.249 → 0.0.252

package/dist/vue-intergrall-plugins.ssr.js

@@ -10144,7 +10144,12 @@ var __vue_component__$n = __vue_component__$m;var textoLongo = {
       case "aac":
       case "audio/mpeg":
       case "mpeg":
-        tipoDoc = type.startsWith("audio/") ? type : "audio/".concat(type);
+        if (type == "oga" || type == "audio/oga") {
+          tipoDoc = "audio/ogg";
+        } else {
+          tipoDoc = "audio/mpeg";
+        }
+
         docAnexo = "".concat(dominio, "/callcenter/docs.php?mku=").concat(mku);
         nomeArquivo = name;
         audio = true;
@@ -10154,7 +10159,13 @@ var __vue_component__$n = __vue_component__$m;var textoLongo = {
       case "video":
       case "mp4":
       case "m4v":
-        tipoDoc = type.startsWith("video/") ? type : "video/".concat(type);
+      case "webm":
+        if (type == "mp4" || type == "video/mp4" || type == "video" || type == "m4v") {
+          tipoDoc = "video/mp4";
+        } else {
+          tipoDoc = "video/webm";
+        }
+
         docAnexo = "".concat(dominio, "/callcenter/docs.php?mku=").concat(mku);
         nomeArquivo = name;
         video = true;
@@ -10265,6 +10276,8 @@ var __vue_component__$n = __vue_component__$m;var textoLongo = {
       this.icon = this.fileType === "pdf" ? ['fas', 'file-pdf'] : ['fas', 'file-alt'];
     },
     downloadAllFilesHandler: function downloadAllFilesHandler() {
+      var _this = this;
+
       try {
         if (!this.$root.$refs.chatMessages || !this.$root.$refs.chatMessages.referenceSelector) return this.$emit("download-all");
         var container = document.querySelector("".concat(this.$root.$refs.chatMessages.referenceSelector));
@@ -10287,6 +10300,7 @@ var __vue_component__$n = __vue_component__$m;var textoLongo = {
           var handler = handleInterval();
 
           if (!handler) {
+            _this.closeTippy ? _this.closeTippy() : null;
             clearInterval(interval);
             interval = 0;
           }
@@ -11488,6 +11502,9 @@ var script$8 = {
       }
 
       return status;
+    },
+    closeTippy: function closeTippy() {
+      this.$refs["download-multiple-trigger"] && this.$refs["download-multiple-trigger"].click();
     }
   }
 };/* script */
@@ -11503,17 +11520,17 @@ var __vue_render__$8 = function __vue_render__() {
 
   return _c('div', {
     staticClass: "mensagem-div-anexo"
-  }, [_vm._ssrNode("<div class=\"anexo-mensagem\" data-v-9dd05594>", "</div>", [_vm.imageURL ? _vm._ssrNode("<img" + _vm._ssrAttr("src", _vm.imageURL) + _vm._ssrAttr("alt", _vm.dictionary.alt_msg_img) + " data-v-9dd05594>", "</img>") : _vm.audio ? _vm._ssrNode("<audio controls=\"controls\" data-v-9dd05594><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + " data-v-9dd05594>\n      Sem suporte para o elemento audio\n    </audio>") : _vm.video ? _vm._ssrNode("<video controls=\"controls\" data-v-9dd05594><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + " data-v-9dd05594>\n      Sem suporte para o elemento video\n    </video>") : _vm.docURL ? _vm._ssrNode("<a" + _vm._ssrAttr("href", _vm.docURL) + " target=\"_blank\" rel=\"noreferrer noopener\" class=\"default-doc\" data-v-9dd05594>", "</a>", [_c('fa-icon', {
+  }, [_vm._ssrNode("<div class=\"anexo-mensagem\" data-v-f7455c68>", "</div>", [_vm.imageURL ? _vm._ssrNode("<img" + _vm._ssrAttr("src", _vm.imageURL) + _vm._ssrAttr("alt", _vm.dictionary.alt_msg_img) + " data-v-f7455c68>", "</img>") : _vm.audio ? _vm._ssrNode("<audio controls=\"controls\" data-v-f7455c68><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + " data-v-f7455c68>\n      Sem suporte para o elemento audio\n    </audio>") : _vm.video ? _vm._ssrNode("<video controls=\"controls\" data-v-f7455c68><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + " data-v-f7455c68>\n      Sem suporte para o elemento video\n    </video>") : _vm.docURL ? _vm._ssrNode("<span class=\"default-doc\" data-v-f7455c68>", "</span>", [_c('fa-icon', {
     class: [_vm.iconClass],
     attrs: {
       "icon": _vm.icon
     }
-  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + " data-v-9dd05594>" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2) : _vm._ssrNode("<span class=\"default-doc\" data-v-9dd05594>", "</span>", [_c('fa-icon', {
+  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + " data-v-f7455c68>" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2) : _vm._ssrNode("<span class=\"default-doc\" data-v-f7455c68>", "</span>", [_c('fa-icon', {
     class: [_vm.iconClass ? _vm.iconClass : ''],
     attrs: {
       "icon": ['fas', 'file-alt']
     }
-  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + " data-v-9dd05594>" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"file-actions\" data-v-9dd05594>", "</div>", [_vm.imageURL ? _vm._ssrNode("<span class=\"file-action-button\" data-v-9dd05594>", "</span>", [_c('fa-icon', {
+  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + " data-v-f7455c68>" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"file-actions\" data-v-f7455c68>", "</div>", [_vm.imageURL ? _vm._ssrNode("<span class=\"file-action-button\" data-v-f7455c68>", "</span>", [_c('fa-icon', {
     directives: [{
       name: "tippy",
       rawName: "v-tippy"
@@ -11522,17 +11539,19 @@ var __vue_render__$8 = function __vue_render__() {
       "icon": ['fas', 'search-plus'],
       "content": "" + _vm.dictionary.titulo_visualizar_img
     }
-  })], 1) : _vm._e(), _vm._ssrNode(" "), _vm.docURL ? _c('a', {
+  })], 1) : _vm._e(), _vm._ssrNode(" "), _vm.docURL ? _c('span', {
     directives: [{
       name: "tippy",
       rawName: "v-tippy"
     }],
     staticClass: "file-action-button",
     attrs: {
-      "href": _vm.docURL,
-      "target": "_blank",
-      "rel": "noreferrer noopener",
       "content": "Visualizar anexo"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.openWindowFromURL(_vm.docURL);
+      }
     }
   }, [_c('fa-icon', {
     attrs: {
@@ -11555,31 +11574,47 @@ var __vue_render__$8 = function __vue_render__() {
     attrs: {
       "icon": ['fas', 'download']
     }
-  })], 1) : _vm._e(), _vm._ssrNode(" "), _c('span', {
-    directives: [{
-      name: "tippy",
-      rawName: "v-tippy"
-    }],
-    staticClass: "file-action-button",
-    attrs: {
-      "content": "Fazer download de todos anexos da tela"
-    },
+  })], 1) : _vm._e(), _vm._ssrNode(" "), _vm.imageURL || _vm.docURL ? [_c('tippy', {
+    attrs: {
+      "interactive": "",
+      "theme": "light",
+      "trigger": "click"
+    },
+    scopedSlots: _vm._u([{
+      key: "trigger",
+      fn: function fn() {
+        return [_c('span', {
+          ref: "download-multiple-trigger",
+          staticClass: "file-action-button"
+        }, [_c('fa-icon', {
+          attrs: {
+            "icon": ['fas', 'download']
+          }
+        }), _vm._v(" "), _c('fa-icon', {
+          attrs: {
+            "icon": ['fas', 'download']
+          }
+        }), _vm._v(" "), _c('fa-icon', {
+          attrs: {
+            "icon": ['fas', 'download']
+          }
+        })], 1)];
+      },
+      proxy: true
+    }], null, false, 2135986953)
+  }, [_vm._v(" "), _c('div', {
+    staticClass: "tippy-confirmation"
+  }, [_c('p', [_vm._v(" Deseja fazer download de todos anexos da tela? ")]), _vm._v(" "), _c('button', {
+    staticClass: "cancel box-shadow",
     on: {
-      "click": _vm.downloadAllFilesHandler
+      "click": _vm.closeTippy
     }
-  }, [_c('fa-icon', {
-    attrs: {
-      "icon": ['fas', 'download']
-    }
-  }), _vm._ssrNode(" "), _c('fa-icon', {
-    attrs: {
-      "icon": ['fas', 'download']
-    }
-  }), _vm._ssrNode(" "), _c('fa-icon', {
-    attrs: {
-      "icon": ['fas', 'download']
+  }, [_vm._v(" Cancelar ")]), _vm._v(" "), _c('button', {
+    staticClass: "confirm box-shadow",
+    on: {
+      "click": _vm.downloadAllFilesHandler
     }
-  })], 2)], 2)], 2)]);
+  }, [_vm._v(" Confirmar ")])])])] : _vm._e()], 2)], 2)]);
 };
 
 var __vue_staticRenderFns__$8 = [];
@@ -11587,8 +11622,12 @@ var __vue_staticRenderFns__$8 = [];
 
 var __vue_inject_styles__$8 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-9dd05594_0", {
-    source: ".mensagem__principal .default-doc[data-v-9dd05594]{background-color:var(--files-bg)}.mensagem__outros .default-doc[data-v-9dd05594]{background-color:rgba(100,100,100,.1)}.default-doc[data-v-9dd05594]{display:flex;align-items:center;padding:10px;border-radius:5px;width:100%;max-width:100%}.default-doc svg[data-v-9dd05594]{font-size:1.2rem;margin-right:5px}.default-doc p[data-v-9dd05594]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions[data-v-9dd05594]{display:flex;justify-content:flex-end;width:100%;padding:5px}.file-actions a[data-v-9dd05594]{margin-right:0}.mensagem__principal .file-action-button[data-v-9dd05594]{background-color:var(--files-bg)}.mensagem__outros .file-action-button[data-v-9dd05594]{background-color:rgba(100,100,100,.1)}.mensagem__principal .file-action-button[data-v-9dd05594]:hover{background-color:var(--files-bg-hover)}.mensagem__outros .file-action-button[data-v-9dd05594]:hover{background-color:rgba(100,100,100,.3)}.file-action-button[data-v-9dd05594]{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[data-v-9dd05594]{margin:0}.fade-enter-active[data-v-9dd05594],.fade-leave-active[data-v-9dd05594]{transition:opacity .5s}.fade-enter[data-v-9dd05594],.fade-leave-to[data-v-9dd05594]{opacity:0}.mensagem-div-anexo[data-v-9dd05594]{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden}.anexo-container[data-v-9dd05594]{width:100%;margin-top:5px;overflow:hidden;display:flex;max-height:300px}.anexo-container .arquivo-erro[data-v-9dd05594],.anexo-container a[data-v-9dd05594]{padding:10px 15px 15px 15px;display:flex;justify-content:center;align-items:center}.anexo-container p[data-v-9dd05594]{text-overflow:ellipsis;overflow:hidden}.anexo-container .arquivo-erro[data-v-9dd05594],.anexo-container p[data-v-9dd05594]{margin:0;margin-left:15px;font-size:.9rem}.anexo-container svg[data-v-9dd05594]{font-size:2rem}.anexo-mensagem audio[data-v-9dd05594]{outline:0;width:100%;margin-bottom:5px}.anexo-mensagem video[data-v-9dd05594]{flex:1;width:100%;max-width:350px;cursor:pointer;margin-bottom:5px}.anexos-links-container[data-v-9dd05594]{width:100%;display:flex;justify-content:center;align-items:center}.anexos-links-container a[data-v-9dd05594]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.anexos-links-container svg[data-v-9dd05594]{cursor:pointer}.mensagem-div-anexo img[data-v-9dd05594]{cursor:pointer;margin:10px 0;min-width:35px;width:100%;max-width:250px}.anexo-transition[data-v-9dd05594]{width:100%;height:100%}.anexo-mensagem[data-v-9dd05594]{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}.alert-danger[data-v-9dd05594]{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert[data-v-9dd05594]{position:relative;padding:.65rem 1.2rem;margin:5px 0;border:1px solid transparent;border-radius:.25rem;text-align:center}.alert svg[data-v-9dd05594]{font-size:1.025em;margin-right:2px}.pdf[data-v-9dd05594]{color:#e74c3c}.doc[data-v-9dd05594]{color:#006bc9}",
+  inject("data-v-f7455c68_0", {
+    source: ".tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme{background-color:#fff;border:1px solid #ccc;color:#333;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.tippy-confirmation p{margin-bottom:3px}.tippy-confirmation button{border:unset;background-color:#f1f1f1;border-radius:3px;padding:5px 8px;cursor:pointer;font-size:.75rem}.tippy-confirmation button.cancel{border-bottom:2px solid red;margin-right:15px}.tippy-confirmation button.confirm{border-bottom:2px solid green}",
+    map: undefined,
+    media: undefined
+  }), inject("data-v-f7455c68_1", {
+    source: ".mensagem__principal .default-doc[data-v-f7455c68]{background-color:var(--files-bg)}.mensagem__principal .default-doc[data-v-f7455c68]:hover{background-color:var(--files-bg-hover)}.mensagem__outros .default-doc[data-v-f7455c68]{background-color:rgba(100,100,100,.1)}.mensagem__outros .default-doc[data-v-f7455c68]:hover{background-color:rgba(100,100,100,.3)}.default-doc:hover p[data-v-f7455c68]{text-decoration:underline}.default-doc[data-v-f7455c68]{display:flex;align-items:center;padding:10px;border-radius:5px;width:100%;max-width:100%;cursor:pointer;transition:background-color 150ms ease-in-out}.default-doc svg[data-v-f7455c68]{font-size:1.2rem;margin-right:5px}.default-doc p[data-v-f7455c68]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions[data-v-f7455c68]{display:flex;justify-content:flex-end;width:100%;padding:5px}.file-actions a[data-v-f7455c68]{margin-right:0}.mensagem__principal .file-action-button[data-v-f7455c68]{background-color:var(--files-bg)}.mensagem__outros .file-action-button[data-v-f7455c68]{background-color:rgba(100,100,100,.1)}.mensagem__principal .file-action-button[data-v-f7455c68]:hover{background-color:var(--files-bg-hover)}.mensagem__outros .file-action-button[data-v-f7455c68]:hover{background-color:rgba(100,100,100,.3)}.file-action-button[data-v-f7455c68]{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[data-v-f7455c68]{margin:0}.fade-enter-active[data-v-f7455c68],.fade-leave-active[data-v-f7455c68]{transition:opacity .5s}.fade-enter[data-v-f7455c68],.fade-leave-to[data-v-f7455c68]{opacity:0}.mensagem-div-anexo[data-v-f7455c68]{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden}.anexo-container[data-v-f7455c68]{width:100%;margin-top:5px;overflow:hidden;display:flex;max-height:300px}.anexo-container .arquivo-erro[data-v-f7455c68],.anexo-container a[data-v-f7455c68]{padding:10px 15px 15px 15px;display:flex;justify-content:center;align-items:center}.anexo-container p[data-v-f7455c68]{text-overflow:ellipsis;overflow:hidden}.anexo-container .arquivo-erro[data-v-f7455c68],.anexo-container p[data-v-f7455c68]{margin:0;margin-left:15px;font-size:.9rem}.anexo-container svg[data-v-f7455c68]{font-size:2rem}.anexo-mensagem audio[data-v-f7455c68]{outline:0;width:100%;margin-bottom:5px}.anexo-mensagem video[data-v-f7455c68]{flex:1;width:100%;max-width:350px;cursor:pointer;margin-bottom:5px}.anexos-links-container[data-v-f7455c68]{width:100%;display:flex;justify-content:center;align-items:center}.anexos-links-container a[data-v-f7455c68]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.anexos-links-container svg[data-v-f7455c68]{cursor:pointer}.mensagem-div-anexo img[data-v-f7455c68]{cursor:pointer;margin:10px 0;min-width:35px;width:100%;max-width:250px}.anexo-transition[data-v-f7455c68]{width:100%;height:100%}.anexo-mensagem[data-v-f7455c68]{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}.alert-danger[data-v-f7455c68]{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert[data-v-f7455c68]{position:relative;padding:.65rem 1.2rem;margin:5px 0;border:1px solid transparent;border-radius:.25rem;text-align:center}.alert svg[data-v-f7455c68]{font-size:1.025em;margin-right:2px}.pdf[data-v-f7455c68]{color:#e74c3c}.doc[data-v-f7455c68]{color:#006bc9}",
     map: undefined,
     media: undefined
   });
@@ -11596,10 +11635,10 @@ var __vue_inject_styles__$8 = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$8 = "data-v-9dd05594";
+var __vue_scope_id__$8 = "data-v-f7455c68";
 /* module identifier */
 
-var __vue_module_identifier__$8 = "data-v-9dd05594";
+var __vue_module_identifier__$8 = "data-v-f7455c68";
 /* functional template */
 
 var __vue_is_functional_template__$8 = false;

package/package.json

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

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

@@ -2,18 +2,18 @@
   <div class="mensagem-div-anexo">
     <div class="anexo-mensagem">
       <img v-if="imageURL" @click="showImage(imageURL)" :src="imageURL" :alt="dictionary.alt_msg_img">
-      <audio v-else-if="audio" controls>
+      <audio v-else-if="audio" controls="controls">
         <source :src="docURL" :type="fileType" />
         Sem suporte para o elemento audio
       </audio>
-      <video v-else-if="video" controls>
+      <video v-else-if="video" controls="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">
+      <span v-else-if="docURL" @click="openWindowFromURL(docURL)" class="default-doc">
         <fa-icon :class="[iconClass]" :icon="icon" />
         <p v-text="filename" :title="filename"></p>
-      </a>
+      </span>
       <span v-else class="default-doc">
         <fa-icon :class="[iconClass ? iconClass : '']" :icon="['fas', 'file-alt']" />
         <p v-text="filename" :title="filename"></p>
@@ -23,22 +23,72 @@
         <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">
+        <span v-if="docURL" @click="openWindowFromURL(docURL)" v-tippy :content="`Visualizar anexo`" class="file-action-button">
           <fa-icon :icon="['fas', 'search-plus']" />
-        </a>
+        </span>
         <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>
+        <template v-if="imageURL || docURL">
+          <tippy
+            interactive
+            theme="light"
+            trigger="click"
+          >
+            <template v-slot:trigger>
+              <span class="file-action-button" ref="download-multiple-trigger">
+                <fa-icon :icon="['fas', 'download']" />
+                <fa-icon :icon="['fas', 'download']" />
+                <fa-icon :icon="['fas', 'download']" />
+              </span>
+            </template>
+
+            <div class="tippy-confirmation">
+              <p> Deseja fazer download de todos anexos da tela? </p>
+              <button class="cancel box-shadow" @click="closeTippy"> Cancelar </button>
+              <button class="confirm box-shadow" @click="downloadAllFilesHandler"> Confirmar </button>
+            </div>
+
+          </tippy>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
+<style>
+  .tippy-tooltip.light-theme .tippy-backdrop {
+    background-color: #FFF;
+  }
+  .tippy-tooltip.light-theme  {
+  /* .tippy-box[data-theme~='light'] { */
+    background-color: #FFF;
+    border: 1px solid #CCC;
+    color: #333;
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+  .tippy-confirmation p {
+    margin-bottom: 3px;
+  }
+  .tippy-confirmation button {
+    border: unset;
+    background-color: #F1F1F1;
+    border-radius: 3px;
+    padding: 5px 8px;
+    cursor: pointer;
+    font-size: .75rem;
+  }
+  .tippy-confirmation button.cancel {
+    border-bottom: 2px solid red;
+    margin-right: 15px;
+  }
+  .tippy-confirmation button.confirm {
+    border-bottom: 2px solid green;
+  }
+</style>
+
 <script>
 import { fileHandler } from "../../mixins/fileHandler"
 import Loader from "../Loader/Loader"
@@ -67,7 +117,7 @@ export default {
   data() {
     return {
       imgErro: false,
-      imgMsgErro: '',
+      imgMsgErro: ''
     }
   },
   mounted() {
@@ -97,6 +147,9 @@ export default {
         this.isLoading = false
       }
       return status
+    },
+    closeTippy() {
+      this.$refs["download-multiple-trigger"] && this.$refs["download-multiple-trigger"].click()
     }
   }
 }
@@ -107,10 +160,22 @@ export default {
     background-color: var(--files-bg);
   }
 
+  .mensagem__principal .default-doc:hover {
+    background-color: var(--files-bg-hover);
+  }
+
   .mensagem__outros .default-doc {
     background-color: rgba(100, 100, 100, 0.1);
   }
 
+  .mensagem__outros .default-doc:hover {
+    background-color: rgba(100, 100, 100, 0.3);
+  }
+
+  .default-doc:hover p {
+    text-decoration: underline;
+  }
+
   .default-doc {
     display: flex;
     align-items: center;
@@ -118,6 +183,8 @@ export default {
     border-radius: 5px;
     width: 100%;
     max-width: 100%;
+    cursor: pointer;
+    transition: background-color 150ms ease-in-out;
   }
   .default-doc svg {
     font-size: 1.2rem;

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

@@ -269,6 +269,15 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   flex-grow: 0;
 }
 
+.vs__dropdown-option.vs__dropdown-option--selected {
+  background-color: rgb(26, 95, 173)!important;
+  color: white;
+}
+
+.vs__dropdown-menu li {
+  padding: 10px 15px;
+}
+
 .vs__dropdown-option {
   transition: background-color 150ms;
   white-space: normal;

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

@@ -107,7 +107,7 @@ export default {
     this.$root.$refs[`template-single-${this.identifier}`] = this
   },
   mounted() {
-    this.getListOpts()
+    if(this.allVariables) this.getListOpts()
     this.setInputs();
   },
   updated() {
@@ -177,7 +177,7 @@ export default {
       input.setAttribute("id", `{{var_${this.lastVar}}}`);
       input.addEventListener("input", (event) => {
         this.setVar(event, `var_${this.lastVar}`, true);
-        varList.classList.remove("visible")
+        if(varList) varList.classList.remove("visible")
       });
       input.addEventListener("focus", () => {
         input.classList.remove("invalid");