@nixweb/nixloc-ui 0.0.111 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.111",
+  "version": "0.0.114",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -13,6 +13,7 @@
     "@babel/polyfill": "^7.2.5",
     "@ckeditor/ckeditor5-vue2": "^2.0.0",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "ckeditor5-custom-build": "file:ckeditor5",
     "sass-loader": "^12.4.0",
     "v-runtime-template": "^1.10.0",
     "vodal": "^2.4.0",

package/src/component/layout/Moldura.vue

@@ -10,7 +10,7 @@ export default {
   props: {
     bordaArredondada: {
       type: Number,
-      default: 3,
+      default: 5,
     },
   },
 };

package/src/component/layout/Wizard.vue

@@ -1,24 +1,213 @@
 <template>
   <div>
-    <ul class="wizard wizard-steps-3">
-      <li>
-        <div class="step">
-          <span>
-            <i class="fas fa-check"></i>
-          </span>
+    <div class="wrapper-stepper">
+      <div class="stepper">
+        <div class="stepper-progress" v-if="mostrarPassos">
+          <div class="stepper-progress-bar" :style="'width:' + stepperProgress"></div>
         </div>
-        <div>
-          <span>Produto(s)</span>
+
+        <div
+          class="stepper-item"
+          v-if="mostrarPassos"
+          :class="{ current: step == item, success: step > item }"
+          v-for="item in etapa"
+          :key="item"
+        >
+          <div class="stepper-item-counter">
+            <img
+              class="icon-success"
+              src="https://www.seekpng.com/png/full/1-10353_check-mark-green-png-green-check-mark-svg.png"
+              alt=""
+            />
+            <span class="number">
+              {{ item }}
+            </span>
+          </div>
+          <div class="stepper-item-title text-center">{{ legenda[item - 1] }}</div>
+        </div>
+      </div>
+
+      <div class="stepper-content" v-for="item in etapa" :key="item">
+        <div class="stepper-pane" v-if="step == item">
+          <slot :name="step"></slot>
         </div>
-      </li>
-    </ul>
+      </div>
+      <div class="controls">
+        <button class="btn" @click="step--" v-if="step != 1">Anterior</button>
+        <button
+          v-if="step < etapa"
+          class="btn btn--green-1"
+          @click="step++"
+          :disabled="!formValido(formNome[step - 1])"
+        >
+          Próximo
+        </button>
+        <div class="slot-final" v-else>
+          <slot name="finalizar"></slot>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
 export default {
   name: "Wizard",
+  props: {
+    etapa: Number,
+    legenda: Array,
+    formNome: Array,
+    mostrarPassos: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      step: 1,
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["formValido"]),
+    stepperProgress() {
+      return (100 / this.etapa) * (this.step - 1) + "%";
+    },
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.tx-green-1 {
+  color: #75cc65;
+}
+.wrapper-stepper {
+  background-color: #fff;
+  padding: 0px;
+  border-radius: 32px;
+  box-shadow: rgba(0, 0, 0, 0.09);
+}
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 0;
+  margin-bottom: 24px;
+  margin-left: 80px;
+  margin-right: 80px;
+}
+.stepper-progress {
+  position: absolute;
+  background-color: #dddada;
+  height: 1px;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.stepper-progress-bar {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 0%;
+  background-color: #75cc65;
+  transition: all 500ms ease;
+}
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #c5c5c5;
+  transition: all 500ms ease;
+}
+.stepper-item-counter {
+  height: 38px;
+  width: 38px;
+  display: grid;
+  place-items: center;
+  background-color: #fff;
+  border-radius: 100%;
+  border: 1px solid #c5c5c5;
+  position: relative;
+}
+.stepper-item-counter .icon-success {
+  position: absolute;
+  opacity: 0;
+  transform: scale(0);
+  width: 20px;
+  transition: all 500ms ease;
+}
+.stepper-item-counter .number {
+  font-size: 15px;
+  transition: all 500ms ease;
+}
+.stepper-item-title {
+  position: absolute;
+  padding-top: 40px;
+  width: 40px;
+  margin-left: -16px;
+}
+.stepper-item.success .stepper-item-counter {
+  border-color: #75cc65;
+  background-color: #c8ebc1;
+  color: #fff;
+}
+.stepper-item.success .stepper-item-counter .icon-success {
+  opacity: 1;
+  transform: scale(1);
+}
+.stepper-item.success .stepper-item-counter .number {
+  opacity: 0;
+  transform: scale(0);
+}
+.stepper-item.success .stepper-item-title {
+  color: #75cc65;
+}
+.stepper-item.current .stepper-item-counter {
+  border-color: #4ab4e2;
+  background-color: #4ab4e2;
+  color: #fff;
+}
+.stepper-item.current .stepper-item-title {
+  color: #818181;
+}
+.stepper-pane {
+  color: #333;
+  margin: 40px 0;
+}
+.controls {
+  display: flex;
+}
+.btn {
+  padding: 8px 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 40px !important;
+  font-size: 13px !important;
+  font-weight: normal;
+  font-style: normal !important;
+  letter-spacing: 1px !important;
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+  -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%);
+}
+.btn:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.btn--green-1 {
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+  margin-left: auto;
+}
+
+.slot-final {
+  margin-left: auto;
+}
+</style>

package/src/component/shared/CodigoEditor.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <button @click="aplicar()">Aplicar</button>
     <AceEditor
       v-model="codigo"
       lang="html"
@@ -20,11 +19,26 @@
         showGutter: true,
       }"
     />
+    <div class="aplicar">
+      <b-row>
+        <b-col class="text-right">
+          <Botao
+            chave="aplicarCodigo"
+            tipo="primario"
+            titulo="Aplicar"
+            classeIcone="far fa-code"
+            tamanho="pequeno"
+            :clique="aplicar"
+          />
+        </b-col>
+      </b-row>
+    </div>
   </div>
 </template>
 
 <script>
 import AceEditor from "vuejs-ace-editor";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
 
 import { mapMutations } from "vuex";
 
@@ -32,6 +46,7 @@ export default {
   name: "CodigoEditor",
   components: {
     AceEditor,
+    Botao,
   },
   data() {
     return {
@@ -52,12 +67,15 @@ export default {
     this.codigo = this.documentoHtml;
   },
   methods: {
-    ...mapMutations("generic", ["atualizaDocumentoHtml"]),
+    ...mapMutations("generic", [
+      "atualizaDocumentoHtml",
+      "fecharModal",
+      "removeCarregando",
+    ]),
     aplicar() {
       this.atualizaDocumentoHtml(this.codigo);
-    },
-    dataSumit() {
-      //code here
+      this.fecharModal("codigo");
+      this.removeCarregando(["aplicarCodigo"]);
     },
     editorInit: function () {
       require("brace/ext/language_tools"); //language extension prerequsite...
@@ -70,3 +88,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.aplicar {
+  margin-top: 10px;
+}
+</style>

package/src/component/shared/DocumentoPreview.vue

@@ -5,6 +5,8 @@
 <script>
 import VRuntimeTemplate from "v-runtime-template";
 
+import { mapGetters } from "vuex";
+
 export default {
   name: "HtmlPreview",
   components: {
@@ -15,16 +17,6 @@ export default {
     dados: Object,
   },
   methods: {
-    agruparPor(array, key) {
-      const result = {};
-      array.forEach((item) => {
-        if (!result[item[key]]) {
-          result[item[key]] = [];
-        }
-        result[item[key]].push(item);
-      });
-      return result;
-    },
     somaGrupo(grupoNome) {
       let total = "";
       this.dados.produto.forEach((x) => {
@@ -34,10 +26,10 @@ export default {
     },
   },
   computed: {
+    ...mapGetters("generic", ["agruparPor"]),
     produtoAgrupado() {
-      return this.agruparPor(this.dados.produto, "grupoNome");
+      return this.agruparPor({ array: this.dados.produto, key: "grupoNome" });
     },
   },
 };
 </script>
-

package/src/component/shared/LegendaParametro.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="div-alerta">
+      <Alerta tipo="info">
+        <span>
+          Utilize os parâmetros para que as informações sejam carregadas de forma
+          dinâmicas!</span
+        >
+      </Alerta>
+    </div>
+    <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>
+        </tr>
+      </thead>
+      <tbody v-for="(legenda, grupoNome) in agrupado">
+        <td class="grupo" colspan="8">
+          <div>{{ grupoNome }}</div>
+        </td>
+        <tr v-for="item in legenda">
+          <td>
+            <span> {{ item.parametro }}</span>
+          </td>
+          <td>
+            <span> {{ item.descricao }}</span>
+          </td>
+          <td>
+            <span> {{ item.exemplo }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "LegendaParametro",
+  components: {
+    Alerta,
+  },
+  data() {
+    return {
+      legenda: [
+        {
+          grupoNome: "Locação",
+          parametro: "{{d.l.n}}",
+          descricao: "Número da Locação",
+          exemplo: "200",
+        },
+        {
+          grupoNome: "Locação",
+          parametro: "{{d.l.dA}}",
+          descricao: "Número da Locação",
+          exemplo: "200",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["agruparPor"]),
+    agrupado() {
+      var teste = this.agruparPor({ array: this.legenda, key: "grupoNome" });
+      console.log(teste);
+      return teste;
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.titulo-cabecalho {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.grupo {
+  background-color: #fafafc;
+}
+
+.div-alerta {
+  margin-bottom: 20px;
+}
+</style>

package/src/component/shared/Tabela.vue

@@ -258,7 +258,7 @@ tr:hover {
 }
 
 .link {
-  color: darkblue;
+  color: #3F529B;
   font-size: 15px;
   font-weight: 400;
   cursor: pointer;

package/src/component/template/ModeloDocumentoView.vue

@@ -39,11 +39,11 @@
                 <b-col class="text-right" sm="6">
                   <div class="lado-a-lado">
                     <Botao
-                      chave="abrirConfiguracao"
+                      chave="abrirLegenda"
                       tipo="info"
-                      classeIcone="fas fa-tools"
+                      classeIcone="fas fa-book-reader"
                       tamanho="pequeno"
-                      :clique="abrirConfiguracao"
+                      :clique="abrirLegenda"
                     />
                   </div>
                   <div class="lado-a-lado">
@@ -72,15 +72,13 @@
           <Modal titulo="Salvar" :largura="500" v-show="mostrarModal('salvarDocumento')">
             <slot></slot>
           </Modal>
-          <Modal titulo="Configuração" :largura="700" v-if="mostrarModal('configuracao')">
-            <BarraRolagem :alturaMinima="200" :alturaMaxima="400">
-              <ConfiguracaoTabela />
+          <Modal titulo="Parâmetros" :largura="900" v-if="mostrarModal('legenda')">
+            <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
+              <LegendaParametro />
             </BarraRolagem>
           </Modal>
           <Modal titulo="Editor de Código" :largura="900" v-if="mostrarModal('codigo')">
-            <BarraRolagem :alturaMinima="200" :alturaMaxima="400">
-              <CodigoEditor v-if="modal.abrir" />
-            </BarraRolagem>
+            <CodigoEditor v-if="modal.abrir" />
           </Modal>
           <Modal titulo="Visualizar" :largura="1100" v-if="mostrarModal('visualizar')">
             <div v-if="modal.abrir">
@@ -122,7 +120,7 @@ import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel";
 import DocumentoEditor from "@nixweb/nixloc-ui/src/component/shared/DocumentoEditor.vue";
 import DocumentoPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentoPreview.vue";
 import CodigoEditor from "@nixweb/nixloc-ui/src/component/shared/CodigoEditor.vue";
-import ConfiguracaoTabela from "@nixweb/nixloc-ui/src/component/shared/ConfiguracaoTabela.vue";
+import LegendaParametro from "@nixweb/nixloc-ui/src/component/shared/LegendaParametro.vue";
 import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
 import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
@@ -142,7 +140,7 @@ export default {
     DocumentoEditor,
     DocumentoPreview,
     CodigoEditor,
-    ConfiguracaoTabela,
+    LegendaParametro,
     Moldura,
     Botao,
     Modal,
@@ -180,9 +178,9 @@ export default {
     fazerCopia() {
       this.insereEvento({ nome: "fazerCopia" });
     },
-    abrirConfiguracao() {
-      this.abrirModal("configuracao");
-      this.removeCarregando(["abrirConfiguracao"]);
+    abrirLegenda() {
+      this.abrirModal("legenda");
+      this.removeCarregando(["abrirLegenda"]);
     },
     abrirCodigo() {
       this.abrirModal("codigo");

package/src/component/value-objects/DadosContato.vue

@@ -8,6 +8,7 @@
           :formNome="formNome"
           :mascara="['(##) ####-####', '(##) #####-####']"
           :tamanhoMaximo="20"
+          :requerido="requerido"
           v-model="dadosContato.telefone"
         />
       </b-col>
@@ -18,6 +19,7 @@
           :formNome="formNome"
           mascara=""
           :tamanhoMaximo="100"
+          :requerido="requerido"
           v-model="dadosContato.site"
         />
       </b-col>
@@ -28,6 +30,7 @@
           :formNome="formNome"
           mascara=""
           :tamanhoMaximo="100"
+          :requerido="requerido"
           v-model="dadosContato.email"
         />
       </b-col>
@@ -47,6 +50,10 @@ export default {
   name: "DadosContato",
   props: {
     formNome: String,
+    requerido: {
+      type: Boolean,
+      default: false,
+    },
     value: Object,
   },
   components: { Opcoes, Texto, Botao },
@@ -55,6 +62,9 @@ export default {
       dadosContato: new DadosContato(),
     };
   },
+  mounted() {
+    if (this.value.telefone != undefined) this.dadosContato = this.value;
+  },
   methods: {
     carregaDados(dados) {
       this.dadosContato.telefone = dados.telefone;

package/src/component/value-objects/DadosPessoa.vue

@@ -21,6 +21,7 @@
           :formNome="formNome"
           :mascara="['##.###.###/####-##', '###.###.###-##']"
           :tamanhoMaximo="30"
+          :requerido="requerido"
           v-model="dadosPessoa.cnpjCpf"
           ><div class="glyphicon margem-botao">
             <Botao
@@ -40,6 +41,7 @@
           campo="inscricaoEstadualRg"
           :formNome="formNome"
           :tamanhoMaximo="50"
+          :requerido="requerido"
           v-model="dadosPessoa.inscricaoEstadualRg"
         />
       </b-col>
@@ -50,6 +52,7 @@
           campo="inscricaoMunicipal"
           :formNome="formNome"
           :tamanhoMaximo="50"
+          :requerido="requerido"
           v-model="dadosPessoa.inscricaoMunicipal"
         />
       </b-col>
@@ -92,15 +95,21 @@ export default {
   name: "DadosPessoa",
   props: {
     formNome: String,
+    requerido: {
+      type: Boolean,
+      default: false,
+    },
     value: Object,
   },
   components: { Opcoes, Texto, Botao },
-
   data() {
     return {
       dadosPessoa: new DadosPessoa(),
     };
   },
+  mounted() {
+    if (this.value.razaoSocialNome != undefined) this.dadosPessoa = this.value;
+  },
   methods: {
     ...mapMutations("generic", ["insereEvento", "insereNotificacao", "removeCarregando"]),
     buscarCnpjReceita() {

package/src/component/value-objects/Endereco.vue

@@ -140,6 +140,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    if (this.value.cep != undefined) this.endereco = this.value;
+  },
   computed: {
     ...mapGetters("generic", ["evento"]),
   },

package/src/store/modulos/generic.js

@@ -144,7 +144,17 @@ export default {
                 .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
 
             return classeImportant;
-        }
+        },
+        agruparPor: () => (obj) => {
+            const result = {};
+            obj.array.forEach((item) => {
+                if (!result[item[obj.key]]) {
+                    result[item[obj.key]] = [];
+                }
+                result[item[obj.key]].push(item);
+            });
+            return result;
+        },
     },
     mutations: {
         abrirModal: (state, nome) => {
@@ -236,6 +246,7 @@ export default {
             state.EscolherEstatico.campoAlvo = obj.campoAlvo;
             state.EscolherEstatico.valor = obj.valor;
         },
+
     },
     actions: {
         postApi: async function (context, params) {