@nixweb/nixloc-ui 0.0.54 → 0.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.54",
+  "version": "0.0.57",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/Conta.vue

@@ -58,7 +58,7 @@ export default {
 </script>
 <style scoped>
 .foto-container {
-  margin-top: -32px;
+  margin-top: -15px;
   padding-right: 10px;
   cursor: pointer;
   position: fixed;

package/src/component/layout/Menu.vue

@@ -1,84 +1,114 @@
 <template>
-  <div>
-    <sidebar-menu
-      :menu="menu.itens"
-      :collapsed="menu.escondeMostra"
-      theme="white-theme"
-      width="220px"
-    />
+  <div class="menu-container">
+    <ul class="menu">
+      <li>
+        <a
+          href="#"
+          @click.prevent="navegarPara('dashboard')"
+          :class="sessaoDestaque('home')"
+        >
+          <i class="fa fa-home menu__icon" aria-hidden="true"></i>
+          Dashboard
+        </a>
+      </li>
+
+      <li v-for="(item, index) in menuFiltro(true)" :key="index">
+        <a
+          href="#"
+          @click.prevent="abrirSubMenu(item.modulo)"
+          :class="sessaoDestaque(item.modulo)"
+        >
+          <i :class="item.icone" class="menu__icon" aria-hidden="true"></i>
+          {{ item.modulo }}
+          <i class="fa fa-chevron-right menu__arrow-icon" aria-hidden="true"></i>
+        </a>
+      </li>
+    </ul>
+
+    <transition name="slide-fade">
+      <div class="context-menu-container" v-show="subMenuPrimeiroNivel">
+        <ul class="context-menu">
+          <li v-for="(item, index) in subMenuFiltro(false)" :key="index">
+            <h5 v-if="item.tipo === 'grupo'" class="context-menu__title">
+              <i :class="item.icone" aria-hidden="true"></i>
+              {{ item.grupoNome }}
+              <span
+                v-if="index === 0"
+                @click.prevent="fecharSubMenu"
+                class="context-menu__btn-close"
+                href="#"
+              >
+                <i class="fas fa-times-circle"></i>
+              </span>
+            </h5>
+
+            <a
+              v-else
+              href="#"
+              @click.prevent="navegarPara(item.nomeRota)"
+              :class="classeSubMenu(item.titulo)"
+            >
+              {{ item.titulo }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
-import { SidebarMenu } from "vue-sidebar-menu";
-import { mapState, mapMutations } from "vuex";
+import { mapState } from "vuex";
 
 export default {
-  components: {
-    SidebarMenu,
-  },
+  name: "Menu",
   data() {
     return {
-      tamanhoPagina: "0",
-      windowWidth: 0,
-      windowHeight: 0,
+      modulo: "",
+      subMenuPrimeiroNivel: false,
     };
   },
-  created() {
-    this.tamanhoPagina = window.innerWidth;
-    var corpo = document.getElementsByTagName("body")[0];
-    corpo.style = "margin-left: 220px;transition: all 0.2s ease-in-out;";
-  },
-  mounted() {
-    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: {
-    ...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;";
-      }
+    abrirSubMenu(modulo) {
+      this.subMenuPrimeiroNivel = true;
+      this.modulo = modulo;
     },
-    getWindowWidth(event) {
-      this.windowWidth = document.documentElement.clientWidth;
+    fecharSubMenu() {
+      this.subMenuPrimeiroNivel = false;
+      this.menuItens = [];
     },
-    getWindowHeight(event) {
-      this.windowHeight = document.documentElement.clientHeight;
+    sessaoDestaque(section) {
+      return {
+        menu__link: true,
+        "menu__link--active": section === this.contextSection,
+      };
     },
-    esconderBotaoRodape() {
-      var botao = document.getElementsByClassName("collapse-btn")[0];
-      botao.style = "visibility: hidden !important;";
+    classeSubMenu(subMenuName) {
+      return {
+        "context-menu__link": true,
+        "context-menu__link--active": this.activeSubMenu === subMenuName,
+      };
     },
-  },
-  watch: {
-    windowWidth: function () {
-      if (this.windowWidth < 1280) {
-        this.escondeMostra(true);
-      } else {
-        this.escondeMostra(false);
-      }
+    navegarPara(nomeRota) {
+      this.$router.push({
+        name: nomeRota,
+      });
+      this.fecharSubMenu();
     },
-    "menu.escondeMostra": function (value) {
-      this.escondeMostra(value);
+    menuFiltro(ehModulo) {
+      let filtro = [];
+      this.menu.itens.forEach(function (obj) {
+        if (obj.ehModulo == ehModulo) filtro.push(obj);
+      });
+      return filtro;
+    },
+    subMenuFiltro(ehModulo) {
+      let filtro = [];
+      let self = this;
+      this.menu.itens.forEach(function (obj) {
+        if (obj.ehModulo == ehModulo && obj.modulo === self.modulo) filtro.push(obj);
+      });
+      return filtro;
     },
   },
   computed: {
@@ -86,28 +116,3 @@ export default {
   },
 };
 </script>
-
-<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

@@ -98,7 +98,7 @@ export default {
 <style scoped>
 .c-container {
   margin: auto;
-  padding-left: 30px;
+  padding-left: 240px;
   padding-right: 30px;
   max-width: 1400px;
 }

package/src/component/layout/Topo.vue

@@ -1,14 +1,9 @@
 <template>
   <div>
-    <div
-      class="topo"
-      :class="{ esconde: menu.escondeMostra, mostra: !menu.escondeMostra }"
-      :style="'background-color:' + corTopo"
-    >
-      <div class="lado-a-lado" @click="mostrar = !mostrar">
-        <span class="icone"><i class="fal fa-bars"></i></span>
+    <div class="topo" :style="'background-color:' + corTopo">
+      <div class="lado-a-lado">
+        <slot></slot>
       </div>
-      <div class="lado-a-lado"><slot></slot></div>
     </div>
     <br />
   </div>
@@ -25,20 +20,6 @@ export default {
       default: "#4680A5",
     },
   },
-  data() {
-    return { mostrar: false };
-  },
-  methods: {
-    ...mapMutations("generic", ["escondeMostraMenu"]),
-  },
-  computed: {
-    ...mapState("generic", ["menu"]),
-  },
-  watch: {
-    mostrar(valor) {
-      this.escondeMostraMenu(valor);
-    },
-  },
 };
 </script>
 
@@ -51,18 +32,4 @@ export default {
   left: 0;
   z-index: 20;
 }
-
-.esconde {
-  padding-left: 60px;
-}
-
-.mostra {
-  padding-left: 230px;
-}
-
-.icone {
-  font-size: 25px;
-  color: white;
-  cursor: pointer;
-}
 </style>

package/src/component/shared/Toast.vue

@@ -18,11 +18,11 @@ export default {
   },
   methods: {
     notifica(value) {
-      if (value.tipo == "adicionarApiSucesso" || value.tipo == "modificarApiSucesso")
+      if (value.tipo == "postApi" || value.tipo == "putApi")
         this.$toasted.show("Salvo com sucesso", {
           type: "success",
         });
-      if (value.tipo == "adicionarApiErro" || value.tipo == "modificarApiErro") {
+      if (value.tipo == "postApiErro" || value.tipo == "putApiErro") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });

package/src/component/template/ModeloLista.vue

@@ -150,8 +150,8 @@ export default {
   },
   watch: {
     metodoExecutadoApi: function (value) {
-      if (value != "obterTodosApi" && value != "" && value != "escolherApi") {
-        // this.obterTodos();
+      if (value == "deleteAllApi") {
+        this.obterTodos();
       }
     },
     buscouPesquisa: function () {

package/src/store/modulos/generic.js

@@ -7,7 +7,7 @@ export default {
     namespaced: true,
     state: {
         menu: {
-            escondeMostra: false, itens: []
+            itens: []
         },
         modal: {
             nome: undefined,
@@ -77,9 +77,6 @@ export default {
         removeItensMenu: (state) => {
             state.menu.itens = [];
         },
-        escondeMostraMenu: (state, escondeMostra) => {
-            state.menu.escondeMostra = escondeMostra;
-        },
         abrirModal: (state, nome) => {
             state.modal.nome = nome;
             state.modal.abrir = true;
@@ -176,14 +173,17 @@ export default {
                 .then((response) => {
                     if (response.data.sucesso) {
                         context.commit('insereMetodoExecutadoApi', params.MetodoExecutadoApi);
-                        context.commit('insereToast', 'adicionarApiSucesso');
+
+                        if (!params.naoNotificarToast)
+                            context.commit('insereToast', 'postApi');
+
                         context.commit('removeNotificacao');
                         context.commit('validation/removeFormSujo', null, { root: true });
                         return response.data;
                     } else {
 
                         context.commit('insereNotificacao', response.data.notificacoes)
-                        context.commit('insereToast', 'falhaGenerica');
+                        context.commit('insereToast', 'postApiErro');
                         return response.data;
                     }
                 }, (err) => {
@@ -199,12 +199,15 @@ export default {
                 .then((response) => {
                     if (response.data.sucesso) {
                         context.commit('insereMetodoExecutadoApi', params.MetodoExecutadoApi);
-                        context.commit('insereToast', 'modificarApiSucesso');
+
+                        if (!params.naoNotificarToast)
+                            context.commit('insereToast', 'putApi');
+
                         context.commit('removeNotificacao');
                         context.commit('validation/removeFormSujo', null, { root: true });
                         return response.data;
                     } else {
-                        context.commit('insereToast', 'modificarApiErro');
+                        context.commit('insereToast', 'putApiErro');
                         context.commit('insereNotificacao', response.data.notificacoes)
                         return response.data;
                     }
@@ -247,7 +250,7 @@ export default {
             })
                 .then((response) => {
                     if (response.data.sucesso) {
-                        context.commit('insereMetodoExecutadoApi', 'deleteApi')
+                        context.commit('insereMetodoExecutadoApi', 'deleteAllApi');
                         context.commit('insereToast', 'deleteApiSucesso');
                         context.commit('removeNotificacao');
                         return response.data;