vue-intergrall-plugins 0.0.1085 → 1.0.1

package/src/lib-components/Email/EmailFile.vue

@@ -0,0 +1,126 @@
+<template>
+  <transition-group name="fade" mode="out-in">
+    <VueLoader v-if="isLoading" key="file-loader" />
+    <div v-else key="file-container" class="mb-5 mx-5 d-flex flex-wrap align-items-center">
+      <span v-if="imageURL" class="anexo-img box-shadow" @click="openWindowFromURL(imageURL, true)" :title="`Visualizar ${filename}`">
+        <img :src="`${imageURL}`" :alt="filename" />
+      </span>
+      <span 
+        v-else
+        class="anexo-icone mr-5"
+        :class="[iconClass]"
+        @click="openWindowFromURL(docURL, false)"
+        :title="`Visualizar ${filename}`"
+        target="_blank"
+      >
+        <fa-icon :icon="icon" />
+      </span>
+      <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" :title="`Download ${filename}`">
+        <fa-icon :icon="['fas', 'download']" />
+      </a>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+import { fileHandler } from "@/mixins/fileHandler"
+
+export default {
+  mixins: [fileHandler],
+  props: {
+    anexo: {
+      type: [Object, String],
+      default: () => { return {} }
+    },
+    dominio: {
+      type: String,
+      required: true
+    }
+  },
+  mounted() {
+    this.setFileVars(this.anexo, { dominio: this.dominio })
+  },
+}
+</script>
+<style scoped>
+.mr-5 {
+  margin-right: 5px;
+}
+.anexo-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, .2);
+  border-radius: 2.5px;
+  cursor: pointer;
+  opacity: .9;
+  transition: opacity 150ms;
+}
+.anexo-img:hover {
+  opacity: 1;
+}
+.anexo-img img {
+  width: 95%;
+  max-height: 50px;
+}
+.box-shadow {
+  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.anexo-icone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  cursor: pointer;
+}
+.anexo-icone:hover {
+  opacity: 1
+}
+.anexo-icone:visited {
+  color: inherit;
+}
+.anexo-icone.pdf {
+  position: relative;
+}
+.anexo-icone.pdf svg {
+  color: rgb(231, 76, 60);
+}
+.anexo-icone.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+}
+.anexo-icone.doc {
+  color: #15517F; 
+}
+.anexo-icone.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+.align-items-center {
+  align-items: center;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.d-flex {
+  display: flex;
+}
+.mb-5 {
+    margin-bottom: 5px;
+}
+.mx-5 {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+</style>

package/src/lib-components/Email/EmailItem.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="w-100 text-dark min-h-60 d-flex flex-wrap px-35 border-bottom-1 border-color-gray transition-150">
+    <div class="w-100 d-flex d-flex align-items-center justify-content-between cursor-pointer" @click="toggleEstado()">
+      <div class="d-flex-center m-10">
+        <span class="align-self-start border-radius-round d-flex-center w-36px h-36px border-color-gray border-1 mr-10" v-text="siglaNome"></span>
+        <div class="d-flex flex-column">
+          <p class="text-bold fs-_9" v-text="de" :title="de"></p>
+          <p v-if="estado != 0" class="text-gray fs-_8" v-text="para" :title="para"></p>
+          <p class="text-gray fs-_8" v-text="tratarTextoLongo(assunto, 30)" :title="assunto"></p>
+        </div>
+      </div>
+      <span class="fs-_8 mr-10 text-ellipsis" :title="formataDataHora(dataHora)">
+        <fa-icon :icon="['fas', 'calendar']" />
+        {{ formataDataHora(dataHora) }}
+      </span>
+    </div>
+    <div class="d-flex-center w-100 p-15" v-if="estado != 0">
+      <section v-html="html"></section>
+    </div>
+    <template v-if="anexos && anexos.length">
+      <EmailFile 
+        class="d-flex flex-wrap align-items-center"
+        v-for="(anexo, index) in anexos" :key="index"
+        :anexo="anexo"
+        :dominio="dominio"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import EmailFile from "./EmailFile.vue"
+import { textoLongo } from "@/mixins/formatarTexto"
+
+export default {
+  mixins: [textoLongo],
+  components: { EmailFile },
+  props: {
+    dominio: {
+      type: String,
+      required: true
+    },
+    dicionario: {
+        type: Object,
+        required: true
+    },
+    de: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    para: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    html: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    assunto: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    dataHora: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    mensagem: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    anexos: {
+      type: [Array, String],
+      required: false,
+      default: () => { return [] }
+    },
+    iniciarAberto: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      estado: 0
+    }
+  },
+  computed: {
+    siglaNome() {
+      return this.de[0] ? this.de[0].toUpperCase() : ""
+    }
+  },
+  methods: {
+    toggleEstado() {
+      this.estado = this.estado == 0 ? 1 : 0
+    }
+  }
+}
+</script>
+<style scoped>
+    .w-100 {
+        width: 100%;
+    }
+    .text-dark {
+        color: #333
+    }
+    .min-h-60 {
+        min-height: 60px;
+    }
+    .d-flex {
+        display: flex;
+    }
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+    .border-bottom-1 {
+        border-bottom: 1px solid;
+    }
+    .border-color-gray {
+        border-color: #CCC
+    }
+    .transition-150 {
+        transition: all 150ms ease-in-out;
+    }
+    .cursor-pointer {
+        cursor: pointer;
+    }
+    .justify-content-between {
+        justify-content: space-between;
+    }
+    .align-items-center {
+        align-items: center;
+    }
+    .align-self-start {
+        align-self: flex-start;
+    }
+    .border-radius-round {
+        border-radius: 50%!important;
+    }
+    .w-36px {
+        width: 36px;
+    }
+    .h-36px {
+        height: 36px;
+    }
+    .border-1 {
+        border: 1px solid;
+    }
+    .mr-10 {
+        margin-right: 10px;
+    }
+    .flex-column {
+        display: flex;
+        flex-direction: column
+    }
+    .text-bold {
+        font-weight: bold;
+    }
+    .fs-_9 {
+        font-size: 14.4px;
+    }
+    .fs-_8 {
+        font-size: 12.8px;
+    }
+    .text-gray {
+        color: gray;
+    }
+    .p-15 {
+        padding: 15px;
+    }
+    .text-ellipsis{
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden
+    }
+    .d-flex-center{
+        display: flex;
+        justify-content: center;
+        align-items: center
+    }
+</style>

package/src/lib-components/Loader/Loader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="req-loader-container" :class="{'align-right' : alignRight, 'light-bg' : hasBg}">
-    <div class="req-loader" :class="{'big' : size == 'big'}"></div>
+    <div class="req-loader" :class="{'big' : size == 'big', 'slow' : slow}"></div>
   </div>
 </template>
 
@@ -19,6 +19,10 @@ export default {
       type: String,
       required: false,
       default: "small"
+    },
+    slow: {
+      type: Boolean,
+      required: false
     }
   }
 }
@@ -27,6 +31,7 @@ export default {
 <style>
 .req-loader-container {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;