vue-intergrall-plugins 0.0.237 → 0.0.240

package/package.json

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

package/src/lib-components/Chat/BtnFiles.vue

@@ -236,7 +236,7 @@ export default {
       if(fileInput) fileInput.click()
       if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
     },
-    isFileValid(type, fileName) {
+    isFileValid(type, fileName, fileType) {
       if((type == "img" && !this.fileSettings.imagesExtensions) || (type == "doc" && !this.fileSettings.docsExtensions)) {
         this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
         this.hasAnyFile = false
@@ -244,7 +244,7 @@ export default {
       }
       const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
       const regex = new RegExp("("+extensions+")", "i")
-      if(regex.test(fileName)) return true
+      if(regex.test(fileName) || regex.test(fileType)) return true
       this.hasAnyFile = false
       this.showToastedValidFormats()
       return false
@@ -287,7 +287,7 @@ export default {
         this.fileSize = this.file.length
         if(!this.fileSettings.multiple) {
           this.file = this.file[0]
-          this.singleFileUpload(type, this.file.name)
+          this.singleFileUpload(type, this.file.name, this.file.type)
         }else {
           this.multipleFileUpload()
         }
@@ -322,7 +322,7 @@ export default {
         const singleFileType = this.returnFileType(file)
         if(!singleFileType) file.invalid = true
         file.imgOrDoc = singleFileType ? singleFileType : ""
-        if(this.isFileValid(file.imgOrDoc, file.name)) {
+        if(this.isFileValid(file.imgOrDoc, file.name, file.type)) {
           if(file.imgOrDoc == "img") {
             const fileReader = new FileReader();
             waitForImageLoad = true
@@ -350,8 +350,8 @@ export default {
 
       if(this.isDoc && !waitForImageLoad) this.emitFileVars()
     },
-    singleFileUpload(type, fileName) {
-      if(this.isFileValid(type, fileName)) {
+    singleFileUpload(type, fileName, fileType) {
+      if(this.isFileValid(type, fileName, fileType)) {
         const fileReader = new FileReader()
         if(type === "img") {
           fileReader.onload = () => this.imagePreview = fileReader.result 

package/src/lib-components/Chat/BtnScreenShare.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('toggle-standard-messages')" :title="dictionary.title_screen_share">
+    <fa-icon :icon="['fas', 'desktop']" />
+    <fa-icon :icon="['fas', 'share']" />
+  </div>
+</template>
+
+<style scoped>
+  .text-footer-actions--btn {
+    position: relative;
+  }
+  .text-footer-actions--btn > svg:nth-child(1) {
+    font-size: 1.2rem;
+  }
+  .text-footer-actions--btn > svg:nth-child(2) {
+    font-size: .6rem;
+    position: absolute;
+    transform: translateY(-2px)
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/TextFooter.vue

@@ -38,12 +38,13 @@
         :message="message"
         :maxCharacters="textareaSettings.maxCharacters"
       />
-      <div class="text-footer-actions" v-if="buttons.hasSendButton">
-        <span class="text-footer-actions--btn" :title="dictionary.title_enviar_msg" @click="sendMessageHandler">
-          <fa-icon :icon="['fas', 'paper-plane']" />
-        </span>
-      </div>
-      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages || buttons.hasScreenShare" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+        <BtnScreenShare 
+          v-show="buttons.hasScreenShare && !audioFile"
+          @handle-screen-share="handleScreenShare"
+          :dictionary="dictionary"
+          :ref="`${textId}-screen-share`"
+        />
         <BtnMic 
           v-show="buttons.hasAudio && !audioFile"
           :dictionary="dictionary"
@@ -79,6 +80,11 @@
           :dictionary="dictionary"
         />
       </div>
+      <div class="text-footer-actions" v-if="buttons.hasSendButton">
+        <span class="text-footer-actions--btn" :title="dictionary.title_enviar_msg" @click="sendMessageHandler">
+          <fa-icon :icon="['fas', 'paper-plane']" />
+        </span>
+      </div>
     </div>
     <transition name="fade">
       <StandardMessages 
@@ -116,14 +122,15 @@ import BtnFiles from "./BtnFiles"
 import BtnExpand from "./BtnExpand"
 import BtnStandardMessages from "./BtnStandardMessages"
 import StandardMessages from "./StandardMessages"
+import BtnScreenShare from "./BtnScreenShare"
 
 export default {
-  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages },
+  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages, BtnScreenShare },
   mixins: [ clickaway ],
   props: {
     buttons: {
       type: Object,
-      default: () => { return { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false, hasExpand: false } },
+      default: () => { return { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false, hasExpand: false, hasScreenShare: false } },
       required: false
     },
     cssStyle: {
@@ -463,6 +470,9 @@ export default {
         console.error(e)
       }
     },
+    handleScreenShare() {
+      this.$emit("handle-screen-share")
+    },
     toggleStandardMessages() {
       this.showStandardMessages = !this.showStandardMessages
     },
@@ -596,10 +606,10 @@ ul {
       align-items: center;
       justify-content: flex-end;
       position: absolute;
-      top: -42px;
-      right: 2px;
-      background-color: #DDD;
-      box-shadow: inset 0px -10px 5px -11px rgba(0, 0, 0, 0.5); }
+      top: -20px;
+      right: 35px;
+      background-color: #FAFAFA;
+    }
     .text-footer-container .text-footer-actions .text-footer-actions--btn {
       display: flex;
       justify-content: center;

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

@@ -197,6 +197,7 @@ export default {
       try {
         const root = document.documentElement
         root.style.setProperty('--message-color', this.corMsg)
+        this.adjustFontColor(this.corMsg)
       }catch(e) {
         console.error("Erro ao atribuir a cor as mensagens")
         console.error(e)
@@ -227,6 +228,34 @@ export default {
     abrirImagem(imagem) {
       this.$emit("abrir-imagem", imagem)
     },
+    adjustFontColor(cor) {
+      try {
+        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor)
+      
+        result = result ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16)
+        } : null
+      
+        if(!result) return
+      
+        const { r, g, b }= result
+
+        const rgb = parseInt(`${r}${g}${b}`, 16)
+        const r1 = rgb >> 16 & 0xFF
+        const g1 = rgb >> 8 & 0xFF
+        const b1 = rgb & 0xFF
+
+        const luma = 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1
+        console.log({ luma })
+
+        const root = document.documentElement
+        root.style.setProperty('--text-color', luma < 50 ? "#111B21" : "#FFF")
+      }catch(e) {
+        console.error("Erro ao ajustar a cor da mensagem: ", e)
+      }
+    },
     formatMsg(msg) {
       const regex = /(\n|&nbsp;)/g
       if(regex.test(msg)) msg = msg.replace(regex, "<br>")
@@ -238,7 +267,8 @@ export default {
 
 <style>
   :root {
-    --message-color: #373737
+    --message-color: #373737;
+    --text-color: #FFF;
   }
 
   .fade-enter-active, .fade-leave-active {
@@ -250,7 +280,7 @@ export default {
 
   .mensagem {
     padding: 14px 7px;
-    border-radius: 2.5px;
+    border-radius: 5px;
     min-width: 150px;
     min-height: 60px;
     width: -webkit-fit-content;
@@ -259,8 +289,12 @@ export default {
     position: relative;
     max-width: 80%;
     margin-bottom: 10px;
-    font-size: .85rem;
+    font-size: .75rem;
     word-break: break-word;
+
+    -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);
   }
   .mensagem.max-w-60 {
     max-width: 60%;
@@ -385,15 +419,15 @@ export default {
   }
   .mensagem__principal > .mensagem {
     background-color: var(--message-color);
-    color: #FFF;
+    color: var(--text-color);
   }
 
   .mensagem__principal > .mensagem .horario-envio {
-    color: #FFF;
+    color: var(--text-color);
   }
   .mensagem__principal > .mensagem .autor-mensagem { 
     right: 5px;
-    color: #FFF;
+    color: var(--text-color);
   }
   /* Outros */
   .mensagem__outros {
@@ -450,10 +484,10 @@ export default {
     font-size: .85em
   }
   .info-mapa li.address, .info-mapa li.url {
-    font-size: .7em
+    font-size: .85em
   }
   .info-mapa li.url {
-    font-size: .7em
+    font-size: .85em
   }
 
   .tooltip-list {

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

@@ -88,7 +88,7 @@ export default {
     justify-content: center;
     align-items: center;
     background-color: #FFF;
-    color: var(--message-color);
+    color: var(--text-color);
     padding: 10px 12px;
     border-radius: 5px;
     margin-bottom: 10px;