@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/layout/Menu.vue

@@ -1,64 +1,64 @@
 <template>
-  <div class="menu-container" :class="{ 'menu-aberto': subMenuPrimeiroNivel }">
+  <div class="menu-container" :class="{ 'menu-open': subMenuFirstLevel }">
     <ul class="menu">
-      <li v-if="urlImagem">
+      <li v-if="urlImage">
         <div class="div-logo text-center">
-          <img :src="urlImagem" />
+          <img :src="urlImage" />
         </div>
       </li>
       <li>
-        <div :class="{ 'menu-ativo': menuAtivo == 'Dashboard' }">
+        <div :class="{ 'menu-active': menuActive == 'Dashboard' }">
           <a
             href="#"
-            @click.prevent="navegarPara({ nomeRota: 'dashboard', modulo: 'Dashboard' })"
-            :class="sessaoDestaque('home')"
+            @click.prevent="navegateTo({ routeName: 'dashboard', module: 'Dashboard' })"
+            :class="highlightSession('home')"
           >
-            <div class="div-icone lado-a-lado">
+            <div class="div-icon side-by-side">
               <i
                 :class="{
-                  'icone-ativo': menuAtivo == 'Dashboard',
-                  'icone-normal': menuAtivo != 'Dashboard',
+                  'icon-active': menuActive == 'Dashboard',
+                  'icon-normal': menuActive != 'Dashboard',
                 }"
-                class="fas fa-chart-area icone-dash"
+                class="fas fa-chart-area icon-dash"
               ></i>
             </div>
-            <div class="titulo">Dashboard</div>
+            <div class="title">Dashboard</div>
           </a>
         </div>
       </li>
-      <li v-for="(item, index) in menuFiltro(true)" :key="index">
-        <div :class="{ 'menu-ativo': menuAtivo == item.modulo }">
+      <li v-for="(item, index) in menuFilter(true)" :key="index">
+        <div :class="{ 'menu-active': menuActive == item.module }">
           <a
             href="#"
-            @click.prevent="abrirSubMenu(item.modulo)"
-            :class="sessaoDestaque(item.modulo)"
+            @click.prevent="openSubMenu(item.module)"
+            :class="highlightSession(item.module)"
           >
-            <div class="div-icone lado-a-lado">
+            <div class="div-icon side-by-side">
               <span
                 :class="{
-                  'icone-ativo': menuAtivo == item.modulo,
-                  'icone-normal': menuAtivo != item.modulo,
+                  'icon-active': menuActive == item.module,
+                  'icon-normal': menuActive != item.module,
                 }"
               >
-                <i :class="item.icone"></i>
+                <i :class="item.icon"></i>
               </span>
             </div>
-            <div class="titulo">{{ item.titulo }}</div>
+            <div class="title">{{ item.title }}</div>
           </a>
         </div>
       </li>
     </ul>
 
     <transition name="slide-fade">
-      <div class="context-menu-container" v-if="subMenuPrimeiroNivel">
+      <div class="context-menu-container" v-if="subMenuFirstLevel">
         <ul class="context-menu">
-          <li v-for="(item, index) in subMenuFiltro(false)" :key="index">
-            <h5 v-if="item.tipo === 'grupo'" class="context-menu__title">
-              <span class="sub-titulo"> {{ item.grupoNome }}</span>
+          <li v-for="(item, index) in subMenuFilter(false)" :key="index">
+            <h5 v-if="item.type === 'group'" class="context-menu__title">
+              <span class="sub-title"> {{ item.grupoNome }}</span>
               <span
                 v-if="index === 0"
-                @click.prevent="fecharSubMenu"
-                class="context-menu__btn-close icone-fechar"
+                @click.prevent="hideSubMenu"
+                class="context-menu__btn-close icon-close"
                 href="#"
               >
                 <i class="fas fa-times-circle"></i>
@@ -68,13 +68,13 @@
             <a
               v-else
               href="#"
-              @click.prevent="navegarPara(item)"
-              :class="classeSubMenu(item.titulo)"
+              @click.prevent="navegateTo(item)"
+              :class="classSubMenu(item.title)"
             >
               <b-row>
-                <b-col sm="1"> <i :class="item.icone" aria-hidden="true"></i></b-col>
+                <b-col sm="1"> <i :class="item.icon" aria-hidden="true"></i></b-col>
                 <b-col sm="10">
-                  <span class="titulo-sub"> {{ item.titulo }}</span></b-col
+                  <span class="title-sub"> {{ item.title }}</span></b-col
                 ></b-row
               >
             </a>
@@ -90,73 +90,73 @@ import { mapState } from "vuex";
 export default {
   name: "Menu",
   props: {
-    corBase: {
+    baseColor: {
       type: String,
       default: "#4680A5",
     },
-    corBaseAtivo: {
+    baseColorActive: {
       type: String,
       default: "#3F529B",
     },
-    urlImagem: String,
+    urlImage: String,
   },
   data() {
     return {
-      modulo: "",
-      subMenuPrimeiroNivel: false,
-      menuAtivo: "Dashboard",
+      module: "",
+      subMenuFirstLevel: false,
+      menuActive: "Dashboard",
     };
   },
   methods: {
-    abrirSubMenu(modulo) {
-      this.subMenuPrimeiroNivel = true;
-      this.modulo = modulo;
+    openSubMenu(module) {
+      this.subMenuFirstLevel = true;
+      this.module = module;
     },
-    fecharSubMenu() {
-      this.subMenuPrimeiroNivel = false;
+    hideSubMenu() {
+      this.subMenuFirstLevel = false;
       this.menuItens = [];
     },
-    sessaoDestaque(section) {
+    highlightSession(section) {
       return {
         menu__link: true,
         "menu__link--active": section === this.contextSection,
       };
     },
-    classeSubMenu(subMenuName) {
+    classSubMenu(subMenuName) {
       return {
         "context-menu__link": true,
         "context-menu__link--active": this.activeSubMenu === subMenuName,
       };
     },
-    navegarPara(item) {
+    navegateTo(item) {
       this.$router.push({
-        name: item.nomeRota,
+        name: item.routeName,
       });
-      this.fecharSubMenu();
+      this.hideSubMenu();
     },
-    menuFiltro(ehModulo) {
-      let filtro = [];
-      this.menu.itens.forEach(function (obj) {
-        if (obj.ehModulo == ehModulo) filtro.push(obj);
+    menuFilter(isModule) {
+      let filter = [];
+      this.menu.items.forEach(function (obj) {
+        if (obj.isModule == isModule) filter.push(obj);
       });
-      return filtro;
+      return filter;
     },
-    subMenuFiltro(ehModulo) {
-      let filtro = [];
+    subMenuFilter(isModule) {
+      let filter = [];
       let self = this;
-      this.menu.itens.forEach(function (obj) {
-        if (obj.ehModulo == ehModulo && obj.modulo === self.modulo) filtro.push(obj);
+      this.menu.items.forEach(function (obj) {
+        if (obj.isModule == isModule && obj.module === self.module) filter.push(obj);
       });
-      return filtro;
+      return filter;
     },
   },
   computed: {
-    ...mapState("usuario", ["menu"]),
+    ...mapState("user", ["menu"]),
   },
   watch: {
     $route: {
       handler: function (router) {
-        this.menuAtivo = router.matched[0].props.default.modulo;
+        this.menuActive = router.matched[0].props.default.module;
       },
       deep: true,
     },
@@ -165,7 +165,7 @@ export default {
 </script>
 
 <style scoped>
-.menu-aberto {
+.menu-open {
   width: 350px;
   z-index: 1000;
 }
@@ -175,34 +175,34 @@ export default {
   padding-bottom: 16px;
 }
 
-.div-icone {
+.div-icon {
   width: 35px;
   height: 35px;
   padding-top: 5px;
   margin-left: 38px;
 }
 
-.icone-fechar {
+.icon-close {
   margin-right: 60px;
 }
-.icone {
+.icon {
   font-size: 20px;
 }
-.icone-dash {
+.icon-dash {
   font-size: 22px;
 }
-.titulo {
+.title {
   font-size: 13px;
   font-weight: 400;
   margin-top: -6px;
   text-align: center;
   width: 100%;
 }
-.titulo-sub {
+.title-sub {
   margin-left: 5px;
   font-weight: 400;
 }
-.sub-titulo {
+.sub-title {
   font-size: 16px;
   font-weight: normal;
 }

package/src/component/layout/{Moldura.vue → Molded.vue}

@@ -1,14 +1,14 @@
 <template>
-  <div class="moldura" :style="'border-radius:' + bordaArredondada + 'px'">
+  <div class="molded" :style="'border-radius:' + borderRadius + 'px'">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Moldura",
+  name: "Molded",
   props: {
-    bordaArredondada: {
+    borderRadius: {
       type: Number,
       default: 8,
     },
@@ -16,7 +16,7 @@ export default {
 };
 </script>
 <style scoped>
-.moldura {
+.molded {
   border: 1px solid #dbdfe9;
   background-color: transparent;
   padding-top: 15px;

package/src/component/layout/Panel.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="panel">
+    <Toast />
+    <Loading v-show="isLoading('panel')" />
+    <div v-show="!isLoading('panel')">
+      <div v-show="showVerticalFilter">
+        <VerticalFilter>
+          <slot name="content-filter"></slot>
+        </VerticalFilter>
+      </div>
+      <div class="local-container">
+        <Messages v-if="!modal.open" />
+        <div class="row">
+          <div class="col-10">
+            <div class="div-title">
+              <span class="module">
+                <span class="icon"><i class="fas fa-compass"></i></span>
+                {{ module }} |</span
+              >
+              <span class="title"> {{ title }}</span>
+            </div>
+          </div>
+          <div class="col-2 text-right" v-show="currentRoute != 'Dashboard'">
+            <div class="c-back" @click="back()">
+              <span class="g-espaco-esquerda">Voltar</span>
+            </div>
+          </div>
+        </div>
+        <br v-show="showButtons" />
+        <div class="row" v-show="showButtons">
+          <div class="col-12" v-show="showButtons">
+            <slot name="content-buttons"></slot>
+          </div>
+        </div>
+        <br v-show="showButtons || showSearch" />
+        <div v-show="showButtons || showSearch">
+          <div>
+            <div v-show="showSearch"><Search /></div>
+          </div>
+        </div>
+        <br v-show="showSearch" />
+        <div>
+          <slot name="content-main"></slot>
+        </div>
+      </div>
+    </div>
+    <br /><br /><br />
+  </div>
+</template>
+
+<script>
+import Toast from "../shared/Toast.vue";
+import Messages from "../shared/Messages.vue";
+import Search from "../shared/Search.vue";
+import Loading from "../shared/Loading.vue";
+import VerticalFilter from "../shared/VerticalFilter";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Panel",
+  components: {
+    Loading,
+    VerticalFilter,
+    Search,
+    Messages,
+    Toast,
+  },
+  props: {
+    module: String,
+    title: String,
+    showVerticalFilter: Boolean,
+    showSearch: Boolean,
+    showButtons: Boolean,
+  },
+  data() {
+    return {
+      currentRoute: this.$route.name,
+    };
+  },
+  created() {
+    this.addLoading("panel");
+  },
+  updated() {
+    this.currentRoute = this.$route.name;
+  },
+  computed: {
+    ...mapGetters("generic", ["isLoading"]),
+    ...mapState("generic", ["modal"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addLoading"]),
+    back() {
+      window.history.back();
+    },
+  },
+};
+</script>
+<style scoped>
+.local-container {
+  margin: auto;
+  padding-left: 110px;
+  max-width: 1400px;
+}
+
+.div-title {
+  margin-top: 15px;
+}
+
+.module {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 34px;
+  color: #577696;
+}
+
+.icon {
+  opacity: 0.8;
+  font-size: 20px;
+}
+
+.c-back {
+  margin-top: 20px;
+  margin-right: 12px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #8ca1b7;
+}
+
+.c-back:hover {
+  color: #8ca1b7;
+}
+
+.panel {
+  padding: 25px;
+}
+</style>

package/src/component/layout/Popover.vue

@@ -11,7 +11,7 @@ export default {
   name: "Popover",
   props: {
     nome: String,
-    largura: Number,
+    width: Number,
   },
 };
 </script>

package/src/component/layout/{BarraRolagem.vue → Scrollbar.vue}

@@ -1,10 +1,8 @@
 <template>
   <div
     :id="id"
-    class="barra-rolagem div"
-    :style="
-      'max-height:' + alturaMaxima + 'px' + ';' + 'min-height:' + alturaMinima + 'px'
-    "
+    class="scrollbar"
+    :style="'max-height:' + maxHeight + 'px' + ';' + 'min-height:' + minHeight + 'px'"
   >
     <slot></slot>
   </div>
@@ -14,31 +12,31 @@
 import { mapMutations } from "vuex";
 
 export default {
-  name: "BarraRolagem",
+  name: "Scrollbar",
   props: {
     id: String,
-    alturaMaxima: Number,
-    alturaMinima: Number,
+    maxHeight: Number,
+    minHeight: Number,
   },
   mounted() {
     const listElm = document.querySelector("#" + this.id);
     if (listElm != null)
       listElm.addEventListener("scroll", (e) => {
         if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
-          this.insereEvento({
-            nome: "barraRolagemFim",
+          this.addEvent({
+            nome: "endScrollbar",
           });
         }
       });
   },
   methods: {
-    ...mapMutations("generic", ["insereEvento"]),
+    ...mapMutations("generic", ["addEvent"]),
   },
 };
 </script>
 
 <style scoped>
-.div {
+div {
   overflow-y: visible;
   overflow-x: hidden;
 }

package/src/component/layout/Tag.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="div-tag">
     <div class="tag">
-      <span @click="executar()">{{ titulo }}: {{ valor }}</span>
-      <i @click="remover()" class="icone fas fa-times-circle"></i>
+      <span @click="execute()">{{ title }}: {{ valor }}</span>
+      <i @click="remove()" class="icon fas fa-times-circle"></i>
     </div>
   </div>
 </template>
@@ -13,24 +13,24 @@ import { mapMutations } from "vuex";
 export default {
   name: "Tag",
   props: {
-    titulo: String,
+    title: String,
     valor: String,
-    nomeEvento: String,
-    dadosEvento: Object,
+    eventName: String,
+    eventData: Object,
   },
   methods: {
-    ...mapMutations("generic", ["insereEvento"]),
-    executar() {
-      if (this.nomeEvento)
-        this.insereEvento({
-          nome: this.nomeEvento,
-          dados: this.dadosEvento,
+    ...mapMutations("generic", ["addEvent"]),
+    execute() {
+      if (this.eventName)
+        this.addEvent({
+          nome: this.eventName,
+          data: this.eventData,
         });
     },
-    remover() {
-      this.insereEvento({
+    remove() {
+      this.addEvent({
         nome: "tagRemovida",
-        dados: this.dadosEvento,
+        data: this.eventData,
       });
     },
   },
@@ -59,7 +59,7 @@ export default {
   margin-right: 10px;
 }
 
-.icone {
+.icon {
   color: #9e9e9e;
   padding-left: 5px;
 }

package/src/component/layout/Wizard.vue

@@ -38,7 +38,7 @@
           v-if="step < etapa"
           class="btn btn--green-1"
           @click="step++"
-          :disabled="!formValido(formNome[step - 1])"
+          :disabled="!isFormValid(formName[step - 1])"
         >
           Próximo
         </button>
@@ -58,7 +58,7 @@ export default {
   props: {
     etapa: Number,
     legenda: Array,
-    formNome: Array,
+    formName: Array,
     mostrarPassos: {
       type: Boolean,
       default: true,
@@ -70,7 +70,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters("validation", ["formValido"]),
+    ...mapGetters("validation", ["isFormValid"]),
     stepperProgress() {
       return (100 / this.etapa) * (this.step - 1) + "%";
     },

package/src/component/shared/{CodigoEditor.vue → CodeEditor.vue}

@@ -1,7 +1,7 @@
 <template>
   <div>
     <AceEditor
-      v-model="codigo"
+      v-model="code"
       lang="html"
       @init="editorInit"
       theme="monokai"
@@ -19,16 +19,16 @@
         showGutter: true,
       }"
     />
-    <div class="aplicar">
+    <div class="apply">
       <b-row>
         <b-col class="text-right">
-          <Botao
-            chave="aplicarCodigo"
-            tipo="primario"
-            titulo="Aplicar"
-            classeIcone="far fa-code"
-            tamanho="pequeno"
-            :clique="aplicar"
+          <Button
+            key="applyCode"
+            type="primary"
+            title="Aplicar"
+            classIcon="far fa-code"
+            size="small"
+            :clicked="apply"
           />
         </b-col>
       </b-row>
@@ -38,44 +38,44 @@
 
 <script>
 import AceEditor from "vuejs-ace-editor";
-import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 
 import { mapMutations } from "vuex";
 
 export default {
-  name: "CodigoEditor",
+  name: "CodeEditor",
   components: {
     AceEditor,
-    Botao,
+    Button,
   },
   data() {
     return {
-      codigo: "",
+      code: "",
     };
   },
   computed: {
-    documentoHtml: {
+    documentHtml: {
       get() {
-        return this.$store.state.generic.documentoHtml;
+        return this.$store.state.generic.documentHtml;
       },
       set(value) {
-        this.atualizaDocumentoHtml(value);
+        this.updateDocumentHtml(value);
       },
     },
   },
   mounted() {
-    this.codigo = this.documentoHtml;
+    this.code = this.documentHtml;
   },
   methods: {
     ...mapMutations("generic", [
-      "atualizaDocumentoHtml",
-      "fecharModal",
-      "removeCarregando",
+      "updateDocumentHtml",
+      "hideModal",
+      "removeLoading",
     ]),
-    aplicar() {
-      this.atualizaDocumentoHtml(this.codigo);
-      this.fecharModal("codigo");
-      this.removeCarregando(["aplicarCodigo"]);
+    apply() {
+      this.updateDocumentHtml(this.code);
+      this.hideModal("code");
+      this.removeLoading(["applyCode"]);
     },
     editorInit: function () {
       require("brace/ext/language_tools"); //language extension prerequsite...
@@ -89,7 +89,7 @@ export default {
 };
 </script>
 <style scoped>
-.aplicar {
+.apply {
   margin-top: 10px;
 }
 </style>