Merge branch 'master' into feat/internal-row-detail-view

ghiscoding · Oct 30, 2021 · 2e240cc · 2e240cc
2 parents 038fa3f + 4314be4
commit 2e240cc
Show file tree

Hide file tree

Showing 109 changed files with 3,852 additions and 1,167 deletions.
diff --git a/.codecov.yml b/.codecov.yml
@@ -13,3 +13,5 @@ coverage:
     patch:
       default:
         threshold: 5%
+github_checks:
+  annotations: false
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.19.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.18.0...v0.19.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* **frozen:** calling `setPinning` with empty object/null should clear it ([48b11f7](https://github.com/ghiscoding/slickgrid-universal/commit/48b11f74f2ce6541b6e6e03bf7fe194e5be96d0e))
+* **style:** remove unnecessary css source map ([4e6fc08](https://github.com/ghiscoding/slickgrid-universal/commit/4e6fc085abe19389d28bf7a8cea3f83859582bdc))
+* **styling:** cleanup CSS files to ship smaller bundle ([69b18bf](https://github.com/ghiscoding/slickgrid-universal/commit/69b18bf3505fc5538de878b7dbf33104faa8b11a))
+* **tree:** Grid State should have Tree Data initial sort ([b24ce40](https://github.com/ghiscoding/slickgrid-universal/commit/b24ce4032ea671aa6de6d8e2bb8b045359fd897b))
+* **tree:** use previous state when refreshing dataset afterward ([0982474](https://github.com/ghiscoding/slickgrid-universal/commit/09824741be404d3d05ccff4417f243c4b1c5c113))
+
+### Features
+
+* **plugin:** add row move shadown item while moving/dragging row ([c665ec8](https://github.com/ghiscoding/slickgrid-universal/commit/c665ec88be859feeea89e5ab8826f2b0a57c5cfb))
+* **plugin:** create new Custom Tooltip plugin ([4c8c4f6](https://github.com/ghiscoding/slickgrid-universal/commit/4c8c4f62423665bc2e1dcf0675b1300607397b6a))
+
+
 # [0.18.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.17.0...v0.18.0) (2021-09-29)
 
 
@@ -27,13 +44,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **tree:** new `excludeChildrenWhenFilteringTree` set as new default ([47df943](https://github.com/ghiscoding/slickgrid-universal/commit/47df943414f383a47062a7ad9245700a1bd8a24e))
 
 
-
-
-
-
 # [0.17.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.2...v0.17.0) (2021-09-09)
 
-
 ### Bug Fixes
 
 * **bundle:** don't assume slickgrid/dataview are always defined ([0505713](https://github.com/ghiscoding/slickgrid-universal/commit/050571315f0d11f1eff853b3961f3be941a99e51))
@@ -63,36 +75,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **styling:** only show header menu caret when hovering ([41e7856](https://github.com/ghiscoding/slickgrid-universal/commit/41e7856f9483f7228d1455f2e3810ae58a5f5c8d))
 * **tree:** add `dynamicallyToggledItemState` method to toggle parent(s) ([26369f9](https://github.com/ghiscoding/slickgrid-universal/commit/26369f9b6c9e81ad5705f580896ab28cf362d090))
 
-
-
-
-
 ## [0.16.2](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.1...v0.16.2) (2021-07-23)
 
-
 ### Bug Fixes
 
 * **formatters:** Complex Object Formatter shouldn't throw with null data ([3421465](https://github.com/ghiscoding/slickgrid-universal/commit/342146557c16b560b5b8ef0f0e47f971179bc765))
 * **tree:** exclude the correct type from interface argument ([af51784](https://github.com/ghiscoding/slickgrid-universal/commit/af51784aa3471dcc88c567f4c3762ab7590184f6))
 
 
-
-
-
 ## [0.16.1](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.0...v0.16.1) (2021-07-16)
 
-
 ### Bug Fixes
 
 * **filters:** startsWith/endsWith operator should work ([f99f1c5](https://github.com/ghiscoding/slickgrid-universal/commit/f99f1c56c27b3e192b829b83a5fde6aad9efc3e7))
 
 
-
-
-
 # [0.16.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.15.0...v0.16.0) (2021-07-16)
 
-
 ### Bug Fixes
 
 * **events:** use nullish coalescing in slickgrid event prefix ([6ff551b](https://github.com/ghiscoding/slickgrid-universal/commit/6ff551b6dab1ba1d8b471273f3419bdb29a60a35))
@@ -102,7 +101,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **styling:** remove css variable on width causing UX problem ([df69f9c](https://github.com/ghiscoding/slickgrid-universal/commit/df69f9c33604187f91adaf5bb8b43b6abd624d32))
 * **tree:** same dataset length but w/different prop should refresh Tree ([549008a](https://github.com/ghiscoding/slickgrid-universal/commit/549008a40ef34a95200c275fbf84bbf7b10aa4bb))
 
-
 ### Features
 
 * **aria:** add aria-label to all Editors/Filters & other html templates ([1a4f8f7](https://github.com/ghiscoding/slickgrid-universal/commit/1a4f8f7873d76b7da5a7d38debed598d3d395c10))
@@ -111,9 +109,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **styling:** add support for CSS Variables ([674dd1a](https://github.com/ghiscoding/slickgrid-universal/commit/674dd1a064d4d42af1d5841ac87ba8ea35a26b2f))
 
 
-
-
-
 # [0.15.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.14.1...v0.15.0) (2021-07-06)
 
 
@@ -174,10 +169,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * convert jQuery to native element on few more filters ([7d5e1e8](https://github.com/ghiscoding/slickgrid-universal/commit/7d5e1e859a0331699d6fb07d2d35797d7274d1df))
 
 
-
-
-
-
 ## [0.14.1](https://github.com/ghiscoding/slickgrid-universal/compare/v0.14.0...v0.14.1) (2021-05-22)
 
 
@@ -186,12 +177,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **editors:** revert to jquery element for aurelia-slickgrid to work ([4d6c358](https://github.com/ghiscoding/slickgrid-universal/commit/4d6c3580ee56df7ec8993176322aede6895f1745))
 
 
-
-
-
 # [0.14.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.13.0...v0.14.0) (2021-05-22)
 
-
 ### Bug Fixes
 
 * **backend:** able to preset filters on hidden columns & all queried ([f1d92cd](https://github.com/ghiscoding/slickgrid-universal/commit/f1d92cda4cb3fabee00bb10dae36d68cd1d861e5))

diff --git a/README.md b/README.md
@@ -57,6 +57,7 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +15,00
 | [@slickgrid-universal/event-pub-sub](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/event-pub-sub) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/event-pub-sub.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/event-pub-sub) | basic PubSub Service using JS Events | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/event-pub-sub/CHANGELOG.md) |
 | [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component) | Composite Editor Modal Component | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/composite-editor-component/CHANGELOG.md) |
 | [@slickgrid-universal/custom-footer-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-footer-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-footer-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-footer-component) | Custom Footer Component for the grid | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/custom-footer-component/CHANGELOG.md) |
+| [@slickgrid-universal/custom-tooltip-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-tooltip-plugin) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-tooltip-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-tooltip-plugin) | Custom Tooltip (plugin) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/custom-tooltip-plugin/CHANGELOG.md) |
 | [@slickgrid-universal/empty-warning-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/empty-warning-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/empty-warning-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/empty-warning-component) | simple Empty Data Warning Component | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/empty-warning-component/CHANGELOG.md) |
 | [@slickgrid-universal/pagination-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/pagination-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/pagination-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/pagination-component) | simple Pagination Component | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/pagination-component/CHANGELOG.md) |
 | [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/excel-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/excel-export) | Export to Excel Service (xls/xlsx) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/excel-export/CHANGELOG.md) |

diff --git a/examples/webpack-demo-vanilla-bundle/CHANGELOG.md b/examples/webpack-demo-vanilla-bundle/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.19.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.18.0...v0.19.0) (2021-10-28)
+
+
+### Features
+
+* **plugin:** add row move shadown item while moving/dragging row ([c665ec8](https://github.com/ghiscoding/slickgrid-universal/commit/c665ec88be859feeea89e5ab8826f2b0a57c5cfb))
+* add async process to use with Promise/Observable ([7350a6d](https://github.com/ghiscoding/slickgrid-universal/commit/7350a6d06ef5bb8495a05e22421f9b7b5a4270cb))
+* add auto-position depending on available space ([82d6134](https://github.com/ghiscoding/slickgrid-universal/commit/82d6134003900ca8e345bd02a35e3830476638e3))
+* **plugin:** create new Custom Tooltip plugin ([4c8c4f6](https://github.com/ghiscoding/slickgrid-universal/commit/4c8c4f62423665bc2e1dcf0675b1300607397b6a))
+
+
+
+
+
+
 # [0.18.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.17.0...v0.18.0) (2021-09-29)
 
 

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": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "description": "SlickGrid-Universal demo",
   "directories": {
@@ -24,7 +24,7 @@
     "url": "https://github.com/ghiscoding/slickgrid-universal/issues"
   },
   "engines": {
-    "node": ">=14.15.0",
+    "node": ">=14.17.0",
     "npm": ">=6.14.8"
   },
   "main": "src/slickgrid-universal/index",
@@ -34,36 +34,36 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "^0.18.0",
-    "@slickgrid-universal/excel-export": "^0.18.0",
-    "@slickgrid-universal/text-export": "^0.18.0",
-    "@slickgrid-universal/vanilla-bundle": "^0.18.0",
+    "@slickgrid-universal/common": "^0.19.0",
+    "@slickgrid-universal/excel-export": "^0.19.0",
+    "@slickgrid-universal/text-export": "^0.19.0",
+    "@slickgrid-universal/vanilla-bundle": "^0.19.0",
     "bulma": "^0.9.3",
     "moment-mini": "^2.24.0",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@types/jquery": "^3.5.6",
+    "@types/jquery": "^3.5.8",
     "@types/moment": "^2.13.0",
-    "@types/node": "^16.10.2",
+    "@types/node": "^16.11.6",
     "@types/webpack": "^5.28.0",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.5.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.3.3",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "5.3.2",
-    "mini-css-extract-plugin": "^2.3.0",
-    "rxjs": "^7.3.1",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.3.0",
+    "fork-ts-checker-webpack-plugin": "^6.4.0",
+    "html-loader": "^3.0.0",
+    "html-webpack-plugin": "5.5.0",
+    "mini-css-extract-plugin": "^2.4.3",
+    "rxjs": "^7.4.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.2.6",
-    "ts-node": "^10.2.1",
+    "ts-node": "^10.4.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.57.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.1"
+    "webpack": "^5.60.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
   }
-}
+}
diff --git a/examples/webpack-demo-vanilla-bundle/src/app-routing.ts b/examples/webpack-demo-vanilla-bundle/src/app-routing.ts
@@ -19,6 +19,7 @@ export class AppRouting {
       { route: 'example13', name: 'example13', title: 'Example13', moduleId: './examples/example13' },
       { route: 'example14', name: 'example14', title: 'Example14', moduleId: './examples/example14' },
       { route: 'example15', name: 'example15', title: 'Example15', moduleId: './examples/example15' },
+      { route: 'example16', name: 'example16', title: 'Example16', moduleId: './examples/example16' },
       { route: 'icons', name: 'icons', title: 'icons', moduleId: './examples/icons' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' }

diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -72,6 +72,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example15')">
             Example15 - OData Backend Service with RxJS
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example16')">
+            Example16 - Regular & Custom Tooltips
+          </a>
         </div>
       </div>
     </div>

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss
@@ -10,4 +10,4 @@ $control-height: 2.4em;
 
 //   /** 2. or use the SASS @mixin that will produce the `filter` color */
 //   @include recolor(#ff0000, 0.9); // convert red color into `filter` with opacity of 0.9
-// }
+// }
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -20,7 +20,6 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
-import '../salesforce-styles.scss';
 import './example03.scss';
 
 // using external SlickGrid JS libraries
@@ -521,4 +520,4 @@ export class Example3 {
       this.sgb?.slickGrid.gotoCell(command.row, command.cell, false);
     }
   }
-}
+}
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -155,9 +155,9 @@ export class Example7 {
         type: FieldType.string,
         editor: {
           // We can load the "collection" asynchronously (on first load only, after that we will simply use "collection")
-          // 2 ways are supported (aurelia-http-client, aurelia-fetch-client OR even Promise)
+          // 2 ways are supported (fetch client OR even Promise)
 
-          // OR 1- use "aurelia-fetch-client", they are both supported
+          // OR 1- use "fetch client", they are both supported
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
 
           // OR 2- use a Promise
@@ -370,7 +370,7 @@ export class Example7 {
     return true;
   }
 
-  onMoveRows(_e: Event, args: any) {
+  onMoveRows(_e: Event, args: { rows: number[]; insertBefore: number; }) {
     // rows and insertBefore references,
     // note that these references are assuming that the dataset isn't filtered at all
     // which is not always the case so we will recalcualte them and we won't use these reference afterward

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts
@@ -185,8 +185,8 @@ export class Example14 {
         id: 'complexity', name: 'Complexity', field: 'complexity',
         resizeCalcWidthRatio: 0.82, // default calc ratio is 1 or 0.95 for field type of string
         sortable: true, filterable: true, columnGroup: 'Analysis',
-        formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
-        exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value].label,
+        formatter: (_row, _cell, value) => this.complexityLevelList[value]?.label,
+        exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value]?.label,
         filter: {
           model: Filters.multipleSelect,
           collection: this.complexityLevelList

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example15.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example15.ts
@@ -1,8 +1,9 @@
 import { BindingEventService, Column, Editors, FieldType, Filters, GridOption, GridStateChange, Metrics, OperatorType, } from '@slickgrid-universal/common';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
 import { RxJsResource } from '@slickgrid-universal/rxjs-observable';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import { Observable, of, Subject } from 'rxjs';
+import { delay, Observable, of, Subject } from 'rxjs';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
@@ -67,7 +68,7 @@ export class Example15 {
         filterable: true,
         filter: {
           model: Filters.compoundInput
-        }
+        },
       },
       {
         id: 'gender', name: 'Gender', field: 'gender', filterable: true,
@@ -84,7 +85,31 @@ export class Example15 {
           }
         }
       },
-      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true },
+      {
+        id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true,
+        customTooltip: {
+          // you can use the Custom Tooltip in 2 ways (synchronous or asynchronous)
+          // example 1 (sync):
+          // formatter: this.tooltipCompanyAddressFormatter.bind(this),
+
+          // example 2 (async w/Observable):
+          // when using async, the `formatter` will contain the loading spinner
+          // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves
+          formatter: () => `<div><span class="mdi mdi-load mdi-spin-1s"></span> loading...</div>`,
+          asyncProcess: (row, cell, value, column, dataContext) => new Observable((observer) => {
+            observer.next({
+              // return random door number & zip code to simulare company address
+              doorNumber: dataContext.id + 100,
+              zip: dataContext.id + 600000
+            });
+            observer.complete();
+          }).pipe(delay(150)),
+          asyncPostFormatter: this.tooltipCompanyAddressFormatter,
+
+          // optional conditional usability callback
+          // usabilityOverride: (args) => !!(args.dataContext?.id % 2) // show it only every second row
+        },
+      },
     ];
 
     this.gridOptions = {
@@ -147,7 +172,7 @@ export class Example15 {
           this.getCustomerCallback(response);
         }
       } as OdataServiceApi,
-      registerExternalResources: [new RxJsResource()]
+      registerExternalResources: [new RxJsResource(), new SlickCustomTooltip()]
     };
   }
 
@@ -392,6 +417,16 @@ export class Example15 {
     this.sgb.paginationService.goToLastPage();
   }
 
+  tooltipCompanyAddressFormatter(row, cell, value, column, dataContext) {
+    const tooltipTitle = `${dataContext.company} - Address Tooltip`;
+
+    // display random address and zip code to simulate company address
+    const randomStreet = dataContext.id % 3 ? 'Belleville' : 'Hollywood';
+    return `<div class="color-se-danger" style="font-weight: bold">${tooltipTitle}</div>
+      <div class="tooltip-2cols-row"><div>Address:</div> <div>${dataContext.__params.doorNumber.toFixed(0)} ${randomStreet} blvd</div></div>
+      <div class="tooltip-2cols-row"><div>Zip:</div> <div>${dataContext.__params.zip.toFixed(0)}</div></div>`;
+  }
+
   // THE FOLLOWING METHODS ARE ONLY FOR DEMO PURPOSES DO NOT USE THIS CODE
   // ---
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ $control-height: 2.4em; @@
     //   /** 2. or use the SASS @mixin that will produce the `filter` color */
     //   @include recolor(#ff0000, 0.9); // convert red color into `filter` with opacity of 0.9
-    // }
+    // }