feat(common): BREAKING CHANGE replace jQueryUI with SortableJS in com…

…mon & DraggableGrouping (#772) * feat(common): replace jQueryUI Autocomplete with Kradeen Autocomplete (#752) * feat(common)!: remove & replace jQueryUI with SortableJS in common & SlickDraggableGrouping (#756)
ghiscoding · Oct 16, 2022 · a9db2cc · a9db2cc
1 parent 7e65bcb
commit a9db2cc
Show file tree

Hide file tree

Showing 134 changed files with 2,460 additions and 3,049 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.0](https://github.com/ghiscoding/slickgrid-universal/compare/v1.4.0...v2.0.0-alpha.0) (2022-10-15)
+
+### Bug Fixes
+
+* **deps:** update all non-major dependencies ([#769](https://github.com/ghiscoding/slickgrid-universal/issues/769)) ([4e05a4b](https://github.com/ghiscoding/slickgrid-universal/commit/4e05a4b977c760511fc90903c0f62673859bd65f)) - by @renovate-bot
+* **styling:** fix some styling issues with input groups and Firefox ([#750](https://github.com/ghiscoding/slickgrid-universal/issues/750)) ([1aa849e](https://github.com/ghiscoding/slickgrid-universal/commit/1aa849ea81461dc9bbd7b3bc05a092bb14c88be2)) - by @ghiscoding
+
+## ⚠️ Breaking Change
+### - Features
+
+* **common:** replace jQueryUI Autocomplete with Kradeen Autocomplete ([#752](https://github.com/ghiscoding/slickgrid-universal/issues/752)) ([991d29c](https://github.com/ghiscoding/slickgrid-universal/commit/991d29c4c8c85d800d69c4ba16d608d7a20d2a90)) - by @ghiscoding
+* **common:** remove & replace jQueryUI with SortableJS in common & SlickDraggableGrouping ([#756](https://github.com/ghiscoding/slickgrid-universal/issues/756)) ([b1c5a84](https://github.com/ghiscoding/slickgrid-universal/commit/b1c5a84bb9a10ff805dfd13996ecf60dae3ab609)) - by @ghiscoding
+
 # [1.4.0](https://github.com/ghiscoding/slickgrid-universal/compare/v1.3.7...v1.4.0) (2022-08-15)
 
 ### Bug Fixes

diff --git a/README.md b/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)
 

diff --git a/examples/webpack-demo-vanilla-bundle/CHANGELOG.md b/examples/webpack-demo-vanilla-bundle/CHANGELOG.md
@@ -1,8 +1,19 @@
 # Change Log
+## All-in-One SlickGrid framework agnostic wrapper, visit [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) 📦🚀
 
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.0](https://github.com/ghiscoding/slickgrid-universal/compare/v1.4.0...v2.0.0-alpha.0) (2022-10-15)
+
+### Bug Fixes
+
+* **deps:** update all non-major dependencies ([#769](https://github.com/ghiscoding/slickgrid-universal/issues/769)) ([4e05a4b](https://github.com/ghiscoding/slickgrid-universal/commit/4e05a4b977c760511fc90903c0f62673859bd65f)) - by @renovate-bot
+
+### Features
+
+* **common:** replace jQueryUI Autocomplete with Kradeen Autocomplete ([#752](https://github.com/ghiscoding/slickgrid-universal/issues/752)) ([991d29c](https://github.com/ghiscoding/slickgrid-universal/commit/991d29c4c8c85d800d69c4ba16d608d7a20d2a90)) - by @ghiscoding
+
 # [1.4.0](https://github.com/ghiscoding/slickgrid-universal/compare/v1.3.7...v1.4.0) (2022-08-15)
 
 ### Bug Fixes

diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json b/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)",

diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json 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)",

diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webpack-demo-vanilla-bundle",
-  "version": "1.4.0",
+  "version": "2.0.0-alpha.0",
   "private": true,
   "description": "SlickGrid-Universal demo",
   "directories": {

diff --git a/examples/webpack-demo-vanilla-bundle/src/app.ts b/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) {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts b/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)
       },

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/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);
   }

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -1,5 +1,5 @@
 import {
-  AutocompleteOption,
+  AutocompleterOption,
   BindingEventService,
   Column,
   ColumnEditorDualInput,
@@ -14,11 +14,16 @@ import {
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { fetch } from 'whatwg-fetch';
+
 import { ExampleGridOptions } from './example-grid-options';
-import './example02.scss';
+import './example04.scss';
+
+const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
+const URL_COUNTRY_NAMES_COLLECTION = 'assets/data/country_names.json';
 
 // you can create custom validator to pass to an inline editor
-const myCustomTitleValidator = (value, _args) => {
+const myCustomTitleValidator = (value) => {
   if (value === null || value === undefined || !value.length) {
     return { valid: false, msg: 'This is a required field' };
   } else if (!/^Task\s\d+$/.test(value)) {
@@ -221,54 +226,79 @@ export class Example4 {
         filterable: true,
         sortable: true,
         minWidth: 100,
+        // 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' },
+        //   // 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.autoComplete,
+          model: Editors.autocompleter,
           placeholder: '🔎︎ search city',
 
           // We can use the autocomplete through 3 ways "collection", "collectionAsync" or with your own autocomplete options
           // use your own autocomplete options, instead of $.ajax, use HttpClient or FetchClient
           // here we use $.ajax just because I'm not sure how to configure HttpClient with JSONP and CORS
           editorOptions: {
             minLength: 3,
-            forceUserInput: true,
-            source: (request, response) => {
+            fetch: (searchText, updateCallback) => {
               $.ajax({
                 url: 'http://gd.geobytes.com/AutoCompleteCity',
                 dataType: 'jsonp',
                 data: {
-                  q: request.term
+                  q: searchText
                 },
                 success: (data) => {
-                  response(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of [''
+                  updateCallback(finalData);
                 }
               });
-            }
-          } as AutocompleteOption,
+            },
+          } 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.autoComplete,
+          model: Filters.autocompleter,
           // placeholder: '🔎︎ search city',
+          // customStructure: { label: 'name', value: 'code' },
 
           // We can use the autocomplete through 3 ways "collection", "collectionAsync" or with your own autocomplete options
-          // collectionAsync: this.httpFetch.fetch(URL_COUNTRIES_COLLECTION),
+          // collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
 
           // OR use your own autocomplete options, instead of $.ajax, use HttpClient or FetchClient
           // here we use $.ajax just because I'm not sure how to configure HttpClient with JSONP and CORS
           filterOptions: {
             minLength: 3,
-            source: (request, response) => {
+            fetch: (searchText, updateCallback) => {
               $.ajax({
                 url: 'http://gd.geobytes.com/AutoCompleteCity',
                 dataType: 'jsonp',
                 data: {
-                  q: request.term
+                  q: searchText
                 },
                 success: (data) => {
-                  response(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of ['']
+                  updateCallback(finalData);
                 }
               });
-            }
-          } as AutocompleteOption,
+            },
+          } as AutocompleterOption,
         }
       },
       {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts b/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,

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -1,5 +1,5 @@
 import {
-  AutocompleteOption,
+  AutocompleterOption,
   BindingEventService,
   DOMEvent,
   Column,
@@ -196,17 +196,16 @@ export class Example11 {
         type: FieldType.object,
         sortComparer: SortComparers.objectString,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           alwaysSaveOnEnterKey: true,
           massUpdate: true,
           // example with a Remote API call
           editorOptions: {
-            openSearchListOnFocus: true,
+            showOnFocus: true,
             minLength: 1,
-            source: (request, response) => {
-              // const items = require('c://TEMP/items.json');
+            fetch: (searchText, updateCallback) => {
               const products = this.mockProducts();
-              response(products.filter(product => product.itemName.toLowerCase().includes(request.term.toLowerCase())));
+              updateCallback(products.filter(product => product.itemName.toLowerCase().includes(searchText.toLowerCase())));
             },
             renderItem: {
               // layout: 'twoRows',
@@ -215,7 +214,7 @@ export class Example11 {
               layout: 'fourCorners',
               templateCallback: (item: any) => this.renderItemCallbackWith4Corners(item),
             },
-          } as AutocompleteOption,
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,
@@ -236,17 +235,17 @@ export class Example11 {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           alwaysSaveOnEnterKey: true,
           massUpdate: true,
           editorOptions: {
             minLength: 1,
-            source: (request, response) => {
+            fetch: (searchText, updateCallback) => {
               const countries: any[] = require('./data/countries.json');
-              const foundCountries = countries.filter((country) => country.name.toLowerCase().includes(request.term.toLowerCase()));
-              response(foundCountries.map(item => ({ label: item.name, value: item.code, })));
+              const foundCountries = countries.filter((country) => country.name.toLowerCase().includes(searchText.toLowerCase()));
+              updateCallback(foundCountries.map(item => ({ label: item.name, value: item.code, })));
             },
-          },
+          } as AutocompleterOption,
         },
         filter: {
           model: Filters.inputText,