@znap/components-vue2 1.0.5 → 1.0.7

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/README.md CHANGED
@@ -1,29 +1,244 @@
1
- # znap-components-vue2-ts
1
+ # @znap/components-vue2
2
2
 
3
- ## Project setup
4
- ```
5
- npm install
6
- ```
3
+ ### Inicio Rapido
7
4
 
8
- ### Compiles and hot-reloads for development
9
- ```
10
- npm run serve
5
+ Utilizando [pnpm](https://pnpm.io/)
6
+ ```bash
7
+ pnpm install @znap/components-vue2
11
8
  ```
12
9
 
13
- ### Compiles and minifies for production
14
- ```
15
- npm run build
10
+ Utilizando [npm](https://npmjs.com/)
11
+ ```bash
12
+ npm install @znap/components-vue2
16
13
  ```
17
14
 
18
- ### Run your unit tests
19
- ```
20
- npm run test:unit
15
+ No arquivo **main.js** do Vue.
16
+
17
+ ```javascript
18
+ import Vue from "vue";
19
+ import * as ZnapComponents from '@znap/components-vue2';
20
+
21
+ // -- Configuraçoes do Hands on Table (Opicional)
22
+ import { registerAllModules } from "handsontable/registry";
23
+ import { registerLanguageDictionary, ptBR } from "handsontable/i18n";
24
+ import numbro from "numbro";
25
+ import numbroptBR from "numbro/dist/languages/pt-BR.min.js";
26
+
27
+ numbro.registerLanguage(numbroptBR);
28
+ numbro.setLanguage("pt-BR");
29
+ registerAllModules();
30
+ registerLanguageDictionary(ptBR);
31
+ // -- Fim
32
+
33
+ Vue.use(ZnapComponents.plugin, {
34
+ licenseKey: HOT_TABLE_LICENSE_KEY // CHAVE DE UTILIZAÇAO DO HANDS ON TABLE
35
+ })
21
36
  ```
22
37
 
23
- ### Lints and fixes files
38
+ ### Estrutura de importaçao da lib:
39
+
40
+ ```javascript
41
+ import * as ZnapComponents from '@znap/components-vue2';
42
+
43
+ // ZnapComponents.plugin: Plugin de instalaçao global de todos com componentes para utilizaçao sem importaçao no template vue.
44
+
45
+ // ZnapComponents.components: Retorna todos os componentes exportados pela lib
46
+
47
+ // ZnapComponents.utils: Retorna todas as funçoes uteis exportadas pela lib
24
48
  ```
25
- npm run lint
49
+
50
+ ### Utilizaçao do ZnapBaseCrudView
51
+
52
+ ```javascript
53
+ <template>
54
+ <ZnapBaseCrudView
55
+ v-if="viewSettings"
56
+ ref="baseCrudViewRef"
57
+ v-bind="viewSettings"
58
+ :onReload="onReload"
59
+ :onExport="onExportFile"
60
+ :onImport="onImportFile"
61
+ :onSave="onSave"
62
+ :onDelete="onDelete"
63
+ @update:rows-changed="updateRowsChanged"
64
+ @update:row="updateRow"
65
+ >
66
+ <template v-slot:footer-prepend>
67
+
68
+ </template>
69
+ </ZnapBaseCrudView>
70
+ </template>
71
+
72
+ <script>
73
+ import Vue from "vue";
74
+ import { utils as ZnapUtils } from "@znap/components-vue2";
75
+
76
+ export default {
77
+ data: () => ({
78
+ viewSettings: null,
79
+ viewMethods: null,
80
+ }),
81
+
82
+ async created() {
83
+ const { CrudViewConfigs } = ZnapUtils; // Importar a classe CrudViewConfigs da utils para gerar o template de dados da tela
84
+
85
+ const crudViewConfigs = new CrudViewConfigs({
86
+ viewTitle: "Titulo da pagina",
87
+ viewIcon: "icone_da_pagina",
88
+ primaryKey: "chave_primaria_da_tela",
89
+ endpoint: CrudViewConfigs.generateEndpoint(
90
+ "URL", {} // parametros
91
+ ),
92
+ useServerSidePagination?: false, // Habilita a paginaçao do lado do servidor por padrao vem desabilitado. (Se habilitado a busca tambem passa a acontecer do lado do servidor)
93
+ useServerSideSearch?: false, // Habilita busca do lado do servidor por padrao vem desabilitado
94
+ });
95
+
96
+ crudViewConfigs
97
+ .addPrimaryFilter({
98
+ column: "coluna_que_ira_buscar",
99
+ filterComponent: "v-autocomplete", // componentes disponiveis: v-autocomplete, v-checkbox, date-picker
100
+ itemsArray?: [] // Array de dados iniciais
101
+ initialValue?: null // Valor inicial
102
+ endpoint?: CrudViewConfigs.generateEndpoint(
103
+ "URL", {} // parametros
104
+ ),
105
+ componentProps: {
106
+ label: "Grupo empresarial",
107
+ clearable?: true,
108
+ required?: true // Se o valor for true, ele devera ser preenchido e se caso nao for preenchido ira exibir mensagem na tela
109
+ multiple?: false // Se for um v-autocomplete permite selecionar varios items
110
+ range?: false // Se for um date-picker permite selecionar um range de data.
111
+ }, // Props que sera passada para o componente
112
+ dependsOn?: '' // Filtro primario que possui dependencia
113
+ hooks?: {
114
+ afterChange: () => {
115
+ // Hook que sera disparado apos a mudança do valor
116
+
117
+ // * Pode ser utilizado para alterar os dados de outros filtros, ou entao realizar chamadas asincronas para atualizar o array de dados.
118
+ }
119
+ }
120
+ })
121
+
122
+ crudViewConfigs
123
+ .addSecondaryFilter({
124
+ column: "coluna_que_ira_buscar",
125
+ filterComponent: "v-autocomplete", // componentes disponiveis: v-autocomplete, v-checkbox, date-picker
126
+ itemsArray?: [] // Array de dados iniciais
127
+ initialValue?: null // Valor inicial
128
+ endpoint?: CrudViewConfigs.generateEndpoint(
129
+ "URL", {} // parametros
130
+ ),
131
+ componentProps: {
132
+ label: "Empresa",
133
+ clearable?: true,
134
+ multiple?: false // Se for um v-autocomplete permite selecionar varios items
135
+ range?: false // Se for um date-picker permite selecionar um range de data.
136
+ }, // Props que sera passada para o componente
137
+ dependsOn?: '' // Filtro secundario que possui dependencia
138
+ hooks?: {
139
+ afterChange: () => {
140
+ // Hook que sera disparado apos a mudança do valor
141
+
142
+ // * Pode ser utilizado para alterar os dados de outros filtros, ou entao realizar chamadas asincronas para atualizar o array de dados.
143
+ }
144
+ }
145
+ })
146
+
147
+ crudViewConfigs
148
+ .addTableOption({
149
+ column: "chave_que_recebera_as_options",
150
+ itemsArray?: [] // Array com dados iniciais
151
+ endpoint?: CrudViewConfigs.generateEndpoint(
152
+ "URL", {
153
+ // parametros
154
+ }
155
+ ),
156
+ formatter?: (value) => {
157
+ // Logica para formatar o dado quando for exibir na tabela, sem alterar o dado original
158
+ }
159
+ filterFunction?: () => {
160
+ // Logica parar filtrar os dados que serao exibidos, se for passado uma filterFunction o array de items sera ignorado e o retorno sera o retorno da filterFunction.
161
+
162
+ // Deve sempre retornar um array
163
+ }
164
+ })
165
+
166
+
167
+ crudViewConfigs
168
+ .addFormOption({
169
+ column: "chave_que_recebera_as_options",
170
+ dependsOn?: 'chave_que_dependa_que_tenha_valor'
171
+ itemsArray?: [] // Array de itens iniciais
172
+ endpoint?: CrudViewConfigs.generateEndpoint(
173
+ "URL", {} // parametros
174
+ ),
175
+ hooks?: {
176
+ afterChange: (item) =>{
177
+ // Logica que ira disparar apos o valor ser alterado
178
+
179
+ // * Pode ser utilizado para alterar os dados ou entao realizar chamadas asincronas para atualizar o array de dados.
180
+ }
181
+ beforeChange: (item) => {
182
+ // Logica que ira disparar antes do valor ser alterado
183
+
184
+ // * Pode ser utilizado para alterar os dados ou entao realizar chamadas asincronas para atualizar o array de dados.
185
+ }
186
+ }
187
+ })
188
+
189
+ crudViewConfigs.setFormModel({
190
+ // Modelo inicial do formulario
191
+ });
192
+
193
+ this.viewSettings = crudViewConfigs.viewConfigs;
194
+ this.viewMethods = crudViewConfigs.viewMethods;
195
+
196
+
197
+ // Pode usar os metodos das classe CrudViewConfigs ou entao criar os proprios de acordo com a necessidade.
198
+ await Promise.all([
199
+ this.viewMethods.fetchFiltersData(this.viewSettings.filters, this.$http),
200
+ this.viewMethods.fetchTableOptionsData(
201
+ this.viewSettings.tableOptions,
202
+ this.$http
203
+ ),
204
+ this.viewMethods.fetchFormOptionsData(
205
+ this.viewSettings.formSettings.formOptions,
206
+ this.$http
207
+ ),
208
+ ]);
209
+
210
+ this.fetchData()
211
+ },
212
+ methods: {
213
+ updateRowsChanged() {
214
+ this.viewSettings.rowsChanged = new Set(this.viewSettings.rowsChanged);
215
+ }
216
+ updateRow() {
217
+ this.$set(this.viewSettings.apiData, rowIndex, data);
218
+ }
219
+ async onReload() {
220
+ // Logica de como sera tratado o evento de reload.
221
+ }
222
+ async onExportFile() {
223
+ // Logica de como sera tratado o evento de exportaçao de arquivo.
224
+ }
225
+ async onImportFile(event) {
226
+ // Logica de como sera tratado o evento de importaçao de arquivo.
227
+ }
228
+ async onSave() {
229
+ // Logica de como sera tratado o evento de salvamento de registro(s)
230
+ }
231
+ async onDelete() {
232
+ // Logica de como sera tratado o evento de exclusao de registro(s)
233
+
234
+ }
235
+ async fetchData() {
236
+ // Logica de busca de dados principais
237
+ }
238
+ }
239
+ }
240
+ </script>
241
+
26
242
  ```
27
243
 
28
- ### Customize configuration
29
- See [Configuration Reference](https://cli.vuejs.org/config/).
244
+
@@ -204,27 +204,6 @@ $({ target: 'Iterator', proto: true, real: true, forced: findWithoutClosingOnEar
204
204
  })));
205
205
 
206
206
 
207
- /***/ }),
208
-
209
- /***/ 155:
210
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
211
-
212
- "use strict";
213
- __webpack_require__.r(__webpack_exports__);
214
- /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
215
- /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
216
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
217
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
218
- // Imports
219
-
220
-
221
- var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
222
- // Module
223
- ___CSS_LOADER_EXPORT___.push([module.id, ".edited-row{background-color:hsla(44,94%,86%,.714)}.edited-row:hover{background-color:hsla(44,93%,72%,.714)!important}.sum-row{background-color:#ddd;font-weight:700}.sum-row:hover{background-color:#ddd!important}.selected-row{background-color:#eee!important}.selected-row:hover{background-color:#ddd!important}.v-data-table__wrapper{flex-grow:1}", ""]);
224
- // Exports
225
- /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
226
-
227
-
228
207
  /***/ }),
229
208
 
230
209
  /***/ 158:
@@ -4523,22 +4502,6 @@ var update = add("62782e57", content, true, {"sourceMap":false,"shadowMode":fals
4523
4502
 
4524
4503
  /***/ }),
4525
4504
 
4526
- /***/ 2050:
4527
- /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
4528
-
4529
- // style-loader: Adds some css to the DOM by adding a <style> tag
4530
-
4531
- // load the styles
4532
- var content = __webpack_require__(155);
4533
- if(content.__esModule) content = content.default;
4534
- if(typeof content === 'string') content = [[module.id, content, '']];
4535
- if(content.locals) module.exports = content.locals;
4536
- // add the styles to the DOM
4537
- var add = (__webpack_require__(9548)/* ["default"] */ .A)
4538
- var update = add("81d889f8", content, true, {"sourceMap":false,"shadowMode":false});
4539
-
4540
- /***/ }),
4541
-
4542
4505
  /***/ 2070:
4543
4506
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
4544
4507
 
@@ -6265,6 +6228,22 @@ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ
6265
6228
  })));
6266
6229
 
6267
6230
 
6231
+ /***/ }),
6232
+
6233
+ /***/ 2649:
6234
+ /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
6235
+
6236
+ // style-loader: Adds some css to the DOM by adding a <style> tag
6237
+
6238
+ // load the styles
6239
+ var content = __webpack_require__(5135);
6240
+ if(content.__esModule) content = content.default;
6241
+ if(typeof content === 'string') content = [[module.id, content, '']];
6242
+ if(content.locals) module.exports = content.locals;
6243
+ // add the styles to the DOM
6244
+ var add = (__webpack_require__(9548)/* ["default"] */ .A)
6245
+ var update = add("6171ff1a", content, true, {"sourceMap":false,"shadowMode":false});
6246
+
6268
6247
  /***/ }),
6269
6248
 
6270
6249
  /***/ 2652:
@@ -16973,6 +16952,27 @@ if(content.locals) module.exports = content.locals;
16973
16952
  var add = (__webpack_require__(9548)/* ["default"] */ .A)
16974
16953
  var update = add("058c1f91", content, true, {"sourceMap":false,"shadowMode":false});
16975
16954
 
16955
+ /***/ }),
16956
+
16957
+ /***/ 5135:
16958
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
16959
+
16960
+ "use strict";
16961
+ __webpack_require__.r(__webpack_exports__);
16962
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
16963
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
16964
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
16965
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
16966
+ // Imports
16967
+
16968
+
16969
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
16970
+ // Module
16971
+ ___CSS_LOADER_EXPORT___.push([module.id, ".edited-row{background-color:hsla(44,94%,86%,.714)}.edited-row:hover{background-color:hsla(44,93%,72%,.714)!important}.sum-row{background-color:#ddd;font-weight:700}.sum-row:hover{background-color:#ddd!important}.selected-row{background-color:#eee!important}.selected-row:hover{background-color:#ddd!important}.v-data-table__wrapper{flex-grow:1}", ""]);
16972
+ // Exports
16973
+ /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
16974
+
16975
+
16976
16976
  /***/ }),
16977
16977
 
16978
16978
  /***/ 5170:
@@ -42086,7 +42086,7 @@ var VSkeletonLoader = __webpack_require__(403);
42086
42086
  }, [this.genSkeleton()]);
42087
42087
  }
42088
42088
  }));
42089
- ;// ./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/views/BaseCrudView.vue?vue&type=template&id=520e9c2c
42089
+ ;// ./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/views/BaseCrudView.vue?vue&type=template&id=4f01cb16
42090
42090
 
42091
42091
 
42092
42092
 
@@ -42104,7 +42104,7 @@ var VSkeletonLoader = __webpack_require__(403);
42104
42104
 
42105
42105
 
42106
42106
 
42107
- var BaseCrudViewvue_type_template_id_520e9c2c_render = function render() {
42107
+ var BaseCrudViewvue_type_template_id_4f01cb16_render = function render() {
42108
42108
  var _vm = this,
42109
42109
  _c = _vm._self._c;
42110
42110
  return _c('BaseViewLayout', {
@@ -42659,7 +42659,7 @@ var BaseCrudViewvue_type_template_id_520e9c2c_render = function render() {
42659
42659
  }
42660
42660
  })], 1);
42661
42661
  };
42662
- var BaseCrudViewvue_type_template_id_520e9c2c_staticRenderFns = [];
42662
+ var BaseCrudViewvue_type_template_id_4f01cb16_staticRenderFns = [];
42663
42663
 
42664
42664
  ;// ./node_modules/vuetify/lib/components/VCard/index.js
42665
42665
 
@@ -47609,7 +47609,7 @@ var BaseCrudSecondaryFiltersDrawer_component = normalizeComponent(
47609
47609
  methods: {
47610
47610
  getOptions(header, item) {
47611
47611
  const tableOption = this.tableOptionsByColumnMap.get(header.value);
47612
- if (tableOption.filterFunction) {
47612
+ if (tableOption?.filterFunction) {
47613
47613
  return tableOption.filterFunction(item) ?? [];
47614
47614
  }
47615
47615
  return tableOption?.items ?? [];
@@ -47656,6 +47656,13 @@ var BaseCrudSecondaryFiltersDrawer_component = normalizeComponent(
47656
47656
  return true;
47657
47657
  },
47658
47658
  setCheckboxValue(value, item, headerValue) {
47659
+ this.setBackupEditedItem(item);
47660
+ const itemPrimaryKey = item[this.primaryKey];
47661
+ if (!itemPrimaryKey) return;
47662
+ const itemIndex = this.itemsIndexByPrimaryKey.get(itemPrimaryKey);
47663
+ if (isNaN(itemIndex)) return;
47664
+ this.rowsChanged.add(itemIndex);
47665
+ this.$emit("update:rows-changed");
47659
47666
  if (value) return item[headerValue] = 1;
47660
47667
  item[headerValue] = 0;
47661
47668
  },
@@ -47895,9 +47902,9 @@ var BaseCrudSecondaryFiltersDrawer_component = normalizeComponent(
47895
47902
  });
47896
47903
  ;// ./src/components/views/BaseCrudView.vue?vue&type=script&lang=js
47897
47904
  /* harmony default export */ var views_BaseCrudViewvue_type_script_lang_js = (BaseCrudViewvue_type_script_lang_js);
47898
- // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/views/BaseCrudView.vue?vue&type=style&index=0&id=520e9c2c&prod&lang=scss
47899
- var BaseCrudViewvue_type_style_index_0_id_520e9c2c_prod_lang_scss = __webpack_require__(2050);
47900
- ;// ./src/components/views/BaseCrudView.vue?vue&type=style&index=0&id=520e9c2c&prod&lang=scss
47905
+ // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/views/BaseCrudView.vue?vue&type=style&index=0&id=4f01cb16&prod&lang=scss
47906
+ var BaseCrudViewvue_type_style_index_0_id_4f01cb16_prod_lang_scss = __webpack_require__(2649);
47907
+ ;// ./src/components/views/BaseCrudView.vue?vue&type=style&index=0&id=4f01cb16&prod&lang=scss
47901
47908
 
47902
47909
  ;// ./src/components/views/BaseCrudView.vue
47903
47910
 
@@ -47910,8 +47917,8 @@ var BaseCrudViewvue_type_style_index_0_id_520e9c2c_prod_lang_scss = __webpack_re
47910
47917
 
47911
47918
  var BaseCrudView_component = normalizeComponent(
47912
47919
  views_BaseCrudViewvue_type_script_lang_js,
47913
- BaseCrudViewvue_type_template_id_520e9c2c_render,
47914
- BaseCrudViewvue_type_template_id_520e9c2c_staticRenderFns,
47920
+ BaseCrudViewvue_type_template_id_4f01cb16_render,
47921
+ BaseCrudViewvue_type_template_id_4f01cb16_staticRenderFns,
47915
47922
  false,
47916
47923
  null,
47917
47924
  null,