@neovici/cosmoz-dropdown 7.6.1 → 7.7.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/README.md +20 -0
- package/dist/next/cosmoz-dropdown-next.js +15 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,8 @@ Modern dropdown using the Popover API and CSS Anchor Positioning.
|
|
|
32
32
|
| Property | Type | Default | Description |
|
|
33
33
|
| --------------- | --------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
34
34
|
| `placement` | `string` | `'bottom span-right'` | CSS anchor `position-area` value. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-area) for options. |
|
|
35
|
+
| `disabled` | `boolean` | `false` | Prevents the dropdown from opening. |
|
|
36
|
+
| `passthrough` | `boolean` | `false` | When `disabled` + `passthrough`, render default slot content inline instead of inside the popover. |
|
|
35
37
|
| `open-on-hover` | `boolean` | `false` | Open on pointer hover. |
|
|
36
38
|
| `open-on-focus` | `boolean` | `false` | Open when the trigger receives focus. |
|
|
37
39
|
|
|
@@ -65,6 +67,24 @@ When auto-open is enabled:
|
|
|
65
67
|
- When `open-on-focus` is active, clicking the button only opens (does not toggle)
|
|
66
68
|
- Otherwise, click works as a toggle
|
|
67
69
|
|
|
70
|
+
#### Disabled + Passthrough
|
|
71
|
+
|
|
72
|
+
When `disabled` and `passthrough` are both set, the default slot content renders in normal document flow (outside the popover). This enables using the dropdown as a conditional wrapper — popover mode when enabled, inline mode when disabled:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<!-- Dropdown mode (enabled) -->
|
|
76
|
+
<cosmoz-dropdown-next placement="bottom span-right">
|
|
77
|
+
<button slot="button">Menu</button>
|
|
78
|
+
<div>Popover content</div>
|
|
79
|
+
</cosmoz-dropdown-next>
|
|
80
|
+
|
|
81
|
+
<!-- Inline mode (disabled + passthrough) -->
|
|
82
|
+
<cosmoz-dropdown-next disabled passthrough>
|
|
83
|
+
<button slot="button">Menu</button>
|
|
84
|
+
<div>Rendered inline, not inside a popover</div>
|
|
85
|
+
</cosmoz-dropdown-next>
|
|
86
|
+
```
|
|
87
|
+
|
|
68
88
|
#### Slots
|
|
69
89
|
|
|
70
90
|
| Slot | Description |
|
|
@@ -85,7 +85,7 @@ const style = css `
|
|
|
85
85
|
}
|
|
86
86
|
`;
|
|
87
87
|
const CosmozDropdownNext = (host) => {
|
|
88
|
-
const { placement = 'bottom span-right', disabled, openOnHover, openOnFocus, } = host;
|
|
88
|
+
const { placement = 'bottom span-right', disabled, passthrough, openOnHover, openOnFocus, } = host;
|
|
89
89
|
const popoverRef = useRef();
|
|
90
90
|
const [opened, setOpened] = useProperty('opened', false);
|
|
91
91
|
// Call showPopover/hidePopover synchronously so the browser associates
|
|
@@ -146,17 +146,19 @@ const CosmozDropdownNext = (host) => {
|
|
|
146
146
|
}, []);
|
|
147
147
|
return html `
|
|
148
148
|
<slot name="button" @click=${handleClick}></slot>
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
149
|
+
${disabled && passthrough
|
|
150
|
+
? html `<slot></slot>`
|
|
151
|
+
: html `<div
|
|
152
|
+
popover
|
|
153
|
+
style="position-area: ${placement}"
|
|
154
|
+
@toggle=${onToggle}
|
|
155
|
+
@select=${close}
|
|
156
|
+
@focusout=${scheduleClose}
|
|
157
|
+
@focusin=${cancelClose}
|
|
158
|
+
${ref((el) => el && (popoverRef.current = el))}
|
|
159
|
+
>
|
|
160
|
+
<slot></slot>
|
|
161
|
+
</div>`}
|
|
160
162
|
`;
|
|
161
163
|
};
|
|
162
164
|
customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
|
|
@@ -164,6 +166,7 @@ customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
|
|
|
164
166
|
observedAttributes: [
|
|
165
167
|
'placement',
|
|
166
168
|
'disabled',
|
|
169
|
+
'passthrough',
|
|
167
170
|
'open-on-hover',
|
|
168
171
|
'open-on-focus',
|
|
169
172
|
],
|