@nixweb/nixloc-ui 0.0.62 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "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/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,
       },
@@ -150,18 +151,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,