noph-ui 0.12.8 → 0.12.9
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/menu/Menu.svelte +24 -14
- package/dist/select/Select.svelte +0 -1
- package/package.json +1 -1
package/dist/menu/Menu.svelte
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
let clientWidth = $state(0)
|
|
14
14
|
let clientHeight = $state(0)
|
|
15
15
|
let innerHeight = $state(0)
|
|
16
|
+
let menuOpen = $state(false)
|
|
16
17
|
|
|
17
18
|
showPopover = () => {
|
|
18
19
|
element?.showPopover()
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
const refreshValues = () => {
|
|
26
|
-
if (element && anchor) {
|
|
27
|
+
if (element && anchor && menuOpen) {
|
|
27
28
|
const anchorRect = anchor.getBoundingClientRect()
|
|
28
29
|
let maxHeight: number
|
|
29
30
|
if (innerHeight - anchorRect.bottom > anchorRect.top) {
|
|
@@ -33,8 +34,8 @@
|
|
|
33
34
|
}
|
|
34
35
|
element.style.maxHeight =
|
|
35
36
|
maxHeight > innerHeight - anchorRect.height
|
|
36
|
-
? `${innerHeight - anchorRect.height -
|
|
37
|
-
: `${maxHeight -
|
|
37
|
+
? `${innerHeight - anchorRect.height - 4}px`
|
|
38
|
+
: `${maxHeight - 4}px`
|
|
38
39
|
if (!('anchorName' in document.documentElement.style)) {
|
|
39
40
|
const docClientWidth = document.documentElement.clientWidth
|
|
40
41
|
if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {
|
|
@@ -86,9 +87,6 @@
|
|
|
86
87
|
},
|
|
87
88
|
{ passive: true },
|
|
88
89
|
)
|
|
89
|
-
anchor.addEventListener('click', () => {
|
|
90
|
-
refreshValues()
|
|
91
|
-
})
|
|
92
90
|
if (
|
|
93
91
|
'anchorName' in document.documentElement.style &&
|
|
94
92
|
!anchor.style.getPropertyValue('anchor-name')
|
|
@@ -107,26 +105,37 @@
|
|
|
107
105
|
bind:this={element}
|
|
108
106
|
bind:clientWidth
|
|
109
107
|
bind:clientHeight
|
|
108
|
+
ontoggle={(event) => {
|
|
109
|
+
let { newState } = event
|
|
110
|
+
menuOpen = newState === 'open'
|
|
111
|
+
}}
|
|
110
112
|
popover="auto"
|
|
111
|
-
class={['np-menu', attributes.class]}
|
|
113
|
+
class={['np-menu-container', attributes.class]}
|
|
112
114
|
role="menu"
|
|
113
115
|
>
|
|
114
|
-
|
|
116
|
+
<div class="np-menu">
|
|
117
|
+
{@render children()}
|
|
118
|
+
</div>
|
|
115
119
|
</div>
|
|
116
120
|
|
|
117
121
|
<style>
|
|
118
|
-
.np-menu
|
|
122
|
+
.np-menu {
|
|
123
|
+
overflow-y: auto;
|
|
124
|
+
overflow-x: hidden;
|
|
125
|
+
flex: 1;
|
|
126
|
+
padding: 0.5rem 0;
|
|
127
|
+
scrollbar-color: var(--np-color-on-surface-variant) transparent;
|
|
128
|
+
scrollbar-width: thin;
|
|
129
|
+
}
|
|
130
|
+
.np-menu-container[popover] {
|
|
119
131
|
color: var(--np-menu-text-color, var(--np-color-on-surface));
|
|
120
132
|
background-color: var(--np-menu-container-color, var(--np-color-surface-container));
|
|
121
|
-
overflow-y: auto;
|
|
122
133
|
border: none;
|
|
123
134
|
border-radius: var(--np-menu-container-shape, var(--np-shape-corner-extra-small));
|
|
124
|
-
padding: 0
|
|
135
|
+
padding: 0;
|
|
125
136
|
box-shadow: var(--np-elevation-2);
|
|
126
137
|
margin: var(--np-menu-margin, 2px);
|
|
127
138
|
inset: auto;
|
|
128
|
-
scrollbar-color: var(--np-color-on-surface-variant) transparent;
|
|
129
|
-
scrollbar-width: thin;
|
|
130
139
|
transition:
|
|
131
140
|
display 0.2s allow-discrete,
|
|
132
141
|
opacity 0.2s linear;
|
|
@@ -136,8 +145,9 @@
|
|
|
136
145
|
position-try: most-height flip-block;
|
|
137
146
|
}
|
|
138
147
|
|
|
139
|
-
.np-menu:popover-open {
|
|
148
|
+
.np-menu-container:popover-open {
|
|
140
149
|
opacity: 1;
|
|
150
|
+
display: flex;
|
|
141
151
|
@starting-style {
|
|
142
152
|
opacity: 0;
|
|
143
153
|
}
|
|
@@ -202,7 +202,6 @@
|
|
|
202
202
|
style="position-anchor:{menuId};min-width:{clientWidth}px;"
|
|
203
203
|
popover="manual"
|
|
204
204
|
--np-menu-justify-self="none"
|
|
205
|
-
--np-menu-position-area-fallback="top span-right"
|
|
206
205
|
--np-menu-position-area="bottom span-right"
|
|
207
206
|
--np-menu-margin="2px 0"
|
|
208
207
|
--np-menu-container-shape={variant === 'outlined'
|