vue-intergrall-plugins 0.0.97 → 0.0.103

package/package.json

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

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

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('expand-textarea')" :title="dictionary.title_expandir_textarea">
+    <fa-icon :icon="['fas', 'expand-alt']" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

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

@@ -59,14 +59,14 @@
 
 .files-counter {
   position: absolute;
-  top: 0px;
+  top: unset;
+  transform: translate(17.5px, -15px);
+  background-color: #888;
   z-index: 1;
-  right: 0px;
   font-size: .5rem;
   width: 15px;
   height: 15px;
   border-radius: 50%;
-  background: #a4ac86;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -204,7 +204,7 @@ export default {
         }else{
           file.invalid = true
           this.fileFormatError = true
-          this.validFileFormats = `${file.imgOrDoc === "img" ? this.fileSettings.imagesExtensions.split("|").join(", ") : this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
+          this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
         }
       })
 
@@ -224,7 +224,7 @@ export default {
         this.fileFormatError = false
       }else {
         this.fileFormatError = true
-        this.validFileFormats = `${type === "img" ? this.fileSettings.imagesExtensions.split("|").join(", ") : this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
+        this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
       }
 
       if(this.isDoc) this.emitFileVars()

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

@@ -51,6 +51,11 @@ export default {
       type: Boolean,
       default: false,
       required: false
+    },
+    left: {
+      type: Boolean,
+      default: true,
+      required: false
     }
   },
   computed: {
@@ -93,7 +98,7 @@ export default {
       if(this.$refs[this.emojiId] && this.$refs[this.emojiId].$el){
         this.$refs[this.emojiId].$el.style.position = "absolute"
         this.$refs[this.emojiId].$el.style.top = `${this.top}px`
-        this.$refs[this.emojiId].$el.style.left = "0"
+        this.left ? this.$refs[this.emojiId].$el.style.left = "0" : this.$refs[this.emojiId].$el.style.right = "0"
         this.$refs[this.emojiId].$el.style.height = `${this.height}px`
       }
     },

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

@@ -0,0 +1,400 @@
+<template>
+  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-on-clickaway="away">
+    <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo" @click="$emit('fechar-expand')" />
+    <div class="expand-textarea-content">
+      <h1 class="expand-textarea-title" v-text="textareaSettings.title"></h1>
+      <textarea 
+        :ref="identifier"
+        :placeholder="textareaSettings.placeholderMessage" 
+        v-model="message"
+        @input="sendFinalMessage"
+        @paste="pasteImage"
+      >
+      </textarea>
+      <div class="expand-textarea-footer">
+        <EmojisTextFooter 
+          v-show="buttons.hasEmojis"
+          :ref="`${identifier}-emojis`"
+          :emojiId="`${identifier}-em`"
+          :left="false"
+          @insert-emoji="insertEmoji"
+        />
+        <BtnFiles 
+          v-if="buttons.hasFiles"
+          :textId="identifier" 
+          :dictionary="dictionary" 
+          :fileSettings="fileSettings"
+          :ref="`${identifier}-file`"
+          @set-file-vars="setFileVars"
+          @open-image="openImage"
+        />
+        <slot name="btn-1"></slot>
+        <slot name="btn-2"></slot>
+        <!-- "expand-textarea-button" -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from "vue-clickaway"
+import EmojisTextFooter from "./EmojisTextFooter"
+import BtnFiles from "./BtnFiles"
+import { returnMessageWithHexa } from "@/services/textFormatting"
+
+export default {
+  components: { EmojisTextFooter, BtnFiles },
+  mixins: [ clickaway ],
+  props: {
+    identifier: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    envioEmAndamento: {
+      type: Boolean,
+      required: false
+    },
+    buttons: {
+      type: Object,
+      default: () => { return { hasEmojis: false, hasSendButton: true, hasFiles: true } },
+      required: false
+    },
+    fileSettings: {
+      type: Object,
+      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
+      required: false
+    },
+    textareaSettings: {
+      type: Object,
+      default: () => { return { placeholderMessage: "", title: "Nova mensagem" } },
+      required: false
+    }
+  },
+  data() {
+    return {
+      message: "",
+      file: [],
+      hasAnyFile: false,
+      imagePreview: "",
+      isDoc: false,
+      fileFormatError: false
+    }
+  },
+  methods: {
+    away() {
+      if(this.$refs[`${this.identifier}-file`]) this.$refs[`${this.identifier}-file`].openFiles = false
+    },
+    removeHTMLElementsFromMessage(message) {
+      const regexTags = /<\/?[\d\w\s=\-:./'";]+>/gi
+      if(message.match(regexTags)) message = message.replace(regexTags, ' ')
+      return message
+    },
+    formatMessage(message) {
+      if(!message) return ""
+      message = message.trim()
+      message = message.replace(/\n$/, "", message)
+      message = returnMessageWithHexa(message)
+      message = this.removeHTMLElementsFromMessage(message)
+      return message
+    },
+    sendFinalMessage() {
+      const messageAux = this.formatMessage(this.message)
+      this.$emit("final-message", messageAux)
+    },  
+    emitirEnvio() {
+      if(this.envioEmAndamento) return
+      if(!this.buttons.hasSendButton) return
+      try {
+        if(this.verifyMessage()) {
+          const messageAux = this.formatMessage(this.message)
+          if(messageAux || this.hasAnyFile) {
+            const objMessage = this.returnObjectMessage(messageAux)
+            this.$emit("send-message", messageAux)
+            this.$emit("obj-message", objMessage)
+            
+            // this.reset() // Deve ser chamada de fora do plugin
+          }
+        }
+      }catch(e) {
+        console.error("Erro ao emitir envio da mensagem")
+        console.error(e)
+      }
+    },
+    verifyMessage() {
+      if((!this.message || !this.message.trim()) && !this.hasAnyFile) return false
+
+      if(this.fileFormatError) {
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+        return false
+      }
+
+      return true
+    },
+    returnObjectMessage(message) {
+      return {
+        message,
+        attachment: this.hasAnyFile ? this.file  : false,
+        isDoc: this.isDoc,
+        imagePreview: this.imagePreview
+      }
+    },
+    reset() {
+      if(this.buttons.hasEmojis && this.$refs[`emoji-text-${this.identifier}-emoji`].showEmojis) this.$refs[`emoji-text-${this.identifier}-emoji`].toggleEmojiSelection()
+      if(this.hasAnyFile) this.$refs[`${this.identifier}-file`].deleteFile()
+      this.message = ""
+      this.sendFinalMessage()
+      this.focusTextarea()
+    },
+    dropFile(e) {
+      try {
+        e.stopPropagation()
+        e.preventDefault()
+        const files = e.dataTransfer.files.length ? e.dataTransfer.files : ""
+        this.filesHandler(files)
+      }catch(e) {
+        console.error("Erro drop file")
+        console.error(e)
+      }
+    },
+    returnFileType(file, stopAlert) {
+      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
+      if(imgRegex.test(file.name)) return "img"
+
+      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
+      if(docRegex.test(file.name)) return "doc"
+
+      if(!stopAlert) return
+      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      const str = {
+        img: this.fileSettings.imagesExtensions.split("|").join(", "),
+        doc: this.fileSettings.docsExtensions.split("|").join(", ")
+      }
+      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      return false
+    },
+    filesHandler(files) {
+      if(!Array.isArray(files)) files = Array.from(files)
+      const fileType = this.returnFileType(files[0], true)
+      let invalidFile = false
+      try {
+        files.forEach(file => {
+          const singleFileType = this.returnFileType(file, true)
+          if(!singleFileType) {
+            invalidFile = true
+            file.invalid = true
+          }
+          file.imgOrDoc = singleFileType ? singleFileType : ""
+        })
+      }catch(e) {
+        console.error("Erro ao tentar percorrer os arquivos")
+        console.error(e)
+        invalidFile = true
+      }
+
+      if(!invalidFile) {
+        this.$refs[`${this.identifier}-file`].fileUpload(files, fileType, true)
+      }else {
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      }
+    },
+    focusTextarea() {
+      this.$refs[`${this.identifier}`].focus()
+    },
+    setFileVars(fileObj) {
+      const { file, imagePreview, isDoc, fileFormatError, hasAnyFile } = fileObj;
+
+      this.file = file
+      this.imagePreview = imagePreview ? imagePreview : ""
+      this.isDoc = isDoc
+      this.fileFormatError = fileFormatError
+      this.hasAnyFile = hasAnyFile
+
+      this.$emit("set-file-vars", fileObj)
+    },
+    openImage(imagePreview) {
+      this.$emit("open-image", imagePreview)
+    },
+    pasteImage(e) {
+      try {
+        if(e.clipboardData.files.length && !this.buttons.hasFiles) {
+          e.preventDefault()
+          return
+        }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
+          const files = e.clipboardData.files
+          this.filesHandler(files)
+        }
+      }catch(e) {
+        console.error("Nao foi possivel colar a/o imagem/documento")
+        console.error(e)
+      }
+    },
+    insertEmoji(emoji) {
+      try {
+        const textarea = this.$refs[`${this.identifier}`]
+        console.log(textarea)
+        this.focusTextarea()
+        const cursorStart = textarea.selectionStart
+        const cursorEnd = textarea.selectionEnd
+        this.message = this.message.slice(0, cursorStart) + emoji.native + this.message.slice(cursorEnd)
+        this.sendFinalMessage()
+      }catch(e) {
+        console.error("Erro na insercao de emojis")
+        console.error(e)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .sc-icone-fechar {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #FFF;
+    border-radius: 50%;
+    z-index: 1;
+    color: #E74C3C;
+    font-size: 1.3rem;
+  }
+  .sc-icone-fechar.sc-icone-fechar--externo {
+    top: -10px;
+    right: -10px;
+  }
+  .sc-icone-fechar.sc-icone-fechar--interno {
+    top: 10px;
+    right: 10px;
+  }
+
+  .expand-textarea {
+    position: relative;
+    width: 90%;
+    height: 90%;
+    z-index: 1;
+  }
+
+  .expand-textarea-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #FFF;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .expand-textarea-title {
+    padding: 2.5px 8px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 1.3rem;
+    background-color: #222;
+    color: #FFF;
+  }
+  .expand-textarea-content textarea{
+    padding: 10px;
+    flex: 1;
+    width: 100%;
+    border: unset;
+    resize: none;
+    outline: none;
+    overflow-x: hidden;
+  }
+  .expand-textarea-content textarea:hover, .expand-textarea-content textarea:active {
+    outline: none;
+  }
+  .expand-textarea-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px;
+    background-color: #F7F7F7;
+    position: relative;
+  }
+  .expand-textarea-footer .text-footer-preview-container {
+    position: absolute;
+    top: -200px;
+    right: 145px;
+    height: 200px;
+    background: #F7F7F7;
+  }
+  .expand-textarea-footer .text-footer-actions--btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0);
+    color: #333;
+    padding: 2.5px;
+    margin: 0 15px 0 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.3rem;
+    cursor: pointer;
+    opacity: .9;
+    transition: all 300ms;
+  }
+  .expand-textarea-footer .text-footer-actions--btn:hover {
+    opacity: 1;
+    background-color: rgba(30, 30, 30, .1);
+  }
+  
+  .expand-textarea-button {
+    width: 125px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    transition-duration: 300ms;
+    user-select: none;
+    cursor: pointer;
+    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
+    opacity: .9;
+    border-radius: 5px;
+
+    padding: 5px 10px;
+    border-radius: 2.5px;
+    position: relative;
+  }
+  .expand-textarea-button.green {
+    background-color: #2A963A;
+    color: #FFF;
+    margin-right: 10px;
+  }
+  .expand-textarea-button.red {
+    background-color: #E74C3C;
+    color: #FFF;
+  }
+  .expand-textarea-button:hover{
+    opacity: 1;
+  }
+  .expand-textarea-button:active{
+    opacity: 1;
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+    -webkit-transform: translateY(1px);
+    -moz-transform: translateY(1px);
+    -o-transform: translateY(1px);
+    -ms-transform: translateY(1px);
+    transform: translateY(1px);
+  }
+  .expand-textarea-button.carregando {
+    background-color: #777;
+  }
+</style>

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

@@ -8,7 +8,7 @@
         </span>
         <div class="text-footer-invalid-format" v-if="fileFormatError" key="mfp-invalid-format">
           <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-          <h4 v-text="validFileFormats"></h4>
+          <h4 v-html="validFileFormats"></h4>
         </div>
       </template>
       <template v-else>
@@ -129,6 +129,38 @@ export default {
     background-color: #555
   }
 
+  .text-footer-invalid-format {
+    color: #222;
+    padding: 10px; 
+  }
+  .text-footer-invalid-format h3 {
+    font-weight: 500; 
+  }
+  .text-footer-invalid-format h4 {
+    font-size: .9rem; 
+  }
+
+  .text-footer-exclude-file {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 1rem;
+    min-height: 1rem;
+    background-color: #FFF;
+    border-radius: 50%;
+  }
+  .text-footer-exclude-file svg {
+    transition: color 200ms;
+    color: #e9594a; 
+  }
+  .text-footer-exclude-file svg:hover {
+    color: #E74C3C; 
+  }
+
   .file-preview {
     display: flex;
     width: 100%;

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

@@ -42,5 +42,33 @@ export default {
 </script>
 
 <style>
-
+  .text-footer-invalid-format {
+    color: #222;
+    padding: 10px; 
+  }
+  .text-footer-invalid-format h3 {
+    font-weight: 500; 
+  }
+  .text-footer-invalid-format h4 {
+    font-size: .9rem; 
+  }
+  .text-footer-preview-title {
+    font-size: 1rem;
+    padding: 10px 0 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; 
+  }
+  .text-footer-image-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%; 
+  }
+  .text-footer-image-preview img {
+    cursor: pointer;
+    max-width: 98%;
+    max-height: 98%;
+    padding: 2%; 
+  }
 </style>