@nixweb/nixloc-ui 0.0.119 → 0.0.122

package/src/component/shared/FiltroHorizontal.vue

@@ -1,32 +1,32 @@
 <template>
-  <div class="filtro-horizontal">
+  <div class="filter-horizontal">
     <EsconderMostrar
       :botaoMostrar="{
-        titulo: 'Mais filtros',
-        icone: 'fas fa-arrow-alt-circle-down',
-        tipo: 'info',
+        title: 'Mais filtros',
+        icon: 'fas fa-arrow-alt-circle-down',
+        type: 'info',
       }"
       :botaoEsconder="{
-        titulo: 'Menos filtros',
-        icone: 'fas fa-arrow-alt-circle-up',
-        tipo: 'alerta',
+        title: 'Menos filtros',
+        icon: 'fas fa-arrow-alt-circle-up',
+        type: 'warning',
       }"
     >
       <b-row>
         <b-col :sm="mostrarTotalPorPagina ? 10 : 12">
-          <slot name="conteudo-filtro-horizontal"></slot>
+          <slot name="content-filter-horizontal"></slot>
         </b-col>
         <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="mostrarTotalPorPagina">
           <EscolherEstatico
-            titulo="Mostrar"
-            campoAlvo="totalPorPagina"
-            :valorInicial="{ conteudo: '10', id: 10 }"
-            :dados="[
-              { conteudo: '10', id: 10 },
-              { conteudo: '20', id: 20 },
-              { conteudo: '30', id: 30 },
-              { conteudo: '50', id: 50 },
-              { conteudo: '100', id: 100 },
+            title="show"
+            fieldTarget="totalPerPage"
+            :initialValue="{ content: '10', id: 10 }"
+            :data="[
+              { content: '10', id: 10 },
+              { content: '20', id: 20 },
+              { content: '30', id: 30 },
+              { content: '50', id: 50 },
+              { content: '100', id: 100 },
             ]"
           />
         </b-col>
@@ -37,7 +37,7 @@
 
 <script>
 import EsconderMostrar from "./EsconderMostrar.vue";
-import EscolherEstatico from "../forms/EscolherEstatico.vue";
+import EscolherEstatico from "../forms/SelectStatic.vue";
 import Escolher from "../forms/Escolher";
 
 export default {
@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style scoped>
-.filtro-horizontal {
+.filter-horizontal {
   margin-bottom: 5px;
 }
 </style>

package/src/component/shared/LegendaParametro.vue

@@ -2,13 +2,13 @@
   <div>
     <Pesquisa />
     <br />
-    <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
+    <BarraRolagem :minHeight="400" :maxHeight="400">
       <table class="table table-responsive-xs">
         <thead>
           <tr>
-            <th><span class="titulo-cabecalho">Parâmetro</span></th>
-            <th><span class="titulo-cabecalho">Descrição</span></th>
-            <th><span class="titulo-cabecalho">Exemplo</span></th>
+            <th><span class="title-cabecalho">Parâmetro</span></th>
+            <th><span class="title-cabecalho">Descrição</span></th>
+            <th><span class="title-cabecalho">Exemplo</span></th>
           </tr>
         </thead>
         <tbody v-for="(legendaLocal, grupoNome) in agrupado">
@@ -20,7 +20,7 @@
               <span> {{ item.parametro }}</span>
             </td>
             <td>
-              <span> {{ item.descricao }}</span>
+              <span> {{ item.description }}</span>
             </td>
             <td>
               <span class="exemplo"> {{ item.exemplo }}</span>
@@ -55,13 +55,13 @@ export default {
     this.legendaLocal = this.legenda;
   },
   methods: {
-    ...mapMutations("generic", ["removeCarregando"]),
+    ...mapMutations("generic", ["removeLoading"]),
   },
   computed: {
-    ...mapGetters("generic", ["agruparPor"]),
-    ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
+    ...mapGetters("generic", ["groupBy"]),
+    ...mapState("generic", ["search", "buscouPesquisa", "limpouPesquisa"]),
     agrupado() {
-      var lista = this.agruparPor({ array: this.legendaLocal, key: "grupoNome" });
+      var lista = this.groupBy({ array: this.legendaLocal, key: "grupoNome" });
       return lista;
     },
   },
@@ -72,25 +72,25 @@ export default {
       let self = this;
       setTimeout(function () {
         self.legenda.forEach(function (item) {
-          if (self.pesquisa.filtro.conteudo == "igual") {
-            if (item.descricao == self.pesquisa.conteudo) legenda.push(item);
+          if (self.search.filter.content == "igual") {
+            if (item.description == self.search.content) legenda.push(item);
           }
 
-          if (self.pesquisa.filtro.conteudo == "contem") {
-            if (item.descricao.includes(self.pesquisa.conteudo)) legenda.push(item);
+          if (self.search.filter.content == "contem") {
+            if (item.description.includes(self.search.content)) legenda.push(item);
           }
         });
 
         self.legendaLocal = legenda;
 
-        self.removeCarregando(["pesquisar", "limpar"]);
+        self.removeLoading(["pesquisar", "limpar"]);
       }, 300);
     },
     limpouPesquisa: function () {
       let self = this;
       setTimeout(function () {
         self.legendaLocal = self.legenda;
-        self.removeCarregando(["pesquisar", "limpar"]);
+        self.removeLoading(["pesquisar", "limpar"]);
       }, 300);
     },
   },
@@ -107,7 +107,7 @@ export default {
   border-bottom: 0px !important;
 }
 
-.titulo-cabecalho {
+.title-cabecalho {
   font-size: 14px;
   color: #757d8c;
   font-weight: 400;
@@ -120,7 +120,7 @@ export default {
   font-weight: 500;
 }
 
-.div-alerta {
+.div-warning {
   margin-bottom: 20px;
 }
 

package/src/component/shared/{Carregando.vue → Loading.vue}

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <div v-if="tipo == 'bolhas'" :class="{ carregando: centralizado }">
+    <div v-if="type == 'bolhas'" :class="{ carregando: centralizado }">
       <vue-loading
         type="bubbles"
-        :color="cor"
-        :size="{ width: largura + 'px', height: altura + 'px' }"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
       ></vue-loading>
     </div>
-    <div v-if="tipo == 'linha'">
+    <div v-if="type == 'linha'">
       <div class="loader">
         <div class="loader__element"></div>
       </div>
     </div>
     <div :class="{ 'carregando-texto': centralizado }">
       <div>
-        <div class="mensagem">{{ mensagem }}</div>
+        <div class="message">{{ message }}</div>
       </div>
     </div>
   </div>
@@ -24,11 +24,11 @@
 export default {
   name: "Carregando",
   props: {
-    altura: {
+    height: {
       type: Number,
       default: 70,
     },
-    largura: {
+    width: {
       type: Number,
       default: 70,
     },
@@ -36,15 +36,15 @@ export default {
       type: Boolean,
       default: true,
     },
-    cor: {
+    color: {
       type: String,
       default: "#D98621",
     },
-    tipo: {
+    type: {
       type: String,
       default: "bolhas",
     },
-    mensagem: String,
+    message: String,
   },
 };
 </script>
@@ -66,7 +66,7 @@ export default {
   transform: translate(-50%, -50%);
 }
 
-.mensagem {
+.message {
   font-size: 15px;
   margin-top: 5px;
 }

package/src/component/shared/Messages.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
+      <div>
+        <Alert type="danger">
+          <div v-for="notification in storageNotification">
+            {{ notification.message }}
+          </div>
+        </Alert>
+      </div>
+      <b-alert
+        v-show="false"
+        :show="countdown"
+        dismissible
+        variant="danger"
+        @dismissed="countdown = 0"
+        @dismiss-count-down="countdownChanged"
+      >
+      </b-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "../layout/Alert.vue";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: { Alert },
+  name: "Messages",
+  data() {
+    return {
+      maxSeconds: 10,
+      countdown: 10,
+      storageNotification: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["notifications", "modal"]),
+  },
+  watch: {
+    notifications() {
+      if (this.notifications.length > 0) {
+        this.storageNotification = this.notifications;
+        this.countdown = 5;
+      }
+    },
+    countdown() {
+      if (this.countdown === 0) {
+        this.storageNotification = [];
+        this.removeNotificarions();
+      }
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["removeNotificarions"]),
+    countdownChanged(countdown) {
+      this.countdown = countdown;
+    },
+    messages(notifications) {
+      var message = "";
+      notifications.forEach(function (notification) {
+        message += notification.message + " ";
+      });
+
+      return message;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-message {
+  margin-top: 15px;
+}
+
+.div-message-modal {
+  margin-bottom: 5px;
+}
+
+.invalid {
+  color: #f0134d;
+}
+</style>

package/src/component/shared/Paginacao.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <b-pagination
-      v-model="paginacao(chave).paginaAtual"
+      v-model="paginacao(key).currentPage"
       prev-text="Anterior"
       next-text="Próximo"
       align="right"
       :hide-goto-end-buttons="true"
-      :per-page="paginacao(chave).totalPorPagina"
-      :total-rows="totalRegistros"
+      :per-page="paginacao(key).totalPerPage"
+      :total-rows="totalRecords"
     ></b-pagination>
   </div>
 </template>
@@ -18,21 +18,21 @@ import { mapGetters, mapMutations } from "vuex";
 export default {
   name: "Paginacao",
   props: {
-    chave: String,
-    totalRegistros: Number,
+    key: String,
+    totalRecords: Number,
   },
   created() {
-    this.inserePaginacao({
-      chave: this.chave,
-      paginaAtual: 1,
-      totalPorPagina: 10,
+    this.addPagination({
+      key: this.key,
+      currentPage: 1,
+      totalPerPage: 10,
     });
   },
   computed: {
     ...mapGetters("generic", ["paginacao"]),
   },
   methods: {
-    ...mapMutations("generic", ["inserePaginacao"]),
+    ...mapMutations("generic", ["addPagination"]),
   },
 };
 </script>

package/src/component/shared/Progresso.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <progress-bar :size="tamanho" :text="texto" :val="valor" :max="maximo"></progress-bar>
+    <progress-bar :size="size" :text="texto" :val="valor" :max="maximo"></progress-bar>
   </div>
 </template>
 <script>
@@ -15,7 +15,7 @@ export default {
     texto: String,
     valor: Number,
     maximo: Number,
-    tamanho: String,
+    size: String,
   },
 };
 </script>

package/src/component/shared/Registro.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row c-div-total">
     <div class="col-sm-12 text-right">
-      <span class="c-titulo">
+      <span class="c-title">
         Total de
         <b-badge variant="warning">
           <span class="c-total">{{ totalRegistro }}</span>
@@ -29,7 +29,7 @@ export default {
   padding-bottom: 10px;
 }
 
-.c-titulo {
+.c-title {
   font-size: 14px;
 }
 

package/src/component/shared/ResumoTabela.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="badge-lado-a-lado text-center" v-for="item in resumo" :key="item.titulo">
-      <div class="badge-resumo" :class="item.classeCss">
-        <span>{{ item.titulo }}</span>
+    <div class="badge-side-by-side text-center" v-for="item in totalization" :key="item.title">
+      <div class="badge-totalization" :class="item.classeCss">
+        <span>{{ item.title }}</span>
         <span>{{ item.valor }}</span>
       </div>
     </div>
@@ -13,19 +13,19 @@
 export default {
   name: "ResumoTabela",
   props: {
-    resumo: Array,
+    totalization: Array,
   },
 };
 </script>
 
 <style scoped>
-.badge-lado-a-lado {
+.badge-side-by-side {
   display: inline-block;
   margin-right: 3px;
   margin-bottom: 10px;
 }
 
-.badge-resumo {
+.badge-totalization {
   border: 1px solid #dbdee0;
   padding-left: 5px;
   padding-right: 5px;

package/src/component/shared/SalvarCancelar.vue

@@ -1,55 +1,55 @@
 <template>
   <div>
-    <BarraFixa posicao="rodape" v-show="formSujo && !modal.abrir">
+    <FixedBar posicao="rodape" v-show="formDirty && !modal.open">
       <div>
-        <Botao
-          chave="cancelarSalvarCancelar"
+        <Button
+          key="cancelarSalvarCancelar"
           nomeEvento="cancelarSalvarCancelar"
-          titulo="Cancelar"
-          tipo="perigo"
-          tamanho="medio"
-          :clique="cancelar"
+          title="Cancelar"
+          type="danger"
+          size="medium"
+          :clicked="cancelar"
         />
-        <Botao
-          chave="salvarSalvarCancelar"
+        <Button
+          key="salvarSalvarCancelar"
           nomeEvento="salvarSalvarCancelar"
-          titulo="Salvar"
-          tipo="sucesso"
-          :desabilitado="!formValido(formNome)"
-          tamanho="medio"
+          title="Salvar"
+          type="success"
+          :disabled="!isFormValid(formName)"
+          size="medium"
         />
       </div>
-    </BarraFixa>
+    </FixedBar>
   </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 FixedBar from "@nixweb/nixloc-ui/src/component/layout/FixedBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 
 import { mapState, mapMutations, mapGetters } from "vuex";
 
 export default {
   name: "SalvarCancelar",
-  components: { BarraFixa, Botao },
+  components: { FixedBar, Button },
   props: {
-    formNome: String,
+    formName: String,
   },
   computed: {
-    ...mapState("validation", ["formSujo"]),
-    ...mapGetters("validation", ["formValido"]),
+    ...mapState("validation", ["formDirty"]),
+    ...mapGetters("validation", ["isFormValid"]),
     ...mapState("generic", ["modal"]),
   },
   methods: {
-    ...mapMutations("validation", ["insereFormSujo"]),
-    ...mapMutations("generic", ["removeCarregando"]),
+    ...mapMutations("validation", ["addFormDirty"]),
+    ...mapMutations("generic", ["removeLoading"]),
     cancelar() {
-      this.insereFormSujo(false);
-      this.removeCarregando(["cancelarSalvarCancelar"]);
+      this.addFormDirty(false);
+      this.removeLoading(["cancelarSalvarCancelar"]);
     },
   },
   watch: {
-    "modal.abrir": function (valor) {
-      this.insereFormSujo(false);
+    "modal.open": function (valor) {
+      this.addFormDirty(false);
     },
   },
 };

package/src/component/shared/{Pesquisa.vue → Search.vue}

@@ -2,7 +2,7 @@
   <b-row>
     <b-col xs="12" sm="12" md="12" lg="7" xl="6">
       <div class="margem">
-        <div class="moldura">
+        <div class="molded">
           <b-row>
             <b-col sm="9">
               <input
@@ -11,19 +11,19 @@
                 placeholder="Pesquisar ..."
                 @keyup="verificaLimpaPesquisa()"
                 @keyup.enter.prevent="buscaPesquisa()"
-                v-model="pesquisa.conteudo"
+                v-model="search.content"
             /></b-col>
             <b-col sm="3">
               <div class="div-escolher">
                 <EscolherEstatico
-                  campoAlvo="filtro"
-                  :somenteConsulta="true"
-                  :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
-                  v-model="pesquisa.filtro"
-                  :mostrarBorda="false"
-                  :dados="[
-                    { conteudo: 'Contém', id: 'contem' },
-                    { conteudo: 'Igual', id: 'igual' },
+                  fieldTarget="filter"
+                  :onlyQuery="true"
+                  :initialValue="{ content: 'Contém', id: 'contem' }"
+                  v-model="search.filter"
+                  :showBorder="false"
+                  :data="[
+                    { content: 'Contém', id: 'contem' },
+                    { content: 'Igual', id: 'igual' },
                   ]"
                 />
               </div>
@@ -34,21 +34,21 @@
     </b-col>
     <b-col xs="4" sm="4" md="4" lg="4" xl="4">
       <div class="div-botao">
-        <Botao
-          chave="pesquisar"
-          tipo="info"
-          titulo="Buscar"
-          classeIcone="fas fa-search"
-          tamanho="pequeno"
-          :clique="buscaPesquisa"
+        <Button
+          key="pesquisar"
+          type="info"
+          title="Buscar"
+          classIcon="fas fa-search"
+          size="small"
+          :clicked="buscaPesquisa"
         />
-        <Botao
-          chave="limpar"
-          tipo="info"
-          titulo="Limpar"
-          classeIcone="fas fa-broom"
-          tamanho="pequeno"
-          :clique="limpaPesquisa"
+        <Button
+          key="limpar"
+          type="info"
+          title="Limpar"
+          classIcon="fas fa-broom"
+          size="small"
+          :clicked="limpaPesquisa"
         />
       </div>
     </b-col>
@@ -56,27 +56,27 @@
 </template>
 
 <script>
-import Botao from "../forms/Botao";
-import EscolherEstatico from "../forms/EscolherEstatico.vue";
+import Button from "../forms/Button";
+import EscolherEstatico from "../forms/SelectStatic.vue";
 
 import { mapMutations } from "vuex";
 
 export default {
-  components: { Botao, EscolherEstatico },
+  components: { Button, EscolherEstatico },
   name: "Pesquisa",
   computed: {
-    pesquisa: {
+    search: {
       get() {
-        return this.$store.state.generic.pesquisa;
+        return this.$store.state.generic.search;
       },
       set(value) {
-        this.atualizaCampoPesquisa(value);
+        this.updateSearch(value);
       },
     },
   },
   methods: {
     ...mapMutations("generic", [
-      "atualizaCampoPesquisa",
+      "updateSearch",
       "buscouPesquisa",
       "limpouPesquisa",
     ]),
@@ -85,18 +85,18 @@ export default {
     },
     limpaPesquisa() {
       this.limpouPesquisa();
-      let pesquisa = { conteudo: "", filtro: { conteudo: "contem", id: "contem" } };
-      this.atualizaCampoPesquisa(pesquisa);
+      let search = { content: "", filter: { content: "contem", id: "contem" } };
+      this.updateSearch(search);
     },
     verificaLimpaPesquisa() {
-      if (this.pesquisa.conteudo.length == 0) this.limpouPesquisa();
+      if (this.search.content.length == 0) this.limpouPesquisa();
     },
   },
 };
 </script>
 
 <style scoped>
-.icone-pesquisa {
+.icon-search {
   font-size: 20px;
   color: #577696;
   display: inline-block;
@@ -118,7 +118,7 @@ export default {
   color: #b8c4d2;
 }
 
-.moldura {
+.molded {
   width: 100%;
   height: 45px;
   font-size: 14px;