@umbraco-ui/uui-menu-item 0.1.1 → 1.0.0-alpha.0
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/lib/index.js +56 -55
- package/lib/uui-menu-item.element.d.ts +1 -0
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
|
|
|
3
3
|
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
|
|
4
4
|
import { LitElement, html, css } from 'lit';
|
|
5
5
|
import { property, state } from 'lit/decorators.js';
|
|
6
|
+
import { ref } from 'lit/directives/ref.js';
|
|
6
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
8
|
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
|
|
8
9
|
|
|
@@ -32,6 +33,9 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
|
|
|
32
33
|
this.loading = false;
|
|
33
34
|
this.iconSlotHasContent = false;
|
|
34
35
|
}
|
|
36
|
+
labelButtonChanged(label) {
|
|
37
|
+
this.selectableTarget = label || this;
|
|
38
|
+
}
|
|
35
39
|
connectedCallback() {
|
|
36
40
|
super.connectedCallback();
|
|
37
41
|
if (!this.hasAttribute("role"))
|
|
@@ -63,12 +67,13 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
|
|
|
63
67
|
}
|
|
64
68
|
_renderLabelAsAnchor() {
|
|
65
69
|
if (this.disabled) {
|
|
66
|
-
return html` <span id="label-button">
|
|
70
|
+
return html` <span id="label-button" ${ref(this.labelButtonChanged)}>
|
|
67
71
|
${this._renderLabelInside()}
|
|
68
72
|
</span>`;
|
|
69
73
|
}
|
|
70
74
|
return html` <a
|
|
71
75
|
id="label-button"
|
|
76
|
+
${ref(this.labelButtonChanged)}
|
|
72
77
|
href=${ifDefined(this.href)}
|
|
73
78
|
target=${ifDefined(this.target || void 0)}
|
|
74
79
|
rel=${ifDefined(this.target === "_blank" ? "noopener" : void 0)}
|
|
@@ -81,6 +86,7 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
|
|
|
81
86
|
_renderLabelAsButton() {
|
|
82
87
|
return html` <button
|
|
83
88
|
id="label-button"
|
|
89
|
+
${ref(this.labelButtonChanged)}
|
|
84
90
|
@click=${this.onLabelClicked}
|
|
85
91
|
?disabled=${this.disabled}
|
|
86
92
|
aria-label="${this.label}">
|
|
@@ -114,15 +120,61 @@ UUIMenuItemElement.styles = [
|
|
|
114
120
|
|
|
115
121
|
#menu-item {
|
|
116
122
|
position: relative;
|
|
117
|
-
|
|
118
123
|
padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4,12px));
|
|
119
|
-
|
|
120
124
|
display: grid;
|
|
121
125
|
grid-template-columns: var(--uui-size-8,24px) 1fr;
|
|
122
126
|
grid-template-rows: 1fr;
|
|
123
127
|
white-space: nowrap;
|
|
124
128
|
}
|
|
125
129
|
|
|
130
|
+
:host(:not([active], [selected], [disabled]))
|
|
131
|
+
#menu-item
|
|
132
|
+
#label-button:hover
|
|
133
|
+
~ #label-button-background,
|
|
134
|
+
:host(:not([active], [selected], [disabled]))
|
|
135
|
+
#menu-item
|
|
136
|
+
#caret-button:hover {
|
|
137
|
+
background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
|
|
138
|
+
}
|
|
139
|
+
:host(:not([active], [selected], [disabled]))
|
|
140
|
+
#menu-item
|
|
141
|
+
#label-button:hover,
|
|
142
|
+
:host(:not([active], [selected])) #menu-item #caret-button:hover {
|
|
143
|
+
color: var(--uui-color-interactive-emphasis,#3544b1);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
:host([active]) #label-button,
|
|
147
|
+
:host([active]) #caret-button {
|
|
148
|
+
color: var(--uui-color-current-contrast,#1b264f);
|
|
149
|
+
}
|
|
150
|
+
:host([active]) #label-button-background {
|
|
151
|
+
background-color: var(--uui-color-current,#f5c1bc);
|
|
152
|
+
}
|
|
153
|
+
:host([active]) #label-button:hover ~ #label-button-background,
|
|
154
|
+
:host([active]) #caret-button:hover {
|
|
155
|
+
background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([selected]) #label-button,
|
|
159
|
+
:host([selected]) #caret-button {
|
|
160
|
+
color: var(--uui-color-selected-contrast,#fff);
|
|
161
|
+
}
|
|
162
|
+
:host([selected]) #label-button-background {
|
|
163
|
+
background-color: var(--uui-color-selected,#3544b1);
|
|
164
|
+
}
|
|
165
|
+
:host([selected]) #label-button:hover ~ #label-button-background,
|
|
166
|
+
:host([selected]) #caret-button:hover {
|
|
167
|
+
background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
:host([disabled]) #menu-item {
|
|
171
|
+
color: var(--uui-color-disabled-contrast,#c4c4c4);
|
|
172
|
+
background-color: var(--uui-color-disabled,#f3f3f5);
|
|
173
|
+
}
|
|
174
|
+
:host([disabled]) #label-button {
|
|
175
|
+
cursor: default;
|
|
176
|
+
}
|
|
177
|
+
|
|
126
178
|
button {
|
|
127
179
|
display: inline-flex;
|
|
128
180
|
align-items: center;
|
|
@@ -139,9 +191,6 @@ UUIMenuItemElement.styles = [
|
|
|
139
191
|
min-height: var(--uui-size-12,36px);
|
|
140
192
|
z-index: 1;
|
|
141
193
|
}
|
|
142
|
-
/* button:hover {
|
|
143
|
-
color: var(--uui-interface-contrast-hover);
|
|
144
|
-
} */
|
|
145
194
|
|
|
146
195
|
#label-button {
|
|
147
196
|
flex-grow: 1;
|
|
@@ -176,6 +225,7 @@ UUIMenuItemElement.styles = [
|
|
|
176
225
|
display: flex;
|
|
177
226
|
align-items: center;
|
|
178
227
|
justify-content: center;
|
|
228
|
+
color: var(--uui-color-interactive,#1b264f);
|
|
179
229
|
}
|
|
180
230
|
|
|
181
231
|
#label-button-background {
|
|
@@ -185,10 +235,6 @@ UUIMenuItemElement.styles = [
|
|
|
185
235
|
right: 0;
|
|
186
236
|
bottom: 0;
|
|
187
237
|
}
|
|
188
|
-
#label-button:hover + #label-button-background,
|
|
189
|
-
#caret-button:hover ~ #label-button-background {
|
|
190
|
-
background-color: var(--uui-interface-surface-hover,rgb(250, 250, 250));
|
|
191
|
-
}
|
|
192
238
|
|
|
193
239
|
#actions-container {
|
|
194
240
|
opacity: 0;
|
|
@@ -221,51 +267,6 @@ UUIMenuItemElement.styles = [
|
|
|
221
267
|
margin-left: 6px;
|
|
222
268
|
}
|
|
223
269
|
|
|
224
|
-
:host([disabled]) {
|
|
225
|
-
color: var(--uui-interface-surface-contrast-disabled);
|
|
226
|
-
}
|
|
227
|
-
:host([disabled]) #label-button-background {
|
|
228
|
-
background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
|
|
229
|
-
}
|
|
230
|
-
:host([disabled]) #label-button:hover + #label-button-background {
|
|
231
|
-
background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
:host([active]) {
|
|
235
|
-
color: var(--uui-interface-active-contrast,#162335);
|
|
236
|
-
}
|
|
237
|
-
:host([active]) #label-button:hover {
|
|
238
|
-
color: var(--uui-interface-active-contrast-hover,#1b264f);
|
|
239
|
-
}
|
|
240
|
-
:host([active]) #label-button-background {
|
|
241
|
-
background-color: var(--uui-interface-active,#f5c1bc);
|
|
242
|
-
}
|
|
243
|
-
:host([active]) #label-button:hover + #label-button-background {
|
|
244
|
-
background-color: var(--uui-interface-active-hover,#f5c1bc);
|
|
245
|
-
}
|
|
246
|
-
:host([active][disabled]) #label-button {
|
|
247
|
-
color: var(--uui-interface-active-contrast-disabled,rgb(54, 54, 54));
|
|
248
|
-
background-color: var(--uui-interface-active-disabled,rgb(219, 212, 212));
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
:host([selected]) {
|
|
252
|
-
color: var(--uui-interface-select-contrast,#fefefe);
|
|
253
|
-
}
|
|
254
|
-
:host([selected]) #label-button:hover {
|
|
255
|
-
color: var(--uui-interface-select-contrast-hover,#fefefe);
|
|
256
|
-
}
|
|
257
|
-
:host([selected]) #label-button-background {
|
|
258
|
-
background-color: var(--uui-interface-select,#3544b1);
|
|
259
|
-
}
|
|
260
|
-
:host([selected]) #label-button:hover + #label-button-background,
|
|
261
|
-
:host([selected]) #caret-button:hover ~ #label-button-background {
|
|
262
|
-
background-color: var(--uui-interface-select-hover,rgb(70, 86, 200));
|
|
263
|
-
}
|
|
264
|
-
:host([selected][disabled]) #label-button {
|
|
265
|
-
color: var(--uui-interface-select-contrast-disabled,rgb(228, 228, 228));
|
|
266
|
-
background-color: var(--uui-interface-select-disabled,rgb(87, 87, 87));
|
|
267
|
-
}
|
|
268
|
-
|
|
269
270
|
slot:not([name]) {
|
|
270
271
|
position: relative;
|
|
271
272
|
display: block;
|
|
@@ -56,6 +56,7 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
|
|
|
56
56
|
*/
|
|
57
57
|
target?: '_blank' | '_parent' | '_self' | '_top';
|
|
58
58
|
private iconSlotHasContent;
|
|
59
|
+
labelButtonChanged(label?: Element | undefined): void;
|
|
59
60
|
connectedCallback(): void;
|
|
60
61
|
private iconSlotChanged;
|
|
61
62
|
private onCaretClicked;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-menu-item",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-alpha.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "0.
|
|
34
|
-
"@umbraco-ui/uui-loader-bar": "0.
|
|
35
|
-
"@umbraco-ui/uui-symbol-expand": "0.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.0.0-alpha.0",
|
|
34
|
+
"@umbraco-ui/uui-loader-bar": "1.0.0-alpha.0",
|
|
35
|
+
"@umbraco-ui/uui-symbol-expand": "1.0.0-alpha.0"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
|
|
47
47
|
}
|