chore(deps): upgrade to Aurelia-Slickgrid 8.4.0

ghiscoding · Jul 20, 2024 · 980c837 · 980c837
1 parent 1e87340
commit 980c837
Show file tree

Hide file tree

Showing 10 changed files with 412 additions and 380 deletions.
diff --git a/webpack-bs5-demo-with-locales/package-lock.json b/webpack-bs5-demo-with-locales/package-lock.json
diff --git a/webpack-bs5-demo-with-locales/package.json b/webpack-bs5-demo-with-locales/package.json
@@ -25,15 +25,15 @@
     "@aurelia/router": "^2.0.0-beta.20",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/composite-editor-component": "^5.3.4",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.3.4",
-    "@slickgrid-universal/excel-export": "^5.3.4",
-    "@slickgrid-universal/graphql": "^5.3.4",
-    "@slickgrid-universal/odata": "^5.3.4",
-    "@slickgrid-universal/rxjs-observable": "^5.3.4",
-    "@slickgrid-universal/text-export": "^5.3.4",
+    "@slickgrid-universal/composite-editor-component": "^5.4.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.4.0",
+    "@slickgrid-universal/excel-export": "^5.4.0",
+    "@slickgrid-universal/graphql": "^5.4.0",
+    "@slickgrid-universal/odata": "^5.4.0",
+    "@slickgrid-universal/rxjs-observable": "^5.4.0",
+    "@slickgrid-universal/text-export": "^5.4.0",
     "aurelia": "^2.0.0-beta.20",
-    "aurelia-slickgrid": "^8.3.2",
+    "aurelia-slickgrid": "^8.4.0",
     "bootstrap": "^5.3.3",
     "dompurify": "^3.1.6",
     "fetch-jsonp": "^1.3.0",
@@ -46,7 +46,7 @@
     "@fnando/sparkline": "^0.3.10",
     "@types/bluebird": "^3.5.42",
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "@types/webpack": "^5.28.5",
     "aurelia-polyfills": "^1.3.4",
     "autoprefixer": "^10.4.19",

diff --git a/webpack-bs5-demo-with-locales/src/examples/slickgrid/example13.ts b/webpack-bs5-demo-with-locales/src/examples/slickgrid/example13.ts
@@ -57,11 +57,27 @@ export class Example13 {
 
   /* Define grid Options and Columns */
   defineGrid() {
+    // add a simple button with event listener on 1st column for testing purposes
+    // a simple button with click event
+    const nameElementColumn1 = document.createElement('div');
+    const btn = document.createElement('button');
+    const btnLabel = document.createElement('span');
+    btnLabel.className = 'mdi mdi-help-circle no-padding';
+    btn.dataset.test = 'col1-hello-btn';
+    btn.className = 'btn btn-outline-secondary btn-xs btn-icon ms-1';
+    btn.textContent = 'Click me';
+    btn.title = 'simple column header test with a button click listener';
+    btn.addEventListener('click', () => alert('Hello World'));
+    btn.appendChild(btnLabel);
+    nameElementColumn1.appendChild(document.createTextNode('Id '));
+    nameElementColumn1.appendChild(btn);
+
     this.columnDefinitions = [
       {
-        id: 'sel', name: '#', field: 'num', width: 40, type: FieldType.number,
+        id: 'sel', name: nameElementColumn1, field: 'num', type: FieldType.number,
+        columnPickerLabel: 'Custom Label', // add a custom label for the ColumnPicker/GridMenu when default header value extractor doesn't work for you ()
+        width: 140, maxWidth: 150,
         excludeFromExport: true,
-        maxWidth: 70,
         resizable: true,
         filterable: true,
         selectable: false,

diff --git a/webpack-bs5-demo-with-locales/src/examples/slickgrid/example5.ts b/webpack-bs5-demo-with-locales/src/examples/slickgrid/example5.ts
@@ -138,9 +138,9 @@ export class Example5 {
           enableCount: this.isCountEnabled, // add the count in the OData query, which will return a property named "__count" (v2) or "@odata.count" (v4)
           enableSelect: this.isSelectEnabled,
           enableExpand: this.isExpandEnabled,
-          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValue }) => {
+          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
             if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
-              let matchesSearch = (searchValue as string).replace(/\*/g, '.*');
+              let matchesSearch = searchValues[0].replace(/\*/g, '.*');
               matchesSearch = matchesSearch.slice(0, 1) + CARET_HTML_ESCAPED + matchesSearch.slice(1);
               matchesSearch = matchesSearch.slice(0, -1) + '$\'';
 

diff --git a/webpack-bs5-demo-with-locales/src/examples/slickgrid/example6.ts b/webpack-bs5-demo-with-locales/src/examples/slickgrid/example6.ts
@@ -194,13 +194,13 @@ export class Example6 {
             field: 'userId',
             value: 123
           }],
-          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValue }) => {
+          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
             if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
               // technically speaking GraphQL isn't a database query language like SQL, it's an application query language.
               // What that means is that GraphQL won't let you write arbitrary queries out of the box.
               // It will only support the types of queries defined in your GraphQL schema.
               // see this SO: https://stackoverflow.com/a/37981802/1212166
-              return { field: fieldName, operator: 'Like', value: searchValue };
+              return { field: fieldName, operator: 'Like', value: searchValues[0] };
             }
             return;
           },