vue-intergrall-plugins 0.0.502 → 0.0.504

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.502",
+  "version": "0.0.504",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Cards/Card.vue

@@ -1,7 +1,7 @@
 <template>
-  <div 
+  <div
     v-if="origin"
-    :class="[currentClasses]" 
+    :class="[currentClasses]"
     :id="`card-${messageIndex ? messageIndex : randomizeValue}`"
   >
     <transition name="fade">
@@ -11,26 +11,36 @@
       <div class="card-header" :style="resizeHeaderCard">
         <div class="card-author">
           <fa-icon :icon="currentIcon" />
-          <p 
+          <p
             v-if="author"
-            class="text-bold" 
-            v-text="`${tratarTextoLongo(author)}`" 
-            :title="author">
-          </p>
-          <p  
-            v-if="origin === 'principal' && login" 
-            v-text="`| ${login}`" 
-            :title="login">
-          </p> 
+            class="text-bold"
+            v-text="`${tratarTextoLongo(author)}`"
+            :title="author"
+          ></p>
+          <p
+            v-if="origin === 'principal' && login"
+            v-text="`| ${login}`"
+            :title="login"
+          ></p>
         </div>
         <div class="card-right">
           <div class="card-dates">
-            <div 
-              v-if="date" 
-              class="card-date" 
-              :title="`${dictionary.data_criacao}: ${origin === 'outros' ? formataTimezoneData(date) : returnFormataDataHora(date)}`"
+            <div
+              v-if="date"
+              class="card-date"
+              :title="`${dictionary.data_criacao}: ${
+                origin === 'outros'
+                  ? formataTimezoneData(date)
+                  : returnFormataDataHora(date)
+              }`"
             >
-              <span v-text="origin === 'outros' ? formataTimezoneData(date) : returnFormataDataHora(date)"></span>
+              <span
+                v-text="
+                  origin === 'outros'
+                    ? formataTimezoneData(date)
+                    : returnFormataDataHora(date)
+                "
+              ></span>
             </div>
           </div>
           <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
@@ -38,12 +48,13 @@
           </div>
         </div>
       </div>
-      <p 
+      <p
         v-if="chipInfos.cod && chipInfos.desc"
-        class="card-chip" 
-        :class="[chipInfosClasses]" 
-        v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`">
-      </p>
+        class="card-chip"
+        :class="[chipInfosClasses]"
+        v-text="`${chipInfos.desc} (${chipInfos.cod})`"
+        :title="`${chipInfos.desc} (${chipInfos.cod})`"
+      ></p>
       <p class="card-message" v-html="formattedMessage"></p>
       <div class="card-footer">
         <template v-if="files && files.length">
@@ -51,8 +62,8 @@
             <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
           </div>
         </template>
-        <CardCheck 
-          v-if="messageStatus" 
+        <CardCheck
+          v-if="messageStatus"
           :messageStatus="messageStatus"
           :hasReply="hasReply"
           :replyMessage="replyMessage"
@@ -65,137 +76,138 @@
 </template>
 
 <script>
-import { textoLongo } from "@/mixins/formatarTexto"
-import { formataTimezoneData, formataDataHora } from "../../services/textFormatting"
-import CardFile from "./CardFile"
-import CardCheck from "./CardCheck"
+import { textoLongo } from "@/mixins/formatarTexto";
+import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
+import CardFile from "./CardFile";
+import CardCheck from "./CardCheck";
 
 export default {
   components: { CardFile, CardCheck },
   props: {
     dictionary: {
       type: Object,
-      required: true
+      required: true,
     },
     messageIndex: {
       type: [Number, String],
-      required: true
+      required: true,
     },
     domain: {
       type: String,
-      required: true
+      required: true,
     },
     hasExpand: {
       type: Boolean,
       required: false,
-      default: true
+      default: true,
     },
     origin: {
       type: String,
-      required: true
+      required: true,
     },
     author: {
-      type: String
+      type: String,
     },
     login: {
-      type: String
+      type: String,
     },
     message: {
-      type: String
+      type: String,
     },
     files: {
-      type: Array
+      type: Array,
     },
     date: {
-      type: String
+      type: String,
     },
     chipInfos: {
-      type: Object
+      type: Object,
     },
     newMessage: {
-      type: Boolean
+      type: Boolean,
     },
     hasReply: {
-      type: Boolean
+      type: Boolean,
     },
     replyMessage: {
-      type: String
+      type: String,
     },
     messageStatus: {
-      type: String
+      type: String,
     },
     tooltipContent: {
-      type: String
+      type: String,
     },
     resizeCard: {
       type: Boolean,
       required: false,
-      default: false
+      default: false,
     },
   },
-  data(){
+  data() {
     return {
-      styleCard: ''
-    }
+      styleCard: "",
+    };
   },
   mixins: [textoLongo],
   computed: {
     randomizeValue() {
-      return `${(Math.floor(Math.random() * 7770))}${Date.now()}`
+      return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
     },
     formattedMessage() {
-      if(this.message) {
-        const regex = /(\n|\r|&nbsp;)/g
-        if(regex.test(this.message)) return this.message.replace(regex, "<br>")
+      if (this.message) {
+        const regex = /(\n|\r|&nbsp;)/g;
+        if (regex.test(this.message)) return this.message.replace(regex, "<br>");
       }
-      return this.message
+      return this.message;
     },
     currentIcon() {
-      return this.origin === "outros" ? ['fas', 'user'] : ['fas', 'headset']
+      return this.origin === "outros" ? ["fas", "user"] : ["fas", "headset"];
     },
     currentClasses() {
-      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${this.newMessage ? "newMessage" : ""}`
+      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${
+        this.newMessage ? "newMessage" : ""
+      }`;
     },
     chipInfosClasses() {
-      if(!this.chipInfos || !this.chipInfos.cod) return ""
-      const { cod } = this.chipInfos
-      switch(cod) {
+      if (!this.chipInfos || !this.chipInfos.cod) return "";
+      const { cod } = this.chipInfos;
+      switch (cod) {
         case 9:
         case "9":
         case 8:
         case "8":
-          return "red"
+          return "red";
         case 3:
         case "3":
         case 6:
         case "6":
-          return "yellow"
+          return "yellow";
         default:
-          return ""
+          return "";
       }
     },
-    resizeHeaderCard(){
-      if(this.resizeCard){
-        this.styleCard = "flex-direction: column;"
+    resizeHeaderCard() {
+      if (this.resizeCard) {
+        this.styleCard = "flex-direction: column;";
+      } else {
+        this.styleCard = "flex-direction: row;";
       }
-      else {
-        this.styleCard = "flex-direction: row;"
-      }
-      return this.styleCard
+      return this.styleCard;
     },
   },
   methods: {
     formataTimezoneData(timezoneData) {
-      return formataTimezoneData(timezoneData)
+      return formataTimezoneData(timezoneData);
     },
     returnFormataDataHora(dataHora) {
-      return formataDataHora(dataHora, false, false, this.dictionary)
+      return formataDataHora(dataHora, false, false, this.dictionary);
     },
     cardExpand() {
-      this.$emit("card-expand", this.$props)
-    }
-  }
-}
+      this.$emit("card-expand", this.$props);
+    },
+  },
+};
 </script>
 
 <style>
@@ -207,14 +219,16 @@ export default {
 .fade-leave-to {
   opacity: 0;
 }
-  
-.card-cli, .card-ope {
+
+.card-cli,
+.card-ope {
   display: flex;
   width: 95%;
   margin: 5px 0;
   position: relative;
 }
-.card-cli.newMessage, .card-ope.newMessage {
+.card-cli.newMessage,
+.card-ope.newMessage {
   margin-top: 30px;
 }
 
@@ -226,14 +240,13 @@ export default {
   justify-content: center;
   align-items: center;
   margin: 2.5px 0;
-  background-color: lighten(#FFF249, 15)
+  background-color: lighten(#fff249, 15);
 }
 
 .card-cli .card {
-  border-left: 3px solid #90B823;
+  border-left: 3px solid #90b823;
 }
 
-
 .card-ope {
   align-self: flex-end;
   background-color: lighten(#007535, 72);
@@ -243,7 +256,7 @@ export default {
 }
 
 .card {
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
   overflow: hidden;
   width: 100%;
   padding: 2.5px 5px;
@@ -260,7 +273,7 @@ export default {
   justify-content: space-between;
 }
 .card-header svg {
-  font-size: 1rem
+  font-size: 16px;
 }
 
 .card-author {
@@ -280,7 +293,7 @@ export default {
   display: flex;
   flex-direction: column;
   margin-right: 10px;
-  font-size: .9rem
+  font-size: 14.4px;
 }
 
 .card-date {
@@ -304,7 +317,7 @@ export default {
   align-items: center;
   margin: 2.5px;
   cursor: pointer;
-  opacity: .8;
+  opacity: 0.8;
   transition: opacity 150ms;
 }
 .card-expand:hover {
@@ -319,15 +332,14 @@ export default {
   min-height: 25px;
 }
 
-
 .card-chip {
-  font-size: .8rem;
+  font-size: 12.8px;
   width: fit-content;
   border-radius: 15px;
   transition: all 150ms ease-in-out;
   padding: 2.5px 7px;
   color: rgb(31, 105, 193);
-  background-color: rgba(207, 216, 244, .6);
+  background-color: rgba(207, 216, 244, 0.6);
   margin-bottom: 5px;
 }
 .card-chip:hover {
@@ -335,24 +347,24 @@ export default {
 }
 .card-chip.orange {
   color: #e14924;
-  background-color: rgba(228, 92, 58, .15);
+  background-color: rgba(228, 92, 58, 0.15);
 }
 .card-chip.orange:hover {
-  background-color: rgba(228, 92, 58, .2);
+  background-color: rgba(228, 92, 58, 0.2);
 }
 .card-chip.yellow {
   color: #f4a304;
-  background-color: rgba(252, 191, 73, .15);
+  background-color: rgba(252, 191, 73, 0.15);
 }
 .card-chip.yellow:hover {
-  background-color: rgba(252, 191, 73, .2);
+  background-color: rgba(252, 191, 73, 0.2);
 }
 .card-chip.red {
   color: rgb(231, 76, 60);
-  background-color: rgba(231, 76, 60, .2);
+  background-color: rgba(231, 76, 60, 0.2);
 }
 .card-chip.red:hover {
-  background-color: rgba(231, 76, 60, .25);
+  background-color: rgba(231, 76, 60, 0.25);
 }
 
 .card-file {
@@ -369,45 +381,49 @@ export default {
   position: absolute;
   right: 30px;
   bottom: 5px;
-  font-size: .6rem;
+  font-size: 9.6px;
   color: #67a332;
-  width: .9rem;
-  height: .9rem;
+  width: 14.4px;
+  height: 14.4px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: #FFF;
+  background-color: #fff;
 }
 .card-reply svg {
   margin-top: -1px;
   margin-right: -1px;
-} 
+}
 
-.card-check{
+.card-check {
   position: absolute;
   bottom: 5px;
   right: 5px;
   cursor: pointer;
-  font-size: 0.7rem;
+  font-size: 11.2px;
 }
 .card-check svg {
-  font-size: 0.8rem;
+  font-size: 12.8px;
 }
-.card-check.seen, .card-check.seen svg{
-  color: #006DAA
+.card-check.seen,
+.card-check.seen svg {
+  color: #006daa;
 }
-.card-check.green, .card-check.green svg{
-  color: #4f772d
+.card-check.green,
+.card-check.green svg {
+  color: #4f772d;
 }
-.card-check.red, .card-check.red svg{
-  color: #ba181b
+.card-check.red,
+.card-check.red svg {
+  color: #ba181b;
 }
-.card-check.gray, .card-check.gray svg{
-  color: #999
+.card-check.gray,
+.card-check.gray svg {
+  color: #999;
 }
-.card-check.black, .card-check.black svg{
-  color: #666
+.card-check.black,
+.card-check.black svg {
+  color: #666;
 }
-
-</style>
+</style>

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

@@ -1,5 +1,9 @@
 <template>
-  <div class="text-footer-actions--btn" @click="$emit('click-trigger')" :title="dictionary.msg_baixar_todos_anexos">
+  <div
+    class="text-footer-actions--btn"
+    @click="$emit('click-trigger')"
+    :title="dictionary.msg_baixar_todos_anexos"
+  >
     <span class="multiplos">
       <fa-icon :icon="['fas', 'download']" />
       <fa-icon :icon="['fas', 'paperclip']" class="small" />
@@ -8,15 +12,15 @@
 </template>
 
 <style scoped>
-  .multiplos {
-    display: flex;
-  }
-  .multiplos svg {
-    font-size: .95rem
-  }
-  .multiplos svg.small {
-    font-size: .7rem!important;
-  }
+.multiplos {
+  display: flex;
+}
+.multiplos svg {
+  font-size: 15.2px;
+}
+.multiplos svg.small {
+  font-size: 11.2px !important;
+}
 </style>
 
 <script>
@@ -25,8 +29,8 @@ export default {
     dictionary: {
       type: Object,
       default: {},
-      required: false
-    }
-  }
-}
+      required: false,
+    },
+  },
+};
 </script>

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

@@ -125,7 +125,7 @@ export default {
   position: relative;
 }
 .emoji-text-container .emoji-text-btn {
-  font-size: 1.2rem;
+  font-size: 19.2px;
   cursor: pointer;
 }
 </style>