@znap/components-vue2 1.0.6 → 1.0.8

package/README.md

@@ -1,15 +1,15 @@
 # @znap/components-vue2
 
-### ⚡ Incio Rapido
+### ⚡ Inicio Rapido
 
 Utilizando [pnpm](https://pnpm.io/)
 ```bash
-npm install @znap/components-vue2
+pnpm install @znap/components-vue2
 ```
 
 Utilizando [npm](https://npmjs.com/)
 ```bash
-pnpm install @znap/components-vue2
+npm install @znap/components-vue2
 ```
 
 No arquivo **main.js** do Vue.
@@ -18,7 +18,7 @@ No arquivo **main.js** do Vue.
 import Vue from "vue";
 import * as ZnapComponents from '@znap/components-vue2';
 
-// -- Hands on Table configs start (Optional)
+// -- Configuraçoes do Hands on Table (Opicional)
 import { registerAllModules } from "handsontable/registry";
 import { registerLanguageDictionary, ptBR } from "handsontable/i18n";
 import numbro from "numbro";
@@ -28,7 +28,7 @@ numbro.registerLanguage(numbroptBR);
 numbro.setLanguage("pt-BR");
 registerAllModules();
 registerLanguageDictionary(ptBR);
-// -- End
+// -- Fim
 
 Vue.use(ZnapComponents.plugin, {
   licenseKey: HOT_TABLE_LICENSE_KEY // CHAVE DE UTILIZAÇAO DO HANDS ON TABLE
@@ -64,7 +64,7 @@ import * as ZnapComponents from '@znap/components-vue2';
     @update:row="updateRow"
   >
   <template v-slot:footer-prepend>
-    
+    Slot para adicionar elementos do lado esquerdo dos componentes de paginaçao.
   </template>
   </ZnapBaseCrudView>
 </template>
@@ -89,6 +89,8 @@ export default {
       endpoint: CrudViewConfigs.generateEndpoint(
         "URL", {} // parametros
       ),
+      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)
+      useServerSideSearch?: false, // Habilita busca do lado do servidor por padrao vem desabilitado
     });
 
     crudViewConfigs
@@ -104,6 +106,8 @@ export default {
           label: "Grupo empresarial",
           clearable?: true,
           required?: true // Se o valor for true, ele devera ser preenchido e se caso nao for preenchido ira exibir mensagem na tela
+          multiple?: false // Se for um v-autocomplete permite selecionar varios items
+          range?: false // Se for um date-picker permite selecionar um range de data.
         }, // Props que sera passada para o componente
          dependsOn?: '' // Filtro primario que possui dependencia
          hooks?: {
@@ -127,6 +131,8 @@ export default {
         componentProps: {
           label: "Empresa",
           clearable?: true,
+          multiple?: false // Se for um v-autocomplete permite selecionar varios items
+          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?: {
@@ -184,8 +190,8 @@ export default {
       // Modelo inicial do formulario
     });
 
-    this.viewSettings = crudViewConfigs.viewConfigs;
-    this.viewMethods = crudViewConfigs.viewMethods;
+    this.viewSettings = crudViewConfigs.viewConfigs; // Retorna o objeto de configuraçoes da classe (Se tornara o state do componente)
+    this.viewMethods = crudViewConfigs.viewMethods; // Retorna os metodos pre prontos disponiveis da classe.
 
    
     // Pode usar os metodos das classe CrudViewConfigs ou entao criar os proprios de acordo com a necessidade.
@@ -205,10 +211,10 @@ export default {
   },
   methods: {
     updateRowsChanged() {
-       this.viewSettings.rowsChanged = new Set(this.viewSettings.rowsChanged);
+       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);
+      this.$set(this.viewSettings.apiData, rowIndex, data); // Importante para o vue detectar que teve alteraçao no elemento da tabela.
     }
     async onReload() {
       // Logica de como sera tratado o evento de reload.
@@ -216,15 +222,21 @@ export default {
     async onExportFile() {
        // Logica de como sera tratado o evento de exportaçao de arquivo.
     }
-    async onImportFile(event) {
+    async onImportFile(
+      event // evento contendo o elemento do input de arquivo
+      ) {
       // Logica de como sera tratado o evento de importaçao de arquivo.
     }
-    async onSave() {
+    async onSave({
+    reload = true, // variavel retornada do comoponente para verificar se deve ou nao realizar o reload (Fica a cargo do desenvolvedor)
+    itemData = null  // Se for um item proveniente da modal (Criaçao/Ediçao) os dados virão aqui
+    }) {
       // Logica de como sera tratado o evento de salvamento de registro(s)
     }
-    async onDelete() {
+    async onDelete(
+      rows // Array com as linhas que devem ser excluidas
+    ) {
       // Logica de como sera tratado o evento de exclusao de registro(s)
-
     }
     async fetchData() {
       // Logica de busca de dados principais
@@ -236,3 +248,10 @@ export default {
 ```
 
 
+### Utilizaçao da Classe Auxiliar **CrudViewConfigs**
+
+O intuito dessa classe é fornecer ao desenvolvedor uma interface padronizada de criaçao de telas, tornando o processo padronizado e de facil aprendizado.
+
+A classe retorna metodos e um objeto padrao de estado para ser utilizado para manipular o componente **ZnapBaseCrudView** por meio dos getters **viewConfigs** e **viewMethods**, alem disso, pussui diversos metodos/interfaces para o desenvolvedor adicionar elementos na tela de maneira padronizada evitando refazer a roda toda vez que for construir uma nova tela.
+
+

package/dist/index.common.js

@@ -49214,13 +49214,13 @@ class CrudViewConfigs {
     const primaryFiltersPromises = filters?.primary.flatMap(async (filter, index) => {
       if (!filter.endpoint?.length || !filter.endpoint[0]) return [index, null];
       filter.props.loading = true;
-      const response = await httpFetcher.post(`${filter.endpoint[0]}`, filter.conditions);
+      const response = await httpFetcher.post(filter.endpoint[0], filter.endpoint[1] ?? {});
       return [index, response?.data];
     }) ?? [];
     const secondaryFiltersPromises = filters?.secondary?.flatMap(async (filter, index) => {
       if (!filter.endpoint?.length || !filter.endpoint[0]) return [index, null];
       filter.props.loading = true;
-      const response = await httpFetcher.post(`${filter.endpoint[0]}`, filter.conditions);
+      const response = await httpFetcher.post(filter.endpoint[0], filter.endpoint[1] ?? {});
       return [index, response?.data];
     }) ?? [];
     const [primaryFiltersData, secondaryFiltersData] = await Promise.all([Promise.all(primaryFiltersPromises), Promise.all(secondaryFiltersPromises)]);