spark-grid-vue3 0.0.49 → 0.0.51

package/package.json

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

package/src/components/GridCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid-cell" :style="GridStyler.getCheckboxColumnStyles()">
+    <div class="grid-cell" :style="columnStyle()">
         <div class="checker">
             <span :class="{'checked': row._isChecked}">
                 <input
@@ -18,11 +18,24 @@
 
 <script setup lang="ts">
 import {GridStyler} from "../utils/GridStyler"
-import type {Row} from "../types/types"
+import type {GridComponent, Row} from "../types/types"
 
 const props = defineProps<{
-    row: Row
+    row: Row,
+    grid: GridComponent,
 }>()
 
+const columnStyle = () => {
+    const style = GridStyler.getCheckboxColumnStyles()
+
+    if (props.grid.config.onBeforeCheckboxAndRadioButtonStyleMounted) {
+        const newStyle = props.grid.config.onBeforeCheckboxAndRadioButtonStyleMounted(props.row, props.grid)
+
+        return {...style, ...newStyle}
+    }
+
+    return style
+}
+
 const emits = defineEmits(['change'])
 </script>

package/src/components/GridRow.vue

@@ -8,7 +8,7 @@
             :key="row._uuid"
             v-if="props.grid.config.checkboxEnabled"
             :row="row"
-            :disabled="props.grid.config.checkboxDisabled"
+            :grid="props.grid"
             @change="onRowChecked"
         />
 

package/src/types/types.d.ts

@@ -37,6 +37,7 @@ export type OnHeaderContentGetter = (value: any, grid: GridComponent) => CellCon
 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 }
+export type OnBeforeCheckboxAndRadioButtonStyleMounted = (row: Row, grid: GridComponent) => { [key: string]: any }
 export type OnBeforeColumnStyleMounted = (value: CellContent, row: Row, grid: GridComponent) => { [key: string]: any }
 export type OnVisibleCheck = () => boolean
 export type OnVisibleActionCheck = (row: Row) => boolean
@@ -118,6 +119,7 @@ export type SparkGridConfig = {
     onBeforeCellMounted?: OnBeforeCellMounted,
     onBeforeHeaderCellMounted?: OnBeforeHeaderCellMounted,
     onBeforeCellStyleMounted?: OnBeforeCellStyleMounted,
+    onBeforeCheckboxAndRadioButtonStyleMounted?: OnBeforeCheckboxAndRadioButtonStyleMounted,
     onClickRow?: OnRowEvent,
     onDoubleClickRow?: OnRowEvent,
     onCheckboxStateChanged?: OnRowEvent,

package/src/utils/GridStyler.ts

@@ -72,7 +72,7 @@ export class GridStyler {
     }
 
     static calculateActionsWidth(grid: GridComponent): string | number {
-        return grid.config.actionsWidth ?? `${((grid.config.actions?.length ?? 0) * 50) + 100}px`
+        return grid.config.actionsWidth ?? `${((grid.config.actions?.length ?? 0) * 50) + 50}px`
     }
 
     static calculateColumnWidth(grid: GridComponent): string {