@vaadin/scroller 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

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/README.md +3 -3
  2. package/package.json +13 -7
  3. package/src/vaadin-scroller.d.ts +5 -2
  4. package/src/vaadin-scroller.js +14 -1
  5. package/web-types.json +56 -0
  6. package/web-types.lit.json +34 -0
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A component container for creating scrollable areas in the UI.
4
4
 
5
- [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/scroller)
5
+ [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/scroller)
6
6
 
7
7
  ```html
8
8
  <vaadin-scroller scroll-direction="vertical">
@@ -36,7 +36,7 @@ import '@vaadin/scroller';
36
36
 
37
37
  ## Themes
38
38
 
39
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
39
+ Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
40
40
  The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/scroller/vaadin-scroller.js) of the package uses the Lumo theme.
41
41
 
42
42
  To use the Material theme, import the component from the `theme/material` folder:
@@ -59,7 +59,7 @@ import '@vaadin/scroller/src/vaadin-scroller.js';
59
59
 
60
60
  ## Contributing
61
61
 
62
- Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
62
+ Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
63
63
 
64
64
  ## License
65
65
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/scroller",
3
- "version": "23.2.0-dev.8a7678b70",
3
+ "version": "23.3.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -23,7 +23,9 @@
23
23
  "src",
24
24
  "theme",
25
25
  "vaadin-*.d.ts",
26
- "vaadin-*.js"
26
+ "vaadin-*.js",
27
+ "web-types.json",
28
+ "web-types.lit.json"
27
29
  ],
28
30
  "keywords": [
29
31
  "Vaadin",
@@ -34,14 +36,18 @@
34
36
  ],
35
37
  "dependencies": {
36
38
  "@polymer/polymer": "^3.0.0",
37
- "@vaadin/component-base": "23.2.0-dev.8a7678b70",
38
- "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
39
- "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
40
- "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
39
+ "@vaadin/component-base": "23.3.0-alpha1",
40
+ "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
41
+ "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
42
+ "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
41
43
  },
42
44
  "devDependencies": {
43
45
  "@esm-bundle/chai": "^4.3.4",
44
46
  "@vaadin/testing-helpers": "^0.3.2"
45
47
  },
46
- "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
48
+ "web-types": [
49
+ "web-types.json",
50
+ "web-types.lit.json"
51
+ ],
52
+ "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
47
53
  }
package/src/vaadin-scroller.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
6
7
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
7
8
  import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
8
9
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -21,13 +22,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
21
22
  * -------------| -----------
22
23
  * `focus-ring` | Set when the element is focused using the keyboard.
23
24
  * `focused` | Set when the element is focused.
25
+ * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
24
26
  */
25
- declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
27
+ declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
26
28
  /**
27
29
  * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
28
30
  * When `scrollDirection` is undefined scrollbars will be shown in both directions.
31
+ * @attr {string} scroll-direction
29
32
  */
30
- scrollDirection: 'horizontal' | 'vertical' | 'none' | undefined;
33
+ scrollDirection: 'horizontal' | 'none' | 'vertical' | undefined;
31
34
 
32
35
  /**
33
36
  * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
package/src/vaadin-scroller.js CHANGED
@@ -4,8 +4,10 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
9
  import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
10
+ import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
9
11
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
12
 
11
13
  /**
@@ -22,13 +24,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
22
24
  * -------------| -----------
23
25
  * `focus-ring` | Set when the element is focused using the keyboard.
24
26
  * `focused` | Set when the element is focused.
27
+ * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
25
28
  *
26
29
  * @extends HTMLElement
27
30
  * @mixes ThemableMixin
31
+ * @mixes ControllerMixin
28
32
  * @mixes ElementMixin
29
33
  * @mixes FocusMixin
30
34
  */
31
- class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
35
+ class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(PolymerElement)))) {
32
36
  static get template() {
33
37
  return html`
34
38
  <style>
@@ -67,6 +71,7 @@ class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
67
71
  /**
68
72
  * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
69
73
  * When `scrollDirection` is undefined scrollbars will be shown in both directions.
74
+ * @attr {string} scroll-direction
70
75
  */
71
76
  scrollDirection: {
72
77
  type: String,
@@ -85,6 +90,14 @@ class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
85
90
  };
86
91
  }
87
92
 
93
+ /** @protected */
94
+ ready() {
95
+ super.ready();
96
+
97
+ this.__overflowController = new OverflowController(this);
98
+ this.addController(this.__overflowController);
99
+ }
100
+
88
101
  /**
89
102
  * Override method inherited from `FocusMixin` to mark the scroller as focused
90
103
  * only when the host is focused.
package/web-types.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/scroller",
4
+ "version": "23.3.0-alpha1",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
10
+ "name": "vaadin-scroller",
11
+ "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\nThe following attributes are exposed 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.",
12
+ "attributes": [
13
+ {
14
+ "name": "scroll-direction",
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
+ "value": {
17
+ "type": [
18
+ "string",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
24
+ {
25
+ "name": "theme",
26
+ "description": "The theme variants to apply to the component.",
27
+ "value": {
28
+ "type": [
29
+ "string",
30
+ "null",
31
+ "undefined"
32
+ ]
33
+ }
34
+ }
35
+ ],
36
+ "js": {
37
+ "properties": [
38
+ {
39
+ "name": "scrollDirection",
40
+ "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
+ "value": {
42
+ "type": [
43
+ "string",
44
+ "null",
45
+ "undefined"
46
+ ]
47
+ }
48
+ }
49
+ ],
50
+ "events": []
51
+ }
52
+ }
53
+ ]
54
+ }
55
+ }
56
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/scroller",
4
+ "version": "23.3.0-alpha1",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
18
+ "name": "vaadin-scroller",
19
+ "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\nThe following attributes are exposed 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.",
20
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": ".scrollDirection",
24
+ "description": "This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.\nWhen `scrollDirection` is undefined scrollbars will be shown in both directions.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ }
29
+ ]
30
+ }
31
+ ]
32
+ }
33
+ }
34
+ }