vue-intergrall-plugins 0.0.300 → 0.0.500

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

@@ -1,266 +1,266 @@
-<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" :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: .9rem; 
-  }
-
-  .text-footer-exclude-file {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    cursor: pointer; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 1rem;
-    min-height: 1rem;
-    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: 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: #FFF;
-    border-radius: 30px;
-    display: inline-block;
-  }
-  .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 {
-    height: 40px;
-    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: 1rem;
-    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" :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: .9rem; 
+  }
+
+  .text-footer-exclude-file {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 1rem;
+    min-height: 1rem;
+    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: 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: #FFF;
+    border-radius: 30px;
+    display: inline-block;
+  }
+  .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 {
+    height: 40px;
+    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: 1rem;
+    color: #E74C3C;
+  }
+</style>