vue-intergrall-plugins 0.0.5 → 0.0.9

package/package.json

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

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

@@ -0,0 +1,257 @@
+<template>
+  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.length}" @click="fileSettings.multiple ? openSelectFileHandler('both') : toggleFiles">
+    <transition name="fade">
+      <span v-if="file.length" class="files-counter" v-text="file.length" @click.stop="toggleFilePreview" :title="dictionary.msg_abrir_anexos"></span>
+    </transition>
+    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
+    <transition name="show">
+      <div v-if="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="openSelectFileHandler('img')">
+          <fa-icon :icon="['fas', 'image']" />
+        </div>
+        <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="openSelectFileHandler('doc')">
+          <fa-icon :icon="['fas', 'file-alt']" />
+        </div>
+      </div>
+    </transition>
+    <div class="files-pointers d-none">
+      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" accept="image/*,application/*" multiple @change="fileUpload($event, 'both')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" accept="image/*" @change="fileUpload($event, 'img')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" accept="application/*" @change="fileUpload($event, 'doc')" />
+    </div>
+    <transition name="fade">
+      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]">
+        <SingleFilePreview 
+          v-if="!fileSettings.multiple"
+          :dictionary="dictionary"
+          :file="file"
+          :isDoc="isDoc"
+          :fileFormatError="fileFormatError"
+          :validFileFormats="validFileFormats"
+          :imagePreview="imagePreview"
+          @delete-file="deleteFile"
+          @open-image="openImage"
+        />
+        <MultipleFilePreview 
+          v-else
+          :dictionary="dictionary"
+          :file="file"
+          :fileFormatError="fileFormatError"
+          :validFileFormats="validFileFormats"
+          @delete-file="deleteFile"
+          @delete-specific-file="deleteSpecificFile"
+          @open-image="openImage"
+        />
+      </div>
+    </transition>
+  </span>
+</template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.files-counter {
+  position: absolute;
+  top: 0px;
+  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;
+  cursor: pointer;
+  opacity: .9;
+  transition: all 300ms;
+  color: #FFF;
+  font-weight: 900;
+}
+.files-counter:hover {
+  opacity: 1
+}
+</style>
+
+<script>
+import SingleFilePreview from "./SingleFilePreview"
+import MultipleFilePreview from "./MultipleFilePreview"
+
+export default {
+  components: { SingleFilePreview, MultipleFilePreview },
+  props: {
+    textId: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    fileSettings: {
+      type: Object,
+      required: false
+    },
+    cssStyle: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      file: [],
+      openFiles: false,
+      showFilePreview: false,
+      imagePreview: "",
+      isDoc: false,
+      fileFormatError: false,
+      validFileFormats: ""
+    }
+  },
+  computed: {
+    previewContainerClass() {
+      if(this.fileFormatError) return "isError"
+      if(this.fileSettings.multiple) return "isMultiple"
+      if(this.isDoc) return "isDoc"
+      return "isMsg"
+    }
+  },
+  methods: {
+    toggleFiles() {
+      this.openFiles = !this.openFiles
+    },
+    openSelectFileHandler(type) {
+      const fileInput = document.querySelector(`#${type}-${this.textId}`)
+      if(fileInput) fileInput.click()
+      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    },
+    isFileValid(type, fileName) {
+      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
+      const regex = new RegExp("("+extensions+")", "i")
+
+      if(regex.test(fileName)) return true
+      this.showToastedValidFormats()
+      return false
+    },
+    showToastedValidFormats() {
+      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}` })
+    },
+    fileUpload(event, type, externalCall) {
+      try {
+        this.openFiles = false
+        let filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
+        this.file = filesAux.length ? filesAux : this.file 
+
+        if(!this.file.length) return
+        if(!this.fileSettings.multiple) {
+          this.file = this.file[0]
+          this.singleFileUpload(type, this.file.name)
+        }else {
+          this.multipleFileUpload()
+        }
+      }catch(e) {
+        console.error("Error file upload")
+        console.error(e)
+      }
+    },
+    returnFileType(file) {
+      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"
+
+      return ""
+    },
+    multipleFileUpload() {
+      let waitForImageLoad = false
+      this.file = Array.from(this.file)
+      this.file.forEach(file => {
+        const fileReader = new FileReader();
+
+        const singleFileType = this.returnFileType(file)
+        if(!singleFileType) file.invalid = true
+        file.imgOrDoc = singleFileType ? singleFileType : ""
+
+        if(file.imgOrDoc === "doc") this.isDoc = true
+        if(file.imgOrDoc === "img") {
+          waitForImageLoad = true
+          fileReader.onload = () => file.src = fileReader.result
+          fileReader.onloadend = () => this.emitFileVars(true)
+        }
+
+        if(this.isFileValid(file.imgOrDoc, file.name)) {
+          if(file.imgOrDoc === "img") fileReader.readAsDataURL(file)
+        }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}`
+        }
+      })
+
+      if(this.isDoc && !waitForImageLoad) this.emitFileVars()
+    },
+    singleFileUpload(type, fileName) {
+      const fileReader = new FileReader()
+      if(type === "img") {
+        fileReader.onload = () => this.imagePreview = fileReader.result 
+        fileReader.onloadend = () => this.emitFileVars()
+      }
+
+      if(this.isFileValid(type, fileName)) {
+        if(type === "img") fileReader.readAsDataURL(this.file)
+        if(type === "doc") this.isDoc = true
+        
+        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}`
+      }
+
+      if(this.isDoc) this.emitFileVars()
+    },
+    toggleFilePreview() {
+      this.showFilePreview = !this.showFilePreview
+    },
+    emitFileVars() {
+      const vars = { file: this.file, isDoc: this.isDoc, showFilePreview: this.showFilePreview, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError }
+
+      this.$emit("set-file-vars", vars)
+      this.$parent.focusTextarea()
+    },
+    deleteSpecificFile(obj) {
+      const { fileName } = obj
+      this.file = this.file.filter(file => {
+        return file.name != fileName
+      })
+      this.file.length ? this.emitFileVars(true) : this.deleteFile()
+    },
+    deleteFile() {
+      this.$emit("set-file-vars", { file: [], isDoc: false, showFilePreview: false, imagePreview: "", fileFormatError: false })
+
+      this.file = []
+      this.isDoc = false
+      this.showFilePreview = false
+      this.imagePreview = ""
+      this.fileFormatError = false
+      this.validFileFormats = ""
+    },
+    openImage(imagePreview) {
+      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <span class="text-footer-actions--btn" :class="{'audio-activated' : isRecording}" @click="toggleAudioRecorder">
+    <fa-icon :icon="['fas', 'microphone']" />
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isRecording: false,
+      mediaRecorder: {}
+    }
+  },
+  methods: {
+    toggleAudioRecorder() {
+      if(!this.mediaRecorder.state) return this.initAudioRecorder()
+
+      this.isRecording = !this.isRecording
+
+      if(this.isRecording) return this.mediaRecorder.start()
+      return this.mediaRecorder.stop()
+    },
+    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() * 50000)}`
+            const reader = new FileReader()
+            reader.readAsDataURL(blob)
+            reader.onloadend = () => {
+              this.$emit("set-audio", { audioFile: new File([blob], `${blob.name}.mpeg`, { type: blob.type }), audioSource: reader.result })
+            }
+            stream.getTracks().forEach(track => track.stop())
+          }
+
+          this.toggleAudioRecorder()
+        },
+        error => {
+          this.$toasted.global.defaultError({ msg: this.dictionary.msg_permitir_audio })
+          console.error("error audio recorder: ", error)
+        })
+    },
+    deleteMediaRecorder() {
+      this.mediaRecorder = {}
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="multiple-file-preview">
+    <transition-group name="fade">
+      <Loader v-if="loading" key="mfp-loader" />
+      <template v-else-if="fileFormatError">
+        <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file" key="mfp-exlude-file">
+          <fa-icon :icon="['fas', 'times-circle']" />
+        </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>
+        </div>
+      </template>
+      <template v-else>
+        <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
+          <p class="file-title">
+            <fa-icon :icon="icon(singleFile.imgOrDoc)" />
+            {{ singleFile.name }}
+          </p>
+          <p v-if="singleFile.invalid" class="file-title red">
+            {{ dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : "Arquivo invalido" }}
+          </p>
+          <div class="small-img">
+            <span class="img-container" v-if="singleFile.imgOrDoc === 'img'">
+              <img
+                :src="singleFile.src"
+                :alt="dictionary.alt_previa_img"
+                @click="openImage(singleFile.src)"
+              />
+            </span>
+            <span class="pdf" v-else-if="isPdf(singleFile.type)">
+              <fa-icon :icon="['fas', 'file-pdf']" />
+            </span>
+          </div>
+          <span @click="deleteSpecificFile(singleFile.name, index)" :title="dictionary.msg_excluir_anexo" class="delete-file">
+            <fa-icon :icon="['fas', 'times-circle']" />
+          </span>
+        </div>
+      </template>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import Loader from "../Loader/Loader"
+
+export default {
+  components: { Loader },
+  data() {
+    return {
+      loading: true,
+      loadingTimeout: 0,
+      ignoreNextUpdate: false
+    }
+  },
+  mounted() {
+    setTimeout(() => { this.loading = false;}, 500);
+  },
+  watch: {
+    file() {
+      if(!this.ignoreNextUpdate) {
+        if(this.loadingTimeout) clearTimeout(this.loadingTimeout);
+        this.loading = true;
+        this.loadingTimeout = setTimeout(() => { this.loading = false; }, 500);
+        this.ignoreNextUpdate = true
+      }
+      this.ignoreNextUpdate = false;
+    }
+  },
+  props: {
+    dictionary: { type: Object, required: true },
+    file: { type: Array, required: true },
+    fileFormatError: { type: Boolean, required: false },
+    validFileFormats: { type: String, required: false, default: "" }
+  },
+  methods: {
+    deleteFile() {
+      this.$emit("delete-file");
+    },
+    deleteSpecificFile(fileName, index) {
+      this.ignoreNextUpdate = true;
+      this.$emit("delete-specific-file", { fileName, index });
+    },
+    openImage(image) {
+      this.$emit("open-image", image);
+    },
+    icon(imgOrDoc) {
+      if(!imgOrDoc) return ['fas', 'times-circle'];
+      return imgOrDoc == 'doc' ? ['fas', 'file-alt'] : ['fas', 'image'];
+    },
+    isPdf(type) {
+      return type === "application/pdf" ? true : false
+    }
+  }
+}
+</script>
+
+<style>
+  .multiple-file-preview {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px;
+    transition: background-color 150ms;
+  }
+
+  .file-preview {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 5px 10px;
+    transition: background-color 150ms;
+  }
+  .file-preview:hover {
+    background-color: rgba(0, 0, 0, .1)
+  }
+
+  .file-title {
+    color: #222;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 4px 10px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 30px;
+  }
+  .file-title.red {
+    color: #E74C3C;
+    margin-left:5px;
+  }
+  .file-title > svg {
+    margin-right: 5px
+  }
+
+  .small-img {
+    flex: 1;
+    margin: 0 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .small-img img {
+    height: 40px;
+    cursor: pointer;
+  }
+  .small-img .pdf {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    color: #E74C3C;
+  }
+  .small-img .pdf svg{ 
+    z-index: 1;
+  }
+  .small-img .pdf::after {
+    content: "";
+    position: absolute;
+    bottom: 2px;
+    transform: translateY(2px);
+    width: 20px;
+    height: 20px;
+    background-color: #FFF;
+  }
+  .img-container {
+    padding: 5px;
+    border-radius: 2.5px;
+    background-color: rgba(0, 0, 0, .15);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .delete-file {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color: #FFF;
+    min-width: 1rem;
+    min-height: 1rem;
+    cursor: pointer;
+  }
+  .delete-file > svg {
+    font-size: 1rem;
+    color: #E74C3C;
+  }
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <span
+    class="max-characters no-width"
+    v-if="maxCharacters"
+    v-text="`(${this.remainingCharacters})`"
+  ></span>
+</template>
+
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    maxCharacters: {
+      type: Number,
+      required: false
+    },
+  },
+  computed: {
+    remainingCharacters() {
+      if(this.message.length) return this.maxCharacters - this.message.length
+      return this.maxCharacters
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="single-file-preview">
+    <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file">
+      <fa-icon :icon="['fas', 'times-circle']" />
+    </span>
+    <div class="text-footer-invalid-format" v-if="fileFormatError">
+      <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
+      <h4 v-text="validFileFormats"></h4>
+    </div>
+    <template v-else>
+      <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-image-preview" v-if="imagePreview">
+        <img :src="imagePreview" :alt="dictionary.alt_previa_img" @click="openImage">
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dictionary: { type: Object, required: true },
+    file: { type: File, required: true },
+    isDoc: { type: Boolean, required: false },
+    fileFormatError: { type: Boolean, required: false },
+    validFileFormats: { type: String, required: false, default: "" },
+    imagePreview: { type: String, required: false }
+  },
+  methods: {
+    deleteFile() {
+      this.$emit("delete-file")
+    },
+    openImage() { 
+      this.$emit("open-image")
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>