vue-intergrall-plugins 0.0.5 → 0.0.9

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

@@ -1,78 +1,81 @@
 <template>
-  <div class="text-footer-container" v-on-clickaway="away" v-if="textId">
+  <div class="text-footer-container" v-on-clickaway="away" v-if="textId" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent>
     <div class="text-footer" :class="cssStyle.width ? cssStyle.width: ''" :style="`background-color: ${cssStyle.backgroundColor}`">
-      <emojis-text-footer :ref="`${this.textId}`" :emojiId="`${this.textId}`" v-if="buttons.hasEmojis  && !audioFile" :down="emojiSettings.openEmojisFrom == 'top' ? false : true" :small="emojiSettings.smallEmojis" @insert-emoji="insertEmoji"></emojis-text-footer>
+      <EmojisTextFooter 
+        v-show="buttons.hasEmojis && !audioFile"
+        :ref="`${this.textId}`"
+        :emojiId="`${this.textId}`"
+        :down="emojiSettings.openEmojisFrom == 'top' ? false : true"
+        :small="emojiSettings.smallEmojis"
+        @insert-emoji="insertEmoji"
+      />
       <transition name="fade">
-        <req-loader v-if="isSending" />
+        <Loader v-if="isSending" />
       </transition>
-      <textarea v-if="!audioFile" :id="`text-footer-${this.textId}`" @input="sendFinalMessage" v-model="message" @keydown.up="toggleHSM" @keydown.down="toggleHSM" @keydown.esc="closeEmojis" @keydown.enter="sendMessageHandler" :disabled="textareaSettings.disabled" :placeholder="textareaSettings.placeholderMessage" @paste="pasteImage" class="js-autoresize"></textarea>
+      <textarea 
+        class="js-autoresize"
+        v-if="!audioFile"
+        v-model="message"
+        :id="`text-footer-${this.textId}`"
+        :disabled="textareaSettings.disabled"
+        :placeholder="textareaSettings.placeholderMessage"
+        @input="sendFinalMessage"
+        @keydown.up="toggleHSM"
+        @keydown.down="toggleHSM"
+        @keydown.esc="closeEmojis"
+        @keydown.enter="sendMessageHandler"
+        @paste="pasteImage"
+      ></textarea>
       <div class="text-footer-audio" v-else>
         <audio :src="audioSource" controls="controls"></audio>
         <span class="delete-audio" title="Cancelar" @click="deleteAudio">
           <fa-icon :icon="['fas', 'times']" />
         </span>
       </div>
-      <span class="max-characters no-width" :class="{'d-none' : audioFile}" v-if="textareaSettings.maxCharacters" v-text="`(${this.remainingCharacters})`"></span>
+      <RemainingCharacters 
+        :class="{'d-none' : audioFile}"
+        :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" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
-        <span v-if="buttons.hasAudio && !audioFile" class="text-footer-actions--btn" :class="{'audio-activated' : isRecording}" @click="toggleAudioRecorder">
-          <fa-icon :icon="['fas', 'microphone']" />
-        </span>
-        <span v-if="buttons.hasFiles  && !audioFile" class="text-footer-actions--btn" :class="{'files-activated' : openFiles}" :title="dictionary.title_selecionar_anexo" @click="toggleFiles">
-          <fa-icon :icon="['fas', 'paperclip']" />
-        </span>
+        <BtnMic 
+          v-show="buttons.hasAudio && !audioFile"
+          :dictionary="dictionary"
+          @set-audio="setAudio"
+          :ref="`${textId}-mic`" 
+        />
+        <BtnFiles 
+          v-show="buttons.hasFiles && !audioFile" 
+          :textId="textId"
+          :dictionary="dictionary"
+          :fileSettings="fileSettings"
+          :cssStyle="cssStyle"
+          :ref="`${textId}-file`"
+          @set-file-vars="setFileVars"
+        />
       </div>
     </div>
-    <transition name="show">
-      <div v-if="buttons.hasFiles && openFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
-        <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="selectImage">
-          <fa-icon :icon="['fas', 'image']" />
-        </div>
-        <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="selectDoc">
-          <fa-icon :icon="['fas', 'file-alt']" />
-        </div>
-        <div class="files-pointers d-none">
-          <input type="file" :id="`file-${textId}`" accept="image/*" @change="fileUpload($event, 'img')" />
-          <input type="file" :id="`doc-${textId}`" accept="application/*" @change="fileUpload($event, 'doc')" />
-        </div>
-      </div>
-    </transition>
-    <transition name="fade">
-      <div class="text-footer-preview-container" v-if="showFilePreview" :class="{'isDoc' : isDoc && !fileFormatError, 'isImg' : !isDoc && !fileFormatError, 'isError' : fileFormatError}">
-        <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file">
-          <fa-icon :icon="['fas', 'times-circle']" />
-        </span>
-        <h3 v-if="file.name" class="text-footer-preview-title">
-          <fa-icon :icon="['fas', 'file-alt']" v-if="isDoc" />
-          <fa-icon :icon="['fas', 'image']" v-else />
-          {{ file.name }}
-        </h3>
-        <div class="text-footer-invalid-format" v-if="fileFormatError">
-          <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-          <h4 v-text="validFileFormats"></h4>
-        </div>
-        <div class="text-footer-image-preview" v-if="imagePreview">
-          <img :src="imagePreview" :alt="dictionary.alt_previa_img" @click="openImage">
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
 import { setResizeListeners, resetTargets } from "@/services/autoResize"
 import { mixin as clickaway } from "vue-clickaway"
-import { returnMessageWithHexa, formataHoraMensagem } from "@/services/textFormatting"
+import { returnMessageWithHexa } from "@/services/textFormatting"
 
 import EmojisTextFooter from "./EmojisTextFooter"
-import ReqLoader from "../Loader/ReqLoader"
+import Loader from "../Loader/Loader"
+import RemainingCharacters from "./RemainingCharacters"
+import BtnMic from "./BtnMic"
+import BtnFiles from "./BtnFiles"
 
 export default {
-  components: { EmojisTextFooter, ReqLoader },
+  components: { EmojisTextFooter, Loader, BtnMic, BtnFiles, RemainingCharacters },
   mixins: [ clickaway ],
   props: {
     buttons: {
@@ -102,7 +105,7 @@ export default {
     },
     fileSettings: {
       type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "" } },
+      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
       required: false
     },
     textId: {
@@ -124,14 +127,6 @@ export default {
       required: true
     }
   },
-  computed: {
-    remainingCharacters() {
-      if(this.message && this.message.length) {
-        return this.textareaSettings.maxCharacters - this.message.length
-      }
-      return this.textareaSettings.maxCharacters
-    }
-  },
   data() {
     return {
       message: "",
@@ -141,11 +136,8 @@ export default {
       imagePreview: "",
       isDoc: false,
       fileFormatError: false,
-      validFileFormats: "",
       audioFile: "",
-      audioSource: "",
-      mediaRecorder: {},
-      isRecording: false
+      audioSource: ""
     }
   },
   created() {
@@ -154,17 +146,12 @@ export default {
   mounted() {
     setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize")
 
-    this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
-
-    this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
-
-    this.$root.$on("textarea-focus", () => { this.focusTextarea() })
-
-    this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
-
-    this.$root.$on("clear-footer-message", () => { this.message = "" })
-
-    if(this.cssStyle.outsideButtons) if(this.$root.$refs.chatCorpo) this.$root.$refs.chatCorpo.setOutsideButtons(this.cssStyle.outsideButtons)
+    // this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
+    // this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
+    // this.$root.$on("textarea-focus", () => { this.focusTextarea() })
+    // this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
+    // this.$root.$on("clear-footer-message", () => { this.message = "" })
+    // if(this.cssStyle.outsideButtons) if(this.$root.$refs.chatCorpo) this.$root.$refs.chatCorpo.setOutsideButtons(this.cssStyle.outsideButtons)
   },
   methods: {
     closeEmojis() {
@@ -176,7 +163,7 @@ export default {
       }
     },
     away() {
-      this.openFiles = false
+      if(this.$refs[`${this.textId}-file`]) this.$refs[`${this.textId}-file`].openFiles = false
     },
     setDefaultMessage(msg) {
       this.message = msg
@@ -205,7 +192,12 @@ export default {
       if(this.textareaSettings.disabled) return false
 
       if(this.fileFormatError) {
-        this.$toasted.global.formatoInvalido()
+        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
         return false
       }
 
@@ -266,7 +258,7 @@ export default {
     },
     resetFooterData() {
       if(this.audioFile) this.deleteAudio()
-      if(this.showFilePreview) this.deleteFile()
+      if(this.showFilePreview) this.$refs[`${this.textId}-file`].deleteFile()
       this.message = ""
       this.sendFinalMessage()
       resetTargets(this.$el, ".js-autoresize", ".js-parentresize", "38px")
@@ -277,147 +269,110 @@ export default {
         message,
         attachment: this.showFilePreview ? this.file  : false,
         isDoc: this.isDoc,
-        image: this.imagePreview,
+        imagePreview: this.imagePreview,
         isAudio: this.audioFile ? true : false,
         audioAttachment: this.audioSource
       }
     },
-    toggleFiles() {
-      this.openFiles = !this.openFiles
+    setFileVars(fileObj) {
+      const { file, showFilePreview, imagePreview, isDoc, fileFormatError } = fileObj;
+
+      this.file = file
+      this.showFilePreview = showFilePreview
+      this.imagePreview = imagePreview ? imagePreview : ""
+      this.isDoc = isDoc
+      this.fileFormatError = fileFormatError
     },
-    selectImage() {
-      const fileInput = document.querySelector(`#file-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    openImage(imagePreview) {
+      this.$emit("open-image", imagePreview)
     },
-    selectDoc() {
-      const fileInput = document.querySelector(`#doc-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    setAudio(audioObj) {
+      const { audioFile, audioSource } = audioObj
+      this.audioFile = audioFile
+      this.audioSource = audioSource
     },
-    isFileValid(type) {
-      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
-      const regex = new RegExp("("+extensions+")", "i")
-
-      if(regex.test(this.file.name)) return true
-
-      this.$toasted.global.formatoInvalido()
-      return false
+    deleteAudio() {
+      this.$refs[`${this.textId}-mic`].deleteMediaRecorder()
+      this.audioFile = ""
+      this.audioSource = ""
     },
-    fileUpload(event, type, externalCall) {
-      this.openFiles = false
-      if(this.showFilePreview) this.deleteFile()
+    returnFileType(file, stopAlert) {
+      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
+      if(imgRegex.test(file.name)) return "img"
 
-      const fileReader = new FileReader()
+      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
+      if(docRegex.test(file.name)) return "doc"
 
-      this.file = !externalCall ? event.target.files || event.dataTransfer.files : event
-
-      if(!this.file.length) {
-        this.file = []
-        return
-      }
-
-      this.file = this.file[0]
-      if(!externalCall) {
-        const selector = type === "img" ? `#file-${this.textId}` : `#doc-${this.textId}`
-        document.querySelector(selector).value = ""
+      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(", ")
       }
-
-      this.showFilePreview = true
-      if(type === "img") {
-        fileReader.onload = () => { this.imagePreview = fileReader.result }
-      }
-
-      if(this.isFileValid(type)) {
-        if(type === "img") fileReader.readAsDataURL(this.file)
-        if(type === "doc") this.isDoc = true
-
-        this.focusTextarea()
-        this.fileFormatError = false
-      }else {
-        this.fileFormatError = true
-        this.validFileFormats = `${type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions} ${this.dictionary.msg_extensoes_aceitas}`
-      }
-    },
-    deleteFile() {
-      this.file = []
-      this.isDoc = false
-      this.showFilePreview = false
-      this.imagePreview = ""
-      this.fileFormatError = false
-      this.validFileFormats = ""
-    },
-    openImage() {
-      this.$store.dispatch("toggleBlocker", { state: true, origin: "visualizar-imagem" })
-      this.$store.dispatch("setLinkImagem", this.imagePreview)
+      this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      return false
     },
-    initAudioRecorder() {
-      navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(stream => {
-          this.mediaRecorder = new MediaRecorder(stream)
-          const audioChunks = []
-          this.mediaRecorder.ondataavailable = eventData => { audioChunks.push(eventData.data) }
-          this.mediaRecorder.onstop = () => {
-            const blob = new Blob(audioChunks, { type: "audio/mpeg" })
-            blob.lastModifiedDate = new Date()
-            blob.name =  `im-audio-file-${parseInt(Math.random() * 5000)}`
-            const reader = new FileReader()
-            reader.readAsDataURL(blob)
-            reader.onloadend = () => {
-              this.audioFile = new File([blob], `${blob.name}.mpeg`, { type: blob.type })
-              this.audioSource = reader.result
-            }
-            stream.getTracks().forEach(track => track.stop())
+    filesHandler(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
           }
-
-          this.toggleAudioRecorder()
-        },
-        error => {
-          this.$toasted.global.defaultError({ msg: this.dictionary.msg_permitir_audio })
-          console.error("error audio recorder: ", error)
+          file.imgOrDoc = singleFileType ? singleFileType : ""
         })
-    },
-    toggleAudioRecorder() {
-      if(!this.mediaRecorder.state) return this.initAudioRecorder()
-
-      this.isRecording = !this.isRecording
+      }catch(e) {
+        console.error("Erro ao tentar percorrer os arquivos")
+        console.error(e)
+        invalidFile = true
+      }
 
-      if(this.isRecording) return this.mediaRecorder.start()
-      return this.mediaRecorder.stop()
+      if(!invalidFile) {
+        this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true)
+      }else {
+        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      }
     },
-    deleteAudio() {
-      this.mediaRecorder = {}
-      this.audioFile = ""
+    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)
+      }
     },
     pasteImage(e) {
-      if(e.clipboardData.files.length && !this.buttons.hasFiles) {
-        e.preventDefault()
-        return
-      }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
-        const file = e.clipboardData.files
-
-        let fileType = ""
-        const imgRegex = new RegExp("("+this.fileSettings.imagesExtensions+")", "i")
-        if(imgRegex.test(file[0].name)) fileType = "img"
-
-        const docRegex = new RegExp("("+this.fileSettings.docsExtensions+")", "i")
-        if(docRegex.test(file[0].name)) fileType = "doc"
-
-        if(fileType) {
-          this.fileUpload(file, fileType, true)
-        }else {
-          this.$toasted.global.formatoInvalido()
-          this.$toasted.global.formatosValidos()
+      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)
       }
     },
   },
   destroyed() {
-    this.$root.$off("drop-file")
-    this.$root.$off("toggle-msg-formatada")
-    this.$root.$off("textarea-focus")
-    this.$root.$off("clear-footer-message")
-    this.$root.$off("resize-footer-template")
+    // this.$root.$off("drop-file")
+    // this.$root.$off("toggle-msg-formatada")
+    // this.$root.$off("textarea-focus")
+    // this.$root.$off("clear-footer-message")
+    // this.$root.$off("resize-footer-template")
   }
 }
 </script>
@@ -440,14 +395,15 @@ ul {
   width: 100%;
   position: relative; }
   .text-footer-container .text-footer {
-    min-height: 54px;
+    min-height: 48px;
+    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.25);
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #ccc;
     padding: 5px 2px 5px 5px;
-    border-radius: 15px; }
+    border-radius: 5px; }
     .text-footer-container .text-footer.full {
       width: 100%; }
     .text-footer-container .text-footer.almostFull {
@@ -496,7 +452,7 @@ ul {
     z-index: 1;
     color: #444;
     position: relative;
-    top: 28px;
+    top: 30px;
     left: 5px; }
     .text-footer-container .max-characters.no-width {
       width: 0; }
@@ -622,29 +578,39 @@ ul {
       .text-footer-container .text-footer-files-container .files-btn.docs {
         background-color: #7986cb; }
   .text-footer-container .text-footer-preview-container {
+    cursor: default;
     position: absolute;
-    background-color: #AAA;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px; }
+    left: 0;
+    background-color: rgb(225, 225, 225);
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px; }
     .text-footer-container .text-footer-preview-container.isDoc {
       top: -50px;
       width: 100%;
       height: 45px; }
-    .text-footer-container .text-footer-preview-container.isImg {
+    .text-footer-container .text-footer-preview-container.isImg, .text-footer-container .text-footer-preview-container.isMultiple {
       top: -205px;
       width: 100%;
       height: 200px; }
       .text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
         height: 170px; }
     .text-footer-container .text-footer-preview-container.isError {
-      top: -155px;
+      top: -80px;
       width: 100%;
-      height: 150px; }
+      height: 75px; }
     .text-footer-container .text-footer-preview-container .text-footer-exclude-file {
       position: absolute;
       top: 5px;
       right: 5px;
-      cursor: pointer; }
+      cursor: pointer; 
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 1rem;
+      min-height: 1rem;
+      background-color: #FFF;
+      border-radius: 50%;
+      }
       .text-footer-container .text-footer-preview-container .text-footer-exclude-file svg {
         transition: color 200ms;
         color: #e9594a; }
@@ -667,6 +633,7 @@ ul {
         max-height: 98%;
         padding: 2%; }
     .text-footer-container .text-footer-preview-container .text-footer-invalid-format {
+      color: #222;
       padding: 10px; }
       .text-footer-container .text-footer-preview-container .text-footer-invalid-format h3 {
         font-weight: 500; }

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

@@ -66,13 +66,6 @@ export default {
           elem.classList.toggle("active");
         }
       }
-    },
-    isValid(textValue) {
-      const regex =
-        /^[ ?????�����??��?���?��??????�������?���?��???��??\w?-�\r\n()[\]{}.,:;@??�????!&?�`�=%^*+\-$|/]+$/;
-      const value = textValue ? textValue.trim("") : "";
-
-      return regex.test(value);
     }
   }
 };

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

@@ -223,10 +223,21 @@ export default {
       }
     },
     isValid(textValue) {
-      const regex =
-        /^[ ?????�����??��?���?��??????�������?���?��???��??\w?-�\r\n()[\]{}.,:;@??�????!&?�`�=%^*+\-$|/]+$/;
-      const value = textValue ? textValue.trim("") : ""
-      return regex.test(value);
+      const regex = {
+        htmlTags: /<\/?[\d\w\s=\-:\.\/\'\";]+>/gi,
+        enter: /\n/g,
+        consecutiveSpaces: /\s{3,}/g
+      }
+      const value = textValue ? textValue.trim("") : "";
+      if(!value.length) return false
+      
+      let isValueValid = true
+      for(let key in regex) {
+        if(!isValueValid) return isValueValid
+        if(regex[key].test(value)) isValueValid = false 
+      }
+
+      return isValueValid
     },
     setVar(event, key, notificar) {
       if (event && event.target) {