@iroco/ui 1.3.0 → 1.4.1

package/dist/Button.svelte

@@ -9,6 +9,7 @@
 		fullWidth?: boolean;
 		id?: string | null;
 		formaction?: string | null;
+		form?: string | null;
 		children?: import('svelte').Snippet;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
@@ -21,6 +22,7 @@
 		fullWidth = false,
 		id = null,
 		formaction = null,
+		form = null,
 		children,
 		onclick
 	}: Props = $props();
@@ -34,6 +36,7 @@
 	{formaction}
 	{disabled}
 	{onclick}
+	{form}
 >
 	{@render children?.()}
 </button>

package/dist/Button.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     fullWidth?: boolean;
     id?: string | null;
     formaction?: string | null;
+    form?: string | null;
     children?: import('svelte').Snippet;
     onclick?: MouseEventHandler<HTMLButtonElement>;
 }

package/dist/TextInput.stories.svelte

@@ -36,6 +36,7 @@
 <Story name="Password" args={{ type: 'password' }} />
 <Story name="Label" args={{ label: 'Label' }} />
 <Story name="Error" args={{ error: 'An error message' }} />
+<Story name="Errors" args={{ errors: [{ key: 'foo', isHtml: false }] }} />
 <Story name="Placeholder" args={{ placeholder: 'A placeholder' }} />
 <Story name="Border" args={{ border: true }} />
 <Story

package/dist/TextInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
 
+	export type ValidationErrorMessage = { key: string; isHtml?: boolean };
+
 	interface Props extends HTMLInputAttributes {
 		id?: string | null;
 		type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
@@ -8,6 +10,7 @@
 		label?: string | null;
 		placeholder?: string | null;
 		error?: string | null;
+		errors?: Array<ValidationErrorMessage> | null;
 		htmlError?: boolean;
 		value?: string | null;
 		onFocus?: ((e: FocusEvent) => void) | null;
@@ -25,6 +28,7 @@
 		label = null,
 		placeholder = null,
 		error = null,
+		errors = null,
 		htmlError = false,
 		value = $bindable(null),
 		onFocus = null,
@@ -34,6 +38,10 @@
 		autocomplete = 'on',
 		oninput
 	}: Props = $props();
+
+	function hasErrors() {
+		return error !== null || errors?.length > 0;
+	}
 </script>
 
 <div class="iroco-ui-input">
@@ -50,7 +58,7 @@
 		{name}
 		{placeholder}
 		class:border
-		class:error={error !== null}
+		class:error={hasErrors()}
 		class:readonlyInput={readonly === true}
 		{readonly}
 		{autocomplete}

package/dist/TextInput.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+export type ValidationErrorMessage = {
+    key: string;
+    isHtml?: boolean;
+};
 interface Props extends HTMLInputAttributes {
     id?: string | null;
     type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
@@ -6,6 +10,7 @@ interface Props extends HTMLInputAttributes {
     label?: string | null;
     placeholder?: string | null;
     error?: string | null;
+    errors?: Array<ValidationErrorMessage> | null;
     htmlError?: boolean;
     value?: string | null;
     onFocus?: ((e: FocusEvent) => void) | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.3.0",
+	"version": "1.4.1",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {