vue-intergrall-plugins 0.0.503 → 0.0.504

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

@@ -1,5 +1,10 @@
 <template>
-  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.name}" @click="openFilesByClip()"> <!-- || file.length -->
+  <span
+    class="text-footer-actions--btn"
+    :class="{ 'files-activated': openFiles || file.name }"
+    @click="openFilesByClip()"
+  >
+    <!-- || file.length -->
     <!-- <transition name="fade">
       <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="`Visualizar ${fileSize} arquivo(s)`" class="files-counter">
         {{ fileSize }}
@@ -7,7 +12,19 @@
     </transition> -->
     <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
     <transition name="fade">
-      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="!fileSettings.handleFilePreview ? dictionary.msg_abrir_anexos : `${file.length} anexo(s) selecionado(s)`" :class="`${fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'}`">
+      <span
+        v-if="fileSize > 0"
+        @click.stop="toggleFilePreview"
+        v-tippy
+        :content="
+          !fileSettings.handleFilePreview
+            ? dictionary.msg_abrir_anexos
+            : `${file.length} anexo(s) selecionado(s)`
+        "
+        :class="`${
+          fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'
+        }`"
+      >
         <template v-if="fileSettings.filePreviewStyle == 1">
           {{ fileSize }}
         </template>
@@ -17,32 +34,80 @@
       </span>
     </transition>
     <transition name="show">
-      <div v-if="openFiles && hasButtonFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
+      <div
+        v-if="openFiles && hasButtonFiles"
+        class="text-footer-files-container"
+        :class="{ horizontal: cssStyle.outsideButtons }"
+      >
         <template v-if="!fileSettings.multiple">
-          <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
+          <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')">
+          <div
+            class="files-btn docs"
+            :title="dictionary.title_anexo_doc"
+            @click="openSelectFileHandler('doc')"
+          >
             <fa-icon :icon="['fas', 'file-alt']" />
           </div>
         </template>
-        <div v-else class="files-btn both" :title="dictionary.title_anexo_arq" @click="openSelectFileHandler('both')">
+        <div
+          v-else
+          class="files-btn both"
+          :title="dictionary.title_anexo_arq"
+          @click="openSelectFileHandler('both')"
+        >
           <fa-icon :icon="['fas', 'image']" />
           <fa-icon :icon="['fas', 'file-alt']" />
         </div>
-        <div v-if="fileSettings.systemButton" class="files-btn system" :title="dictionary.title_anexo_sistema" @click="openSelectFileHandler('system')">
+        <div
+          v-if="fileSettings.systemButton"
+          class="files-btn system"
+          :title="dictionary.title_anexo_sistema"
+          @click="openSelectFileHandler('system')"
+        >
           <fa-icon :icon="['fas', 'server']" />
         </div>
       </div>
     </transition>
     <div class="files-pointers d-none">
-      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" :accept="acceptedExtensions" multiple @change="fileUpload($event, 'both')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'img')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'doc')" />
+      <input
+        v-if="fileSettings.multiple"
+        type="file"
+        :id="`both-${textId}`"
+        :accept="acceptedExtensions"
+        multiple
+        @change="fileUpload($event, 'both')"
+      />
+      <input
+        v-if="!fileSettings.multiple"
+        type="file"
+        :id="`img-${textId}`"
+        :accept="acceptedExtensions"
+        @change="fileUpload($event, 'img')"
+      />
+      <input
+        v-if="!fileSettings.multiple"
+        type="file"
+        :id="`doc-${textId}`"
+        :accept="acceptedExtensions"
+        @change="fileUpload($event, 'doc')"
+      />
     </div>
     <transition name="fade">
-      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]" v-on-clickaway="away">
-        <SingleFilePreview 
+      <div
+        class="text-footer-preview-container"
+        @click.stop
+        v-show="showFilePreview"
+        :class="[previewContainerClass]"
+        v-on-clickaway="away"
+      >
+        <SingleFilePreview
           v-if="!fileSettings.multiple && showFilePreview"
           :dictionary="dictionary"
           :file="file"
@@ -55,7 +120,7 @@
           @open-image="openImage"
           @close="away"
         />
-        <MultipleFilePreview 
+        <MultipleFilePreview
           v-else-if="fileSettings.multiple && showFilePreview"
           :dictionary="dictionary"
           :file="file"
@@ -87,7 +152,7 @@
   transform: translate(17.5px, -15px);
   background-color: #888;
   z-index: 1;
-  font-size: .5rem;
+  font-size: 8px;
   width: 15px;
   height: 15px;
   border-radius: 50%;
@@ -95,23 +160,23 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  opacity: .9;
+  opacity: 0.9;
   transition: all 300ms;
-  color: #FFF;
+  color: #fff;
   font-weight: 900;
 }
 .files-counter:hover {
-  opacity: 1
+  opacity: 1;
 }
 .files-counter-2 {
   transform: translate(-15px, 28px);
-  opacity: .9;
+  opacity: 0.9;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #888;
-  font-size: .8rem
+  font-size: 12.8px;
 }
 .files-counter-2 svg {
   margin-left: 5px;
@@ -123,38 +188,38 @@
 </style>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway'
-import SingleFilePreview from "./SingleFilePreview"
-import MultipleFilePreview from "./MultipleFilePreview"
+import { mixin as clickaway } from "vue-clickaway";
+import SingleFilePreview from "./SingleFilePreview";
+import MultipleFilePreview from "./MultipleFilePreview";
 
 export default {
   components: { SingleFilePreview, MultipleFilePreview },
-  mixins: [ clickaway ],
+  mixins: [clickaway],
   props: {
     textId: {
       type: String,
-      required: true
+      required: true,
     },
     dictionary: {
       type: Object,
-      required: true
+      required: true,
     },
     fileSettings: {
       type: Object,
-      required: false
+      required: false,
     },
     cssStyle: {
       type: Object,
-      required: false
+      required: false,
     },
     hasButtonFiles: {
       type: Boolean,
-      required: false
+      required: false,
     },
     externalFiles: {
       type: Array,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
@@ -168,248 +233,309 @@ export default {
       validFileFormats: "",
       hasAnyFile: false,
       externalFilesAux: [],
-    }
+    };
   },
   computed: {
     previewContainerClass() {
-      if(this.fileFormatError) return "isError"
-      if(this.fileSettings.multiple) return "isMultiple"
-      if(this.isDoc) return "isDoc"
-      return "isMsg"
+      if (this.fileFormatError) return "isError";
+      if (this.fileSettings.multiple) return "isMultiple";
+      if (this.isDoc) return "isDoc";
+      return "isMsg";
     },
     acceptedExtensions() {
-      let str = ""
-      if(this.fileSettings.docsExtensions && this.fileSettings.imagesExtensions) {
-        str = `${this.fileSettings.docsExtensions.split("|").join(',')}${this.fileSettings.imagesExtensions.split("|").join(',')}`
-      }else if(this.fileSettings.docsExtensions) {
-        str = this.fileSettings.docsExtensions.split("|").join(',')
-      }else if(this.fileSettings.imagesExtensions) {
-        str = this.fileSettings.imagesExtensions.split("|").join(',')
+      let str = "";
+      if (this.fileSettings.docsExtensions && this.fileSettings.imagesExtensions) {
+        str = `${this.fileSettings.docsExtensions
+          .split("|")
+          .join(",")}${this.fileSettings.imagesExtensions.split("|").join(",")}`;
+      } else if (this.fileSettings.docsExtensions) {
+        str = this.fileSettings.docsExtensions.split("|").join(",");
+      } else if (this.fileSettings.imagesExtensions) {
+        str = this.fileSettings.imagesExtensions.split("|").join(",");
       }
-      if(str) {
-        const arr = str.split(",").map(ext => {
-          ext = ext && ext.startsWith(".") ? ext : `.${ext}`
-          return ext
-        })
-        str = arr.join(",")
+      if (str) {
+        const arr = str.split(",").map((ext) => {
+          ext = ext && ext.startsWith(".") ? ext : `.${ext}`;
+          return ext;
+        });
+        str = arr.join(",");
       }
-      if(this.fileSettings.multiple) return str ? str : "image/*,application/*"
-      if(this.isDoc) return str ? str : "application/*"
-      return str ? str : "image/*"
+      if (this.fileSettings.multiple) return str ? str : "image/*,application/*";
+      if (this.isDoc) return str ? str : "application/*";
+      return str ? str : "image/*";
     },
   },
   watch: {
     externalFiles() {
-      if(!this.externalFiles.length) return
-      if(this.externalFiles.length > this.fileSettings.max) {
-        this.$emit("reset-file-system")
-        return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+      if (!this.externalFiles.length) return;
+      if (this.externalFiles.length > this.fileSettings.max) {
+        this.$emit("reset-file-system");
+        return this.$toasted.global.defaultInfo({
+          msg: `Limite de ${this.fileSettings.max} arquivos`,
+        });
       }
-      this.file = []
-      this.externalFilesAux = Array.from(this.externalFiles)
-      this.externalFilesAux.forEach(files => {
-        this.file.push(files)
-      })
-      this.fileSize = this.file.length
-      this.multipleFileUpload()
-    }
+      this.file = [];
+      this.externalFilesAux = Array.from(this.externalFiles);
+      this.externalFilesAux.forEach((files) => {
+        this.file.push(files);
+      });
+      this.fileSize = this.file.length;
+      this.multipleFileUpload();
+    },
   },
   methods: {
-    openFilesByClip(){
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(this.fileSettings.multiple && !this.hasButtonFiles){
-        return this.openSelectFileHandler('both')
+    openFilesByClip() {
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (this.fileSettings.multiple && !this.hasButtonFiles) {
+        return this.openSelectFileHandler("both");
       }
-      return this.toggleFiles()
+      return this.toggleFiles();
     },
     away() {
-      this.showFilePreview = false
+      this.showFilePreview = false;
     },
     toggleFiles() {
-      this.openFiles = !this.openFiles
+      this.openFiles = !this.openFiles;
     },
     openSelectFileHandler(type) {
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(type == "system") return this.$emit("open-file-system")
-      if(this.fileSettings.multiple){ type = 'both' }
-      const fileInput = document.querySelector(`#${type}-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (type == "system") return this.$emit("open-file-system");
+      if (this.fileSettings.multiple) {
+        type = "both";
+      }
+      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, 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
-        return false
+      if (
+        (type == "img" && !this.fileSettings.imagesExtensions) ||
+        (type == "doc" && !this.fileSettings.docsExtensions)
+      ) {
+        this.$toasted.global.defaultInfo({
+          msg: this.dictionary.sem_extensoes_parametrizadas,
+        });
+        this.hasAnyFile = false;
+        return false;
       }
-      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
-      const regex = new RegExp("("+extensions+")", "i")
-      if(regex.test(fileName) || regex.test(fileType)) return true
-      this.hasAnyFile = false
-      this.showToastedValidFormats()
-      return false
+      const extensions =
+        type === "img"
+          ? this.fileSettings.imagesExtensions
+          : this.fileSettings.docsExtensions;
+      const regex = new RegExp("(" + extensions + ")", "i");
+      if (regex.test(fileName) || regex.test(fileType)) return true;
+      this.hasAnyFile = false;
+      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}` })
+      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.fileSize = 0
-        if(this.fileFormatError) this.file = []
-        this.openFiles = false
-        const filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
-        const isStackable = this.fileSettings.stackFiles && this.fileSettings.multiple
-        this.file =  filesAux.length ? isStackable ? this.file.concat(...filesAux) : filesAux : this.file
-        if(!this.file.length) return
+        this.fileSize = 0;
+        if (this.fileFormatError) this.file = [];
+        this.openFiles = false;
+        const filesAux = !externalCall
+          ? event.target.files
+            ? event.target.files
+            : event.dataTransfer.files
+          : event;
+        const isStackable = this.fileSettings.stackFiles && this.fileSettings.multiple;
+        this.file = filesAux.length
+          ? isStackable
+            ? this.file.concat(...filesAux)
+            : filesAux
+          : this.file;
+        if (!this.file.length) return;
 
-        let sizeInBytes = 0
-        Array.from(this.file).forEach(file => sizeInBytes += file.size)
-        const sizeInMb = parseFloat((sizeInBytes / (1024*1024)).toFixed(2))
-        if(sizeInMb == 0) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido }) 
+        let sizeInBytes = 0;
+        Array.from(this.file).forEach((file) => (sizeInBytes += file.size));
+        const sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2));
+        if (sizeInMb == 0) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({
+            msg: this.dictionary.msg_arquivo_invalido,
+          });
         }
-        if(sizeInMb >= 15) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: `Limite de 15 MB por arquivo` })
+        if (sizeInMb >= 15) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({ msg: `Limite de 15 MB por arquivo` });
         }
 
-        if(this.file.length > this.fileSettings.max) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+        if (this.file.length > this.fileSettings.max) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({
+            msg: `Limite de ${this.fileSettings.max} arquivos`,
+          });
         }
-        this.hasAnyFile = true
-        this.fileSize = this.file.length
-        if(!this.fileSettings.multiple) {
-          this.file = this.file[0]
-          this.singleFileUpload(type, this.file.name, this.file.type)
-        }else {
-          this.multipleFileUpload()
+        this.hasAnyFile = true;
+        this.fileSize = this.file.length;
+        if (!this.fileSettings.multiple) {
+          this.file = this.file[0];
+          this.singleFileUpload(type, this.file.name, this.file.type);
+        } else {
+          this.multipleFileUpload();
         }
-      }catch(e) {
-        console.error("Error file upload")
-        console.error(e)
+      } catch (e) {
+        console.error("Error file upload");
+        console.error(e);
       }
     },
     returnFileType(file) {
-      if(!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions) return ""
+      if (!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions)
+        return "";
 
-      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";
 
-      return ""
+      return "";
     },
     multipleFileUpload() {
-      const hasImgExt = this.fileSettings.imagesExtensions ? true : false
-      const hasDocExt = this.fileSettings.docsExtensions ? true : false
-      if(!hasImgExt && !hasDocExt) {
-        this.file = []
-        this.fileSize = 0
-        return this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
+      const hasImgExt = this.fileSettings.imagesExtensions ? true : false;
+      const hasDocExt = this.fileSettings.docsExtensions ? true : false;
+      if (!hasImgExt && !hasDocExt) {
+        this.file = [];
+        this.fileSize = 0;
+        return this.$toasted.global.defaultInfo({
+          msg: this.dictionary.sem_extensoes_parametrizadas,
+        });
       }
-      let waitForImageLoad = false
-      let hasAnyInvalidFile = false
-      this.file = Array.from(this.file)
-      this.file.forEach(file => {
-        const singleFileType = this.returnFileType(file)
-        if(!singleFileType) file.invalid = true
-        file.imgOrDoc = singleFileType ? singleFileType : ""
-        if(this.isFileValid(file.imgOrDoc, file.name, file.type)) {
-          if(file.imgOrDoc == "img") {
+      let waitForImageLoad = false;
+      let hasAnyInvalidFile = false;
+      this.file = Array.from(this.file);
+      this.file.forEach((file) => {
+        const singleFileType = this.returnFileType(file);
+        if (!singleFileType) file.invalid = true;
+        file.imgOrDoc = singleFileType ? singleFileType : "";
+        if (this.isFileValid(file.imgOrDoc, file.name, file.type)) {
+          if (file.imgOrDoc == "img") {
             const fileReader = new FileReader();
-            waitForImageLoad = true
-            fileReader.onload = () => file.src = fileReader.result
-            fileReader.onloadend = () => this.emitFileVars(true)
-            fileReader.readAsDataURL(file)
+            waitForImageLoad = true;
+            fileReader.onload = () => (file.src = fileReader.result);
+            fileReader.onloadend = () => this.emitFileVars(true);
+            fileReader.readAsDataURL(file);
           }
-          if(file.imgOrDoc === "doc") this.isDoc = true
-          file.invalid = false
-          this.fileFormatError = !hasAnyInvalidFile ? false : true
-        }else{
-          hasAnyInvalidFile = true
-          file.invalid = true
-          this.fileFormatError = true
-          if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")}`
-          if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
-          if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")} - Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
+          if (file.imgOrDoc === "doc") this.isDoc = true;
+          file.invalid = false;
+          this.fileFormatError = !hasAnyInvalidFile ? false : true;
+        } else {
+          hasAnyInvalidFile = true;
+          file.invalid = true;
+          this.fileFormatError = true;
+          if (hasImgExt && !hasDocExt)
+            this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions
+              .split("|")
+              .join(", ")}`;
+          if (hasDocExt && hasImgExt)
+            this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions
+              .split("|")
+              .join(", ")}`;
+          if (hasImgExt && hasDocExt)
+            this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions
+              .split("|")
+              .join(", ")} - Documentos: ${this.fileSettings.docsExtensions
+              .split("|")
+              .join(", ")}`;
         }
-      })
+      });
 
-      if(this.fileFormatError) {
-        this.file = []
-        this.fileSize = 0
+      if (this.fileFormatError) {
+        this.file = [];
+        this.fileSize = 0;
       }
 
-      if(this.isDoc && !waitForImageLoad) this.emitFileVars()
+      if (this.isDoc && !waitForImageLoad) this.emitFileVars();
     },
     singleFileUpload(type, fileName, fileType) {
-      if(this.isFileValid(type, fileName, fileType)) {
-        const fileReader = new FileReader()
-        if(type === "img") {
-          fileReader.onload = () => this.imagePreview = fileReader.result 
-          fileReader.onloadend = () => this.emitFileVars()
-          fileReader.readAsDataURL(this.file)
+      if (this.isFileValid(type, fileName, fileType)) {
+        const fileReader = new FileReader();
+        if (type === "img") {
+          fileReader.onload = () => (this.imagePreview = fileReader.result);
+          fileReader.onloadend = () => this.emitFileVars();
+          fileReader.readAsDataURL(this.file);
         }
-        if(type === "doc") this.isDoc = true
-        
-        this.fileFormatError = false
-      }else {
-        this.fileFormatError = true
-        const hasImgExt = this.fileSettings.imagesExtensions ? true : false
-        const hasDocExt = this.fileSettings.docsExtensions ? true : false
-        if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`
-        if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`
-        if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`
+        if (type === "doc") this.isDoc = true;
+
+        this.fileFormatError = false;
+      } else {
+        this.fileFormatError = true;
+        const hasImgExt = this.fileSettings.imagesExtensions ? true : false;
+        const hasDocExt = this.fileSettings.docsExtensions ? true : false;
+        if (hasImgExt && !hasDocExt)
+          this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`;
+        if (hasDocExt && hasImgExt)
+          this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`;
+        if (hasImgExt && hasDocExt)
+          this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`;
       }
 
-      if(this.isDoc) this.emitFileVars()
+      if (this.isDoc) this.emitFileVars();
     },
     toggleFilePreview() {
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(this.fileSettings.handleFilePreview) {
-        this.emitFileVars()
-        return this.$emit("handle-file-preview")
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (this.fileSettings.handleFilePreview) {
+        this.emitFileVars();
+        return this.$emit("handle-file-preview");
       }
-      this.showFilePreview = !this.showFilePreview
-      if(this.showFilePreview && this.openFiles) this.toggleFiles()
+      this.showFilePreview = !this.showFilePreview;
+      if (this.showFilePreview && this.openFiles) this.toggleFiles();
     },
     emitFileVars() {
-      const vars = { file: this.file, isDoc: this.isDoc, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError, hasAnyFile: this.hasAnyFile }
+      const vars = {
+        file: this.file,
+        isDoc: this.isDoc,
+        imagePreview: this.imagePreview,
+        fileFormatError: this.fileFormatError,
+        hasAnyFile: this.hasAnyFile,
+      };
 
-      this.$emit("set-file-vars", vars)
-      this.$parent.focusTextarea()
+      this.$emit("set-file-vars", vars);
+      this.$parent.focusTextarea();
     },
     deleteSpecificFile(obj) {
-      const { fileName } = obj
-      this.file = this.file.filter(file => {
-        return file.name != fileName
-      })
+      const { fileName } = obj;
+      this.file = this.file.filter((file) => {
+        return file.name != fileName;
+      });
       this.fileSize = this.file.length;
-      this.file.length ? this.emitFileVars(true) : this.deleteFile()
+      this.file.length ? this.emitFileVars(true) : this.deleteFile();
     },
     deleteFile() {
       this.fileSize = this.file.length;
-      this.$emit("set-file-vars", { file: [], isDoc: false, imagePreview: "", fileFormatError: false, hasAnyFile: false })
+      this.$emit("set-file-vars", {
+        file: [],
+        isDoc: false,
+        imagePreview: "",
+        fileFormatError: false,
+        hasAnyFile: false,
+      });
 
-      this.file = []
-      this.isDoc = false
-      this.showFilePreview = false
-      this.hasAnyFile = false
-      this.imagePreview = ""
-      this.fileFormatError = false
-      this.validFileFormats = ""
+      this.file = [];
+      this.isDoc = false;
+      this.showFilePreview = false;
+      this.hasAnyFile = false;
+      this.imagePreview = "";
+      this.fileFormatError = false;
+      this.validFileFormats = "";
     },
     openImage(imagePreview) {
-      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview)
-    }
-  }
-}
+      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview);
+    },
+  },
+};
 </script>