@neovici/cosmoz-dropdown 7.7.0 → 7.7.2-beta.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.
|
@@ -18,12 +18,15 @@ const style = css `
|
|
|
18
18
|
overflow: visible;
|
|
19
19
|
}
|
|
20
20
|
.wrap {
|
|
21
|
-
background: var(
|
|
22
|
-
|
|
23
|
-
--
|
|
24
|
-
0px 3px 4px 2px rgba(0, 0, 0, 0.1)
|
|
21
|
+
background: var(
|
|
22
|
+
--cosmoz-dropdown-menu-bg-color,
|
|
23
|
+
var(--cz-color-bg-primary)
|
|
25
24
|
);
|
|
26
|
-
|
|
25
|
+
box-shadow: var(--cosmoz-dropdown-box-shadow, var(--cz-shadow-sm));
|
|
26
|
+
padding: var(--cz-spacing) calc(var(--cz-spacing) * 1.5);
|
|
27
|
+
border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
|
|
28
|
+
border: 1px solid
|
|
29
|
+
var(--cosmoz-dropdown-menu-border-color, var(--cz-color-border-primary));
|
|
27
30
|
}
|
|
28
31
|
::slotted(*) {
|
|
29
32
|
display: block;
|
|
@@ -1,26 +1,34 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { component, css } from '@pionjs/pion';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
3
|
const style = css `
|
|
4
4
|
:host {
|
|
5
5
|
display: contents;
|
|
6
|
-
max-height: var(--cosmoz-dropdown-menu-max-height, calc(
|
|
6
|
+
max-height: var(--cosmoz-dropdown-menu-max-height, calc(96dvh - 64px));
|
|
7
|
+
background: var(
|
|
8
|
+
--cosmoz-dropdown-menu-bg-color,
|
|
9
|
+
var(--cz-color-bg-primary)
|
|
10
|
+
);
|
|
7
11
|
overflow-y: auto;
|
|
8
|
-
|
|
12
|
+
padding: var(--cz-spacing) calc(var(--cz-spacing) * 1.5);
|
|
13
|
+
border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
|
|
14
|
+
border: 1px solid
|
|
15
|
+
var(--cosmoz-dropdown-menu-border-color, var(--cz-color-border-primary));
|
|
9
16
|
}
|
|
10
17
|
::slotted(:not(slot)) {
|
|
11
18
|
display: block;
|
|
12
19
|
--paper-button_-_display: block;
|
|
13
20
|
box-sizing: border-box;
|
|
14
|
-
padding:
|
|
21
|
+
padding: calc(var(--cz-spacing) * 2) calc(var(--cz-spacing) * 2.5);
|
|
22
|
+
border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
|
|
15
23
|
background: var(--cosmoz-dropdown-menu-bg-color, transparent);
|
|
16
|
-
color: var(--cosmoz-dropdown-menu-color,
|
|
24
|
+
color: var(--cosmoz-dropdown-menu-color, var(--cz-color-text-primary));
|
|
17
25
|
transition:
|
|
18
26
|
background 0.25s,
|
|
19
27
|
color 0.25s;
|
|
20
28
|
border: none;
|
|
21
29
|
cursor: pointer;
|
|
22
|
-
font-size:
|
|
23
|
-
line-height:
|
|
30
|
+
font-size: var(--cz-text-sm);
|
|
31
|
+
line-height: var(--cz-text-sm-line-height);
|
|
24
32
|
text-align: left;
|
|
25
33
|
margin: 0;
|
|
26
34
|
width: 100%;
|
|
@@ -29,7 +37,7 @@ const style = css `
|
|
|
29
37
|
::slotted(:not(slot):hover) {
|
|
30
38
|
background: var(
|
|
31
39
|
--cosmoz-dropdown-menu-hover-color,
|
|
32
|
-
var(--
|
|
40
|
+
var(--cz-color-bg-secondary)
|
|
33
41
|
);
|
|
34
42
|
}
|
|
35
43
|
|
package/dist/cosmoz-dropdown.js
CHANGED
|
@@ -1,28 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import '@neovici/cosmoz-button';
|
|
2
|
+
import { component, css, useCallback, useEffect, useRef } from '@pionjs/pion';
|
|
2
3
|
import { html, nothing } from 'lit-html';
|
|
3
4
|
import { guard } from 'lit-html/directives/guard.js';
|
|
4
5
|
import { ref } from 'lit-html/directives/ref.js';
|
|
5
6
|
import { styleMap } from 'lit-html/directives/style-map.js';
|
|
6
|
-
import { when } from 'lit-html/directives/when.js';
|
|
7
7
|
import { Content } from './cosmoz-dropdown-content';
|
|
8
8
|
import { useFloating } from './use-floating';
|
|
9
9
|
import { useHostFocus } from './use-focus';
|
|
10
10
|
const preventDefault = (e) => e.preventDefault();
|
|
11
11
|
const style = css `
|
|
12
12
|
.anchor {
|
|
13
|
-
pointer-events: none;
|
|
14
13
|
padding: var(--cosmoz-dropdown-anchor-spacing);
|
|
15
14
|
}
|
|
16
|
-
|
|
17
|
-
pointer-events: auto;
|
|
18
|
-
border: none;
|
|
19
|
-
cursor: pointer;
|
|
20
|
-
background: transparent;
|
|
21
|
-
padding: 0;
|
|
22
|
-
}
|
|
23
|
-
::slotted(svg) {
|
|
24
|
-
pointer-events: none;
|
|
25
|
-
}
|
|
15
|
+
|
|
26
16
|
@-moz-document url-prefix() {
|
|
27
17
|
#content {
|
|
28
18
|
left: auto;
|
|
@@ -32,31 +22,49 @@ const style = css `
|
|
|
32
22
|
const Dropdown = (host) => {
|
|
33
23
|
const { placement, strategy, middleware, render } = host;
|
|
34
24
|
const { active, onToggle } = useHostFocus(host);
|
|
25
|
+
const contentRef = useRef();
|
|
35
26
|
const { styles, setReference, setFloating } = useFloating({
|
|
36
27
|
placement,
|
|
37
28
|
strategy,
|
|
38
29
|
middleware,
|
|
39
30
|
});
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
const setContent = useCallback((el) => {
|
|
32
|
+
contentRef.current = el;
|
|
33
|
+
setFloating(el);
|
|
34
|
+
}, [setFloating]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const content = contentRef.current;
|
|
37
|
+
if (!content) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (active && !content.matches(':popover-open')) {
|
|
41
|
+
content.showPopover?.();
|
|
42
|
+
}
|
|
43
|
+
if (!active && content.matches(':popover-open')) {
|
|
44
|
+
content.hidePopover?.();
|
|
45
|
+
}
|
|
46
|
+
}, [active]);
|
|
47
|
+
return html `
|
|
48
|
+
<div class="anchor" part="anchor" ${ref(setReference)}>
|
|
49
|
+
<cosmoz-button
|
|
42
50
|
@mousedown=${preventDefault}
|
|
43
51
|
@click=${onToggle}
|
|
44
52
|
part="button"
|
|
45
53
|
id="dropdownButton"
|
|
46
54
|
>
|
|
47
55
|
<slot name="button">...</slot>
|
|
48
|
-
</button>
|
|
56
|
+
</cosmoz-button>
|
|
49
57
|
</div>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
<cosmoz-dropdown-content
|
|
59
|
+
popover
|
|
60
|
+
id="content"
|
|
61
|
+
part="content"
|
|
62
|
+
exportparts="wrap, content"
|
|
63
|
+
style="${styleMap(styles)}"
|
|
64
|
+
${ref(setContent)}
|
|
65
|
+
><slot></slot>${guard([render], () => render?.() || nothing)}</cosmoz-dropdown-content
|
|
66
|
+
>
|
|
67
|
+
`;
|
|
60
68
|
};
|
|
61
69
|
customElements.define('cosmoz-dropdown', component(Dropdown, { styleSheets: [style] }));
|
|
62
70
|
export { Content, Dropdown };
|
|
@@ -95,11 +95,11 @@ const CosmozDropdownNext = (host) => {
|
|
|
95
95
|
if (disabled)
|
|
96
96
|
return;
|
|
97
97
|
setOpened(true);
|
|
98
|
-
popoverRef.current?.showPopover();
|
|
98
|
+
popoverRef.current?.showPopover?.();
|
|
99
99
|
}, [disabled]);
|
|
100
100
|
const close = useCallback(() => {
|
|
101
101
|
setOpened(false);
|
|
102
|
-
popoverRef.current?.hidePopover();
|
|
102
|
+
popoverRef.current?.hidePopover?.();
|
|
103
103
|
}, []);
|
|
104
104
|
const toggle = useCallback(() => {
|
|
105
105
|
if (disabled)
|
|
@@ -116,9 +116,9 @@ const CosmozDropdownNext = (host) => {
|
|
|
116
116
|
if (!popover)
|
|
117
117
|
return;
|
|
118
118
|
if (opened)
|
|
119
|
-
popover.showPopover();
|
|
119
|
+
popover.showPopover?.();
|
|
120
120
|
else
|
|
121
|
-
popover.hidePopover();
|
|
121
|
+
popover.hidePopover?.();
|
|
122
122
|
}, [opened]);
|
|
123
123
|
useEffect(() => {
|
|
124
124
|
host.toggleAttribute('opened', !!opened);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-dropdown",
|
|
3
|
-
"version": "7.7.0",
|
|
3
|
+
"version": "7.7.2-beta.0",
|
|
4
4
|
"description": "A simple dropdown web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
@@ -33,20 +33,9 @@
|
|
|
33
33
|
"storybook:build": "storybook build",
|
|
34
34
|
"storybook:deploy": "storybook-to-ghpages",
|
|
35
35
|
"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
|
|
36
|
+
"changeset": "changeset",
|
|
36
37
|
"prepare": "husky"
|
|
37
38
|
},
|
|
38
|
-
"release": {
|
|
39
|
-
"plugins": [
|
|
40
|
-
"@semantic-release/commit-analyzer",
|
|
41
|
-
"@semantic-release/release-notes-generator",
|
|
42
|
-
"@semantic-release/changelog",
|
|
43
|
-
"@semantic-release/github",
|
|
44
|
-
"@semantic-release/npm",
|
|
45
|
-
"@semantic-release/git"
|
|
46
|
-
],
|
|
47
|
-
"branch": "master",
|
|
48
|
-
"preset": "conventionalcommits"
|
|
49
|
-
},
|
|
50
39
|
"publishConfig": {
|
|
51
40
|
"access": "public"
|
|
52
41
|
},
|
|
@@ -81,15 +70,14 @@
|
|
|
81
70
|
"lit-html": "^3.1.2"
|
|
82
71
|
},
|
|
83
72
|
"devDependencies": {
|
|
73
|
+
"@changesets/cli": "^2.27.0",
|
|
84
74
|
"@commitlint/cli": "^20.0.0",
|
|
85
75
|
"@commitlint/config-conventional": "^20.0.0",
|
|
86
76
|
"@neovici/cfg": "^2.13.0",
|
|
87
|
-
"@neovici/cosmoz-button": "^1.
|
|
77
|
+
"@neovici/cosmoz-button": "^1.1.1",
|
|
88
78
|
"@neovici/cosmoz-tokens": "^3.2.1",
|
|
89
79
|
"@open-wc/testing": "^4.0.0",
|
|
90
80
|
"@playwright/test": "1.60.0",
|
|
91
|
-
"@semantic-release/changelog": "^6.0.0",
|
|
92
|
-
"@semantic-release/git": "^10.0.0",
|
|
93
81
|
"@storybook/addon-docs": "^10.0.0",
|
|
94
82
|
"@storybook/addon-vitest": "^10.2.4",
|
|
95
83
|
"@storybook/web-components-vite": "^10.0.0",
|
|
@@ -103,7 +91,6 @@
|
|
|
103
91
|
"lint-staged": "^16.2.7",
|
|
104
92
|
"playwright": "1.60.0",
|
|
105
93
|
"rollup-plugin-esbuild": "^6.1.1",
|
|
106
|
-
"semantic-release": "^25.0.0",
|
|
107
94
|
"shadow-dom-testing-library": "^1.13.1",
|
|
108
95
|
"sinon": "^21.0.0",
|
|
109
96
|
"storybook": "^10.0.0",
|