vue-intergrall-plugins 1.1.90 → 1.2.0

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

@@ -1,291 +1,291 @@
-<template>
-  <div class="multiple-file-preview">
-    <fa-icon :icon="['fas', 'times-circle']" class="close-icon" @click="$emit('close')" />
-    <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-html="validFileFormats" :title="validFileFormats"></h4>
-        </div>
-      </template>
-      <template v-else>
-        <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
-          <p class="file-title" :style="`max-width: ${isPdf(singleFile.type) ? '175px' : '75px'}`"
-            :title="!singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : 'Arquivo invalido'} - ${singleFile.name}`"
-            :class="{ 'red': singleFile.invalid }">
-            <fa-icon :icon="icon(singleFile.imgOrDoc)" />
-            {{ !singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ?
-              dictionary.titulo_msg_formato_invalido : "Arquivo invalido"} - ${singleFile.name}` }}
-          </p>
-          <div class="small-img">
-            <span class="img-container" v-if="singleFile.imgOrDoc === 'img' && !isPdf(singleFile.type)">
-              <img :title="dictionary.titulo_visualizar_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>
-            <span class="doc" v-else>
-              <fa-icon :icon="['fas', 'file-alt']" />
-            </span>
-          </div>
-          <span @click="deleteSpecificFile(singleFile.name, index)" v-tippy="{ placement: 'left' }"
-            :content="dictionary.msg_excluir_anexo" :title="dictionary.msg_excluir_anexo" class="delete-file">
-            <fa-icon :icon="['fas', 'trash-alt']" />
-          </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;
-  scrollbar-color: #888 rgba(0, 0, 0, 0.2);
-  scrollbar-width: 4px;
-}
-
-.multiple-file-preview::-webkit-scrollbar {
-  width: 4px;
-}
-
-.multiple-file-preview .close-icon {
-  color: #E74C3C;
-  cursor: pointer;
-  opacity: .9;
-  transition: opacity 300ms;
-}
-
-.multiple-file-preview .close-icon:hover {
-  opacity: 1;
-}
-
-.multiple-file-preview::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.multiple-file-preview::-webkit-scrollbar-thumb {
-  transition-duration: .5s;
-  background-color: #222
-}
-
-.multiple-file-preview::-webkit-scrollbar-thumb:hover {
-  background-color: #555
-}
-
-.text-footer-invalid-format {
-  color: #222;
-  padding: 10px;
-}
-
-.text-footer-invalid-format h3 {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-weight: 500;
-}
-
-.text-footer-invalid-format h4 {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-size: 14.4px;
-}
-
-.text-footer-exclude-file {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 16px;
-  min-height: 16px;
-  background-color: #FFF;
-  border-radius: 50%;
-}
-
-.text-footer-exclude-file svg {
-  transition: color 200ms;
-  color: #e9594a;
-}
-
-.text-footer-exclude-file svg:hover {
-  color: #E74C3C;
-}
-
-.file-preview {
-  display: flex;
-  width: calc(100% - 20px);
-  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: #FFF;
-  border-radius: 30px;
-  display: inline-block;
-  max-width: 75px;
-}
-
-.file-title.red {
-  color: #E74C3C;
-  margin-right: 5px;
-}
-
-.file-title>svg {
-  margin-right: 5px;
-  color: #333;
-}
-
-.small-img {
-  flex: 1;
-  margin: 0 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.small-img img {
-  width: 100%;
-  height: 100%;
-  max-height: 40px;
-  max-width: 100px;
-  cursor: pointer;
-}
-
-.small-img .pdf,
-.small-img .doc {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 30px;
-}
-
-.small-img .pdf {
-  color: #E74C3C;
-}
-
-.small-img .doc {
-  color: #006bc9;
-}
-
-.small-img .pdf svg,
-.small-img .doc svg {
-  z-index: 1;
-}
-
-.small-img .pdf::after,
-.small-img .doc::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;
-  cursor: pointer;
-}
-
-.delete-file>svg {
-  font-size: 16px;
-  color: #E74C3C;
-}
-</style>
+<template>
+  <div class="multiple-file-preview">
+    <fa-icon :icon="['fas', 'times-circle']" class="close-icon" @click="$emit('close')" />
+    <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-html="validFileFormats" :title="validFileFormats"></h4>
+        </div>
+      </template>
+      <template v-else>
+        <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
+          <p class="file-title" :style="`max-width: ${isPdf(singleFile.type) ? '175px' : '75px'}`"
+            :title="!singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ? dictionary.titulo_msg_formato_invalido : 'Arquivo invalido'} - ${singleFile.name}`"
+            :class="{ 'red': singleFile.invalid }">
+            <fa-icon :icon="icon(singleFile.imgOrDoc)" />
+            {{ !singleFile.invalid ? singleFile.name : `${dictionary.titulo_msg_formato_invalido ?
+              dictionary.titulo_msg_formato_invalido : "Arquivo invalido"} - ${singleFile.name}` }}
+          </p>
+          <div class="small-img">
+            <span class="img-container" v-if="singleFile.imgOrDoc === 'img' && !isPdf(singleFile.type)">
+              <img :title="dictionary.titulo_visualizar_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>
+            <span class="doc" v-else>
+              <fa-icon :icon="['fas', 'file-alt']" />
+            </span>
+          </div>
+          <span @click="deleteSpecificFile(singleFile.name, index)" v-tippy="{ placement: 'left' }"
+            :content="dictionary.msg_excluir_anexo" :title="dictionary.msg_excluir_anexo" class="delete-file">
+            <fa-icon :icon="['fas', 'trash-alt']" />
+          </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;
+  scrollbar-color: #888 rgba(0, 0, 0, 0.2);
+  scrollbar-width: 4px;
+}
+
+.multiple-file-preview::-webkit-scrollbar {
+  width: 4px;
+}
+
+.multiple-file-preview .close-icon {
+  color: #E74C3C;
+  cursor: pointer;
+  opacity: .9;
+  transition: opacity 300ms;
+}
+
+.multiple-file-preview .close-icon:hover {
+  opacity: 1;
+}
+
+.multiple-file-preview::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.multiple-file-preview::-webkit-scrollbar-thumb {
+  transition-duration: .5s;
+  background-color: #222
+}
+
+.multiple-file-preview::-webkit-scrollbar-thumb:hover {
+  background-color: #555
+}
+
+.text-footer-invalid-format {
+  color: #222;
+  padding: 10px;
+}
+
+.text-footer-invalid-format h3 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
+
+.text-footer-invalid-format h4 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 14.4px;
+}
+
+.text-footer-exclude-file {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 16px;
+  min-height: 16px;
+  background-color: #FFF;
+  border-radius: 50%;
+}
+
+.text-footer-exclude-file svg {
+  transition: color 200ms;
+  color: #e9594a;
+}
+
+.text-footer-exclude-file svg:hover {
+  color: #E74C3C;
+}
+
+.file-preview {
+  display: flex;
+  width: calc(100% - 20px);
+  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: #FFF;
+  border-radius: 30px;
+  display: inline-block;
+  max-width: 75px;
+}
+
+.file-title.red {
+  color: #E74C3C;
+  margin-right: 5px;
+}
+
+.file-title>svg {
+  margin-right: 5px;
+  color: #333;
+}
+
+.small-img {
+  flex: 1;
+  margin: 0 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.small-img img {
+  width: 100%;
+  height: 100%;
+  max-height: 40px;
+  max-width: 100px;
+  cursor: pointer;
+}
+
+.small-img .pdf,
+.small-img .doc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+}
+
+.small-img .pdf {
+  color: #E74C3C;
+}
+
+.small-img .doc {
+  color: #006bc9;
+}
+
+.small-img .pdf svg,
+.small-img .doc svg {
+  z-index: 1;
+}
+
+.small-img .pdf::after,
+.small-img .doc::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;
+  cursor: pointer;
+}
+
+.delete-file>svg {
+  font-size: 16px;
+  color: #E74C3C;
+}
+</style>