vue-intergrall-plugins 0.0.300 → 0.0.501

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

@@ -1,150 +1,150 @@
-
-<template>
-  <transition name="fade">
-    <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>  
-</template>
-
-<style scoped>
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .3s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-</style>
-
-<script>
-export default {
-  props: {
-    identificador: {
-      type: String,
-      required: true
-    },
-    containerSelector: {
-      type: String,
-      required: true
-    },
-    classeCustomizada: {
-      type: Boolean,
-      required: false
-    },
-    sinalizar: {
-      type: Boolean,
-      required: false
-    },
-    tituloSinalizador: {
-      type: String,
-      required: false
-    },
-    rolarParaMsg: {
-      type: Boolean,
-      required: false
-    },
-    callbackFn: {
-      type: Function,
-      required: false
-    }
-  },
-  created() {
-    this.$root.$refs[`rc-${this.identificador}`] = this
-  },
-  data() {
-    return {
-      visibilidade: false,
-      container: ""
-    }
-  },
-  methods: {
-    getContainer(){
-      this.container = document.querySelector(this.containerSelector)
-    },
-    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.container.scroll(0, paraCima ? 0 : alturaFinal)
-      }catch(e) {
-        console.error("Nao foi possivel rolar o container")
-        console.error(e)
-      }
-    },
-    verifyScrollbar(){
-      try {
-        this.getContainer()
-
-        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
-        }
-      }catch(e) {
-        console.error("Ignorando botao de rolagem devido a erro")
-        console.error(e)
-        this.visibilidade = false
-      }
-    }
-  }
-}
-</script>
-<style>
-.btn-rolagem {
-  position: absolute;
-  bottom: 10px;
-  right: 20px;
-}
-.btn-rolagem.higher {
-  bottom: 36px;
-}
-.btn-rolagem svg{
-  font-size: 2.4rem;
-  color: #757575;
-  transition-duration: 300ms;
-  transition-property: opacity;
-  opacity: .8;
-  cursor: pointer;
-}
-.btn-rolagem svg:hover{
-  opacity: 1;
-}
-.sinalizar-msg-nova{
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  background-color: #4f772d;
-  width: 12.5px;
-  height: 12.5px;
-  border-radius: 50%;
-  animation-name: blink;
-  animation-duration: 1000ms;
-  animation-direction: alternate;
-  animation-iteration-count: infinite;
-}
-
-@keyframes blink{
-  from{
-    opacity: .8 - .1;
-  }
-  to{
-    opacity: 1;
-  }
-}
-</style>
+
+<template>
+  <transition name="fade">
+    <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>  
+</template>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    identificador: {
+      type: String,
+      required: true
+    },
+    containerSelector: {
+      type: String,
+      required: true
+    },
+    classeCustomizada: {
+      type: Boolean,
+      required: false
+    },
+    sinalizar: {
+      type: Boolean,
+      required: false
+    },
+    tituloSinalizador: {
+      type: String,
+      required: false
+    },
+    rolarParaMsg: {
+      type: Boolean,
+      required: false
+    },
+    callbackFn: {
+      type: Function,
+      required: false
+    }
+  },
+  created() {
+    this.$root.$refs[`rc-${this.identificador}`] = this
+  },
+  data() {
+    return {
+      visibilidade: false,
+      container: ""
+    }
+  },
+  methods: {
+    getContainer(){
+      this.container = document.querySelector(this.containerSelector)
+    },
+    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.container.scroll(0, paraCima ? 0 : alturaFinal)
+      }catch(e) {
+        console.error("Nao foi possivel rolar o container")
+        console.error(e)
+      }
+    },
+    verifyScrollbar(){
+      try {
+        this.getContainer()
+
+        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
+        }
+      }catch(e) {
+        console.error("Ignorando botao de rolagem devido a erro")
+        console.error(e)
+        this.visibilidade = false
+      }
+    }
+  }
+}
+</script>
+<style>
+.btn-rolagem {
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+.btn-rolagem.higher {
+  bottom: 36px;
+}
+.btn-rolagem svg{
+  font-size: 2.4rem;
+  color: #757575;
+  transition-duration: 300ms;
+  transition-property: opacity;
+  opacity: .8;
+  cursor: pointer;
+}
+.btn-rolagem svg:hover{
+  opacity: 1;
+}
+.sinalizar-msg-nova{
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  background-color: #4f772d;
+  width: 12.5px;
+  height: 12.5px;
+  border-radius: 50%;
+  animation-name: blink;
+  animation-duration: 1000ms;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink{
+  from{
+    opacity: .8 - .1;
+  }
+  to{
+    opacity: 1;
+  }
+}
+</style>