@vaadin/tabsheet 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.
- package/README.md +0 -23
- package/package.json +13 -14
- package/src/styles/vaadin-tabsheet-base-styles.d.ts +8 -0
- package/src/styles/vaadin-tabsheet-base-styles.js +75 -0
- package/src/styles/vaadin-tabsheet-core-styles.d.ts +8 -0
- package/src/styles/vaadin-tabsheet-core-styles.js +35 -0
- package/src/vaadin-tabsheet.d.ts +14 -15
- package/src/vaadin-tabsheet.js +27 -50
- package/theme/lumo/vaadin-tabsheet-styles.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
- package/src/vaadin-lit-tabsheet-scroller.js +0 -21
- package/src/vaadin-lit-tabsheet.js +0 -79
- package/theme/lumo/vaadin-lit-tabsheet.d.ts +0 -4
- package/theme/lumo/vaadin-lit-tabsheet.js +0 -4
- package/theme/material/vaadin-lit-tabsheet.d.ts +0 -4
- package/theme/material/vaadin-lit-tabsheet.js +0 -4
- package/theme/material/vaadin-tabsheet-styles.d.ts +0 -2
- package/theme/material/vaadin-tabsheet-styles.js +0 -46
- package/theme/material/vaadin-tabsheet.d.ts +0 -4
- package/theme/material/vaadin-tabsheet.js +0 -4
- package/vaadin-lit-tabsheet.d.ts +0 -1
- package/vaadin-lit-tabsheet.js +0 -2
package/README.md
CHANGED
|
@@ -36,29 +36,6 @@ Once installed, import the component in your application:
|
|
|
36
36
|
import '@vaadin/tabsheet';
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
## Themes
|
|
40
|
-
|
|
41
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
42
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/tabsheet/vaadin-tabsheet.js) of the package uses the Lumo theme.
|
|
43
|
-
|
|
44
|
-
To use the Material theme, import the component from the `theme/material` folder:
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
import '@vaadin/tabsheet/theme/material/vaadin-tabsheet.js';
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
You can also import the Lumo version of the component explicitly:
|
|
51
|
-
|
|
52
|
-
```js
|
|
53
|
-
import '@vaadin/tabsheet/theme/lumo/vaadin-tabsheet.js';
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
|
|
57
|
-
|
|
58
|
-
```js
|
|
59
|
-
import '@vaadin/tabsheet/src/vaadin-tabsheet.js';
|
|
60
|
-
```
|
|
61
|
-
|
|
62
39
|
## Contributing
|
|
63
40
|
|
|
64
41
|
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/tabsheet",
|
|
3
|
-
"version": "
|
|
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,29 +33,26 @@
|
|
|
31
33
|
"Vaadin",
|
|
32
34
|
"vaadin-tabsheet",
|
|
33
35
|
"web-components",
|
|
34
|
-
"web-component"
|
|
35
|
-
"polymer"
|
|
36
|
+
"web-component"
|
|
36
37
|
],
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/vaadin-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "~24.8.4",
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "~24.8.4",
|
|
40
|
+
"@vaadin/component-base": "25.0.0-alpha10",
|
|
41
|
+
"@vaadin/scroller": "25.0.0-alpha10",
|
|
42
|
+
"@vaadin/tabs": "25.0.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
|
|
46
45
|
"lit": "^3.0.0"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "
|
|
50
|
-
"@vaadin/test-runner-commands": "
|
|
51
|
-
"@vaadin/testing-helpers": "^
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha10",
|
|
50
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
51
|
"sinon": "^18.0.0"
|
|
53
52
|
},
|
|
54
53
|
"web-types": [
|
|
55
54
|
"web-types.json",
|
|
56
55
|
"web-types.lit.json"
|
|
57
56
|
],
|
|
58
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
|
|
59
58
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2022 - 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
|
+
import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
|
|
9
|
+
|
|
10
|
+
export const tabSheetStyles = [
|
|
11
|
+
loaderStyles,
|
|
12
|
+
css`
|
|
13
|
+
:host {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
border: var(--vaadin-tabsheet-border-width, 1px) solid
|
|
17
|
+
var(--vaadin-tabsheet-border-color, var(--vaadin-border-color));
|
|
18
|
+
border-radius: var(--vaadin-tabsheet-border-radius, var(--vaadin-radius-l));
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host([hidden]) {
|
|
23
|
+
display: none !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
[part='tabs-container'] {
|
|
27
|
+
position: relative;
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: var(--vaadin-tabsheet-gap, var(--vaadin-gap-container-inline));
|
|
31
|
+
padding: var(--vaadin-tabsheet-padding, var(--vaadin-padding));
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
::slotted([slot='tabs']) {
|
|
36
|
+
flex: 1;
|
|
37
|
+
align-self: stretch;
|
|
38
|
+
min-width: 128px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
[part='content'] {
|
|
42
|
+
position: relative;
|
|
43
|
+
flex: 1;
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
padding: var(--vaadin-tabsheet-padding, var(--vaadin-padding));
|
|
46
|
+
border-top: var(--vaadin-tabsheet-border-width, 1px) solid transparent;
|
|
47
|
+
margin-top: calc(var(--vaadin-tabsheet-border-width, 1px) * -1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[part='content'][focus-ring] {
|
|
51
|
+
border-bottom-left-radius: inherit;
|
|
52
|
+
border-bottom-right-radius: inherit;
|
|
53
|
+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[part='content'][overflow~='top'] {
|
|
57
|
+
border-top-color: var(--vaadin-tabsheet-border-color, var(--vaadin-border-color));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([loading]) [part='content'] {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host([theme~='no-border']) {
|
|
67
|
+
border: 0;
|
|
68
|
+
border-radius: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([theme~='no-padding']) [part='content'] {
|
|
72
|
+
padding: 0 !important;
|
|
73
|
+
}
|
|
74
|
+
`,
|
|
75
|
+
];
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2022 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const tabSheetStyles = css`
|
|
9
|
+
:host {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:host([hidden]) {
|
|
15
|
+
display: none !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[part='tabs-container'] {
|
|
19
|
+
position: relative;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
::slotted([slot='tabs']) {
|
|
25
|
+
flex: 1;
|
|
26
|
+
align-self: stretch;
|
|
27
|
+
min-width: 8em;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[part='content'] {
|
|
31
|
+
position: relative;
|
|
32
|
+
flex: 1;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
}
|
|
35
|
+
`;
|
package/src/vaadin-tabsheet.d.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2022 - 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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
7
|
import type { Tab } from '@vaadin/tabs/src/vaadin-tab.js';
|
|
9
8
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -31,21 +30,21 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
|
|
|
31
30
|
* `<vaadin-tabsheet>` is a Web Component for organizing and grouping content
|
|
32
31
|
* into scrollable panels. The panels can be switched between by using tabs.
|
|
33
32
|
*
|
|
34
|
-
* ```
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
33
|
+
* ```html
|
|
34
|
+
* <vaadin-tabsheet>
|
|
35
|
+
* <div slot="prefix">Prefix</div>
|
|
36
|
+
* <div slot="suffix">Suffix</div>
|
|
38
37
|
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
38
|
+
* <vaadin-tabs slot="tabs">
|
|
39
|
+
* <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
|
|
40
|
+
* <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
|
|
41
|
+
* <vaadin-tab id="tab-3">Tab 3</vaadin-tab>
|
|
42
|
+
* </vaadin-tabs>
|
|
44
43
|
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
44
|
+
* <div tab="tab-1">Panel 1</div>
|
|
45
|
+
* <div tab="tab-2">Panel 2</div>
|
|
46
|
+
* <div tab="tab-3">Panel 3</div>
|
|
47
|
+
* </vaadin-tabsheet>
|
|
49
48
|
* ```
|
|
50
49
|
*
|
|
51
50
|
* ### Styling
|
|
@@ -69,7 +68,7 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
|
|
|
69
68
|
* @fires {CustomEvent} items-changed - Fired when the `items` property changes.
|
|
70
69
|
* @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
|
|
71
70
|
*/
|
|
72
|
-
declare class TabSheet extends ThemableMixin(TabSheetMixin<Tab>(
|
|
71
|
+
declare class TabSheet extends ThemableMixin(TabSheetMixin<Tab>(ElementMixin(HTMLElement))) {
|
|
73
72
|
addEventListener<K extends keyof TabSheetEventMap>(
|
|
74
73
|
type: K,
|
|
75
74
|
listener: (this: TabSheet, ev: TabSheetEventMap[K]) => void,
|
package/src/vaadin-tabsheet.js
CHANGED
|
@@ -5,32 +5,34 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/tabs/src/vaadin-tabs.js';
|
|
7
7
|
import './vaadin-tabsheet-scroller.js';
|
|
8
|
-
import { html,
|
|
9
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
10
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
12
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
+
import { tabSheetStyles } from './styles/vaadin-tabsheet-core-styles.js';
|
|
13
15
|
import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
|
|
14
16
|
|
|
15
17
|
/**
|
|
16
18
|
* `<vaadin-tabsheet>` is a Web Component for organizing and grouping content
|
|
17
19
|
* into scrollable panels. The panels can be switched between by using tabs.
|
|
18
20
|
*
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
21
|
+
* ```html
|
|
22
|
+
* <vaadin-tabsheet>
|
|
23
|
+
* <div slot="prefix">Prefix</div>
|
|
24
|
+
* <div slot="suffix">Suffix</div>
|
|
23
25
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
26
|
+
* <vaadin-tabs slot="tabs">
|
|
27
|
+
* <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
|
|
28
|
+
* <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
|
|
29
|
+
* <vaadin-tab id="tab-3">Tab 3</vaadin-tab>
|
|
30
|
+
* </vaadin-tabs>
|
|
29
31
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
32
|
+
* <div tab="tab-1">Panel 1</div>
|
|
33
|
+
* <div tab="tab-2">Panel 2</div>
|
|
34
|
+
* <div tab="tab-3">Panel 3</div>
|
|
35
|
+
* </vaadin-tabsheet>
|
|
34
36
|
* ```
|
|
35
37
|
*
|
|
36
38
|
* ### Styling
|
|
@@ -59,40 +61,19 @@ import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
|
|
|
59
61
|
* @mixes TabSheetMixin
|
|
60
62
|
* @mixes ElementMixin
|
|
61
63
|
* @mixes ThemableMixin
|
|
62
|
-
* @mixes ControllerMixin
|
|
63
64
|
*/
|
|
64
|
-
class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(
|
|
65
|
-
static get
|
|
66
|
-
return
|
|
67
|
-
|
|
68
|
-
:host([hidden]) {
|
|
69
|
-
display: none !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
:host {
|
|
73
|
-
display: flex;
|
|
74
|
-
flex-direction: column;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
[part='tabs-container'] {
|
|
78
|
-
position: relative;
|
|
79
|
-
display: flex;
|
|
80
|
-
align-items: center;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
::slotted([slot='tabs']) {
|
|
84
|
-
flex: 1;
|
|
85
|
-
align-self: stretch;
|
|
86
|
-
min-width: 8em;
|
|
87
|
-
}
|
|
65
|
+
class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
66
|
+
static get is() {
|
|
67
|
+
return 'vaadin-tabsheet';
|
|
68
|
+
}
|
|
88
69
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
box-sizing: border-box;
|
|
93
|
-
}
|
|
94
|
-
</style>
|
|
70
|
+
static get styles() {
|
|
71
|
+
return tabSheetStyles;
|
|
72
|
+
}
|
|
95
73
|
|
|
74
|
+
/** @protected */
|
|
75
|
+
render() {
|
|
76
|
+
return html`
|
|
96
77
|
<div part="tabs-container">
|
|
97
78
|
<slot name="prefix"></slot>
|
|
98
79
|
<slot name="tabs"></slot>
|
|
@@ -105,10 +86,6 @@ class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(ControllerMixin(
|
|
|
105
86
|
</vaadin-tabsheet-scroller>
|
|
106
87
|
`;
|
|
107
88
|
}
|
|
108
|
-
|
|
109
|
-
static get is() {
|
|
110
|
-
return 'vaadin-tabsheet';
|
|
111
|
-
}
|
|
112
89
|
}
|
|
113
90
|
|
|
114
91
|
defineCustomElement(TabSheet);
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/tabsheet",
|
|
4
|
-
"version": "
|
|
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-tabsheet",
|
|
11
|
-
"description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n
|
|
11
|
+
"description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```html\n<vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n</vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "selected",
|
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/tabsheet",
|
|
4
|
-
"version": "
|
|
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-tabsheet",
|
|
19
|
-
"description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n
|
|
19
|
+
"description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```html\n<vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n</vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2022 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
7
|
-
import { Scroller } from '@vaadin/scroller/src/vaadin-lit-scroller.js';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* An element used internally by `<vaadin-tabsheet>`. Not intended to be used separately.
|
|
11
|
-
*
|
|
12
|
-
* @extends Scroller
|
|
13
|
-
* @private
|
|
14
|
-
*/
|
|
15
|
-
class TabsheetScroller extends Scroller {
|
|
16
|
-
static get is() {
|
|
17
|
-
return 'vaadin-tabsheet-scroller';
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
defineCustomElement(TabsheetScroller);
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2022 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/tabs/src/vaadin-lit-tabs.js';
|
|
7
|
-
import './vaadin-lit-tabsheet-scroller.js';
|
|
8
|
-
import { css, html, LitElement } from 'lit';
|
|
9
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* LitElement based version of `<vaadin-tabsheet>` web component.
|
|
17
|
-
*
|
|
18
|
-
* ## Disclaimer
|
|
19
|
-
*
|
|
20
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
21
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
22
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
23
|
-
*/
|
|
24
|
-
class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
25
|
-
static get is() {
|
|
26
|
-
return 'vaadin-tabsheet';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
static get styles() {
|
|
30
|
-
return css`
|
|
31
|
-
:host {
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:host([hidden]) {
|
|
37
|
-
display: none !important;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
[part='tabs-container'] {
|
|
41
|
-
position: relative;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
::slotted([slot='tabs']) {
|
|
47
|
-
flex: 1;
|
|
48
|
-
align-self: stretch;
|
|
49
|
-
min-width: 8em;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
[part='content'] {
|
|
53
|
-
position: relative;
|
|
54
|
-
flex: 1;
|
|
55
|
-
box-sizing: border-box;
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/** @protected */
|
|
61
|
-
render() {
|
|
62
|
-
return html`
|
|
63
|
-
<div part="tabs-container">
|
|
64
|
-
<slot name="prefix"></slot>
|
|
65
|
-
<slot name="tabs"></slot>
|
|
66
|
-
<slot name="suffix"></slot>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<vaadin-tabsheet-scroller part="content">
|
|
70
|
-
<div part="loader"></div>
|
|
71
|
-
<slot id="panel-slot"></slot>
|
|
72
|
-
</vaadin-tabsheet-scroller>
|
|
73
|
-
`;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
defineCustomElement(TabSheet);
|
|
78
|
-
|
|
79
|
-
export { TabSheet };
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-material-styles/typography.js';
|
|
3
|
-
import { loader } from '@vaadin/vaadin-material-styles/mixins/loader.js';
|
|
4
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
5
|
-
|
|
6
|
-
const tabsheet = css`
|
|
7
|
-
:host {
|
|
8
|
-
font-family: var(--material-font-family);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
:host([theme~='bordered']) {
|
|
12
|
-
border-radius: 4px;
|
|
13
|
-
border: 1px solid var(--material-divider-color);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
[part='tabs-container'] {
|
|
17
|
-
box-shadow: inset 0 -1px 0 0 var(--material-divider-color);
|
|
18
|
-
gap: 8px;
|
|
19
|
-
padding: 4px 8px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
::slotted([slot='tabs']) {
|
|
23
|
-
margin: -4px -8px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[part='content'] {
|
|
27
|
-
padding: 24px;
|
|
28
|
-
border-bottom-left-radius: inherit;
|
|
29
|
-
border-bottom-right-radius: inherit;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host([loading]) [part='content'] {
|
|
33
|
-
overflow: visible;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
[part='loader'] {
|
|
37
|
-
position: absolute;
|
|
38
|
-
z-index: 1;
|
|
39
|
-
top: 0;
|
|
40
|
-
left: 0;
|
|
41
|
-
right: 0;
|
|
42
|
-
transform: translate(0, -100%);
|
|
43
|
-
}
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
|
-
registerStyles('vaadin-tabsheet', [tabsheet, loader], { moduleId: 'material-tabsheet' });
|
package/vaadin-lit-tabsheet.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-tabsheet.js';
|
package/vaadin-lit-tabsheet.js
DELETED