@vaadin/grid-pro 25.0.0-alpha9 → 25.0.0-beta1
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/package.json +13 -16
- package/src/styles/vaadin-grid-pro-base-styles.js +38 -23
- package/src/vaadin-grid-pro-inline-editing-mixin.js +0 -15
- package/src/vaadin-grid-pro.js +1 -1
- package/vaadin-grid-pro-edit-column.js +1 -1
- package/vaadin-grid-pro.js +1 -1
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
- package/src/styles/vaadin-grid-pro-core-styles.d.ts +0 -13
- package/src/styles/vaadin-grid-pro-core-styles.js +0 -13
- package/theme/lumo/vaadin-grid-pro-edit-checkbox.d.ts +0 -2
- package/theme/lumo/vaadin-grid-pro-edit-checkbox.js +0 -2
- package/theme/lumo/vaadin-grid-pro-edit-column.d.ts +0 -4
- package/theme/lumo/vaadin-grid-pro-edit-column.js +0 -4
- package/theme/lumo/vaadin-grid-pro-edit-select-styles.d.ts +0 -2
- package/theme/lumo/vaadin-grid-pro-edit-select-styles.js +0 -23
- package/theme/lumo/vaadin-grid-pro-edit-select.d.ts +0 -3
- package/theme/lumo/vaadin-grid-pro-edit-select.js +0 -3
- package/theme/lumo/vaadin-grid-pro-edit-text-field-styles.d.ts +0 -1
- package/theme/lumo/vaadin-grid-pro-edit-text-field-styles.js +0 -6
- package/theme/lumo/vaadin-grid-pro-edit-text-field.d.ts +0 -3
- package/theme/lumo/vaadin-grid-pro-edit-text-field.js +0 -3
- package/theme/lumo/vaadin-grid-pro-editor-styles.d.ts +0 -5
- package/theme/lumo/vaadin-grid-pro-editor-styles.js +0 -39
- package/theme/lumo/vaadin-grid-pro-styles.d.ts +0 -2
- package/theme/lumo/vaadin-grid-pro-styles.js +0 -87
- package/theme/lumo/vaadin-grid-pro.d.ts +0 -3
- package/theme/lumo/vaadin-grid-pro.js +0 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/grid-pro",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,9 +23,6 @@
|
|
|
23
23
|
"lit.d.ts",
|
|
24
24
|
"lit.js",
|
|
25
25
|
"src",
|
|
26
|
-
"!src/styles/*-base-styles.d.ts",
|
|
27
|
-
"!src/styles/*-base-styles.js",
|
|
28
|
-
"theme",
|
|
29
26
|
"vaadin-*.d.ts",
|
|
30
27
|
"vaadin-*.js",
|
|
31
28
|
"web-types.json",
|
|
@@ -39,26 +36,26 @@
|
|
|
39
36
|
],
|
|
40
37
|
"dependencies": {
|
|
41
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
42
|
-
"@vaadin/checkbox": "25.0.0-
|
|
43
|
-
"@vaadin/component-base": "25.0.0-
|
|
44
|
-
"@vaadin/grid": "25.0.0-
|
|
45
|
-
"@vaadin/lit-renderer": "25.0.0-
|
|
46
|
-
"@vaadin/select": "25.0.0-
|
|
47
|
-
"@vaadin/text-field": "25.0.0-
|
|
48
|
-
"@vaadin/vaadin-
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
39
|
+
"@vaadin/checkbox": "25.0.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "25.0.0-beta1",
|
|
41
|
+
"@vaadin/grid": "25.0.0-beta1",
|
|
42
|
+
"@vaadin/lit-renderer": "25.0.0-beta1",
|
|
43
|
+
"@vaadin/select": "25.0.0-beta1",
|
|
44
|
+
"@vaadin/text-field": "25.0.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
|
|
50
46
|
"lit": "^3.0.0"
|
|
51
47
|
},
|
|
52
48
|
"devDependencies": {
|
|
53
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
54
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
49
|
+
"@vaadin/chai-plugins": "25.0.0-beta1",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-beta1",
|
|
55
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
56
|
-
"
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
|
|
53
|
+
"sinon": "^21.0.0"
|
|
57
54
|
},
|
|
58
55
|
"cvdlName": "vaadin-grid-pro",
|
|
59
56
|
"web-types": [
|
|
60
57
|
"web-types.json",
|
|
61
58
|
"web-types.lit.json"
|
|
62
59
|
],
|
|
63
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
|
|
64
61
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
11
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
13
|
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
|
|
14
14
|
|
|
@@ -16,48 +16,57 @@ const gridPro = css`
|
|
|
16
16
|
[part~='body-cell'] {
|
|
17
17
|
--_highlight-color: color-mix(in srgb, currentColor 5%, transparent);
|
|
18
18
|
--_highlight-color2: color-mix(in srgb, currentColor 10%, transparent);
|
|
19
|
-
--_highlight-bg: linear-gradient(var(--_highlight-color), var(--_highlight-color));
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
[part~='editable-cell'] {
|
|
23
22
|
display: flex;
|
|
24
23
|
align-items: inherit;
|
|
25
24
|
align-self: stretch;
|
|
26
|
-
flex: 1;
|
|
25
|
+
flex-grow: 1;
|
|
27
26
|
min-width: 0;
|
|
28
27
|
cursor: var(--vaadin-clickable-cursor);
|
|
29
28
|
outline: 0;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
:
|
|
34
|
-
|
|
31
|
+
/* Show cell focus outline */
|
|
32
|
+
[part~='cell']:is([part~='editable-cell']:focus, :has([part~='editable-cell']:focus))::after {
|
|
33
|
+
content: '';
|
|
35
34
|
}
|
|
36
35
|
|
|
37
|
-
/*
|
|
36
|
+
/* On macOS the editable-cell part is a button inside the body cell. On other platforms the body cell is the editable-cell part. */
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
@media (any-hover: hover) {
|
|
39
|
+
[part~='body-cell']:is([part~='editable-cell'], :has([part~='editable-cell'])):hover {
|
|
40
|
+
--vaadin-grid-row-hover-background-color: var(--_highlight-color);
|
|
41
|
+
}
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
:host([
|
|
44
|
-
background:
|
|
45
|
-
var(--vaadin-grid-pro-editable-cell-background-hover, var(--_highlight-bg)),
|
|
46
|
-
var(--vaadin-grid-pro-editable-cell-background, var(--_highlight-bg));
|
|
44
|
+
:host([navigating]) [part~='body-cell']:is([part~='editable-cell']:focus, :has([part~='editable-cell']:focus)) {
|
|
45
|
+
--vaadin-grid-row-highlight-background-color: var(--_highlight-color);
|
|
47
46
|
}
|
|
48
47
|
|
|
49
|
-
/* Indicate
|
|
48
|
+
/* Indicate editable cells */
|
|
50
49
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
--vaadin-grid-
|
|
54
|
-
-
|
|
55
|
-
|
|
56
|
-
transparent 30%,
|
|
57
|
-
var(--_highlight-color2) 30%,
|
|
58
|
-
var(--_highlight-color2) 50%
|
|
50
|
+
:host([theme~='highlight-editable-cells'])
|
|
51
|
+
[part~='body-cell']:is([part~='editable-cell'], :has([part~='editable-cell'])) {
|
|
52
|
+
--vaadin-grid-row-highlight-background-color: var(
|
|
53
|
+
--vaadin-grid-pro-editable-cell-background-color,
|
|
54
|
+
var(--_highlight-color)
|
|
59
55
|
);
|
|
60
|
-
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Indicate read-only cells */
|
|
59
|
+
|
|
60
|
+
:host([theme~='highlight-read-only-cells'])
|
|
61
|
+
[part~='body-cell']:not([part~='editable-cell'], :has([part~='editable-cell'])) {
|
|
62
|
+
--_highlight-background-image: repeating-linear-gradient(
|
|
63
|
+
-45deg,
|
|
64
|
+
transparent,
|
|
65
|
+
transparent 30%,
|
|
66
|
+
var(--_highlight-color2) 30%,
|
|
67
|
+
var(--_highlight-color2) 50%
|
|
68
|
+
)
|
|
69
|
+
padding-box 0 0 / 6px 6px;
|
|
61
70
|
}
|
|
62
71
|
|
|
63
72
|
/* Loading editor cell styles are used by Flow GridPro */
|
|
@@ -96,6 +105,12 @@ const gridPro = css`
|
|
|
96
105
|
background-position: max(300%, 8em) 0;
|
|
97
106
|
}
|
|
98
107
|
}
|
|
108
|
+
|
|
109
|
+
:host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
|
|
110
|
+
[part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
|
|
111
|
+
opacity: 0;
|
|
112
|
+
pointer-events: none;
|
|
113
|
+
}
|
|
99
114
|
`;
|
|
100
115
|
|
|
101
116
|
export const gridProStyles = [gridPro, gridStyles];
|
|
@@ -12,21 +12,6 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
|
|
|
12
12
|
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
|
|
13
13
|
import { get, set } from '@vaadin/component-base/src/path-utils.js';
|
|
14
14
|
import { iterateRowCells, updatePart } from '@vaadin/grid/src/vaadin-grid-helpers.js';
|
|
15
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
16
|
-
|
|
17
|
-
registerStyles(
|
|
18
|
-
'vaadin-grid-pro',
|
|
19
|
-
css`
|
|
20
|
-
:host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
|
|
21
|
-
[part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
|
|
22
|
-
opacity: 0;
|
|
23
|
-
pointer-events: none;
|
|
24
|
-
}
|
|
25
|
-
`,
|
|
26
|
-
{
|
|
27
|
-
moduleId: 'vaadin-grid-pro-styles',
|
|
28
|
-
},
|
|
29
|
-
);
|
|
30
15
|
|
|
31
16
|
/**
|
|
32
17
|
* @polymerMixin
|
package/src/vaadin-grid-pro.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
12
12
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
13
13
|
import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
|
|
14
|
-
import { gridProStyles } from './styles/vaadin-grid-pro-
|
|
14
|
+
import { gridProStyles } from './styles/vaadin-grid-pro-base-styles.js';
|
|
15
15
|
import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
|
|
16
16
|
|
|
17
17
|
/**
|
package/vaadin-grid-pro.js
CHANGED
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.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
},
|
|
313
313
|
{
|
|
314
314
|
"name": "renderer",
|
|
315
|
-
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.",
|
|
315
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
316
316
|
"value": {
|
|
317
317
|
"type": [
|
|
318
318
|
"GridBodyRenderer",
|
|
@@ -401,7 +401,7 @@
|
|
|
401
401
|
},
|
|
402
402
|
{
|
|
403
403
|
"name": "vaadin-grid-pro",
|
|
404
|
-
"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.0.0-
|
|
404
|
+
"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.0.0-beta1/#/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.0.0-beta1/#/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.0.0-beta1/#/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.0.0-beta1/#/elements/vaadin-select).",
|
|
405
405
|
"attributes": [
|
|
406
406
|
{
|
|
407
407
|
"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.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
121
|
"name": ".renderer",
|
|
122
|
-
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.",
|
|
122
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "vaadin-grid-pro",
|
|
180
|
-
"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.0.0-
|
|
180
|
+
"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.0.0-beta1/#/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.0.0-beta1/#/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.0.0-beta1/#/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.0.0-beta1/#/elements/vaadin-select).",
|
|
181
181
|
"extension": true,
|
|
182
182
|
"attributes": [
|
|
183
183
|
{
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import type { CSSResult } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const gridProStyles: CSSResult;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-core-styles.js';
|
|
12
|
-
|
|
13
|
-
export const gridProStyles = gridStyles;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
3
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
-
import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
|
|
5
|
-
|
|
6
|
-
const gridProEditSelect = css`
|
|
7
|
-
:host([theme~='grid-pro-editor']) [part='toggle-button'] {
|
|
8
|
-
margin-right: var(--lumo-space-xs);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
:host([theme~='grid-pro-editor']) [part='input-field'] ::slotted([slot='value']) {
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
padding: 0 var(--lumo-space-m);
|
|
14
|
-
font-size: var(--lumo-font-size-m);
|
|
15
|
-
/* prevent selection on editor focus */
|
|
16
|
-
-webkit-user-select: none;
|
|
17
|
-
user-select: none;
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
|
|
21
|
-
registerStyles('vaadin-grid-pro-edit-select', [gridProEditor, gridProEditSelect], {
|
|
22
|
-
moduleId: 'lumo-grid-pro-edit-select',
|
|
23
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
2
|
-
import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
|
|
3
|
-
|
|
4
|
-
registerStyles('vaadin-grid-pro-edit-text-field', gridProEditor, {
|
|
5
|
-
moduleId: 'lumo-grid-pro-edit-text-field',
|
|
6
|
-
});
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
4
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
5
|
-
|
|
6
|
-
const gridProEditor = css`
|
|
7
|
-
:host([theme~='grid-pro-editor']) {
|
|
8
|
-
position: absolute;
|
|
9
|
-
inset: 0;
|
|
10
|
-
padding: 0;
|
|
11
|
-
will-change: transform;
|
|
12
|
-
font-size: inherit;
|
|
13
|
-
--lumo-text-field-size: 27px;
|
|
14
|
-
/* outline similar to what grid uses */
|
|
15
|
-
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:host([theme~='grid-pro-editor']) [part='input-field'] {
|
|
19
|
-
padding: 0;
|
|
20
|
-
border-radius: 0;
|
|
21
|
-
flex-grow: 1;
|
|
22
|
-
font-weight: 400;
|
|
23
|
-
--vaadin-input-field-border-color: transparent;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* reset outline inherited from text-field */
|
|
27
|
-
:host([theme~='grid-pro-editor'][focus-ring]) [part='input-field'] {
|
|
28
|
-
box-shadow: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([theme~='grid-pro-editor']) ::slotted(input) {
|
|
32
|
-
padding: 0 var(--lumo-space-m);
|
|
33
|
-
font-size: inherit;
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
|
|
37
|
-
registerStyles('', gridProEditor, { moduleId: 'lumo-grid-pro-editor' });
|
|
38
|
-
|
|
39
|
-
export { gridProEditor };
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
3
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
-
|
|
5
|
-
registerStyles(
|
|
6
|
-
'vaadin-grid-pro',
|
|
7
|
-
css`
|
|
8
|
-
:host([navigating]) [part~='cell']:active::before {
|
|
9
|
-
content: '';
|
|
10
|
-
position: absolute;
|
|
11
|
-
inset: 0;
|
|
12
|
-
pointer-events: none;
|
|
13
|
-
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
[part~='editable-cell'],
|
|
17
|
-
[part~='editable-cell'] ::slotted(vaadin-grid-cell-content) {
|
|
18
|
-
cursor: var(--lumo-clickable-cursor);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
[part~='editable-cell']:hover,
|
|
22
|
-
[part~='editable-cell']:focus {
|
|
23
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* Indicate editable cells */
|
|
27
|
-
|
|
28
|
-
:host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
|
|
29
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host([theme~='highlight-editable-cells']) [part~='editable-cell']:hover,
|
|
33
|
-
:host([theme~='highlight-editable-cells']) [part~='editable-cell']:focus {
|
|
34
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Indicate read-only cells */
|
|
38
|
-
|
|
39
|
-
/* prettier-ignore */
|
|
40
|
-
:host([theme~='highlight-read-only-cells']) [tabindex]:not([part~='editable-cell']):not([part~='header-cell']):not([part~='footer-cell']) {
|
|
41
|
-
background-image: repeating-linear-gradient(
|
|
42
|
-
135deg,
|
|
43
|
-
transparent,
|
|
44
|
-
transparent 6px,
|
|
45
|
-
var(--lumo-contrast-5pct) 6px,
|
|
46
|
-
var(--lumo-contrast-5pct) 14px
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* Loading editor cell styles are used by Flow GridPro */
|
|
51
|
-
:host([loading-editor]) [part~='focused-cell']::before {
|
|
52
|
-
content: '';
|
|
53
|
-
position: absolute;
|
|
54
|
-
inset: 0;
|
|
55
|
-
pointer-events: none;
|
|
56
|
-
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
57
|
-
animation: vaadin-grid-pro-loading-editor 1.4s infinite;
|
|
58
|
-
opacity: 0;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@keyframes vaadin-grid-pro-loading-editor {
|
|
62
|
-
50% {
|
|
63
|
-
opacity: 1;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[part~='updating-cell']::after {
|
|
68
|
-
content: '';
|
|
69
|
-
position: absolute;
|
|
70
|
-
inset: var(--_cell-padding);
|
|
71
|
-
margin: var(--_focus-ring-width);
|
|
72
|
-
border-radius: 4px;
|
|
73
|
-
background-size: max(4em, 50%);
|
|
74
|
-
background-repeat: no-repeat;
|
|
75
|
-
background-position: min(-200%, -4em) 0;
|
|
76
|
-
background-image: linear-gradient(90deg, transparent, var(--lumo-contrast-10pct), transparent);
|
|
77
|
-
animation: vaadin-grid-pro-updating-cell 1.3s ease-out infinite;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
@keyframes vaadin-grid-pro-updating-cell {
|
|
81
|
-
100% {
|
|
82
|
-
background-position: max(300%, 8em) 0;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
`,
|
|
86
|
-
{ moduleId: 'lumo-grid-pro' },
|
|
87
|
-
);
|