@nixweb/nixloc-ui 0.0.88 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.88",
+  "version": "0.0.91",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/Botao.vue

@@ -73,7 +73,7 @@ export default {
 }
 
 .titulo {
-  margin-right: 5px;
+  margin: 2px;
 }
 
 .botao {

package/src/component/layout/Menu.vue

@@ -7,32 +7,32 @@
         </div>
       </li>
       <li>
-        <a
-          href="#"
-          @click.prevent="navegarPara('dashboard')"
-          :class="sessaoDestaque('home')"
-        >
-          <div class="div-icone lado-a-lado">
-            <i class="fas fa-chart-area icone-dash" :style="'color:' + corBase"></i>
-          </div>
-          <div class="titulo">Dashboard</div>
-        </a>
+        <div :class="{ 'menu-ativo': menuAtivo == 'Dashboard' }">
+          <a
+            href="#"
+            @click.prevent="navegarPara({ nomeRota: 'dashboard', modulo: 'Dashboard' })"
+            :class="sessaoDestaque('home')"
+          >
+            <div class="div-icone lado-a-lado">
+              <i class="fas fa-chart-area icone-dash" :style="'color:' + corBase"></i>
+            </div>
+            <div class="titulo">Dashboard</div>
+          </a>
+        </div>
       </li>
-
       <li v-for="(item, index) in menuFiltro(true)" :key="index">
-        <a
-          href="#"
-          @click.prevent="abrirSubMenu(item.modulo)"
-          :class="sessaoDestaque(item.modulo)"
-        >
-          <div class="div-icone lado-a-lado">
-            <i :class="item.icone" class="icone" :style="'color:' + corBase"></i>
-          </div>
-          <div class="titulo">{{ item.titulo }}</div>
-          <!--  <div class="lado-a-lado seta menu__arrow-icon">
-            <i class="fas fa-angle-right"></i>
-          </div> -->
-        </a>
+        <div :class="{ 'menu-ativo': menuAtivo == item.modulo }">
+          <a
+            href="#"
+            @click.prevent="abrirSubMenu(item.modulo)"
+            :class="sessaoDestaque(item.modulo)"
+          >
+            <div class="div-icone lado-a-lado">
+              <i :class="item.icone" class="icone" :style="'color:' + corBase"></i>
+            </div>
+            <div class="titulo">{{ item.titulo }}</div>
+          </a>
+        </div>
       </li>
     </ul>
 
@@ -55,7 +55,7 @@
             <a
               v-else
               href="#"
-              @click.prevent="navegarPara(item.nomeRota)"
+              @click.prevent="navegarPara(item)"
               :class="classeSubMenu(item.titulo)"
             >
               <b-row>
@@ -81,12 +81,17 @@ export default {
       type: String,
       default: "#4680A5",
     },
+    corBaseAtivo: {
+      type: String,
+      default: "#d98621",
+    },
     urlImagem: String,
   },
   data() {
     return {
       modulo: "",
       subMenuPrimeiroNivel: false,
+      menuAtivo: "Dashboard",
     };
   },
   methods: {
@@ -110,9 +115,9 @@ export default {
         "context-menu__link--active": this.activeSubMenu === subMenuName,
       };
     },
-    navegarPara(nomeRota) {
+    navegarPara(item) {
       this.$router.push({
-        name: nomeRota,
+        name: item.nomeRota,
       });
       this.fecharSubMenu();
     },
@@ -135,6 +140,14 @@ export default {
   computed: {
     ...mapState("usuario", ["menu"]),
   },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.menuAtivo = router.matched[0].props.default.modulo;
+      },
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -144,6 +157,12 @@ export default {
   z-index: 1000;
 }
 
+.menu-ativo {
+  border-left: 3px solid #d98621;
+  color: #d98621 ;
+  background-color: #FAFAFC;
+}
+
 .div-logo {
   padding-top: 5px;
   padding-bottom: 15px;

package/src/component/shared/SalvarCancelar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <BarraFixa posicao="rodape" v-show="formSujo">
+    <BarraFixa posicao="rodape" v-show="formSujo && !modal.abrir">
       <div>
         <Botao
           chave="cancelarSalvarCancelar"
@@ -37,6 +37,7 @@ export default {
   computed: {
     ...mapState("validation", ["formSujo"]),
     ...mapGetters("validation", ["formValido"]),
+    ...mapState("generic", ["modal"]),
   },
   methods: {
     ...mapMutations("validation", ["insereFormSujo"]),
@@ -46,5 +47,10 @@ export default {
       this.removeCarregando(["cancelarSalvarCancelar"]);
     },
   },
+  watch: {
+    "modal.abrir": function (valor) {
+      this.insereFormSujo(false);
+    },
+  },
 };
 </script>

package/src/component/shared/Tabela.vue

@@ -97,6 +97,9 @@
             >
               <TabelaBotao :obj="obj" :linha="linha" />
             </div>
+            <div class="link" v-if="obj.tipo === 'link'" @click="navegarPara(obj, linha)">
+              <span> {{ linha[obj.campo] }}</span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -143,7 +146,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations("generic", ["adicionaSelecao"]),
+    ...mapMutations("generic", ["adicionaSelecao", "insereEvento"]),
     ...mapActions("generic", ["pdfApi"]),
     selecionar() {
       this.adicionaSelecao([]);
@@ -188,7 +191,21 @@ export default {
       };
       this.pdfApi(params).then((response) => {});
     },
+    navegarPara(obj, linha) {
+      if (obj.nomeRota) {
+        this.$router.push({
+          name: obj.nomeRota,
+          params: { id: linha.id },
+        });
+      } else {
+        this.insereEvento({
+          nome: obj.nomeEvento,
+          dados: linha,
+        });
+      }
+    },
   },
+
   beforeDestroy() {
     this.adicionaSelecao([]);
   },
@@ -214,10 +231,15 @@ table tbody tr td {
   width: 30px;
 }
 
+tr:hover {
+  background-color: #fafafc;
+}
+
 .titulo-cabecalho {
   font-size: 14px;
   color: #757d8c;
-  font-weight: 500;
+  font-weight: 400;
+  text-transform: uppercase;
 }
 
 .tabela-numero {
@@ -235,12 +257,22 @@ table tbody tr td {
   min-width: 100px;
 }
 
-.icone {
-  font-size: 20px;
-  color: #8ca1b7;
+.link {
+  color: #0057A9;
+  font-size: 14px;
+  font-weight: 400;
   cursor: pointer;
 }
 
+.link:hover {
+  font-size: 14.5px;
+  transition: 0.1s;
+}
+
+.icone-link:hover {
+  font-size: 12.5px;
+}
+
 .receita {
   font-size: 14px;
   color: darkblue;

package/src/component/template/ModeloLista.vue

@@ -62,6 +62,7 @@ export default {
   name: "ModeloLista",
   props: {
     modeloLista: Object,
+    propsParam: Object,
     mostrarMoldura: {
       type: Boolean,
       default: true,
@@ -97,7 +98,7 @@ export default {
         totalPorPagina: 10,
       },
       paramsFiltro: [],
-      propsParams: {},
+      filtroDinamico: {},
     };
   },
   created() {
@@ -137,11 +138,11 @@ export default {
       "atualizaCampoPesquisa",
     ]),
     obterTodos() {
-      let obj = { ...this.baseParams, ...this.propsParams };
+      let obj = { ...this.baseParams, ...this.filtroDinamico, ...this.propsParam };
       let params = { url: this.modeloLista.urlGetApi, obj: obj };
       this.getApi(params).then((response) => {
         this.conteudo = response.conteudo;
-        this.removeCarregando(["painel", "pesquisar", "limpar"]);
+        this.removeCarregando(["painel", "modeloSubView", "pesquisar", "limpar"]);
       });
     },
     removerSelecionados() {
@@ -208,11 +209,11 @@ export default {
           }
         }
 
-        this.propsParams = result;
+        this.filtroDinamico = result;
 
         this.atualizaPaginacao({
           chave: "modeloLista",
-          totalPorPagina: this.propsParams.totalPorPagina,
+          totalPorPagina: this.filtroDinamico.totalPorPagina,
         });
 
         this.obterTodos();

package/src/component/template/ModeloSubView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Carregando :centralizado="false" v-show="carregando('modeloSubView')" />
+    <div v-show="!carregando('modeloSubView')">
+      <slot name="conteudo-botoes"></slot>
+      <div v-if="mostrarPesquisa">
+        <Pesquisa />
+        <br />
+      </div>
+
+      <ModeloLista
+        :modeloLista="modeloLista"
+        :propsParam="propsParam"
+        :mostrarMoldura="false"
+        :mostrarFiltroHorizontal="mostrarFiltroHorizontal"
+        :botaoExcluir="botaoExcluir"
+      >
+        <div slot="conteudo-botoes-tabela-cabecalho">
+          <slot name="conteudo-botoes-tabela-cabecalho"></slot>
+        </div>
+        <div slot="conteudo-filtro-horizontal">
+          <slot name="conteudo-filtro-horizontal"></slot>
+        </div>
+        <div slot="conteudo-botoes-tabela">
+          <slot name="conteudo-botoes-tabela"></slot>
+        </div>
+      </ModeloLista>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pesquisa from "../shared/Pesquisa.vue";
+import Carregando from "../shared/Carregando.vue";
+
+import ModeloLista from "@nixweb/nixloc-ui/src/component/template/ModeloLista.vue";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloView",
+  components: { Pesquisa, Carregando, ModeloLista },
+  props: {
+    modeloLista: Object,
+    propsParam: Object,
+    mostrarPesquisa: {
+      type: Boolean,
+      default: true,
+    },
+    mostrarFiltroHorizontal: {
+      type: Boolean,
+      default: true,
+    },
+    botaoExcluir: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["carregando"]),
+  },
+  created() {
+    this.insereCarregando("modeloSubView");
+  },
+  methods: {
+    ...mapMutations("generic", ["insereCarregando"]),
+  },
+};
+</script>

package/src/component/template/ModeloConfiguracaoView.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <slot name="conteudo-botoes"></slot>
-    <div v-if="mostrarPesquisa">
-      <Pesquisa />
-      <br />
-    </div>
-
-    <ModeloLista
-      :modeloLista="modeloLista"
-      :mostrarMoldura="false"
-      :mostrarFiltroHorizontal="mostrarFiltroHorizontal"
-      :botaoExcluir="botaoExcluir"
-    >
-      <div slot="conteudo-botoes-tabela-cabecalho">
-        <slot name="conteudo-botoes-tabela-cabecalho"></slot>
-      </div>
-      <div slot="conteudo-filtro-horizontal">
-        <slot name="conteudo-filtro-horizontal"></slot>
-      </div>
-      <div slot="conteudo-botoes-tabela">
-        <slot name="conteudo-botoes-tabela"></slot>
-      </div>
-    </ModeloLista>
-  </div>
-</template>
-
-<script>
-import Pesquisa from "../shared/Pesquisa.vue";
-
-import ModeloLista from "@nixweb/nixloc-ui/src/component/template/ModeloLista.vue";
-
-export default {
-  name: "ModeloView",
-  components: { Pesquisa, ModeloLista },
-  props: {
-    modeloLista: Object,
-    mostrarPesquisa: {
-      type: Boolean,
-      default: true,
-    },
-    mostrarFiltroHorizontal: {
-      type: Boolean,
-      default: true,
-    },
-    botaoExcluir: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>