@vaadin/virtual-list 25.0.0-beta2 → 25.0.0-beta4

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.
Files changed (6) hide show
  1. package/package.json +8 -8
  2. package/src/styles/vaadin-virtual-list-base-styles.js +40 -16
  3. package/src/vaadin-virtual-list.d.ts +22 -1
  4. package/src/vaadin-virtual-list.js +22 -1
  5. package/web-types.json +2 -2
  6. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/virtual-list",
3
- "version": "25.0.0-beta2",
3
+ "version": "25.0.0-beta4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,21 +37,21 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/component-base": "25.0.0-beta2",
41
- "@vaadin/lit-renderer": "25.0.0-beta2",
42
- "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
40
+ "@vaadin/component-base": "25.0.0-beta4",
41
+ "@vaadin/lit-renderer": "25.0.0-beta4",
42
+ "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/chai-plugins": "25.0.0-beta2",
47
- "@vaadin/test-runner-commands": "25.0.0-beta2",
46
+ "@vaadin/chai-plugins": "25.0.0-beta4",
47
+ "@vaadin/test-runner-commands": "25.0.0-beta4",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
49
+ "@vaadin/vaadin-lumo-styles": "25.0.0-beta4",
50
50
  "sinon": "^21.0.0"
51
51
  },
52
52
  "web-types": [
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
56
+ "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
57
57
  }
package/src/styles/vaadin-virtual-list-base-styles.js CHANGED
@@ -8,11 +8,19 @@ import { css } from 'lit';
8
8
 
9
9
  export const virtualListStyles = css`
10
10
  :host {
11
+ /* Don't let these properties inherit */
12
+ --vaadin-virtual-list-padding-block: 0px;
13
+ --vaadin-virtual-list-padding-inline: 0px;
14
+ --vaadin-virtual-list-overflow-indicator-top-opacity: 0;
15
+ --vaadin-virtual-list-overflow-indicator-bottom-opacity: 0;
11
16
  display: block;
12
17
  height: 400px;
13
18
  overflow: auto;
14
- flex: auto;
19
+ flex: 1;
15
20
  align-self: stretch;
21
+ box-sizing: border-box;
22
+ padding: 0;
23
+ --_indicator-height: var(--vaadin-virtual-list-overflow-indicator-height, 1px);
16
24
  }
17
25
 
18
26
  :host([hidden]) {
@@ -20,34 +28,50 @@ export const virtualListStyles = css`
20
28
  }
21
29
 
22
30
  :host(:not([grid])) #items > ::slotted(*) {
23
- width: 100%;
31
+ inset-inline: var(--vaadin-virtual-list-padding-inline);
24
32
  }
25
33
 
26
34
  #items {
27
35
  position: relative;
28
36
  }
29
37
 
30
- :host([theme*='overflow-indicator'])::before,
31
- :host([theme*='overflow-indicator'])::after {
38
+ :host::before,
39
+ :host::after {
32
40
  content: '';
33
- display: none;
41
+ display: block;
42
+ opacity: 0;
34
43
  position: sticky;
35
44
  inset: 0;
36
45
  z-index: 9999;
37
- height: 1px;
38
- margin-bottom: -1px;
39
- background: var(--vaadin-virtual-list-border-color, var(--vaadin-border-color-secondary));
46
+ pointer-events: none;
47
+ box-sizing: border-box;
48
+ height: var(--_indicator-height);
49
+ background: var(--vaadin-border-color-secondary);
40
50
  }
41
51
 
42
- :host([theme*='overflow-indicator'])::after {
43
- margin-bottom: 0;
44
- margin-top: -1px;
52
+ :host::before {
53
+ margin-bottom: calc(var(--vaadin-virtual-list-padding-block) - var(--_indicator-height));
45
54
  }
46
55
 
47
- :host([theme~='overflow-indicator-top'][overflow~='top'])::before,
48
- :host([theme~='overflow-indicators'][overflow~='top'])::before,
49
- :host([theme~='overflow-indicators'][overflow~='bottom'])::after,
50
- :host([theme~='overflow-indicator-bottom'][overflow~='bottom'])::after {
51
- display: block;
56
+ :host::after {
57
+ margin-top: calc(var(--vaadin-virtual-list-padding-block) - var(--_indicator-height));
58
+ }
59
+
60
+ :host([overflow~='top'])::before {
61
+ opacity: var(--vaadin-virtual-list-overflow-indicator-top-opacity);
62
+ }
63
+
64
+ :host([overflow~='bottom'])::after {
65
+ opacity: var(--vaadin-virtual-list-overflow-indicator-bottom-opacity);
66
+ }
67
+
68
+ :host([theme~='overflow-indicator-top'][overflow~='top']),
69
+ :host([theme~='overflow-indicators'][overflow~='top']) {
70
+ --vaadin-virtual-list-overflow-indicator-top-opacity: 1;
71
+ }
72
+
73
+ :host([theme~='overflow-indicators'][overflow~='bottom']),
74
+ :host([theme~='overflow-indicator-bottom'][overflow~='bottom']) {
75
+ --vaadin-virtual-list-overflow-indicator-bottom-opacity: 1;
52
76
  }
53
77
  `;
package/src/vaadin-virtual-list.d.ts CHANGED
@@ -29,13 +29,34 @@ export { VirtualListDefaultItem, VirtualListItemModel, VirtualListRenderer };
29
29
  * }
30
30
  * ```
31
31
  *
32
+ * ### Styling
33
+ *
32
34
  * The following state attributes are available for styling:
33
35
  *
34
36
  * Attribute | Description
35
37
  * -----------------|--------------------------------------------
36
38
  * `overflow` | Set to `top`, `bottom`, both, or none.
37
39
  *
38
- * See [Virtual List](https://vaadin.com/docs/latest/components/virtual-list) documentation.
40
+ * ### Built-in Theme Variants
41
+ *
42
+ * `<vaadin-virtual-list>` supports the following theme variants:
43
+ *
44
+ * Theme variant | Description
45
+ * -----------------------------------------|---------------
46
+ * `theme="overflow-indicators"` | Shows visual indicators at the top and bottom when the content is scrolled
47
+ * `theme="overflow-indicator-top"` | Shows the visual indicator at the top when the content is scrolled
48
+ * `theme="overflow-indicator-top-bottom"` | Shows the visual indicator at the bottom when the content is scrolled
49
+ *
50
+ * ### Custom CSS Properties
51
+ *
52
+ * The following custom CSS properties are available for styling:
53
+ *
54
+ * Custom CSS property | Description
55
+ * ---------------------------------------|-------------
56
+ * `--vaadin-virtual-list-padding-block` | The CSS padding applied to top and bottom edges
57
+ * `--vaadin-virtual-list-padding-inline` | The CSS padding applied to left and right edges
58
+ *
59
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
39
60
  */
40
61
  declare class VirtualList<TItem = VirtualListDefaultItem> extends ThemableMixin(ElementMixin(HTMLElement)) {}
41
62
 
package/src/vaadin-virtual-list.js CHANGED
@@ -26,13 +26,34 @@ import { VirtualListMixin } from './vaadin-virtual-list-mixin.js';
26
26
  * }
27
27
  * ```
28
28
  *
29
+ * ### Styling
30
+ *
29
31
  * The following state attributes are available for styling:
30
32
  *
31
33
  * Attribute | Description
32
34
  * -----------------|--------------------------------------------
33
35
  * `overflow` | Set to `top`, `bottom`, both, or none.
34
36
  *
35
- * See [Virtual List](https://vaadin.com/docs/latest/components/virtual-list) documentation.
37
+ * ### Built-in Theme Variants
38
+ *
39
+ * `<vaadin-virtual-list>` supports the following theme variants:
40
+ *
41
+ * Theme variant | Description
42
+ * -----------------------------------------|---------------
43
+ * `theme="overflow-indicators"` | Shows visual indicators at the top and bottom when the content is scrolled
44
+ * `theme="overflow-indicator-top"` | Shows the visual indicator at the top when the content is scrolled
45
+ * `theme="overflow-indicator-top-bottom"` | Shows the visual indicator at the bottom when the content is scrolled
46
+ *
47
+ * ### Custom CSS Properties
48
+ *
49
+ * The following custom CSS properties are available for styling:
50
+ *
51
+ * Custom CSS property | Description
52
+ * ---------------------------------------|-------------
53
+ * `--vaadin-virtual-list-padding-block` | The CSS padding applied to top and bottom edges
54
+ * `--vaadin-virtual-list-padding-inline` | The CSS padding applied to left and right edges
55
+ *
56
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
36
57
  *
37
58
  * @customElement
38
59
  * @extends HTMLElement
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.0.0-beta2",
4
+ "version": "25.0.0-beta4",
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\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\nSee [Virtual List](https://vaadin.com/docs/latest/components/virtual-list) documentation.",
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 | Description\n---------------------------------------|-------------\n`--vaadin-virtual-list-padding-block` | The CSS padding applied to top and bottom edges\n`--vaadin-virtual-list-padding-inline` | The CSS padding applied to left and right edges\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.0.0-beta2",
4
+ "version": "25.0.0-beta4",
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\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\nSee [Virtual List](https://vaadin.com/docs/latest/components/virtual-list) documentation.",
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 | Description\n---------------------------------------|-------------\n`--vaadin-virtual-list-padding-block` | The CSS padding applied to top and bottom edges\n`--vaadin-virtual-list-padding-inline` | The CSS padding applied to left and right edges\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {