feat(core): BREAKING CHANGE replace jQueryUI by SortableJS

CHANGELOG.md

@@ -1,3 +1,19 @@
+# Change Log 
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [5.0.0-alpha.0](https://github.com/ghiscoding/aurelia-slickgrid/compare/v4.3.0...v5.0.0-alpha.0) (2022-10-16)
+
+
+### Bug Fixes
+
+* **demo:** edit outline should follow on filter/pagination changed ([#857](https://github.com/ghiscoding/aurelia-slickgrid/issues/857)) ([7a484d6](https://github.com/ghiscoding/aurelia-slickgrid/commit/7a484d6f54fe5254f0a26e7d51e5d34f13c8b62f))
+
+
+### Features
+
+* **deps:** BREAKING CHANGE upgrade `aurelia-i18n` to major v4 ([#828](https://github.com/ghiscoding/aurelia-slickgrid/issues/828)) ([d992286](https://github.com/ghiscoding/aurelia-slickgrid/commit/d99228628ee037266265fd3f07a6462131057b16))
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
@@ -1732,4 +1748,4 @@ All notable changes to this project will be documented in this file. See [standa
 * **grid:** add Pagination page number input ([8a89c58](https://github.com/ghiscoding/aurelia-slickgrid/commit/8a89c58))
 * **query:** add `excludeFromQuery` prop and use it for Row Selection ([cda0e39](https://github.com/ghiscoding/aurelia-slickgrid/commit/cda0e39))
 * **queryFilter:** add new "queryFieldFilter" and "queryFieldSorter" ([9d2aae1](https://github.com/ghiscoding/aurelia-slickgrid/commit/9d2aae1))
-* **selectEditors:** add select grid editors ([#22](https://github.com/ghiscoding/aurelia-slickgrid/issues/22)) ([5bd7215](https://github.com/ghiscoding/aurelia-slickgrid/commit/5bd7215))
+* **selectEditors:** add select grid editors ([#22](https://github.com/ghiscoding/aurelia-slickgrid/issues/22)) ([5bd7215](https://github.com/ghiscoding/aurelia-slickgrid/commit/5bd7215))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-slickgrid",
-  "version": "4.3.0",
+  "version": "5.0.0-alpha.0",
   "description": "Slickgrid components made available in Aurelia",
   "keywords": [
     "aurelia",
@@ -54,18 +54,19 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@slickgrid-universal/common": "~1.4.0",
-    "@slickgrid-universal/custom-footer-component": "~1.4.0",
-    "@slickgrid-universal/empty-warning-component": "~1.4.0",
-    "@slickgrid-universal/event-pub-sub": "~1.4.0",
-    "@slickgrid-universal/pagination-component": "~1.4.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~1.4.0",
+    "@slickgrid-universal/common": "2.0.0-alpha.0",
+    "@slickgrid-universal/custom-footer-component": "2.0.0-alpha.0",
+    "@slickgrid-universal/empty-warning-component": "2.0.0-alpha.0",
+    "@slickgrid-universal/event-pub-sub": "2.0.0-alpha.0",
+    "@slickgrid-universal/pagination-component": "2.0.0-alpha.0",
+    "@slickgrid-universal/row-detail-view-plugin": "2.0.0-alpha.0",
     "aurelia-event-aggregator": "^1.0.3",
     "aurelia-framework": "^1.4.1",
     "aurelia-i18n": "^4.0.3",
     "aurelia-pal": "^1.8.2",
     "dompurify": "^2.4.0",
-    "jquery": "^3.6.1"
+    "jquery": "^3.6.1",
+    "sortablejs": "^1.15.0"
   },
   "peerDependencies": {
     "i18next": ">=21.0.0"
@@ -75,20 +76,21 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.6",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@slickgrid-universal/composite-editor-component": "~1.4.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~1.4.0",
-    "@slickgrid-universal/excel-export": "~1.4.0",
-    "@slickgrid-universal/graphql": "~1.4.0",
-    "@slickgrid-universal/odata": "~1.4.0",
-    "@slickgrid-universal/rxjs-observable": "~1.4.0",
-    "@slickgrid-universal/text-export": "~1.4.0",
-    "@types/bluebird": "^3.5.37",
+    "@slickgrid-universal/composite-editor-component": "2.0.0-alpha.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "2.0.0-alpha.0",
+    "@slickgrid-universal/excel-export": "2.0.0-alpha.0",
+    "@slickgrid-universal/graphql": "2.0.0-alpha.0",
+    "@slickgrid-universal/odata": "2.0.0-alpha.0",
+    "@slickgrid-universal/rxjs-observable": "2.0.0-alpha.0",
+    "@slickgrid-universal/text-export": "2.0.0-alpha.0",
+    "@types/bluebird": "^3.5.36",
     "@types/dompurify": "^2.3.4",
     "@types/fnando__sparkline": "^0.3.4",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.1.2",
     "@types/jquery": "^3.5.14",
     "@types/node": "^18.7.16",
+    "@types/sortablejs": "^1.13.0",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",

src/assets/i18n/en/aurelia-slickgrid.json

@@ -36,6 +36,7 @@
   "ITEMS": "items",
   "ITEMS_PER_PAGE": "items per page",
   "ITEMS_SELECTED": "items selected",
+  "NO_ELEMENTS_FOUND": "No elements found",
   "LAST_UPDATE": "Last Update",
   "LESS_THAN": "Less than",
   "LESS_THAN_OR_EQUAL_TO": "Less than or equal to",

src/assets/i18n/fr/aurelia-slickgrid.json

@@ -39,6 +39,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)",

src/aurelia-slickgrid/constants.ts

@@ -48,6 +48,7 @@ export class Constants {
     TEXT_LAST_UPDATE: 'Last Update',
     TEXT_LESS_THAN: 'Less than',
     TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+    TEXT_NO_ELEMENTS_FOUND: 'Aucun élément trouvé',
     TEXT_NOT_CONTAINS: 'Not contains',
     TEXT_NOT_EQUAL_TO: 'Not equal to',
     TEXT_PAGE: 'Page',

src/aurelia-slickgrid/custom-elements/__tests__/aurelia-slickgrid.spec.ts

@@ -734,7 +734,7 @@ describe('Aurelia-Slickgrid Component instantiated via Constructor', () => {
         http.returnKey = 'date';
         http.returnValue = '6/24/1984';
         http.responseHeaders = { accept: 'json' };
-        const collectionAsync = http.fetch('http://locahost/api', { method: 'GET' });
+        const collectionAsync = http.fetch('http://localhost/api', { method: 'GET' });
         const mockColDefs = [{ id: 'gender', field: 'gender', editor: { model: Editors.text, collectionAsync } }] as Column[];
 
         customElement.columnDefinitions = mockColDefs;
@@ -777,7 +777,7 @@ describe('Aurelia-Slickgrid Component instantiated via Constructor', () => {
         http.returnKey = 'date';
         http.returnValue = '6/24/1984';
         http.responseHeaders = { accept: 'json' };
-        const collectionAsync = http.fetch('http://locahost/invalid-url', { method: 'GET' });
+        const collectionAsync = http.fetch('http://localhost/invalid-url', { method: 'GET' });
         const mockColDefs = [{ id: 'gender', field: 'gender', editor: { model: Editors.text, collectionAsync } }] as Column[];
         jest.spyOn(mockGrid, 'getColumns').mockReturnValue(mockColDefs);
 
@@ -786,7 +786,7 @@ describe('Aurelia-Slickgrid Component instantiated via Constructor', () => {
         customElement.initialization(slickEventHandler);
 
         setTimeout(() => {
-          expect(consoleSpy).toHaveBeenCalledWith(expect.toInclude('[Aurelia-SlickGrid] The response body passed to collectionAsync was already read.Either pass the dataset from the Response or clone the response first using response.clone()'));
+          expect(consoleSpy).toHaveBeenCalledWith(expect.toInclude('[Aurelia-SlickGrid] The response body passed to collectionAsync was already read. Either pass the dataset from the Response or clone the response first using response.clone()'));
           done();
         });
       });

src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

@@ -1,18 +1,15 @@
 // import 3rd party vendor libs
-// also only import jQueryUI necessary widget (note autocomplete & slider are imported in their respective editors/filters)
 import * as $ from 'jquery';
-import 'jquery-ui/ui/widgets/draggable';
-import 'jquery-ui/ui/widgets/droppable';
-import 'jquery-ui/ui/widgets/sortable';
-import 'slickgrid/lib/jquery.event.drag-2.3.0';
-import 'slickgrid/lib/jquery.mousewheel';
-import 'slickgrid/slick.core';
-import 'slickgrid/slick.dataview';
-import 'slickgrid/slick.grid';
+import 'slickgrid/dist/slick.core.min';
+import 'slickgrid/dist/slick.interactions.min';
+import 'slickgrid/dist/slick.grid.min';
+import 'slickgrid/dist/slick.dataview.min';
+import * as Sortable_ from 'sortablejs';
+const Sortable = ((Sortable_ as any)?.['default'] ?? Sortable_); // patch for rollup
 
 import {
   // interfaces/types
-  AutoCompleteEditor,
+  AutocompleterEditor,
   BackendServiceApi,
   BackendServiceOption,
   Column,
@@ -82,6 +79,9 @@ import { SlickRowDetailView } from '../extensions/slickRowDetailView';
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
 
+// add Sortable to the window object so that SlickGrid lib can use globally
+(window as any).Sortable = Sortable;
+
 // Aurelia doesn't support well TypeScript @autoinject in a Plugin so we'll do it the manual way
 @inject(
   AureliaUtilService,
@@ -1135,14 +1135,14 @@ export class AureliaSlickgridCustomElement {
           this.updateEditorCollection(column, response); // from Promise
         } else if (response instanceof Response && typeof response.json === 'function') {
           if (response.bodyUsed) {
-            console.warn(`[Aurelia-SlickGrid] The response body passed to collectionAsync was already read.`
+            console.warn(`[Aurelia-SlickGrid] The response body passed to collectionAsync was already read. `
               + `Either pass the dataset from the Response or clone the response first using response.clone()`);
           } else {
             // from Fetch
             (response as Response).json().then(data => this.updateEditorCollection(column, data));
           }
-        } else if (response && response['content']) {
-          this.updateEditorCollection(column, response['content']); // from http-client
+        } else if (response?.content) {
+          this.updateEditorCollection(column, response.content); // from http-client
         }
       });
     } else if (this.rxjs?.isObservable(collectionAsync)) {
@@ -1460,7 +1460,7 @@ export class AureliaSlickgridCustomElement {
     }
 
     // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
-    const currentEditor = this.grid.getCellEditor() as AutoCompleteEditor | SelectEditor;
+    const currentEditor = this.grid.getCellEditor() as AutocompleterEditor | SelectEditor;
     if (currentEditor?.disable && currentEditor?.renderDomElement) {
       currentEditor.destroy();
       currentEditor.disable(false);

src/aurelia-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts

@@ -548,7 +548,7 @@ describe('SlickRowDetailView', () => {
       http.returnKey = 'date';
       http.returnValue = '6/24/1984';
       http.responseHeaders = { accept: 'json' };
-      gridOptionsMock.rowDetailView!.process = () => http.fetch('http://locahost/api', { method: 'GET' });
+      gridOptionsMock.rowDetailView!.process = () => http.fetch('http://localhost/api', { method: 'GET' });
       plugin.init(gridStub);
       plugin.onAsyncResponse = new Slick.Event();
       plugin.onAsyncResponse.subscribe((_e, response) => {

src/examples/slickgrid/example23.ts

@@ -14,7 +14,6 @@ import {
   Formatters,
   GridOption,
   GridStateChange,
-  JQueryUiSliderOption,
   Metrics,
   MultipleSelectOption,
   OperatorType,
@@ -114,11 +113,12 @@ export class Example23 {
         type: FieldType.number,
         filterable: true,
         filter: {
-          model: Filters.sliderRange,
+          // model: Filters.sliderRange,
+          model: Filters.slider,
           maxValue: 100, // or you can use the filterOptions as well
           operator: OperatorType.rangeInclusive, // defaults to exclusive
           params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
-          filterOptions: { min: 0, step: 5 } as JQueryUiSliderOption // you can also optionally pass any option of the jQuery UI Slider
+          filterOptions: { min: 0, step: 5 }
         }
       },
       {

src/examples/slickgrid/example3.ts

@@ -4,7 +4,7 @@ import { HttpClient } from 'aurelia-http-client';
 import { I18N } from 'aurelia-i18n';
 import {
   AureliaGridInstance,
-  AutocompleteOption,
+  AutocompleterOption,
   Column,
   EditCommand,
   Editors,
@@ -271,7 +271,7 @@ export class Example3 {
         sortable: true,
         minWidth: 100,
         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
@@ -280,7 +280,7 @@ export class Example3 {
           editorOptions: {
             minLength: 3,
             forceUserInput: true,
-            source: (request, response) => {
+            fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
               /** with FETCH, note this demo won't work because of CORS */
               // this.httpFetch.fetch(`http://gd.geobytes.com/AutoCompleteCity?q=${request.term}`)
               //   .then(response => response.json())
@@ -292,17 +292,18 @@ export class Example3 {
                 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 [''] to show empty msg
+                  updateCallback(finalData);
                 }
               });
             }
-          } as AutocompleteOption,
+          } as AutocompleterOption,
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           // placeholder: '🔎︎ search city',
 
           // We can use the autocomplete through 3 ways "collection", "collectionAsync" or with your own autocomplete options
@@ -312,19 +313,20 @@ export class Example3 {
           // here we use $.ajax just because I'm not sure how to configure Aurelia HttpClient with JSONP and CORS
           filterOptions: {
             minLength: 3,
-            source: (request, response) => {
+            fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
               $.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 [''] to show empty msg
+                  updateCallback(finalData);
                 }
               });
             }
-          } as AutocompleteOption,
+          } as AutocompleterOption,
         }
       }, {
         id: 'countryOfOrigin', name: 'Country of Origin', field: 'countryOfOrigin',
@@ -337,12 +339,12 @@ export class Example3 {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           customStructure: { label: 'name', value: 'code' },
           collectionAsync: this.httpFetch.fetch(URL_COUNTRIES_COLLECTION),
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           customStructure: { label: 'name', value: 'code' },
           collectionAsync: this.httpFetch.fetch(URL_COUNTRIES_COLLECTION),
         }
@@ -352,11 +354,11 @@ export class Example3 {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           collectionAsync: this.httpFetch.fetch(URL_COUNTRY_NAMES),
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           collectionAsync: this.httpFetch.fetch(URL_COUNTRY_NAMES),
         }
       }, {