vue-intergrall-plugins 0.0.4 → 0.0.8

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

@@ -1,59 +1,57 @@
 <template>
-  <div class="template-single">
-    <div class="template-content">
+  <div class="ts-container">
+    <div class="ts-content">
       <div v-for="(component, cIndex) in template.components" :key="cIndex">
         <header
           v-if="component.type === 'header'"
-          :class="{ sm__template: smartStyle }"
           id="template_header"
         >
-          <span v-for="(param, pIndex) in component.parameters" :key="pIndex">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
             <template v-if="param.type === 'text'">
-              <p
+              <div
                 v-if="regexVars.test(param.text)"
                 v-html="
                   param.text.replace(
                     regexVars,
-                    `<div class='template-var'>${htmlInputString}${varListValues}</div>`
+                    `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
                   )
                 "
-              ></p>
+              ></div>
               <p v-else v-html="param.text"></p>
             </template>
-          </span>
+          </div>
         </header>
         <section
           v-if="component.type === 'body'"
-          :class="{ sm__template: smartStyle, 'margin-bottom' : template.components.length === 2 }"
+          :class="{'margin-bottom' : template.components.length === 2 }"
           id="template_body"
         >
-          <span v-for="(param, pIndex) in component.parameters" :key="pIndex">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
             <template v-if="param.type === 'text'">
-              <p
+              <div
                 v-if="regexVars.test(param.text)"
                 v-html="
                   param.text.replace(
                     regexVars,
-                    `<div class='template-var'>${htmlInputString}${varListValues}</div>`
+                    `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
                   )
                 "
-              ></p>
+              ></div>
               <p v-else v-html="param.text"></p>
             </template>
-          </span>
+          </div>
         </section>
         <footer
           v-if="component.type == 'footer'"
-          :class="{ sm__template: smartStyle }"
           id="template_footer"
         >
-          <span v-for="(param, pIndex) in component.parameters" :key="pIndex">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
             <small v-if="param.type == 'text'" v-html="param.text"> </small>
-          </span>
+          </div>
         </footer>
       </div>
     </div>
-    <div class="template-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
+    <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
       <button @click="$emit('click-trigger')">
         <template v-if="!iconButton"> {{ dictionary.btn_contatar_clientes }} </template>
         <fa-icon v-else :icon="['fas', 'paper-plane']" />
@@ -83,10 +81,6 @@ export default {
       required: false,
       default: true,
     },
-    smartStyle: {
-      type: Boolean,
-      required: false,
-    },
     allVariables: {
       type: Boolean,
       required: false,
@@ -135,14 +129,13 @@ export default {
     },
     getListOpts() {
       this.varListValues =
-      `<ul class="var-list-dropdown">
+      `<ul class="ts-dropdown">
         <li> nome </li>
         ${this.allVariables ? '<li> telefone </li>' : ''}
       </ul>`
     },
     setInputs() {
       let qtdInputs = 0
-
       const header = document.querySelector("#template_header");
       const body   = document.querySelector("#template_body");
       const footer = document.querySelector("#template_footer");
@@ -150,9 +143,7 @@ export default {
         header.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) })
         qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length
       }
-      if (this.lastVar === 0) {
-        this.lastVar += 1;
-      }
+      if (this.lastVar === 0) this.lastVar += 1
       if (body !== null) {
         body.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
         qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length
@@ -163,12 +154,9 @@ export default {
       }
 
       if(qtdInputs === 1) {
-        document.querySelector(`.input-var-${this.identifier}`).parentElement.parentElement.parentElement.style.width = "100%"
         document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%"
         document.querySelector(`.input-var-${this.identifier}`).style.width = "100%"
-      }
-
-      if(qtdInputs === 0) {
+      }else if(qtdInputs === 0) {
         this.$emit("set-vars", this.template)
       }
     },
@@ -193,7 +181,7 @@ export default {
             })
           }
 
-          const containerGeral = document.querySelector(".templates-container")
+          const containerGeral = document.querySelector(".tg-container")
           varList.classList.add("visible")
           const maxBottom = containerGeral.getBoundingClientRect().bottom,
           currentBottom = varList.getBoundingClientRect().bottom
@@ -235,10 +223,21 @@ export default {
       }
     },
     isValid(textValue) {
-      const regex =
-        /^[ ?????�����??��?���?��??????�������?���?��???��??\w?-�\r\n()[\]{}.,:;@??�????!&?�`�=%^*+\-$|/]+$/;
-      const value = textValue ? textValue.trim("") : ""
-      return regex.test(value);
+      const regex = {
+        htmlTags: /<\/?[\d\w\s=\-:\.\/\'\";]+>/gi,
+        enter: /\n/g,
+        consecutiveSpaces: /\s{3,}/g
+      }
+      const value = textValue ? textValue.trim("") : "";
+      if(!value.length) return false
+      
+      let isValueValid = true
+      for(let key in regex) {
+        if(!isValueValid) return isValueValid
+        if(regex[key].test(value)) isValueValid = false 
+      }
+
+      return isValueValid
     },
     setVar(event, key, notificar) {
       if (event && event.target) {

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

@@ -1,25 +0,0 @@
-<template>
-  <div class="req-loader-container" :class="{'align-right' : alignRight, 'light-bg' : hasBg}">
-    <div class="req-loader" :class="{'big' : size == 'big'}"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    hasBg: {
-      type: Boolean,
-      required: false
-    },
-    alignRight: {
-      type: Boolean,
-      required: false
-    },
-    size: {
-      type: String,
-      required: false,
-      default: "small"
-    }
-  }
-}
-</script>