@revolist/revogrid 4.10.2 → 4.10.4

package/dist/types/types/interfaces.d.ts

@@ -140,7 +140,7 @@ export interface ColumnType extends ColumnProperties {
      */
     maxSize?: number;
     /**
-     * Represents a custom editor defined in @editors property.
+     * Represents a custom editor defined in editors property.
      * Can be a string or an editor constructor function.
      */
     editor?: string | EditorCtr;
@@ -190,11 +190,11 @@ export interface ColumnRegular extends ColumnType {
      */
     autoSize?: boolean;
     /**
-     * Filter. Require filter plugin to be installed and activated through grid config @filter.
+     * Filter. Require filter plugin to be installed and activated through grid config filter.
      */
     filter?: boolean | string | string[];
     /**
-     * Is column can be sorted, check @cellCompare function for custom sorting.
+     * Is column can be sorted, check cellCompare function for custom sorting.
      */
     sortable?: boolean;
     /**
@@ -206,7 +206,7 @@ export interface ColumnRegular extends ColumnType {
      */
     rowDrag?: RowDrag;
     /**
-     * Represents type defined in @columnTypes property through grid config.
+     * Represents type defined in columnTypes property through grid config.
      */
     columnType?: string;
     /**
@@ -342,7 +342,7 @@ export type FocusTemplateFunc = (createElement: HyperFunc<VNode>, detail: FocusR
  */
 export type CellCompareFunc = (prop: ColumnProp, a: DataType, b: DataType) => number;
 export type ColumnTemplateFunc = (createElement: HyperFunc<VNode>, props: ColumnTemplateProp, additionalData?: any) => any;
-export type PropertiesFunc = (props: ColumnDataSchemaModel) => CellProps | void | undefined;
+export type PropertiesFunc = (props: CellTemplateProp) => CellProps | void | undefined;
 export type ColPropertiesFunc = (props: ColumnPropProp) => CellProps | void | undefined;
 export type DataType<D = any> = {
     [T in ColumnProp]: DataFormat<D>;

package/dist/types/utils/column.utils.d.ts

@@ -6,6 +6,7 @@ export interface ColumnGroup extends StoreGroup {
 }
 export type ColumnGroupingCollection = Record<DimensionCols, ColumnGroup[]>;
 export declare function getCellData(val?: any): any;
+export declare function getCellRaw(model: DataType, column: ColumnRegular): any;
 export declare function getCellDataParsed(model: DataType, column: ColumnRegular): any;
 /**
  * Column collection definition.

package/hydrate/index.js

@@ -8098,9 +8098,14 @@ function getCellData(val) {
     }
     return val;
 }
+function getCellRaw(model, column) {
+    if (column.cellParser) {
+        return column.cellParser(model, column);
+    }
+    return model[column.prop];
+}
 function getCellDataParsed(model, column) {
-    const val = column.cellParser ? column.cellParser(model, column) : model[column.prop];
-    return getCellData(val);
+    return getCellData(getCellRaw(model, column));
 }
 /**
  * Get column type from column data
@@ -8610,12 +8615,13 @@ class ColumnService {
         }
         return !!readOnly;
     }
-    mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
+    mergeProperties(r, c, defaultProps, schemaModel) {
+        var _a, _b;
         const props = Object.assign({}, defaultProps);
         props.class = Object.assign(Object.assign({}, (typeof props.class === 'string'
             ? { [props.class]: true }
             : props.class)), { [CELL_CLASS]: true, [DISABLED_CLASS]: this.isReadOnly(r, c) });
-        const extra = extraPropsFunc === null || extraPropsFunc === void 0 ? void 0 : extraPropsFunc(model);
+        const extra = (_b = (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties) === null || _b === void 0 ? void 0 : _b.call(_a, schemaModel);
         if (!extra) {
             return props;
         }
@@ -8664,7 +8670,6 @@ class ColumnService {
         const column = this.columns[colIndex];
         const prop = column === null || column === void 0 ? void 0 : column.prop;
         const model = getSourceItem(this.dataStore, rowIndex) || {};
-        const value = model[prop];
         const type = this.dataStore.get('type');
         return {
             prop,
@@ -8675,7 +8680,7 @@ class ColumnService {
             colIndex,
             colType: this.type,
             type,
-            value,
+            value: getCellRaw(model, column),
         };
     }
     getRangeData(d, columns) {
@@ -11701,8 +11706,8 @@ class SortingPlugin extends BasePlugin {
         this.postponeSort(order, sortingFunc);
     }
     getComparer(column, order) {
-        var _a;
-        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || this.defaultCellCompare;
+        var _a, _b;
+        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || ((_b = this.defaultCellCompare) === null || _b === void 0 ? void 0 : _b.bind({ column }));
         if (order == 'asc') {
             return cellCmp;
         }
@@ -11812,9 +11817,10 @@ class SortingPlugin extends BasePlugin {
         this.emit('aftersortingapply');
     }
     defaultCellCompare(prop, a, b) {
-        var _a, _b;
-        const av = (_a = a === null || a === void 0 ? void 0 : a[prop]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-        const bv = (_b = b === null || b === void 0 ? void 0 : b[prop]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase();
+        const aRaw = this.column ? getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
+        const bRaw = this.column ? getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
+        const av = aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
+        const bv = bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
         return av == bv ? 0 : av > bv ? 1 : -1;
     }
     descCellCompare(cmp) {
@@ -13732,9 +13738,9 @@ var RevoGridStyle0 = revoGridStyleCss;
  * All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
  * :::
  *
- * :::tip
- * For a comprehensive events guide, check the [dependency tree](#Dependencies).
- * All events propagate to the root level of the grid.
+ * :::info
+ * For a comprehensive events guide, check the [Events](./events.md).
+ * All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
  * :::
  *
  * @slot data-{column-type}-{row-type}. @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
@@ -14817,30 +14823,32 @@ function convertVNodeToHTML(parentHolder, redraw) {
 }
 
 function renderCell(v) {
+    var _a;
     const els = [];
     // #region Custom cell
-    if (v.template) {
-        els.push(v.template(hAsync, Object.assign(Object.assign({}, v.model), { providers: v.providers }), v.additionalData));
+    const template = (_a = v.schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellTemplate;
+    if (template) {
+        els.push(template(hAsync, v.schemaModel, v.additionalData));
     }
     // #endregion
     // #region Regular cell
     else {
-        if (!v.model.column) {
+        if (!v.schemaModel.column) {
             return '';
         }
         // Row drag
-        if (v.model.column.rowDrag &&
-            isRowDragService(v.model.column.rowDrag, v.model)) {
+        if (v.schemaModel.column.rowDrag &&
+            isRowDragService(v.schemaModel.column.rowDrag, v.schemaModel)) {
             els.push(hAsync("span", { class: DRAGGABLE_CLASS, onMouseDown: originalEvent => {
                     var _a;
                     return (_a = v.dragStartCell) === null || _a === void 0 ? void 0 : _a.emit({
                         originalEvent,
-                        model: v.model,
+                        model: v.schemaModel,
                     });
                 } },
                 hAsync("span", { class: DRAG_ICON_CLASS })));
         }
-        els.push(`${getCellData(v.model.model[v.model.prop])}`);
+        els.push(`${getCellDataParsed(v.schemaModel.model, v.schemaModel.column)}`);
     }
     return els;
 }
@@ -14938,7 +14946,6 @@ class RevogrData {
         this.afterrender.emit({ type: this.type });
     }
     render() {
-        var _a, _b;
         this.renderedRows = new Map();
         const columnsData = this.columnService.columns;
         if (!columnsData.length) {
@@ -14967,9 +14974,9 @@ class RevogrData {
             const cells = [];
             // #region Cells
             for (let rgCol of cols) {
-                const model = this.columnService.rowDataModel(rgRow.itemIndex, rgCol.itemIndex);
+                const smodel = Object.assign(Object.assign({}, this.columnService.rowDataModel(rgRow.itemIndex, rgCol.itemIndex)), { providers: this.providers });
                 // call before cell render
-                const cellEvent = this.triggerBeforeCellRender(model, rgRow, rgCol);
+                const cellEvent = this.triggerBeforeCellRender(smodel, rgRow, rgCol);
                 // if event was prevented
                 if (cellEvent.defaultPrevented) {
                     continue;
@@ -14990,13 +14997,11 @@ class RevogrData {
                 if (groupDepth && !columnProps.itemIndex && defaultProps.style) {
                     defaultProps.style.paddingLeft = `${PADDING_DEPTH * groupDepth}px`;
                 }
-                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, schemaModel, (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties);
+                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, schemaModel);
                 // Never use webcomponent for cell render
                 // It's very slow because of webcomponent initialization takes time
                 const cellNode = hAsync(CellRenderer, { renderProps: {
-                        model: schemaModel,
-                        providers: this.providers,
-                        template: (_b = schemaModel.column) === null || _b === void 0 ? void 0 : _b.cellTemplate,
+                        schemaModel,
                         additionalData: this.additionalData,
                         dragStartCell: this.dragStartCell,
                     }, cellProps: props });
@@ -15026,8 +15031,8 @@ class RevogrData {
     }
     triggerBeforeCellRender(model, row, column) {
         const detail = {
-            column: Object.assign({}, column),
-            row: Object.assign({}, row),
+            column,
+            row,
             model,
             rowType: model.type,
             colType: model.colType,

package/hydrate/index.mjs

@@ -8094,9 +8094,14 @@ function getCellData(val) {
     }
     return val;
 }
+function getCellRaw(model, column) {
+    if (column.cellParser) {
+        return column.cellParser(model, column);
+    }
+    return model[column.prop];
+}
 function getCellDataParsed(model, column) {
-    const val = column.cellParser ? column.cellParser(model, column) : model[column.prop];
-    return getCellData(val);
+    return getCellData(getCellRaw(model, column));
 }
 /**
  * Get column type from column data
@@ -8606,12 +8611,13 @@ class ColumnService {
         }
         return !!readOnly;
     }
-    mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
+    mergeProperties(r, c, defaultProps, schemaModel) {
+        var _a, _b;
         const props = Object.assign({}, defaultProps);
         props.class = Object.assign(Object.assign({}, (typeof props.class === 'string'
             ? { [props.class]: true }
             : props.class)), { [CELL_CLASS]: true, [DISABLED_CLASS]: this.isReadOnly(r, c) });
-        const extra = extraPropsFunc === null || extraPropsFunc === void 0 ? void 0 : extraPropsFunc(model);
+        const extra = (_b = (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties) === null || _b === void 0 ? void 0 : _b.call(_a, schemaModel);
         if (!extra) {
             return props;
         }
@@ -8660,7 +8666,6 @@ class ColumnService {
         const column = this.columns[colIndex];
         const prop = column === null || column === void 0 ? void 0 : column.prop;
         const model = getSourceItem(this.dataStore, rowIndex) || {};
-        const value = model[prop];
         const type = this.dataStore.get('type');
         return {
             prop,
@@ -8671,7 +8676,7 @@ class ColumnService {
             colIndex,
             colType: this.type,
             type,
-            value,
+            value: getCellRaw(model, column),
         };
     }
     getRangeData(d, columns) {
@@ -11697,8 +11702,8 @@ class SortingPlugin extends BasePlugin {
         this.postponeSort(order, sortingFunc);
     }
     getComparer(column, order) {
-        var _a;
-        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || this.defaultCellCompare;
+        var _a, _b;
+        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || ((_b = this.defaultCellCompare) === null || _b === void 0 ? void 0 : _b.bind({ column }));
         if (order == 'asc') {
             return cellCmp;
         }
@@ -11808,9 +11813,10 @@ class SortingPlugin extends BasePlugin {
         this.emit('aftersortingapply');
     }
     defaultCellCompare(prop, a, b) {
-        var _a, _b;
-        const av = (_a = a === null || a === void 0 ? void 0 : a[prop]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-        const bv = (_b = b === null || b === void 0 ? void 0 : b[prop]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase();
+        const aRaw = this.column ? getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
+        const bRaw = this.column ? getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
+        const av = aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
+        const bv = bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
         return av == bv ? 0 : av > bv ? 1 : -1;
     }
     descCellCompare(cmp) {
@@ -13728,9 +13734,9 @@ var RevoGridStyle0 = revoGridStyleCss;
  * All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
  * :::
  *
- * :::tip
- * For a comprehensive events guide, check the [dependency tree](#Dependencies).
- * All events propagate to the root level of the grid.
+ * :::info
+ * For a comprehensive events guide, check the [Events](./events.md).
+ * All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
  * :::
  *
  * @slot data-{column-type}-{row-type}. @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
@@ -14813,30 +14819,32 @@ function convertVNodeToHTML(parentHolder, redraw) {
 }
 
 function renderCell(v) {
+    var _a;
     const els = [];
     // #region Custom cell
-    if (v.template) {
-        els.push(v.template(hAsync, Object.assign(Object.assign({}, v.model), { providers: v.providers }), v.additionalData));
+    const template = (_a = v.schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellTemplate;
+    if (template) {
+        els.push(template(hAsync, v.schemaModel, v.additionalData));
     }
     // #endregion
     // #region Regular cell
     else {
-        if (!v.model.column) {
+        if (!v.schemaModel.column) {
             return '';
         }
         // Row drag
-        if (v.model.column.rowDrag &&
-            isRowDragService(v.model.column.rowDrag, v.model)) {
+        if (v.schemaModel.column.rowDrag &&
+            isRowDragService(v.schemaModel.column.rowDrag, v.schemaModel)) {
             els.push(hAsync("span", { class: DRAGGABLE_CLASS, onMouseDown: originalEvent => {
                     var _a;
                     return (_a = v.dragStartCell) === null || _a === void 0 ? void 0 : _a.emit({
                         originalEvent,
-                        model: v.model,
+                        model: v.schemaModel,
                     });
                 } },
                 hAsync("span", { class: DRAG_ICON_CLASS })));
         }
-        els.push(`${getCellData(v.model.model[v.model.prop])}`);
+        els.push(`${getCellDataParsed(v.schemaModel.model, v.schemaModel.column)}`);
     }
     return els;
 }
@@ -14934,7 +14942,6 @@ class RevogrData {
         this.afterrender.emit({ type: this.type });
     }
     render() {
-        var _a, _b;
         this.renderedRows = new Map();
         const columnsData = this.columnService.columns;
         if (!columnsData.length) {
@@ -14963,9 +14970,9 @@ class RevogrData {
             const cells = [];
             // #region Cells
             for (let rgCol of cols) {
-                const model = this.columnService.rowDataModel(rgRow.itemIndex, rgCol.itemIndex);
+                const smodel = Object.assign(Object.assign({}, this.columnService.rowDataModel(rgRow.itemIndex, rgCol.itemIndex)), { providers: this.providers });
                 // call before cell render
-                const cellEvent = this.triggerBeforeCellRender(model, rgRow, rgCol);
+                const cellEvent = this.triggerBeforeCellRender(smodel, rgRow, rgCol);
                 // if event was prevented
                 if (cellEvent.defaultPrevented) {
                     continue;
@@ -14986,13 +14993,11 @@ class RevogrData {
                 if (groupDepth && !columnProps.itemIndex && defaultProps.style) {
                     defaultProps.style.paddingLeft = `${PADDING_DEPTH * groupDepth}px`;
                 }
-                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, schemaModel, (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties);
+                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, schemaModel);
                 // Never use webcomponent for cell render
                 // It's very slow because of webcomponent initialization takes time
                 const cellNode = hAsync(CellRenderer, { renderProps: {
-                        model: schemaModel,
-                        providers: this.providers,
-                        template: (_b = schemaModel.column) === null || _b === void 0 ? void 0 : _b.cellTemplate,
+                        schemaModel,
                         additionalData: this.additionalData,
                         dragStartCell: this.dragStartCell,
                     }, cellProps: props });
@@ -15022,8 +15027,8 @@ class RevogrData {
     }
     triggerBeforeCellRender(model, row, column) {
         const detail = {
-            column: Object.assign({}, column),
-            row: Object.assign({}, row),
+            column,
+            row,
             model,
             rowType: model.type,
             colType: model.colType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.10.2",
+  "version": "4.10.4",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/readme.md

@@ -7,9 +7,9 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/revogrid" alt="Latest Version on NPM"/></a>
   <a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a>
-  <img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid@latest" alt="Tree shaking"/>
-  <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid@latest" alt="Tree shaking"/>
-  <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
+  <img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid" alt="Dependency count"/>
+  <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/>
+  <img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/>
   <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
 </p>
 

package/standalone/column.service.js

@@ -626,9 +626,14 @@ function getCellData(val) {
     }
     return val;
 }
+function getCellRaw(model, column) {
+    if (column.cellParser) {
+        return column.cellParser(model, column);
+    }
+    return model[column.prop];
+}
 function getCellDataParsed(model, column) {
-    const val = column.cellParser ? column.cellParser(model, column) : model[column.prop];
-    return getCellData(val);
+    return getCellData(getCellRaw(model, column));
 }
 /**
  * Get column type from column data
@@ -979,12 +984,13 @@ class ColumnService {
         }
         return !!readOnly;
     }
-    mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
+    mergeProperties(r, c, defaultProps, schemaModel) {
+        var _a, _b;
         const props = Object.assign({}, defaultProps);
         props.class = Object.assign(Object.assign({}, (typeof props.class === 'string'
             ? { [props.class]: true }
             : props.class)), { [CELL_CLASS]: true, [DISABLED_CLASS]: this.isReadOnly(r, c) });
-        const extra = extraPropsFunc === null || extraPropsFunc === void 0 ? void 0 : extraPropsFunc(model);
+        const extra = (_b = (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties) === null || _b === void 0 ? void 0 : _b.call(_a, schemaModel);
         if (!extra) {
             return props;
         }
@@ -1033,7 +1039,6 @@ class ColumnService {
         const column = this.columns[colIndex];
         const prop = column === null || column === void 0 ? void 0 : column.prop;
         const model = getSourceItem(this.dataStore, rowIndex) || {};
-        const value = model[prop];
         const type = this.dataStore.get('type');
         return {
             prop,
@@ -1044,7 +1049,7 @@ class ColumnService {
             colIndex,
             colType: this.type,
             type,
-            value,
+            value: getCellRaw(model, column),
         };
     }
     getRangeData(d, columns) {
@@ -1246,6 +1251,6 @@ function doPropMerge(existing, extra) {
     return props;
 }
 
-export { SelectionStoreConnector as A, doPropMerge as B, GROUP_EXPAND_BTN as C, PSEUDO_GROUP_ITEM as D, EMPTY_INDEX as E, isRowDragService as F, GROUP_EXPANDED as G, ColumnService as H, PSEUDO_GROUP_ITEM_VALUE as P, SelectionStore as S, isRangeSingleCell as a, getCellData as b, cropCellToMax as c, getCellDataParsed as d, getColumnType as e, getColumnSizes as f, getRange as g, isColGrouping as h, isHiddenStore as i, getColumns as j, gatherGroup as k, getColumnByProp as l, baseEach$1 as m, nextCell as n, isGrouping as o, getGroupingName as p, getParsedGroup as q, reduce as r, isSameGroup as s, GROUP_DEPTH as t, PSEUDO_GROUP_ITEM_ID as u, GROUPING_ROW_TYPE as v, PSEUDO_GROUP_COLUMN as w, GROUP_EXPAND_EVENT as x, gatherGrouping as y, isGroupingColumn as z };
+export { isGroupingColumn as A, SelectionStoreConnector as B, doPropMerge as C, GROUP_EXPAND_BTN as D, EMPTY_INDEX as E, PSEUDO_GROUP_ITEM as F, GROUP_EXPANDED as G, isRowDragService as H, ColumnService as I, PSEUDO_GROUP_ITEM_VALUE as P, SelectionStore as S, isRangeSingleCell as a, getCellData as b, cropCellToMax as c, getCellRaw as d, getCellDataParsed as e, getColumnType as f, getRange as g, getColumnSizes as h, isHiddenStore as i, isColGrouping as j, getColumns as k, gatherGroup as l, getColumnByProp as m, nextCell as n, baseEach$1 as o, isGrouping as p, getGroupingName as q, reduce as r, getParsedGroup as s, isSameGroup as t, GROUP_DEPTH as u, PSEUDO_GROUP_ITEM_ID as v, GROUPING_ROW_TYPE as w, PSEUDO_GROUP_COLUMN as x, GROUP_EXPAND_EVENT as y, gatherGrouping as z };
 
 //# sourceMappingURL=column.service.js.map