vue-intergrall-plugins 0.0.502 → 0.0.504

package/src/lib-components/Scroll/ScrollContent.vue

@@ -1,20 +1,26 @@
-
 <template>
   <transition name="fade">
-    <div class="btn-rolagem" :class="{'higher' : classeCustomizada}" v-show="visibilidade" @click="rolar()">
+    <div
+      class="btn-rolagem"
+      :class="{ higher: classeCustomizada }"
+      v-show="visibilidade"
+      @click="rolar()"
+    >
       <div class="sinalizar-msg-nova" :title="tituloSinalizador" v-show="sinalizar"></div>
       <fa-icon :icon="['fas', 'arrow-circle-down']" />
     </div>
-  </transition>  
+  </transition>
 </template>
 
 <style scoped>
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .3s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
 
 <script>
@@ -22,88 +28,98 @@ export default {
   props: {
     identificador: {
       type: String,
-      required: true
+      required: true,
     },
     containerSelector: {
       type: String,
-      required: true
+      required: true,
     },
     classeCustomizada: {
       type: Boolean,
-      required: false
+      required: false,
     },
     sinalizar: {
       type: Boolean,
-      required: false
+      required: false,
     },
     tituloSinalizador: {
       type: String,
-      required: false
+      required: false,
     },
     rolarParaMsg: {
       type: Boolean,
-      required: false
+      required: false,
     },
     callbackFn: {
       type: Function,
-      required: false
-    }
+      required: false,
+    },
   },
   created() {
-    this.$root.$refs[`rc-${this.identificador}`] = this
+    this.$root.$refs[`rc-${this.identificador}`] = this;
   },
   data() {
     return {
       visibilidade: false,
-      container: ""
-    }
+      container: "",
+    };
   },
   methods: {
-    getContainer(){
-      this.container = document.querySelector(this.containerSelector)
+    getContainer() {
+      this.container = document.querySelector(this.containerSelector);
     },
-    rolar(paraCima){
+    rolar(paraCima) {
       try {
-        this.getContainer()
-        if(this.sinalizar && this.callbackFn) this.callbackFn()
-        let alturaFinal = this.container.scrollHeight
-        if(this.rolarParaMsg) {
-          let ultimaMsgContainer = this.container.children[this.container.children.length - 2]
-          !ultimaMsgContainer.children.length ? ultimaMsgContainer = this.container.children[this.container.children.length - 3] : ''
-          const ultimaMsg = ultimaMsgContainer.lastElementChild.offsetHeight + 10 
-          alturaFinal -= ultimaMsg
+        this.getContainer();
+        if (this.sinalizar && this.callbackFn) this.callbackFn();
+        let alturaFinal = this.container.scrollHeight;
+        if (this.rolarParaMsg) {
+          let ultimaMsgContainer = this.container.children[
+            this.container.children.length - 2
+          ];
+          !ultimaMsgContainer.children.length
+            ? (ultimaMsgContainer = this.container.children[
+                this.container.children.length - 3
+              ])
+            : "";
+          const ultimaMsg = ultimaMsgContainer.lastElementChild.offsetHeight + 10;
+          alturaFinal -= ultimaMsg;
         }
 
-        this.container.scroll(0, paraCima ? 0 : alturaFinal)
-      }catch(e) {
-        console.error("Nao foi possivel rolar o container")
-        console.error(e)
+        this.container.scroll(0, paraCima ? 0 : alturaFinal);
+      } catch (e) {
+        console.error("Nao foi possivel rolar o container");
+        console.error(e);
       }
     },
-    verifyScrollbar(){
+    verifyScrollbar() {
       try {
-        this.getContainer()
+        this.getContainer();
 
-        this.visibilidade = true
+        this.visibilidade = true;
 
         const posicaoDaBarra = this.container.scrollTop,
-        tamanhoContainer = this.container.offsetHeight,
-        tamanhoBarra = this.container.scrollHeight
-        
-        if(posicaoDaBarra == (tamanhoBarra - tamanhoContainer)){
-          if(this.sinalizar) this.$emit("updateKey")
-          this.visibilidade = false
-        }else if(parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra || parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra + 1 || parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra - 1){
-          this.visibilidade = false
+          tamanhoContainer = this.container.offsetHeight,
+          tamanhoBarra = this.container.scrollHeight;
+
+        if (posicaoDaBarra == tamanhoBarra - tamanhoContainer) {
+          if (this.sinalizar) this.$emit("updateKey");
+          this.visibilidade = false;
+        } else if (
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra ||
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra + 1 ||
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra - 1
+        ) {
+          this.visibilidade = false;
         }
-      }catch(e) {
-        console.error("Ignorando botao de rolagem devido a erro")
-        console.error(e)
-        this.visibilidade = false
+      } catch (e) {
+        console.error("Ignorando botao de rolagem devido a erro");
+        console.error(e);
+        this.visibilidade = false;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style>
 .btn-rolagem {
@@ -114,18 +130,18 @@ export default {
 .btn-rolagem.higher {
   bottom: 36px;
 }
-.btn-rolagem svg{
-  font-size: 2.4rem;
+.btn-rolagem svg {
+  font-size: 38.4px;
   color: #757575;
   transition-duration: 300ms;
   transition-property: opacity;
-  opacity: .8;
+  opacity: 0.8;
   cursor: pointer;
 }
-.btn-rolagem svg:hover{
+.btn-rolagem svg:hover {
   opacity: 1;
 }
-.sinalizar-msg-nova{
+.sinalizar-msg-nova {
   position: absolute;
   top: -10px;
   left: -10px;
@@ -139,11 +155,11 @@ export default {
   animation-iteration-count: infinite;
 }
 
-@keyframes blink{
-  from{
-    opacity: .8 - .1;
+@keyframes blink {
+  from {
+    opacity: 0.8 - 0.1;
   }
-  to{
+  to {
     opacity: 1;
   }
 }

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

@@ -405,7 +405,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   --border-radius: 5px;
 
   flex: 2;
-  font-size: .7rem;
+  font-size: 11.2px;
   padding: 10px 0;
   display: flex;
   flex-direction: column;
@@ -450,7 +450,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 .ts-content input {
   border: 1px solid transparent;
   outline: 0;
-  font-size: .8rem;
+  font-size: 12.8px;
   padding: 2.5px 5px;
   background-color: var(--input-background-color); 
 }
@@ -490,7 +490,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   cursor: pointer;
   font-weight: 550;
   padding: 2px 3px;
-  font-size: .8rem;
+  font-size: 12.8px;
   transition: background-color 150ms;
 }
 .ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {