@vaadin/virtual-list 25.2.0-beta1 → 25.2.0-beta2
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
CHANGED
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"declarations": [
|
|
141
141
|
{
|
|
142
142
|
"kind": "class",
|
|
143
|
-
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property
|
|
143
|
+
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n`--vaadin-virtual-list-overflow-indicator-color` |\n`--vaadin-virtual-list-overflow-indicator-height` |\n`--vaadin-virtual-list-padding-block` |\n`--vaadin-virtual-list-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
144
144
|
"name": "VirtualList",
|
|
145
145
|
"members": [
|
|
146
146
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/virtual-list",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,23 +38,23 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
41
|
-
"@vaadin/component-base": "25.2.0-
|
|
42
|
-
"@vaadin/lit-renderer": "25.2.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
41
|
+
"@vaadin/component-base": "25.2.0-beta2",
|
|
42
|
+
"@vaadin/lit-renderer": "25.2.0-beta2",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-beta2",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.2.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
47
|
+
"@vaadin/aura": "25.2.0-beta2",
|
|
48
|
+
"@vaadin/chai-plugins": "25.2.0-beta2",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.2.0-beta2",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
52
|
-
"sinon": "^
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-beta2",
|
|
52
|
+
"sinon": "^22.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499"
|
|
60
60
|
}
|
|
@@ -20,7 +20,11 @@ export const virtualListStyles = css`
|
|
|
20
20
|
align-self: stretch;
|
|
21
21
|
box-sizing: border-box;
|
|
22
22
|
padding: 0;
|
|
23
|
-
--
|
|
23
|
+
--_overflow-indicator-height: var(--vaadin-virtual-list-overflow-indicator-height, 1px);
|
|
24
|
+
--_overflow-indicator-color: var(
|
|
25
|
+
--vaadin-virtual-list-overflow-indicator-color,
|
|
26
|
+
var(--vaadin-border-color-secondary)
|
|
27
|
+
);
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
:host([hidden]) {
|
|
@@ -45,16 +49,22 @@ export const virtualListStyles = css`
|
|
|
45
49
|
z-index: 9999;
|
|
46
50
|
pointer-events: none;
|
|
47
51
|
box-sizing: border-box;
|
|
48
|
-
height: var(--
|
|
49
|
-
background:
|
|
52
|
+
height: var(--_overflow-indicator-height);
|
|
53
|
+
background: linear-gradient(
|
|
54
|
+
var(--_overflow-indicator-dir, to bottom),
|
|
55
|
+
var(--_overflow-indicator-color),
|
|
56
|
+
var(--_overflow-indicator-color) 1px,
|
|
57
|
+
transparent
|
|
58
|
+
);
|
|
50
59
|
}
|
|
51
60
|
|
|
52
61
|
:host::before {
|
|
53
|
-
margin-bottom: calc(var(--vaadin-virtual-list-padding-block) - var(--
|
|
62
|
+
margin-bottom: calc(var(--vaadin-virtual-list-padding-block) - var(--_overflow-indicator-height));
|
|
54
63
|
}
|
|
55
64
|
|
|
56
65
|
:host::after {
|
|
57
|
-
margin-top: calc(var(--vaadin-virtual-list-padding-block) - var(--
|
|
66
|
+
margin-top: calc(var(--vaadin-virtual-list-padding-block) - var(--_overflow-indicator-height));
|
|
67
|
+
--_overflow-indicator-dir: to top;
|
|
58
68
|
}
|
|
59
69
|
|
|
60
70
|
:host([overflow~='top'])::before {
|
|
@@ -51,10 +51,12 @@ export { VirtualListDefaultItem, VirtualListItemModel, VirtualListRenderer };
|
|
|
51
51
|
*
|
|
52
52
|
* The following custom CSS properties are available for styling:
|
|
53
53
|
*
|
|
54
|
-
* Custom CSS property
|
|
55
|
-
*
|
|
56
|
-
* `--vaadin-virtual-list-
|
|
57
|
-
* `--vaadin-virtual-list-
|
|
54
|
+
* Custom CSS property |
|
|
55
|
+
* :--------------------------------------------------|
|
|
56
|
+
* `--vaadin-virtual-list-overflow-indicator-color` |
|
|
57
|
+
* `--vaadin-virtual-list-overflow-indicator-height` |
|
|
58
|
+
* `--vaadin-virtual-list-padding-block` |
|
|
59
|
+
* `--vaadin-virtual-list-padding-inline` |
|
|
58
60
|
*
|
|
59
61
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
60
62
|
*/
|
|
@@ -48,10 +48,12 @@ import { VirtualListMixin } from './vaadin-virtual-list-mixin.js';
|
|
|
48
48
|
*
|
|
49
49
|
* The following custom CSS properties are available for styling:
|
|
50
50
|
*
|
|
51
|
-
* Custom CSS property
|
|
52
|
-
*
|
|
53
|
-
* `--vaadin-virtual-list-
|
|
54
|
-
* `--vaadin-virtual-list-
|
|
51
|
+
* Custom CSS property |
|
|
52
|
+
* :--------------------------------------------------|
|
|
53
|
+
* `--vaadin-virtual-list-overflow-indicator-color` |
|
|
54
|
+
* `--vaadin-virtual-list-overflow-indicator-height` |
|
|
55
|
+
* `--vaadin-virtual-list-padding-block` |
|
|
56
|
+
* `--vaadin-virtual-list-padding-inline` |
|
|
55
57
|
*
|
|
56
58
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
57
59
|
*
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/virtual-list",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-virtual-list",
|
|
11
|
-
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property
|
|
11
|
+
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n`--vaadin-virtual-list-overflow-indicator-color` |\n`--vaadin-virtual-list-overflow-indicator-height` |\n`--vaadin-virtual-list-padding-block` |\n`--vaadin-virtual-list-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "theme",
|
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/virtual-list",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-virtual-list",
|
|
19
|
-
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property
|
|
19
|
+
"description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-virtual-list>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n`--vaadin-virtual-list-overflow-indicator-color` |\n`--vaadin-virtual-list-overflow-indicator-height` |\n`--vaadin-virtual-list-padding-block` |\n`--vaadin-virtual-list-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|