vue-intergrall-plugins 0.0.1075 → 1.0.0

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

@@ -0,0 +1,429 @@
+<template>
+  <div
+    v-if="origin"
+    :class="[currentClasses]"
+    :id="`card-${messageIndex ? messageIndex : randomizeValue}`"
+  >
+    <transition name="fade">
+      <span v-if="newMessage" class="new-messages" v-text="`Nova mensagem`"></span>
+    </transition>
+    <div class="card box-shadow">
+      <div class="card-header" :style="resizeHeaderCard">
+        <div class="card-author">
+          <fa-icon :icon="currentIcon" />
+          <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>
+        </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)
+              }`"
+            >
+              <span
+                v-text="
+                  origin === 'outros'
+                    ? formataTimezoneData(date)
+                    : returnFormataDataHora(date)
+                "
+              ></span>
+            </div>
+          </div>
+          <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
+            <fa-icon :icon="['fas', 'expand-alt']" />
+          </div>
+        </div>
+      </div>
+      <p
+        v-if="chipInfos.cod && chipInfos.desc"
+        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">
+          <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
+            <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
+          </div>
+        </template>
+        <CardCheck
+          v-if="messageStatus"
+          :messageStatus="messageStatus"
+          :hasReply="hasReply"
+          :replyMessage="replyMessage"
+          :tooltipContent="tooltipContent"
+          @reply-msg="$emit('reply-msg')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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,
+    },
+    messageIndex: {
+      type: [Number, String],
+      required: true,
+    },
+    domain: {
+      type: String,
+      required: true,
+    },
+    hasExpand: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    origin: {
+      type: String,
+      required: true,
+    },
+    author: {
+      type: String,
+    },
+    login: {
+      type: String,
+    },
+    message: {
+      type: String,
+    },
+    files: {
+      type: Array,
+    },
+    date: {
+      type: String,
+    },
+    chipInfos: {
+      type: Object,
+    },
+    newMessage: {
+      type: Boolean,
+    },
+    hasReply: {
+      type: Boolean,
+    },
+    replyMessage: {
+      type: String,
+    },
+    messageStatus: {
+      type: String,
+    },
+    tooltipContent: {
+      type: String,
+    },
+    resizeCard: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      styleCard: "",
+    };
+  },
+  mixins: [textoLongo],
+  computed: {
+    randomizeValue() {
+      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>");
+      }
+      return this.message;
+    },
+    currentIcon() {
+      return this.origin === "outros" ? ["fas", "user"] : ["fas", "headset"];
+    },
+    currentClasses() {
+      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) {
+        case 9:
+        case "9":
+        case 8:
+        case "8":
+          return "red";
+        case 3:
+        case "3":
+        case 6:
+        case "6":
+          return "yellow";
+        default:
+          return "";
+      }
+    },
+    resizeHeaderCard() {
+      if (this.resizeCard) {
+        this.styleCard = "flex-direction: column;";
+      } else {
+        this.styleCard = "flex-direction: row;";
+      }
+      return this.styleCard;
+    },
+  },
+  methods: {
+    formataTimezoneData(timezoneData) {
+      return formataTimezoneData(timezoneData);
+    },
+    returnFormataDataHora(dataHora) {
+      return formataDataHora(dataHora, false, false, this.dictionary);
+    },
+    cardExpand() {
+      this.$emit("card-expand", this.$props);
+    },
+  },
+};
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.card-cli,
+.card-ope {
+  display: flex;
+  width: 95%;
+  margin: 5px 0;
+  position: relative;
+}
+.card-cli.newMessage,
+.card-ope.newMessage {
+  margin-top: 30px;
+}
+
+.new-messages {
+  position: absolute;
+  top: -30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px 0;
+  background-color: lighten(#fff249, 15);
+}
+
+.card-cli .card {
+  border-left: 3px solid #90b823;
+}
+
+.card-ope {
+  align-self: flex-end;
+  background-color: lighten(#007535, 72);
+}
+.card-ope .card {
+  border-right: 3px solid #007535;
+}
+
+.card {
+  background-color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  width: 100%;
+  padding: 2.5px 5px;
+}
+.card p {
+  word-break: break-all;
+}
+
+.card-header {
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+.card-header svg {
+  font-size: 16px;
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+}
+.card-author svg {
+  margin-right: 5px;
+}
+
+.card-canal {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.card-dates {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-size: 14.4px;
+}
+
+.card-date {
+  overflow: hidden;
+  display: flex;
+  align-content: center;
+}
+.card-date span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.card-date svg {
+  margin-right: 5px;
+  color: #232323;
+}
+
+.card-expand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 150ms;
+}
+.card-expand:hover {
+  opacity: 1;
+}
+
+.card-footer {
+  margin-top: 5px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 25px;
+}
+
+.card-chip {
+  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, 0.6);
+  margin-bottom: 5px;
+}
+.card-chip:hover {
+  background-color: rgba(207, 216, 244, 1);
+}
+.card-chip.orange {
+  color: #e14924;
+  background-color: rgba(228, 92, 58, 0.15);
+}
+.card-chip.orange:hover {
+  background-color: rgba(228, 92, 58, 0.2);
+}
+.card-chip.yellow {
+  color: #f4a304;
+  background-color: rgba(252, 191, 73, 0.15);
+}
+.card-chip.yellow:hover {
+  background-color: rgba(252, 191, 73, 0.2);
+}
+.card-chip.red {
+  color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, 0.2);
+}
+.card-chip.red:hover {
+  background-color: rgba(231, 76, 60, 0.25);
+}
+
+.card-file {
+  width: 60px;
+  height: 50px;
+  margin-right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-reply {
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  bottom: 5px;
+  font-size: 9.6px;
+  color: #67a332;
+  width: 14.4px;
+  height: 14.4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: #fff;
+}
+.card-reply svg {
+  margin-top: -1px;
+  margin-right: -1px;
+}
+
+.card-check {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  cursor: pointer;
+  font-size: 11.2px;
+}
+.card-check svg {
+  font-size: 12.8px;
+}
+.card-check.seen,
+.card-check.seen svg {
+  color: #006daa;
+}
+.card-check.green,
+.card-check.green svg {
+  color: #4f772d;
+}
+.card-check.red,
+.card-check.red svg {
+  color: #ba181b;
+}
+.card-check.gray,
+.card-check.gray svg {
+  color: #999;
+}
+.card-check.black,
+.card-check.black svg {
+  color: #666;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <transition name="fade" mode="out-in">
+      <span class="card-reply" v-if="hasReply && (messageStatus == 'C' || messageStatus == 'T')" v-tippy :content="replyMessage ? replyMessage : 'Fazer reenvio da mensagem'" @click="$emit('reply-msg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
+    </transition>
+    <transition name="fade" mode="out-in">
+      <span class="card-check" v-if="messageStatus == 'D'" :content="tooltipContent" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check gray" v-else-if="messageStatus == 'Q'" :content="tooltipContent" v-tippy key="check-gray"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'G'" :content="tooltipContent" v-tippy key="check-black"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'E'" :content="tooltipContent" v-tippy key="double-check-black"> <fa-icon :icon="['fas', 'check-double']" /> </span>
+      <span class="card-check seen" v-else-if="messageStatus == 'L'" :content="tooltipContent" v-tippy key="double-check-seen"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'C'" :content="tooltipContent" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'T'" :content="tooltipContent" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hasReply: {
+      type: Boolean
+    },
+    messageStatus: {
+      type: String
+    },
+    replyMessage: {
+      type: String
+    },
+    tooltipContent: {
+      type: String
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,157 @@
+<template>
+  <span class="file-item">
+    <transition-group name="fade" mode="out-in" class="file-item-transition">
+      <div v-if="isLoading" :small="true" key="card-file-loader" class="req-loader slow"></div>
+      <template v-else>
+        <span v-if="imageURL" class="file-img box-shadow" @click="openWindowFromURL(imageURL, true)" key="card-file-img" :title="filename">
+          <img :src="`${imageURL}`" :alt="filename" />
+        </span>
+        <span 
+          v-else
+          class="file-icon"
+          key="card-file-doc" 
+          :class="[iconClass]"
+          @click="openWindowFromURL(docURL, false)"
+          :title="filename"
+          target="_blank" 
+          rel="noreferrer noopener"
+        >
+          <fa-icon :icon="icon" />
+        </span>
+        <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${filename}`">
+          <fa-icon :icon="['fas', 'download']" />
+        </a>
+      </template>
+    </transition-group>
+  </span>
+</template>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+import { fileHandler } from "../../mixins/fileHandler"
+
+export default {
+  mixins: [fileHandler],
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    domain: {
+      type: String,
+      required: true
+    }
+  },
+  mounted(){
+    this.setFileVars(this.file, { dominio: this.domain })
+  }
+}
+</script>
+
+<style>
+.file-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.file-item-transition {
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.file-item .req-loader {
+  position: absolute;
+  top: calc(50% - 12.5px);
+  right: calc(50% - 12.5px);
+}
+.file-item-transition img {
+  max-width: 45px;
+  max-height: 45px;
+}
+.file-item a {
+  margin-left: 5px;
+  text-decoration: none;
+  color: #333;
+}
+
+.file-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  cursor: pointer;
+}
+.file-icon:hover {
+  opacity: 1
+}
+.file-icon:visited {
+  color: inherit;
+}
+svg {
+  font-size: 30px;
+  z-index: 1;
+}
+.file-icon.pdf {
+  position: relative;
+}
+.file-icon.pdf svg {
+  color: rgb(231, 76, 60);
+}
+.file-icon.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-icon.doc {
+  color: #15517F; 
+}
+.file-icon.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-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;
+}
+
+.file-img:hover {
+  opacity: 1;
+}
+.file-img img {
+  width: 95%;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="audio-speed-control" @click="toggleSpeed">
+    <div class="speed-circle" :class="{ 'active': audioSpeed !== 1 }">
+      {{ audioSpeed === 1 ? '1x' : audioSpeed + 'x' }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioSpeed: 1.0, // Velocidade padrão
+    };
+  },
+  methods: {
+    toggleSpeed() {
+      if (this.audioSpeed === 1) {
+        this.audioSpeed = 1.5;
+      } else if (this.audioSpeed === 1.5) {
+        this.audioSpeed = 2;
+      } else {
+        this.audioSpeed = 1;
+      }
+
+      // Emita o evento sempre que a velocidade for alterada
+      this.$emit("change-speed", this.audioSpeed);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.audio-speed-control {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.speed-circle {
+  width: 40px;
+  height: 40px;
+  background-color: #f1f3f4; /* Cor do círculo */
+  border: solid black 1px;
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+
+.speed-circle.active {
+  background-color: #f1f3f4; /* Cor quando ativo */
+    border: solid blue 1px;
+
+}
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <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" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.multiplos {
+  display: flex;
+}
+.multiplos svg {
+  font-size: 15.2px;
+}
+.multiplos svg.small {
+  font-size: 11.2px !important;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false,
+    },
+  },
+};
+</script>