vue-intergrall-plugins 0.0.286 → 0.0.288

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

@@ -1,165 +1,165 @@
-<template>
-  <div class="interatividade">
-    <transition name="show-x">
-      <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">
-        <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>
-        <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'
-
-export default {
-  components: {InteratividadePopup},
-  data() {
-    return {
-      listaEstaAberta: false
-    }
-  },
-  props: {
-    interatividade: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    tipoBotoes() {
-      return this.interatividade.tipo
-    },
-    arrBotoes() {
-      const { botoes } = this.interatividade
-      return botoes ? botoes : []
-    },
-    objItens() {
-      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 []
-      }
-    }
-  },
-  methods: {
-    expandirLista() {
-      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;
-  }
-
-  .border-bottom-none {
-    border-bottom: none!important;
-  }
-  .padding-none {
-    padding: unset!important;
-  }
-
-  .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>
+<template>
+  <div class="interatividade">
+    <transition name="show-x">
+      <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">
+        <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>
+        <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'
+
+export default {
+  components: {InteratividadePopup},
+  data() {
+    return {
+      listaEstaAberta: false
+    }
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    tipoBotoes() {
+      return this.interatividade.tipo
+    },
+    arrBotoes() {
+      const { botoes } = this.interatividade
+      return botoes ? botoes : []
+    },
+    objItens() {
+      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 []
+      }
+    }
+  },
+  methods: {
+    expandirLista() {
+      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;
+  }
+
+  .border-bottom-none {
+    border-bottom: none!important;
+  }
+  .padding-none {
+    padding: unset!important;
+  }
+
+  .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>