vue-intergrall-plugins 1.0.1 → 1.0.2

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

@@ -97,7 +97,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .multiple-file-preview {
     position: relative;
     display: flex;

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

@@ -249,7 +249,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .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);

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

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .single-file-preview .close-icon {
     color: #E74C3C;
     cursor: pointer;

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

@@ -36,7 +36,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .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);

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

@@ -46,7 +46,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 .transition-selects {
   min-height: 80px;display: flex; flex-direction: column; width: 100%;
 }

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

@@ -641,19 +641,7 @@ export default {
 };
 </script>
 
-<style>
-.toasted svg {
-  margin-right: 10px;
-}
-
-.d-none {
-  display: none;
-}
-
-ul {
-  list-style-type: none;
-}
-
+<style scoped>
 .text-footer-container {
   display: flex;
   justify-content: center;

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

@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .req-loader-container {
   position: absolute;
   z-index: 1;

package/src/lib-components/Messages/AnexoMensagem.vue

@@ -89,7 +89,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 .tippy-tooltip.light-theme .tippy-backdrop {
   background-color: #fff;
 }

package/src/lib-components/Messages/ChatMessages.vue

@@ -639,7 +639,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 :root {
   --message-color: #373737;
   --text-color: #fff;

package/src/lib-components/Messages/InteratividadeBotoes.vue

@@ -1,165 +1,163 @@
 <template>
   <div class="interatividade">
     <transition name="show-x">
-      <InteratividadePopup v-if="listaEstaAberta" :lista="listaExpandida" :titulo="objItens.list.title" @close="listaEstaAberta = false" />
+      <InteratividadePopup
+        v-if="listaEstaAberta"
+        :lista="listaExpandida"
+        :titulo="objItens.list.title"
+        @close="listaEstaAberta = false"
+      />
     </transition>
     <template v-if="arrBotoes.length">
-      <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
+      <div
+        v-for="(btn, index) in arrBotoes"
+        :key="index"
+        :title="btn.titulo"
+        class="interatividade-btn"
+      >
         <p v-html="btn.titulo" class="interatividade-titulo"></p>
       </div>
     </template>
     <template v-else-if="Object.keys(objItens).length">
-      <div class="interatividade-lista" :class="tipoBotoes == 'listItem' ? 'bg-none' : ''">
-        <div class="interatividade-lista-conteudo" :class="tipoBotoes == 'listItem' ? 'border-bottom-none padding-none' : ''">
-          <p v-if="objItens.header && objItens.header.text" v-html="objItens.header.text" class="interatividade-lista-titulo"></p>
-          <p v-if="objItens.body && objItens.body.text" v-html="objItens.body.text" class="interatividade-lista-corpo"></p>
-          <p v-if="objItens.footer && objItens.footer.text" v-html="objItens.footer.text" class="interatividade-lista-rodape"></p>
+      <div
+        class="interatividade-lista"
+        :class="tipoBotoes == 'listItem' ? 'bg-none' : ''"
+      >
+        <div
+          class="interatividade-lista-conteudo"
+          :class="tipoBotoes == 'listItem' ? 'border-bottom-none padding-none' : ''"
+        >
+          <p
+            v-if="objItens.header && objItens.header.text"
+            v-html="objItens.header.text"
+            class="interatividade-lista-titulo"
+          ></p>
+          <p
+            v-if="objItens.body && objItens.body.text"
+            v-html="objItens.body.text"
+            class="interatividade-lista-corpo"
+          ></p>
+          <p
+            v-if="objItens.footer && objItens.footer.text"
+            v-html="objItens.footer.text"
+            class="interatividade-lista-rodape"
+          ></p>
         </div>
-        <p v-if="objItens.list && objItens.list.title" v-html="objItens.list.title" @click="expandirLista" :class="tipoBotoes == 'listItem' ? 'bg-white border-radius-5 mt-5' : ''" class="interatividade-lista-link"></p>
+        <p
+          v-if="objItens.list && objItens.list.title"
+          v-html="objItens.list.title"
+          @click="expandirLista"
+          :class="tipoBotoes == 'listItem' ? 'bg-white border-radius-5 mt-5' : ''"
+          class="interatividade-lista-link"
+        ></p>
       </div>
     </template>
   </div>
 </template>
 
 <script>
-import InteratividadePopup from './InteratividadePopup'
+import InteratividadePopup from "./InteratividadePopup";
 
 export default {
-  components: {InteratividadePopup},
+  components: { InteratividadePopup },
   data() {
     return {
-      listaEstaAberta: false
-    }
+      listaEstaAberta: false,
+    };
   },
   props: {
     interatividade: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     tipoBotoes() {
-      return this.interatividade.tipo
+      return this.interatividade.tipo;
     },
     arrBotoes() {
-      const { botoes } = this.interatividade
-      return botoes ? botoes : []
+      const { botoes } = this.interatividade;
+      return botoes ? botoes : [];
     },
     objItens() {
-      const { itens } = this.interatividade
-      return itens ? itens : {}
+      const { itens } = this.interatividade;
+      return itens ? itens : {};
     },
     listaExpandida() {
       try {
-        const { list } = this.objItens
-        const { sections } = list
-        return sections ? sections : []
-      }catch(e) {
-        console.error("Erro ao definir a lista a ser expandida")
-        console.error(e)
-        return []
+        const { list } = this.objItens;
+        const { sections } = list;
+        return sections ? sections : [];
+      } catch (e) {
+        console.error("Erro ao definir a lista a ser expandida");
+        console.error(e);
+        return [];
       }
-    }
+    },
   },
   methods: {
     expandirLista() {
-      this.listaEstaAberta = !this.listaEstaAberta
-    }
-  }
-}
+      this.listaEstaAberta = !this.listaEstaAberta;
+    },
+  },
+};
 </script>
 
-<style>
-  .show-x-enter-active,
-  .show-x-leave-enter {
-    opacity: 1;
-    transform: translateX(0);
-    transition: all 200ms linear;
-  }
-  .show-x-enter,
-  .show-x-leave-to {
-    opacity: 0;
-    transform: translateX(5%);
-  }
-
-  .bg-none {
-    background-color: transparent!important;
-  }
-
-  .bg-white {
-    background-color: #FFF;
-  }
-
-  .border-radius-5 {
-    border-radius: 5px
-  }
-
-  .mt-5 {
-    margin-top: 5px;
-  }
-
-  .interatividade-btn {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #FFF;
-    color: #111B21;
-    padding: 10px 12px;
-    border-radius: 5px;
-    margin-bottom: 10px;
-  }
-  .interatividade-btn:nth-child(1) {
-    margin-top: 10px
-  }
-  .interatividade-titulo {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .interatividade-lista {
-    width: 100%;
-    min-width: 200px;
-    border-radius: 15px;
-    background-color: #FFF;
-    color: #333;
-    margin: 10px 0;
-  }
+<style scoped>
+.interatividade-btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  color: #111b21;
+  padding: 10px 12px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+.interatividade-btn:nth-child(1) {
+  margin-top: 10px;
+}
+.interatividade-titulo {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
 
-  .border-bottom-none {
-    border-bottom: none!important;
-  }
-  .padding-none {
-    padding: unset!important;
-  }
+.interatividade-lista {
+  width: 100%;
+  min-width: 200px;
+  border-radius: 15px;
+  background-color: #fff;
+  color: #333;
+  margin: 10px 0;
+}
 
-  .interatividade-lista-conteudo {
-    padding: 10px;
-    border-bottom: 1px solid #D7D7D7;
-  }
-  .interatividade-lista-titulo {
-    font-weight: bold;
-    font-size: 1.2em;
-    margin-bottom: 10px;
-  }
-  .interatividade-lista-rodape {
-    color: #818181;
-    margin-top: 5px;
-  }
-  .interatividade-lista-link {
-    width: 100%;
-    text-align: center;
-    padding: 10px;
-    color: rgb(0, 110, 255);
-    cursor: pointer;
-    transition: color 200ms ease-in-out;
-  }
-  .interatividade-lista-link:hover {
-    color: rgb(0, 98, 143);
-  }
-  
+.interatividade-lista-conteudo {
+  padding: 10px;
+  border-bottom: 1px solid #d7d7d7;
+}
+.interatividade-lista-titulo {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+.interatividade-lista-rodape {
+  color: #818181;
+  margin-top: 5px;
+}
+.interatividade-lista-link {
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  color: rgb(0, 110, 255);
+  cursor: pointer;
+  transition: color 200ms ease-in-out;
+}
+.interatividade-lista-link:hover {
+  color: rgb(0, 98, 143);
+}
 </style>