@skyux/grids 7.0.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +1 -47
- package/package.json +8 -8
package/documentation.json
CHANGED
|
@@ -4362,51 +4362,5 @@
|
|
|
4362
4362
|
}
|
|
4363
4363
|
]
|
|
4364
4364
|
},
|
|
4365
|
-
"codeExamples": [
|
|
4366
|
-
{
|
|
4367
|
-
"fileName": "grid-demo.component.html",
|
|
4368
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/basic/grid-demo.component.html",
|
|
4369
|
-
"rawContents": "<sky-grid\n fit=\"scroll\"\n [data]=\"data\"\n (sortFieldChange)=\"onSortChangeForGrid($event)\"\n>\n <sky-grid-column field=\"name\" heading=\"Name\"> </sky-grid-column>\n <sky-grid-column field=\"email\" heading=\"Email\"> </sky-grid-column>\n <sky-grid-column field=\"amount\" heading=\"Amount\"> </sky-grid-column>\n <sky-grid-column field=\"status\" heading=\"Status\"> </sky-grid-column>\n</sky-grid>\n"
|
|
4370
|
-
},
|
|
4371
|
-
{
|
|
4372
|
-
"fileName": "grid-demo.component.ts",
|
|
4373
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/basic/grid-demo.component.ts",
|
|
4374
|
-
"rawContents": "import { Component } from '@angular/core';\nimport { ListSortFieldSelectorModel } from '@skyux/list-builder-common';\n\n@Component({\n selector: 'app-grid-demo',\n templateUrl: './grid-demo.component.html',\n})\nexport class GridDemoComponent {\n public data: any[] = [\n {\n id: '1',\n name: 'Niels Bohr',\n email: 'niels.bohr@example.com',\n amount: 170.75,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Ada Lovelace',\n email: 'ada.lovelace@example.com',\n amount: 114.13,\n status: 'Paid',\n },\n {\n id: '3',\n name: 'Marie Curie',\n email: 'marie.curie@example.com',\n amount: 111,\n status: 'Past due',\n },\n {\n id: '4',\n name: 'Barbara McClintock',\n email: 'barbara.mcclintock@example.com',\n amount: 84.63,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Michael Faraday',\n email: 'michael.faraday@example.com',\n amount: 83.97,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Enrico Fermi',\n email: 'enrico.fermi@example.com',\n amount: 74.5,\n status: 'Past due',\n },\n {\n id: '7',\n name: 'Mae C. Jemison',\n email: 'mae.jemison@example.com',\n amount: 70.86,\n status: 'Paid',\n },\n ];\n\n public onSortChangeForGrid(activeSort: ListSortFieldSelectorModel): void {\n this.data = this.sortGridData(activeSort, this.data);\n }\n\n private sortGridData(\n activeSort: ListSortFieldSelectorModel,\n data: any[]\n ): any[] {\n const sortField = activeSort.fieldSelector;\n const descending = activeSort.descending;\n\n return data\n .sort((a: any, b: any) => {\n let value1 = a[sortField];\n let value2 = b[sortField];\n\n if (value1 && typeof value1 === 'string') {\n value1 = value1.toLowerCase();\n }\n\n if (value2 && typeof value2 === 'string') {\n value2 = value2.toLowerCase();\n }\n\n if (value1 === value2) {\n return 0;\n }\n\n let result = value1 > value2 ? 1 : -1;\n\n if (descending) {\n result *= -1;\n }\n\n return result;\n })\n .slice();\n }\n}\n"
|
|
4375
|
-
},
|
|
4376
|
-
{
|
|
4377
|
-
"fileName": "grid-demo.module.ts",
|
|
4378
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/basic/grid-demo.module.ts",
|
|
4379
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyGridModule } from '@skyux/grids';\n\nimport { GridDemoComponent } from './grid-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyGridModule],\n declarations: [GridDemoComponent],\n exports: [GridDemoComponent],\n})\nexport class GridDemoModule {}\n"
|
|
4380
|
-
},
|
|
4381
|
-
{
|
|
4382
|
-
"fileName": "grid-demo.component.html",
|
|
4383
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/column-template/grid-demo.component.html",
|
|
4384
|
-
"rawContents": "<sky-grid\n fit=\"scroll\"\n [data]=\"data\"\n (sortFieldChange)=\"onSortChangeForGrid($event)\"\n>\n <sky-grid-column field=\"name\" heading=\"Name\"> </sky-grid-column>\n <sky-grid-column field=\"email\" heading=\"Email\"> </sky-grid-column>\n <sky-grid-column\n field=\"amount\"\n heading=\"Amount\"\n [heading]=\"asyncHeading | async\"\n >\n </sky-grid-column>\n <sky-grid-column\n field=\"status\"\n heading=\"Status\"\n [template]=\"customColumnTemplate\"\n >\n </sky-grid-column>\n</sky-grid>\n\n<ng-template let-value=\"value\" #customColumnTemplate>\n <div [ngClass]=\"{ 'sky-text-danger': value === 'Past due' }\">\n {{ value }}\n </div>\n</ng-template>\n"
|
|
4385
|
-
},
|
|
4386
|
-
{
|
|
4387
|
-
"fileName": "grid-demo.component.ts",
|
|
4388
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/column-template/grid-demo.component.ts",
|
|
4389
|
-
"rawContents": "import { Component, OnInit } from '@angular/core';\nimport { ListSortFieldSelectorModel } from '@skyux/list-builder-common';\n\nimport { BehaviorSubject } from 'rxjs';\n\n@Component({\n selector: 'app-grid-demo',\n templateUrl: './grid-demo.component.html',\n})\nexport class GridDemoComponent implements OnInit {\n public asyncHeading = new BehaviorSubject<string>('');\n\n public data: any[] = [\n {\n id: '1',\n name: 'Niels Bohr',\n email: 'niels.bohr@example.com',\n amount: 170.75,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Ada Lovelace',\n email: 'ada.lovelace@example.com',\n amount: 114.13,\n status: 'Paid',\n },\n {\n id: '3',\n name: 'Marie Curie',\n email: 'marie.curie@example.com',\n amount: 111,\n status: 'Past due',\n },\n {\n id: '4',\n name: 'Barbara McClintock',\n email: 'barbara.mcclintock@example.com',\n amount: 84.63,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Michael Faraday',\n email: 'michael.faraday@example.com',\n amount: 83.97,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Enrico Fermi',\n email: 'enrico.fermi@example.com',\n amount: 74.5,\n status: 'Past due',\n },\n {\n id: '7',\n name: 'Mae C. Jemison',\n email: 'mae.jemison@example.com',\n amount: 70.86,\n status: 'Paid',\n },\n ];\n\n public ngOnInit(): void {\n // Simulate async request:\n setTimeout(() => {\n this.asyncHeading.next('Amount');\n }, 1000);\n }\n\n public onSortChangeForGrid(activeSort: ListSortFieldSelectorModel): void {\n this.data = this.sortGridData(activeSort, this.data);\n }\n\n private sortGridData(\n activeSort: ListSortFieldSelectorModel,\n data: any[]\n ): any[] {\n const sortField = activeSort.fieldSelector;\n const descending = activeSort.descending;\n\n return data\n .sort((a: any, b: any) => {\n let value1 = a[sortField];\n let value2 = b[sortField];\n\n if (value1 && typeof value1 === 'string') {\n value1 = value1.toLowerCase();\n }\n\n if (value2 && typeof value2 === 'string') {\n value2 = value2.toLowerCase();\n }\n\n if (value1 === value2) {\n return 0;\n }\n\n let result = value1 > value2 ? 1 : -1;\n\n if (descending) {\n result *= -1;\n }\n\n return result;\n })\n .slice();\n }\n}\n"
|
|
4390
|
-
},
|
|
4391
|
-
{
|
|
4392
|
-
"fileName": "grid-demo.module.ts",
|
|
4393
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/column-template/grid-demo.module.ts",
|
|
4394
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyGridModule } from '@skyux/grids';\n\nimport { GridDemoComponent } from './grid-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyGridModule],\n declarations: [GridDemoComponent],\n exports: [GridDemoComponent],\n})\nexport class GridDemoModule {}\n"
|
|
4395
|
-
},
|
|
4396
|
-
{
|
|
4397
|
-
"fileName": "grid-demo.component.html",
|
|
4398
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/multiselect/grid-demo.component.html",
|
|
4399
|
-
"rawContents": "<sky-grid\n [data]=\"data\"\n [enableMultiselect]=\"true\"\n [selectedRowIds]=\"selectedRowIds\"\n (multiselectSelectionChange)=\"onMultiselectSelectionChange($event)\"\n (sortFieldChange)=\"onSortChangeForGrid($event)\"\n>\n <sky-grid-column field=\"name\" heading=\"Name\"></sky-grid-column>\n <sky-grid-column field=\"email\" heading=\"Email\"></sky-grid-column>\n <sky-grid-column field=\"amount\" heading=\"Amount\"></sky-grid-column>\n <sky-grid-column field=\"status\" heading=\"Status\"></sky-grid-column>\n</sky-grid>\n\n<p>Selected rows (name property):</p>\n<p>\n {{ selectedRows }}\n</p>\n"
|
|
4400
|
-
},
|
|
4401
|
-
{
|
|
4402
|
-
"fileName": "grid-demo.component.ts",
|
|
4403
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/multiselect/grid-demo.component.ts",
|
|
4404
|
-
"rawContents": "import { ChangeDetectorRef, Component } from '@angular/core';\nimport { SkyGridSelectedRowsModelChange } from '@skyux/grids';\nimport { ListSortFieldSelectorModel } from '@skyux/list-builder-common';\n\n@Component({\n selector: 'app-grid-demo',\n templateUrl: './grid-demo.component.html',\n})\nexport class GridDemoComponent {\n public data: any[] = [\n {\n id: '1',\n name: 'Niels Bohr',\n email: 'niels.bohr@example.com',\n amount: 170.75,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Ada Lovelace',\n email: 'ada.lovelace@example.com',\n amount: 114.13,\n status: 'Paid',\n },\n {\n id: '3',\n name: 'Marie Curie',\n email: 'marie.curie@example.com',\n amount: 111,\n status: 'Past due',\n },\n {\n id: '4',\n name: 'Barbara McClintock',\n email: 'barbara.mcclintock@example.com',\n amount: 84.63,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Michael Faraday',\n email: 'michael.faraday@example.com',\n amount: 83.97,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Enrico Fermi',\n email: 'enrico.fermi@example.com',\n amount: 74.5,\n status: 'Past due',\n },\n {\n id: '7',\n name: 'Mae C. Jemison',\n email: 'mae.jemison@example.com',\n amount: 70.86,\n status: 'Paid',\n },\n ];\n\n public selectedRows: string;\n public selectedRowIds: string[];\n\n constructor(private changeDetector: ChangeDetectorRef) {}\n\n public onMultiselectSelectionChange(\n value: SkyGridSelectedRowsModelChange\n ): void {\n this.selectedRowIds = value.selectedRowIds.slice().sort();\n this.selectedRows = this.data\n .reduce((newArray, item) => {\n if (value.selectedRowIds.indexOf(item.id) > -1) {\n newArray.push(item.name);\n }\n return newArray;\n }, [])\n .sort();\n this.changeDetector.markForCheck();\n }\n\n public onSortChangeForGrid(activeSort: ListSortFieldSelectorModel): void {\n this.data = this.sortGridData(activeSort, this.data);\n this.changeDetector.markForCheck();\n }\n\n private sortGridData(\n activeSort: ListSortFieldSelectorModel,\n data: any[]\n ): any[] {\n const sortField = activeSort.fieldSelector;\n const descending = activeSort.descending;\n\n return data\n .sort((a: any, b: any) => {\n let value1 = a[sortField];\n let value2 = b[sortField];\n\n if (value1 && typeof value1 === 'string') {\n value1 = value1.toLowerCase();\n }\n\n if (value2 && typeof value2 === 'string') {\n value2 = value2.toLowerCase();\n }\n\n if (value1 === value2) {\n return 0;\n }\n\n let result = value1 > value2 ? 1 : -1;\n\n if (descending) {\n result *= -1;\n }\n\n return result;\n })\n .slice();\n }\n}\n"
|
|
4405
|
-
},
|
|
4406
|
-
{
|
|
4407
|
-
"fileName": "grid-demo.module.ts",
|
|
4408
|
-
"filePath": "/projects/grids/documentation/code-examples/grid/multiselect/grid-demo.module.ts",
|
|
4409
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyGridModule } from '@skyux/grids';\n\nimport { GridDemoComponent } from './grid-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyGridModule],\n declarations: [GridDemoComponent],\n exports: [GridDemoComponent],\n})\nexport class GridDemoModule {}\n"
|
|
4410
|
-
}
|
|
4411
|
-
]
|
|
4365
|
+
"codeExamples": []
|
|
4412
4366
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/grids",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"@angular/common": "^14.2.11",
|
|
36
36
|
"@angular/core": "^14.2.11",
|
|
37
37
|
"@angular/forms": "^14.2.11",
|
|
38
|
-
"@skyux/core": "7.
|
|
39
|
-
"@skyux/forms": "7.
|
|
40
|
-
"@skyux/i18n": "7.
|
|
41
|
-
"@skyux/indicators": "7.
|
|
42
|
-
"@skyux/layout": "7.
|
|
43
|
-
"@skyux/list-builder-common": "7.
|
|
44
|
-
"@skyux/popovers": "7.
|
|
38
|
+
"@skyux/core": "7.1.0",
|
|
39
|
+
"@skyux/forms": "7.1.0",
|
|
40
|
+
"@skyux/i18n": "7.1.0",
|
|
41
|
+
"@skyux/indicators": "7.1.0",
|
|
42
|
+
"@skyux/layout": "7.1.0",
|
|
43
|
+
"@skyux/list-builder-common": "7.1.0",
|
|
44
|
+
"@skyux/popovers": "7.1.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"dragula": "3.7.3",
|