@vaadin/master-detail-layout 24.8.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/LICENSE +190 -0
- package/README.md +60 -0
- package/package.json +54 -0
- package/src/vaadin-master-detail-layout-transition-styles.js +289 -0
- package/src/vaadin-master-detail-layout.d.ts +133 -0
- package/src/vaadin-master-detail-layout.js +682 -0
- package/theme/lumo/vaadin-master-detail-layout-styles.d.ts +1 -0
- package/theme/lumo/vaadin-master-detail-layout-styles.js +28 -0
- package/theme/lumo/vaadin-master-detail-layout.d.ts +2 -0
- package/theme/lumo/vaadin-master-detail-layout.js +2 -0
- package/theme/material/vaadin-master-detail-layout-styles.d.ts +2 -0
- package/theme/material/vaadin-master-detail-layout-styles.js +30 -0
- package/theme/material/vaadin-master-detail-layout.d.ts +2 -0
- package/theme/material/vaadin-master-detail-layout.js +2 -0
- package/vaadin-master-detail-layout.d.ts +1 -0
- package/vaadin-master-detail-layout.js +3 -0
- package/web-types.json +232 -0
- package/web-types.lit.json +90 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
+
import '@vaadin/vaadin-material-styles/style.js';
|
|
3
|
+
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
+
|
|
5
|
+
registerStyles(
|
|
6
|
+
'vaadin-master-detail-layout',
|
|
7
|
+
css`
|
|
8
|
+
:host(:is([overlay], [stack])) [part='detail'] {
|
|
9
|
+
background-color: var(--material-background-color);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:host([overlay]) [part='detail'] {
|
|
13
|
+
box-shadow: var(--material-shadow-elevation-4dp);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:host([overlay][orientation='horizontal']) [part='detail'] {
|
|
17
|
+
border-inline-start: 1px solid var(--material-divider-color);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:host([overlay][orientation='vertical']) [part='detail'] {
|
|
21
|
+
border-block-start: 1px solid var(--material-divider-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host([overlay]) [part='backdrop'] {
|
|
25
|
+
background-color: var(--material-secondary-background-color);
|
|
26
|
+
opacity: 0.5;
|
|
27
|
+
}
|
|
28
|
+
`,
|
|
29
|
+
{ moduleId: 'material-master-detail-layout' },
|
|
30
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-master-detail-layout.js';
|
package/web-types.json
ADDED
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/master-detail-layout",
|
|
4
|
+
"version": "24.8.0-alpha10",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay 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`overlay` | Set when the layout is using the overlay 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.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "detail-size",
|
|
15
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "detail-min-size",
|
|
26
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "master-size",
|
|
37
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "master-min-size",
|
|
48
|
+
"description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"string",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "orientation",
|
|
59
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"string",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "force-overlay",
|
|
70
|
+
"description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"boolean",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "containment",
|
|
81
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "stack-threshold",
|
|
92
|
+
"description": "The threshold (in CSS length units) at which the layout switches to\nthe \"stack\" mode, making detail area fully cover the master area.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "no-animation",
|
|
103
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"boolean",
|
|
107
|
+
"null",
|
|
108
|
+
"undefined"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "theme",
|
|
114
|
+
"description": "The theme variants to apply to the component.",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"string",
|
|
118
|
+
"null",
|
|
119
|
+
"undefined"
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
"js": {
|
|
125
|
+
"properties": [
|
|
126
|
+
{
|
|
127
|
+
"name": "detailSize",
|
|
128
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
129
|
+
"value": {
|
|
130
|
+
"type": [
|
|
131
|
+
"string",
|
|
132
|
+
"null",
|
|
133
|
+
"undefined"
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "detailMinSize",
|
|
139
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
140
|
+
"value": {
|
|
141
|
+
"type": [
|
|
142
|
+
"string",
|
|
143
|
+
"null",
|
|
144
|
+
"undefined"
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "masterSize",
|
|
150
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
151
|
+
"value": {
|
|
152
|
+
"type": [
|
|
153
|
+
"string",
|
|
154
|
+
"null",
|
|
155
|
+
"undefined"
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "masterMinSize",
|
|
161
|
+
"description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
162
|
+
"value": {
|
|
163
|
+
"type": [
|
|
164
|
+
"string",
|
|
165
|
+
"null",
|
|
166
|
+
"undefined"
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "orientation",
|
|
172
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
173
|
+
"value": {
|
|
174
|
+
"type": [
|
|
175
|
+
"string",
|
|
176
|
+
"null",
|
|
177
|
+
"undefined"
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "forceOverlay",
|
|
183
|
+
"description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
184
|
+
"value": {
|
|
185
|
+
"type": [
|
|
186
|
+
"boolean",
|
|
187
|
+
"null",
|
|
188
|
+
"undefined"
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"name": "containment",
|
|
194
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
195
|
+
"value": {
|
|
196
|
+
"type": [
|
|
197
|
+
"string",
|
|
198
|
+
"null",
|
|
199
|
+
"undefined"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "stackThreshold",
|
|
205
|
+
"description": "The threshold (in CSS length units) at which the layout switches to\nthe \"stack\" mode, making detail area fully cover the master area.",
|
|
206
|
+
"value": {
|
|
207
|
+
"type": [
|
|
208
|
+
"string",
|
|
209
|
+
"null",
|
|
210
|
+
"undefined"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "noAnimation",
|
|
216
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
217
|
+
"value": {
|
|
218
|
+
"type": [
|
|
219
|
+
"boolean",
|
|
220
|
+
"null",
|
|
221
|
+
"undefined"
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
],
|
|
226
|
+
"events": []
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/master-detail-layout",
|
|
4
|
+
"version": "24.8.0-alpha10",
|
|
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-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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay 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`overlay` | Set when the layout is using the overlay 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.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?forceOverlay",
|
|
24
|
+
"description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?noAnimation",
|
|
31
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": ".detailSize",
|
|
38
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".detailMinSize",
|
|
45
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".masterSize",
|
|
52
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".masterMinSize",
|
|
59
|
+
"description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".orientation",
|
|
66
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".containment",
|
|
73
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".stackThreshold",
|
|
80
|
+
"description": "The threshold (in CSS length units) at which the layout switches to\nthe \"stack\" mode, making detail area fully cover the master area.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|