noph-ui 0.12.4 → 0.12.5
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 +1 -1
- package/dist/menu/Menu.svelte +17 -23
- package/dist/select/Select.svelte +5 -4
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/menu/Menu.svelte
CHANGED
|
@@ -45,23 +45,6 @@
|
|
|
45
45
|
|
|
46
46
|
$effect(() => {
|
|
47
47
|
if (anchor && element) {
|
|
48
|
-
element.addEventListener('toggle', (event) => {
|
|
49
|
-
const { newState, currentTarget } = event as ToggleEvent & {
|
|
50
|
-
currentTarget: EventTarget & HTMLDivElement
|
|
51
|
-
}
|
|
52
|
-
if (newState === 'open') {
|
|
53
|
-
const rect = currentTarget.getBoundingClientRect()
|
|
54
|
-
const viewportHeight = window.innerHeight
|
|
55
|
-
|
|
56
|
-
if (rect.bottom > viewportHeight) {
|
|
57
|
-
const maxHeight = viewportHeight - rect.top - 18
|
|
58
|
-
currentTarget.style.maxHeight = `${maxHeight}px`
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
if (newState === 'closed') {
|
|
62
|
-
currentTarget.style.maxHeight = '80dvh'
|
|
63
|
-
}
|
|
64
|
-
})
|
|
65
48
|
if (!('anchorName' in document.documentElement.style)) {
|
|
66
49
|
anchor.addEventListener('click', () => {
|
|
67
50
|
refreshValues()
|
|
@@ -83,12 +66,27 @@
|
|
|
83
66
|
</script>
|
|
84
67
|
|
|
85
68
|
<svelte:window bind:innerHeight onresize={refreshValues} />
|
|
86
|
-
|
|
87
69
|
<div
|
|
88
70
|
{...attributes}
|
|
89
71
|
bind:this={element}
|
|
90
72
|
bind:clientWidth
|
|
91
73
|
bind:clientHeight
|
|
74
|
+
ontoggle={(event) => {
|
|
75
|
+
const { newState, currentTarget } = event
|
|
76
|
+
if (newState === 'open') {
|
|
77
|
+
const rect = currentTarget.getBoundingClientRect()
|
|
78
|
+
const viewportHeight = innerHeight
|
|
79
|
+
|
|
80
|
+
if (rect.bottom > viewportHeight && rect.top < viewportHeight / 2) {
|
|
81
|
+
const maxHeight = viewportHeight - rect.top - 18
|
|
82
|
+
currentTarget.style.maxHeight = `${maxHeight}px`
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if (newState === 'closed') {
|
|
86
|
+
currentTarget.style.maxHeight = '80dvh'
|
|
87
|
+
}
|
|
88
|
+
attributes.ontoggle?.(event)
|
|
89
|
+
}}
|
|
92
90
|
popover="auto"
|
|
93
91
|
class={['np-menu', attributes.class]}
|
|
94
92
|
role="menu"
|
|
@@ -115,7 +113,7 @@
|
|
|
115
113
|
opacity: 0;
|
|
116
114
|
justify-self: var(--np-menu-justify-self, anchor-center);
|
|
117
115
|
position-area: var(--np-menu-position-area, bottom center);
|
|
118
|
-
position-try
|
|
116
|
+
position-try: most-height flip-block;
|
|
119
117
|
}
|
|
120
118
|
|
|
121
119
|
.np-menu:popover-open {
|
|
@@ -124,8 +122,4 @@
|
|
|
124
122
|
opacity: 0;
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
|
-
@position-try --np-menu-position-fallback {
|
|
128
|
-
position-area: var(--np-menu-position-area-fallback, top center);
|
|
129
|
-
position-area: var(--np-menu-position-area-fallback, top center);
|
|
130
|
-
}
|
|
131
125
|
</style>
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
let selectElement: HTMLSelectElement | undefined = $state()
|
|
35
35
|
let menuElement: HTMLDivElement | undefined = $state()
|
|
36
36
|
let field: HTMLDivElement | undefined = $state()
|
|
37
|
+
let clientWidth = $state(0)
|
|
37
38
|
let menuId = $state(`--select-${crypto.randomUUID()}`)
|
|
38
39
|
let menuOpen = $state(false)
|
|
39
40
|
let selectedLabel = $derived.by<string>(() => {
|
|
@@ -88,11 +89,11 @@
|
|
|
88
89
|
aria-label={attributes['aria-label'] || label}
|
|
89
90
|
data-testid={attributes['data-testid']}
|
|
90
91
|
bind:this={field}
|
|
92
|
+
bind:clientWidth
|
|
91
93
|
autofocus={disabled ? false : autofocus}
|
|
92
94
|
onclick={(event) => {
|
|
93
95
|
event.preventDefault()
|
|
94
96
|
menuElement?.showPopover()
|
|
95
|
-
menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
|
|
96
97
|
}}
|
|
97
98
|
onkeydown={(event) => {
|
|
98
99
|
if (event.key === 'Tab') {
|
|
@@ -101,7 +102,6 @@
|
|
|
101
102
|
event.preventDefault()
|
|
102
103
|
if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
|
|
103
104
|
menuElement?.showPopover()
|
|
104
|
-
menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
|
|
105
105
|
;(menuElement?.firstElementChild as HTMLElement)?.focus()
|
|
106
106
|
}
|
|
107
107
|
}
|
|
@@ -161,7 +161,8 @@
|
|
|
161
161
|
errorTextRaw = currentTarget.validationMessage
|
|
162
162
|
}
|
|
163
163
|
if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
|
|
164
|
-
|
|
164
|
+
field?.focus()
|
|
165
|
+
menuElement?.showPopover()
|
|
165
166
|
}
|
|
166
167
|
}}
|
|
167
168
|
bind:value
|
|
@@ -198,7 +199,7 @@
|
|
|
198
199
|
</div>
|
|
199
200
|
|
|
200
201
|
<Menu
|
|
201
|
-
style="position-anchor:{menuId}"
|
|
202
|
+
style="position-anchor:{menuId};min-width:{clientWidth}px;"
|
|
202
203
|
popover="manual"
|
|
203
204
|
--np-menu-justify-self="none"
|
|
204
205
|
--np-menu-position-area-fallback="top span-right"
|