vue-intergrall-plugins 1.1.90 → 1.2.0

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

@@ -1,193 +1,193 @@
-<template>
-  <transition-group name="fade" mode="out-in">
-    <VueLoader v-if="isLoading" key="file-loader" />
-    <div v-else key="file-container" class="email-file">
-      <span v-if="imageURL" class="anexo-img box-shadow" @click.stop="openWindowFromURL(imageURL, true)"
-        :title="`Visualizar ${filename}`">
-        <img :src="`${imageURL}`" :alt="filename" />
-      </span>
-      <span v-else-if="video" class="anexo-video box-shadow">
-        <video controls :src="docURL" :title="filename"></video>
-      </span>
-      <span v-else class="anexo-icone" :class="[iconClass]" @click.stop="openWindowFromURL(docURL, false)"
-        :title="`Visualizar ${filename}`" target="_blank">
-        <fa-icon :icon="icon" />
-      </span>
-      <a class="anexo-download box-shadow" :href="downloadURL" @click.stop :download="`${filename}`" target="_blank"
-        :title="`Download ${filename}`">
-        <fa-icon :icon="['fas', 'download']" />
-      </a>
-      <span class="anexo-name" :title="filename" @click.stop v-text="filename"></span>
-    </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>
-.email-file {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-direction: column;
-  min-width: 50px;
-  width: auto;
-  max-width: 100px;
-  height: 70px;
-  position: relative;
-}
-
-.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 {
-  max-width: 100%;
-  font-size: 12.8px;
-}
-
-.anexo-video {
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.anexo-video video {
-  max-width: 100%;
-}
-
-.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.xls svg {
-  color: rgb(0, 166, 90);
-}
-
-.anexo-icone.ppt svg {
-  color: rgb(230, 126, 34);
-}
-
-.anexo-icone.zip svg {
-  color: rgb(116, 52, 219);
-}
-
-.anexo-icone.xml svg {
-  color: rgb(52, 152, 219);
-}
-
-.anexo-icone.audio svg {
-  color: rgb(80, 104, 121);
-}
-
-.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;
-}
-
-.anexo-download {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border-radius: 5px;
-  padding: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #222;
-  background-color: #FFF;
-  z-index: 1;
-  font-size: 12.8px;
-  cursor: pointer;
-}
-
-.anexo-name {
-  max-width: 100%;
-  font-size: 12.8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 2px 0 5px 0;
-  height: 20px;
-}
-
-.anexo-img,
-.anexo-video,
-.anexo-icone {
-  max-height: calc(100% - 20px);
-}
+<template>
+  <transition-group name="fade" mode="out-in">
+    <VueLoader v-if="isLoading" key="file-loader" />
+    <div v-else key="file-container" class="email-file">
+      <span v-if="imageURL" class="anexo-img box-shadow" @click.stop="openWindowFromURL(imageURL, true)"
+        :title="`Visualizar ${filename}`">
+        <img :src="`${imageURL}`" :alt="filename" />
+      </span>
+      <span v-else-if="video" class="anexo-video box-shadow">
+        <video controls :src="docURL" :title="filename"></video>
+      </span>
+      <span v-else class="anexo-icone" :class="[iconClass]" @click.stop="openWindowFromURL(docURL, false)"
+        :title="`Visualizar ${filename}`" target="_blank">
+        <fa-icon :icon="icon" />
+      </span>
+      <a class="anexo-download box-shadow" :href="downloadURL" @click.stop :download="`${filename}`" target="_blank"
+        :title="`Download ${filename}`">
+        <fa-icon :icon="['fas', 'download']" />
+      </a>
+      <span class="anexo-name" :title="filename" @click.stop v-text="filename"></span>
+    </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>
+.email-file {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: column;
+  min-width: 50px;
+  width: auto;
+  max-width: 100px;
+  height: 70px;
+  position: relative;
+}
+
+.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 {
+  max-width: 100%;
+  font-size: 12.8px;
+}
+
+.anexo-video {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.anexo-video video {
+  max-width: 100%;
+}
+
+.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.xls svg {
+  color: rgb(0, 166, 90);
+}
+
+.anexo-icone.ppt svg {
+  color: rgb(230, 126, 34);
+}
+
+.anexo-icone.zip svg {
+  color: rgb(116, 52, 219);
+}
+
+.anexo-icone.xml svg {
+  color: rgb(52, 152, 219);
+}
+
+.anexo-icone.audio svg {
+  color: rgb(80, 104, 121);
+}
+
+.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;
+}
+
+.anexo-download {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 5px;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #222;
+  background-color: #FFF;
+  z-index: 1;
+  font-size: 12.8px;
+  cursor: pointer;
+}
+
+.anexo-name {
+  max-width: 100%;
+  font-size: 12.8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 0 5px 0;
+  height: 20px;
+}
+
+.anexo-img,
+.anexo-video,
+.anexo-icone {
+  max-height: calc(100% - 20px);
+}
 </style>

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

@@ -1,66 +1,66 @@
-<template>
-  <div :class="emailFromClass">
-    <p class="from" v-if="currentName" v-text="currentName" :title="currentName"></p>
-    <div v-if="showMail" class="additional-container">
-      <span class="additional" v-text="`${email}`" :title="email"></span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.email-from {
-  display: flex;
-  align-items: center;
-}
-
-.email-from .from {
-  font-size: 12px;
-  font-weight: bold;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin: 0;
-}
-
-.email-from .additional-container {
-  flex: 1;
-  overflow: hidden;
-}
-
-.email-from .additional {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-left: 5px;
-  font-size: 12px;
-  color: gray;
-  text-overflow: ellipsis;
-}
-</style>
-
-<script>
-export default {
-  props: {
-    currentName: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    email: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    showMail: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    emailFromClass: {
-      type: String,
-      required: false,
-      default: 'email-from'
-    }
-  }
-}
-</script>
+<template>
+  <div :class="emailFromClass">
+    <p class="from" v-if="currentName" v-text="currentName" :title="currentName"></p>
+    <div v-if="showMail" class="additional-container">
+      <span class="additional" v-text="`${email}`" :title="email"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.email-from {
+  display: flex;
+  align-items: center;
+}
+
+.email-from .from {
+  font-size: 12px;
+  font-weight: bold;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0;
+}
+
+.email-from .additional-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.email-from .additional {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 5px;
+  font-size: 12px;
+  color: gray;
+  text-overflow: ellipsis;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    currentName: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    email: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    showMail: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    emailFromClass: {
+      type: String,
+      required: false,
+      default: 'email-from'
+    }
+  }
+}
+</script>