feat(common)!: replace jQueryUI by SortableJS in common & SlickDraggableGrouping

README.md

@@ -44,7 +44,7 @@ You might be wondering why was this monorepo created? Here are a few reasons:
 The Vanilla Implementation (which is not associated to any framework) was built with [WebPack](https://webpack.js.org/) and is also used to run and test all the UI functionalities [Cypress](https://www.cypress.io/) (E2E tests). The [Vanilla-force-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle), which extends the `vanilla-bundle` package is what we use in our SalesForce implementation (with Lightning Web Component), hence the creation of this monorepo library.
 
 ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
-Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,700 unit tests) that are fully tested with [Jest](https://jestjs.io/). There are also +400 Cypress E2E tests to cover all [Examples](https://ghiscoding.github.io/slickgrid-universal/) and most UI functionalities (there's also an additional +500 tests in Aurelia-Slickgrid)
+Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,700 unit tests) that are fully tested with [Jest](https://jestjs.io/). There are also +450 Cypress E2E tests to cover all [Examples](https://ghiscoding.github.io/slickgrid-universal/) and most UI functionalities (there's also an additional +500 tests in Aurelia-Slickgrid)
 
 ### Available Demos
 
@@ -73,6 +73,7 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +15,00
 | [@slickgrid-universal/odata](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/odata) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/odata.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/odata) | OData Query Service (Filter/Sort/Paging) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/odata/CHANGELOG.md) |
 | [@slickgrid-universal/row-detail-view-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/row-detail-view-plugin) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/row-detail-view-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin) | Row Detail View (plugin) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/row-detail-view-plugin/CHANGELOG.md) |
 | [@slickgrid-universal/rxjs-observable](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/rxjs-observable) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/rxjs-observable.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/rxjs-observable) | RxJS Observable Service Wrapper | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/rxjs-observable/CHANGELOG.md) |
+| [@slickgrid-universal/utils](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/utils) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/utils.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/utils) | Vanilla TypeScript/ES6 implementation | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/utils/CHANGELOG.md)
 | [@slickgrid-universal/vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-bundle.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-bundle) | Vanilla TypeScript/ES6 implementation | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/vanilla-bundle/CHANGELOG.md)
 | [@slickgrid-universal/vanilla-force-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-force-bundle) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-force-bundle.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-force-bundle) | Vanilla TypeScript/ES6 for Salesforce implementation | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/vanilla-force-bundle/CHANGELOG.md)
 

examples/webpack-demo-vanilla-bundle/assets/i18n/en.json

@@ -40,6 +40,7 @@
   "LAST_UPDATE": "Last Update",
   "LESS_THAN": "Less than",
   "LESS_THAN_OR_EQUAL_TO": "Less than or equal to",
+  "NO_ELEMENTS_FOUND": "No elements found",
   "NOT_CONTAINS": "Not contains",
   "NOT_EQUAL_TO": "Not equal to",
   "NOT_IN_COLLECTION_SEPERATED_BY_COMMA": "Search items not in a collection, must be separated by a comma (a,b)",

examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json

@@ -40,6 +40,7 @@
   "LAST_UPDATE": "Dernière mise à jour",
   "LESS_THAN": "Plus petit que",
   "LESS_THAN_OR_EQUAL_TO": "Plus petit ou égal à",
+  "NO_ELEMENTS_FOUND": "Aucun élément trouvé",
   "NOT_CONTAINS": "Ne contient pas",
   "NOT_EQUAL_TO": "Non égal à",
   "NOT_IN_COLLECTION_SEPERATED_BY_COMMA": "Recherche excluant certain éléments d'une collection, doit être séparé par une virgule (a,b)",

examples/webpack-demo-vanilla-bundle/package.json

@@ -34,7 +34,7 @@
     "not dead"
   ],
   "dependencies": {
-    "@faker-js/faker": "^7.4.0",
+    "@faker-js/faker": "^7.5.0",
     "@fnando/sparkline": "^0.3.10",
     "@slickgrid-universal/common": "workspace:~",
     "@slickgrid-universal/composite-editor-component": "workspace:~",
@@ -47,9 +47,9 @@
     "@slickgrid-universal/vanilla-bundle": "workspace:~",
     "@slickgrid-universal/vanilla-force-bundle": "workspace:~",
     "bulma": "^0.9.4",
-    "dompurify": "^2.3.10",
+    "dompurify": "^2.4.0",
     "flatpickr": "^4.6.13",
-    "jquery": "^3.6.0",
+    "jquery": "^3.6.1",
     "moment-mini": "^2.29.4",
     "multiple-select-modified": "^1.3.17",
     "rxjs": "^7.5.6",
@@ -59,24 +59,24 @@
     "@types/fnando__sparkline": "^0.3.4",
     "@types/jquery": "^3.5.14",
     "@types/moment": "^2.13.0",
-    "@types/node": "^18.7.6",
+    "@types/node": "^18.7.16",
     "@types/webpack": "^5.28.0",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
-    "esbuild-loader": "^2.19.0",
+    "esbuild-loader": "^2.20.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "html-loader": "^4.1.0",
     "html-webpack-plugin": "5.5.0",
     "mini-css-extract-plugin": "^2.6.1",
-    "sass": "^1.54.4",
+    "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.0"
+    "webpack-dev-server": "^4.11.0"
   }
 }

examples/webpack-demo-vanilla-bundle/src/app.ts

@@ -21,7 +21,7 @@ export class App {
   routerConfig: RouterConfig = {
     pushState: false,
     routes: []
-  }
+  };
 
   constructor() {
     this.appRouting = new AppRouting(this.routerConfig);
@@ -157,7 +157,7 @@ export class App {
 
   handleNavbarHamburgerToggle() {
     // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger') || [], 0);
 
     // Check if there are any navbar burgers
     if ($navbarBurgers.length > 0) {

examples/webpack-demo-vanilla-bundle/src/examples/example02.ts

@@ -160,9 +160,6 @@ export class Example2 {
       enableTextExport: true,
       enableFiltering: true,
       enableGrouping: true,
-      exportOptions: {
-        sanitizeDataExport: true
-      },
       columnPicker: {
         onColumnsChanged: (e, args) => console.log(e, args)
       },

examples/webpack-demo-vanilla-bundle/src/examples/example03.ts

@@ -302,6 +302,7 @@ export class Example3 {
       rowHeight: 33,
       headerRowHeight: 35,
       enableDraggableGrouping: true,
+      // frozenColumn: 2,
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'fa fa-outdent',
@@ -430,22 +431,6 @@ export class Example3 {
     }
   }
 
-  groupByFieldName(_fieldName, _index) {
-    this.clearGrouping();
-    if (this.draggableGroupingPlugin?.setDroppedGroups) {
-      this.showPreHeader();
-
-      // get the field names from Group By select(s) dropdown, but filter out any empty fields
-      const groupedFields = this.selectedGroupingFields.filter((g) => g !== '');
-      if (groupedFields.length === 0) {
-        this.clearGrouping();
-      } else {
-        this.draggableGroupingPlugin.setDroppedGroups(groupedFields);
-      }
-      this.sgb?.slickGrid.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
   showPreHeader() {
     this.sgb?.slickGrid.setPreHeaderPanelVisibility(true);
   }

examples/webpack-demo-vanilla-bundle/src/examples/example04.ts

@@ -229,13 +229,14 @@ export class Example4 {
         // formatter: (_, __, val) => typeof val === 'string' ? val : val.name,
         // editor: {
         //   model: Editors.autocompleter,
+        //   // collectionAsync: fetch(URL_COUNTRY_NAMES_COLLECTION),
         //   placeholder: '🔎︎ search country',
         //   customStructure: { label: 'name', value: 'code' },
-        //   // collection: require('./data/countries.json'),
-        //   collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
-        //   // enableRenderHtml: true,
-        //   // collection: [{ code: true, name: 'True', labelPrefix: `<i class="mdi mdi-pin-outline"></i> ` }, { code: false, name: 'False', labelSuffix: '<i class="mdi mdi-close"></i>' }],
-        //   // editorOptions: { minLength: 1 }
+        //   // collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
+
+        //   enableRenderHtml: true,
+        //   collection: [{ code: true, name: 'True', labelPrefix: `<i class="mdi mdi-pin-outline"></i> ` }, { code: false, name: 'False', labelSuffix: '<i class="mdi mdi-close"></i>' }],
+        //   editorOptions: { minLength: 1 }
         // },
         editor: {
           model: Editors.autocompleter,
@@ -254,12 +255,24 @@ export class Example4 {
                   q: searchText
                 },
                 success: (data) => {
-                  updateCallback(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of [''
+                  updateCallback(finalData);
                 }
               });
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
+        // filter: {
+        //   model: Filters.autocompleter,
+        //   // collectionAsync: fetch(URL_COUNTRY_NAMES_COLLECTION),
+        //   placeholder: '🔎︎ search country',
+        //   customStructure: { label: 'name', value: 'code' },
+        //   collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
+
+        //   // enableRenderHtml: true,
+        //   // collection: [{ code: true, name: 'True', labelPrefix: `<i class="mdi mdi-pin-outline"></i> ` }, { code: false, name: 'False', labelSuffix: '<i class="mdi mdi-close"></i>' }],
+        //   // filterOptions: { minLength: 1 }
+        // },
         filter: {
           model: Filters.autocompleter,
           // placeholder: '🔎︎ search city',
@@ -280,11 +293,12 @@ export class Example4 {
                   q: searchText
                 },
                 success: (data) => {
-                  updateCallback(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of ['']
+                  updateCallback(finalData);
                 }
               });
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         }
       },
       {

examples/webpack-demo-vanilla-bundle/src/examples/example05.ts

@@ -213,7 +213,7 @@ export class Example5 {
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableExcelExport: true,
-      exportOptions: { exportWithFormatter: true },
+      textExportOptions: { exportWithFormatter: true },
       excelExportOptions: { exportWithFormatter: true },
       registerExternalResources: [new ExcelExportService()],
       enableFiltering: true,

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

@@ -214,7 +214,7 @@ export class Example11 {
               layout: 'fourCorners',
               templateCallback: (item: any) => this.renderItemCallbackWith4Corners(item),
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,
@@ -245,7 +245,7 @@ export class Example11 {
               const foundCountries = countries.filter((country) => country.name.toLowerCase().includes(searchText.toLowerCase()));
               updateCallback(foundCountries.map(item => ({ label: item.name, value: item.code, })));
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,

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

@@ -309,7 +309,7 @@ export class Example12 {
               layout: 'fourCorners',
               templateCallback: (item: any) => this.renderItemCallbackWith4Corners(item),
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,
@@ -341,7 +341,7 @@ export class Example12 {
               const foundCountries = countries.filter((country) => country.name.toLowerCase().includes(searchText.toLowerCase()));
               updateCallback(foundCountries.map(item => ({ label: item.name, value: item.code, })));
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,
@@ -443,7 +443,7 @@ export class Example12 {
         const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue];
         const editorColumns = this.columnDefinitions.filter((col) => col.editor !== undefined);
 
-        const modifiedColumns = [];
+        const modifiedColumns: Column[] = [];
         prevSerializedValues.forEach((_val, index) => {
           const prevSerializedValue = prevSerializedValues[index];
           const serializedValue = serializedValues[index];
@@ -739,7 +739,7 @@ export class Example12 {
         listPrice: 2100.23,
         itemTypeName: 'I',
         image: 'http://i.stack.imgur.com/pC1Tv.jpg',
-        icon: `mdi ${this.getRandomIcon(0)}`,
+        icon: this.getRandomIcon(0)
       },
       {
         id: 1,
@@ -748,7 +748,7 @@ export class Example12 {
         listPrice: 3200.12,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/Fnm7j6h.jpg',
-        icon: `mdi ${this.getRandomIcon(1)}`,
+        icon: this.getRandomIcon(1)
       },
       {
         id: 2,
@@ -757,7 +757,7 @@ export class Example12 {
         listPrice: 15.00,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/RaVJuLr.jpg',
-        icon: `mdi ${this.getRandomIcon(2)}`,
+        icon: this.getRandomIcon(2)
       },
       {
         id: 3,
@@ -766,7 +766,7 @@ export class Example12 {
         listPrice: 25.76,
         itemTypeName: 'I',
         image: 'http://i.stack.imgur.com/pC1Tv.jpg',
-        icon: `mdi ${this.getRandomIcon(3)}`,
+        icon: this.getRandomIcon(3)
       },
       {
         id: 4,
@@ -775,7 +775,7 @@ export class Example12 {
         listPrice: 13.35,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/Fnm7j6h.jpg',
-        icon: `mdi ${this.getRandomIcon(4)}`,
+        icon: this.getRandomIcon(4)
       },
       {
         id: 5,
@@ -784,7 +784,7 @@ export class Example12 {
         listPrice: 23.33,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/RaVJuLr.jpg',
-        icon: `mdi ${this.getRandomIcon(5)}`,
+        icon: this.getRandomIcon(5)
       },
       {
         id: 6,
@@ -793,7 +793,7 @@ export class Example12 {
         listPrice: 71.21,
         itemTypeName: 'I',
         image: 'http://i.stack.imgur.com/pC1Tv.jpg',
-        icon: `mdi ${this.getRandomIcon(6)}`,
+        icon: this.getRandomIcon(6)
       },
       {
         id: 7,
@@ -802,7 +802,7 @@ export class Example12 {
         listPrice: 2.43,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/Fnm7j6h.jpg',
-        icon: `mdi ${this.getRandomIcon(7)}`,
+        icon: this.getRandomIcon(7)
       },
       {
         id: 8,
@@ -811,7 +811,7 @@ export class Example12 {
         listPrice: 31288.39,
         itemTypeName: 'I',
         image: 'https://i.imgur.com/RaVJuLr.jpg',
-        icon: `mdi ${this.getRandomIcon(8)}`,
+        icon: this.getRandomIcon(8)
       },
     ];
   }

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

@@ -266,7 +266,7 @@ export class Example14 {
               layout: 'fourCorners',
               templateCallback: (item: any) => this.renderItemCallbackWith4Corners(item),
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,
@@ -297,7 +297,7 @@ export class Example14 {
               const foundCountries = countries.filter((country) => country.name.toLowerCase().includes(searchText.toLowerCase()));
               updateCallback(foundCountries.map(item => ({ label: item.name, value: item.code, })));
             },
-          } as Partial<AutocompleterOption>,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,