@vaadin/scroller 25.2.0-alpha9 → 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
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"declarations": [
|
|
78
78
|
{
|
|
79
79
|
"kind": "class",
|
|
80
|
-
"description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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
|
|
80
|
+
"description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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-scroller-overflow-indicator-color` |\n`--vaadin-scroller-overflow-indicator-height` |\n`--vaadin-scroller-padding-block` |\n`--vaadin-scroller-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
81
81
|
"name": "Scroller",
|
|
82
82
|
"members": [
|
|
83
83
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/scroller",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
39
|
-
"@vaadin/component-base": "25.2.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-beta2",
|
|
39
|
+
"@vaadin/component-base": "25.2.0-beta2",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-beta2",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.2.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
44
|
+
"@vaadin/aura": "25.2.0-beta2",
|
|
45
|
+
"@vaadin/chai-plugins": "25.2.0-beta2",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.2.0-beta2",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-beta2"
|
|
49
49
|
},
|
|
50
50
|
"customElements": "custom-elements.json",
|
|
51
51
|
"web-types": [
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499"
|
|
56
56
|
}
|
|
@@ -8,17 +8,19 @@ import { css } from 'lit';
|
|
|
8
8
|
|
|
9
9
|
export const scrollerStyles = css`
|
|
10
10
|
:host {
|
|
11
|
-
--
|
|
11
|
+
--_overflow-indicator-height: var(--vaadin-scroller-overflow-indicator-height, 1px);
|
|
12
|
+
--_overflow-indicator-color: var(--vaadin-scroller-overflow-indicator-color, var(--vaadin-border-color-secondary));
|
|
12
13
|
/* Don't let these properties inherit */
|
|
13
14
|
--vaadin-scroller-padding-block: 0px;
|
|
14
15
|
--vaadin-scroller-padding-inline: 0px;
|
|
15
16
|
--vaadin-scroller-overflow-indicator-top-opacity: 0;
|
|
16
17
|
--vaadin-scroller-overflow-indicator-bottom-opacity: 0;
|
|
17
18
|
display: block;
|
|
18
|
-
overflow: auto;
|
|
19
|
+
overflow: auto !important;
|
|
19
20
|
outline: none;
|
|
20
21
|
box-sizing: border-box;
|
|
21
22
|
padding: var(--vaadin-scroller-padding-block) var(--vaadin-scroller-padding-inline);
|
|
23
|
+
contain: paint;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
:host([focus-ring]) {
|
|
@@ -30,15 +32,15 @@ export const scrollerStyles = css`
|
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
:host([scroll-direction='vertical']) {
|
|
33
|
-
overflow-x: hidden;
|
|
35
|
+
overflow-x: hidden !important;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
:host([scroll-direction='horizontal']) {
|
|
37
|
-
overflow-y: hidden;
|
|
39
|
+
overflow-y: hidden !important;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
:host([scroll-direction='none']) {
|
|
41
|
-
overflow: hidden;
|
|
43
|
+
overflow: hidden !important;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
:host::before,
|
|
@@ -51,21 +53,27 @@ export const scrollerStyles = css`
|
|
|
51
53
|
z-index: 9999;
|
|
52
54
|
pointer-events: none;
|
|
53
55
|
box-sizing: border-box;
|
|
54
|
-
height: var(--
|
|
56
|
+
height: var(--_overflow-indicator-height);
|
|
55
57
|
margin-inline: calc(var(--vaadin-scroller-padding-inline) * -1);
|
|
56
|
-
background:
|
|
58
|
+
background: linear-gradient(
|
|
59
|
+
var(--_overflow-indicator-dir, to bottom),
|
|
60
|
+
var(--_overflow-indicator-color),
|
|
61
|
+
var(--_overflow-indicator-color) 1px,
|
|
62
|
+
transparent
|
|
63
|
+
);
|
|
57
64
|
}
|
|
58
65
|
|
|
59
66
|
:host::before {
|
|
60
67
|
top: 0;
|
|
61
|
-
margin-bottom: calc(var(--
|
|
68
|
+
margin-bottom: calc(var(--_overflow-indicator-height) * -1);
|
|
62
69
|
translate: 0 calc(var(--vaadin-scroller-padding-block) * -1);
|
|
63
70
|
}
|
|
64
71
|
|
|
65
72
|
:host::after {
|
|
66
73
|
bottom: 0;
|
|
67
|
-
margin-top: calc(var(--
|
|
74
|
+
margin-top: calc(var(--_overflow-indicator-height) * -1);
|
|
68
75
|
translate: 0 calc(var(--vaadin-scroller-padding-block) * 1);
|
|
76
|
+
--_overflow-indicator-dir: to top;
|
|
69
77
|
}
|
|
70
78
|
|
|
71
79
|
:host([overflow~='top'])::before {
|
|
@@ -5,10 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
7
7
|
|
|
8
|
-
/**
|
|
9
|
-
* @polymerMixin
|
|
10
|
-
* @mixes FocusMixin
|
|
11
|
-
*/
|
|
12
8
|
export const ScrollerMixin = (superClass) =>
|
|
13
9
|
class ScrollerMixinClass extends FocusMixin(superClass) {
|
|
14
10
|
static get properties() {
|
package/src/vaadin-scroller.d.ts
CHANGED
|
@@ -40,10 +40,12 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
|
|
|
40
40
|
*
|
|
41
41
|
* The following custom CSS properties are available for styling:
|
|
42
42
|
*
|
|
43
|
-
* Custom CSS property
|
|
44
|
-
*
|
|
45
|
-
* `--vaadin-scroller-
|
|
46
|
-
* `--vaadin-scroller-
|
|
43
|
+
* Custom CSS property |
|
|
44
|
+
* :----------------------------------------------|
|
|
45
|
+
* `--vaadin-scroller-overflow-indicator-color` |
|
|
46
|
+
* `--vaadin-scroller-overflow-indicator-height` |
|
|
47
|
+
* `--vaadin-scroller-padding-block` |
|
|
48
|
+
* `--vaadin-scroller-padding-inline` |
|
|
47
49
|
*
|
|
48
50
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
51
|
*/
|
package/src/vaadin-scroller.js
CHANGED
|
@@ -46,18 +46,17 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
|
|
|
46
46
|
*
|
|
47
47
|
* The following custom CSS properties are available for styling:
|
|
48
48
|
*
|
|
49
|
-
* Custom CSS property
|
|
50
|
-
*
|
|
51
|
-
* `--vaadin-scroller-
|
|
52
|
-
* `--vaadin-scroller-
|
|
49
|
+
* Custom CSS property |
|
|
50
|
+
* :----------------------------------------------|
|
|
51
|
+
* `--vaadin-scroller-overflow-indicator-color` |
|
|
52
|
+
* `--vaadin-scroller-overflow-indicator-height` |
|
|
53
|
+
* `--vaadin-scroller-padding-block` |
|
|
54
|
+
* `--vaadin-scroller-padding-inline` |
|
|
53
55
|
*
|
|
54
56
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
55
57
|
*
|
|
56
58
|
* @customElement vaadin-scroller
|
|
57
59
|
* @extends HTMLElement
|
|
58
|
-
* @mixes ThemableMixin
|
|
59
|
-
* @mixes ElementMixin
|
|
60
|
-
* @mixes ScrollerMixin
|
|
61
60
|
*/
|
|
62
61
|
class Scroller extends ScrollerMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
63
62
|
static get is() {
|
package/web-types.json
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/scroller",
|
|
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-scroller",
|
|
11
|
-
"description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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-scroller-overflow-indicator-color` |\n`--vaadin-scroller-overflow-indicator-height` |\n`--vaadin-scroller-padding-block` |\n`--vaadin-scroller-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "scroll-direction",
|
|
15
15
|
"description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -40,9 +38,7 @@
|
|
|
40
38
|
"description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
|
|
41
39
|
"value": {
|
|
42
40
|
"type": [
|
|
43
|
-
"string"
|
|
44
|
-
"null",
|
|
45
|
-
"undefined"
|
|
41
|
+
"string"
|
|
46
42
|
]
|
|
47
43
|
}
|
|
48
44
|
}
|
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/scroller",
|
|
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-scroller",
|
|
19
|
-
"description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` 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-scroller-overflow-indicator-color` |\n`--vaadin-scroller-overflow-indicator-height` |\n`--vaadin-scroller-padding-block` |\n`--vaadin-scroller-padding-inline` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|