@vaadin/button 24.0.0-beta1 → 24.0.0-beta3
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 +10 -7
- package/src/vaadin-button-base.d.ts +13 -0
- package/src/vaadin-button-base.js +68 -0
- package/src/vaadin-button-mixin.js +2 -0
- package/src/vaadin-button.js +5 -61
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/button",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-beta3",
|
|
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/vaadin-lit-button.d.ts",
|
|
25
|
+
"!src/vaadin-lit-button.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -36,14 +38,15 @@
|
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
40
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "24.0.0-
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
41
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
41
|
+
"@vaadin/component-base": "24.0.0-beta3",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-beta3",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.0.0-beta3",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-beta3",
|
|
45
|
+
"lit": "^2.0.0"
|
|
43
46
|
},
|
|
44
47
|
"devDependencies": {
|
|
45
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
|
-
"@vaadin/icon": "24.0.0-
|
|
49
|
+
"@vaadin/icon": "24.0.0-beta3",
|
|
47
50
|
"@vaadin/testing-helpers": "^0.4.0",
|
|
48
51
|
"sinon": "^13.0.2"
|
|
49
52
|
},
|
|
@@ -51,5 +54,5 @@
|
|
|
51
54
|
"web-types.json",
|
|
52
55
|
"web-types.lit.json"
|
|
53
56
|
],
|
|
54
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "4daeac63327393aacd9cfaa5abeb031ea86b14a5"
|
|
55
58
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { CSSResult, TemplateResult } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const buttonStyles: CSSResult;
|
|
9
|
+
|
|
10
|
+
export function buttonTemplate<
|
|
11
|
+
T extends HTMLTemplateElement | TemplateResult,
|
|
12
|
+
F extends (strings: TemplateStringsArray, ...values: any[]) => T,
|
|
13
|
+
>(tag: F): T;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2023 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 buttonStyles = css`
|
|
9
|
+
:host {
|
|
10
|
+
display: inline-block;
|
|
11
|
+
position: relative;
|
|
12
|
+
outline: none;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
-webkit-user-select: none;
|
|
15
|
+
-moz-user-select: none;
|
|
16
|
+
user-select: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([hidden]) {
|
|
20
|
+
display: none !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Aligns the button with form fields when placed on the same line.
|
|
24
|
+
Note, to make it work, the form fields should have the same "::before" pseudo-element. */
|
|
25
|
+
.vaadin-button-container::before {
|
|
26
|
+
content: '\\2003';
|
|
27
|
+
display: inline-block;
|
|
28
|
+
width: 0;
|
|
29
|
+
max-height: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.vaadin-button-container {
|
|
33
|
+
display: inline-flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
text-align: center;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
min-height: inherit;
|
|
40
|
+
text-shadow: inherit;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[part='prefix'],
|
|
44
|
+
[part='suffix'] {
|
|
45
|
+
flex: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[part='label'] {
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
text-overflow: ellipsis;
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
54
|
+
|
|
55
|
+
export const buttonTemplate = (html) => html`
|
|
56
|
+
<div class="vaadin-button-container">
|
|
57
|
+
<span part="prefix" aria-hidden="true">
|
|
58
|
+
<slot name="prefix"></slot>
|
|
59
|
+
</span>
|
|
60
|
+
<span part="label">
|
|
61
|
+
<slot></slot>
|
|
62
|
+
</span>
|
|
63
|
+
<span part="suffix" aria-hidden="true">
|
|
64
|
+
<slot name="suffix"></slot>
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
|
+
<slot name="tooltip"></slot>
|
|
68
|
+
`;
|
package/src/vaadin-button.js
CHANGED
|
@@ -7,9 +7,12 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
|
7
7
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
9
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
+
import { buttonStyles, buttonTemplate } from './vaadin-button-base.js';
|
|
11
12
|
import { ButtonMixin } from './vaadin-button-mixin.js';
|
|
12
13
|
|
|
14
|
+
registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles' });
|
|
15
|
+
|
|
13
16
|
/**
|
|
14
17
|
* `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
|
|
15
18
|
*
|
|
@@ -50,66 +53,7 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
|
|
|
50
53
|
}
|
|
51
54
|
|
|
52
55
|
static get template() {
|
|
53
|
-
return html
|
|
54
|
-
<style>
|
|
55
|
-
:host {
|
|
56
|
-
display: inline-block;
|
|
57
|
-
position: relative;
|
|
58
|
-
outline: none;
|
|
59
|
-
white-space: nowrap;
|
|
60
|
-
-webkit-user-select: none;
|
|
61
|
-
-moz-user-select: none;
|
|
62
|
-
user-select: none;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
:host([hidden]) {
|
|
66
|
-
display: none !important;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Aligns the button with form fields when placed on the same line.
|
|
70
|
-
Note, to make it work, the form fields should have the same "::before" pseudo-element. */
|
|
71
|
-
.vaadin-button-container::before {
|
|
72
|
-
content: '\\2003';
|
|
73
|
-
display: inline-block;
|
|
74
|
-
width: 0;
|
|
75
|
-
max-height: 100%;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.vaadin-button-container {
|
|
79
|
-
display: inline-flex;
|
|
80
|
-
align-items: center;
|
|
81
|
-
justify-content: center;
|
|
82
|
-
text-align: center;
|
|
83
|
-
width: 100%;
|
|
84
|
-
height: 100%;
|
|
85
|
-
min-height: inherit;
|
|
86
|
-
text-shadow: inherit;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
[part='prefix'],
|
|
90
|
-
[part='suffix'] {
|
|
91
|
-
flex: none;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[part='label'] {
|
|
95
|
-
white-space: nowrap;
|
|
96
|
-
overflow: hidden;
|
|
97
|
-
text-overflow: ellipsis;
|
|
98
|
-
}
|
|
99
|
-
</style>
|
|
100
|
-
<div class="vaadin-button-container">
|
|
101
|
-
<span part="prefix" aria-hidden="true">
|
|
102
|
-
<slot name="prefix"></slot>
|
|
103
|
-
</span>
|
|
104
|
-
<span part="label">
|
|
105
|
-
<slot></slot>
|
|
106
|
-
</span>
|
|
107
|
-
<span part="suffix" aria-hidden="true">
|
|
108
|
-
<slot name="suffix"></slot>
|
|
109
|
-
</span>
|
|
110
|
-
</div>
|
|
111
|
-
<slot name="tooltip"></slot>
|
|
112
|
-
`;
|
|
56
|
+
return buttonTemplate(html);
|
|
113
57
|
}
|
|
114
58
|
|
|
115
59
|
/** @protected */
|
package/web-types.json
CHANGED