@neovici/cosmoz-dropdown 4.2.0 → 4.4.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/dist/cosmoz-dropdown.js +32 -9
- package/package.json +1 -1
package/dist/cosmoz-dropdown.js
CHANGED
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import { component, useCallback } from '@pionjs/pion';
|
|
2
2
|
import { html, nothing } from 'lit-html';
|
|
3
3
|
import { when } from 'lit-html/directives/when.js';
|
|
4
|
+
import { ref } from 'lit-html/directives/ref.js';
|
|
4
5
|
import { usePosition } from './use-position';
|
|
5
6
|
import { useHostFocus } from './use-focus';
|
|
6
7
|
const preventDefault = (e) => e.preventDefault();
|
|
8
|
+
const supportsPopover = () => {
|
|
9
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
10
|
+
return HTMLElement.prototype.hasOwnProperty('popover');
|
|
11
|
+
};
|
|
12
|
+
const showPopover = (popover) => {
|
|
13
|
+
const popoverElement = popover;
|
|
14
|
+
if (supportsPopover()) {
|
|
15
|
+
requestAnimationFrame(() => {
|
|
16
|
+
popoverElement?.showPopover();
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
};
|
|
7
20
|
const Content = (host) => {
|
|
8
21
|
const { anchor, placement, render } = host;
|
|
9
22
|
usePosition({ anchor, placement, host });
|
|
@@ -16,6 +29,12 @@ const Content = (host) => {
|
|
|
16
29
|
padding: var(--cosmoz-dropdown-spacing, 0px);
|
|
17
30
|
z-index: var(--cosmoz-dropdown-z-index, 2);
|
|
18
31
|
}
|
|
32
|
+
:host(:popover-open) {
|
|
33
|
+
margin: 0;
|
|
34
|
+
border: 0;
|
|
35
|
+
/* The padding is needed to show the box shadow in Chrome */
|
|
36
|
+
padding: 4px;
|
|
37
|
+
}
|
|
19
38
|
.wrap {
|
|
20
39
|
background: var(--cosmoz-dropdown-bg-color, #fff);
|
|
21
40
|
box-shadow: var(
|
|
@@ -86,7 +105,9 @@ const Dropdown = (host) => {
|
|
|
86
105
|
<slot name="button">...</slot>
|
|
87
106
|
</button>
|
|
88
107
|
</div>
|
|
89
|
-
${when(active, () => html
|
|
108
|
+
${when(active, () => html `<cosmoz-dropdown-content
|
|
109
|
+
${ref(showPopover)}
|
|
110
|
+
popover
|
|
90
111
|
id="content"
|
|
91
112
|
part="content"
|
|
92
113
|
exportparts="wrap, content"
|
|
@@ -111,7 +132,9 @@ const List = () => html `
|
|
|
111
132
|
padding: 10px 24px;
|
|
112
133
|
background: transparent;
|
|
113
134
|
color: var(--cosmoz-dropdown-menu-color, #101010);
|
|
114
|
-
transition:
|
|
135
|
+
transition:
|
|
136
|
+
background 0.25s,
|
|
137
|
+
color 0.25s;
|
|
115
138
|
border: none;
|
|
116
139
|
cursor: pointer;
|
|
117
140
|
font-size: 14px;
|
|
@@ -136,13 +159,13 @@ const List = () => html `
|
|
|
136
159
|
<slot></slot>
|
|
137
160
|
`;
|
|
138
161
|
const Menu = ({ placement }) => html ` <cosmoz-dropdown
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
</cosmoz-dropdown>`;
|
|
162
|
+
.placement=${placement}
|
|
163
|
+
part="dropdown"
|
|
164
|
+
exportparts="anchor, button, content, wrap, dropdown"
|
|
165
|
+
>
|
|
166
|
+
<slot name="button" slot="button"></slot>
|
|
167
|
+
<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
|
|
168
|
+
</cosmoz-dropdown>`;
|
|
146
169
|
customElements.define('cosmoz-dropdown-content', component(Content));
|
|
147
170
|
customElements.define('cosmoz-dropdown', component(Dropdown));
|
|
148
171
|
customElements.define('cosmoz-dropdown-list', component(List));
|