WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(forms): surface validation and recover schema drift
Quality / quality (ubuntu-latest) (push) Failing after 10m23s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-15 13:01:10 +05:30
parent 1d16ef1e82
commit d78707be9f
10 changed files with 128 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/input.wrn
+16 -6
View File
@@ -39,15 +39,24 @@ component Input {
step: string = ""
class: string = ""
}
state validationError: string = ""
functions {
client function detail(sourceEvent) {
return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
}
client function handleInput(sourceEvent) { sourceEvent.stopPropagation(); output.input(detail(sourceEvent)) }
client function handleInput(sourceEvent) {
sourceEvent.stopPropagation()
if (sourceEvent.currentTarget.validity.valid) {
validationError = ""
sourceEvent.currentTarget.setAttribute("aria-invalid", error ? "true" : "false")
sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", error ? "true" : "false")
}
output.input(detail(sourceEvent))
}
client function handleChange(sourceEvent) { sourceEvent.stopPropagation(); output.change(detail(sourceEvent)) }
client function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); output.focus(detail(sourceEvent)) }
client function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); output.blur(detail(sourceEvent)) }
client function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); validationError = sourceEvent.currentTarget.validationMessage; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: validationError, sourceEvent: sourceEvent }) }
client function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); output.keydown({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
}
@@ -58,7 +67,7 @@ component Input {
data-variant="{variant}"
data-inline="{inline}"
data-floating="{variant === 'floating'}"
data-invalid="{error ? 'true' : 'false'}"
data-invalid="{error || validationError ? 'true' : 'false'}"
>
<div
class="wrn-next__field-heading"
@@ -105,8 +114,8 @@ component Input {
min="{min}"
max="{max}"
step="{step}"
aria-invalid="{error ? 'true' : 'false'}"
aria-describedby="{error ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}"
aria-invalid="{error || validationError ? 'true' : 'false'}"
aria-describedby="{error || validationError ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}"
@input="handleInput(event)"
@change="handleChange(event)"
@focus="handleFocus(event)"
@@ -135,8 +144,9 @@ component Input {
id="{(id || name) + '-error'}"
class="wrn-next__field-error"
data-error="{name}"
aria-live="polite"
>
{error}
{error || validationError}
</small>
</div>
}