@znap/components-vue2 1.0.11 → 1.0.13

package/README.md

@@ -1,4 +1,253 @@
+## ⚡ Instalação
 
+Utilizando [pnpm](https://pnpm.io/)
+```bash
+pnpm install @znap/components-vue2
+```
+
+Utilizando [npm](https://npmjs.com/)
+```bash
+npm install @znap/components-vue2
+```
+
+No arquivo **main.js** do Vue.
+
+```javascript
+import Vue from "vue";
+import * as ZnapComponents from '@znap/components-vue2';
+
+// -- Configuraçoes do Hands on Table (Opcional)
+import { registerAllModules } from "handsontable/registry";
+import { registerLanguageDictionary, ptBR } from "handsontable/i18n";
+import numbro from "numbro";
+import numbroptBR from "numbro/dist/languages/pt-BR.min.js";
+
+numbro.registerLanguage(numbroptBR);
+numbro.setLanguage("pt-BR");
+registerAllModules();
+registerLanguageDictionary(ptBR);
+// -- Fim
+
+Vue.use(ZnapComponents.plugin, {
+  licenseKey: HOT_TABLE_LICENSE_KEY // CHAVE DE UTILIZAÇAO DO HANDS ON TABLE
+})
+```
+
+## Estrutura de importação da lib:
+
+```javascript
+import * as ZnapComponents from '@znap/components-vue2';
+
+ZnapComponents.plugin: Plugin de instalaçao global de todos com componentes para utilizaçao sem importaçao no template vue.
+
+ZnapComponents.components: Retorna todos os componentes exportados pela lib
+
+ZnapComponents.utils: Retorna todas as funçoes uteis exportadas pela lib
+```
+
+## Utilização do ZnapBaseCrudView
+
+```javascript
+<template>
+  <ZnapBaseCrudView
+    v-if="viewSettings"
+    ref="baseCrudViewRef"
+    v-bind="viewSettings"
+    :onReload="onReload"
+    :onExport="onExportFile"
+    :onImport="onImportFile"
+    :onSave="onSave"
+    :onDelete="onDelete"
+    @update:rows-changed="updateRowsChanged"
+    @update:row="updateRow"
+  >
+  <template v-slot:footer-prepend>
+    Slot para adicionar elementos do lado esquerdo dos componentes de paginação.
+  </template>
+  </ZnapBaseCrudView>
+</template>
+
+<script>
+import Vue from "vue";
+import { utils as ZnapUtils } from "@znap/components-vue2";
+
+export default {
+  data: () => ({
+    viewSettings: null,
+    viewMethods: null,
+  }),
+
+  async created() {
+    const { CrudViewConfigs } = ZnapUtils; // Importar a classe CrudViewConfigs da utils para gerar o template de dados da tela.
+
+    const crudViewConfigs = new CrudViewConfigs({
+      viewTitle: "Titulo da página",
+      viewIcon: "icone_da_pagina",
+      primaryKey: "chave_primaria_da_tela",
+      endpoint: CrudViewConfigs.generateEndpoint(
+        "URL", {} // parametros
+      ),
+      useServerSidePagination?: false, // Habilita a paginação do lado do servidor, por padrão vem desabilitado. (Se habilitado, a busca também passa a acontecer do lado do servidor)
+      useServerSideSearch?: false, // Habilita busca do lado do servidor por padrão que vem desabilitado.
+    });
+
+    crudViewConfigs
+      .addPrimaryFilter({
+        column: "coluna_que_ira_buscar", 
+        filterComponent: "v-autocomplete", // componentes disponíveis: v-autocomplete, v-checkbox, date-picker
+        itemsArray?: [] // Array de dados iniciais.
+        initialValue?: null // Valor inicial.
+        endpoint?: CrudViewConfigs.generateEndpoint(
+         "URL", {} // parâmetros
+        ),
+        componentProps: {
+          label: "Grupo empresarial",
+          clearable?: true,
+          required?: true // Se o valor for true, ele devera ser preenchido e, caso não for preenchido, irá exibir mensagem na tela.
+          multiple?: false // Se for um v-autocomplete permite selecionar vários itens
+          range?: false // Se for um date-picker permite selecionar um range de data.
+        }, // Props que será passada para o componente.
+         dependsOn?: '' // Filtro primário que possui dependência
+         hooks?: {
+          afterChange: () => {
+            // Hook que será disparado após a mudança do valor.
+
+            // * Pode ser utilizado para alterar os dados de outros filtros, ou então realizar chamadas assíncronas para atualizar o array de dados.
+          }
+        },
+         ignoreOnFetchFunction?: false // Se o valor for true, será ignorado na função de fetch genérica, por padrão o valor é false.
+      })
+
+    crudViewConfigs
+      .addSecondaryFilter({
+        column: "coluna_que_ira_buscar",
+        filterComponent: "v-autocomplete", // componentes disponíveis: v-autocomplete, v-checkbox, date-picker
+        itemsArray?: [] // Array de dados iniciais.
+        initialValue?: null // Valor inicial.
+        endpoint?: CrudViewConfigs.generateEndpoint(
+         "URL", {} // parametros
+        ),
+        componentProps: {
+          label: "Empresa",
+          clearable?: true,
+          multiple?: false // Se for um v-autocomplete permite selecionar vários itens.
+          range?: false // Se for um date-picker permite selecionar um range de data.
+        }, // Props que sera passada para o componente
+        dependsOn?: '' // Filtro secundario que possui dependencia
+        hooks?: {
+          afterChange: () => {
+            // Hook que será disparado após a mudança do valor.
+            
+            // * Pode ser utilizado para alterar os dados de outros filtros, ou então realizar chamadas assíncronas para atualizar o array de dados.
+          }
+        },
+         ignoreOnFetchFunction?: false // Se o valor for true, será ignorado na funçao de fetch generica, por padrao o valor é false.
+      })
+     
+    crudViewConfigs
+      .addTableOption({
+        column: "chave_que_recebera_as_options",
+        itemsArray?: [] // Array com dados iniciais.
+        endpoint?: CrudViewConfigs.generateEndpoint(
+         "URL", {
+          // parâmetros
+         }
+        ),
+        formatter?: (value) => {
+          // Logica para formatar o dado quando for exibido na tabela, sem alterar o dado original.
+        }
+        filterFunction?: () => {
+          // Logica para filtrar os dados que serão exibidos, se for passada uma filterFunction o array de itens será ignorado e o retorno será o retorno da filterFunction.
+
+          // Deve sempre retornar um array
+        },
+        ignoreOnFetchFunction?: false // Se o valor for true, será ignorado na função de fetch genérica, por padrão o valor é false.
+      })
+    
+
+    crudViewConfigs
+      .addFormOption({
+        column: "chave_que_recebera_as_options",
+        dependsOn?: 'chave_que_dependa_que_tenha_valor'
+        itemsArray?: [] // Array de itens iniciais.
+        endpoint?: CrudViewConfigs.generateEndpoint(
+         "URL", {} // parâmetros
+        ),
+        hooks?: {
+          afterChange: (item) =>{
+            // Logica que irá disparar após o valor ser alterado.
+
+            // * Pode ser utilizado para alterar os dados ou então realizar chamadas assíncronas para atualizar o array de dados.
+          }
+          beforeChange: (item) => {
+            // Logica que irá disparar antes do valor ser alterado.
+            
+            // * Pode ser utilizado para alterar os dados ou então realizar chamadas assíncronas para atualizar o array de dados.
+          }
+        },
+         ignoreOnFetchFunction?: false // Se o valor for true, será ignorado na função de fetch genérica, por padrão o valor é false.
+      })
+    
+    crudViewConfigs.setFormModel({
+      // Modelo inicial do formulário.
+    });
+
+    this.viewSettings = crudViewConfigs.viewConfigs; // Retorna o objeto de configuraçoes da classe (Se tornará o state do componente)
+    this.viewMethods = crudViewConfigs.viewMethods; // Retorna os métodos pre prontos disponíveis da classe.
+
+   
+    // Pode usar os métodos das classe CrudViewConfigs ou então criar os próprios conforme a necessidade.
+    await Promise.all([
+      this.viewMethods.fetchFiltersData(this.viewSettings.filters, this.$http),
+      this.viewMethods.fetchTableOptionsData(
+        this.viewSettings.tableOptions,
+        this.$http
+      ),
+      this.viewMethods.fetchFormOptionsData(
+        this.viewSettings.formSettings.formOptions,
+        this.$http
+      ),
+    ]);
+
+    this.fetchData()
+  },
+  methods: {
+    updateRowsChanged() {
+       this.viewSettings.rowsChanged = new Set(this.viewSettings.rowsChanged); // Importante para o Vue detectar que o rowsChanged alterou e exibir o elemento em destaque na tabela.
+    }
+    updateRow() {
+      this.$set(this.viewSettings.apiData, rowIndex, data); // Importante para o vue detectar que teve alteração no elemento da tabela.
+    }
+    async onReload() {
+      // Logica de como será tratado o evento de reload.
+    }
+    async onExportFile() {
+       // Logica de como será tratado o evento de exportação de arquivo.
+    }
+    async onImportFile(
+      event // evento contendo o elemento do input de arquivo.
+      ) {
+      // Logica de como será tratado o evento de importação de arquivo.
+    }
+    async onSave({
+    reload = true, // variável retornada do componente para verificar se deve ou não realizar o reload (Fica a cargo do desenvolvedor)
+    itemData = null  // Se for um item proveniente da modal (Criação/Edição) os dados virão aqui.
+    }) {
+      // Logica de como será tratado o evento de salvamento de registro(s)
+    }
+    async onDelete(
+      rows // Array com as linhas que devem ser excluídas.
+    ) {
+      // Logica de como será tratado o evento de exclusão de registro(s)
+    }
+    async fetchData() {
+      // Logica de busca de dados principais.
+    }
+  }
+}
+</script>
+
+```
 
 ## Utilização da Classe Auxiliar **CrudViewConfigs**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@znap/components-vue2",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "private": false,
   "main": "./dist/index.common.js",
   "module": "./dist/index.umd.js",
@@ -17,8 +17,8 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@handsontable/vue": "14.6.1",
-    "handsontable": "14.6.1",
+    "@handsontable/vue": "14.5.0",
+    "handsontable": "14.5.0",
     "hyperformula": "^2.7.0",
     "moment": "^2.30.1",
     "numbro": "2.1.2",