@nixweb/nixloc-ui 0.0.87 → 0.0.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.87",
+  "version": "0.0.90",
   "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/{ModeloCadastroView.vue → ModeloConfiguracaoView.vue}

@@ -1,9 +1,18 @@
 <template>
   <div>
     <slot name="conteudo-botoes"></slot>
-    <Pesquisa />
-    <br />
-    <ModeloLista :modeloLista="modeloLista" :botaoExcluir="botaoExcluir">
+    <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>
@@ -27,6 +36,15 @@ export default {
   components: { Pesquisa, ModeloLista },
   props: {
     modeloLista: Object,
+    propsParam: Object,
+    mostrarPesquisa: {
+      type: Boolean,
+      default: true,
+    },
+    mostrarFiltroHorizontal: {
+      type: Boolean,
+      default: true,
+    },
     botaoExcluir: {
       type: Boolean,
       default: true,

package/src/component/template/ModeloLista.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="g-div-moldura">
+    <div :class="{ 'g-div-moldura': mostrarMoldura }">
       <b-row>
         <b-col sm="12"
           ><div>
-            <FiltroHorizontal>
+            <FiltroHorizontal v-if="mostrarFiltroHorizontal">
               <div slot="conteudo-filtro-horizontal">
                 <slot name="conteudo-filtro-horizontal"></slot>
               </div>
@@ -62,6 +62,15 @@ export default {
   name: "ModeloLista",
   props: {
     modeloLista: Object,
+    propsParam: Object,
+    mostrarMoldura: {
+      type: Boolean,
+      default: true,
+    },
+    mostrarFiltroHorizontal: {
+      type: Boolean,
+      default: true,
+    },
     botaoExcluir: {
       type: Boolean,
       default: true,
@@ -89,7 +98,7 @@ export default {
         totalPorPagina: 10,
       },
       paramsFiltro: [],
-      propsParams: {},
+      filtroDinamico: {},
     };
   },
   created() {
@@ -129,7 +138,7 @@ 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;
@@ -200,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/value-objects/Endereco.vue

@@ -8,6 +8,7 @@
           :formNome="formNome"
           :mascara="'#####-###'"
           :tamanhoMaximo="9"
+          :requerido="requerido"
           v-model="endereco.cep"
         >
           <div class="glyphicon margem-botao">
@@ -27,6 +28,7 @@
           campo="logradouro"
           :formNome="formNome"
           :tamanhoMaximo="150"
+          :requerido="requerido"
           v-model="endereco.logradouro"
         />
       </b-col>
@@ -57,6 +59,7 @@
           campo="bairro"
           :formNome="formNome"
           :tamanhoMaximo="100"
+          :requerido="requerido"
           v-model="endereco.bairro"
         /> </b-col
       ><b-col xs="12" sm="12" md="12" lg="5" xl="5">
@@ -65,6 +68,7 @@
           campo="cidade"
           :formNome="formNome"
           :tamanhoMaximo="100"
+          :requerido="requerido"
           v-model="endereco.cidade"
         />
       </b-col>
@@ -72,6 +76,7 @@
         <EscolherEstatico
           titulo="UF"
           campoAlvo="uf"
+          :requerido="requerido"
           v-model="endereco.estado"
           :dados="estados"
         /> </b-col
@@ -93,6 +98,10 @@ export default {
   name: "Endereco",
   props: {
     formNome: String,
+    requerido: {
+      type: Boolean,
+      default: false,
+    },
     value: Object,
   },
   components: { Opcoes, Texto, Botao, EscolherEstatico },
@@ -101,33 +110,33 @@ export default {
     return {
       endereco: new Endereco(),
       estados: [
-        { titulo: "AC", valor: "AC" },
-        { titulo: "AL", valor: "AL" },
-        { titulo: "AP", valor: "AP" },
-        { titulo: "AM", valor: "AM" },
-        { titulo: "BA", valor: "BA" },
-        { titulo: "CE", valor: "CE" },
-        { titulo: "DF", valor: "DF" },
-        { titulo: "ES", valor: "ES" },
-        { titulo: "GO", valor: "GO" },
-        { titulo: "MA", valor: "MA" },
-        { titulo: "MT", valor: "MT" },
-        { titulo: "MS", valor: "MS" },
-        { titulo: "MG", valor: "MG" },
-        { titulo: "PA", valor: "PA" },
-        { titulo: "PB", valor: "PB" },
-        { titulo: "PR", valor: "PR" },
-        { titulo: "PE", valor: "PE" },
-        { titulo: "PI", valor: "PI" },
-        { titulo: "RJ", valor: "RJ" },
-        { titulo: "RN", valor: "RN" },
-        { titulo: "RS", valor: "RS" },
-        { titulo: "RO", valor: "RO" },
-        { titulo: "RR", valor: "RR" },
-        { titulo: "SC", valor: "SC" },
-        { titulo: "SP", valor: "SP" },
-        { titulo: "SE", valor: "SE" },
-        { titulo: "TO", valor: "TO" },
+        { conteudo: "AC", id: "AC" },
+        { conteudo: "AL", id: "AL" },
+        { conteudo: "AP", id: "AP" },
+        { conteudo: "AM", id: "AM" },
+        { conteudo: "BA", id: "BA" },
+        { conteudo: "CE", id: "CE" },
+        { conteudo: "DF", id: "DF" },
+        { conteudo: "ES", id: "ES" },
+        { conteudo: "GO", id: "GO" },
+        { conteudo: "MA", id: "MA" },
+        { conteudo: "MT", id: "MT" },
+        { conteudo: "MS", id: "MS" },
+        { conteudo: "MG", id: "MG" },
+        { conteudo: "PA", id: "PA" },
+        { conteudo: "PB", id: "PB" },
+        { conteudo: "PR", id: "PR" },
+        { conteudo: "PE", id: "PE" },
+        { conteudo: "PI", id: "PI" },
+        { conteudo: "RJ", id: "RJ" },
+        { conteudo: "RN", id: "RN" },
+        { conteudo: "RS", id: "RS" },
+        { conteudo: "RO", id: "RO" },
+        { conteudo: "RR", id: "RR" },
+        { conteudo: "SC", id: "SC" },
+        { conteudo: "SP", id: "SP" },
+        { conteudo: "SE", id: "SE" },
+        { conteudo: "TO", id: "TO" },
       ],
     };
   },