vue-intergrall-plugins 0.0.300 → 0.0.500

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

@@ -1,35 +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>
+<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

@@ -1,157 +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>
+<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

@@ -1,32 +1,32 @@
-<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: .95rem
-  }
-  .multiplos svg.small {
-    font-size: .7rem!important;
-  }
-</style>
-
-<script>
-export default {
-  props: {
-    dictionary: {
-      type: Object,
-      default: {},
-      required: false
-    }
-  }
-}
-</script>
+<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: .95rem
+  }
+  .multiplos svg.small {
+    font-size: .7rem!important;
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>