@nixweb/nixloc-ui 0.0.52 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "0.0.52",
3
+ "version": "0.0.55",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -21,6 +21,7 @@
21
21
  "vue-multiselect": "^2.1.0",
22
22
  "vue-numeric": "^2.4.1",
23
23
  "vue-the-mask": "^0.11.1",
24
+ "vue-sidebar-menu": "^3.6.3",
24
25
  "vue-toasted": "^1.1.28",
25
26
  "vue-toggles": "^1.1.4",
26
27
  "vue-upload-file": "^1.1.0",
@@ -63,4 +64,4 @@
63
64
  "type": "git",
64
65
  "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
65
66
  }
66
- }
67
+ }
@@ -4,7 +4,12 @@
4
4
  v-show="!carregando('painel')"
5
5
  class="barra"
6
6
  :style="'min-height:' + altura + 'px;'"
7
- :class="{ topo: posicao == 'topo', rodape: posicao == 'rodape' }"
7
+ :class="{
8
+ topo: posicao == 'topo',
9
+ rodape: posicao == 'rodape',
10
+ esconde: menu.escondeMostra,
11
+ mostra: !menu.escondeMostra,
12
+ }"
8
13
  >
9
14
  <div class="tamanho">
10
15
  <slot></slot>
@@ -30,13 +35,14 @@ export default {
30
35
  },
31
36
  computed: {
32
37
  ...mapGetters("generic", ["carregando"]),
38
+ ...mapState("generic", ["menu"]),
33
39
  },
34
40
  };
35
41
  </script>
36
42
 
37
43
  <style scoped>
38
44
  .barra {
39
- background-color: #fafafc;
45
+ background-color: white;
40
46
  position: fixed;
41
47
  width: 100%;
42
48
  overflow: hidden;
@@ -61,4 +67,12 @@ export default {
61
67
  bottom: 0px;
62
68
  border-top: 1px solid #e1e1e2;
63
69
  }
70
+
71
+ .esconde {
72
+ padding-left: 60px;
73
+ }
74
+
75
+ .mostra {
76
+ padding-left: 230px;
77
+ }
64
78
  </style>
@@ -0,0 +1,132 @@
1
+ <template>
2
+ <div>
3
+ <div class="foto-container" @click="escondeMostra = !escondeMostra">
4
+ <img
5
+ src="https://portal1.iff.edu.br/desenvolvimento-institucional/imagens/avatar.jpg/@@images/image.jpeg"
6
+ alt="Avatar"
7
+ />
8
+ </div>
9
+ <div class="perfil-container" v-if="escondeMostra">
10
+ <div class="item-header text-center">
11
+ <span>Conta</span>
12
+ </div>
13
+ <div class="perfil-conteudo" v-for="item in itens" :key="item.titulo">
14
+ <div class="item-conteudo" @click="navegarPara(item.nomeRota)">
15
+ <div class="titulo-container">
16
+ <span>
17
+ <i :class="item.classeIcone"></i>
18
+ <span class="titulo-perfil titulo-input">{{ item.titulo }}</span>
19
+ </span>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ <div class="perfil-conteudo" @click="executarSair">
24
+ <div class="item-conteudo">
25
+ <div class="titulo-container">
26
+ <span>
27
+ <i class="fas fa-sign-in"></i>
28
+ <span class="titulo-perfil titulo-input">Sair</span>
29
+ </span>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </template>
36
+ <script>
37
+ export default {
38
+ name: "Conta",
39
+ props: {
40
+ itens: [],
41
+ sair: Function,
42
+ },
43
+ data() {
44
+ return {
45
+ escondeMostra: false,
46
+ };
47
+ },
48
+ methods: {
49
+ navegarPara(nomeRota) {
50
+ this.$router.push({ name: nomeRota });
51
+ this.escondeMostra = false;
52
+ },
53
+ executarSair() {
54
+ if (this.sair) this.sair();
55
+ },
56
+ },
57
+ };
58
+ </script>
59
+ <style scoped>
60
+ .foto-container {
61
+ margin-top: -32px;
62
+ padding-right: 10px;
63
+ cursor: pointer;
64
+ position: fixed;
65
+ float: right;
66
+ left: auto;
67
+ right: 0;
68
+ }
69
+
70
+ img {
71
+ border-radius: 50%;
72
+ height: 45px;
73
+ width: 45px;
74
+ }
75
+
76
+ .perfil-container {
77
+ position: fixed;
78
+ float: right;
79
+ left: auto;
80
+ right: 0;
81
+ margin-right: 20px;
82
+ height: 100%;
83
+ z-index: 1000;
84
+ width: 190px;
85
+ margin-top: 26px;
86
+ background-color: white;
87
+ height: auto;
88
+ border-bottom: 1px solid #e9ebec;
89
+ }
90
+
91
+ .perfil-conteudo {
92
+ right: 0;
93
+ height: 100%;
94
+ z-index: 101;
95
+ width: 190px;
96
+ height: auto;
97
+ }
98
+
99
+ .item-header {
100
+ padding: 8px 20px;
101
+ background: #f8f8f8;
102
+ border-left: 1px solid #e9ebec;
103
+ border-right: 1px solid #e9ebec;
104
+ border-top: 1px solid #e9ebec;
105
+ }
106
+
107
+ .item-conteudo {
108
+ padding-left: 15px;
109
+ height: 45px;
110
+ background: white;
111
+ border: 1px solid #e9ebec;
112
+ border-bottom: 0px solid #e9ebec;
113
+ cursor: pointer;
114
+ }
115
+
116
+ .item-conteudo:hover {
117
+ background: #f8f8f8;
118
+ }
119
+
120
+ .titulo-container {
121
+ padding-top: 10px;
122
+ }
123
+
124
+ .titulo-container:hover {
125
+ padding-top: 10px;
126
+ color: #37597c;
127
+ }
128
+
129
+ .titulo-perfil {
130
+ padding-left: 10px;
131
+ }
132
+ </style>
@@ -1,139 +1,113 @@
1
1
  <template>
2
- <div id="page">
3
- <div id="header" :style="'background-color:' + corTopo">
4
- <a href="#menu"><span></span></a>
5
- </div>
6
- <nav id="menu">
7
- <div id="panel-menu">
8
- <ul v-for="item in menu" :key="item.titulo">
9
- <li>
10
- <span>{{ item.titulo }}</span>
11
- <ul>
12
- <li v-for="primeiroNivel in item.primeiroNivel" :key="primeiroNivel.titulo">
13
- <span
14
- :class="{ titulo: primeiroNivel.rotaDestino != '' }"
15
- @click="navegarPara(primeiroNivel.rotaDestino)"
16
- >{{ primeiroNivel.titulo }}</span
17
- >
18
- <ul
19
- v-for="segundoNivel in primeiroNivel.segundoNivel"
20
- :key="segundoNivel.titulo"
21
- >
22
- <li>
23
- <span
24
- :class="{ titulo: segundoNivel.rotaDestino != '' }"
25
- @click="navegarPara(segundoNivel.rotaDestino)"
26
- >{{ segundoNivel.titulo }}</span
27
- >
28
- </li>
29
- </ul>
30
- </li>
31
- </ul>
32
- </li>
33
- </ul>
34
- </div>
35
- <ul id="panel-account" data-mm-title="Conta">
36
- <li v-for="item in conta" :key="item.titulo">
37
- <span class="titulo" @click="navegarPara(item.rotaDestino)">{{
38
- item.titulo
39
- }}</span>
40
- </li>
41
- <li>
42
- <span class="titulo" @click="executarSair()">Sair</span>
43
- </li>
44
- </ul>
45
- </nav>
2
+ <div>
3
+ <sidebar-menu
4
+ :menu="menu.itens"
5
+ :collapsed="menu.escondeMostra"
6
+ theme="white-theme"
7
+ width="220px"
8
+ />
46
9
  </div>
47
10
  </template>
11
+
48
12
  <script>
13
+ import { SidebarMenu } from "vue-sidebar-menu";
14
+ import { mapState, mapMutations } from "vuex";
15
+
49
16
  export default {
50
- name: "Menu",
51
- props: {
52
- corTopo: {
53
- type: String,
54
- default: "red",
55
- },
56
- menu: Array,
57
- conta: Array,
58
- sair: Function,
17
+ components: {
18
+ SidebarMenu,
19
+ },
20
+ data() {
21
+ return {
22
+ tamanhoPagina: "0",
23
+ windowWidth: 0,
24
+ windowHeight: 0,
25
+ };
26
+ },
27
+ created() {
28
+ this.tamanhoPagina = window.innerWidth;
29
+ var corpo = document.getElementsByTagName("body")[0];
30
+ corpo.style = "margin-left: 220px;transition: all 0.2s ease-in-out;";
59
31
  },
60
32
  mounted() {
61
- new Mmenu(
62
- document.querySelector("#menu"),
63
- {
64
- backButton: {
65
- close: false,
66
- },
67
- setSelected: {
68
- hover: false,
69
- parent: false,
70
- },
71
- counters: {
72
- add: true,
73
- },
74
- iconbar: {
75
- use: false,
76
- top: ['<a href="#/"><span class="fas fa-bars"></span></a>'],
77
- },
78
- searchfield: {
79
- add: true,
80
- placeholder: "Pesquisar",
81
- splash: "<p>Digite sua pesquisa</p>",
82
- title: "Pesquisar",
83
- noResults: "Nenhum resultado",
84
- },
85
- iconPanels: {
86
- add: true,
87
- visible: 1,
88
- },
89
- sidebar: {
90
- collapsed: {
91
- use: false,
92
- },
93
- expanded: {
94
- use: "(min-width: 1000px)",
95
- },
96
- },
97
- navbars: [
98
- {
99
- content: ["searchfield"],
100
- },
101
- {
102
- type: "tabs",
103
- content: [
104
- '<a href="#panel-menu"><i class="fas fa-ellipsis-h"></i> <span style="margin-left:5px"> Menu</span></a>',
105
- '<a href="#panel-account"><i class="fa fa-user"></i> <span style="margin-left:5px"> Conta</span></a>',
106
- ],
107
- },
108
- {
109
- content: ["prev", "breadcrumbs"],
110
- },
111
- ],
112
- },
113
- {
114
- searchfield: {
115
- cancel: true,
116
- clear: true,
117
- },
118
- }
119
- );
33
+ this.esconderBotaoRodape();
34
+ this.escondeMostra(false);
35
+
36
+ this.$nextTick(function () {
37
+ window.addEventListener("resize", this.getWindowWidth);
38
+ window.addEventListener("resize", this.getWindowHeight);
39
+ this.getWindowWidth();
40
+ this.getWindowHeight();
41
+ });
42
+ },
43
+ beforeDestroy() {
44
+ window.removeEventListener("resize", this.getWindowWidth);
45
+ window.removeEventListener("resize", this.getWindowHeight);
46
+ },
47
+ updated() {
48
+ this.esconderBotaoRodape();
120
49
  },
121
50
  methods: {
122
- executarSair() {
123
- if (this.sair) this.sair();
51
+ ...mapMutations("generic", ["escondeMostraMenu"]),
52
+ escondeMostra(esconde) {
53
+ var corpo = document.getElementsByTagName("body")[0];
54
+ this.escondeMostraMenu(esconde);
55
+ if (esconde) {
56
+ corpo.style = "margin-left: 50px;transition: all 0.2s ease-in-out;";
57
+ } else {
58
+ corpo.style = "margin-left: 220px;transition: all 0.2s ease-in-out;";
59
+ }
124
60
  },
125
- navegarPara(rotaDestino) {
126
- if (rotaDestino == "") return;
127
- this.$router.push({
128
- name: rotaDestino,
129
- });
61
+ getWindowWidth(event) {
62
+ this.windowWidth = document.documentElement.clientWidth;
63
+ },
64
+ getWindowHeight(event) {
65
+ this.windowHeight = document.documentElement.clientHeight;
66
+ },
67
+ esconderBotaoRodape() {
68
+ var botao = document.getElementsByClassName("collapse-btn")[0];
69
+ botao.style = "visibility: hidden !important;";
130
70
  },
131
71
  },
72
+ watch: {
73
+ windowWidth: function () {
74
+ if (this.windowWidth < 1280) {
75
+ this.escondeMostra(true);
76
+ } else {
77
+ this.escondeMostra(false);
78
+ }
79
+ },
80
+ "menu.escondeMostra": function (value) {
81
+ this.escondeMostra(value);
82
+ },
83
+ },
84
+ computed: {
85
+ ...mapState("generic", ["menu"]),
86
+ },
132
87
  };
133
88
  </script>
134
89
 
135
- <style scoped>
136
- .titulo {
137
- cursor: pointer;
90
+ <style>
91
+ .v-sidebar-menu .vsm-title {
92
+ font-size: 14px !important;
93
+ font-weight: normal !important;
94
+ }
95
+
96
+ .v-sidebar-menu.white-theme .vsm-dropdown > .vsm-list {
97
+ background-color: #fafafc !important;
98
+ }
99
+
100
+ .v-sidebar-menu {
101
+ background-color: white !important;
102
+ border-right: 1px solid #e1e1e2;
103
+ }
104
+
105
+ .v-sidebar-menu.white-theme .vsm-item.first-item > .vsm-link > .vsm-icon {
106
+ color: #4680a5 !important;
107
+ }
108
+
109
+ .v-sidebar-menu .vsm-arrow:after {
110
+ font-family: "Font Awesome 5 Pro" !important;
111
+ content: "\f105" !important;
138
112
  }
139
113
  </style>
@@ -25,24 +25,25 @@
25
25
  </div>
26
26
  </div>
27
27
  </div>
28
- <br v-show="mostrarBotoes"/>
28
+ <br v-show="mostrarBotoes" />
29
29
  <div class="row" v-show="mostrarBotoes">
30
30
  <div class="col-12" v-show="mostrarBotoes">
31
31
  <slot name="conteudo-botoes"></slot>
32
32
  </div>
33
33
  </div>
34
- <br v-show="mostrarBotoes || mostrarPesquisa"/>
34
+ <br v-show="mostrarBotoes || mostrarPesquisa" />
35
35
  <div class="row" v-show="mostrarBotoes || mostrarPesquisa">
36
36
  <div class="col-8">
37
37
  <div v-show="mostrarPesquisa"><Pesquisa /></div>
38
38
  </div>
39
39
  </div>
40
- <br v-show="mostrarPesquisa"/>
40
+ <br v-show="mostrarPesquisa" />
41
41
  <div>
42
42
  <slot name="conteudo-principal"></slot>
43
43
  </div>
44
44
  </div>
45
45
  </div>
46
+ <br /><br /><br />
46
47
  </div>
47
48
  </template>
48
49
 
@@ -107,10 +108,9 @@ export default {
107
108
  }
108
109
 
109
110
  .c-titulo-pagina {
110
- font-size: 18px;
111
+ font-size: 20px;
111
112
  margin-top: 16px;
112
113
  color: #577696;
113
- font-weight: bold;
114
114
  }
115
115
 
116
116
  .c-voltar {
@@ -1,22 +1,68 @@
1
1
  <template>
2
- <div class="topo"></div>
2
+ <div>
3
+ <div
4
+ class="topo"
5
+ :class="{ esconde: menu.escondeMostra, mostra: !menu.escondeMostra }"
6
+ :style="'background-color:' + corTopo"
7
+ >
8
+ <div class="lado-a-lado" @click="mostrar = !mostrar">
9
+ <span class="icone"><i class="fal fa-bars"></i></span>
10
+ </div>
11
+ <div class="lado-a-lado"><slot></slot></div>
12
+ </div>
13
+ <br />
14
+ </div>
3
15
  </template>
4
16
 
5
17
  <script>
18
+ import { mapState, mapMutations } from "vuex";
19
+
6
20
  export default {
7
21
  name: "Topo",
22
+ props: {
23
+ corTopo: {
24
+ type: String,
25
+ default: "#4680A5",
26
+ },
27
+ },
28
+ data() {
29
+ return { mostrar: false };
30
+ },
31
+ methods: {
32
+ ...mapMutations("generic", ["escondeMostraMenu"]),
33
+ },
34
+ computed: {
35
+ ...mapState("generic", ["menu"]),
36
+ },
37
+ watch: {
38
+ mostrar(valor) {
39
+ this.escondeMostraMenu(valor);
40
+ },
41
+ },
8
42
  };
9
43
  </script>
10
44
 
11
45
  <style scoped>
12
46
  .topo {
13
- position: fixed;
14
- display: block;
15
- margin: 0 auto;
16
- height: 60px;
47
+ height: 50px;
17
48
  width: 100%;
18
- background-color: #37597c;
19
- overflow: hidden;
20
- z-index: 10;
49
+ position: fixed;
50
+ top: 0;
51
+ left: 0;
52
+ z-index: 20;
53
+ }
54
+
55
+ .esconde {
56
+ padding-left: 60px;
57
+ }
58
+
59
+ .mostra {
60
+ padding-left: 230px;
61
+ }
62
+
63
+ .icone {
64
+ font-size: 25px;
65
+ color: white;
66
+ cursor: pointer;
21
67
  }
22
68
  </style>
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div :class="{ 'div-mensagem': !modal.abrir }" v-if="notificacoes.length > 0">
3
- <Alerta tipo="perigo">
4
- <div v-for="notificacao in notificacoes">
3
+ <div v-for="notificacao in notificacoes">
4
+ <Alerta tipo="perigo">
5
5
  {{ notificacao.mensagem }}
6
- </div>
7
- </Alerta>
6
+ </Alerta>
7
+ </div>
8
8
  <b-alert
9
9
  v-show="false"
10
10
  :show="contagemRegressiva"
@@ -150,8 +150,8 @@ export default {
150
150
  },
151
151
  watch: {
152
152
  metodoExecutadoApi: function (value) {
153
- if (value != "obterTodosApi" && value != "" && value != "escolherApi") {
154
- // this.obterTodos();
153
+ if (value == "deleteAllApi") {
154
+ this.obterTodos();
155
155
  }
156
156
  },
157
157
  buscouPesquisa: function () {
@@ -6,6 +6,9 @@ import Token from "@nixweb/nixloc-ui/src/config/token";
6
6
  export default {
7
7
  namespaced: true,
8
8
  state: {
9
+ menu: {
10
+ escondeMostra: false, itens: []
11
+ },
9
12
  modal: {
10
13
  nome: undefined,
11
14
  abrir: false
@@ -66,6 +69,17 @@ export default {
66
69
  },
67
70
  },
68
71
  mutations: {
72
+ insereItemMenu: (state, itens) => {
73
+ itens.forEach(function (obj) {
74
+ state.menu.itens.push(obj);
75
+ });
76
+ },
77
+ removeItensMenu: (state) => {
78
+ state.menu.itens = [];
79
+ },
80
+ escondeMostraMenu: (state, escondeMostra) => {
81
+ state.menu.escondeMostra = escondeMostra;
82
+ },
69
83
  abrirModal: (state, nome) => {
70
84
  state.modal.nome = nome;
71
85
  state.modal.abrir = true;
@@ -233,7 +247,7 @@ export default {
233
247
  })
234
248
  .then((response) => {
235
249
  if (response.data.sucesso) {
236
- context.commit('insereMetodoExecutadoApi', 'deleteApi')
250
+ context.commit('insereMetodoExecutadoApi', 'deleteAllApi');
237
251
  context.commit('insereToast', 'deleteApiSucesso');
238
252
  context.commit('removeNotificacao');
239
253
  return response.data;