@nixweb/nixloc-ui 0.0.115 → 0.0.118

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.115",
3
+ "version": "0.0.118",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -3,7 +3,7 @@
3
3
  <label>
4
4
  <span class="titulo">{{ titulo }}</span>
5
5
  </label>
6
- <div class="selecione">
6
+ <div class="selecione" :class="{ borda: mostrarBorda }">
7
7
  <multiselect
8
8
  @open="aoAbrir"
9
9
  @select="aoSelecionar"
@@ -64,6 +64,10 @@ export default {
64
64
  type: Boolean,
65
65
  default: false,
66
66
  },
67
+ mostrarBorda: {
68
+ type: Boolean,
69
+ default: true,
70
+ },
67
71
  dados: Array,
68
72
  value: Object,
69
73
  },
@@ -124,9 +128,12 @@ div.antes-lista {
124
128
  }
125
129
 
126
130
  .selecione {
127
- height: 34px;
128
- border-bottom: 1px solid #d6d6d6;
129
- border-radius: 2px !important;
131
+ height: 38px;
132
+ border-radius: 5px !important;
130
133
  margin-bottom: 20px;
131
134
  }
135
+
136
+ .borda {
137
+ border: 1px solid #dbdee0 !important;
138
+ }
132
139
  </style>
@@ -57,8 +57,4 @@ export default {
57
57
  font-size: 18px;
58
58
  margin-bottom: 5px;
59
59
  }
60
- .hr {
61
- background: #FAFAFC !important;
62
- height: 1px !important;
63
- }
64
60
  </style>
@@ -6,10 +6,9 @@
6
6
  <Dica :campo="campo" :formNome="formNome" />
7
7
  </label>
8
8
  <div class="inner-addon right-addon">
9
- <i
10
- v-if="notificacoes.length > 0 && formSujo"
11
- class="requerido glyphicon fas fa-exclamation-triangle"
12
- ></i>
9
+ <div class="requerido glyphicon" v-if="notificacoes.length > 0 && formSujo">
10
+ <i class="fas fa-exclamation-triangle"></i>
11
+ </div>
13
12
  <slot v-else></slot>
14
13
  <input
15
14
  type="text"
@@ -157,6 +156,6 @@ export default {
157
156
  }
158
157
 
159
158
  .margem-botao {
160
- margin-top: -15px;
159
+ margin-top: -3px;
161
160
  }
162
161
  </style>
@@ -10,7 +10,7 @@ export default {
10
10
  props: {
11
11
  bordaArredondada: {
12
12
  type: Number,
13
- default: 5,
13
+ default: 8,
14
14
  },
15
15
  },
16
16
  };
@@ -19,6 +19,9 @@ export default {
19
19
  .moldura {
20
20
  border: 1px solid #dbdfe9;
21
21
  background-color: transparent;
22
- padding: 15px;
22
+ padding-top: 15px;
23
+ padding-left: 30px;
24
+ padding-right: 30px;
25
+ padding-bottom: 10px;
23
26
  }
24
27
  </style>
@@ -120,6 +120,7 @@ export default {
120
120
 
121
121
  .icone{
122
122
  opacity: 0.8;
123
+ font-size: 20px;
123
124
  }
124
125
 
125
126
 
@@ -50,7 +50,7 @@ export default {
50
50
  toolbarContainer.appendChild(editor.ui.view.toolbar.element);
51
51
  },
52
52
  modificou() {
53
- this.insereEvento({ nome: "documentoEditoFocus" });
53
+ this.insereEvento({ nome: "documentoEditorFocus" });
54
54
  },
55
55
  },
56
56
  };
@@ -14,13 +14,13 @@ export default {
14
14
  },
15
15
  props: {
16
16
  template: String,
17
- dados: Object,
17
+ d: Object,
18
18
  },
19
19
  methods: {
20
- somaGrupo(grupoNome) {
20
+ sMg(grN) {
21
21
  let total = "";
22
- this.dados.produto.forEach((x) => {
23
- if (x.grupoNome === grupoNome) return (total = x.grupoTotal);
22
+ this.d.produto.forEach((x) => {
23
+ if (x.pGp === grN) return (total = x.pGpT);
24
24
  });
25
25
  return total;
26
26
  },
@@ -28,7 +28,7 @@ export default {
28
28
  computed: {
29
29
  ...mapGetters("generic", ["agruparPor"]),
30
30
  produtoAgrupado() {
31
- return this.agruparPor({ array: this.dados.produto, key: "grupoNome" });
31
+ return this.agruparPor({ array: this.d.produto, key: "pGp" });
32
32
  },
33
33
  },
34
34
  };
@@ -1,74 +1,97 @@
1
1
  <template>
2
2
  <div>
3
- <div class="div-alerta">
4
- <Alerta tipo="info">
5
- <span>
6
- Utilize os parâmetros para que as informações sejam carregadas de forma
7
- dinâmicas!</span
8
- >
9
- </Alerta>
10
- </div>
11
- <table class="table table-responsive-xs">
12
- <thead>
13
- <tr>
14
- <th><span class="titulo-cabecalho">Parâmetro</span></th>
15
- <th><span class="titulo-cabecalho">Descrição</span></th>
16
- <th><span class="titulo-cabecalho">Exemplo</span></th>
17
- </tr>
18
- </thead>
19
- <tbody v-for="(legenda, grupoNome) in agrupado">
20
- <td class="grupo" colspan="8">
21
- <div>{{ grupoNome }}</div>
22
- </td>
23
- <tr v-for="item in legenda">
24
- <td>
25
- <span> {{ item.parametro }}</span>
3
+ <Pesquisa />
4
+ <br />
5
+ <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
6
+ <table class="table table-responsive-xs">
7
+ <thead>
8
+ <tr>
9
+ <th><span class="titulo-cabecalho">Parâmetro</span></th>
10
+ <th><span class="titulo-cabecalho">Descrição</span></th>
11
+ <th><span class="titulo-cabecalho">Exemplo</span></th>
12
+ </tr>
13
+ </thead>
14
+ <tbody v-for="(legendaLocal, grupoNome) in agrupado">
15
+ <td class="grupo text-center" colspan="8">
16
+ <div>{{ grupoNome.toUpperCase() }}</div>
26
17
  </td>
27
- <td>
28
- <span> {{ item.descricao }}</span>
29
- </td>
30
- <td>
31
- <span> {{ item.exemplo }}</span>
32
- </td>
33
- </tr>
34
- </tbody>
35
- </table>
18
+ <tr v-for="item in legendaLocal">
19
+ <td class="parametro">
20
+ <span> {{ item.parametro }}</span>
21
+ </td>
22
+ <td>
23
+ <span> {{ item.descricao }}</span>
24
+ </td>
25
+ <td>
26
+ <span class="exemplo"> {{ item.exemplo }}</span>
27
+ </td>
28
+ </tr>
29
+ </tbody>
30
+ </table>
31
+ </BarraRolagem>
36
32
  </div>
37
33
  </template>
38
34
  <script>
39
- import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
35
+ import Pesquisa from "@nixweb/nixloc-ui/src/component/shared/Pesquisa.vue";
36
+ import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
40
37
 
41
- import { mapGetters } from "vuex";
38
+ import { mapGetters, mapState, mapMutations } from "vuex";
42
39
 
43
40
  export default {
44
41
  name: "LegendaParametro",
45
42
  components: {
46
- Alerta,
43
+ BarraRolagem,
44
+ Pesquisa,
45
+ },
46
+ props: {
47
+ legenda: [],
47
48
  },
48
49
  data() {
49
50
  return {
50
- legenda: [
51
- {
52
- grupoNome: "Locação",
53
- parametro: "{{d.l.n}}",
54
- descricao: "Número da Locação",
55
- exemplo: "200",
56
- },
57
- {
58
- grupoNome: "Locação",
59
- parametro: "{{d.l.dA}}",
60
- descricao: "Número da Locação",
61
- exemplo: "200",
62
- },
63
- ],
51
+ legendaLocal: [],
64
52
  };
65
53
  },
54
+ mounted() {
55
+ this.legendaLocal = this.legenda;
56
+ },
57
+ methods: {
58
+ ...mapMutations("generic", ["removeCarregando"]),
59
+ },
66
60
  computed: {
67
61
  ...mapGetters("generic", ["agruparPor"]),
62
+ ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
68
63
  agrupado() {
69
- var teste = this.agruparPor({ array: this.legenda, key: "grupoNome" });
70
- console.log(teste);
71
- return teste;
64
+ var lista = this.agruparPor({ array: this.legendaLocal, key: "grupoNome" });
65
+ return lista;
66
+ },
67
+ },
68
+ watch: {
69
+ buscouPesquisa: function () {
70
+ let legenda = [];
71
+
72
+ let self = this;
73
+ setTimeout(function () {
74
+ self.legenda.forEach(function (item) {
75
+ if (self.pesquisa.filtro.conteudo == "igual") {
76
+ if (item.descricao == self.pesquisa.conteudo) legenda.push(item);
77
+ }
78
+
79
+ if (self.pesquisa.filtro.conteudo == "contem") {
80
+ if (item.descricao.includes(self.pesquisa.conteudo)) legenda.push(item);
81
+ }
82
+ });
83
+
84
+ self.legendaLocal = legenda;
85
+
86
+ self.removeCarregando(["pesquisar", "limpar"]);
87
+ }, 300);
88
+ },
89
+ limpouPesquisa: function () {
90
+ let self = this;
91
+ setTimeout(function () {
92
+ self.legendaLocal = self.legenda;
93
+ self.removeCarregando(["pesquisar", "limpar"]);
94
+ }, 300);
72
95
  },
73
96
  },
74
97
  };
@@ -93,9 +116,20 @@ export default {
93
116
 
94
117
  .grupo {
95
118
  background-color: #fafafc;
119
+ font-size: 14px;
120
+ font-weight: 500;
96
121
  }
97
122
 
98
123
  .div-alerta {
99
124
  margin-bottom: 20px;
100
125
  }
126
+
127
+ .parametro {
128
+ width: 250px;
129
+ }
130
+
131
+ .exemplo {
132
+ font-size: 14px;
133
+ color: rgb(31, 31, 82);
134
+ }
101
135
  </style>
@@ -1,29 +1,37 @@
1
1
  <template>
2
2
  <b-row>
3
- <b-col xs="12" sm="12" md="12" lg="5" xl="5">
3
+ <b-col xs="12" sm="12" md="12" lg="7" xl="6">
4
4
  <div class="margem">
5
- <input
6
- type="text"
7
- name="pesquisar"
8
- placeholder="Pesquisar ..."
9
- @keyup="verificaLimpaPesquisa()"
10
- @keyup.enter.prevent="buscaPesquisa()"
11
- v-model="pesquisa.conteudo"
12
- />
5
+ <div class="moldura">
6
+ <b-row>
7
+ <b-col sm="9">
8
+ <input
9
+ type="text"
10
+ name="pesquisar"
11
+ placeholder="Pesquisar ..."
12
+ @keyup="verificaLimpaPesquisa()"
13
+ @keyup.enter.prevent="buscaPesquisa()"
14
+ v-model="pesquisa.conteudo"
15
+ /></b-col>
16
+ <b-col sm="3">
17
+ <div class="div-escolher">
18
+ <EscolherEstatico
19
+ campoAlvo="filtro"
20
+ :somenteConsulta="true"
21
+ :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
22
+ v-model="pesquisa.filtro"
23
+ :mostrarBorda="false"
24
+ :dados="[
25
+ { conteudo: 'Contém', id: 'contem' },
26
+ { conteudo: 'Igual', id: 'igual' },
27
+ ]"
28
+ />
29
+ </div>
30
+ </b-col>
31
+ </b-row>
32
+ </div>
13
33
  </div>
14
34
  </b-col>
15
- <b-col xs="12" sm="12" md="12" lg="2" xl="2">
16
- <EscolherEstatico
17
- campoAlvo="filtro"
18
- :somenteConsulta="true"
19
- :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
20
- v-model="pesquisa.filtro"
21
- :dados="[
22
- { conteudo: 'Contém', id: 'contem' },
23
- { conteudo: 'Igual', id: 'igual' },
24
- ]"
25
- />
26
- </b-col>
27
35
  <b-col xs="4" sm="4" md="4" lg="4" xl="4">
28
36
  <div class="div-botao">
29
37
  <Botao
@@ -99,20 +107,20 @@ export default {
99
107
  }
100
108
 
101
109
  .margem {
102
- padding-top: 25px;
110
+ padding-top: 28px;
103
111
  }
104
112
 
105
113
  .div-botao {
106
- padding-top: 25px;
114
+ padding-top: 33px;
107
115
  }
108
116
 
109
117
  ::placeholder {
110
118
  color: #b8c4d2;
111
119
  }
112
120
 
113
- input[type="text"] {
121
+ .moldura {
114
122
  width: 100%;
115
- height: 40px;
123
+ height: 45px;
116
124
  font-size: 14px;
117
125
  padding: 5px 8px 6px 15px;
118
126
  background-color: rgb(255, 255, 255);
@@ -125,7 +133,22 @@ input[type="text"] {
125
133
  transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
126
134
  }
127
135
 
136
+ input[type="text"] {
137
+ width: 100%;
138
+ height: 30px;
139
+ font-size: 14px;
140
+ border: 0px solid white;
141
+ background-color: rgb(255, 255, 255);
142
+ margin-bottom: 50px;
143
+ }
144
+
128
145
  input[type="text"]:focus {
129
146
  outline: none;
130
147
  }
148
+
149
+ .div-escolher {
150
+ margin-top: -30px;
151
+ margin-right: 5px;
152
+ }
153
+
131
154
  </style>
@@ -236,14 +236,14 @@ tr:hover {
236
236
  }
237
237
 
238
238
  .titulo-cabecalho {
239
- font-size: 14px;
239
+ font-size: 13px;
240
240
  color: #757d8c;
241
241
  font-weight: 400;
242
242
  text-transform: uppercase;
243
243
  }
244
244
 
245
245
  .tabela-numero {
246
- font-size: 15px;
246
+ font-size: 14px;
247
247
  font-weight: bold;
248
248
  }
249
249
 
@@ -253,13 +253,13 @@ tr:hover {
253
253
  }
254
254
 
255
255
  .tabela-valor {
256
- font-size: 15px;
256
+ font-size: 14px;
257
257
  min-width: 100px;
258
258
  }
259
259
 
260
260
  .link {
261
261
  color: #3F529B;
262
- font-size: 15px;
262
+ font-size: 14px;
263
263
  font-weight: 400;
264
264
  cursor: pointer;
265
265
  }
@@ -72,15 +72,13 @@
72
72
  <Modal titulo="Salvar" :largura="500" v-show="mostrarModal('salvarDocumento')">
73
73
  <slot></slot>
74
74
  </Modal>
75
- <Modal titulo="Parâmetros" :largura="900" v-if="mostrarModal('legenda')">
76
- <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
77
- <LegendaParametro />
78
- </BarraRolagem>
75
+ <Modal titulo="Parâmetros" :largura="1100" v-if="mostrarModal('legenda')">
76
+ <LegendaParametro v-if="modal.abrir" :legenda="legenda" />
79
77
  </Modal>
80
78
  <Modal titulo="Editor de Código" :largura="900" v-if="mostrarModal('codigo')">
81
79
  <CodigoEditor v-if="modal.abrir" />
82
80
  </Modal>
83
- <Modal titulo="Visualizar" :largura="1100" v-if="mostrarModal('visualizar')">
81
+ <Modal titulo="Visualizar" :largura="1200" v-if="mostrarModal('visualizar')">
84
82
  <div v-if="modal.abrir">
85
83
  <b-row>
86
84
  <b-col class="text-center">
@@ -96,10 +94,12 @@
96
94
  </b-col>
97
95
  </b-row>
98
96
  <br />
99
- <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
100
- <div class="a4">
101
- <div id="printMe">
102
- <DocumentoPreview :template="documentoPreview" :dados="dados" />
97
+ <BarraRolagem :alturaMinima="500" :alturaMaxima="500">
98
+ <div>
99
+ <div class="a4">
100
+ <div id="printMe">
101
+ <DocumentoPreview :template="documentoPreview" :d="dados" />
102
+ </div>
103
103
  </div>
104
104
  </div>
105
105
  </BarraRolagem>
@@ -149,6 +149,7 @@ export default {
149
149
  props: {
150
150
  painel: Object,
151
151
  dados: Object,
152
+ legenda: Array,
152
153
  },
153
154
  data() {
154
155
  return {
@@ -198,7 +199,7 @@ export default {
198
199
  evento: {
199
200
  handler(evento) {
200
201
  if (evento.nome == "documentoEditorModificado") this.salvarDesabilitado = true;
201
- if (evento.nome == "documentoEditoFocus") this.salvarDesabilitado = false;
202
+ if (evento.nome == "documentoEditorFocus") this.salvarDesabilitado = false;
202
203
  },
203
204
  deep: true,
204
205
  },
@@ -213,7 +214,7 @@ export default {
213
214
  margin-top: 25px;
214
215
  }
215
216
  .a4 {
216
- width: 22cm;
217
+ max-width: 1140px;
217
218
  min-height: 21cm;
218
219
  padding: 20px;
219
220
  border: 1px hsl(0, 0%, 82.7%) solid;
@@ -222,4 +223,5 @@ export default {
222
223
  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
223
224
  margin: 0 auto;
224
225
  }
226
+
225
227
  </style>
@@ -11,7 +11,7 @@
11
11
  <b-row>
12
12
  <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="todos.salvo.length > 0">
13
13
  <div><i class="fas fa-file-alt icone-salvo"></i></i> Personalizado</div>
14
- <hr />
14
+ <hr class="hr" />
15
15
  <div class="div-moldura" v-for="relatorio in todos.salvo">
16
16
  <div>
17
17
  <Moldura :bordaArredondada="12">
@@ -41,7 +41,7 @@
41
41
  </b-col>
42
42
  <b-col xs="12" sm="12" md="12" lg="6" xl="6">
43
43
  <div><i class="fas fa-file-chart-line"></i> Padrão</div>
44
- <hr />
44
+ <hr class="hr" />
45
45
  <div class="div-moldura" v-for="relatorio in todos.padrao">
46
46
  <div>
47
47
  <Moldura :bordaArredondada="12">
@@ -219,4 +219,9 @@ export default {
219
219
  font-size: 13.5px;
220
220
  color: rgb(117, 117, 117);
221
221
  }
222
+
223
+ .hr {
224
+ background: #FAFAFC !important;
225
+ height: 1px !important;
226
+ }
222
227
  </style>
@@ -28,7 +28,7 @@ export default {
28
28
  tipo: undefined,
29
29
  },
30
30
  ids: undefined,
31
- pesquisa: { conteudo: "", filtro: { conteudo: "contem", id: "contem" } },
31
+ pesquisa: { conteudo: "", filtro: { text: "Contém", value: "contem" } },
32
32
  documentoHtml: "",
33
33
  EscolherEstatico: { dataHora: undefined, campoAlvo: undefined, valor: undefined },
34
34
  buscouPesquisa: false,
@@ -88,23 +88,23 @@ export default {
88
88
  };
89
89
 
90
90
  if (th) {
91
- let ehProdutoAgrupado = th.innerText.includes("n.grupo");
91
+ let ehPorGrupo = th.innerText.includes("n.grupo");
92
92
  let ehProduto = th.innerText.includes("n.produto");
93
93
  let ehPeriodo = th.innerText.includes("n.periodo");
94
94
  let ehPagamento = th.innerText.includes("n.pagamento");
95
95
 
96
96
  if (ehProduto) {
97
- obj.vForSimples = "v-for='n in dados.produto'";
97
+ obj.vForSimples = "v-for='p in d.produto'";
98
98
  config.push(obj);
99
99
  } else if (ehPeriodo) {
100
- obj.vForSimples = "v-for='n in dados.periodo'";
100
+ obj.vForSimples = "v-for='pe in d.periodo'";
101
101
  config.push(obj);
102
102
  } else if (ehPagamento) {
103
- obj.vForSimples = "v-for='n in dados.pagamento'";
103
+ obj.vForSimples = "v-for='pg in d.pagamento'";
104
104
  config.push(obj);
105
- } else if (ehProdutoAgrupado) {
106
- obj.vForAgrupado = "v-for='(produto, grupoNome) in produtoAgrupado'";
107
- obj.vForSimples = "v-for='n in produto'";
105
+ } else if (ehPorGrupo) {
106
+ obj.vForAgrupado = "v-for='(produto, grN) in produtoAgrupado'";
107
+ obj.vForSimples = "v-for='p in d.produto'";
108
108
 
109
109
  var posicaoInicio = documentoHtml.split("<tbody>", sequencial + 1).join("<tbody>").length;
110
110
  var posicaoFim = documentoHtml.split("</tbody>", sequencial + 1).join("</tbody>").length;
@@ -132,6 +132,10 @@ export default {
132
132
  replace += `.replace("<tbody>${x.nomeGrupo}<tr>", "<tbody ${x.vForAgrupado}>${x.nomeGrupoReplace}<tr ${x.vForSimples}>")`;
133
133
  });
134
134
 
135
+
136
+ console.log(config);
137
+
138
+
135
139
  var ret = retorno.replaceAll("\"", "'");
136
140
  ret = eval(`ret${replace}`);
137
141
 
@@ -140,7 +144,6 @@ export default {
140
144
  .replaceAll("n.produto", "")
141
145
  .replaceAll("n.periodo", "")
142
146
  .replaceAll("n.pagamento", "")
143
- .replaceAll(";", "!important;")
144
147
  .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
145
148
 
146
149
  return classeImportant;