@vaadin/master-detail-layout 25.0.0 → 25.1.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.
- package/LICENSE +1 -1
- package/package.json +7 -7
- package/src/styles/vaadin-master-detail-layout-base-styles.d.ts +1 -1
- package/src/styles/vaadin-master-detail-layout-base-styles.js +8 -1
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.d.ts +1 -1
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +1 -1
- package/src/vaadin-master-detail-layout.d.ts +11 -1
- package/src/vaadin-master-detail-layout.js +15 -9
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/LICENSE
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.1.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -33,20 +33,20 @@
|
|
|
33
33
|
"web-component"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@vaadin/a11y-base": "
|
|
37
|
-
"@vaadin/component-base": "
|
|
38
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
36
|
+
"@vaadin/a11y-base": "25.1.0-alpha1",
|
|
37
|
+
"@vaadin/component-base": "25.1.0-alpha1",
|
|
38
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha1",
|
|
39
39
|
"lit": "^3.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@vaadin/chai-plugins": "
|
|
42
|
+
"@vaadin/chai-plugins": "25.1.0-alpha1",
|
|
43
43
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha1",
|
|
45
45
|
"sinon": "^21.0.0"
|
|
46
46
|
},
|
|
47
47
|
"web-types": [
|
|
48
48
|
"web-types.json",
|
|
49
49
|
"web-types.lit.json"
|
|
50
50
|
],
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "c789cdd350bcd74b280268a83f5475ad7f2f65e1"
|
|
52
52
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2026 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/component-base/src/styles/style-props.js';
|
|
@@ -31,6 +31,13 @@ export const masterDetailLayoutStyles = css`
|
|
|
31
31
|
[part='_detail-internal'] {
|
|
32
32
|
display: contents;
|
|
33
33
|
justify-content: end;
|
|
34
|
+
/* Disable pointer events for the detail wrapper to allow clicks to pass through to the backdrop */
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[part='detail'] {
|
|
39
|
+
/* Re-enable pointer events for the actual detail content */
|
|
40
|
+
pointer-events: auto;
|
|
34
41
|
}
|
|
35
42
|
|
|
36
43
|
:host([orientation='vertical']) [part='_detail-internal'] {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2026 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -41,6 +41,16 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
|
|
|
41
41
|
* `drawer` | Set when the layout is using the drawer mode.
|
|
42
42
|
* `stack` | Set when the layout is using the stack mode.
|
|
43
43
|
*
|
|
44
|
+
* The following custom CSS properties are available for styling:
|
|
45
|
+
*
|
|
46
|
+
* Custom CSS property |
|
|
47
|
+
* :----------------------------------------------------|
|
|
48
|
+
* | `--vaadin-master-detail-layout-border-color` |
|
|
49
|
+
* | `--vaadin-master-detail-layout-border-width` |
|
|
50
|
+
* | `--vaadin-master-detail-layout-detail-background` |
|
|
51
|
+
* | `--vaadin-master-detail-layout-detail-shadow` |
|
|
52
|
+
* | `--vaadin-overlay-backdrop-background` |
|
|
53
|
+
*
|
|
44
54
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
45
55
|
*
|
|
46
56
|
* @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2026 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, LitElement, nothing } from 'lit';
|
|
@@ -39,6 +39,16 @@ import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detai
|
|
|
39
39
|
* `drawer` | Set when the layout is using the drawer mode.
|
|
40
40
|
* `stack` | Set when the layout is using the stack mode.
|
|
41
41
|
*
|
|
42
|
+
* The following custom CSS properties are available for styling:
|
|
43
|
+
*
|
|
44
|
+
* Custom CSS property |
|
|
45
|
+
* :----------------------------------------------------|
|
|
46
|
+
* | `--vaadin-master-detail-layout-border-color` |
|
|
47
|
+
* | `--vaadin-master-detail-layout-border-width` |
|
|
48
|
+
* | `--vaadin-master-detail-layout-detail-background` |
|
|
49
|
+
* | `--vaadin-master-detail-layout-detail-shadow` |
|
|
50
|
+
* | `--vaadin-overlay-backdrop-background` |
|
|
51
|
+
*
|
|
42
52
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
43
53
|
*
|
|
44
54
|
* @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
|
|
@@ -241,7 +251,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
241
251
|
/** @protected */
|
|
242
252
|
render() {
|
|
243
253
|
return html`
|
|
244
|
-
<div part="backdrop"></div>
|
|
254
|
+
<div part="backdrop" @click="${this.__onBackdropClick}"></div>
|
|
245
255
|
<div
|
|
246
256
|
id="master"
|
|
247
257
|
part="master"
|
|
@@ -249,7 +259,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
249
259
|
>
|
|
250
260
|
<slot></slot>
|
|
251
261
|
</div>
|
|
252
|
-
<div part="_detail-internal"
|
|
262
|
+
<div part="_detail-internal">
|
|
253
263
|
<div
|
|
254
264
|
id="detail"
|
|
255
265
|
part="detail"
|
|
@@ -281,12 +291,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
281
291
|
}
|
|
282
292
|
|
|
283
293
|
/** @private */
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
// to click event on it and detect if it was outside the detail content
|
|
287
|
-
if (!e.composedPath().includes(this.$.detail)) {
|
|
288
|
-
this.dispatchEvent(new CustomEvent('backdrop-click'));
|
|
289
|
-
}
|
|
294
|
+
__onBackdropClick() {
|
|
295
|
+
this.dispatchEvent(new CustomEvent('backdrop-click'));
|
|
290
296
|
}
|
|
291
297
|
|
|
292
298
|
/** @private */
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.1.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-master-detail-layout",
|
|
11
|
-
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
11
|
+
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "detail-size",
|
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/master-detail-layout",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.1.0-alpha1",
|
|
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-master-detail-layout",
|
|
19
|
-
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|