spark-grid-vue3 0.0.74 → 0.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "spark-grid-vue3",
-    "version": "0.0.74",
+    "version": "0.0.76",
     "description": "",
     "files": [
         "src"

package/src/components/DataTableSearchField.vue

@@ -20,10 +20,11 @@
     </div>
 </template>
 
-<script setup lang="ts">    
-import { computed, onMounted, ref, watch } from "vue"
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
 import { DataTableSearchType } from "../values/column"
 import { SearchConfigListValue, DataTableSearchTypeDefinition } from "@/types";
+import { EventEmitter } from "../utils/EventEmitter";
 import MultiSelect from "./MultiSelect.vue";
 import InputText from "./InputText.vue";
 import InputDate from "./InputDate.vue";
@@ -103,9 +104,25 @@ const loadSearchConfig = async () => {
     }
 }
 
+const onGridFilterChanged = (data: any) => {
+    if (data.name === props.name) {
+        filterValue.value = data.value
+    }
+}
+
 onMounted(() => {
     filterValue.value = props.modelValue
     loadSearchConfig()
+
+    if (props.emitsEvents) {
+        EventEmitter.on("grid-filter", onGridFilterChanged)
+    }
+})
+
+onUnmounted(() => {
+    if (props.emitsEvents) {
+        EventEmitter.off("grid-filter", onGridFilterChanged)
+    }
 })
 
 </script>

package/src/components/DataTableSearchRow.vue

@@ -1,22 +1,20 @@
 <template>
     <div class="grid-row grid-search-row">
         <div class="spark-grid-datatable-header-cell form-group-sm" v-if="props.grid.config.checkboxEnabled"
-            data-label="Selecionar"
-            :style="DataTableStyler.getCheckboxColumnStyles()"></div>
+            data-label="Selecionar" :style="DataTableStyler.getCheckboxColumnStyles()"></div>
         <div class="spark-grid-datatable-header-cell form-group-sm" v-if="props.grid.config.radioButtonSelectionEnabled"
-            data-label="Selecionar"
-            :style="DataTableStyler.getCheckboxColumnStyles()"></div>
+            data-label="Selecionar" :style="DataTableStyler.getCheckboxColumnStyles()"></div>
 
-        <div class="spark-grid-datatable-header-cell form-group-sm" v-for="column in grid.getColumns()" :key="column.name"
-            :data-label="column.label"
+        <div class="spark-grid-datatable-header-cell form-group-sm" v-for="column in grid.getColumns()"
+            :key="column.name" :data-label="column.label"
             :style="DataTableStyler.getSearchRowColumnStyle(column, props.grid)">
             <DataTableSearchField v-if="column.searchEnabled ?? true" :type="column.searchType"
                 :search-config="column.searchConfig" :name="column.filterName ?? column.name"
-                :disabled="isDisabled(column)" :uuid="grid.uuid" @change="value => onFilterChanged(column, value)" />
+                :disabled="isDisabled(column)" :uuid="grid.uuid" :emits-events="true"
+                @change="value => onFilterChanged(column, value)" />
         </div>
 
-        <div :style="DataTableStyler.getActionRowColumn(props.grid)" v-if="props.grid.config.actions"
-            data-label="Ações"
+        <div :style="DataTableStyler.getActionRowColumn(props.grid)" v-if="props.grid.config.actions" data-label="Ações"
             class="spark-grid-datatable-header-cell form-group-sm"></div>
 
         <!--        <th v-if="hasActions" class="text-center"></th>-->

package/src/components/GridSearchField.vue

@@ -4,4 +4,6 @@
 
 <script setup lang="ts">
 import DataTableSearchField from "./DataTableSearchField.vue"
+
+defineOptions({ inheritAttrs: false })
 </script>

package/src/components/GridSearchRow.vue

@@ -7,7 +7,7 @@
 
         <div class="grid-search-row-cell" v-for="column in columns" :key="column.name"
             :style="GridStyler.getSearchRowColumnStyle(column, props.grid)">
-            <GridSearchField v-if="column.searchEnabled ?? true" :type="column.searchType"
+            <DataTableSearchField v-if="column.searchEnabled ?? true" :type="column.searchType"
                 :search-config="column.searchConfig" :name="column.filterName ?? column.name"
                 :disabled="isDisabled(column)" :uuid="grid.uuid" :emits-events="true"
                 @change="value => onFilterChanged(column, value)" />
@@ -15,14 +15,12 @@
 
         <div :style="GridStyler.getActionRowColumn(props.grid)" v-if="props.grid.config.actions"
             class="grid-search-row-cell"></div>
-
-        <!--        <th v-if="hasActions" class="text-center"></th>-->
     </div>
 </template>
 
 <script setup lang="ts">
 import type { GridComponent, Column } from "../types/types"
-import GridSearchField from "./GridSearchField.vue"
+import DataTableSearchField from "./DataTableSearchField.vue"
 import { computed } from "vue"
 import { GridStyler } from "../utils/GridStyler"
 

package/src/utils/EventEmitter.ts

@@ -1,4 +1,5 @@
 import type { DataTableComponent } from "../types"
+import { GlobalConfig } from "./GlobalConfig"
 
 export class EventEmitter {
     static onRequestStarted(state: DataTableComponent) {
@@ -13,25 +14,16 @@ export class EventEmitter {
         }
     }
 
-    private static events: Record<string, Function[]> = {}
-
     static emit(grid: DataTableComponent, name: string, data: any): void {
         grid.$emit(name, data)
-
-        if (this.events[name]) {
-            this.events[name].forEach(cb => cb(data))
-        }
+        GlobalConfig.eventProxy?.emit(name, data)
     }
 
     static on(event: string, callback: Function) {
-        if (!this.events[event]) {
-            this.events[event] = []
-        }
-        this.events[event].push(callback)
+        GlobalConfig.eventProxy?.on(event, callback)
     }
 
     static off(event: string, callback: Function) {
-        if (!this.events[event]) return
-        this.events[event] = this.events[event].filter(cb => cb !== callback)
+        GlobalConfig.eventProxy?.off(event, callback)
     }
 }