@nixweb/nixloc-ui 0.0.46 → 0.0.49

package/package.json

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

package/src/component/forms/Botao.vue

@@ -81,7 +81,7 @@ export default {
   cursor: pointer;
   border: none;
   border-radius: 40px !important;
-  font-size: 14px;
+  font-size: 13px !important;
   font-weight: 400;
   letter-spacing: 0.5px !important;
   -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);

package/src/component/forms/Senha.vue

@@ -18,7 +18,7 @@
         v-bind:value="value"
         v-on:input="$emit('input', $event.target.value)"
         class="form-control"
-        :class="{ 'requerido': notificacoes.length > 0 && formSujo }"
+        :class="{ requerido: notificacoes.length > 0 && formSujo }"
       />
     </div>
     <div v-if="formSujo">
@@ -64,7 +64,11 @@ export default {
     this.valida();
   },
   methods: {
-    ...mapMutations("validation", ["insereValidacao", "removeValidacao"]),
+    ...mapMutations("validation", [
+      "insereValidacao",
+      "removeValidacao",
+      "insereFormSujo",
+    ]),
     valida() {
       this.notificacoes = [];
 
@@ -88,6 +92,7 @@ export default {
     value() {
       this.valida();
       this.formSujo = true;
+      this.insereFormSujo(true);
     },
     notificacoes() {
       let self = this;

package/src/component/forms/Texto.vue

@@ -23,7 +23,7 @@
         v-bind:value="value"
         v-on:input="$emit('input', $event.target.value)"
         class="form-control"
-        :class="{ 'requerido': notificacoes.length > 0 && formSujo }"
+        :class="{ requerido: notificacoes.length > 0 && formSujo }"
       />
     </div>
     <div v-if="formSujo">
@@ -74,7 +74,11 @@ export default {
     this.valida();
   },
   methods: {
-    ...mapMutations("validation", ["insereValidacao", "removeValidacao"]),
+    ...mapMutations("validation", [
+      "insereValidacao",
+      "removeValidacao",
+      "insereFormSujo",
+    ]),
     valida() {
       this.notificacoes = [];
 
@@ -109,6 +113,7 @@ export default {
     value() {
       this.valida();
       this.formSujo = true;
+      this.insereFormSujo(true);
     },
     notificacoes() {
       let self = this;

package/src/component/forms/Toggle.vue

@@ -12,8 +12,9 @@
           uncheckedText="Não"
           :checkedBg="cor"
           uncheckedBg="lightgrey"
+          :disabled="desabilitado"
           :value="valor"
-          @click="valor = !valor"
+          @click="clique"
         />
       </b-col>
     </b-row>
@@ -31,6 +32,10 @@ export default {
   props: {
     titulo: String,
     cor: String,
+    desabilitado: {
+      type: Boolean,
+      default: false,
+    },
     params: Object,
     alterou: Function,
     value: Boolean,
@@ -43,8 +48,9 @@ export default {
   created() {
     this.valor = this.value;
   },
-  watch: {
-    valor() {
+  methods: {
+    clique() {
+      this.valor = !this.valor;
       this.$emit("input", this.valor);
       if (this.alterou) this.alterou(this.params);
     },

package/src/component/layout/Menu.vue

@@ -8,8 +8,8 @@
         <ul v-for="item in menu" :key="item.titulo">
           <li>
             <span>{{ item.titulo }}</span>
-            <ul v-for="primeiroNivel in item.primeiroNivel" :key="primeiroNivel.titulo">
-              <li>
+            <ul>
+              <li v-for="primeiroNivel in item.primeiroNivel" :key="primeiroNivel.titulo">
                 <span
                   :class="{ titulo: primeiroNivel.rotaDestino != '' }"
                   @click="navegarPara(primeiroNivel.rotaDestino)"

package/src/component/shared/SalvarCancelar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <BarraFixa posicao="rodape" v-show="formSujo">
+      <div>
+        <Botao
+          chave="cancelarSalvarCancelar"
+          nomeEvento="cancelarSalvarCancelar"
+          titulo="Cancelar"
+          tipo="perigo"
+          tamanho="medio"
+          :clique="cancelar"
+        />
+        <Botao
+          chave="salvarSalvarCancelar"
+          nomeEvento="salvarSalvarCancelar"
+          titulo="Salvar"
+          tipo="sucesso"
+          :desabilitado="!formValido(formNome)"
+          tamanho="medio"
+        />
+      </div>
+    </BarraFixa>
+  </div>
+</template>
+<script>
+import BarraFixa from "@nixweb/nixloc-ui/src/component/layout/BarraFixa.vue";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SalvarCancelar",
+  components: { BarraFixa, Botao },
+  props: {
+    formNome: String,
+  },
+  computed: {
+    ...mapState("validation", ["formSujo"]),
+    ...mapGetters("validation", ["formValido"]),
+  },
+  methods: {
+    ...mapMutations("validation", ["insereFormSujo"]),
+    ...mapMutations("generic", ["removeCarregando"]),
+    cancelar() {
+      this.insereFormSujo(false);
+      this.removeCarregando(["cancelarSalvarCancelar"]);
+    },
+  },
+};
+</script>

package/src/component/template/InserirEditarModeloView.vue

@@ -14,16 +14,17 @@
         <slot name="conteudo-principal"></slot>
       </div>
     </Painel>
+    <SalvarCancelar :formNome="painel.formNome" />
   </div>
 </template>
 
 <script>
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel";
-
+import SalvarCancelar from "@nixweb/nixloc-ui/src/component/shared/SalvarCancelar";
 
 export default {
   name: "InserirEditarModeloView",
-  components: { Painel },
+  components: { Painel, SalvarCancelar },
   props: {
     painel: Object,
   },

package/src/store/modulos/validation.js

@@ -1,6 +1,7 @@
 export default {
     namespaced: true,
     state: {
+        formSujo: false,
         validacao: [],
         reiniciaForm: {
             nome: undefined,
@@ -27,6 +28,9 @@ export default {
         reiniciaValidacao: (state, formNome) => {
             state.reiniciaForm.dataHora = new Date();
             state.reiniciaForm.nome = formNome;
+        },
+        insereFormSujo: (state, formSujo) => {
+            state.formSujo = formSujo;
         }
     },
 }