diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d0e99043..8fd5ac7e5 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index ae6a717f3..274833276 100644 --- a/README.md +++ b/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 diff --git a/build.lib.js b/build.lib.js index 99e2a4795..097644215 100644 --- a/build.lib.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index 64d8bb6a2..26c5bac17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng2-qgrid", - "version": "9.1.0", + "version": "9.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4809,6 +4809,12 @@ } } }, + "classlist.js": { + "version": "1.1.20150312", + "resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz", + "integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=", + "dev": true + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/package.json b/package.json index d02b78464..ef5961f63 100644 --- a/package.json +++ b/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", diff --git a/projects/assets/cell.scss b/projects/assets/cell.scss index 78a29a38c..ae3f0506c 100644 --- a/projects/assets/cell.scss +++ b/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; + } + } + } } \ No newline at end of file diff --git a/projects/assets/highlight.scss b/projects/assets/highlight.scss index 08638f1d5..6aed2e568 100644 --- a/projects/assets/highlight.scss +++ b/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; } } } diff --git a/projects/assets/selection.scss b/projects/assets/selection.scss index 5a999aa34..bbde9f8a3 100644 --- a/projects/assets/selection.scss +++ b/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; } diff --git a/projects/ng2-qgrid-theme-basic/package.json b/projects/ng2-qgrid-theme-basic/package.json index d40a8ecd6..9066ae8ac 100644 --- a/projects/ng2-qgrid-theme-basic/package.json +++ b/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" } } \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select-radio.tpl.html b/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select-radio.tpl.html index 43c5a7e31..80691ac06 100644 --- a/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select-radio.tpl.html +++ b/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select-radio.tpl.html @@ -1,10 +1,11 @@ - + + + \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select.tpl.html b/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select.tpl.html index 0d064b3ec..3f646e68e 100644 --- a/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select.tpl.html +++ b/projects/ng2-qgrid-theme-basic/src/lib/templates/body-cell-select.tpl.html @@ -1,11 +1,12 @@ - + + + \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-pager.tpl.html b/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-pager.tpl.html index 1ac1a6a0c..6fac29288 100644 --- a/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-pager.tpl.html +++ b/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-pager.tpl.html @@ -40,13 +40,15 @@ diff --git a/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-title.tpl.html b/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-title.tpl.html deleted file mode 100644 index aab7f0942..000000000 --- a/projects/ng2-qgrid-theme-basic/src/lib/templates/plugin-title.tpl.html +++ /dev/null @@ -1,7 +0,0 @@ - -
-

- {{$title.value}} -

-
- \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-basic/src/lib/theme.component.scss b/projects/ng2-qgrid-theme-basic/src/lib/theme.component.scss index 39406244a..3c729a4a1 100644 --- a/projects/ng2-qgrid-theme-basic/src/lib/theme.component.scss +++ b/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; diff --git a/projects/ng2-qgrid-theme-basic/src/lib/theme.module.ts b/projects/ng2-qgrid-theme-basic/src/lib/theme.module.ts index f6b77cb28..8674dc511 100644 --- a/projects/ng2-qgrid-theme-basic/src/lib/theme.module.ts +++ b/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, ], diff --git a/projects/ng2-qgrid-theme-basic/tsconfig.lib.json b/projects/ng2-qgrid-theme-basic/tsconfig.lib.json index 819125c51..e3a577132 100644 --- a/projects/ng2-qgrid-theme-basic/tsconfig.lib.json +++ b/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", diff --git a/projects/ng2-qgrid-theme-material/package.json b/projects/ng2-qgrid-theme-material/package.json index 9a8c6c89e..e8fbca8f3 100644 --- a/projects/ng2-qgrid-theme-material/package.json +++ b/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" } diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/title.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/caption.scss similarity index 85% rename from projects/ng2-qgrid-theme-material/src/lib/assets/title.scss rename to projects/ng2-qgrid-theme-material/src/lib/assets/caption.scss index ba8c25d0d..e08de31fb 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/title.scss +++ b/projects/ng2-qgrid-theme-material/src/lib/assets/caption.scss @@ -1,4 +1,3 @@ -.q-grid-title, .q-grid-caption { h3 { margin: 0; diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/cell.reference.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/cell.reference.scss index 0919fbff6..bda0a8b5b 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/cell.reference.scss +++ b/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; diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/cell.row.details.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/cell.row.details.scss index ca6010bf9..b5a2c8bc2 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/cell.row.details.scss +++ b/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); } \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/column.sort.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/column.sort.scss index db56099ed..5aec1d5fd 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/column.sort.scss +++ b/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, diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/compact.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/compact.scss new file mode 100644 index 000000000..30ee76150 --- /dev/null +++ b/projects/ng2-qgrid-theme-material/src/lib/assets/compact.scss @@ -0,0 +1,136 @@ +$color-head: #006f8f; +$color-black-87: rgba(0, 0, 0, 0.87); + +.q-grid-embed, +.q-grid-lcc, +.q-grid-compact { + font-family: $font-family; + + .q-grid { + + &-caption { + h3 { + color: $color-head; + } + } + + &-sort { + margin-left: 0; + } + + &-text { + font-size: 13px; + } + + tbody, + tfoot, + thead { + tr { + height: 36px; + } + + td { + @include typography(14px, normal, normal, normal, $color-black-87); + padding: 0 20px; + + &.q-grid-text-area { + >span { + white-space: nowrap; + } + } + + &.q-grid-array { + li { + padding: 2px 8px; + } + } + + &.q-grid-edit { + &.q-grid-row-options { + button { + @include buttonSizes(24px); + } + } + } + + &.q-grid-image { + img { + max-height: 24px; + max-width: 24px; + } + } + + &.q-grid-row-number { + color: $color-head; + } + } + } + + + thead { + + th { + @include typography(12px !important, 14px, normal !important, normal, $color-lc-cyan-dark !important); + + &:hover label { + font-weight: normal !important; + } + + .q-grid-icon { + text-align: center; + line-height: 16px; + font-size: 14px; + } + + .q-grid-column-filter-trigger { + right: 4px; + + button { + margin: 0; + width: 20px; + } + } + + .q-grid-sort { + color: $color-head; + + &.q-grid-active { + label { + color: inherit; + } + } + + label { + cursor: pointer; + } + } + } + } + + &-legend { + &-list { + font-size: 16px !important; + text-align: left !important; + color: $black !important; + } + + &-item { + @include simpleSquareElement(8px !important); + margin-right: 18px !important; + margin-bottom: 2px !important; + } + } + + &-pager { + padding: 11px 0; + } + + &-legend-list { + margin-top: 15px; + } + + &-layer { + top: 50px; + } + } +} \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/dark.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/dark.scss index e033005bd..ca86f3f25 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/dark.scss +++ b/projects/ng2-qgrid-theme-material/src/lib/assets/dark.scss @@ -18,7 +18,6 @@ .q-grid-toolbar { - .q-grid-title, .q-grid-caption { h3 { color: $dark-text; diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/embed.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/embed.scss deleted file mode 100644 index b40e4bdeb..000000000 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/embed.scss +++ /dev/null @@ -1,134 +0,0 @@ -$color-head: #006f8f; -$color-black-87: rgba(0, 0, 0, 0.87); - -.q-grid-embed, -.q-grid-lcc, -.q-grid-compact { - font-family: $font-family; - - .q-grid { - .q-grid { - &-title { - h2 { - @include typography(24px, normal, normal, normal, $color-lc-cyan-dark); - text-align: left; - } - } - - &-caption { - h3 { - color: $color-head; - } - } - - &-sort { - margin-left: 0; - } - - &-text { - font-size: 13px; - } - - &-table { - tr { - height: 36px; - } - - th { - @include typography(12px !important, 14px, normal !important, normal, $color-lc-cyan-dark !important); - - &:hover label { - font-weight: normal !important; - } - - .q-grid-icon { - text-align: center; - line-height: 16px; - font-size: 14px; - } - - .q-grid-column-filter-trigger { - right: 4px; - - button { - margin: 0; - width: 20px; - } - } - - .q-grid-sort { - color: $color-head; - - &.q-grid-active { - label { - color: inherit; - } - } - - label { - cursor: pointer; - } - } - } - - td { - @include typography(14px, normal, normal, normal, $color-black-87); - padding: 0 20px; - - &.q-grid-text-area { - >span { - white-space: nowrap; - } - } - - &.q-grid-array { - li { - padding: 2px 8px; - } - } - - &.q-grid-edit { - &.q-grid-row-options { - button { - @include buttonSizes(24px); - } - } - } - - &.q-grid-image { - img { - max-height: 24px; - max-width: 24px; - } - } - } - } - - &-legend { - &-list { - font-size: 16px !important; - text-align: left !important; - color: $black !important; - } - - &-item { - @include simpleSquareElement(8px !important); - margin-right: 18px !important; - margin-bottom: 2px !important; - } - } - - &-pager { - padding: 11px 0; - } - - &-legend-list { - margin-top: 15px; - } - - &-layer { - top: 50px; - } - } - } -} \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/mat/excel.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/mat/excel.scss deleted file mode 100644 index 35e11a911..000000000 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/mat/excel.scss +++ /dev/null @@ -1,116 +0,0 @@ -.q-grid-view thead tr { - height: 24px; - background-color: $excel-greyscale-light; - border-spacing: 0; - border-collapse: collapse; - - th { - border-left: 1px solid $excel-greyscale-lightdark; - - label { - color: $black; - font-weight: normal; - } - - &.q-grid-highlighted { - background-color: $excel-greenscale-medium; - } - - &.q-grid-sorted { - background-color: $excel-greenscale-light; - } - - .q-grid-divider { - display: none; - } - - &.focused-row-header { - background-color: $excel-greyscale-lightdark; - border-bottom: 1px solid $excel-greenscale-dark; - - label { - color: $excel-greenscale-dark; - } - } - } -} - -.q-grid-table tbody { - border-collapse: collapse; - border-spacing: 0; - - tr:first-child td.q-grid-focus:first-child { - border-left-width: 1px; - border-top-width: 1px; - } - - tr td { - color: $black; - border: 1px solid $excel-greyscale-medium; - line-height: 21px; - padding: 0 4px 0 4px; - background-color: $white; - vertical-align: top; - overflow: hidden; - outline-width: 0; - border-collapse: collapse; - border-spacing: 0; - - &:not(.q-grid-row-number) { - cursor: cell; - } - - &.q-grid-array ul { - display: inline-block; - vertical-align: middle; - } - - &.q-grid-array ul li { - display: block; - min-width: 0; - text-align: left; - padding: 0; - vertical-align: middle; - background-color: transparent; - border-radius: 0; - margin-right: 0; - - &::after { - content: ','; - white-space: pre; - } - - &:last-child::after { - content: ''; - } - } - - &.q-grid-focus { - background-color: $white !important; - border: 2px solid $excel-greenscale-dark; - } - - &.q-grid-focus.q-grid-edit input { - border: none; - } - - &.q-grid-selected { - background-color: $white !important; - } - - &.q-grid-row-number { - background-color: $excel-greyscale-light; - } - - &.q-grid-sorted { - background-color: $excel-greyscale-dark; - border-left: 2px solid $excel-greenscale-dark; - border-right: 2px solid $excel-greenscale-dark; - } - - &.focused-row-header { - background-color: $excel-greyscale-lightdark; - border-right: 2px solid $excel-greenscale-dark; - } - } -} \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/assets/variables.scss b/projects/ng2-qgrid-theme-material/src/lib/assets/variables.scss index b0ef86603..49c132094 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/assets/variables.scss +++ b/projects/ng2-qgrid-theme-material/src/lib/assets/variables.scss @@ -20,13 +20,3 @@ $dark-divider: rgba(255, 255, 255, 0.12); $markup-gray: #888; $markup-secondary-gray: #666; $markup-red: #a11; - -///Exel (for exel.scss) -$excel-greyscale-light: #eee; -$excel-greyscale-medium: #ccc; -$excel-greyscale-lightdark: #d2d2d2; -$excel-greyscale-dark: #c6c6c6; - -$excel-greenscale-light: #D3F0E0; -$excel-greenscale-medium: #9FD5B7; -$excel-greenscale-dark: #227447; \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-row-number.tpl.html b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-row-number.tpl.html index ab4896686..ca46e0fea 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-row-number.tpl.html +++ b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-row-number.tpl.html @@ -1,5 +1,4 @@ + let-$cell> {{$cell.rowIndex + 1}} \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select-radio.tpl.html b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select-radio.tpl.html index ee46bf05e..5ac169a12 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select-radio.tpl.html +++ b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select-radio.tpl.html @@ -1,12 +1,13 @@ - - + + + + \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select.tpl.html b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select.tpl.html index 55f475384..395cc2e3e 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select.tpl.html +++ b/projects/ng2-qgrid-theme-material/src/lib/templates/body-cell-select.tpl.html @@ -1,13 +1,14 @@ - - + let-$cell + let-$view="$view"> + + + + \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/templates/edit-cell-row-options.tpl.html b/projects/ng2-qgrid-theme-material/src/lib/templates/edit-cell-row-options.tpl.html index d0ea4b048..d64f4cdfc 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/templates/edit-cell-row-options.tpl.html +++ b/projects/ng2-qgrid-theme-material/src/lib/templates/edit-cell-row-options.tpl.html @@ -19,8 +19,11 @@ - + + + + diff --git a/projects/ng2-qgrid-theme-material/src/lib/templates/plugin-title.tpl.html b/projects/ng2-qgrid-theme-material/src/lib/templates/plugin-title.tpl.html deleted file mode 100644 index 66580e2ee..000000000 --- a/projects/ng2-qgrid-theme-material/src/lib/templates/plugin-title.tpl.html +++ /dev/null @@ -1,7 +0,0 @@ - -
-

- {{$title.value}} -

-
- \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/theme.component.scss b/projects/ng2-qgrid-theme-material/src/lib/theme.component.scss index 5cd7a9cf7..85ffc3d69 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/theme.component.scss +++ b/projects/ng2-qgrid-theme-material/src/lib/theme.component.scss @@ -25,7 +25,6 @@ @import "assets/cell"; @import "assets/column.filter"; @import "assets/column.sort"; - @import "assets/embed"; @import "assets/export"; @import "assets/head"; @import "assets/legend"; @@ -39,7 +38,7 @@ @import "assets/row"; @import "assets/status.bar"; @import "assets/table"; - @import "assets/title"; + @import "assets/caption"; @import "assets/validator"; @import "assets/view"; @import "assets/form.edit"; @@ -67,9 +66,5 @@ @import "assets/shortcut.scss"; } -.q-grid-excel .q-grid.q-grid-theme-material { - @import "assets/mat/excel"; -} - -@import "assets/embed"; +@import "assets/compact"; @import "assets/dark"; \ No newline at end of file diff --git a/projects/ng2-qgrid-theme-material/src/lib/theme.module.ts b/projects/ng2-qgrid-theme-material/src/lib/theme.module.ts index 817674f91..64ae4ee1a 100644 --- a/projects/ng2-qgrid-theme-material/src/lib/theme.module.ts +++ b/projects/ng2-qgrid-theme-material/src/lib/theme.module.ts @@ -65,7 +65,6 @@ import { TemplateModule, ThemeService, TimeModule, - TitleModule, ValidationModule, VisibilityModule, VscrollModule, @@ -132,7 +131,6 @@ import { StatusBarModule, TabTrapModule, TimeModule, - TitleModule, ValidationModule, VisibilityModule, diff --git a/projects/ng2-qgrid-theme-material/tsconfig.lib.json b/projects/ng2-qgrid-theme-material/tsconfig.lib.json index 819125c51..e3a577132 100644 --- a/projects/ng2-qgrid-theme-material/tsconfig.lib.json +++ b/projects/ng2-qgrid-theme-material/tsconfig.lib.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.prod.json", + "extends": "../../tsconfig.lib.json", "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", diff --git a/projects/ng2-qgrid/README.md b/projects/ng2-qgrid/README.md index 3f6d49aeb..274833276 100644 --- a/projects/ng2-qgrid/README.md +++ b/projects/ng2-qgrid/README.md @@ -1,24 +1,94 @@ -# Ng2Qgrid +# q-grid +Angular data grid -This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0. +## Documentation +https://qgrid.github.io -## Code scaffolding +## Examples +https://qgrid.github.io/ng2 -Run `ng generate component component-name --project ng2-qgrid` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng2-qgrid`. -> Note: Don't forget to add `--project ng2-qgrid` or else it will be added to the default project in your `angular.json` file. +## Install the q-grid via npm -## Build +```bash +npm install ng2-qgrid +``` -Run `ng build ng2-qgrid` to build the project. The build artifacts will be stored in the `dist/` directory. +## Add q-grid and theme modules to application root -## Publishing +```typescript +import { GridModule } from 'ng2-qgrid'; +import { ThemeModule } from 'ng2-qgrid/theme/material'; -After building your library with `ng build ng2-qgrid`, go to the dist folder `cd dist/ng2-qgrid` and run `npm publish`. +@NgModule({ + imports: [ + GridModule, + ThemeModule + ] +}) +export class AppModule { +} +``` +Note that now q-grid supports 2 themes out of box `@angular/material` and `basic`, the second one doesn't require `@angular/material` to be installed. -## Running unit tests +## Create an angular component -Run `ng test ng2-qgrid` to execute the unit tests via [Karma](https://karma-runner.github.io). +```typescript +@Component({ + selector: 'my-component', + template: ` + + + + + ` +}) +export class MyComponent { + rows$ = this.dataService.getRows(); +} +``` -## Further help +Note that q-grid rows should be an array of objects, any other types like array of numbers or strings will throw an error. -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +## Dependencies + +* @angular/common +* @angular/core +* @angular/forms + +If `material` theme is used, it's also required to install [angular material](https://material.angular.io/) + +* @angular/cdk +* @angular/material + +## Development + +```bash +git clone https://github.com/qgrid/ng2.git +npm install +npm run start +``` + +## Build Library +```bash +git clone https://github.com/qgrid/ng2.git +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` latest is supported. +* `FireFox` latest is supported. +* `Safari` latest is supported. +* `Edge` latest is supported. + +## Licence + +Code licensed under MIT license. \ No newline at end of file diff --git a/projects/ng2-qgrid/package.json b/projects/ng2-qgrid/package.json index 30c816ee6..ff55d47ef 100644 --- a/projects/ng2-qgrid/package.json +++ b/projects/ng2-qgrid/package.json @@ -1,6 +1,6 @@ { "name": "ng2-qgrid", - "version": "9.1.0", + "version": "9.1.3", "bundledDependencies": [ "@qgrid/core", "@qgrid/plugins", @@ -14,7 +14,6 @@ "peerDependencies": { "@angular/common": "^9.1.0", "@angular/core": "^9.1.0", - "@angular/forms": "^9.1.0", - "tslib": "^1.10.0" + "@angular/forms": "^9.1.0" } } \ No newline at end of file diff --git a/projects/ng2-qgrid/package.prod.json b/projects/ng2-qgrid/package.prod.json index b6856bbce..aab809a00 100644 --- a/projects/ng2-qgrid/package.prod.json +++ b/projects/ng2-qgrid/package.prod.json @@ -1,21 +1,10 @@ { "name": "ng2-qgrid", - "version": "9.1.0", - "bundledDependencies": [ - "@qgrid/core", - "@qgrid/plugins", - "@qgrid/ngx", - "@qgrid/ngx-plugins", - "css.escape", - "fastdom", - "livr", - "lodash-es" - ], + "version": "9.1.3", "peerDependencies": { "@angular/common": "^9.1.0", "@angular/core": "^9.1.0", - "@angular/forms": "^9.1.0", - "tslib": "^1.10.0" + "@angular/forms": "^9.1.0" }, "main": "bundles/ng2-qgrid.umd.js", "typings": "ng2-qgrid.d.ts", diff --git a/projects/ng2-qgrid/src/lib/ng2-qgrid.module.ts b/projects/ng2-qgrid/src/lib/ng2-qgrid.module.ts index bab059355..e528e0abc 100644 --- a/projects/ng2-qgrid/src/lib/ng2-qgrid.module.ts +++ b/projects/ng2-qgrid/src/lib/ng2-qgrid.module.ts @@ -12,11 +12,13 @@ import { ToolbarModule, VscrollModule, LayerModule, + ChangeDetectorModule, } from '@qgrid/ngx'; import { ActionBarModule, ActionModule, + AltModule, AutoCompleteEditorModule, BackdropModule, BoolEditorModule, @@ -48,7 +50,6 @@ import { RestModule, StatusBarModule, TabTrapModule, - TitleModule, ValidationModule, VisibilityModule, } from '@qgrid/ngx-plugins'; @@ -67,6 +68,7 @@ import { TemplateModule, ActionBarModule, + AltModule, ActionModule, AutoCompleteEditorModule, BackdropModule, @@ -77,6 +79,7 @@ import { ColumnFilterModule, ColumnSortModule, CommandModule, + ChangeDetectorModule, DataManipulationModule, EbModule, EditFormModule, @@ -100,7 +103,6 @@ import { RestModule, StatusBarModule, TabTrapModule, - TitleModule, ValidationModule, VisibilityModule, ], diff --git a/projects/ng2-qgrid/src/public-api.ts b/projects/ng2-qgrid/src/public-api.ts index a3a727d01..7a8e443b7 100644 --- a/projects/ng2-qgrid/src/public-api.ts +++ b/projects/ng2-qgrid/src/public-api.ts @@ -33,7 +33,8 @@ export { DropDirective, FootCoreComponent, FootModule, - Grid, GridService, + Grid, + GridService, GridComponent, GridError, GridLet, @@ -103,6 +104,8 @@ export { ActionCoreComponent, ActionListComponent, ActionModule, + AltComponent, + AltModule, ArrayPipe, AutoCompleteEditorComponent, AutoCompleteEditorModule, @@ -204,8 +207,6 @@ export { TimeDirective, TimeModule, TimePipe, - TitleComponent, - TitleModule, ValidationComponent, ValidationModule, ValidatorComponent, diff --git a/projects/ng2-qgrid/tsconfig.lib.json b/projects/ng2-qgrid/tsconfig.lib.json index 6e613b46a..96437cad7 100644 --- a/projects/ng2-qgrid/tsconfig.lib.json +++ b/projects/ng2-qgrid/tsconfig.lib.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.prod.json", + "extends": "../../tsconfig.lib.json", "compilerOptions": { "allowJs": true, "outDir": "../../out-tsc/lib", diff --git a/projects/ngx-qgrid-plugins/package.json b/projects/ngx-qgrid-plugins/package.json index fe2c87645..ed8fd7932 100644 --- a/projects/ngx-qgrid-plugins/package.json +++ b/projects/ngx-qgrid-plugins/package.json @@ -1,11 +1,10 @@ { "name": "@qgrid/ngx-plugins", - "version": "9.1.0", + "version": "9.1.3", "peerDependencies": { "@angular/common": "^9.1.0", - "@angular/core": "^9.1.0", - "tslib": "^1.10.0", - "@qgrid/ngx": "9.1.0" + "@angular/core": "^9.1.0" + "@qgrid/ngx": "9.1.3" }, "author": "qgrid.team@gmail.com" } \ No newline at end of file diff --git a/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.html b/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.html new file mode 100644 index 000000000..231e8eb54 --- /dev/null +++ b/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.html @@ -0,0 +1,4 @@ + + {{$cell.rowIndex}} + \ No newline at end of file diff --git a/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.ts b/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.ts new file mode 100644 index 000000000..bcc631d20 --- /dev/null +++ b/projects/ngx-qgrid-plugins/src/lib/alt/alt.component.ts @@ -0,0 +1,73 @@ +import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { GridPlugin } from '@qgrid/ngx'; +import { ColumnModel } from '@qgrid/core/column-type/column.model'; + +@Component({ + selector: 'q-grid-alt', + templateUrl: './alt.component.html', + providers: [GridPlugin], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AltComponent implements OnInit { + constructor( + private plugin: GridPlugin, + ) { + } + + ngOnInit() { + const { model, observe, service } = this.plugin; + + const altColumn: ColumnModel = { + key: '$alt.number', + type: 'row-number', + title: 'Alt', + canHighlight: false, + canMove: false, + canResize: false, + }; + + model + .pagination({ + size: 10, + }, { + source: 'alt.component' + }) + .data({ + columns: + [altColumn] + .concat(model.data().columns) + }, { + source: 'alt.component' + }); + + observe(model.keyboardChanged) + .subscribe(e => { + const { codes, status } = e.state; + if (status === 'down') { + switch (codes[0]) { + case 'alt': { + const rowNo = Number.parseInt(codes[1], 10); + if (!Number.isNaN(rowNo)) { + const { rows } = model.view(); + const { current, size } = model.pagination(); + + const rowIndex = rowNo + current * size; + const altRow = rows[rowIndex]; + if (altRow) { + model.selection({ + items: [altRow] + }, { + source: 'alt.component' + }); + + service.focus(rowIndex); + } + } + break; + } + } + } + }); + + } +} diff --git a/projects/ngx-qgrid-plugins/src/lib/alt/alt.module.ts b/projects/ngx-qgrid-plugins/src/lib/alt/alt.module.ts new file mode 100644 index 000000000..1fd858628 --- /dev/null +++ b/projects/ngx-qgrid-plugins/src/lib/alt/alt.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { TemplateModule } from '@qgrid/ngx'; +import { AltComponent } from './alt.component'; + +@NgModule({ + declarations: [AltComponent], + exports: [AltComponent], + imports: [TemplateModule] +}) +export class AltModule {} diff --git a/projects/ngx-qgrid-plugins/src/lib/command/command.directive.ts b/projects/ngx-qgrid-plugins/src/lib/command/command.directive.ts index a00b61187..1c4e0668c 100644 --- a/projects/ngx-qgrid-plugins/src/lib/command/command.directive.ts +++ b/projects/ngx-qgrid-plugins/src/lib/command/command.directive.ts @@ -10,30 +10,31 @@ import { Output, Optional, AfterViewInit, - NgZone, - ApplicationRef + NgZone } from '@angular/core'; import { Disposable, GridPlugin } from '@qgrid/ngx'; import { Command } from '@qgrid/core/command/command'; import { CommandManager } from '@qgrid/core/command/command.manager'; import { Shortcut } from '@qgrid/core/shortcut/shortcut'; import { ShortcutDispatcher } from '@qgrid/core/shortcut/shortcut.dispatcher'; -import { CompositeCommandManager } from '@qgrid/core/command/composite.command.manager'; -export class ZoneCommandManager extends CompositeCommandManager { +export class ZoneCommandManager { constructor( private run: (f: () => T) => T, - manager: CommandManager, + private manager: CommandManager, private commandArg: any ) { - super(manager); } invoke(commands: Command[]) { return this.run(() => - super.invoke(commands, this.commandArg, 'command.directive') + this.manager.invoke(commands, this.commandArg, 'command.directive') ); } + + filter(commands) { + return this.manager.filter(commands); + } } @Directive({ @@ -61,17 +62,19 @@ export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewIn @Output('q-grid-command-execute') commandExecute = new EventEmitter(); + @Input('q-grid-command-host') + host: 'grid' | 'document' = 'grid'; + constructor( private disposable: Disposable, - private host: ElementRef, + private elementRef: ElementRef, private zone: NgZone, - private app: ApplicationRef, @Optional() private plugin: GridPlugin ) { } ngOnInit() { - const { nativeElement } = this.host; + const { nativeElement } = this.elementRef; this.aroundZone(() => nativeElement @@ -117,7 +120,7 @@ export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewIn ); if (this.useCommandShortcut && command.shortcut) { - if (this.plugin) { + if (this.plugin && this.host === 'grid') { const { model } = this.plugin; const { shortcut, manager } = model.action(); @@ -181,7 +184,7 @@ export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewIn } private updateState() { - const nativeElement = this.host.nativeElement as HTMLElement; + const nativeElement = this.elementRef.nativeElement as HTMLElement; if (!nativeElement.setAttribute) { return; } diff --git a/projects/ngx-qgrid-plugins/src/lib/edit-form/edit-form.component.ts b/projects/ngx-qgrid-plugins/src/lib/edit-form/edit-form.component.ts index ba832aa9d..4f46efb03 100644 --- a/projects/ngx-qgrid-plugins/src/lib/edit-form/edit-form.component.ts +++ b/projects/ngx-qgrid-plugins/src/lib/edit-form/edit-form.component.ts @@ -22,7 +22,6 @@ export class EditFormComponent implements OnInit { constructor( private plugin: GridPlugin, - private qgrid: Grid, ) { } @@ -33,14 +32,14 @@ export class EditFormComponent implements OnInit { }; const editFormPanel = new EditFormPanelPlugin(this.plugin, context); - const gridService = this.qgrid.service(this.plugin.model); + const { service } = this.plugin; editFormPanel.cancelEvent.on(() => this.cancel.emit()); editFormPanel.resetEvent.on(() => this.reset.emit()); editFormPanel.submitEvent.on(() => { this.submit.emit(); - gridService.invalidate({ + service.invalidate({ source: 'edit-form.component', why: 'refresh' }); diff --git a/projects/ngx-qgrid-plugins/src/lib/pagination/pager-target.component.ts b/projects/ngx-qgrid-plugins/src/lib/pagination/pager-target.component.ts index 92f80c3da..cd5643e9d 100644 --- a/projects/ngx-qgrid-plugins/src/lib/pagination/pager-target.component.ts +++ b/projects/ngx-qgrid-plugins/src/lib/pagination/pager-target.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Shortcut } from '@qgrid/core/shortcut/shortcut'; import { GridPlugin } from '@qgrid/ngx'; +import { FocusAfterRender } from '../focus/focus.service'; @Component({ selector: 'q-grid-pager-target', @@ -33,7 +34,16 @@ export class PagerTargetComponent implements OnInit { switch (code) { case 'enter': { if (value) { - this.plugin.model.pagination({ current: value - 1 }, { source: 'pager-target.component' }); + const current = value - 1; + if (this.plugin.model.pagination().current !== current) { + // tslint:disable-next-line:no-unused-expression + // new FocusAfterRender(this.plugin); + this.plugin.model.pagination({ + current + }, { + source: 'pager-target.component' + }); + } } break; } @@ -74,10 +84,7 @@ export class PagerTargetComponent implements OnInit { } get total() { - const pagination = this.plugin.model.pagination(); - const count = pagination.count; - const size = pagination.size; - + const { count, size } = this.plugin.model.pagination(); return size === 0 ? 0 : Math.max(1, Math.ceil(count / size)); } } diff --git a/projects/ngx-qgrid-plugins/src/lib/pane/pane.component.ts b/projects/ngx-qgrid-plugins/src/lib/pane/pane.component.ts index c95b8f76e..d04b323c9 100644 --- a/projects/ngx-qgrid-plugins/src/lib/pane/pane.component.ts +++ b/projects/ngx-qgrid-plugins/src/lib/pane/pane.component.ts @@ -53,9 +53,10 @@ export class PaneComponent implements OnInit { } this.context = { $implicit: this, value }; - this.cd.markForCheck(); - table.view.addLayer(`pane-${side}`); + + this.cd.markForCheck(); + this.cd.detectChanges(); } close(side: 'right') { @@ -64,7 +65,9 @@ export class PaneComponent implements OnInit { table.view.removeLayer(`pane-${side}`); this.context = null; + this.cd.markForCheck(); + this.cd.detectChanges(); } private parse() { diff --git a/projects/ngx-qgrid-plugins/src/lib/title/title.component.html b/projects/ngx-qgrid-plugins/src/lib/title/title.component.html deleted file mode 100644 index af4eb871a..000000000 --- a/projects/ngx-qgrid-plugins/src/lib/title/title.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/projects/ngx-qgrid-plugins/src/lib/title/title.component.ts b/projects/ngx-qgrid-plugins/src/lib/title/title.component.ts deleted file mode 100644 index e3a1092d4..000000000 --- a/projects/ngx-qgrid-plugins/src/lib/title/title.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, ChangeDetectionStrategy, OnInit, ChangeDetectorRef } from '@angular/core'; -import { GridPlugin } from '@qgrid/ngx'; - -// @deprecated -@Component({ - selector: 'q-grid-title', - templateUrl: './title.component.html', - providers: [GridPlugin], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class TitleComponent implements OnInit { - context: { $implicit: TitleComponent } = { - $implicit: this - }; - - constructor( - private plugin: GridPlugin, - private cd: ChangeDetectorRef - ) { - } - - ngOnInit() { - const { model, observe } = this.plugin; - observe(model.gridChanged) - .subscribe(() => this.cd.detectChanges()); - } - - get value() { - return this.plugin.model.grid().title; - } -} diff --git a/projects/ngx-qgrid-plugins/src/lib/title/title.module.ts b/projects/ngx-qgrid-plugins/src/lib/title/title.module.ts deleted file mode 100644 index 7ba5d422c..000000000 --- a/projects/ngx-qgrid-plugins/src/lib/title/title.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { TitleComponent } from './title.component'; -import { TemplateModule } from '@qgrid/ngx'; - -@NgModule({ - declarations: [TitleComponent], - exports: [TitleComponent], - imports: [TemplateModule] -}) -export class TitleModule {} diff --git a/projects/ngx-qgrid-plugins/src/public-api.ts b/projects/ngx-qgrid-plugins/src/public-api.ts index 055120a5a..53e37b76f 100644 --- a/projects/ngx-qgrid-plugins/src/public-api.ts +++ b/projects/ngx-qgrid-plugins/src/public-api.ts @@ -5,6 +5,8 @@ export { ActionCoreComponent } from './lib/action/action-core.component'; export { ActionListComponent } from './lib/action-bar/action-list.component'; export { ActionModule } from './lib/action/action.module'; export { ArrayPipe } from './lib/pipes/array.pipe'; +export { AltComponent } from './lib/alt/alt.component'; +export { AltModule } from './lib/alt/alt.module'; export { AutoCompleteEditorComponent } from './lib/autocomplete-editor/autocomplete-editor.component'; export { AutoCompleteEditorModule } from './lib/autocomplete-editor/autocomplete-editor.module'; export { AutoFocusDirective } from './lib/focus/autofocus.directive'; @@ -105,8 +107,6 @@ export { TextPipe } from './lib/pipes/text.pipe'; export { TimeDirective } from './lib/time/time.directive'; export { TimeModule } from './lib/time/time.module'; export { TimePipe } from './lib/pipes/time.pipe'; -export { TitleComponent } from './lib/title/title.component'; -export { TitleModule } from './lib/title/title.module'; export { ValidationComponent } from './lib/validation/validation.component'; export { ValidationModule } from './lib/validation/validation.module'; export { ValidatorComponent } from './lib/validation/validator.component'; diff --git a/projects/ngx-qgrid-plugins/tsconfig.lib.json b/projects/ngx-qgrid-plugins/tsconfig.lib.json index 02f5fc05b..0db553993 100644 --- a/projects/ngx-qgrid-plugins/tsconfig.lib.json +++ b/projects/ngx-qgrid-plugins/tsconfig.lib.json @@ -1,8 +1,9 @@ { - "extends": "../../tsconfig.prod.json", + "extends": "../../tsconfig.lib.json", "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", + "allowJs": true, "declaration": true, "inlineSources": true, "types": [], diff --git a/projects/ngx-qgrid/package.json b/projects/ngx-qgrid/package.json index 30212a683..43b418da7 100644 --- a/projects/ngx-qgrid/package.json +++ b/projects/ngx-qgrid/package.json @@ -1,11 +1,10 @@ { "name": "@qgrid/ngx", - "version": "9.1.0", + "version": "9.1.3", "peerDependencies": { "@angular/common": "^9.1.0", "@angular/core": "^9.1.0", - "tslib": "^1.10.0", - "@qgrid/core": "9.1.0" + "@qgrid/core": "9.1.3" }, "author": "qgrid.team@gmail.com" } \ No newline at end of file diff --git a/projects/ngx-qgrid/src/lib/cell-handler/cell-handler.component.ts b/projects/ngx-qgrid/src/lib/cell-handler/cell-handler.component.ts index 7b4c18c42..728d4e79d 100644 --- a/projects/ngx-qgrid/src/lib/cell-handler/cell-handler.component.ts +++ b/projects/ngx-qgrid/src/lib/cell-handler/cell-handler.component.ts @@ -109,16 +109,18 @@ export class CellHandlerComponent implements OnInit, AfterViewInit { const target = domCell.element; const scrollState = model.scroll(); - const top = (target.offsetTop - scrollState.top) + 'px'; - const left = (target.offsetLeft - (cell.column.pin === 'mid' ? scrollState.left : 0)) + 'px'; - const width = target.offsetWidth + 'px'; - const height = target.offsetHeight + 'px'; + const headHeight = table.view.height('head-mid'); + + const top = Math.max(headHeight, (target.offsetTop - scrollState.top)); + const left = (target.offsetLeft - (cell.column.pin === 'mid' ? scrollState.left : 0)); + const width = target.offsetWidth; + const height = target.offsetHeight; Fastdom.mutate(() => { - element.style.top = top; - element.style.left = left; - element.style.width = width; - element.style.height = height; + element.style.top = top + 'px'; + element.style.left = left + 'px'; + element.style.width = width + 'px'; + element.style.height = height + 'px'; }); }); diff --git a/projects/ngx-qgrid/src/lib/change-detector/dirty.directive.ts b/projects/ngx-qgrid/src/lib/change-detector/dirty.directive.ts index 053ca67a9..9f59b23ff 100644 --- a/projects/ngx-qgrid/src/lib/change-detector/dirty.directive.ts +++ b/projects/ngx-qgrid/src/lib/change-detector/dirty.directive.ts @@ -12,7 +12,6 @@ export class DirtyDirective implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.trigger) { if (!changes.trigger.firstChange) { - this.cd.markForCheck(); this.cd.detectChanges(); } } diff --git a/projects/ngx-qgrid/src/lib/column-list/column-list.component.ts b/projects/ngx-qgrid/src/lib/column-list/column-list.component.ts index 1609fb660..43ee6d870 100644 --- a/projects/ngx-qgrid/src/lib/column-list/column-list.component.ts +++ b/projects/ngx-qgrid/src/lib/column-list/column-list.component.ts @@ -1,6 +1,6 @@ import { Component, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { ColumnListService } from './column-list.service'; -import { ColumnListState, ColumnListStateGeneration } from '@qgrid/core/column-list/column.list.state'; +import { ColumnListState, ColumnListStateGeneration, ColumnListStateTypeDetection } from '@qgrid/core/column-list/column.list.state'; import { GridPlugin } from '../plugin/grid-plugin'; import { StateAccessor } from '../state/state-accessor'; @@ -13,7 +13,8 @@ import { StateAccessor } from '../state/state-accessor'; export class ColumnListComponent implements OnChanges { private columnListAccessor = this.stateAccessor.setter(ColumnListState); - @Input('generation') set columnListGeneration(generation: ColumnListStateGeneration) { this.columnListAccessor({ generation }); } + @Input() set generation(generation: ColumnListStateGeneration) { this.columnListAccessor({ generation }); } + @Input() set typeDetection(typeDetection: ColumnListStateTypeDetection) { this.columnListAccessor({ typeDetection }); } constructor( private plugin: GridPlugin, diff --git a/projects/ngx-qgrid/src/lib/grid/grid-let.ts b/projects/ngx-qgrid/src/lib/grid/grid-let.ts index e059b64dc..505cbae51 100644 --- a/projects/ngx-qgrid/src/lib/grid/grid-let.ts +++ b/projects/ngx-qgrid/src/lib/grid/grid-let.ts @@ -48,10 +48,6 @@ export class GridLet { ) { } init(plugin: GridPlugin, commandManager: CommandManager) { - const { model } = plugin; - - const gridService = this.qgrid.service(model); - const selectors = { th: 'q-grid-core-th', tr: 'q-grid-core-tr' @@ -60,7 +56,6 @@ export class GridLet { const injectLetServicesTo = viewFactory( plugin, commandManager, - gridService, this.scrollService, selectors, ); diff --git a/projects/ngx-qgrid/src/lib/grid/grid.component.ts b/projects/ngx-qgrid/src/lib/grid/grid.component.ts index 16b4c1124..e53eac730 100644 --- a/projects/ngx-qgrid/src/lib/grid/grid.component.ts +++ b/projects/ngx-qgrid/src/lib/grid/grid.component.ts @@ -12,7 +12,6 @@ import { ChangeDetectionStrategy } from '@angular/core'; import { DOCUMENT } from '@angular/common'; -import { GridError } from '@qgrid/core/infrastructure/error'; import { ColumnModel } from '@qgrid/core/column-type/column.model'; import { Command } from '@qgrid/core/command/command'; import { DataState } from '@qgrid/core/data/data.state'; @@ -22,6 +21,7 @@ import { EventManager } from '@qgrid/core/event/event.manager'; import { eventPath } from '@qgrid/core/services/dom'; import { FilterState, FilterStateUnit } from '@qgrid/core/filter/filter.state'; import { Grid } from './grid'; +import { GridError } from '@qgrid/core/infrastructure/error'; import { GridHost } from '@qgrid/core/grid/grid.host'; import { GridLet } from './grid-let'; import { GridModel } from './grid-model'; @@ -31,7 +31,6 @@ import { GridRoot } from './grid-root'; import { GridState, GridStateInteractionMode } from '@qgrid/core/grid/grid.state'; import { GroupState, GroupStateMode, GroupStateSummary } from '@qgrid/core/group/group.state'; import { LayerService } from '../layer/layer.service'; -import { noop } from '@qgrid/core/utility/kit'; import { PivotState } from '@qgrid/core/pivot/pivot.state'; import { ScrollState, ScrollStateMode } from '@qgrid/core/scroll/scroll.state'; import { SelectionState, SelectionStateMode, SelectionStateUnit, SelectionStateArea } from '@qgrid/core/selection/selection.state'; @@ -162,7 +161,10 @@ export class GridComponent implements OnInit, OnChanges { }); } - const host = new GridHost(nativeElement, this.plugin); + const host = new GridHost( + nativeElement, + this.plugin, + ); const listener = new EventListener(nativeElement, new EventManager(this)); const docListener = new EventListener(this.document, new EventManager(this)); @@ -190,7 +192,6 @@ export class GridComponent implements OnInit, OnChanges { disposable.add( listener.on('keyup', e => host.keyUp(e, 'grid')) ); - }); disposable.add( diff --git a/projects/ngx-qgrid/src/lib/plugin/grid-plugin.ts b/projects/ngx-qgrid/src/lib/plugin/grid-plugin.ts index 9db68ee01..ab5dc0812 100644 --- a/projects/ngx-qgrid/src/lib/plugin/grid-plugin.ts +++ b/projects/ngx-qgrid/src/lib/plugin/grid-plugin.ts @@ -7,9 +7,13 @@ import { GridLet as NgxGridLet } from '../grid/grid-let'; import { GridModel } from '../grid/grid-model'; import { GridRoot } from '../grid/grid-root'; import { ObservableLike, ObservableEvent, ObservableReplyEvent } from '@qgrid/core/rx/rx'; +import { Grid, GridService } from '../grid/grid'; +import { Lazy } from '@qgrid/core/infrastructure/lazy'; @Injectable() export class GridPlugin implements OnDestroy { + private serviceLazy = new Lazy(() => this.qgrid.service(this.$root.model)); + readonly disposable = new Disposable(); readonly observe = (event: Event): ObservableLike => { @@ -23,6 +27,7 @@ export class GridPlugin implements OnDestroy { constructor( private $view: NgxGridLet, private $root: GridRoot, + private qgrid: Grid ) { } @@ -40,6 +45,10 @@ export class GridPlugin implements OnDestroy { return table; } + get service(): GridService { + return this.serviceLazy.instance; + } + ngOnDestroy() { this.disposable.finalize(); } diff --git a/projects/ngx-qgrid/src/lib/row/row.component.ts b/projects/ngx-qgrid/src/lib/row/row.component.ts index 6c0240aa9..51c86b950 100644 --- a/projects/ngx-qgrid/src/lib/row/row.component.ts +++ b/projects/ngx-qgrid/src/lib/row/row.component.ts @@ -1,8 +1,12 @@ -import { Component, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, OnChanges, OnInit } from '@angular/core'; import { GridPlugin } from '../plugin/grid-plugin'; -import { RowState } from '@qgrid/core/row/row.state'; +import { RowState, RowStateUnit, RowStateMode } from '@qgrid/core/row/row.state'; import { StateAccessor } from '../state/state-accessor'; import { TemplateHostService } from '../template/template-host.service'; +import { Command } from '@qgrid/core/command/command'; +import { RowDetails } from '@qgrid/core/row-details/row.details'; + +// TODO: move it to plugins @Component({ selector: 'q-grid-row', @@ -14,14 +18,31 @@ import { TemplateHostService } from '../template/template-host.service'; ], changeDetection: ChangeDetectionStrategy.OnPush }) -export class RowComponent implements OnChanges { +export class RowComponent implements OnChanges, OnInit { private rowAccessor = this.stateAccessor.setter(RowState); - @Input('mode') set rowMode(mode: 'single' | 'multiple') { this.rowAccessor({ mode }); } - @Input('unit') set rowUnit(unit: 'data' | 'details') { this.rowAccessor({ unit }); } - @Input('canMove') set rowCanMove(canMove: boolean) { this.rowAccessor({ canMove }); } - @Input('canResize') set rowCanResize(canResize: boolean) { this.rowAccessor({ canResize }); } - @Input('height') set rowHeight(height) { this.rowAccessor({ height }); } + private toggleStatus = new Command({ + execute: (row) => { + const { view } = this.plugin; + return view.rowDetails.toggleStatus.execute(row); + }, + canExecute: (row) => { + if (row instanceof RowDetails) { + return false; + } + + const { view } = this.plugin; + return view.rowDetails.toggleStatus.canExecute(row); + } + }); + + @Input() set mode(mode: RowStateMode) { this.rowAccessor({ mode }); } + @Input() set unit(unit: RowStateUnit) { this.rowAccessor({ unit }); } + @Input() set canMove(canMove: boolean) { this.rowAccessor({ canMove }); } + @Input() set canResize(canResize: boolean) { this.rowAccessor({ canResize }); } + @Input() set height(height) { this.rowAccessor({ height }); } + + @Input() behavior = []; constructor( private plugin: GridPlugin, @@ -31,6 +52,47 @@ export class RowComponent implements OnChanges { templateHost.key = source => `body-cell-row-${source}.tpl.html`; } + ngOnInit() { + const { model, observe } = this.plugin; + + if (this.behavior.indexOf('expandOnShortcut') >= 0) { + observe(model.keyboardChanged) + .subscribe(e => { + const { codes, status } = e.state; + if (status === 'down') { + switch (codes[0]) { + // TODO: replace it from row state shortcut property. + case 'enter': + case 'space': { + const { cell } = model.navigation(); + if (cell) { + const { row, column } = cell; + if (column.type !== 'row-expand' && this.toggleStatus.canExecute(row)) { + this.toggleStatus.execute(row); + } + } + break; + } + } + } + }); + + if (this.behavior.indexOf('expandOnClick') >= 0) { + observe(model.mouseChanged) + .subscribe(e => { + const { code, status, target } = e.state; + if (code === 'left' && status === 'up') { + if (target && target.column.type !== 'row-expand') { + if (this.toggleStatus.canExecute(target.row)) { + this.toggleStatus.execute(target.row); + } + } + } + }); + } + } + } + ngOnChanges() { const { model } = this.plugin; this.stateAccessor.write(model); diff --git a/projects/ngx-qgrid/src/lib/template/template.directive.ts b/projects/ngx-qgrid/src/lib/template/template.directive.ts index ea06f6013..faa5c58f4 100644 --- a/projects/ngx-qgrid/src/lib/template/template.directive.ts +++ b/projects/ngx-qgrid/src/lib/template/template.directive.ts @@ -16,9 +16,9 @@ import { TemplateService } from './template.service'; export class TemplateDirective implements DoCheck, OnChanges { private viewRef: EmbeddedViewRef; - @Input() check = false; @Input() key = ''; @Input() context: any = null; + @Input() check = false; constructor( private templateService: TemplateService, diff --git a/projects/ngx-qgrid/src/lib/view/view-core.component.ts b/projects/ngx-qgrid/src/lib/view/view-core.component.ts index eae3a5f57..66b97d910 100644 --- a/projects/ngx-qgrid/src/lib/view/view-core.component.ts +++ b/projects/ngx-qgrid/src/lib/view/view-core.component.ts @@ -66,7 +66,15 @@ export class ViewCoreComponent implements OnInit, DoCheck { } ngOnInit() { - const { model, table, observeReply, observe, view, disposable } = this.plugin; + const { + model, + table, + observeReply, + observe, + view, + disposable, + service + } = this.plugin; // TODO: make it better table.box.markup.view = this.elementRef.nativeElement; @@ -80,8 +88,7 @@ export class ViewCoreComponent implements OnInit, DoCheck { this.cd.detectChanges(); }; - const gridService = this.qgrid.service(model); - this.host = new ViewHost(this.plugin, gridService); + this.host = new ViewHost(this.plugin); observeReply(model.sceneChanged) .subscribe(e => { @@ -113,7 +120,7 @@ export class ViewCoreComponent implements OnInit, DoCheck { .subscribe(e => { if (e.hasChanges('status')) { if (e.state.status === 'endBatch') { - gridService.invalidate({ + service.invalidate({ source: 'view-core.component', why: 'refresh' }); diff --git a/projects/ngx-qgrid/tsconfig.lib.json b/projects/ngx-qgrid/tsconfig.lib.json index 3c6ab984c..a6c99555e 100644 --- a/projects/ngx-qgrid/tsconfig.lib.json +++ b/projects/ngx-qgrid/tsconfig.lib.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.prod.json", + "extends": "../../tsconfig.lib.json", "compilerOptions": { "allowJs": true, "outDir": "../../out-tsc/lib", diff --git a/projects/package.json b/projects/package.json deleted file mode 100644 index b6856bbce..000000000 --- a/projects/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "ng2-qgrid", - "version": "9.1.0", - "bundledDependencies": [ - "@qgrid/core", - "@qgrid/plugins", - "@qgrid/ngx", - "@qgrid/ngx-plugins", - "css.escape", - "fastdom", - "livr", - "lodash-es" - ], - "peerDependencies": { - "@angular/common": "^9.1.0", - "@angular/core": "^9.1.0", - "@angular/forms": "^9.1.0", - "tslib": "^1.10.0" - }, - "main": "bundles/ng2-qgrid.umd.js", - "typings": "ng2-qgrid.d.ts", - "metadata": "ng2-qgrid.metadata.json", - "sideEffects": false -} diff --git a/projects/qgrid-core/column-list/column.list.generate.d.ts b/projects/qgrid-core/column-list/column.list.generate.d.ts index 5244d2812..9a3e54f72 100644 --- a/projects/qgrid-core/column-list/column.list.generate.d.ts +++ b/projects/qgrid-core/column-list/column.list.generate.d.ts @@ -1,5 +1,6 @@ import { ColumnModel } from '../column-type/column.model'; import { Model } from '../model/model'; +import { ColumnListStateTypeDetection } from './column.list.state'; export declare interface ColumnListGenerationSettings { columnFactory: (type: string) => ColumnModel; @@ -7,7 +8,9 @@ export declare interface ColumnListGenerationSettings { cohort: boolean; rows: any[]; testNumber: number; + typeDetection: ColumnListStateTypeDetection; + title: (text: string) => string; } export declare function generateFactory(model: Model): () => { hasChanges: boolean, columns: any[] }; -export declare function generate(settings: ColumnListGenerationSettings): ColumnModel[]; +export declare function generate(settings: Partial): ColumnModel[]; diff --git a/projects/qgrid-core/column-list/column.list.generate.js b/projects/qgrid-core/column-list/column.list.generate.js index 79ce638a9..12d5864f1 100644 --- a/projects/qgrid-core/column-list/column.list.generate.js +++ b/projects/qgrid-core/column-list/column.list.generate.js @@ -1,6 +1,6 @@ import { merge as mergeFactory } from '../services/merge'; import { compile } from '../services/path'; -import { getType, resolveType } from '../services/convert'; +import { getType, inferType, resolveType } from '../services/convert'; import { TextColumnModel } from '../column-type/text.column'; import { assignWith, isUndefined, noop, startCase } from '../utility/kit'; import { columnFactory } from '../column/column.factory'; @@ -37,13 +37,14 @@ export function generateFactory(model) { const htmlColumns = model.columnList().columns; const spawnColumns = []; - const { generation } = model.columnList(); + const { generation, typeDetection } = model.columnList(); if (generation) { let settings = { rows, columnFactory: createColumn, deep: false, - cohort: false + cohort: false, + typeDetection }; switch (generation) { @@ -73,11 +74,15 @@ export function generateFactory(model) { let statistics = []; if (spawnColumns.length) { - statistics.push(merge(columns, spawnColumns, false)); + statistics.push( + merge(columns, spawnColumns, false) + ); } if (htmlColumns.length) { - statistics.push(merge(columns, htmlColumns, true)); + statistics.push( + merge(columns, htmlColumns, true) + ); } return { @@ -95,25 +100,31 @@ export function generate(settings) { rows: [], columnFactory: () => new TextColumnModel(), title: startCase, - testNumber: 10 + testNumber: 10, + typeDetection: 'inference' }, settings); if (context.rows.length) { return build( context.rows[0], [], - context.columnFactory, - context.deep, - context.cohort, - context.title, - context.rows.slice(0, context.testNumber) + { + columnFactory: context.columnFactory, + deep: context.deep, + cohort: context.cohort, + title: context.title, + typeDetection: context.typeDetection, + testRows: context.rows.slice(0, context.testNumber), + } ); } return []; } -function build(graph, pathParts, columnFactory, deep, cohort, title, testRows) { +function build(graph, pathParts, settings) { + const { columnFactory, deep, cohort, title, testRows, typeDetection } = settings; + const props = Object.getOwnPropertyNames(graph); return props.reduce((memo, prop) => { const propParts = [...pathParts, prop]; @@ -121,7 +132,9 @@ function build(graph, pathParts, columnFactory, deep, cohort, title, testRows) { const propPath = propParts.join('.'); const subject = graph[prop]; - const type = resolveType(testRows.map(propValue)); + const type = typeDetection === 'raw' + ? resolveType(testRows.map(propValue)) + : inferType(testRows.map(propValue)); switch (type) { case 'array': { @@ -155,11 +168,7 @@ function build(graph, pathParts, columnFactory, deep, cohort, title, testRows) { const columns = build( subject, propParts, - columnFactory, - deep, - cohort, - title, - testRows + settings ); if (cohort) { diff --git a/projects/qgrid-core/column-list/column.list.state.d.ts b/projects/qgrid-core/column-list/column.list.state.d.ts index d8c1488de..c93f04951 100644 --- a/projects/qgrid-core/column-list/column.list.state.d.ts +++ b/projects/qgrid-core/column-list/column.list.state.d.ts @@ -1,8 +1,18 @@ import { ColumnModel } from '../column-type/column.model'; import { Node } from '../node/node'; +/** + * A column generation mode. Here are possible values: + * + * - `null` auto generation is off. + * - `deep` number of columns will be equal to number of graph leafs after deep traversing of first row object. + * - `shallow` number of columns will be equal to number of keys from first row object. + * - `cohort` similar to deep, but use column groups to display hierarchy. + */ export declare type ColumnListStateGeneration = null | 'deep' | 'shallow' | 'cohort'; +export declare type ColumnListStateTypeDetection = 'inference' | 'raw'; + /** * Use this class to order and generate q-grid columns. * @@ -29,14 +39,11 @@ export declare type ColumnListStateGeneration = null | 'deep' | 'shallow' | 'coh export declare class ColumnListState { /** * A column generation mode. Here are possible values: - * - * - `null` auto generation is off. - * - `deep` number of columns will be equal to number of graph leafs after deep traversing of first row object. - * - `shallow` number of columns will be equal to number of keys from first row object. - * - `cohort` similar to deep, but use column groups to display hierarchy. */ generation: ColumnListStateGeneration; + typeDetection: ColumnListStateTypeDetection; + /** * Array of column keys which q-grid uses for column ordering. * This is filled automatically by internal service, but can be modified, for instance, diff --git a/projects/qgrid-core/column-list/column.list.state.js b/projects/qgrid-core/column-list/column.list.state.js index 6211c3bf0..53509a36f 100644 --- a/projects/qgrid-core/column-list/column.list.state.js +++ b/projects/qgrid-core/column-list/column.list.state.js @@ -3,7 +3,8 @@ import { CohortColumn, CohortColumnModel } from '../column-type/cohort.column'; export class ColumnListState { constructor() { - this.generation = null; // deep | shallow | cohort + this.generation = null; // deep | shallow | cohort | null + this.typeDetection = 'inference'; // inference | raw const root = new CohortColumnModel(); root.key = '$root'; diff --git a/projects/qgrid-core/column-type/editor.options.d.ts b/projects/qgrid-core/column-type/editor.options.d.ts index ec6099425..bdfe4777e 100644 --- a/projects/qgrid-core/column-type/editor.options.d.ts +++ b/projects/qgrid-core/column-type/editor.options.d.ts @@ -3,6 +3,9 @@ import { Action } from '../action/action'; import { ColumnModel } from '../column-type/column.model'; import { Command } from '../command/command'; +export declare type EditorOptionsCruise = 'control' | 'transparent'; +export declare type EditorOptionsTrigger = 'click' | 'custom' | 'focus'; + /** * Specific options for the cell edit mode. */ @@ -15,7 +18,7 @@ export interface EditorOptions { * * `custom` if user defines own edit mode trigger, like button for reference column edit, this option should be used. * * `focus` edit mode activates when cell receives focus. */ - trigger?: string; + trigger?: EditorOptionsTrigger; /** * Defines navigation behavior when cell is in edit mode. @@ -23,7 +26,7 @@ export interface EditorOptions { * * `control` when cell is in edit mode, keyboard navigation events are disabled(in general, `tab` and `shift+tab` still works). * * `transparent` when cell is in edit mode, keyboard navigation event are still applicable. */ - cruise?: string; + cruise?: EditorOptionsCruise; /** * q-grid model factory, can be used by reference column to draw a another q-grid in edit cell mode. diff --git a/projects/qgrid-core/edit/edit.cell.let.js b/projects/qgrid-core/edit/edit.cell.let.js index d2420ea24..e19bedd21 100644 --- a/projects/qgrid-core/edit/edit.cell.let.js +++ b/projects/qgrid-core/edit/edit.cell.let.js @@ -73,8 +73,7 @@ export class EditCellLet { const { cell: newCell } = e.state; if (newCell && - (newCell.column.editorOptions.trigger === 'focus' || - newCell.column.editorOptions.trigger === 'click')) { + (newCell.column.editorOptions.trigger === 'focus')) { if (this.enter.canExecute(newCell)) { this.enter.execute(newCell); } diff --git a/projects/qgrid-core/filter/filter.state.js b/projects/qgrid-core/filter/filter.state.js index 0cca69831..d68c2e963 100644 --- a/projects/qgrid-core/filter/filter.state.js +++ b/projects/qgrid-core/filter/filter.state.js @@ -10,6 +10,7 @@ export class FilterState { this.match = match; this.fetch = noop; this.unit = 'default'; // default|row + this.assertFactory = () => ({ equals: (x, y) => x === y, lessThan: (x, y) => x < y, diff --git a/projects/qgrid-core/grid/grid.host.d.ts b/projects/qgrid-core/grid/grid.host.d.ts index 04ba1af21..08db68307 100644 --- a/projects/qgrid-core/grid/grid.host.d.ts +++ b/projects/qgrid-core/grid/grid.host.d.ts @@ -1,4 +1,5 @@ import { GridPlugin } from '../plugin/grid.plugin'; +import { GridService } from './grid.service'; export declare class GridHost { constructor( diff --git a/projects/qgrid-core/grid/grid.host.js b/projects/qgrid-core/grid/grid.host.js index f99d54ffa..8f4cf3e23 100644 --- a/projects/qgrid-core/grid/grid.host.js +++ b/projects/qgrid-core/grid/grid.host.js @@ -109,9 +109,22 @@ export class GridHost { } invalidateActive() { - const { model, table } = this.plugin; + const { model, table, service } = this.plugin; if (table.view.isFocused()) { - model.focus({ isActive: true }, { source: 'grid.host' }); + const needFocusCell = + !model.mouse().target + && (model.focus().rowIndex < 0 || model.focus().columnIndex < 0); + if (needFocusCell) { + service.focus( + model.pagination().size * model.pagination().current + ); + } else { + model.focus({ + isActive: true + }, { + source: 'grid.host' + }); + } } else { model.focus({ isActive: false }, { source: 'grid.host' }); diff --git a/projects/qgrid-core/group/group.let.d.ts b/projects/qgrid-core/group/group.let.d.ts index d0bd11493..f40c15a25 100644 --- a/projects/qgrid-core/group/group.let.d.ts +++ b/projects/qgrid-core/group/group.let.d.ts @@ -1,10 +1,9 @@ import { Command } from '../command/command'; -import { GridService } from '../grid/grid.service'; import { ColumnModel } from '../column-type/column.model'; import { GridPlugin } from '../plugin/grid.plugin'; export class GroupLet { - constructor(plugin: GridPlugin, service: GridService, shortcut: { register: (commands: Command[]) => void }); + constructor(plugin: GridPlugin, shortcut: { register: (commands: Command[]) => void }); readonly toggleStatus: Command<[any, ColumnModel]>; readonly toggleAllStatus: Command; diff --git a/projects/qgrid-core/group/group.let.js b/projects/qgrid-core/group/group.let.js index 9f99b1cba..e71f754bb 100644 --- a/projects/qgrid-core/group/group.let.js +++ b/projects/qgrid-core/group/group.let.js @@ -1,11 +1,11 @@ +import { columnFactory } from '../column/column.factory'; import { Command } from '../command/command'; -import { getFactory as valueFactory } from '../services/value'; import { getFactory as labelFactory } from '../services/label'; -import { columnFactory } from '../column/column.factory'; +import { getFactory as valueFactory } from '../services/value'; import { PipeUnit } from '../pipe/pipe.unit'; import { preOrderDFS } from '../node/node.service'; -import { yes, identity } from '../utility/kit'; import { selectRow, selectColumn } from '../navigation/navigation.state.selector'; +import { yes, identity } from '../utility/kit'; function rowspanGetNode(node, column) { if (node.source === column.by) { @@ -34,8 +34,8 @@ function rowspanIsVisible(node, column, parent) { } export class GroupLet { - constructor(plugin, service, shortcut) { - const { model, observeReply, disposable } = plugin; + constructor(plugin, shortcut) { + const { model, observeReply, disposable, service } = plugin; this.plugin = plugin; this.valueFactory = valueFactory; diff --git a/projects/qgrid-core/keyboard/keyboard.state.d.ts b/projects/qgrid-core/keyboard/keyboard.state.d.ts index 917050b27..6b5bbe215 100644 --- a/projects/qgrid-core/keyboard/keyboard.state.d.ts +++ b/projects/qgrid-core/keyboard/keyboard.state.d.ts @@ -1,3 +1,5 @@ +export declare type KeyboardStateStatus = 'release' | 'down' | 'up'; + export declare class KeyboardState { codes: string[]; code: string; diff --git a/projects/qgrid-core/layout/layout.let.d.ts b/projects/qgrid-core/layout/layout.let.d.ts index 6f3e25123..32a64d520 100644 --- a/projects/qgrid-core/layout/layout.let.d.ts +++ b/projects/qgrid-core/layout/layout.let.d.ts @@ -1,9 +1,7 @@ -import { GridService } from '../grid/grid.service'; import { GridPlugin } from '../plugin/grid.plugin'; export declare class LayoutLet { constructor( - plugin: GridPlugin, - gridService: GridService + plugin: GridPlugin ); } diff --git a/projects/qgrid-core/layout/layout.let.js b/projects/qgrid-core/layout/layout.let.js index a8d890ff6..ef093bf2b 100644 --- a/projects/qgrid-core/layout/layout.let.js +++ b/projects/qgrid-core/layout/layout.let.js @@ -5,12 +5,11 @@ import { Fastdom } from '../services/fastdom'; import { selectColumn } from '../navigation/navigation.state.selector'; export class LayoutLet { - constructor(plugin, gridService) { + constructor(plugin) { const { model, observeReply, disposable } = plugin; const styleRow = this.styleRow.bind(this); this.plugin = plugin; - this.service = gridService; observeReply(model.navigationChanged) .subscribe(e => { diff --git a/projects/qgrid-core/mouse/mouse.state.d.ts b/projects/qgrid-core/mouse/mouse.state.d.ts index d32dca10c..ee323a5bd 100644 --- a/projects/qgrid-core/mouse/mouse.state.d.ts +++ b/projects/qgrid-core/mouse/mouse.state.d.ts @@ -1,7 +1,11 @@ import { Td } from '../dom/td'; +export declare type MouseStateCode = 'left' | 'right' | 'middle' | null; +export declare type MouseStateStatus = 'release' | 'down' | 'up'; + export declare class MouseState { - code: 'left' | 'right' | 'middle'; - status: 'release' | 'down' | 'up'; + code: MouseStateCode; + status: MouseStateStatus; target: Td; + timestamp: number; } diff --git a/projects/qgrid-core/mouse/mouse.state.js b/projects/qgrid-core/mouse/mouse.state.js index fb2497019..592cd33bc 100644 --- a/projects/qgrid-core/mouse/mouse.state.js +++ b/projects/qgrid-core/mouse/mouse.state.js @@ -1,7 +1,10 @@ +import { Timestamp } from 'rxjs/internal/operators/timestamp'; + export class MouseState { constructor() { this.status = 'release'; this.code = null; this.target = null; + this.timestamp = new Date().getMilliseconds(); } -} \ No newline at end of file +} diff --git a/projects/qgrid-core/navigation/navigation.let.js b/projects/qgrid-core/navigation/navigation.let.js index c6216fc9a..4eb305ce3 100644 --- a/projects/qgrid-core/navigation/navigation.let.js +++ b/projects/qgrid-core/navigation/navigation.let.js @@ -150,8 +150,17 @@ export class NavigationLet { const columnIndex = selectColumnIndex(model.navigation()); const cell = table.body.cell(rowIndex, columnIndex); if (cell.model()) { - Fastdom.mutate(() => cell.addClass(`${GRID_PREFIX}-focused`)); - dispose.push(() => Fastdom.mutate(() => cell.removeClass(`${GRID_PREFIX}-focused`))); + const row = table.body.row(rowIndex); + + Fastdom.mutate(() => { + cell.addClass(`${GRID_PREFIX}-focused`); + row.addClass(`${GRID_PREFIX}-focused`); + }); + + dispose.push(() => Fastdom.mutate(() => { + cell.removeClass(`${GRID_PREFIX}-focused`); + row.removeClass(`${GRID_PREFIX}-focused`); + })); } return dispose; diff --git a/projects/qgrid-core/package.json b/projects/qgrid-core/package.json index de4fd566f..15bf1b125 100644 --- a/projects/qgrid-core/package.json +++ b/projects/qgrid-core/package.json @@ -1,6 +1,6 @@ { "name": "@qgrid/core", - "version": "9.1.0", + "version": "9.1.3", "dependencies": { "css.escape": "1.5.1", "fastdom": "1.0.9", diff --git a/projects/qgrid-core/pagination/pagination.state.js b/projects/qgrid-core/pagination/pagination.state.js index b9db8c66b..87803ed9a 100644 --- a/projects/qgrid-core/pagination/pagination.state.js +++ b/projects/qgrid-core/pagination/pagination.state.js @@ -15,5 +15,10 @@ export class PaginationState { 'pivot': ['by'], 'group': ['by'] }; + + this.shortcut = { + prev: 'alt+pageup', + next: 'alt+pagedown', + }; } } diff --git a/projects/qgrid-core/pipe/column.pipe.js b/projects/qgrid-core/pipe/column.pipe.js index 4af4082bf..677dc802b 100644 --- a/projects/qgrid-core/pipe/column.pipe.js +++ b/projects/qgrid-core/pipe/column.pipe.js @@ -110,7 +110,7 @@ function selectColumnFactory(model) { }; } - if (!selectColumn && selection.unit === 'row' && selection.mode !== 'range') { + if (!selectColumn && selection.unit === 'row') { const createColumn = columnFactory(model); return node => { const selectColumn = createColumn('select'); diff --git a/projects/qgrid-core/plugin/grid.plugin.d.ts b/projects/qgrid-core/plugin/grid.plugin.d.ts index eac49002c..0f12ecbbc 100644 --- a/projects/qgrid-core/plugin/grid.plugin.d.ts +++ b/projects/qgrid-core/plugin/grid.plugin.d.ts @@ -1,14 +1,15 @@ import { Model } from '../model/model'; -import { ModelEvent } from '../model/model.event'; import { Table } from '../dom/table'; import { GridLet } from '../grid/grid.let'; import { ObservableLike } from '../rx/rx'; import { Event } from '../event/event'; +import { GridService } from '../grid/grid.service'; export interface GridPlugin { readonly model: Model; readonly table: Table; readonly view: GridLet; + readonly service: GridService; observe(event: Event): ObservableLike; observeReply(event: Event): ObservableLike; diff --git a/projects/qgrid-core/row-details/row.details.service.d.ts b/projects/qgrid-core/row-details/row.details.service.d.ts index 7c0e0b929..c5930f1db 100644 --- a/projects/qgrid-core/row-details/row.details.service.d.ts +++ b/projects/qgrid-core/row-details/row.details.service.d.ts @@ -1,10 +1,11 @@ import { RowDetailsStatus } from './row.details.status'; import { Model } from '../model/model'; +import { RowStateMode } from '../row/row.state'; -export declare function flatView(model: Model, mode: 'single' | 'multiple'): any[]; +export declare function flatView(model: Model, mode: RowStateMode): any[]; -export declare function toggleStatus(rows: any[], status: Map, mode: 'single' | 'multiple'): +export declare function toggleStatus(rows: any[], status: Map, mode: RowStateMode): Map; -export declare function invalidateStatus(rows: any[], status: Map, mode: 'single' | 'multiple'): +export declare function invalidateStatus(rows: any[], status: Map, mode: RowStateMode): Map; diff --git a/projects/qgrid-core/row-details/row.details.status.d.ts b/projects/qgrid-core/row-details/row.details.status.d.ts index d991d2199..8dd08db39 100644 --- a/projects/qgrid-core/row-details/row.details.status.d.ts +++ b/projects/qgrid-core/row-details/row.details.status.d.ts @@ -1,5 +1,5 @@ export declare class RowDetailsStatus { constructor(expand: boolean); - expand: boolean; + readonly expand: boolean; } diff --git a/projects/qgrid-core/row/row.let.js b/projects/qgrid-core/row/row.let.js index 9775d4595..05b33e724 100644 --- a/projects/qgrid-core/row/row.let.js +++ b/projects/qgrid-core/row/row.let.js @@ -112,10 +112,12 @@ export class RowLet { } get canMove() { - return this.plugin.model.row().canMove; + const { model } = this.plugin; + return model.row().canMove; } get canResize() { - return this.plugin.model.row().canResize; + const { model } = this.plugin; + return model.row().canResize; } } \ No newline at end of file diff --git a/projects/qgrid-core/scroll/scroll.let.d.ts b/projects/qgrid-core/scroll/scroll.let.d.ts index 2e4a56f0c..8fdf57204 100644 --- a/projects/qgrid-core/scroll/scroll.let.d.ts +++ b/projects/qgrid-core/scroll/scroll.let.d.ts @@ -1,5 +1,4 @@ import { Defer } from '../infrastructure/defer'; -import { GridService } from '../grid/grid.service'; import { GridPlugin } from '../plugin/grid.plugin'; import { ScrollStateMode } from './scroll.state'; @@ -30,7 +29,7 @@ export declare class VscrollContext { } export declare class ScrollLet { - constructor(plugin: GridPlugin, vscroll: VscrollContext, gridService: GridService); + constructor(plugin: GridPlugin, vscroll: VscrollContext); readonly mode: ScrollStateMode; readonly y: VscrollContext; diff --git a/projects/qgrid-core/scroll/scroll.let.js b/projects/qgrid-core/scroll/scroll.let.js index c304901b7..f96be55aa 100644 --- a/projects/qgrid-core/scroll/scroll.let.js +++ b/projects/qgrid-core/scroll/scroll.let.js @@ -3,11 +3,12 @@ import { isFunction, identity } from '../utility/kit'; import { Fastdom } from '../services/fastdom'; export class ScrollLet { - constructor(plugin, vscroll, gridService) { - const { model, observeReply } = plugin; - this.plugin = plugin; - + constructor(plugin, vscroll) { + const { model, observeReply, service } = plugin; const { scroll, row, pagination, fetch, pipe } = model; + + this.plugin = plugin; + const rowHeight = row().height; const settings = { threshold: pagination().size, @@ -79,7 +80,7 @@ export class ScrollLet { const count = updateTotalCount(); d.resolve(count); } else { - gridService.invalidate({ + service.invalidate({ source: 'scroll.view', why: 'refresh' }).then(() => { diff --git a/projects/qgrid-core/selection/selection.let.js b/projects/qgrid-core/selection/selection.let.js index 05792119a..496b24247 100644 --- a/projects/qgrid-core/selection/selection.let.js +++ b/projects/qgrid-core/selection/selection.let.js @@ -269,12 +269,15 @@ export class SelectionLet { }), selectAll: new Command({ source: 'selection.view', - canExecute: () => model.selection().mode === 'multiple', + canExecute: () => { + const { mode } = model.selection(); + return mode === 'multiple' || mode === 'range'; + }, execute: () => { let entries = []; switch (model.selection().unit) { case 'row': { - entries = model.data().rows; + entries = this.rows; break; } case 'column': { @@ -287,7 +290,7 @@ export class SelectionLet { const buildRange = this.selectionRange.build(); const startCell = body.cell(0, 0); - const endCell = body.cell(body.rowCount() - 1, body.columnCount() - 1); + const endCell = body.cell(this.rows.length, this.columns.length); entries = buildRange(startCell, endCell); break; @@ -321,7 +324,7 @@ export class SelectionLet { const { toggle } = model.selection(); items = !arguments.length || isUndefined(items) - ? model.scene().rows + ? this.rows : isArray(items) ? items : [items]; @@ -398,11 +401,13 @@ export class SelectionLet { } get rows() { - return this.plugin.table.data.rows(); + const { table } = this.plugin; + return table.data.rows(); } get columns() { - return this.plugin.table.data.columns(); + const { table } = this.plugin; + return table.data.columns(); } navigateTo(rowIndex, columnIndex) { diff --git a/projects/qgrid-core/services/convert.d.ts b/projects/qgrid-core/services/convert.d.ts index c7994e980..10140e924 100644 --- a/projects/qgrid-core/services/convert.d.ts +++ b/projects/qgrid-core/services/convert.d.ts @@ -1,4 +1,5 @@ export declare function parseFactory(type: string, editor?: string): (v: any) => V; export declare function getType(value: any): string; +export declare function inferType(value: any[]): string; export declare function resolveType(value: any[]): string; export declare function isPrimitive(type: string): boolean; diff --git a/projects/qgrid-core/services/convert.js b/projects/qgrid-core/services/convert.js index 26f0ee781..f8c09f503 100644 --- a/projects/qgrid-core/services/convert.js +++ b/projects/qgrid-core/services/convert.js @@ -1,6 +1,19 @@ -import { identity, isObject, isArray, isBoolean, isEmail, isString, isUrl, isImage, isUndefined } from '../utility/kit'; - -// TODO: right now we check the empty result on null, we need to have a way to make it more explicitly +import { + identity, + isObject, + isArray, + isBoolean, + isDate, + isNumber, + isEmail, + isString, + isUrl, + isImage, + isUndefined +} from '../utility/kit'; + +// TODO: right now we check the empty result on null, +// we need to have a way to make it more explicitly export function parseFactory(type, editor) { switch (type) { case 'id': { @@ -30,6 +43,7 @@ export function parseFactory(type, editor) { } } + export function resolveType(values) { const types = values .filter(x => !(isUndefined(x) || x === null || x === '')) @@ -48,7 +62,7 @@ export function resolveType(values) { export function getType(value) { if (isArray(value)) { if (value.length) { - const itemType = getType(value[0]); + const itemType = findType(value[0]); if (!isPrimitive(itemType)) { return 'collection'; } @@ -69,6 +83,57 @@ export function getType(value) { return 'date'; } + if (isString(value)) { + return 'text'; + } + + if (isObject(value)) { + return 'object'; + } + + return 'text'; + +} + +export function inferType(values) { + const types = values + .filter(x => !(isUndefined(x) || x === null || x === '')) + .map(findType); + + if (types.length) { + const test = types[0]; + if (types.every(x => x === test)) { + return test; + } + } + + return 'text'; +} + +export function findType(value) { + if (isArray(value)) { + if (value.length) { + const itemType = findType(value[0]); + if (!isPrimitive(itemType)) { + return 'collection'; + } + } + + return 'array'; + } + + if (likeNumber(value)) { + return 'number'; + } + + if (isBoolean(value)) { + return 'bool'; + } + + if (likeDate(value)) { + return 'date'; + } + if (isEmail(value)) { return 'email'; } @@ -107,7 +172,7 @@ export function isPrimitive(type) { } } -function isDate(value) { +function likeDate(value) { if (value === null || isUndefined(value) || value === '') { return false; } @@ -122,7 +187,7 @@ function isDate(value) { return !!value.match(/^(\d{4})(-(\d{2})(-(\d{2})([T ](\d{2}):(\d{2})(:(\d{2})(\.(\d+))?)?(Z|(([-+])(\d{2})(:?(\d{2}))?))?)?)?)?$/); } -function isNumber(value) { +function likeNumber(value) { if (isNaN(value)) { return false; } diff --git a/projects/qgrid-core/view/view.factory.d.ts b/projects/qgrid-core/view/view.factory.d.ts index a9cf21710..53cb0f72f 100644 --- a/projects/qgrid-core/view/view.factory.d.ts +++ b/projects/qgrid-core/view/view.factory.d.ts @@ -4,7 +4,6 @@ import { GridPlugin } from '../plugin/grid.plugin'; export declare function viewFactory( plugin: GridPlugin, commandManager: CommandManager, - gridService: any, vscroll: any, selectors: any ): (host: any) => void; diff --git a/projects/qgrid-core/view/view.factory.js b/projects/qgrid-core/view/view.factory.js index 7399b5583..e419e8ab3 100644 --- a/projects/qgrid-core/view/view.factory.js +++ b/projects/qgrid-core/view/view.factory.js @@ -20,7 +20,6 @@ import { ClipboardLet } from '../clipboard/clipboard.let'; export function viewFactory( plugin, commandManager, - gridService, vscroll, selectors ) { @@ -60,13 +59,13 @@ export function viewFactory( host.body = new BodyLet(plugin); host.foot = new FootLet(plugin); host.row = new RowLet(plugin, selectors.tr); - host.layout = new LayoutLet(plugin, gridService); - host.scroll = new ScrollLet(plugin, vscroll, gridService); + host.layout = new LayoutLet(plugin); + host.scroll = new ScrollLet(plugin, vscroll); host.highlight = new HighlightLet(plugin); host.sort = new SortLet(plugin); host.pagination = new PaginationLet(plugin); host.nav = new NavigationLet(plugin, navigationShortcut); - host.group = new GroupLet(plugin, gridService, navigationShortcut); + host.group = new GroupLet(plugin, navigationShortcut); host.edit = new EditLet(plugin, navigationShortcut); host.filter = new FilterLet(plugin); host.rowDetails = new RowDetailsLet(plugin, navigationShortcut); diff --git a/projects/qgrid-core/view/view.host.d.ts b/projects/qgrid-core/view/view.host.d.ts index 799c1570c..3a21f1e83 100644 --- a/projects/qgrid-core/view/view.host.d.ts +++ b/projects/qgrid-core/view/view.host.d.ts @@ -1,8 +1,7 @@ -import { GridService } from '../grid/grid.service'; import { GridPlugin } from '../plugin/grid.plugin'; export declare class ViewHost { - constructor(plugin: GridPlugin, service: GridService); + constructor(plugin: GridPlugin); invalidate(): void; diff --git a/projects/qgrid-core/view/view.host.js b/projects/qgrid-core/view/view.host.js index 7ae9cd739..9825fa367 100644 --- a/projects/qgrid-core/view/view.host.js +++ b/projects/qgrid-core/view/view.host.js @@ -13,10 +13,10 @@ import { } from '../mouse/mouse.code'; export class ViewHost { - constructor(plugin, gridService) { + constructor(plugin) { this.plugin = plugin; - this.watch(gridService); + this.watch(plugin.service); this.final = final(); } @@ -111,6 +111,7 @@ export class ViewHost { mouseDown(e) { const { model, view } = this.plugin; const { edit } = model; + const td = this.findCell(e); model.mouse({ @@ -125,15 +126,14 @@ export class ViewHost { const { area, mode } = this.selection; if (td) { - const fromViewMode = edit().status === 'view'; + const fromNotEditMode = edit().status === 'view' this.navigate(td); - if (area === 'body') { this.select(td); } - if (fromViewMode && view.edit.cell.enter.canExecute(td)) { + if (fromNotEditMode && view.edit.cell.enter.canExecute(td)) { view.edit.cell.enter.execute(td); } @@ -216,7 +216,8 @@ export class ViewHost { model.mouse({ code: stringify(NO_BUTTON), status: 'release', - target: null + target: null, + timestamp: Date.now(), }, { source: 'mouse.up' }); diff --git a/projects/qgrid-plugins/column-filter/column.filter.plugin.js b/projects/qgrid-plugins/column-filter/column.filter.plugin.js index b45cae2e2..787f1243a 100644 --- a/projects/qgrid-plugins/column-filter/column.filter.plugin.js +++ b/projects/qgrid-plugins/column-filter/column.filter.plugin.js @@ -2,7 +2,6 @@ import { clone } from '@qgrid/core/utility/kit'; import { Command } from '@qgrid/core/command/command'; import { Event } from '@qgrid/core/event/event'; import { getFactory as labelFactory } from '@qgrid/core/services/label'; -import * as columnService from '@qgrid/core/column/column.service'; export class ColumnFilterPlugin { constructor(plugin, context) { @@ -21,7 +20,7 @@ export class ColumnFilterPlugin { this.byBlanks = !!(filterBy && filterBy.blanks); let defaultOperator = model.filter().operatorFactory(this.column)[0] || 'contains'; - if(filterBy && filterBy.items && filterBy.items.length) { + if (filterBy && filterBy.items && filterBy.items.length) { defaultOperator = 'contains'; } @@ -128,16 +127,21 @@ export class ColumnFilterPlugin { filter.items = Array.from(this.by); filter.blanks = this.byBlanks; - if (this.operator !== 'contains') { - filter.expression = { - kind: 'condition', - op: this.operator, - left: this.column.key, - right: this.value, - }; - filter.items = []; - } else { + if (this.operator === 'contains') { delete filter.expression; + } else { + filter.items = []; + + if (this.operator.startsWith('is') || this.value) { + filter.expression = { + kind: 'condition', + op: this.operator, + left: this.column.key, + right: this.value, + }; + } else { + delete filter.expression; + } } if ((filter.items && filter.items.length) || filter.blanks || filter.expression) { diff --git a/projects/qgrid-plugins/package.json b/projects/qgrid-plugins/package.json index 319013aba..e0bcb8dcd 100644 --- a/projects/qgrid-plugins/package.json +++ b/projects/qgrid-plugins/package.json @@ -1,8 +1,8 @@ { "name": "@qgrid/plugins", - "version": "9.1.0", + "version": "9.1.3", "peerDependencies": { - "@qgrid/core": "9.1.0" + "@qgrid/core": "9.1.3" }, "author": "qgrid.team@gmail.com" } \ No newline at end of file diff --git a/projects/qgrid-plugins/pager/pager.plugin.js b/projects/qgrid-plugins/pager/pager.plugin.js index 1ce4f6d5b..edffb4f2b 100644 --- a/projects/qgrid-plugins/pager/pager.plugin.js +++ b/projects/qgrid-plugins/pager/pager.plugin.js @@ -7,8 +7,11 @@ export class PagerPlugin { this.plugin = plugin; + const { shortcut } = model.pagination(); + this.next = new Command({ source: 'pager', + shortcut: shortcut.next, execute: () => { new FocusAfterRenderService(plugin); model.pagination({ current: model.pagination().current + 1 }, { source: 'pager.view' }) @@ -18,6 +21,7 @@ export class PagerPlugin { this.prev = new Command({ source: 'pager', + shortcut: shortcut.prev, execute: () => { new FocusAfterRenderService(plugin); model.pagination({ current: model.pagination().current - 1 }, { source: 'pager.view' }); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 17277413f..4c38df89c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,8 +1,7 @@ -import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule, Router } from '@angular/router'; +import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; @@ -11,13 +10,13 @@ import { MatListModule } from '@angular/material/list'; import { MatSelectModule } from '@angular/material/select'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatToolbarModule } from '@angular/material/toolbar'; +import { NgModule } from '@angular/core'; +import { RouterModule, Router } from '@angular/router'; import { AppComponent } from './app.component'; import { ExampleModule, EXAMPLES, APP_ROUTES } from '../examples/example.module'; import { FilterSearchPipe } from './app.filter.pipe'; -//import { PipeModule } from 'ng2-qgrid'; -import { FormsModule } from '@angular/forms'; import { HighlightPipe } from './app.highlight.pipe'; @NgModule({ diff --git a/src/examples/alt-basic/example-pane-basic.component.html b/src/examples/alt-basic/example-pane-basic.component.html new file mode 100644 index 000000000..ac4511f13 --- /dev/null +++ b/src/examples/alt-basic/example-pane-basic.component.html @@ -0,0 +1,28 @@ + + + + + + + + +
+ + +

+ {{$items[0]?.name.last}}, {{$items[0]?.name.first}} +

+
+ + + \ No newline at end of file diff --git a/src/examples/alt-basic/example-pane-basic.component.scss b/src/examples/alt-basic/example-pane-basic.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/examples/alt-basic/example-pane-basic.component.ts b/src/examples/alt-basic/example-pane-basic.component.ts new file mode 100644 index 000000000..d2b054ba1 --- /dev/null +++ b/src/examples/alt-basic/example-pane-basic.component.ts @@ -0,0 +1,20 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DataService, Human } from '../data.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'example-pane-basic', + templateUrl: 'example-pane-basic.component.html', + styleUrls: ['example-pane-basic.component.scss'], + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExamplePaneBasicComponent { + static id = 'pane-basic'; + + rows$: Observable; + + constructor(dataService: DataService) { + this.rows$ = dataService.getPeople(); + } +} diff --git a/src/examples/data-row-add/example-data-row-add.component.ts b/src/examples/data-row-add/example-data-row-add.component.ts index e0a7fd00f..63a8532a7 100644 --- a/src/examples/data-row-add/example-data-row-add.component.ts +++ b/src/examples/data-row-add/example-data-row-add.component.ts @@ -20,8 +20,22 @@ export class ExampleDataRowAddComponent implements AfterViewInit { execute: () => { const { model } = this.grid; - const atom = new Human(); - const rows = Array.from(model.data().rows).concat([atom]); + const human: Human = { + id: -1, + contact: { email: [] }, + password: '', + comment: '', + likes: [], + gender: 'male', + birthday: '', + memberSince: '', + name: { + first: '', + last: '', + } + }; + + const rows = Array.from(model.data().rows).concat([human]); model.data({ rows }); // focus last row, second column diff --git a/src/examples/details-row-custom/example-details-row-custom.component.ts b/src/examples/details-row-custom/example-details-row-custom.component.ts index a2360a533..2b37c0fb3 100644 --- a/src/examples/details-row-custom/example-details-row-custom.component.ts +++ b/src/examples/details-row-custom/example-details-row-custom.component.ts @@ -37,6 +37,9 @@ export class ExampleDetailsRowCustomComponent implements AfterViewInit { model.row({ status: new Map() }); + }, + canExecute: row => { + return !(row instanceof RowDetails); } }); @@ -74,7 +77,10 @@ export class ExampleDetailsRowCustomComponent implements AfterViewInit { case 'enter': case 'space': { const { cell } = model.navigation(); - this.toggleExpand.execute(cell && cell.row); + const row = cell && cell.row; + if (this.toggleExpand.canExecute(row)) { + this.toggleExpand.execute(row); + } break; } case 'alt': { @@ -84,7 +90,9 @@ export class ExampleDetailsRowCustomComponent implements AfterViewInit { const { current, size } = model.pagination(); const altRow = rows[rowNo + current * size]; if (altRow) { - this.toggleExpand.execute(altRow); + if (this.toggleExpand.canExecute(altRow)) { + this.toggleExpand.execute(altRow); + } } } break; @@ -97,7 +105,9 @@ export class ExampleDetailsRowCustomComponent implements AfterViewInit { const { code, status, target } = e.state; if (code === 'left' && status === 'up') { if (target && target.column.key !== 'name') { - this.toggleExpand.execute(target.row); + if (this.toggleExpand.canExecute(target.row)) { + this.toggleExpand.execute(target.row); + } } } }); diff --git a/src/examples/details-row-select/example-details-row-select.component.html b/src/examples/details-row-select/example-details-row-select.component.html new file mode 100644 index 000000000..408f4cee1 --- /dev/null +++ b/src/examples/details-row-select/example-details-row-select.component.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + +
+
+
+ {{$cell.row.item.number}} +
+ +
+ {{$cell.row.item.symbol}} +
+ +
+ {{$cell.row.item.name}} +
+ +
+ {{$cell.row.item.mass}} +
+
+ +
+

+ {{$cell.row.item.name}} + was discovered by + + {{$cell.row.item.discoveredBy}} + in + {{$cell.row.item.discoveredIn}}. {{$cell.row.item.summary}} +

+
+
+ + + \ No newline at end of file diff --git a/src/examples/details-row-select/example-details-row-select.component.scss b/src/examples/details-row-select/example-details-row-select.component.scss new file mode 100644 index 000000000..dd6d03041 --- /dev/null +++ b/src/examples/details-row-select/example-details-row-select.component.scss @@ -0,0 +1,54 @@ +a { + text-decoration: none; + font-weight: bold; +} + +.atom-details { + display: flex; + margin: 7px 0 7px -1px; +} + +.atom-details .atom-box { + width: 100px; + height: 100px; + border: 2px solid #C8C8C8; + border-radius: 3px; +} + +.atom-details .atom-info { + display: flex; + font-size: 15px; + word-wrap: break-word; + width: 45%; + white-space: normal; +} + +.atom-number { + text-align: right; + font-size: 15px; + margin-top: 7px; + margin-right: 7px; +} + +.atom-symbol { + top: 28px; + font-size: 36px; + text-align: center; + margin-top: -4px; +} + +.atom-name { + text-align: center; + margin-top: -6px; +} + +.atom-mass { + font-size: 10px; + text-align: center; + margin-top: 7px; +} + +.atom-description { + margin: auto; + padding-left: 21px; +} diff --git a/src/examples/details-row-select/example-details-row-select.component.ts b/src/examples/details-row-select/example-details-row-select.component.ts new file mode 100644 index 000000000..ee9c8ec34 --- /dev/null +++ b/src/examples/details-row-select/example-details-row-select.component.ts @@ -0,0 +1,20 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DataService, Atom } from '../data.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'example-details-row-select', + templateUrl: 'example-details-row-select.component.html', + styleUrls: ['example-details-row-select.component.scss'], + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExampleDetailsRowSelectComponent { + static id = 'details-row-select'; + + rows: Observable; + + constructor(dataService: DataService) { + this.rows = dataService.getAtoms(); + } +} diff --git a/src/examples/dynamic-column-model/example-dynamic-column-model.component.ts b/src/examples/dynamic-column-model/example-dynamic-column-model.component.ts index 37d3260a5..e2f79679f 100644 --- a/src/examples/dynamic-column-model/example-dynamic-column-model.component.ts +++ b/src/examples/dynamic-column-model/example-dynamic-column-model.component.ts @@ -25,9 +25,9 @@ export class ExampleDynamicColumnModelComponent { title: `${side} - ${id}` }; - const data = this.gridModel.data(); - const columns = data.columns.slice(); - const rows = data.rows.slice(); + const dataState = this.gridModel.data(); + const columns = dataState.columns.slice(); + const rows = dataState.rows.slice(); if (side === 'left') { columns.unshift(column); @@ -62,8 +62,8 @@ export class ExampleDynamicColumnModelComponent { title: `group - ${groupId}` }; - const data = this.gridModel.data(); - const columns = data.columns.slice(); + const dataState = this.gridModel.data(); + const columns = dataState.columns.slice(); columns.push(groupColumn); this.gridModel.data({ columns }); } diff --git a/src/examples/example.module.ts b/src/examples/example.module.ts index 4372826af..464504bfa 100644 --- a/src/examples/example.module.ts +++ b/src/examples/example.module.ts @@ -14,6 +14,7 @@ import { ExampleActionBarBasicComponent } from './action-bar-basic/example-actio import { ExampleActionBarOnEnterComponent } from './action-bar-on-enter/example-action-bar-on-enter.component'; import { ExampleActionBarTemplateComponent } from './action-bar-template/example-action-bar-template.component'; import { ExampleAggregateColumnBasicComponent } from './aggregate-column-basic/example-aggregate-column-basic.component'; +import { ExampleAltBasicComponent } from './pane-basic/example-alt-basic.component'; import { ExampleColumnArrayBasicComponent } from './column-array-basic/example-column-array-basic.component'; import { ExampleColumnAutocompleteBasicComponent } from './column-autocomplete-basic/example-column-autocomplete-basic.component'; import { ExampleColumnBoolBasicComponent } from './column-bool-basic/example-column-bool-basic.component'; @@ -54,6 +55,7 @@ import { ExampleDetailsRowBasicComponent } from './details-row-basic/example-det import { ExampleDetailsRowCustomComponent } from './details-row-custom/example-details-row-custom.component'; import { ExampleDetailsRowGridComponent } from './details-row-grid/example-details-row-grid.component'; import { ExampleDetailsRowPinComponent } from './details-row-pin/example-details-row-pin.component'; +import { ExampleDetailsRowSelectComponent } from './details-row-select/example-details-row-select.component'; import { ExampleDetailsRowStartComponent } from './details-row-start/example-details-row-start.component'; import { ExampleDragColumnBasicComponent } from './drag-column-basic/example-drag-column-basic.component'; import { ExampleDragRowBasicComponent } from './drag-row-basic/example-drag-row-basic.component'; @@ -77,6 +79,7 @@ import { ExampleFocusCellCustomComponent } from './focus-cell-custom/example-foc import { ExampleGenerateColumnCheckComponent } from './generate-column-check/example-generate-column-check.component'; import { ExampleGenerateColumnCohortComponent } from './generate-column-cohort/example-generate-column-cohort.component'; import { ExampleGenerateColumnDeepComponent } from './generate-column-deep/example-generate-column-deep.component'; +import { ExampleGenerateColumnRawComponent } from './generate-column-raw/example-generate-column-raw.component'; import { ExampleGenerateColumnShallowComponent } from './generate-column-shallow/example-generate-column-shallow.component'; import { ExampleGridListBasicComponent } from './grid-list-basic/example-grid-list-basic.component'; import { ExampleGroupColumnBasicComponent } from './group-column-basic/example-group-column-basic.component'; @@ -142,6 +145,7 @@ import { ExampleSelectMixBasicComponent } from './select-mix-basic/example-selec import { ExampleSelectRowBasicComponent } from './select-row-basic/example-select-row-basic.component'; import { ExampleSelectRowCommandComponent } from './select-row-command/example-select-row-command.component'; import { ExampleSelectRowDisableComponent } from './select-row-disable/example-select-row-disable.component'; +import { ExampleSelectRowRangeComponent } from './select-row-range/example-select-row-range.component'; import { ExampleSelectRowSingleComponent } from './select-row-single/example-select-row-single.component'; import { ExampleSelectRowSingleOnlyComponent } from './select-row-single-only/example-select-row-single-only.component'; import { ExampleSizeColumnAbsoluteComponent } from './size-column-absolute/example-size-column-absolute.component'; @@ -165,9 +169,11 @@ export const EXAMPLES: any[] = [ ExampleActionBarOnEnterComponent, ExampleActionBarTemplateComponent, ExampleAggregateColumnBasicComponent, + ExampleAltBasicComponent, ExampleColumnArrayBasicComponent, ExampleColumnAutocompleteBasicComponent, ExampleColumnBoolBasicComponent, + ExampleColumnColumnVisibilityBasicComponent, ExampleColumnCurrencyBasicComponent, ExampleColumnDataSafeComponent, ExampleColumnDateBasicComponent, @@ -190,7 +196,6 @@ export const EXAMPLES: any[] = [ ExampleColumnTooltipBasicComponent, ExampleColumnTypeSafeComponent, ExampleColumnUrlBasicComponent, - ExampleColumnColumnVisibilityBasicComponent, ExampleDataRowAddComponent, ExampleDataRowDeleteComponent, ExampleDefineColumnAsyncComponent, @@ -205,6 +210,7 @@ export const EXAMPLES: any[] = [ ExampleDetailsRowCustomComponent, ExampleDetailsRowGridComponent, ExampleDetailsRowPinComponent, + ExampleDetailsRowSelectComponent, ExampleDetailsRowStartComponent, ExampleDragColumnBasicComponent, ExampleDragRowBasicComponent, @@ -228,6 +234,7 @@ export const EXAMPLES: any[] = [ ExampleGenerateColumnCheckComponent, ExampleGenerateColumnCohortComponent, ExampleGenerateColumnDeepComponent, + ExampleGenerateColumnRawComponent, ExampleGenerateColumnShallowComponent, ExampleGridListBasicComponent, ExampleGroupColumnBasicComponent, @@ -292,6 +299,7 @@ export const EXAMPLES: any[] = [ ExampleSelectRowBasicComponent, ExampleSelectRowCommandComponent, ExampleSelectRowDisableComponent, + ExampleSelectRowRangeComponent, ExampleSelectRowSingleComponent, ExampleSelectRowSingleOnlyComponent, ExampleSizeColumnAbsoluteComponent, @@ -311,23 +319,29 @@ export const EXAMPLES: any[] = [ ExampleVisibilityStateComponent, ]; -export const APP_ROUTES: Routes = EXAMPLES.map(example => ({ - path: example.id, - component: example -})); +export const APP_ROUTES: Routes = EXAMPLES + .map(example => ({ + path: example.id, + component: example + })); @NgModule({ - declarations: [...EXAMPLES, ExamplePluginMyPagerComponent], + declarations: [ + ...EXAMPLES, + ExamplePluginMyPagerComponent + ], exports: EXAMPLES, imports: [ - GridModule, - ThemeModule, CommonModule, FormsModule, + MatButtonModule, MatSelectModule, MatChipsModule, - MatIconModule + MatIconModule, + + GridModule, + ThemeModule, ] }) export class ExampleModule { } diff --git a/src/examples/focus-cell-custom/example-focus-cell-custom.component.ts b/src/examples/focus-cell-custom/example-focus-cell-custom.component.ts index 4a53b8671..64fad16fa 100644 --- a/src/examples/focus-cell-custom/example-focus-cell-custom.component.ts +++ b/src/examples/focus-cell-custom/example-focus-cell-custom.component.ts @@ -25,6 +25,6 @@ export class ExampleFocusCellCustomComponent { const gridService = this.qgrid.service(model); // navigate to the 2nd page to the bottom - gridService.focus(Number.parseInt(rowIndex, 10)); + gridService.focus(Number.parseInt(rowIndex, 10) - 1); } } diff --git a/src/examples/generate-column-raw/example-generate-column-raw.component.html b/src/examples/generate-column-raw/example-generate-column-raw.component.html new file mode 100644 index 000000000..823954783 --- /dev/null +++ b/src/examples/generate-column-raw/example-generate-column-raw.component.html @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/examples/generate-column-raw/example-generate-column-raw.component.scss b/src/examples/generate-column-raw/example-generate-column-raw.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/examples/generate-column-raw/example-generate-column-raw.component.ts b/src/examples/generate-column-raw/example-generate-column-raw.component.ts new file mode 100644 index 000000000..7b82b6412 --- /dev/null +++ b/src/examples/generate-column-raw/example-generate-column-raw.component.ts @@ -0,0 +1,20 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DataService, Human } from '../data.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'example-generate-column-raw', + templateUrl: 'example-generate-column-raw.component.html', + styleUrls: ['example-generate-column-raw.component.scss'], + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExampleGenerateColumnRawComponent { + static id = 'generate-column-raw'; + + rows: Observable; + + constructor(dataService: DataService) { + this.rows = dataService.getPeople(); + } +} diff --git a/src/examples/import-basic/example-import-basic.component.html b/src/examples/import-basic/example-import-basic.component.html index 439d55f54..52e94e016 100644 --- a/src/examples/import-basic/example-import-basic.component.html +++ b/src/examples/import-basic/example-import-basic.component.html @@ -1,4 +1,4 @@ - diff --git a/src/examples/pane-basic/example-alt-basic.component.html b/src/examples/pane-basic/example-alt-basic.component.html new file mode 100644 index 000000000..5a25b6a4a --- /dev/null +++ b/src/examples/pane-basic/example-alt-basic.component.html @@ -0,0 +1,33 @@ + + + + + + + + +
+ + +

+ {{$items[0]?.name.last}}, {{$items[0]?.name.first}} +

+
+ + + + + + + \ No newline at end of file diff --git a/src/examples/pane-basic/example-alt-basic.component.scss b/src/examples/pane-basic/example-alt-basic.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/examples/pane-basic/example-alt-basic.component.ts b/src/examples/pane-basic/example-alt-basic.component.ts new file mode 100644 index 000000000..5ed433d31 --- /dev/null +++ b/src/examples/pane-basic/example-alt-basic.component.ts @@ -0,0 +1,20 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DataService, Human } from '../data.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'example-alt-basic', + templateUrl: 'example-alt-basic.component.html', + styleUrls: ['example-alt-basic.component.scss'], + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExampleAltBasicComponent { + static id = 'alt-basic'; + + rows$: Observable; + + constructor(dataService: DataService) { + this.rows$ = dataService.getPeople(); + } +} diff --git a/src/examples/select-cell-basic/example-select-cell-basic.component.html b/src/examples/select-cell-basic/example-select-cell-basic.component.html index 41326c389..80ad75775 100644 --- a/src/examples/select-cell-basic/example-select-cell-basic.component.html +++ b/src/examples/select-cell-basic/example-select-cell-basic.component.html @@ -1,4 +1,4 @@ - diff --git a/src/examples/select-row-range/example-select-row-range.component.html b/src/examples/select-row-range/example-select-row-range.component.html new file mode 100644 index 000000000..077be3196 --- /dev/null +++ b/src/examples/select-row-range/example-select-row-range.component.html @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/examples/select-row-range/example-select-row-range.component.scss b/src/examples/select-row-range/example-select-row-range.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/examples/select-row-range/example-select-row-range.component.ts b/src/examples/select-row-range/example-select-row-range.component.ts new file mode 100644 index 000000000..9978c2e45 --- /dev/null +++ b/src/examples/select-row-range/example-select-row-range.component.ts @@ -0,0 +1,19 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DataService, Human } from '../data.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'example-select-row-basic', + templateUrl: 'example-select-row-range.component.html', + styleUrls: ['example-select-row-range.component.scss'], + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExampleSelectRowRangeComponent { + static id = 'select-row-range'; + + rows$: Observable = this.dataService.getPeople(); + + constructor(private dataService: DataService) { + } +} diff --git a/src/package.json b/src/package.json index d4272ad6b..3b73ae9b8 100644 --- a/src/package.json +++ b/src/package.json @@ -23,5 +23,5 @@ "url": "git+https://github.com/qgrid/ng2.git" }, "typings": "./index.d.ts", - "version": "9.1.0" + "version": "9.1.3" } \ No newline at end of file diff --git a/src/polyfills.ts b/src/polyfills.ts index e19ebceab..e9fa47fd6 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -19,26 +19,26 @@ */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ -// import 'core-js/es6/symbol'; -// import 'core-js/es6/object'; -// import 'core-js/es6/function'; -// import 'core-js/es6/parse-int'; -// import 'core-js/es6/parse-float'; -// import 'core-js/es6/number'; -// import 'core-js/es6/math'; -// import 'core-js/es6/string'; -// import 'core-js/es6/date'; -// import 'core-js/es6/array'; -// import 'core-js/es6/regexp'; -// import 'core-js/es6/map'; -// import 'core-js/es6/weak-map'; -// import 'core-js/es6/set'; +import 'core-js/es/symbol'; +import 'core-js/es/object'; +import 'core-js/es/function'; +import 'core-js/es/parse-int'; +import 'core-js/es/parse-float'; +import 'core-js/es/number'; +import 'core-js/es/math'; +import 'core-js/es/string'; +import 'core-js/es/date'; +import 'core-js/es/array'; +import 'core-js/es/regexp'; +import 'core-js/es/map'; +import 'core-js/es/weak-map'; +import 'core-js/es/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. +import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ -// import 'core-js/es6/reflect'; +import 'core-js/es/reflect'; /** Evergreen browsers require these. **/ @@ -66,7 +66,7 @@ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js * with the following flag, it will bypass `zone.js` patch for IE/Edge */ -// (window as any).__Zone_enable_cross_context_check = true; +(window as any).__Zone_enable_cross_context_check = true; /*************************************************************************************************** * Zone JS is required by default for Angular itself. diff --git a/tsconfig.json b/tsconfig.json index 12d5393fa..1d5d4b85e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "./tsconfig.prod.json", + "extends": "./tsconfig.lib.json", "compilerOptions": { "paths": { "ng2-qgrid/theme/material": [ @@ -24,5 +24,9 @@ "./projects/ngx-qgrid-plugins/src/public-api.ts" ] } + }, + "angularCompilerOptions": { + "fullTemplateTypeCheck": true, + "enableIvy": true } } \ No newline at end of file diff --git a/tsconfig.prod.json b/tsconfig.lib.json similarity index 89% rename from tsconfig.prod.json rename to tsconfig.lib.json index 3977ef4a7..e3852103c 100644 --- a/tsconfig.prod.json +++ b/tsconfig.lib.json @@ -32,8 +32,9 @@ ] }, "angularCompilerOptions": { - "fullTemplateTypeCheck": true, + "fullTemplateTypeCheck": false, "strictInjectionParameters": true, - "enableIvy": true + "enableIvy": false, + "skipTemplateCodegen": true } } \ No newline at end of file