@nixweb/nixloc-ui 0.0.62 → 0.0.65

package/package.json

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

package/src/component/forms/EscolherEstatico.vue

@@ -60,6 +60,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    somenteConsulta: {
+      type: Boolean,
+      default: false,
+    },
     dados: Array,
     value: Object,
   },
@@ -84,7 +88,7 @@ export default {
     aoSelecionar(value) {
       this.$emit("input", value);
       let obj = { campoAlvo: this.campoAlvo, valor: value.id };
-      this.insereFiltro(obj);
+      if (!this.somenteConsulta) this.insereFiltro(obj);
     },
     aoPesquisar(value) {},
     rotulo(value) {

package/src/component/forms/Numero.vue

@@ -11,20 +11,9 @@
         class="requerido glyphicon fas fa-exclamation-triangle"
       ></i>
       <slot v-else></slot>
-      <!--  <vue-numeric
-        class="form-control"
-        v-on:keyup.enter.native="apertouEnter"
-        :class="{ 'is-invalid': notificacoes.length > 0 && formSujo }"
-        :placeholder="placeholder"
-        :disabled="desabilitado"
-        separator="."
-        v-bind:precision="1"
-        v-model="valor"
-      ></vue-numeric>-->
       <input
         class="form-control"
         type="number"
-        v-int
         v-model="valor"
         @keyup.enter.prevent="apertouEnter"
       />
@@ -40,13 +29,12 @@
 
 <script>
 import Dica from "../shared/Dica.vue";
-import VueNumeric from "vue-numeric";
 
 import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "Numero",
-  components: { Dica, VueNumeric },
+  components: { Dica },
   props: {
     titulo: String,
     campo: String,
@@ -54,6 +42,11 @@ export default {
     desabilitado: Boolean,
     formNome: String,
     requerido: Boolean,
+    tamanhoMaximo: Number,
+    tipo: {
+      type: String,
+      default: "float",
+    },
     value: Number,
     alterou: Function,
     enter: Function,
@@ -72,7 +65,11 @@ export default {
   },
 
   methods: {
-    ...mapMutations("validation", ["insereValidacao", "removeValidacao"]),
+    ...mapMutations("validation", [
+      "insereValidacao",
+      "removeValidacao",
+      "insereFormSujo",
+    ]),
     valida() {
       this.notificacoes = [];
       if (this.value == 0) return;
@@ -80,6 +77,11 @@ export default {
         var mensagem = `${this.titulo} não pode ser vazio!`;
         this.notificacoes.push(mensagem);
       }
+
+      if (this.valor.toString().length > this.tamanhoMaximo) {
+        var mensagem = `Valor inválido!`;
+        this.notificacoes.push(mensagem);
+      }
     },
     apertouEnter() {
       if (this.enter) this.enter();
@@ -95,8 +97,16 @@ export default {
     },
     valor() {
       this.valida();
+
+      let valor;
+      if (this.tipo === "int") valor = parseInt(this.valor);
+      if (this.tipo === "float") valor = parseFloat(this.valor);
+
+      this.$emit("input", valor);
       this.formSujo = true;
-      this.$emit("input", this.valor);
+      this.insereFormSujo(true);
+
+      this.valor = valor;
     },
     notificacoes() {
       let self = this;

package/src/component/forms/Opcoes.vue

@@ -16,6 +16,9 @@
 
 <script>
 import Dica from "../shared/Dica.vue";
+
+import { mapState, mapMutations } from "vuex";
+
 export default {
   components: { Dica },
   name: "Opcoes",
@@ -25,12 +28,16 @@ export default {
       selecionado: this.value,
     };
   },
+  methods: {
+    ...mapMutations("validation", ["insereFormSujo"]),
+  },
   watch: {
     value() {
       this.selecionado = this.value;
     },
     selecionado() {
       this.$emit("input", this.selecionado);
+      this.insereFormSujo(true);
       if (this.alterou) this.alterou();
     },
   },
@@ -41,3 +48,4 @@ export default {
   margin-top: 5px;
 }
 </style>
+

package/src/component/layout/Menu.vue

@@ -8,7 +8,7 @@
           :class="sessaoDestaque('home')"
         >
           <div class="div-icone lado-a-lado" :style="'background-color:' + corBase">
-            <i class="fa fa-home icone" aria-hidden="true"></i>
+            <i class="fas fa-chart-area icone" aria-hidden="true"></i>
           </div>
           <div class="lado-a-lado titulo">Dashboard</div>
         </a>
@@ -133,7 +133,7 @@ export default {
 .div-icone {
   width: 30px;
   height: 30px;
-  padding-left: 6px;
+  text-align: center;
   padding-top: 3px;
   border-radius: 8px;
 }
@@ -147,6 +147,5 @@ export default {
   margin-left: 15px;
 }
 
-.seta {
-}
+
 </style>

package/src/component/layout/Painel.vue

@@ -32,8 +32,8 @@
           </div>
         </div>
         <br v-show="mostrarBotoes || mostrarPesquisa" />
-        <div class="row" v-show="mostrarBotoes || mostrarPesquisa">
-          <div class="col-8">
+        <div v-show="mostrarBotoes || mostrarPesquisa">
+          <div>
             <div v-show="mostrarPesquisa"><Pesquisa /></div>
           </div>
         </div>

package/src/component/shared/Pesquisa.vue

@@ -1,16 +1,30 @@
 <template>
   <b-row>
-    <b-col xs="12" sm="12" md="12" lg="7" xl="7">
-      <input
-        type="text"
-        name="pesquisar"
-        placeholder="Pesquisar ..."
-        @keyup="verificaLimpaPesquisa()"
-        @keyup.enter.prevent="buscaPesquisa()"
-        v-model="pesquisa"
+    <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+      <div class="margem">
+        <input
+          type="text"
+          name="pesquisar"
+          placeholder="Pesquisar ..."
+          @keyup="verificaLimpaPesquisa()"
+          @keyup.enter.prevent="buscaPesquisa()"
+          v-model="pesquisa.conteudo"
+        />
+      </div>
+    </b-col>
+    <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+      <EscolherEstatico
+        campoAlvo="filtro"
+        :somenteConsulta="true"
+        :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
+        v-model="pesquisa.filtro"
+        :dados="[
+          { conteudo: 'Contém', id: 'contem' },
+          { conteudo: 'Igual', id: 'igual' },
+        ]"
       />
     </b-col>
-    <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+    <b-col xs="4" sm="4" md="4" lg="4" xl="4">
       <div class="div-botao">
         <Botao
           chave="pesquisar"
@@ -35,11 +49,12 @@
 
 <script>
 import Botao from "../forms/Botao";
+import EscolherEstatico from "../forms/EscolherEstatico.vue";
 
 import { mapMutations } from "vuex";
 
 export default {
-  components: { Botao },
+  components: { Botao, EscolherEstatico },
   name: "Pesquisa",
   computed: {
     pesquisa: {
@@ -62,10 +77,11 @@ export default {
     },
     limpaPesquisa() {
       this.limpouPesquisa();
-      this.atualizaCampoPesquisa("");
+      let pesquisa = { conteudo: "", filtro: { conteudo: "contem", id: "contem" } };
+      this.atualizaCampoPesquisa(pesquisa);
     },
     verificaLimpaPesquisa() {
-      if (this.pesquisa.length == 0) this.limpouPesquisa();
+      if (this.pesquisa.conteudo.length == 0) this.limpouPesquisa();
     },
   },
 };
@@ -82,8 +98,12 @@ export default {
   display: inline-block;
 }
 
+.margem {
+  padding-top: 25px;
+}
+
 .div-botao {
-  margin-top: 5px;
+  padding-top: 25px;
 }
 
 ::placeholder {
@@ -105,7 +125,6 @@ input[type="text"] {
   transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
 }
 
-/* When the input field gets focus, change its width to 100% */
 input[type="text"]:focus {
   outline: none;
 }

package/src/component/template/ModeloLista.vue

@@ -84,6 +84,7 @@ export default {
       },
       baseParams: {
         pesquisa: undefined,
+        filtro: "contem",
         paginaAtual: 1,
         totalPorPagina: 10,
       },
@@ -101,7 +102,8 @@ export default {
     });
   },
   beforeDestroy() {
-    this.atualizaCampoPesquisa("");
+    let pesquisa = { conteudo: "", filtro: { conteudo: "contem", id: "contem" } };
+    this.atualizaCampoPesquisa(pesquisa);
   },
   computed: {
     ...mapState("generic", [
@@ -150,18 +152,19 @@ export default {
   },
   watch: {
     metodoExecutadoApi: function (value) {
-      console.log(value);
       if (value === "deleteAllApi" || value === "deleteAllApiErro") {
         this.obterTodos();
       }
     },
     buscouPesquisa: function () {
-      this.baseParams.pesquisa = this.pesquisa;
+      this.baseParams.pesquisa = this.pesquisa.conteudo;
+      this.baseParams.filtro = this.pesquisa.filtro.id;
       this.limpaParams();
       this.obterTodos();
     },
     limpouPesquisa: function () {
       this.baseParams.pesquisa = "";
+      this.baseParams.filtro = "";
       this.limpaParams();
       this.obterTodos();
     },

package/src/store/modulos/generic.js

@@ -28,7 +28,7 @@ export default {
             tipo: undefined,
         },
         ids: undefined,
-        pesquisa: undefined,
+        pesquisa: { conteudo: "", filtro: { conteudo: "contem", id: "contem" } },
         EscolherEstatico: { dataHora: undefined, campoAlvo: undefined, valor: undefined },
         buscouPesquisa: false,
         limpouPesquisa: false,