@vaadin/grid-pro 25.3.0-dev.1fa5a51482 → 25.3.0-rc1
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/custom-elements.json +3 -3
- package/package.json +14 -14
- package/src/styles/vaadin-grid-pro-base-styles.js +1 -4
- package/src/vaadin-grid-pro-inline-editing-mixin.js +1 -1
- package/src/vaadin-grid-pro.d.ts +28 -0
- package/src/vaadin-grid-pro.js +29 -1
- package/web-types.json +4 -4
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -445,7 +445,7 @@
|
|
|
445
445
|
"type": {
|
|
446
446
|
"text": "string"
|
|
447
447
|
},
|
|
448
|
-
"description": "Aligns the columns cell content horizontally
|
|
448
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
449
449
|
"attribute": "text-align",
|
|
450
450
|
"inheritedFrom": {
|
|
451
451
|
"name": "GridColumn",
|
|
@@ -702,7 +702,7 @@
|
|
|
702
702
|
"type": {
|
|
703
703
|
"text": "string"
|
|
704
704
|
},
|
|
705
|
-
"description": "Aligns the columns cell content horizontally
|
|
705
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
706
706
|
"fieldName": "textAlign",
|
|
707
707
|
"inheritedFrom": {
|
|
708
708
|
"name": "GridColumn",
|
|
@@ -890,7 +890,7 @@
|
|
|
890
890
|
"declarations": [
|
|
891
891
|
{
|
|
892
892
|
"kind": "class",
|
|
893
|
-
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).",
|
|
893
|
+
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-pro-editable-cell-background-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
894
894
|
"name": "GridPro",
|
|
895
895
|
"members": [
|
|
896
896
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/grid-pro",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-rc1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
41
|
-
"@vaadin/checkbox": "25.3.0-
|
|
42
|
-
"@vaadin/component-base": "25.3.0-
|
|
43
|
-
"@vaadin/grid": "25.3.0-
|
|
44
|
-
"@vaadin/lit-renderer": "25.3.0-
|
|
45
|
-
"@vaadin/select": "25.3.0-
|
|
46
|
-
"@vaadin/text-field": "25.3.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-rc1",
|
|
41
|
+
"@vaadin/checkbox": "25.3.0-rc1",
|
|
42
|
+
"@vaadin/component-base": "25.3.0-rc1",
|
|
43
|
+
"@vaadin/grid": "25.3.0-rc1",
|
|
44
|
+
"@vaadin/lit-renderer": "25.3.0-rc1",
|
|
45
|
+
"@vaadin/select": "25.3.0-rc1",
|
|
46
|
+
"@vaadin/text-field": "25.3.0-rc1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.3.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
51
|
+
"@vaadin/aura": "25.3.0-rc1",
|
|
52
|
+
"@vaadin/chai-plugins": "25.3.0-rc1",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.3.0-rc1",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
|
|
56
56
|
"sinon": "^22.0.0"
|
|
57
57
|
},
|
|
58
58
|
"cvdlName": "vaadin-grid-pro",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
|
|
65
65
|
}
|
|
@@ -10,9 +10,8 @@
|
|
|
10
10
|
*/
|
|
11
11
|
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
|
-
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
|
|
14
13
|
|
|
15
|
-
const
|
|
14
|
+
export const gridProStyles = css`
|
|
16
15
|
[part~='body-cell'] {
|
|
17
16
|
--_highlight-color: color-mix(in srgb, currentColor 5%, transparent);
|
|
18
17
|
--_highlight-color2: color-mix(in srgb, currentColor 10%, transparent);
|
|
@@ -112,5 +111,3 @@ const gridPro = css`
|
|
|
112
111
|
pointer-events: none;
|
|
113
112
|
}
|
|
114
113
|
`;
|
|
115
|
-
|
|
116
|
-
export const gridProStyles = [gridPro, gridStyles];
|
|
@@ -513,7 +513,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
513
513
|
}
|
|
514
514
|
// Stop looking if the next cell is editable
|
|
515
515
|
const nextRow = this._getRowByIndex(nextIndex);
|
|
516
|
-
// eslint-disable-next-line
|
|
516
|
+
// eslint-disable-next-line no-loop-func
|
|
517
517
|
nextCell = nextRow && Array.from(nextRow.__cells).find((cell) => cell._column === nextColumn);
|
|
518
518
|
if (nextCell && this._isCellEditable(nextCell)) {
|
|
519
519
|
break;
|
package/src/vaadin-grid-pro.d.ts
CHANGED
|
@@ -60,6 +60,34 @@ export interface GridProEventMap<TItem>
|
|
|
60
60
|
* - `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).
|
|
61
61
|
* - `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).
|
|
62
62
|
*
|
|
63
|
+
* ### Styling
|
|
64
|
+
*
|
|
65
|
+
* The following custom CSS properties are available for styling:
|
|
66
|
+
*
|
|
67
|
+
* Custom CSS property |
|
|
68
|
+
* :------------------------------------------------------|
|
|
69
|
+
* | `--vaadin-grid-background` |
|
|
70
|
+
* | `--vaadin-grid-border-color` |
|
|
71
|
+
* | `--vaadin-grid-border-radius` |
|
|
72
|
+
* | `--vaadin-grid-border-width` |
|
|
73
|
+
* | `--vaadin-grid-cell-background-color` |
|
|
74
|
+
* | `--vaadin-grid-cell-padding` |
|
|
75
|
+
* | `--vaadin-grid-cell-text-overflow` |
|
|
76
|
+
* | `--vaadin-grid-column-border-width` |
|
|
77
|
+
* | `--vaadin-grid-column-resize-handle-color` |
|
|
78
|
+
* | `--vaadin-grid-header-font-size` |
|
|
79
|
+
* | `--vaadin-grid-header-font-weight` |
|
|
80
|
+
* | `--vaadin-grid-header-text-color` |
|
|
81
|
+
* | `--vaadin-grid-pro-editable-cell-background-color` |
|
|
82
|
+
* | `--vaadin-grid-row-background-color` |
|
|
83
|
+
* | `--vaadin-grid-row-border-width` |
|
|
84
|
+
* | `--vaadin-grid-row-highlight-background-color` |
|
|
85
|
+
* | `--vaadin-grid-row-hover-background-color` |
|
|
86
|
+
* | `--vaadin-grid-row-odd-background-color` |
|
|
87
|
+
* | `--vaadin-grid-row-selected-background-color` |
|
|
88
|
+
*
|
|
89
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
90
|
+
*
|
|
63
91
|
* @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
|
|
64
92
|
* @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
|
|
65
93
|
* @fires {CustomEvent} cell-edit-started - Fired when the user starts editing a grid cell.
|
package/src/vaadin-grid-pro.js
CHANGED
|
@@ -32,6 +32,34 @@ import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
|
|
|
32
32
|
* - `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).
|
|
33
33
|
* - `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).
|
|
34
34
|
*
|
|
35
|
+
* ### Styling
|
|
36
|
+
*
|
|
37
|
+
* The following custom CSS properties are available for styling:
|
|
38
|
+
*
|
|
39
|
+
* Custom CSS property |
|
|
40
|
+
* :------------------------------------------------------|
|
|
41
|
+
* | `--vaadin-grid-background` |
|
|
42
|
+
* | `--vaadin-grid-border-color` |
|
|
43
|
+
* | `--vaadin-grid-border-radius` |
|
|
44
|
+
* | `--vaadin-grid-border-width` |
|
|
45
|
+
* | `--vaadin-grid-cell-background-color` |
|
|
46
|
+
* | `--vaadin-grid-cell-padding` |
|
|
47
|
+
* | `--vaadin-grid-cell-text-overflow` |
|
|
48
|
+
* | `--vaadin-grid-column-border-width` |
|
|
49
|
+
* | `--vaadin-grid-column-resize-handle-color` |
|
|
50
|
+
* | `--vaadin-grid-header-font-size` |
|
|
51
|
+
* | `--vaadin-grid-header-font-weight` |
|
|
52
|
+
* | `--vaadin-grid-header-text-color` |
|
|
53
|
+
* | `--vaadin-grid-pro-editable-cell-background-color` |
|
|
54
|
+
* | `--vaadin-grid-row-background-color` |
|
|
55
|
+
* | `--vaadin-grid-row-border-width` |
|
|
56
|
+
* | `--vaadin-grid-row-highlight-background-color` |
|
|
57
|
+
* | `--vaadin-grid-row-hover-background-color` |
|
|
58
|
+
* | `--vaadin-grid-row-odd-background-color` |
|
|
59
|
+
* | `--vaadin-grid-row-selected-background-color` |
|
|
60
|
+
*
|
|
61
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
62
|
+
*
|
|
35
63
|
* @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
|
|
36
64
|
* @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
|
|
37
65
|
* @fires {CustomEvent} cell-edit-started - Fired when the user starts editing a grid cell.
|
|
@@ -58,7 +86,7 @@ class GridPro extends SlotStylesMixin(InlineEditingMixin(Grid)) {
|
|
|
58
86
|
}
|
|
59
87
|
|
|
60
88
|
static get styles() {
|
|
61
|
-
return gridProStyles;
|
|
89
|
+
return [gridProStyles, ...super.styles];
|
|
62
90
|
}
|
|
63
91
|
|
|
64
92
|
get slotStyles() {
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid-pro",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
},
|
|
130
130
|
{
|
|
131
131
|
"name": "text-align",
|
|
132
|
-
"description": "Aligns the columns cell content horizontally
|
|
132
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
133
133
|
"value": {
|
|
134
134
|
"type": [
|
|
135
135
|
"string"
|
|
@@ -329,7 +329,7 @@
|
|
|
329
329
|
},
|
|
330
330
|
{
|
|
331
331
|
"name": "textAlign",
|
|
332
|
-
"description": "Aligns the columns cell content horizontally
|
|
332
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
333
333
|
"value": {
|
|
334
334
|
"type": [
|
|
335
335
|
"string"
|
|
@@ -351,7 +351,7 @@
|
|
|
351
351
|
},
|
|
352
352
|
{
|
|
353
353
|
"name": "vaadin-grid-pro",
|
|
354
|
-
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
354
|
+
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-select).\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-pro-editable-cell-background-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
355
355
|
"attributes": [
|
|
356
356
|
{
|
|
357
357
|
"name": "accessible-name",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid-pro",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": ".textAlign",
|
|
157
|
-
"description": "Aligns the columns cell content horizontally
|
|
157
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
},
|
|
171
171
|
{
|
|
172
172
|
"name": "vaadin-grid-pro",
|
|
173
|
-
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
173
|
+
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-select).\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-pro-editable-cell-background-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
174
174
|
"extension": true,
|
|
175
175
|
"attributes": [
|
|
176
176
|
{
|