vue-intergrall-plugins 0.0.245 → 0.0.246

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

@@ -1987,6 +1987,7 @@ var script$y = {
       var _this3 = this;
 
       var varList = input.nextSibling;
+      var currentInstance = this;
       input.setAttribute("placeholder", "{{var_".concat(this.lastVar, "}}"));
       input.setAttribute("id", "{{var_".concat(this.lastVar, "}}"));
       input.addEventListener("input", function (event) {
@@ -1999,23 +2000,42 @@ var script$y = {
         input.classList.add("active");
 
         if (varList) {
-          for (var i = 0; i < varList.children.length; i++) {
-            varList.children[i].addEventListener("click", function () {
-              input.value = "[".concat(this.innerText, "]");
-              input.classList.add("active");
-              input.dispatchEvent(new Event('input'));
-            });
-          }
+          (function () {
+            var handleNextFocus = function handleNextFocus() {
+              var allInputs = document.querySelectorAll(".input-var-".concat(currentInstance.identifier));
+              var stop = false;
+
+              if (allInputs.length) {
+                allInputs.forEach(function (elem) {
+                  if (!elem.value && !stop) {
+                    stop = true;
+                    elem.focus();
+                  }
+                });
+              }
 
-          var containerGeral = document.querySelector(".tg-container");
-          varList.classList.add("visible");
-          var maxBottom = containerGeral.getBoundingClientRect().bottom,
-              currentBottom = varList.getBoundingClientRect().bottom;
+              if (!stop && _this3.$refs["template-single-button"]) _this3.$refs["template-single-button"].focus();
+            };
 
-          if (currentBottom > maxBottom) {
-            varList.style.top = "-".concat(varList.getBoundingClientRect().height, "px");
-            varList.style.borderTop = "1px solid currentColor";
-          }
+            for (var i = 0; i < varList.children.length; i++) {
+              varList.children[i].addEventListener("click", function () {
+                input.value = "[".concat(this.innerText, "]");
+                input.classList.add("active");
+                input.dispatchEvent(new Event('input'));
+                handleNextFocus();
+              });
+            }
+
+            var containerGeral = document.querySelector(".tg-container");
+            varList.classList.add("visible");
+            var maxBottom = containerGeral.getBoundingClientRect().bottom,
+                currentBottom = varList.getBoundingClientRect().bottom;
+
+            if (currentBottom > maxBottom) {
+              varList.style.top = "-".concat(varList.getBoundingClientRect().height, "px");
+              varList.style.borderTop = "1px solid currentColor";
+            }
+          })();
         }
       });
       input.addEventListener("blur", function () {
@@ -2201,7 +2221,7 @@ var __vue_inject_styles__$y = undefined;
 var __vue_scope_id__$y = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$y = "data-v-add8fb80";
+var __vue_module_identifier__$y = "data-v-affaa3f8";
 /* functional template */
 
 var __vue_is_functional_template__$y = false;
@@ -9492,6 +9512,9 @@ var script$h = {
 
       this.adjustOnSelect();
     },
+    focusSelect: function focusSelect() {
+      if (this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) this.$refs["template-v-select"].$el.querySelector("input").focus();
+    },
     selectIfIsUnique: function selectIfIsUnique() {
       if (Object.keys(this.templates).length === 1) {
         for (var key in this.templates) {
@@ -9502,9 +9525,7 @@ var script$h = {
         }
       }
 
-      if (!this.codTemplate && this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) {
-        this.$refs["template-v-select"].$el.querySelector("input").focus();
-      }
+      if (!this.codTemplate) this.focusSelect();
     },
     selectIfHasContact24h: function selectIfHasContact24h() {
       if (this.templates['envio_msg']) {
@@ -9651,7 +9672,7 @@ var __vue_staticRenderFns__$h = [];
 
 var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-730cbd76_0", {
+  inject("data-v-e3f5b41e_0", {
     source: "*{box-sizing:border-box}.toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}h1,h2,h3,h4,p{margin:0;padding:0}.tg-container{width:100%;max-width:800px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.tg-options{width:100%;display:flex}.tg-options.column{flex-direction:column}.tg-options h4{margin-right:5px}.tg-select{flex:1;height:34px;overflow:hidden}.tg-select .vs__dropdown-toggle{background-color:#fff;height:34px;overflow:hidden;display:flex;align-items:center}.tg-select .vs__selected-options{height:34px;overflow:hidden}.tg-select .vs__selected-options>span{white-space:nowrap;text-overflow:ellipsis;flex:1}.tg-select .vs__selected-options>input{flex-grow:0}.vs__dropdown-option{transition:background-color 150ms;white-space:normal}.vs__dropdown-option:nth-child(odd){background-color:#f1f1f1}.vs__dropdown-option--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.ts-content{--border-color:#CCC;--background-color:#DFF0D8;--input-background-color:#FFF;--input-border-default:#007BFF;--input-border-error:#E74C3C;--placeholder-color:#BBB;flex:2;font-size:.7rem;padding:10px 0}.ts-content footer,.ts-content header,.ts-content section{padding:3px 5px;background-color:var(--background-color)}.ts-content header,.ts-content section{border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.ts-content header{border-top-left-radius:2.5px;border-top-right-radius:2.5px;border-top:1px solid var(--border-color)}.ts-content header{font-weight:550}.ts-content section{line-height:25px}.ts-content section.margin-bottom{border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;border-bottom:1px solid var(--border-color)}.ts-content footer{border:1px solid var(--border-color);border-top:unset;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px}.ts-content input{border:1px solid transparent;outline:0;font-size:.8rem;padding:2.5px 5px;background-color:var(--input-background-color)}.ts-content input::placeholder{color:var(--placeholder-color)}.ts-content input.active,.ts-content input:focus{border:1px solid var(--input-border-default)}.ts-content input.invalid{border:1px solid var(--input-border-error)!important}.ts-content__var{display:inline-block;position:relative}.ts-dropdown{margin:0;padding:0;position:absolute;top:19px;left:0;background:#eee;width:100%;z-index:1;transition:all 150ms;visibility:hidden;opacity:0;list-style-type:none;border:1px solid #444;border-top:unset}.ts-dropdown li{width:100%;opacity:.9;cursor:pointer;font-weight:550;padding:2px 5px;transition:background-color 150ms}.ts-dropdown li:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;display:flex;justify-content:center;align-items:center}.tg-btn button{border:unset;display:block;min-width:180px;height:35px;padding:0 10px;font-weight:500;background-color:#007bff;color:#fff;transition:transform .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px}.tg-btn button>svg{margin-right:5px;color:#003166}.tg-btn button:hover{opacity:1}.tg-btn button:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.tg-btn.small-btn{width:auto;margin:0 5px}.tg-btn.small-btn svg{margin-right:0}.tg-btn.small-btn button{min-width:35px;width:35px;padding:0;display:flex;justify-content:center;align-items:center}.tm-container{border:1px solid var(--border-color);border-radius:2.5px;display:flex}",
     map: undefined,
     media: undefined
@@ -9663,7 +9684,7 @@ var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$h = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$h = "data-v-730cbd76";
+var __vue_module_identifier__$h = "data-v-e3f5b41e";
 /* functional template */
 
 var __vue_is_functional_template__$h = false;

package/package.json

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

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

@@ -141,6 +141,9 @@
         }
         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) {
@@ -150,9 +153,7 @@
             this.adjustOnSelect()
           }
         }
-        if(!this.codTemplate && this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) {
-          this.$refs["template-v-select"].$el.querySelector("input").focus()
-        }
+        if(!this.codTemplate) this.focusSelect()
       },
       selectIfHasContact24h() {
         if(this.templates['envio_msg']) {

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

@@ -171,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) => {
@@ -181,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()
             })
           }
 
@@ -213,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;
     },