@vaadin/vertical-layout 24.8.4 → 25.0.0-alpha10

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 (21) hide show
  1. package/README.md +0 -23
  2. package/package.json +11 -12
  3. package/src/styles/vaadin-vertical-layout-base-styles.js +55 -0
  4. package/src/styles/vaadin-vertical-layout-core-styles.d.ts +8 -0
  5. package/src/{vaadin-vertical-layout-styles.js → styles/vaadin-vertical-layout-core-styles.js} +1 -1
  6. package/src/vaadin-vertical-layout.d.ts +1 -1
  7. package/src/vaadin-vertical-layout.js +22 -11
  8. package/web-types.json +2 -2
  9. package/web-types.lit.json +2 -2
  10. package/src/vaadin-lit-vertical-layout.js +0 -39
  11. package/theme/lumo/vaadin-lit-vertical-layout.d.ts +0 -2
  12. package/theme/lumo/vaadin-lit-vertical-layout.js +0 -2
  13. package/theme/material/vaadin-lit-vertical-layout.d.ts +0 -2
  14. package/theme/material/vaadin-lit-vertical-layout.js +0 -2
  15. package/theme/material/vaadin-vertical-layout-styles.d.ts +0 -1
  16. package/theme/material/vaadin-vertical-layout-styles.js +0 -37
  17. package/theme/material/vaadin-vertical-layout.d.ts +0 -2
  18. package/theme/material/vaadin-vertical-layout.js +0 -2
  19. package/vaadin-lit-vertical-layout.d.ts +0 -1
  20. package/vaadin-lit-vertical-layout.js +0 -2
  21. /package/src/{vaadin-vertical-layout-styles.d.ts → styles/vaadin-vertical-layout-base-styles.d.ts} +0 -0
package/README.md CHANGED
@@ -27,29 +27,6 @@ Once installed, import the component in your application:
27
27
  import '@vaadin/vertical-layout';
28
28
  ```
29
29
 
30
- ## Themes
31
-
32
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
33
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/vertical-layout/vaadin-vertical-layout.js) of the package uses the Lumo theme.
34
-
35
- To use the Material theme, import the component from the `theme/material` folder:
36
-
37
- ```js
38
- import '@vaadin/vertical-layout/theme/material/vaadin-vertical-layout.js';
39
- ```
40
-
41
- You can also import the Lumo version of the component explicitly:
42
-
43
- ```js
44
- import '@vaadin/vertical-layout/theme/lumo/vaadin-vertical-layout.js';
45
- ```
46
-
47
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
48
-
49
- ```js
50
- import '@vaadin/vertical-layout/src/vaadin-vertical-layout.js';
51
- ```
52
-
53
30
  ## Contributing
54
31
 
55
32
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vertical-layout",
3
- "version": "24.8.4",
3
+ "version": "25.0.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,6 +21,8 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
+ "!src/styles/*-base-styles.d.ts",
25
+ "!src/styles/*-base-styles.js",
24
26
  "theme",
25
27
  "vaadin-*.d.ts",
26
28
  "vaadin-*.js",
@@ -31,25 +33,22 @@
31
33
  "Vaadin",
32
34
  "vaadin-vertical-layout",
33
35
  "web-components",
34
- "web-component",
35
- "polymer"
36
+ "web-component"
36
37
  ],
37
38
  "dependencies": {
38
- "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "~24.8.4",
40
- "@vaadin/vaadin-lumo-styles": "~24.8.4",
41
- "@vaadin/vaadin-material-styles": "~24.8.4",
42
- "@vaadin/vaadin-themable-mixin": "~24.8.4",
39
+ "@vaadin/component-base": "25.0.0-alpha10",
40
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
41
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
43
42
  "lit": "^3.0.0"
44
43
  },
45
44
  "devDependencies": {
46
- "@vaadin/chai-plugins": "~24.8.4",
47
- "@vaadin/test-runner-commands": "~24.8.4",
48
- "@vaadin/testing-helpers": "^1.1.0"
45
+ "@vaadin/chai-plugins": "25.0.0-alpha10",
46
+ "@vaadin/test-runner-commands": "25.0.0-alpha10",
47
+ "@vaadin/testing-helpers": "^2.0.0"
49
48
  },
50
49
  "web-types": [
51
50
  "web-types.json",
52
51
  "web-types.lit.json"
53
52
  ],
54
- "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
53
+ "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
55
54
  }
package/src/styles/vaadin-vertical-layout-base-styles.js ADDED
@@ -0,0 +1,55 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import '@vaadin/component-base/src/style-props.js';
7
+ import { css } from 'lit';
8
+
9
+ export const baseStyles = css`
10
+ :host {
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: flex-start;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ :host([hidden]) {
18
+ display: none !important;
19
+ }
20
+
21
+ /* Theme variations */
22
+ :host([theme~='margin']) {
23
+ margin: var(--vaadin-vertical-layout-margin, var(--vaadin-padding));
24
+ }
25
+
26
+ :host([theme~='padding']) {
27
+ padding: var(--vaadin-vertical-layout-margin, var(--vaadin-padding));
28
+ }
29
+
30
+ :host([theme~='spacing']) {
31
+ gap: var(--vaadin-vertical-layout-gap, var(--vaadin-gap-container-block));
32
+ }
33
+
34
+ :host([theme~='wrap']) {
35
+ flex-wrap: wrap;
36
+ }
37
+ `;
38
+
39
+ // Layout improvements are part of a feature for Flow users where children that have been configured to use full size
40
+ // using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in
41
+ // the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize`
42
+ // class.
43
+ const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements;
44
+ const layoutImprovementStyles = css`
45
+ ::slotted([data-height-full]) {
46
+ flex: 1;
47
+ }
48
+
49
+ ::slotted(vaadin-horizontal-layout[data-height-full]),
50
+ ::slotted(vaadin-vertical-layout[data-height-full]) {
51
+ min-height: 0;
52
+ }
53
+ `;
54
+
55
+ export const verticalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles];
package/src/styles/vaadin-vertical-layout-core-styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const verticalLayoutStyles: CSSResult[];
package/src/{vaadin-vertical-layout-styles.js → styles/vaadin-vertical-layout-core-styles.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
6
+ import { css } from 'lit';
7
7
 
8
8
  export const baseStyles = css`
9
9
  :host {
package/src/vaadin-vertical-layout.d.ts CHANGED
@@ -9,7 +9,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
9
9
  /**
10
10
  * `<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.
11
11
  *
12
- * ```
12
+ * ```html
13
13
  * <vaadin-vertical-layout>
14
14
  * <div>Item 1</div>
15
15
  * <div>Item 2</div>
package/src/vaadin-vertical-layout.js CHANGED
@@ -3,18 +3,18 @@
3
3
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
6
+ import { html, LitElement } from 'lit';
7
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
- import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
- import { verticalLayoutStyles } from './vaadin-vertical-layout-styles.js';
11
-
12
- registerStyles('vaadin-vertical-layout', verticalLayoutStyles, { moduleId: 'vaadin-vertical-layout-styles' });
9
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
11
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ import { verticalLayoutStyles } from './styles/vaadin-vertical-layout-core-styles.js';
13
13
 
14
14
  /**
15
15
  * `<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.
16
16
  *
17
- * ```
17
+ * ```html
18
18
  * <vaadin-vertical-layout>
19
19
  * <div>Item 1</div>
20
20
  * <div>Item 2</div>
@@ -37,14 +37,25 @@ registerStyles('vaadin-vertical-layout', verticalLayoutStyles, { moduleId: 'vaad
37
37
  * @mixes ThemableMixin
38
38
  * @mixes ElementMixin
39
39
  */
40
- class VerticalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
41
- static get template() {
42
- return html`<slot></slot>`;
43
- }
44
-
40
+ class VerticalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
45
41
  static get is() {
46
42
  return 'vaadin-vertical-layout';
47
43
  }
44
+
45
+ static get styles() {
46
+ return verticalLayoutStyles;
47
+ }
48
+
49
+ static get lumoInjector() {
50
+ return {
51
+ includeBaseStyles: true,
52
+ };
53
+ }
54
+
55
+ /** @protected */
56
+ render() {
57
+ return html`<slot></slot>`;
58
+ }
48
59
  }
49
60
 
50
61
  defineCustomElement(VerticalLayout);
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/vertical-layout",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-vertical-layout",
11
- "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```\n<vaadin-vertical-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout height",
11
+ "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```html\n<vaadin-vertical-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout height",
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/vertical-layout",
4
- "version": "24.8.4",
4
+ "version": "25.0.0-alpha10",
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-vertical-layout",
19
- "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```\n<vaadin-vertical-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout height",
19
+ "description": "`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.\n\n```html\n<vaadin-vertical-layout>\n <div>Item 1</div>\n <div>Item 2</div>\n</vaadin-vertical-layout>\n```\n\n### Built-in Theme Variations\n\n`<vaadin-vertical-layout>` supports the following theme variations:\n\nTheme variation | Description\n---|---\n`theme=\"margin\"` | Applies the default amount of CSS margin for the host element (specified by the theme)\n`theme=\"padding\"` | Applies the default amount of CSS padding for the host element (specified by the theme)\n`theme=\"spacing\"` | Applies the default amount of CSS margin between items (specified by the theme)\n`theme=\"wrap\"` | Items wrap to the next row when they exceed the layout height",
20
20
  "extension": true,
21
21
  "attributes": []
22
22
  }
package/src/vaadin-lit-vertical-layout.js DELETED
@@ -1,39 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { html, LitElement } from 'lit';
7
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
- import { verticalLayoutStyles } from './vaadin-vertical-layout-styles.js';
12
-
13
- /**
14
- * LitElement based version of `<vaadin-vertical-layout>` web component.
15
- *
16
- * ## Disclaimer
17
- *
18
- * This component is an experiment and not yet a part of Vaadin platform.
19
- * There is no ETA regarding specific Vaadin version where it'll land.
20
- * Feel free to try this code in your apps as per Apache 2.0 license.
21
- */
22
- class VerticalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LitElement))) {
23
- static get is() {
24
- return 'vaadin-vertical-layout';
25
- }
26
-
27
- static get styles() {
28
- return verticalLayoutStyles;
29
- }
30
-
31
- /** @protected */
32
- render() {
33
- return html`<slot></slot>`;
34
- }
35
- }
36
-
37
- defineCustomElement(VerticalLayout);
38
-
39
- export { VerticalLayout };
package/theme/lumo/vaadin-lit-vertical-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-lit-vertical-layout.js';
package/theme/lumo/vaadin-lit-vertical-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-lit-vertical-layout.js';
package/theme/material/vaadin-lit-vertical-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-lit-vertical-layout.js';
package/theme/material/vaadin-lit-vertical-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-lit-vertical-layout.js';
package/theme/material/vaadin-vertical-layout-styles.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/theme/material/vaadin-vertical-layout-styles.js DELETED
@@ -1,37 +0,0 @@
1
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
2
-
3
- const verticalLayout = css`
4
- [theme~='margin'] {
5
- margin: 16px;
6
- }
7
-
8
- [theme~='padding'] {
9
- padding: 16px;
10
- }
11
-
12
- :host([theme~='spacing-xs']) {
13
- gap: 4px;
14
- }
15
-
16
- :host([theme~='spacing-s']) {
17
- gap: 8px;
18
- }
19
-
20
- :host([theme~='spacing']) {
21
- gap: 16px;
22
- }
23
-
24
- :host([theme~='spacing-l']) {
25
- gap: 24px;
26
- }
27
-
28
- :host([theme~='spacing-xl']) {
29
- gap: 40px;
30
- }
31
-
32
- :host([theme~='wrap']) {
33
- flex-wrap: wrap;
34
- }
35
- `;
36
-
37
- registerStyles('vaadin-vertical-layout', verticalLayout, { moduleId: 'material-vertical-layout' });
package/theme/material/vaadin-vertical-layout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-vertical-layout.js';
package/theme/material/vaadin-vertical-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './vaadin-vertical-layout-styles.js';
2
- import '../../src/vaadin-vertical-layout.js';
package/vaadin-lit-vertical-layout.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './vaadin-vertical-layout.js';
package/vaadin-lit-vertical-layout.js DELETED
@@ -1,2 +0,0 @@
1
- import './theme/lumo/vaadin-lit-vertical-layout.js';
2
- export * from './src/vaadin-lit-vertical-layout.js';