feat: remove unnecessary Formatters, replace by cssClass

examples/vite-demo-vanilla-bundle/src/examples/example07.ts

@@ -239,7 +239,7 @@ export default class Example07 {
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
             setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
+              resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
 
@@ -264,7 +264,7 @@ export default class Example07 {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
             setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
+              resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),
 

examples/vite-demo-vanilla-bundle/src/examples/example11.ts

@@ -136,9 +136,9 @@ export default class Example11 {
     this.columnDefinitions = [
       {
         id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 80,
+        cssClass: 'text-bold text-uppercase',
         editor: { model: Editors.text, massUpdate: true, required: true, alwaysSaveOnEnterKey: true, validator: myCustomTitleValidator, },
         filterable: true,
-        formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
       },
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, minWidth: 80,

examples/vite-demo-vanilla-bundle/src/examples/example12.ts

@@ -143,9 +143,9 @@ export default class Example12 {
     this.columnDefinitions = [
       {
         id: 'title', name: '<span title="Task must always be followed by a number" class="color-info mdi mdi-alert-circle"></span> Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 75,
+        cssClass: 'text-bold text-uppercase',
         filterable: true, columnGroup: 'Common Factor',
         filter: { model: Filters.compoundInputText },
-        formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
         editor: {
           model: Editors.longText, massUpdate: false, required: true, alwaysSaveOnEnterKey: true,
           maxLength: 12,
@@ -239,9 +239,8 @@ export default class Example12 {
       },
       {
         id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100,
-        sortable: true, filterable: true, columnGroup: 'Period',
-        formatter: Formatters.multiple,
-        params: { formatters: [Formatters.checkmarkMaterial, Formatters.center] },
+        sortable: true, filterable: true, columnGroup: 'Period', cssClass: 'text-center',
+        formatter: Formatters.checkmarkMaterial,
         exportWithFormatter: false,
         filter: {
           collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],

examples/vite-demo-vanilla-bundle/src/examples/example14.ts

@@ -135,14 +135,14 @@ export default class Example14 {
     this.columnDefinitions = [
       {
         id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 65,
+        cssClass: 'text-bold text-uppercase',
         // you can adjust the resize calculation via multiple options
         resizeExtraWidthPadding: 4,
         resizeCharWidthInPx: 7.6,
         resizeCalcWidthRatio: 1, // default ratio is ~0.9 for string but since our text is all uppercase then a higher ratio is needed
         resizeMaxWidthThreshold: 200,
         filterable: true, columnGroup: 'Common Factor',
         filter: { model: Filters.compoundInputText },
-        formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
         editor: {
           model: Editors.longText, required: true, alwaysSaveOnEnterKey: true,
           maxLength: 12,
@@ -217,9 +217,8 @@ export default class Example14 {
       },
       {
         id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100,
-        sortable: true, filterable: true, columnGroup: 'Period',
-        formatter: Formatters.multiple,
-        params: { formatters: [Formatters.checkmarkMaterial, Formatters.center] },
+        sortable: true, filterable: true, columnGroup: 'Period', cssClass: 'text-center',
+        formatter: Formatters.checkmarkMaterial,
         exportWithFormatter: false,
         filter: {
           collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],

examples/vite-demo-vanilla-bundle/src/examples/icons.html

@@ -62,6 +62,8 @@ <h5 class="title is-5 section-title">
   </div>
   <div class="slick-col-medium-2 text-italic padding-2px">text-italic</span>
   </div>
+  <div class="slick-col-medium-2 text-bold padding-2px">text-bold</span>
+  </div>
 </div>
 
 <h5 class="title is-5 section-title">

packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts

@@ -59,6 +59,7 @@ describe('CellExcelCopyManager', () => {
   const mockEventCallback = () => { };
   const mockSelectRange = [{ fromCell: 1, fromRow: 1, toCell: 1, toRow: 1 }] as SlickRange[];
   const mockSelectRangeEvent = { ranges: mockSelectRange };
+  const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `<b>${value}</b>` : null as any;
 
   let plugin: SlickCellExcelCopyManager;
   const gridOptionsMock = {
@@ -306,13 +307,12 @@ describe('CellExcelCopyManager', () => {
 
     it('should expect a formatted output after calling "dataItemColumnValueExtractor" callback', () => {
       plugin.init(gridStub);
-      const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: Formatters.bold });
+      const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: myBoldFormatter });
       expect(output).toBe('<b>John</b>');
     });
 
     it('should expect a sanitized formatted and empty output after calling "dataItemColumnValueExtractor" callback', () => {
       gridOptionsMock.textExportOptions = { sanitizeDataExport: true };
-      const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `<b>${value}</b>` } : null as any;
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       plugin.init(gridStub);
 
@@ -326,13 +326,12 @@ describe('CellExcelCopyManager', () => {
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       plugin.init(gridStub);
 
-      const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: '<b>John</b>', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: Formatters.bold });
+      const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: '<b>John</b>', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: myBoldFormatter });
 
       expect(output).toBe('John');
     });
 
     it('should expect a sanitized formatted output, from a Custom Formatter, after calling "dataItemColumnValueExtractor" callback', () => {
-      const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `<b>${value}</b>` } : '';
       gridOptionsMock.textExportOptions = { sanitizeDataExport: true };
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       plugin.init(gridStub);

packages/common/src/extensions/__tests__/slickContextMenu.spec.ts

@@ -3,7 +3,7 @@ import { deepCopy } from '@slickgrid-universal/utils';
 import { type SlickDataView, SlickEvent, SlickEventData, SlickGrid } from '../../core/index';
 
 import { DelimiterType, FileType } from '../../enums/index';
-import type { ContextMenu, Column, ElementPosition, GridOption, MenuCommandItem, MenuOptionItem } from '../../interfaces/index';
+import type { ContextMenu, Column, ElementPosition, GridOption, MenuCommandItem, MenuOptionItem, Formatter } from '../../interfaces/index';
 import { BackendUtilityService, ExcelExportService, SharedService, TextExportService, TreeDataService, } from '../../services/index';
 import { ExtensionUtility } from '../../extensions/extensionUtility';
 import { Formatters } from '../../formatters';
@@ -159,6 +159,7 @@ describe('ContextMenu Plugin', () => {
   let translateService: TranslateServiceStub;
   let plugin: SlickContextMenu;
   let sharedService: SharedService;
+  const myUppercaseFormatter: Formatter = (_row, _cell, value) => value !== undefined ? { text: String(value).toUpperCase() } : '';
 
   beforeEach(() => {
     backendUtilityService = new BackendUtilityService();
@@ -827,7 +828,7 @@ describe('ContextMenu Plugin', () => {
 
       it('should call "copyToClipboard", WITH export formatter, when the command triggered is "copy"', () => {
         const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableTextExport: false, excelExportOptions: { exportWithFormatter: true } } as GridOption;
-        const columnMock = { id: 'firstName', name: 'First Name', field: 'firstName', formatter: Formatters.uppercase } as Column;
+        const columnMock = { id: 'firstName', name: 'First Name', field: 'firstName', formatter: myUppercaseFormatter } as Column;
         const dataContextMock = { id: 123, firstName: 'John', lastName: 'Doe', age: 50 };
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         const execSpy = jest.spyOn(window.document, 'execCommand');

packages/common/src/formatters/__tests__/formatterUtilities.spec.ts

@@ -3,8 +3,6 @@ import { FieldType } from '../../enums/index';
 import { Editors } from '../../editors/index';
 import { Column, Formatter, GridOption } from '../../interfaces/index';
 import { complexObjectFormatter } from '../complexObjectFormatter';
-import { boldFormatter } from '../boldFormatter';
-import { italicFormatter } from '../italicFormatter';
 import { multipleFormatter } from '../multipleFormatter';
 import { type SlickGrid } from '../../core/index';
 
@@ -20,11 +18,13 @@ describe('formatterUtilities', () => {
       value = (value === null || value === undefined) ? '' : value;
       return isEditableLine ? `<div class="editing-field">${value}</div>` : value;
     };
+    const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `<b>${value}</b>` : '';
+    const myItalicFormatter: Formatter = (_row, _cell, value) => value ? `<i>${value}</i>` : '';
 
     beforeEach(() => {
       columnDefinitions = [
         { id: 'firstName', field: 'firstName', editor: { model: Editors.text } },
-        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter] } },
+        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter] } },
         { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter },
         { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: complexObjectFormatter },
         { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter },
@@ -36,7 +36,7 @@ describe('formatterUtilities', () => {
 
       expect(columnDefinitions).toEqual([
         { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter },
-        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter, customEditableInputFormatter] } },
+        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter, customEditableInputFormatter] } },
         { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter },
         { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } },
         { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter },
@@ -49,7 +49,7 @@ describe('formatterUtilities', () => {
 
       expect(columnDefinitions).toEqual([
         { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter },
-        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter, customEditableInputFormatter] } },
+        { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter, customEditableInputFormatter] } },
         { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter },
         { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } },
         { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter },