spark-grid-vue3 0.0.13 → 0.0.15

package/package.json

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

package/src/SparkGrid.vue

@@ -1,3 +1,3 @@
-<template src="./assets/DataTable.html"/>
-<script lang="ts" src="./assets/DataTable.ts"/>
-<style src="./assets/DataTable.scss" lang="scss"/>
+<template src="./assets/SparkGrid.html"/>
+<script lang="ts" src="./assets/SparkGrid.ts"/>
+<style src="./assets/SparkGrid.scss" lang="scss"/>

package/src/components/GridContentWrapper.vue

@@ -17,7 +17,7 @@ const props = defineProps<{ grid: GridComponent }>()
 const classes = computed(() => {
     let classes = []
 
-    if (props.grid.config.stickyHeaderEnabled ?? true) {
+    if (props.grid.config.stickyHeaderEnabled) {
         classes.push("grid-sticky-header")
     }
 
@@ -29,14 +29,14 @@ const styles = computed(() => {
         background: '#fafafa'
     }
 
-    const maxHeight = props.grid.config.height ?? (window.innerHeight - 100)
-    styles['max-height'] = `${maxHeight}px`
-    styles['min-height'] = `${maxHeight}px`
-
     if (props.grid.config.overflowEnabled) {
+        const maxHeight = props.grid.config.height ?? (window.innerHeight - 100)
+
         styles['overflow-x'] = 'auto'
+        styles['max-height'] = `${maxHeight}px`
+        styles['min-height'] = `${maxHeight}px`
 
-        if (props.grid.config.stickyHeaderEnabled ?? true) {
+        if (props.grid.config.stickyHeaderEnabled) {
             styles['position'] = 'relative'
         }
     }

package/src/components/GridHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid-header" :class="{'grid-header-sticky': grid.config.stickyHeaderEnabled ?? true}">
+    <div class="grid-header" :class="{'grid-header-sticky': grid.config.stickyHeaderEnabled}">
         <div class="grid-header-cell" v-if="props.grid.config.checkboxEnabled" :style="GridStyler.getCheckboxColumnStyles()">
             <GridHeaderCheckbox :grid="grid"/>
         </div>
@@ -62,8 +62,8 @@ const columnContent = (column: Column) => {
         label = props.grid.config.onBeforeHeaderCellMounted(column, props.grid)
     }
 
-    if (column.onBeforeCellHeaderRendered) {
-        label = column.onBeforeCellHeaderRendered(label, props.grid)
+    if (column.headerContentGetter) {
+        label = column.headerContentGetter(label, props.grid)
     }
 
     return label ?? column.label

package/src/components/GridSummarizer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex grid-summarizer" :class="{'grid-summarizer-sticky': grid.config.stickyHeaderEnabled ?? true}">
+    <div class="flex grid-summarizer" :class="{'grid-summarizer-sticky': grid.config.stickyHeaderEnabled}">
         <div class="grid-header-cell" v-if="props.grid.config.checkboxEnabled" :style="GridStyler.getCheckboxColumnStyles()"></div>
         <div class="grid-header-cell" v-if="props.grid.config.radioButtonSelectionEnabled" :style="GridStyler.getCheckboxColumnStyles()"></div>
 
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import type {GridComponent, Column} from "../types/types"
+import type {Column, GridComponent} from "../types/types"
 import {GridStyler} from "../utils/GridStyler"
 import RuntimeRenderer from "../components/RuntimeRenderer.vue"
 

package/src/types/types.d.ts

@@ -28,8 +28,8 @@ export type OnRowEvent = (row: Row, grid: GridComponent) => void
 export type OnCellEvent = (value: any, column: Column, row: Row, grid: GridComponent) => any
 export type OnContextMenu = (value: any, column: Column, row: Row, grid: GridComponent) => ContextMenItem[]
 export type OnBeforeRowMounted = (row: Row, grid: GridComponent) => Row
-export type OnBeforeCellRendered = (value: any, row: Row, grid: GridComponent) => CellContent
-export type OnBeforeHeaderRendered = (value: any, grid: GridComponent) => CellContent
+export type OnValueGetter = (value: any, row: Row, grid: GridComponent) => CellContent
+export type OnHeaderContentGetter = (value: any, grid: GridComponent) => CellContent
 export type OnBeforeCellMounted = (value: CellContent, column: Column, row: Row, grid: GridComponent) => CellContent
 export type OnBeforeHeaderCellMounted = (column: Column, grid: GridComponent) => CellContent
 export type OnBeforeCellStyleMounted = (value: CellContent, column: Column, row: Row, grid: GridComponent) => { [key: string]: any }
@@ -47,8 +47,8 @@ export type Column = {
     searchType?: GridSearchType,
     searchConfig?: { [key: string]: any },
     searchTypeRenderer?: () => Component,
-    onBeforeCellHeaderRendered?: OnBeforeHeaderRendered,
-    onBeforeCellContentRendered?: OnBeforeCellRendered,
+    headerContentGetter?: OnHeaderContentGetter,
+    valueGetter?: OnValueGetter,
     onBeforeColumnStyleMounted?: OnBeforeColumnStyleMounted,
     orderByEnabled?: boolean,
     searchEnabled?: boolean,

package/src/utils/CellValueGetter.ts

@@ -7,8 +7,8 @@ export class CellValueGetter {
         return () => {
             let value = getValue(row, column.name)
 
-            if (column.onBeforeCellContentRendered) {
-                value = column.onBeforeCellContentRendered(value, row, grid)
+            if (column.valueGetter) {
+                value = column.valueGetter(value, row, grid)
             }
 
             if (grid.config.onBeforeCellMounted) {