Merge pull request #471 from qgrid/9.1.3

9.1.3

CHANGELOG.md

@@ -3,14 +3,29 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
-## [Unreleased]
-* Vscroll.
-* Copy/paste selection to excel.
-* Live data plugin.
-* Float rows navigation.
-* Grouped rows navigation improvements.
-
-## [9.1.0] - 2020-05-26
+## [9.1.3] - 2020-06-01
+### BREAKING
+* Remove q-grid-title, use `q-grid-caption` instead.
+
+### Fixed
+* Remove auto entering to the edit mode on cell focus.
+* Row options column menu item click doesn't trigger an action.
+* Fixed when cell-handler go out of view port when hold page-up.
+* Highlight column on mouse over even if it's sorted.
+* When focus grid using tab key, also focus first focusable cell.
+* Clear function on column filter expression views deactivates filter.
+* Pane doesn't work when select row.
+* Select all by `ctrl-a` in `multiple` and `range` modes.
+
+## Added
+* Add new option for column generation, typeDetection = 'inference' | 'raw'.
+* Add shortcuts to the pager's next/prev buttons (alt+pagedown, alt+pageup).
+* Introduce q-grid-row `behavior` array input to control if it's required to expand row on click or shortcut.
+* Add `q-grid-focused` class to the row when one of it's cell is in focus..
+* Add `q-grid-alt` plugin that automatically set pagination and selection by `alt+[0-9]` shortcuts.
+* Add `timestamp` property to mouse state to handle double clicks.
+
+## [9.1.2] - 2020-05-27
 ### BREAKING
 - q-grid is block element by default, was inline.
 - Rename edit state property from `state` to `status`.
@@ -520,8 +535,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 * Pager plugin.
 * Progress plugin.
 
-[unreleased]: https://github.com/qgrid/ng2/compare/v9.1.0...HEAD
-[9.1.0]: https://github.com/qgrid/ng2/compare/v9.0.1...v9.1.0
+[unreleased]: https://github.com/qgrid/ng2/compare/v9.1.3...HEAD
+[9.1.3]: https://github.com/qgrid/ng2/compare/v9.0.1...v9.1.3
 [9.0.1]: https://github.com/qgrid/ng2/compare/v9.0.0...v9.0.1
 [9.0.0]: https://github.com/qgrid/ng2/compare/v7.5.2...v9.0.0
 [7.5.2]: https://github.com/qgrid/ng2/compare/v7.5.1...v7.5.2

README.md

@@ -43,11 +43,7 @@ Note that now q-grid supports 2 themes out of box `@angular/material` and `basic
  `
 })
 export class MyComponent {
- rows$: Observable<[]>;
-
- constructor(dataService: MyDataService) {
- this.rows$ = dataService.getRows();
- }
+ rows$ = this.dataService.getRows();
 }
 ```
 
@@ -59,7 +55,7 @@ Note that q-grid rows should be an array of objects, any other types like array
 * @angular/core
 * @angular/forms
 
-If you use `material` theme from the q-grid package, you also need to install [angular material](https://material.angular.io/)
+If `material` theme is used, it's also required to install [angular material](https://material.angular.io/)
 
 * @angular/cdk
 * @angular/material
@@ -79,13 +75,19 @@ npm install
 npm run build:lib
 ```
 
+## Build Application
+```bash
+git clone https://github.com/qgrid/ng2.git
+npm install
+npm run build:app
+```
+
 ## Browser support
 
-* `Chrome` is supported.
-* `FireFox` is supported.
-* `Safari` is supported.
-* `Edge` is in progress.
-* `IE11` is in progress.
+* `Chrome` latest is supported.
+* `FireFox` latest is supported.
+* `Safari` latest is supported.
+* `Edge` latest is supported.
 
 ## Licence
 

build.lib.js

@@ -11,7 +11,7 @@ const PROJECTS_PATH = path.join(ROOT_PATH, 'projects');
 const DIST_PATH = path.join(ROOT_PATH, 'dist');
 const NG2_DIST_PATH = path.join(DIST_PATH, 'ng2-qgrid');
 
-const OPTIONS = ['--prod', '--tsConfig=tsconfig.prod.json'];
+const OPTIONS = ['--prod', '--tsConfig=tsconfig.lib.json'];
 
 async function main() {
  await buildLib('ngx-qgrid', OPTIONS);

package.json

@@ -1,18 +1,18 @@
 {
  "name": "ng2-qgrid",
- "version": "9.1.0",
+ "version": "9.1.3",
  "scripts": {
- "build:app": "ng build --prod --output-path dist/app --base-href /ng2/",
- "build:lib": "node build.lib.js",
+ "build:app": "npm run clean && ng build --prod --output-path dist/app --base-href /ng2/",
+ "build:lib": "npm run clean && node build.lib.js",
  "clean": "rimraf dist",
  "lint": "ng lint",
  "ng": "ng",
  "pretest:screenshot": "webdriver-manager update --gecko=false && if not exist e2e\\diff mkdir e2e\\diff",
  "release:app": "npm run build:app && npx angular-cli-ghpages --dir=dist/app",
  "release:example": "node ./build.example",
- "release:lib": "npm run build:release && cd dist && npm publish",
- "start:prod": "rimraf dist && node build.serve --prod",
- "start": "rimraf dist && node build.serve",
+ "release:lib": "npm run build:lib && cd dist/ng2-qgrid && npm publish",
+ "start:prod": "node build.serve --prod",
+ "start": "node build.serve",
  "test:debug": "ng test --browsers ChromeDebug",
  "test:screenshot-update-goldens": "protractor ./e2e/protractor-update-goldens.conf.js",
  "test:screenshot": "protractor ./e2e/protractor.conf.js",
@@ -58,6 +58,7 @@
  "chai": "^4.2.0",
  "chai-as-promised": "^7.1.1",
  "chai-spies": "^1.0.0",
+ "classlist.js": "^1.1.20150312",
  "codelyzer": "^5.2.2",
  "command-line-args": "^5.1.1",
  "css.escape": "^1.5.1",

projects/assets/cell.scss

@@ -64,6 +64,10 @@ th {
  @include width(250px);
  }
 
+ &.q-grid-the-\$alt\.number {
+ @include width(48px);
+ }
+
  &.q-grid-select,
  &.q-grid-row-options,
  &.q-grid-row-indicator,
@@ -108,4 +112,12 @@ tfoot {
  cursor: pointer;
  }
  }
+
+ tr:not(.q-grid-highlighted) {
+ td:not(.q-grid-highlighted) {
+ &.q-grid-row-number {
+ background: $selected;
+ }
+ }
+ }
 }

projects/assets/highlight.scss

@@ -7,15 +7,13 @@ td {
  }
 }
 
-tr {
- &.q-grid-highlighted {
- td {
+tr.q-grid-highlighted {
+ td {
 
- &.q-grid-sorted,
- &.q-grid-selected
- &.q-grid-focused {
- background-color: $highlighted;
- }
+ &.q-grid-sorted,
+ &.q-grid-selected,
+ &.q-grid-focused {
+ background-color: $highlighted;
  }
  }
 }

projects/assets/selection.scss

@@ -12,7 +12,7 @@ td {
 .q-grid-select-mix,
 .q-grid-select-range {
  tr:not(.q-grid-highlighted) {
- td {
+ td:not(.q-grid-highlighted) {
  &.q-grid-selected {
  background-color: $selected;
  }

projects/ng2-qgrid-theme-basic/package.json

@@ -1,10 +1,9 @@
 {
  "name": "ng2-qgrid/theme/basic",
- "version": "9.1.0",
+ "version": "9.1.3",
  "peerDependencies": {
  "@angular/common": "^9.1.0",
  "@angular/core": "^9.1.0",
- "tslib": "^1.10.0",
- "ng2-qgrid": "9.1.0"
+ "ng2-qgrid": "9.1.3"
  }
 }

projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select-radio.tpl.html

@@ -1,10 +1,11 @@
 <ng-template key="body-cell-select-the-$select-singleOnly.tpl.html"
  let-$cell
  let-$view="$view">
- <input type="radio"
- [q-grid-dirty]="$view.selection.stateCheck | async"
- [checked]="$view.selection.state($cell.row)"
- [disabled]="!$view.selection.state($cell.row) && !$view.selection.toggleRow.canExecute($cell.row)"
- (change)="$view.selection.toggleRow.execute($cell.row)"
- tabindex="-1" />
+ <ng-container [q-grid-dirty]="$view.selection.stateCheck | async">
+ <input type="radio"
+ [checked]="$view.selection.state($cell.row)"
+ [disabled]="!$view.selection.state($cell.row) && !$view.selection.toggleRow.canExecute($cell.row)"
+ (change)="$view.selection.toggleRow.execute($cell.row)"
+ tabindex="-1" />
+ </ng-container>
 </ng-template>

projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select.tpl.html

@@ -1,11 +1,12 @@
 <ng-template key="body-cell-select.tpl.html"
  let-$cell
  let-$view="$view">
- <input type="checkbox"
- [checked]="$view.selection.state($cell.row)"
- [q-grid-dirty]="$view.selection.stateCheck | async"
- [disabled]="!$view.selection.toggleRow.canExecute($cell.row)"
- (change)="$view.selection.toggleRow.execute($cell.row)"
- tabindex="-1"
- class="q-grid-checkbox" />
+ <ng-container [q-grid-dirty]="$view.selection.stateCheck | async">
+ <input type="checkbox"
+ [checked]="$view.selection.state($cell.row)"
+ [disabled]="!$view.selection.toggleRow.canExecute($cell.row)"
+ (change)="$view.selection.toggleRow.execute($cell.row)"
+ tabindex="-1"
+ class="q-grid-checkbox" />
+ </ng-container>
 </ng-template>

projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-pager.tpl.html

@@ -40,13 +40,15 @@
 
  <button tabindex="-1"
  class="q-grid-icon-button q-grid-pager-prev"
- [q-grid-command]="$pager.prev">
+ [q-grid-command]="$pager.prev"
+ [q-grid-command-use-shortcut]="true">
  <i class="q-grid-icon">&#10094;</i>
  </button>
  <q-grid-pager-target></q-grid-pager-target>
  <button tabindex="-1"
  class="q-grid-icon-button q-grid-pager-next"
- [q-grid-command]="$pager.next">
+ [q-grid-command]="$pager.next"
+ [q-grid-command-use-shortcut]="true">
  <i class="q-grid-icon">&#10095;</i>
  </button>
  </div>

projects/ng2-qgrid-theme-basic/src/lib/theme.component.scss

@@ -250,10 +250,6 @@ $hidden-color: transparent;
  height: 30px;
  }
 
- td.q-grid-sorted {
- background-color: $cell-select-background-color;
- }
-
  th {
  font-size: 12px !important;
  color: $head-primary-color !important;

projects/ng2-qgrid-theme-basic/src/lib/theme.module.ts

@@ -44,7 +44,6 @@ import {
  TabTrapModule,
  TemplateModule,
  ThemeService,
- TitleModule,
  ValidationModule,
  VisibilityModule,
 } from 'ng2-qgrid';
@@ -101,7 +100,6 @@ import {
  RestModule,
  StatusBarModule,
  TabTrapModule,
- TitleModule,
  ValidationModule,
  VisibilityModule,
  ],

projects/ng2-qgrid-theme-basic/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
- "extends": "../../tsconfig.prod.json",
+ "extends": "../../tsconfig.lib.json",
  "compilerOptions": {
  "outDir": "../../out-tsc/lib",
  "target": "es2015",

projects/ng2-qgrid-theme-material/package.json

@@ -1,11 +1,10 @@
 {
  "name": "ng2-qgrid/theme/material",
- "version": "9.1.0",
+ "version": "9.1.3",
  "peerDependencies": {
  "@angular/common": "^9.1.0",
  "@angular/core": "^9.1.0",
- "tslib": "^1.10.0",
- "ng2-qgrid": "9.1.0",
+ "ng2-qgrid": "9.1.3",
  "@angular/cdk": "^9.2.0",
  "@angular/material": "^9.2.0"
  }

projects/ng2-qgrid-theme-material/src/lib/assets/title.scss → projects/ng2-qgrid-theme-material/src/lib/assets/caption.scss

@@ -1,4 +1,3 @@
-.q-grid-title,
 .q-grid-caption {
  h3 {
  margin: 0;

projects/ng2-qgrid-theme-material/src/lib/assets/cell.reference.scss

@@ -6,7 +6,6 @@
  @include simpleSquareElement(100%);
  height: 325px;
 
- .q-grid-title,
  .q-grid-caption {
  h2 {
  margin-bottom: 8px;

projects/ng2-qgrid-theme-material/src/lib/assets/cell.row.details.scss

@@ -1,3 +1,4 @@
 td.q-grid-row-details {
- background: $white;
+ background: $white;
+ @include user-select(auto);
 }

projects/ng2-qgrid-theme-material/src/lib/assets/column.sort.scss

@@ -1,7 +1,3 @@
-td.q-grid-sorted {
- background-color: $selected;
-}
-
 th {
 
  .q-grid-desc,