@nixweb/nixloc-ui 0.0.52 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -21,6 +21,7 @@
     "vue-multiselect": "^2.1.0",
     "vue-numeric": "^2.4.1",
     "vue-the-mask": "^0.11.1",
+    "vue-sidebar-menu": "^3.6.3",
     "vue-toasted": "^1.1.28",
     "vue-toggles": "^1.1.4",
     "vue-upload-file": "^1.1.0",
@@ -63,4 +64,4 @@
     "type": "git",
     "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
   }
-}
+}

package/src/component/layout/BarraFixa.vue

@@ -4,7 +4,12 @@
       v-show="!carregando('painel')"
       class="barra"
       :style="'min-height:' + altura + 'px;'"
-      :class="{ topo: posicao == 'topo', rodape: posicao == 'rodape' }"
+      :class="{
+        topo: posicao == 'topo',
+        rodape: posicao == 'rodape',
+        esconde: menu.escondeMostra,
+        mostra: !menu.escondeMostra,
+      }"
     >
       <div class="tamanho">
         <slot></slot>
@@ -30,13 +35,14 @@ export default {
   },
   computed: {
     ...mapGetters("generic", ["carregando"]),
+    ...mapState("generic", ["menu"]),
   },
 };
 </script>
 
 <style scoped>
 .barra {
-  background-color: #fafafc;
+  background-color: white;
   position: fixed;
   width: 100%;
   overflow: hidden;
@@ -61,4 +67,12 @@ export default {
   bottom: 0px;
   border-top: 1px solid #e1e1e2;
 }
+
+.esconde {
+  padding-left: 60px;
+}
+
+.mostra {
+  padding-left: 230px;
+}
 </style>

package/src/component/layout/Menu.vue

@@ -1,139 +1,113 @@
 <template>
-  <div id="page">
-    <div id="header" :style="'background-color:' + corTopo">
-      <a href="#menu"><span></span></a>
-    </div>
-    <nav id="menu">
-      <div id="panel-menu">
-        <ul v-for="item in menu" :key="item.titulo">
-          <li>
-            <span>{{ item.titulo }}</span>
-            <ul>
-              <li v-for="primeiroNivel in item.primeiroNivel" :key="primeiroNivel.titulo">
-                <span
-                  :class="{ titulo: primeiroNivel.rotaDestino != '' }"
-                  @click="navegarPara(primeiroNivel.rotaDestino)"
-                  >{{ primeiroNivel.titulo }}</span
-                >
-                <ul
-                  v-for="segundoNivel in primeiroNivel.segundoNivel"
-                  :key="segundoNivel.titulo"
-                >
-                  <li>
-                    <span
-                      :class="{ titulo: segundoNivel.rotaDestino != '' }"
-                      @click="navegarPara(segundoNivel.rotaDestino)"
-                      >{{ segundoNivel.titulo }}</span
-                    >
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </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)">{{
-            item.titulo
-          }}</span>
-        </li>
-        <li>
-          <span class="titulo" @click="executarSair()">Sair</span>
-        </li>
-      </ul>
-    </nav>
+  <div>
+    <sidebar-menu
+      :menu="menu.itens"
+      :collapsed="menu.escondeMostra"
+      theme="white-theme"
+      width="220px"
+    />
   </div>
 </template>
+
 <script>
+import { SidebarMenu } from "vue-sidebar-menu";
+import { mapState, mapMutations } from "vuex";
+
 export default {
-  name: "Menu",
-  props: {
-    corTopo: {
-      type: String,
-      default: "red",
-    },
-    menu: Array,
-    conta: Array,
-    sair: Function,
+  components: {
+    SidebarMenu,
+  },
+  data() {
+    return {
+      tamanhoPagina: "0",
+      windowWidth: 0,
+      windowHeight: 0,
+    };
+  },
+  created() {
+    this.tamanhoPagina = window.innerWidth;
+    var corpo = document.getElementsByTagName("body")[0];
+    corpo.style = "margin-left: 220px;transition: all 0.2s ease-in-out;";
   },
   mounted() {
-    new Mmenu(
-      document.querySelector("#menu"),
-      {
-        backButton: {
-          close: false,
-        },
-        setSelected: {
-          hover: false,
-          parent: false,
-        },
-        counters: {
-          add: true,
-        },
-        iconbar: {
-          use: false,
-          top: ['<a href="#/"><span class="fas fa-bars"></span></a>'],
-        },
-        searchfield: {
-          add: true,
-          placeholder: "Pesquisar",
-          splash: "<p>Digite sua pesquisa</p>",
-          title: "Pesquisar",
-          noResults: "Nenhum resultado",
-        },
-        iconPanels: {
-          add: true,
-          visible: 1,
-        },
-        sidebar: {
-          collapsed: {
-            use: false,
-          },
-          expanded: {
-            use: "(min-width: 1000px)",
-          },
-        },
-        navbars: [
-          {
-            content: ["searchfield"],
-          },
-          {
-            type: "tabs",
-            content: [
-              '<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"],
-          },
-        ],
-      },
-      {
-        searchfield: {
-          cancel: true,
-          clear: true,
-        },
-      }
-    );
+    this.esconderBotaoRodape();
+    this.escondeMostra(false);
+
+    this.$nextTick(function () {
+      window.addEventListener("resize", this.getWindowWidth);
+      window.addEventListener("resize", this.getWindowHeight);
+      this.getWindowWidth();
+      this.getWindowHeight();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.getWindowWidth);
+    window.removeEventListener("resize", this.getWindowHeight);
+  },
+  updated() {
+    this.esconderBotaoRodape();
   },
   methods: {
-    executarSair() {
-      if (this.sair) this.sair();
+    ...mapMutations("generic", ["escondeMostraMenu"]),
+    escondeMostra(esconde) {
+      var corpo = document.getElementsByTagName("body")[0];
+      this.escondeMostraMenu(esconde);
+      if (esconde) {
+        corpo.style = "margin-left: 50px;transition: all 0.2s ease-in-out;";
+      } else {
+        corpo.style = "margin-left: 220px;transition: all 0.2s ease-in-out;";
+      }
     },
-    navegarPara(rotaDestino) {
-      if (rotaDestino == "") return;
-      this.$router.push({
-        name: rotaDestino,
-      });
+    getWindowWidth(event) {
+      this.windowWidth = document.documentElement.clientWidth;
+    },
+    getWindowHeight(event) {
+      this.windowHeight = document.documentElement.clientHeight;
+    },
+    esconderBotaoRodape() {
+      var botao = document.getElementsByClassName("collapse-btn")[0];
+      botao.style = "visibility: hidden !important;";
     },
   },
+  watch: {
+    windowWidth: function () {
+      if (this.windowWidth < 1280) {
+        this.escondeMostra(true);
+      } else {
+        this.escondeMostra(false);
+      }
+    },
+    "menu.escondeMostra": function (value) {
+      this.escondeMostra(value);
+    },
+  },
+  computed: {
+    ...mapState("generic", ["menu"]),
+  },
 };
 </script>
 
-<style scoped>
-.titulo {
-  cursor: pointer;
+<style>
+.v-sidebar-menu .vsm-title {
+  font-size: 14px !important;
+  font-weight: normal !important;
+}
+
+.v-sidebar-menu.white-theme .vsm-dropdown > .vsm-list {
+  background-color: #fafafc !important;
+}
+
+.v-sidebar-menu {
+  background-color: white !important;
+  border-right: 1px solid #e1e1e2;
+}
+
+.v-sidebar-menu.white-theme .vsm-item.first-item > .vsm-link > .vsm-icon {
+  color: #4680a5 !important;
+}
+
+.v-sidebar-menu .vsm-arrow:after {
+  font-family: "Font Awesome 5 Pro" !important;
+  content: "\f105" !important;
 }
 </style>

package/src/component/layout/Painel.vue

@@ -25,24 +25,25 @@
             </div>
           </div>
         </div>
-        <br v-show="mostrarBotoes"/>
+        <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 v-show="mostrarBotoes || mostrarPesquisa"/>
+        <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 v-show="mostrarPesquisa"/>
+        <br v-show="mostrarPesquisa" />
         <div>
           <slot name="conteudo-principal"></slot>
         </div>
       </div>
     </div>
+    <br /><br /><br />
   </div>
 </template>
 
@@ -107,10 +108,9 @@ export default {
 }
 
 .c-titulo-pagina {
-  font-size: 18px;
+  font-size: 20px;
   margin-top: 16px;
   color: #577696;
-  font-weight: bold;
 }
 
 .c-voltar {

package/src/component/layout/Topo.vue

@@ -1,22 +1,65 @@
 <template>
-  <div class="topo"></div>
+  <div>
+    <div
+      class="topo"
+      :class="{ esconde: menu.escondeMostra, mostra: !menu.escondeMostra }"
+      :style="'background-color:' + corTopo"
+    >
+      <span class="icone" @click="mostrar = !mostrar"><i class="fal fa-bars"></i></span>
+    </div>
+    <br />
+  </div>
 </template>
 
 <script>
+import { mapState, mapMutations } from "vuex";
+
 export default {
   name: "Topo",
+  props: {
+    corTopo: {
+      type: String,
+      default: "#4680A5",
+    },
+  },
+  data() {
+    return { mostrar: false };
+  },
+  methods: {
+    ...mapMutations("generic", ["escondeMostraMenu"]),
+  },
+  computed: {
+    ...mapState("generic", ["menu"]),
+  },
+  watch: {
+    mostrar(valor) {
+      this.escondeMostraMenu(valor);
+    },
+  },
 };
 </script>
 
 <style scoped>
 .topo {
-  position: fixed;
-  display: block;
-  margin: 0 auto;
-  height: 60px;
+  height: 50px;
   width: 100%;
-  background-color: #37597c;
-  overflow: hidden;
-  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+}
+
+.esconde {
+  padding-left: 60px;
+}
+
+.mostra {
+  padding-left: 230px;
+}
+
+.icone {
+  font-size: 25px;
+  color: white;
+  cursor: pointer;
 }
 </style>

package/src/store/modulos/generic.js

@@ -6,6 +6,13 @@ import Token from "@nixweb/nixloc-ui/src/config/token";
 export default {
     namespaced: true,
     state: {
+        menu: {
+            escondeMostra: false, itens: [{
+                href: "/dashboard",
+                title: "Dashboard",
+                icon: "fa fa-chart-area",
+            },]
+        },
         modal: {
             nome: undefined,
             abrir: false
@@ -66,6 +73,12 @@ export default {
         },
     },
     mutations: {
+        insereItemMenu: (state, obj) => {
+            state.menu.itens.push(obj);
+        },
+        escondeMostraMenu: (state, escondeMostra) => {
+            state.menu.escondeMostra = escondeMostra;
+        },
         abrirModal: (state, nome) => {
             state.modal.nome = nome;
             state.modal.abrir = true;