noph-ui 0.13.2 → 0.13.4

package/dist/text-field/TextField.svelte

@@ -17,29 +17,51 @@
 		variant = 'filled',
 		placeholder = ' ',
 		element = $bindable(),
+		inputElement = $bindable(),
+		reportValidity = $bindable(),
+		checkValidity = $bindable(),
 		...attributes
 	}: TextFieldProps = $props()
 
 	let errorRaw: boolean = $state(error)
 	let errorTextRaw: string = $state(errorText)
 	let focusOnInvalid = $state(true)
-	let checkValidity = $state(false)
+	let doValidity = $state(false)
+
+	reportValidity = () => {
+		if (inputElement) {
+			const valid = inputElement.reportValidity()
+			if (valid) {
+				errorRaw = error
+				errorTextRaw = errorText
+			}
+			return valid
+		}
+		return false
+	}
+
+	checkValidity = () => {
+		if (inputElement) {
+			return inputElement.checkValidity()
+		}
+		return false
+	}
+
 	$effect(() => {
 		errorRaw = error
 		errorTextRaw = errorText
 	})
-	let textElement: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 
 	$effect(() => {
-		if (textElement) {
-			textElement.form?.addEventListener('reset', () => {
+		if (inputElement) {
+			inputElement.form?.addEventListener('reset', () => {
 				errorRaw = error
 				value = ''
 			})
-			textElement.addEventListener('input', () => {
-				checkValidity = true
+			inputElement.addEventListener('input', () => {
+				doValidity = true
 			})
-			textElement.addEventListener('invalid', (event) => {
+			inputElement.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
@@ -53,13 +75,10 @@
 				}
 			})
 
-			textElement.addEventListener('blur', (event) => {
-				const { currentTarget } = event as Event & {
-					currentTarget: HTMLInputElement | HTMLTextAreaElement
-				}
-				if (checkValidity) {
+			inputElement.addEventListener('blur', () => {
+				if (doValidity) {
 					focusOnInvalid = false
-					if (currentTarget.checkValidity()) {
+					if (checkValidity()) {
 						errorRaw = error
 						errorTextRaw = errorText
 					}
@@ -131,7 +150,7 @@
 								aria-label={label}
 								{...attributes}
 								bind:value
-								bind:this={textElement}
+								bind:this={inputElement}
 								class="input"
 								{placeholder}
 								rows={attributes.rows || 2}
@@ -147,7 +166,7 @@
 									aria-label={label}
 									{...attributes}
 									bind:value
-									bind:this={textElement}
+									bind:this={inputElement}
 									class="input"
 									{placeholder}
 									aria-invalid={errorRaw}

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "inputElement" | "reportValidity" | "checkValidity">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -12,6 +12,9 @@ interface FieldProps {
     end?: Snippet;
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
+    inputElement?: HTMLInputElement | HTMLTextAreaElement;
+    reportValidity?: () => boolean;
+    checkValidity?: () => boolean;
 }
 export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {