@vaadin/select 23.0.6 → 23.1.0-alpha3
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 +15 -15
- package/src/vaadin-select-value-button.js +60 -39
- package/src/vaadin-select.js +2 -3
- package/theme/lumo/vaadin-select-styles.js +7 -13
- package/theme/lumo/vaadin-select.js +0 -1
- package/theme/material/vaadin-select-styles.js +2 -7
- package/theme/material/vaadin-select.js +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/select",
|
|
3
|
-
"version": "23.0
|
|
3
|
+
"version": "23.1.0-alpha3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,24 +34,24 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@polymer/polymer": "^3.2.0",
|
|
37
|
-
"@vaadin/button": "
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/field-base": "
|
|
40
|
-
"@vaadin/input-container": "
|
|
41
|
-
"@vaadin/item": "
|
|
42
|
-
"@vaadin/list-box": "
|
|
43
|
-
"@vaadin/vaadin-list-mixin": "
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
45
|
-
"@vaadin/vaadin-material-styles": "
|
|
46
|
-
"@vaadin/vaadin-overlay": "
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
37
|
+
"@vaadin/button": "23.1.0-alpha3",
|
|
38
|
+
"@vaadin/component-base": "23.1.0-alpha3",
|
|
39
|
+
"@vaadin/field-base": "23.1.0-alpha3",
|
|
40
|
+
"@vaadin/input-container": "23.1.0-alpha3",
|
|
41
|
+
"@vaadin/item": "23.1.0-alpha3",
|
|
42
|
+
"@vaadin/list-box": "23.1.0-alpha3",
|
|
43
|
+
"@vaadin/vaadin-list-mixin": "23.1.0-alpha3",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "23.1.0-alpha3",
|
|
46
|
+
"@vaadin/vaadin-overlay": "23.1.0-alpha3",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
51
|
-
"@vaadin/polymer-legacy-adapter": "
|
|
51
|
+
"@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
|
|
52
52
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
53
53
|
"lit": "^2.0.0",
|
|
54
|
-
"sinon": "^
|
|
54
|
+
"sinon": "^13.0.2"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
|
|
57
57
|
}
|
|
@@ -3,54 +3,75 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
registerStyles(
|
|
10
|
-
'vaadin-select-value-button',
|
|
11
|
-
css`
|
|
12
|
-
:host {
|
|
13
|
-
margin: 0;
|
|
14
|
-
min-width: 0;
|
|
15
|
-
width: 0;
|
|
16
|
-
height: auto;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
::slotted(:not([slot])) {
|
|
20
|
-
padding-left: 0;
|
|
21
|
-
padding-right: 0;
|
|
22
|
-
flex: auto;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* placeholder styles */
|
|
26
|
-
::slotted(:not([slot]):not([selected])) {
|
|
27
|
-
line-height: 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* TODO: unsupported selector */
|
|
31
|
-
.vaadin-button-container {
|
|
32
|
-
text-align: inherit;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
[part='label'] {
|
|
36
|
-
width: 100%;
|
|
37
|
-
padding: 0;
|
|
38
|
-
line-height: inherit;
|
|
39
|
-
}
|
|
40
|
-
`,
|
|
41
|
-
{ moduleId: 'vaadin-select-value-button-styles' }
|
|
42
|
-
);
|
|
6
|
+
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
8
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
43
9
|
|
|
44
10
|
/**
|
|
45
11
|
* An element used internally by `<vaadin-select>`. Not intended to be used separately.
|
|
46
12
|
*
|
|
47
|
-
* @extends
|
|
13
|
+
* @extends HTMLElement
|
|
14
|
+
* @mixes ButtonMixin
|
|
15
|
+
* @mixes ThemableMixin
|
|
48
16
|
* @protected
|
|
49
17
|
*/
|
|
50
|
-
class SelectValueButton extends
|
|
18
|
+
class SelectValueButton extends ButtonMixin(ThemableMixin(PolymerElement)) {
|
|
51
19
|
static get is() {
|
|
52
20
|
return 'vaadin-select-value-button';
|
|
53
21
|
}
|
|
22
|
+
|
|
23
|
+
static get template() {
|
|
24
|
+
return html`
|
|
25
|
+
<style>
|
|
26
|
+
:host {
|
|
27
|
+
display: inline-block;
|
|
28
|
+
position: relative;
|
|
29
|
+
outline: none;
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
-webkit-user-select: none;
|
|
32
|
+
-moz-user-select: none;
|
|
33
|
+
user-select: none;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
width: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
::slotted(*) {
|
|
39
|
+
padding-left: 0;
|
|
40
|
+
padding-right: 0;
|
|
41
|
+
flex: auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* placeholder styles */
|
|
45
|
+
::slotted(*:not([selected])) {
|
|
46
|
+
line-height: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.vaadin-button-container {
|
|
50
|
+
display: inline-flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
text-align: inherit;
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: 100%;
|
|
56
|
+
min-height: inherit;
|
|
57
|
+
text-shadow: inherit;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
[part='label'] {
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
width: 100%;
|
|
65
|
+
line-height: inherit;
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
<div class="vaadin-button-container">
|
|
69
|
+
<span part="label">
|
|
70
|
+
<slot></slot>
|
|
71
|
+
</span>
|
|
72
|
+
</div>
|
|
73
|
+
`;
|
|
74
|
+
}
|
|
54
75
|
}
|
|
55
76
|
|
|
56
77
|
customElements.define(SelectValueButton.is, SelectValueButton);
|
package/src/vaadin-select.js
CHANGED
|
@@ -142,7 +142,6 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
|
|
|
142
142
|
<style>
|
|
143
143
|
::slotted([slot='value']) {
|
|
144
144
|
flex-grow: 1;
|
|
145
|
-
background-color: transparent;
|
|
146
145
|
}
|
|
147
146
|
</style>
|
|
148
147
|
|
|
@@ -157,7 +156,7 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
|
|
|
157
156
|
readonly="[[readonly]]"
|
|
158
157
|
disabled="[[disabled]]"
|
|
159
158
|
invalid="[[invalid]]"
|
|
160
|
-
theme$="[[
|
|
159
|
+
theme$="[[_theme]]"
|
|
161
160
|
on-click="_onClick"
|
|
162
161
|
>
|
|
163
162
|
<slot name="prefix" slot="prefix"></slot>
|
|
@@ -179,7 +178,7 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
|
|
|
179
178
|
opened="{{opened}}"
|
|
180
179
|
with-backdrop="[[_phone]]"
|
|
181
180
|
phone$="[[_phone]]"
|
|
182
|
-
theme$="[[
|
|
181
|
+
theme$="[[_theme]]"
|
|
183
182
|
></vaadin-select-overlay>
|
|
184
183
|
`;
|
|
185
184
|
}
|
|
@@ -48,7 +48,7 @@ const select = css`
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
:host([theme~='small']) [part='input-field'] ::slotted([slot='value']) {
|
|
51
|
-
--
|
|
51
|
+
--_lumo-selected-item-height: var(--lumo-size-s);
|
|
52
52
|
--_lumo-selected-item-padding: 0;
|
|
53
53
|
}
|
|
54
54
|
`;
|
|
@@ -59,26 +59,20 @@ registerStyles(
|
|
|
59
59
|
'vaadin-select-value-button',
|
|
60
60
|
css`
|
|
61
61
|
:host {
|
|
62
|
+
font-family: var(--lumo-font-family);
|
|
63
|
+
font-size: var(--lumo-font-size-m);
|
|
62
64
|
padding: 0 0.25em;
|
|
65
|
+
--_lumo-selected-item-height: var(--lumo-size-m);
|
|
63
66
|
--_lumo-selected-item-padding: 0.5em;
|
|
64
67
|
}
|
|
65
68
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
display: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:host([focus-ring]) {
|
|
72
|
-
box-shadow: none;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
::slotted(:not([slot])) {
|
|
76
|
-
min-height: var(--lumo-button-size);
|
|
69
|
+
::slotted(*) {
|
|
70
|
+
min-height: var(--_lumo-selected-item-height);
|
|
77
71
|
padding-top: var(--_lumo-selected-item-padding);
|
|
78
72
|
padding-bottom: var(--_lumo-selected-item-padding);
|
|
79
73
|
}
|
|
80
74
|
|
|
81
|
-
::slotted(
|
|
75
|
+
::slotted(*:hover) {
|
|
82
76
|
background-color: transparent;
|
|
83
77
|
}
|
|
84
78
|
`,
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/button/theme/lumo/vaadin-button.js';
|
|
7
6
|
import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
|
|
8
7
|
import '@vaadin/item/theme/lumo/vaadin-item.js';
|
|
9
8
|
import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
|
|
@@ -49,17 +49,12 @@ registerStyles(
|
|
|
49
49
|
text-transform: none;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
:host::after {
|
|
54
|
-
display: none;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
::slotted(:not([slot])) {
|
|
52
|
+
::slotted(*) {
|
|
58
53
|
font: inherit;
|
|
59
54
|
padding: 4px 0;
|
|
60
55
|
}
|
|
61
56
|
|
|
62
|
-
::slotted(
|
|
57
|
+
::slotted(*:hover) {
|
|
63
58
|
background-color: transparent;
|
|
64
59
|
}
|
|
65
60
|
`,
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '@vaadin/button/theme/material/vaadin-button.js';
|
|
7
6
|
import '@vaadin/input-container/theme/material/vaadin-input-container.js';
|
|
8
7
|
import '@vaadin/item/theme/material/vaadin-item.js';
|
|
9
8
|
import '@vaadin/list-box/theme/material/vaadin-list-box.js';
|