Merge pull request #49 from huntabyte/cleanup

.changeset/nervous-cherries-deny.md

@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Add data attributes for styling

content/introduction.md

@@ -135,9 +135,9 @@ All is not lost though, as the whole idea behind Formsnap is to make this proces
 
 ```svelte title="src/routes/sign-up/+page.svelte"
 <script lang="ts">
+	import { Form } from "formsnap";
 	import type { PageData } from "./$types";
 	import { signupFormSchema } from "./schemas.ts";
-	import { Form } from "formsnap";
 	export let data: PageData;
 </script>
 

content/options.md

@@ -33,7 +33,7 @@ But when using Formsnap, you can pass those same options to the `<Form.Root/>` c
 
 	export let data: PageData;
 
-	const options: FormOptions = {
+	const options: FormOptions<typeof schema> = {
 		validators: schema,
 		onSubmit: () => {
 			// do something

content/styling.md

@@ -0,0 +1,18 @@
+---
+title: Styling
+description: Easily style the various parts of your forms.
+---
+
+We apply data attributes to the various parts of your form so that you can easily style them using those attributes as selectors.
+
+Here are a list of the attributes that are applied to the various parts of your form:
+
+- `data-fs-error` - Applied to all the formsnap components within a field if the field has an error. Using this attribute, you can customize the appearance of the input, label, etc. when the field has a validation error.
+- `data-fs-label` - Applied to the `<Form.Label />` component.
+- `data-fs-input` - Applied to the `<Form.Input />` component.
+- `data-fs-textarea` - Applied to the `<Form.Textarea />` component.
+- `data-fs-select` - Applied to the `<Form.Select />` component.
+- `data-fs-checkbox` - Applied to the `<Form.Checkbox />` component.
+- `data-fs-radio` - Applied to the `<Form.Radio />` component.
+- `data-fs-validation` - Applied to the `<Form.Validation />` component.
+- `data-fs-description` - Applied to the `<Form.Description />` component.

src/config/navigation.ts

@@ -44,6 +44,11 @@ export const navigation: Navigation = {
 					title: "Options",
 					href: "/docs/options",
 					items: []
+				},
+				{
+					title: "Styling",
+					href: "/docs/styling",
+					items: []
 				}
 			]
 		},

src/lib/components/form-checkbox.svelte

@@ -3,7 +3,11 @@
 	import type { CheckboxProps } from "../types.js";
 
 	type $$Props = CheckboxProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-checkbox": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<input type="checkbox" use:actions.checkbox />
+<input type="checkbox" use:actions.checkbox {...attrs} />

src/lib/components/form-description.svelte

@@ -4,9 +4,13 @@
 
 	type $$Props = DescriptionProps;
 	export let tag = "p";
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-description": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<svelte:element this={tag} use:actions.description {...$$restProps}>
+<svelte:element this={tag} use:actions.description {...$$restProps} {...attrs}>
 	<slot />
 </svelte:element>

src/lib/components/form-input.svelte

@@ -3,7 +3,11 @@
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-input": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<input {...$$restProps} use:actions.input />
+<input {...$$restProps} use:actions.input {...attrs} />

src/lib/components/form-label.svelte

@@ -3,9 +3,13 @@
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-label": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<label use:actions.label {...$$restProps}>
+<label use:actions.label {...$$restProps} {...attrs}>
 	<slot />
 </label>

src/lib/components/form-radio.svelte

@@ -3,7 +3,11 @@
 	import type { RadioProps } from "../types.js";
 
 	type $$Props = RadioProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-radio": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<input type="radio" {...$$restProps} use:actions.radio />
+<input type="radio" {...$$restProps} use:actions.radio {...attrs} />

src/lib/components/form-select.svelte

@@ -3,9 +3,13 @@
 	import type { SelectProps } from "../types.js";
 
 	type $$Props = SelectProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-select": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<select {...$$restProps} use:actions.select>
+<select {...$$restProps} use:actions.select {...attrs}>
 	<slot />
 </select>

src/lib/components/form-textarea.svelte

@@ -3,7 +3,11 @@
 	import type { TextareaProps } from "../types.js";
 
 	type $$Props = TextareaProps;
-	const { actions } = getFormField();
+	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-textarea": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<textarea {...$$restProps} use:actions.textarea />
+<textarea {...$$restProps} use:actions.textarea {...attrs} />

src/lib/components/form-validation.svelte

@@ -5,9 +5,13 @@
 	type $$Props = ValidationProps;
 	export let tag = "p";
 	const { actions, errors } = getFormField();
+	const attrs = {
+		"data-fs-validation": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
-<svelte:element this={tag} use:actions.validation {...$$restProps}>
+<svelte:element this={tag} use:actions.validation {...attrs} {...$$restProps}>
 	{#if $errors}
 		{$errors}
 	{/if}

src/lib/components/form.svelte

@@ -68,6 +68,10 @@
 		form: superFrm,
 		schema
 	};
+	const attrs = {
+		"data-fs-form": "",
+		"data-fs-error": $errors ? "" : undefined
+	};
 </script>
 
 {#if asChild}
@@ -102,6 +106,7 @@
 		on:formdata
 		on:submit
 		on:reset
+		{...attrs}
 	>
 		<slot
 			{config}