@nixweb/nixloc-ui 0.0.37 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.37",
+  "version": "0.0.41",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -10,20 +10,22 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap-vue": "^2.0.0-rc.11",
     "@babel/polyfill": "^7.2.5",
+    "bootstrap-vue": "^2.0.0-rc.11",
+    "sass-loader": "^12.4.0",
     "vodal": "^2.4.0",
     "vue-color": "^2.7.0",
-    "vue-the-mask": "^0.11.1",
-    "vue2-datepicker": "^2.13.0",
-    "vue2-editor": "^2.6.6",
+    "vue-js-toggle-button": "^1.3.0",
     "vue-loading-template": "^1.3.0",
     "vue-moment": "^4.0.0",
-    "vue-moment-datepicker": "^1.0.5",
     "vue-multiselect": "^2.1.0",
     "vue-numeric": "^2.4.1",
+    "vue-the-mask": "^0.11.1",
     "vue-toasted": "^1.1.28",
-    "vue-upload-file": "^1.1.0"
+    "vue-toggles": "^1.1.4",
+    "vue-upload-file": "^1.1.0",
+    "vue2-datepicker": "^2.13.0",
+    "vue2-editor": "^2.6.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -61,4 +63,4 @@
     "type": "git",
     "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
   }
-}
+}

package/src/component/forms/Botao.vue

@@ -17,13 +17,17 @@
       :disabled="desabilitado"
       @click="executar()"
     >
-      <i :class="classeIcone" v-if="!carregando(this.chave)"></i>
-      <span class="titulo" v-if="!carregando(this.chave)">{{ titulo }}</span>
+      <i
+        class="titulo"
+        :class="classeIcone"
+        v-if="!carregando(this.chave) && classeIcone"
+      ></i>
+      <span v-if="!carregando(this.chave)">{{ titulo }}</span>
       <vue-loading
         v-if="carregando(this.chave)"
         type="bubbles"
         color="#fff"
-        :size="{ width: '20px', height: '20px' }"
+        :size="{ width: '26px', height: '26px' }"
       ></vue-loading>
     </button>
   </div>
@@ -69,7 +73,7 @@ export default {
 }
 
 .titulo {
-  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .botao {
@@ -79,6 +83,7 @@ export default {
   border-radius: 40px !important;
   font-size: 14px;
   font-weight: 400;
+  letter-spacing: 0.5px !important;
   -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
   -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);

package/src/component/forms/EscolherEstatico.vue

@@ -11,6 +11,7 @@
         :options="dados"
         v-model.trim="valorAtual"
         :custom-label="rotulo"
+        :disabled="desabilitado"
         placeholder
         :showLabels="true"
         :noResult="false"
@@ -55,6 +56,10 @@ export default {
     formNome: String,
     campoAlvo: String,
     valorInicial: Object,
+    desabilitado: {
+      type: Boolean,
+      default: false,
+    },
     dados: Array,
     value: Object,
   },
@@ -78,20 +83,15 @@ export default {
     aoAbrir() {},
     aoSelecionar(value) {
       this.$emit("input", value);
-      let obj = { campoAlvo: this.campoAlvo, valor: value.valor };
+      let obj = { campoAlvo: this.campoAlvo, valor: value.id };
       this.insereFiltro(obj);
-
-      // antigo
-      this.$store.commit("ADICIONA_TOTAL_REGISTRO_POR_PAGINA", obj.valor);
-      this.$store.commit("CARREGANDO_FULL", true);
-      eventBus.$emit("aoSelecionarTotalRegistroPorPagina", obj.valor);
     },
     aoPesquisar(value) {},
     rotulo(value) {
-      return `${value.titulo}`;
+      return `${value.conteudo}`;
     },
     limpaEscolherEstatico() {
-      let objLimpo = { titulo: "", valor: "" };
+      let objLimpo = { conteudo: "", id: "" };
       this.valorAtual = objLimpo;
       this.$emit("input", objLimpo);
       this.$refs.multiselect.deactivate();
@@ -104,8 +104,11 @@ export default {
     },
   },
   watch: {
-    "value.valor": function () {
-      this.valorAtual = { titulo: this.value.titulo, conteudo: this.value.valor };
+    "value.id": function () {
+      this.valorAtual = { id: this.value.id, conteudo: this.value.conteudo };
+    },
+    "valorInicial.id": function () {
+      this.valorAtual = { id: this.value.id, conteudo: this.value.conteudo };
     },
   },
 };

package/src/component/forms/Opcoes.vue

@@ -4,7 +4,11 @@
     <Dica :campo="campo" :formNome="formNome" />
     <div class="opcoes">
       <b-form-group>
-        <b-form-radio-group v-model="selecionado" :options="opcoes"></b-form-radio-group>
+        <b-form-radio-group
+          v-model="selecionado"
+          :options="opcoes"
+          :disabled="desabilitado"
+        ></b-form-radio-group>
       </b-form-group>
     </div>
   </div>
@@ -15,7 +19,7 @@ import Dica from "../shared/Dica.vue";
 export default {
   components: { Dica },
   name: "Opcoes",
-  props: ["titulo", "opcoes", "value", "alterou", "campo", "formNome"],
+  props: ["titulo", "opcoes", "value", "alterou", "campo", "formNome", "desabilitado"],
   data() {
     return {
       selecionado: this.value,

package/src/component/forms/Toggle.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <VueToggles
+      height="30"
+      width="90"
+      checkedText="On"
+      uncheckedText="Off"
+      checkedBg="#b4d455"
+      uncheckedBg="lightgrey"
+      :value="value"
+      @click="value = !value"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Toggle",
+};
+</script>

package/src/component/layout/BarraFixa.vue

@@ -30,7 +30,6 @@ export default {
 
 <style scoped>
 .barra {
-  margin-left: 100px;
   background-color: white;
   position: fixed;
   width: 100%;

package/src/component/layout/Menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="page">
     <div id="header" :style="'background-color:' + corTopo">
-      <a href="#menu"><span></span></a>
+      <!-- <a href="#menu"><span></span></a> -->
     </div>
     <nav id="menu">
       <div id="panel-menu">
@@ -32,7 +32,6 @@
           </li>
         </ul>
       </div>
-
       <ul id="panel-account" data-mm-title="Conta">
         <li v-for="item in conta" :key="item.titulo">
           <span class="titulo" @click="navegarPara(item.rotaDestino)">{{
@@ -62,27 +61,26 @@ export default {
     new Mmenu(
       document.querySelector("#menu"),
       {
+        backButton: {
+          close: true,
+        },
         setSelected: {
-          hover: true,
-          parent: true,
+          hover: false,
+          parent: false,
         },
         counters: {
           add: true,
         },
+        iconbar: {
+          use: "(min-width: 450px)",
+          top: ['<a href="#/"><span class="fas fa-bars"></span></a>'],
+        },
         searchfield: {
           add: true,
           placeholder: "Pesquisar",
-          splash: "<p>O que você está procurando?</p>",
+          splash: "<p>Digite sua pesquisa</p>",
           title: "Pesquisar",
-        },
-        iconbar: {
-          use: "(min-width: 450px)",
-          top: ['<a href="/dashboard"><span class="fa fa-home"></span></a>'],
-          /*  bottom: [
-            '<a href="#/"><span class="fa fa-twitter"></span></a>',
-            '<a href="#/"><span class="fa fa-facebook"></span></a>',
-            '<a href="#/"><span class="fa fa-youtube"></span></a>',
-          ],*/
+          noResults: "Nenhum resultado",
         },
         iconPanels: {
           add: true,
@@ -93,8 +91,7 @@ export default {
             use: "(min-width: 450px)",
           },
           expanded: {
-            use: "(min-width: 992px)",
-            initial: "closed",
+            use: "(min-width: 1000px)",
           },
         },
         navbars: [
@@ -104,17 +101,13 @@ export default {
           {
             type: "tabs",
             content: [
-              '<a href="#panel-menu"><i class="fa fa-bars"></i> <span style="margin-left:5px"> Menu</span></a>',
+              '<a href="#panel-menu"><i class="fas fa-ellipsis-h"></i> <span style="margin-left:5px"> Menu</span></a>',
               '<a href="#panel-account"><i class="fa fa-user"></i> <span style="margin-left:5px"> Conta</span></a>',
             ],
           },
           {
             content: ["prev", "breadcrumbs", "close"],
           },
-          {
-            position: "bottom",
-            content: [],
-          },
         ],
       },
       {

package/src/component/layout/Painel.vue

@@ -25,19 +25,19 @@
             </div>
           </div>
         </div>
-        <br />
+        <br v-show="mostrarBotoes"/>
         <div class="row" v-show="mostrarBotoes">
           <div class="col-12" v-show="mostrarBotoes">
             <slot name="conteudo-botoes"></slot>
           </div>
         </div>
-        <br />
+        <br v-show="mostrarBotoes || mostrarPesquisa"/>
         <div class="row" v-show="mostrarBotoes || mostrarPesquisa">
           <div class="col-8">
             <div v-show="mostrarPesquisa"><Pesquisa /></div>
           </div>
         </div>
-        <br />
+        <br v-show="mostrarPesquisa"/>
         <div>
           <slot name="conteudo-principal"></slot>
         </div>

package/src/component/shared/EsconderMostrar.vue

@@ -96,9 +96,6 @@ export default {
         self.mostrarCollapse = true;
       }, 200);
       this.removeCarregandoBotao();
-
-      // antigo
-      eventBus.$emit("maisFiltros");
     },
     esconder() {
       let self = this;
@@ -106,9 +103,6 @@ export default {
         self.mostrarCollapse = false;
       }, 200);
       this.removeCarregandoBotao();
-
-      // antigo
-      eventBus.$emit("esconderFiltros");
     },
     removeCarregandoBotao() {
       this.removeCarregando(["mostrarCollapse", "esconderCollapse"]);

package/src/component/shared/FiltroHorizontal.vue

@@ -20,13 +20,13 @@
           <EscolherEstatico
             titulo="Mostrar"
             campoAlvo="totalPorPagina"
-            :valorInicial="{ titulo: '10', valor: 10 }"
+            :valorInicial="{ conteudo: '10', id: 10 }"
             :dados="[
-              { titulo: '10', valor: 10 },
-              { titulo: '20', valor: 20 },
-              { titulo: '30', valor: 30 },
-              { titulo: '50', valor: 50 },
-              { titulo: '100', valor: 100 },
+              { conteudo: '10', id: 10 },
+              { conteudo: '20', id: 20 },
+              { conteudo: '30', id: 30 },
+              { conteudo: '50', id: 50 },
+              { conteudo: '100', id: 100 },
             ]"
           />
         </b-col>

package/src/component/shared/Paginacao.vue

@@ -36,3 +36,18 @@ export default {
   },
 };
 </script>
+
+<style>
+
+.page-item {
+  font-size: 13px !important;
+}
+
+.page-item.active .page-link {
+  font-size: 13px !important;
+  z-index: 3 !important;
+  color: #fff !important;
+  background-color: #d98621 !important;
+  border-color: #d98621 !important;
+}
+</style>

package/src/component/shared/Registro.vue

@@ -6,7 +6,7 @@
         <b-badge variant="warning">
           <span class="c-total">{{ totalRegistro }}</span>
         </b-badge>
-        <span>registros</span>
+        <span class="registros">registros</span>
       </span>
     </div>
   </div>
@@ -37,4 +37,9 @@ export default {
   color: white;
   font-size: 14px;
 }
+
+.registros{
+  margin-left: 5px;
+}
+
 </style>

package/src/component/shared/Tabela.vue

@@ -147,7 +147,7 @@ export default {
     ...mapActions("generic", ["pdfApi"]),
     selecionar() {
       this.adicionaSelecao([]);
-      if (!this.selecionarTodos) {
+      if (this.selecionarTodos) {
         for (let i in this.dados) {
           this.selecionados.push(this.dados[i].id);
         }
@@ -196,11 +196,6 @@ export default {
 </script>
 
 <style scoped>
-
-table {
-    border-collapse: initial !important;
-}
-
 table tbody tr td {
   max-width: 350px;
 }
@@ -225,10 +220,6 @@ table tbody tr td {
   font-weight: bold;
 }
 
-.titulo-margem {
-  padding-bottom: 5px;
-}
-
 .tabela-numero {
   font-size: 16px;
   font-weight: bold;

package/src/component/template/InserirEditarModeloView.vue

@@ -18,7 +18,8 @@
 </template>
 
 <script>
-import Painel from "@/component/layout/Painel";
+import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel";
+
 
 export default {
   name: "InserirEditarModeloView",

package/src/component/template/ModeloLista.vue

@@ -13,11 +13,11 @@
       </b-row>
       <b-row>
         <b-col sm="6">
-          <ResumoTabela :resumo="result.resumo" />
+          <ResumoTabela :resumo="conteudo.resumo" />
         </b-col>
 
         <b-col sm="6">
-          <Registro :totalRegistro="result.totalRegistros" />
+          <Registro :totalRegistro="conteudo.totalRegistros" />
         </b-col>
       </b-row>
       <BarraFixa posicao="topo" v-show="selecionados.length > 0">
@@ -34,7 +34,7 @@
       ></BarraFixa>
       <Tabela
         :cabecalhoTabela="modeloLista.cabecalhoTabela"
-        :dados="result.dados"
+        :dados="conteudo.dados"
         :mostrarChecks="modeloLista.mostrarChecks"
       >
         <div slot="conteudo-botoes-tabela">
@@ -43,7 +43,7 @@
       </Tabela>
     </div>
     <br />
-    <Paginacao chave="modeloLista" :totalRegistros="result.totalRegistros" />
+    <Paginacao chave="modeloLista" :totalRegistros="conteudo.totalRegistros" />
   </div>
 </template>
 
@@ -78,7 +78,7 @@ export default {
   },
   data() {
     return {
-      result: {
+      conteudo: {
         dados: [],
         totalRegistros: 0,
       },
@@ -130,7 +130,7 @@ export default {
       let obj = { ...this.baseParams, ...this.propsParams };
       let params = { url: this.modeloLista.urlGetApi, obj: obj };
       this.getApi(params).then((response) => {
-        this.result = response;
+        this.conteudo = response.conteudo;
         this.removeCarregando(["painel", "pesquisar", "limpar"]);
       });
     },
@@ -151,7 +151,7 @@ export default {
   watch: {
     metodoExecutadoApi: function (value) {
       if (value != "obterTodosApi" && value != "" && value != "escolherApi") {
-        this.obterTodos();
+        // this.obterTodos();
       }
     },
     buscouPesquisa: function () {

package/src/store/modulos/generic.js

@@ -202,7 +202,7 @@ export default {
                 params: params.obj,
                 headers: new Token().tokenHeaders(),
             })
-                .then((response) => {
+                .then((response) => {                  
                     if (response.data.sucesso) {
                         context.commit('insereMetodoExecutadoApi', params.MetodoExecutadoApi);
                         context.commit('removeNotificacao');