noph-ui 0.9.12 → 0.9.14
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 +1 -0
- package/dist/select/Select.svelte +12 -22
- package/package.json +7 -7
package/dist/menu/Menu.svelte
CHANGED
|
@@ -31,9 +31,7 @@
|
|
|
31
31
|
}: SelectProps = $props()
|
|
32
32
|
|
|
33
33
|
let errorTextRaw: string = $state(errorText)
|
|
34
|
-
$
|
|
35
|
-
errorTextRaw = errorText
|
|
36
|
-
})
|
|
34
|
+
let errorRaw = $state(error)
|
|
37
35
|
let selectElement: HTMLSelectElement | undefined = $state()
|
|
38
36
|
let menuElement: HTMLDivElement | undefined = $state()
|
|
39
37
|
let field: HTMLDivElement | undefined = $state()
|
|
@@ -43,22 +41,22 @@
|
|
|
43
41
|
return options.find((option) => option.value === value)?.label || ''
|
|
44
42
|
})
|
|
45
43
|
$effect(() => {
|
|
46
|
-
if (value !== '') {
|
|
47
|
-
|
|
44
|
+
if (value !== '' && selectElement?.checkValidity()) {
|
|
45
|
+
errorRaw = error
|
|
48
46
|
errorTextRaw = errorText
|
|
49
47
|
}
|
|
50
48
|
})
|
|
51
49
|
$effect(() => {
|
|
52
50
|
if (selectElement) {
|
|
53
51
|
selectElement.form?.addEventListener('reset', () => {
|
|
54
|
-
|
|
52
|
+
errorRaw = error
|
|
55
53
|
})
|
|
56
54
|
selectElement.addEventListener('invalid', (event) => {
|
|
57
55
|
event.preventDefault()
|
|
58
56
|
const { currentTarget } = event as Event & {
|
|
59
57
|
currentTarget: HTMLInputElement | HTMLTextAreaElement
|
|
60
58
|
}
|
|
61
|
-
|
|
59
|
+
errorRaw = true
|
|
62
60
|
if (errorText === '') {
|
|
63
61
|
errorTextRaw = currentTarget.validationMessage
|
|
64
62
|
}
|
|
@@ -66,16 +64,6 @@
|
|
|
66
64
|
currentTarget.focus()
|
|
67
65
|
}
|
|
68
66
|
})
|
|
69
|
-
|
|
70
|
-
selectElement.addEventListener('select', (event) => {
|
|
71
|
-
const { currentTarget } = event as Event & {
|
|
72
|
-
currentTarget: HTMLSelectElement
|
|
73
|
-
}
|
|
74
|
-
if (currentTarget.checkValidity()) {
|
|
75
|
-
error = false
|
|
76
|
-
errorTextRaw = errorText
|
|
77
|
-
}
|
|
78
|
-
})
|
|
79
67
|
}
|
|
80
68
|
})
|
|
81
69
|
</script>
|
|
@@ -100,7 +88,7 @@
|
|
|
100
88
|
<div
|
|
101
89
|
{id}
|
|
102
90
|
class="field"
|
|
103
|
-
class:error
|
|
91
|
+
class:error={errorRaw}
|
|
104
92
|
class:no-label={!label?.length}
|
|
105
93
|
class:with-start={start}
|
|
106
94
|
class:menu-open={menuOpen}
|
|
@@ -118,6 +106,7 @@
|
|
|
118
106
|
onclick={(event) => {
|
|
119
107
|
event.preventDefault()
|
|
120
108
|
menuElement?.showPopover()
|
|
109
|
+
menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
|
|
121
110
|
}}
|
|
122
111
|
onkeydown={(event) => {
|
|
123
112
|
if (event.key === 'Tab') {
|
|
@@ -126,6 +115,7 @@
|
|
|
126
115
|
event.preventDefault()
|
|
127
116
|
if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
|
|
128
117
|
menuElement?.showPopover()
|
|
118
|
+
menuElement?.style.setProperty('min-width', `${field?.clientWidth}px`)
|
|
129
119
|
;(menuElement?.firstElementChild as HTMLElement)?.focus()
|
|
130
120
|
}
|
|
131
121
|
}
|
|
@@ -200,10 +190,10 @@
|
|
|
200
190
|
</div>
|
|
201
191
|
</div>
|
|
202
192
|
</div>
|
|
203
|
-
{#if supportingText || (errorTextRaw &&
|
|
204
|
-
<div class="supporting-text" role={
|
|
193
|
+
{#if supportingText || (errorTextRaw && errorRaw)}
|
|
194
|
+
<div class="supporting-text" role={errorRaw ? 'alert' : undefined}>
|
|
205
195
|
<span>
|
|
206
|
-
{
|
|
196
|
+
{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
|
|
207
197
|
</span>
|
|
208
198
|
</div>
|
|
209
199
|
{/if}
|
|
@@ -211,7 +201,7 @@
|
|
|
211
201
|
</div>
|
|
212
202
|
|
|
213
203
|
<Menu
|
|
214
|
-
style="position-anchor:{menuId}
|
|
204
|
+
style="position-anchor:{menuId}"
|
|
215
205
|
popover="manual"
|
|
216
206
|
--np-menu-justify-self="none"
|
|
217
207
|
--np-menu-position-area-fallback="top span-right"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -60,16 +60,16 @@
|
|
|
60
60
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
61
61
|
"@types/eslint": "^9.6.1",
|
|
62
62
|
"eslint": "^9.18.0",
|
|
63
|
-
"eslint-config-prettier": "^
|
|
63
|
+
"eslint-config-prettier": "^10.0.1",
|
|
64
64
|
"eslint-plugin-svelte": "^2.46.1",
|
|
65
65
|
"globals": "^15.14.0",
|
|
66
66
|
"prettier": "^3.4.2",
|
|
67
|
-
"prettier-plugin-svelte": "^3.3.
|
|
68
|
-
"publint": "^0.3.
|
|
69
|
-
"svelte": "^5.
|
|
70
|
-
"svelte-check": "^4.1.
|
|
67
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
68
|
+
"publint": "^0.3.2",
|
|
69
|
+
"svelte": "^5.18.0",
|
|
70
|
+
"svelte-check": "^4.1.4",
|
|
71
71
|
"typescript": "^5.7.3",
|
|
72
|
-
"typescript-eslint": "^8.
|
|
72
|
+
"typescript-eslint": "^8.20.0",
|
|
73
73
|
"vite": "^6.0.7",
|
|
74
74
|
"vitest": "^2.1.8"
|
|
75
75
|
},
|