@vaadin/split-layout 24.2.0-alpha8 → 24.2.0-beta1
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/split-layout",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -39,19 +39,19 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
41
41
|
"@polymer/polymer": "^3.0.0",
|
|
42
|
-
"@vaadin/component-base": "24.2.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
42
|
+
"@vaadin/component-base": "24.2.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-beta1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.2.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-beta1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
|
-
"@vaadin/testing-helpers": "^0.
|
|
49
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
50
50
|
"sinon": "^13.0.2"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
|
|
57
57
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
7
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
9
|
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
10
|
import { SplitLayoutMixin } from './vaadin-split-layout-mixin.js';
|
|
@@ -149,6 +150,7 @@ registerStyles('vaadin-split-layout', splitLayoutStyles, { moduleId: 'vaadin-spl
|
|
|
149
150
|
*
|
|
150
151
|
* @fires {Event} splitter-dragend - Fired after dragging the splitter have ended.
|
|
151
152
|
*
|
|
153
|
+
* @customElement
|
|
152
154
|
* @extends HTMLElement
|
|
153
155
|
* @mixes ElementMixin
|
|
154
156
|
* @mixes SplitLayoutMixin
|
|
@@ -176,6 +178,6 @@ class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(PolymerEle
|
|
|
176
178
|
*/
|
|
177
179
|
}
|
|
178
180
|
|
|
179
|
-
|
|
181
|
+
defineCustomElement(SplitLayout);
|
|
180
182
|
|
|
181
183
|
export { SplitLayout };
|
|
@@ -25,7 +25,8 @@ registerStyles(
|
|
|
25
25
|
[part='handle']::after {
|
|
26
26
|
content: '';
|
|
27
27
|
display: block;
|
|
28
|
-
|
|
28
|
+
--_handle-size: 4px;
|
|
29
|
+
width: var(--_handle-size);
|
|
29
30
|
height: 100%;
|
|
30
31
|
max-width: 100%;
|
|
31
32
|
max-height: 100%;
|
|
@@ -36,18 +37,13 @@ registerStyles(
|
|
|
36
37
|
|
|
37
38
|
:host([orientation='vertical']) [part='handle']::after {
|
|
38
39
|
width: 100%;
|
|
39
|
-
height:
|
|
40
|
+
height: var(--_handle-size);
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
/* Hover style */
|
|
43
|
-
|
|
44
|
-
background-color: var(--lumo-contrast-40pct);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Disable hover for touch devices */
|
|
48
|
-
@media (pointer: coarse) {
|
|
44
|
+
@media (any-hover: hover) {
|
|
49
45
|
[part='splitter']:hover [part='handle']::after {
|
|
50
|
-
background-color: var(--lumo-contrast-
|
|
46
|
+
background-color: var(--lumo-contrast-40pct);
|
|
51
47
|
}
|
|
52
48
|
}
|
|
53
49
|
|
|
@@ -62,36 +58,31 @@ registerStyles(
|
|
|
62
58
|
border-top: 1px solid var(--lumo-contrast-10pct);
|
|
63
59
|
}
|
|
64
60
|
|
|
65
|
-
:host([theme~='small']) > [part='splitter']
|
|
66
|
-
:host([theme~='minimal']) > [part='splitter'] {
|
|
61
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] {
|
|
67
62
|
min-width: 0;
|
|
68
63
|
min-height: 0;
|
|
69
64
|
background-color: transparent;
|
|
70
65
|
}
|
|
71
66
|
|
|
72
|
-
:host([theme~='small']) > [part='splitter']::after
|
|
73
|
-
:host([theme~='minimal']) > [part='splitter']::after {
|
|
67
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']::after {
|
|
74
68
|
content: '';
|
|
75
69
|
position: absolute;
|
|
76
70
|
inset: -4px;
|
|
77
71
|
}
|
|
78
72
|
|
|
79
|
-
:host([theme~='small']) > [part='splitter'] > [part='handle']
|
|
80
|
-
|
|
81
|
-
|
|
73
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle'] {
|
|
74
|
+
left: calc(50% - 0.5px);
|
|
75
|
+
top: calc(50% - 0.5px);
|
|
82
76
|
}
|
|
83
77
|
|
|
84
|
-
:host([theme~='small']) > [part='splitter']
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
:host([theme~='minimal']) > [part='splitter']:active > [part='handle']::after {
|
|
88
|
-
opacity: 1;
|
|
78
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle']::after {
|
|
79
|
+
opacity: 0;
|
|
80
|
+
--_handle-size: 5px;
|
|
89
81
|
}
|
|
90
82
|
|
|
91
|
-
|
|
92
|
-
:host([theme~='small'][
|
|
93
|
-
|
|
94
|
-
border-right: 1px solid var(--lumo-contrast-10pct);
|
|
83
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:hover > [part='handle']::after,
|
|
84
|
+
:host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:active > [part='handle']::after {
|
|
85
|
+
opacity: 1;
|
|
95
86
|
}
|
|
96
87
|
`,
|
|
97
88
|
{ moduleId: 'lumo-split-layout' },
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED