vue-intergrall-plugins 1.0.0 → 1.0.2

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

@@ -1,28 +1,38 @@
 <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"
+    @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 
+      <textarea
         :ref="identifier"
-        :placeholder="textareaSettings.placeholderMessage" 
+        :placeholder="textareaSettings.placeholderMessage"
         v-model="message"
         @input="sendFinalMessage"
         @paste="pasteImage"
       >
       </textarea>
       <div class="expand-textarea-footer">
-        <BtnEmojis 
+        <BtnEmojis
           v-show="buttons.hasEmojis"
           :ref="`${identifier}-emojis`"
           :emojiId="`${identifier}-em`"
           :left="false"
           @insert-emoji="insertEmoji"
         />
-        <BtnFiles 
+        <BtnFiles
           v-if="buttons.hasFiles"
-          :textId="identifier" 
-          :dictionary="dictionary" 
+          :textId="identifier"
+          :dictionary="dictionary"
           :fileSettings="fileSettings"
           :ref="`${identifier}-file`"
           @set-file-vars="setFileVars"
@@ -37,42 +47,48 @@
 </template>
 
 <script>
-import { mixin as clickaway } from "vue-clickaway"
-import BtnEmojis from "./BtnEmojis"
-import BtnFiles from "./BtnFiles"
-import { returnMessageWithHexa } from "../../services/textFormatting"
+import { mixin as clickaway } from "vue-clickaway";
+import BtnEmojis from "./BtnEmojis";
+import BtnFiles from "./BtnFiles";
+import { returnMessageWithHexa } from "../../services/textFormatting";
 
 export default {
   components: { BtnEmojis, BtnFiles },
-  mixins: [ clickaway ],
+  mixins: [clickaway],
   props: {
     identifier: {
       type: String,
-      required: true
+      required: true,
     },
     dictionary: {
       type: Object,
-      required: true
+      required: true,
     },
     envioEmAndamento: {
       type: Boolean,
-      required: false
+      required: false,
     },
     buttons: {
       type: Object,
-      default: () => { return { hasEmojis: false, hasSendButton: true, hasFiles: true } },
-      required: false
+      default: () => {
+        return { hasEmojis: false, hasSendButton: true, hasFiles: true };
+      },
+      required: false,
     },
     fileSettings: {
       type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
-      required: false
+      default: () => {
+        return { docsExtensions: "", imagesExtensions: "", multiple: false };
+      },
+      required: false,
     },
     textareaSettings: {
       type: Object,
-      default: () => { return { placeholderMessage: "", title: "Nova mensagem" } },
-      required: false
-    }
+      default: () => {
+        return { placeholderMessage: "", title: "Nova mensagem" };
+      },
+      required: false,
+    },
   },
   data() {
     return {
@@ -81,331 +97,342 @@ export default {
       hasAnyFile: false,
       imagePreview: "",
       isDoc: false,
-      fileFormatError: false
-    }
+      fileFormatError: false,
+    };
   },
   methods: {
     away() {
-      if(this.$refs[`${this.identifier}-file`]) this.$refs[`${this.identifier}-file`].openFiles = false
+      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
+      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
+      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)
-    },  
+      const messageAux = this.formatMessage(this.message);
+      this.$emit("final-message", messageAux);
+    },
     emitirEnvio() {
-      if(this.envioEmAndamento) return
-      if(!this.buttons.hasSendButton) return
+      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)
-            
+        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)
+      } 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.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 })
+      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
+          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
+      return true;
     },
     returnObjectMessage(message) {
       return {
         message,
-        attachment: this.hasAnyFile ? this.file  : false,
+        attachment: this.hasAnyFile ? this.file : false,
         isDoc: this.isDoc,
-        imagePreview: this.imagePreview
-      }
+        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()
+      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)
+        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 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"
+      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 })
+      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
+        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
+      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
+        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
+          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 })
+      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}` })
+          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()
+      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.file = file;
+      this.imagePreview = imagePreview ? imagePreview : "";
+      this.isDoc = isDoc;
+      this.fileFormatError = fileFormatError;
+      this.hasAnyFile = hasAnyFile;
 
-      this.$emit("set-file-vars", fileObj)
+      this.$emit("set-file-vars", fileObj);
     },
     openImage(imagePreview) {
-      this.$emit("open-image", 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)
+        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)
+      } catch (e) {
+        console.error("Nao foi possivel colar a/o imagem/documento");
+        console.error(e);
       }
     },
     insertEmoji(emoji) {
       try {
-        if(!emoji) return
-        const textarea = this.$refs[`${this.identifier}`]
+        if (!emoji) return;
+        const textarea = this.$refs[`${this.identifier}`];
         if (document.activeElement === textarea) {
-          const cursorStart = textarea.selectionStart
-          const cursorEnd = textarea.selectionEnd
+          const cursorStart = textarea.selectionStart;
+          const cursorEnd = textarea.selectionEnd;
           if (cursorEnd == textarea.value.length) {
-            this.message += emoji.finalEmoji
+            this.message += emoji.finalEmoji;
             textarea.setSelectionRange(textarea.value.length, textarea.value.length);
           } else {
             const initValue = textarea.value.slice(0, cursorStart) + emoji.finalEmoji;
-            const endValue = textarea.value.slice(cursorEnd)
-            this.message = initValue + endValue
+            const endValue = textarea.value.slice(cursorEnd);
+            this.message = initValue + endValue;
             textarea.setSelectionRange(initValue.length, initValue.length);
           }
         } else {
-          this.message += emoji.finalEmoji
+          this.message += emoji.finalEmoji;
         }
-        this.sendFinalMessage()
-      }catch(e) {
-        console.error("Erro ao inserir emoji")
-        console.error(e)
+        this.sendFinalMessage();
+      } catch (e) {
+        console.error("Erro ao inserir emoji");
+        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: 20.8px;
-  }
-  .sc-icone-fechar.sc-icone-fechar--externo {
-    top: -10px;
-    right: -10px;
-  }
-  .sc-icone-fechar.sc-icone-fechar--interno {
-    top: 10px;
-    right: 10px;
-  }
+<style scoped>
+.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 {
-    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: 20.8px;
+  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: 20.8px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 300ms;
+}
+.expand-textarea-footer .text-footer-actions--btn:hover {
+  opacity: 1;
+  background-color: rgba(30, 30, 30, 0.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: 20.8px;
-    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: 20.8px;
-    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;
+.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;
+  transition-duration: 300ms;
+  user-select: none;
+  cursor: pointer;
+  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
+  opacity: 0.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>
+  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>