form-father 0.6.0 → 0.7.1

package/demos/main.js

@@ -1,95 +0,0 @@
-const api = window.FormFather || {};
-const Form = api.default || api.Form || api;
-const { createLengthValidator, registerValidator, sameAsField } = api;
-const output = document.querySelector('#demo-output');
-
-function writeOutput(title, payload) {
-	output.textContent = `${title}\n\n${JSON.stringify(payload, null, 2)}`;
-}
-
-function json(body, status = 200) {
-	return new Response(JSON.stringify(body), {
-		status,
-		headers: { 'Content-Type': 'application/json' },
-	});
-}
-
-window.fetch = async (url, options = {}) => {
-	const requestUrl = String(url);
-	const method = options.method || 'GET';
-
-	if (requestUrl.startsWith('/demo/login')) {
-		return json({
-			success: true,
-			message: 'Logged in',
-			method,
-		});
-	}
-
-	if (requestUrl.startsWith('/demo/callback')) {
-		return json(
-			{
-				success: false,
-				error: true,
-				'error-msg': 'Сервер вернул ошибки по полям.',
-				errors: [{ name: 'tel', 'error-msg': 'Этот номер уже есть в заявках' }],
-			},
-			422,
-		);
-	}
-
-	if (requestUrl.startsWith('/demo/search')) {
-		return json({
-			success: true,
-			query: requestUrl,
-			results: ['Validation API', 'Server response format', 'Demo recipes'],
-		});
-	}
-
-	if (requestUrl.startsWith('/demo/upload')) {
-		return json({
-			success: true,
-			message: 'FormData accepted',
-			contentType: options.headers?.['Content-Type'] || 'browser-managed multipart boundary',
-		});
-	}
-
-	return json({ success: false, error: true, 'error-msg': `No demo route for ${requestUrl}` }, 404);
-};
-
-registerValidator('min-length', createLengthValidator({ min: 6 }), 'Слишком короткое значение', { override: true });
-registerValidator(
-	'available-email',
-	value =>
-		new Promise(resolve => {
-			setTimeout(() => resolve(value.toLowerCase() !== 'taken@example.com'), 350);
-		}),
-	'Email is already used',
-	{ override: true },
-);
-
-Form.initAll('form[data-form-father]', {
-	inputSelector: '.input',
-	inputWrapperSelector: '.field',
-	validateOn: ['blur', 'change'],
-	revalidateOn: ['input', 'change'],
-	validationDebounce: 120,
-	focusFirstErroredInput: true,
-	loaderColor: 'currentColor',
-	errorSummary: {
-		title: 'Проверьте поля формы',
-		focus: true,
-	},
-	formValidators: sameAsField('passwordConfirm', 'password', 'Пароли не совпадают'),
-	onValidationError(errors) {
-		writeOutput('Client validation errors', errors);
-	},
-	onResponse(responseBody, form) {
-		writeOutput(`${form.$el.dataset.demo || 'form'} response`, responseBody);
-	},
-	onResponseSuccess(responseBody, form) {
-		if (form.$el.dataset.demo === 'login' || form.$el.dataset.demo === 'upload') {
-			form.clearInputs();
-		}
-	},
-});

package/demos/styles.css

@@ -1,261 +0,0 @@
-:root {
-	color-scheme: light;
-	--bg: #f5f7fb;
-	--panel: #ffffff;
-	--text: #172033;
-	--muted: #637083;
-	--line: #d9e0ea;
-	--accent: #176b87;
-	--accent-strong: #0f5268;
-	--danger: #b3261e;
-	--success: #176b3a;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-	background: var(--bg);
-	color: var(--text);
-	font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-.demo-header {
-	display: flex;
-	align-items: flex-end;
-	justify-content: space-between;
-	gap: 24px;
-	padding: 40px min(6vw, 72px) 24px;
-	border-bottom: 1px solid var(--line);
-	background: #ffffff;
-}
-
-.demo-header h1,
-.panel-title h2 {
-	margin: 0;
-	letter-spacing: 0;
-}
-
-.demo-header h1 {
-	max-width: 760px;
-	font-size: clamp(32px, 4vw, 54px);
-	line-height: 1.05;
-}
-
-.eyebrow {
-	margin: 0 0 8px;
-	color: var(--accent);
-	font-size: 13px;
-	font-weight: 700;
-	letter-spacing: 0;
-	text-transform: uppercase;
-}
-
-.github-link,
-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 42px;
-	padding: 0 16px;
-	border: 1px solid var(--accent);
-	border-radius: 6px;
-	background: var(--accent);
-	color: #ffffff;
-	font: inherit;
-	font-weight: 700;
-	text-decoration: none;
-	cursor: pointer;
-}
-
-.github-link {
-	background: #ffffff;
-	color: var(--accent);
-}
-
-button:hover,
-button:focus-visible {
-	background: var(--accent-strong);
-	border-color: var(--accent-strong);
-}
-
-.github-link:hover,
-.github-link:focus-visible {
-	border-color: var(--accent-strong);
-	color: var(--accent-strong);
-}
-
-.demo-grid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 18px;
-	padding: 24px min(6vw, 72px);
-}
-
-.demo-panel,
-.demo-output {
-	border: 1px solid var(--line);
-	border-radius: 8px;
-	background: var(--panel);
-	padding: 22px;
-}
-
-.panel-title {
-	margin-bottom: 18px;
-}
-
-.panel-title h2 {
-	font-size: 22px;
-	line-height: 1.2;
-}
-
-form {
-	display: grid;
-	gap: 14px;
-}
-
-[data-form-father-summary]:not([hidden]) {
-	display: grid;
-	gap: 8px;
-	padding: 12px;
-	border: 1px solid rgba(179, 38, 30, 0.28);
-	border-radius: 6px;
-	background: rgba(179, 38, 30, 0.06);
-	color: var(--danger);
-	font-size: 14px;
-}
-
-[data-form-father-summary-title] {
-	margin: 0;
-	font-weight: 700;
-}
-
-[data-form-father-summary-list] {
-	display: grid;
-	gap: 4px;
-	margin: 0;
-	padding-left: 18px;
-}
-
-[data-form-father-summary] button {
-	min-height: 0;
-	padding: 0;
-	border: 0;
-	background: transparent;
-	color: inherit;
-	font-weight: 700;
-	text-align: left;
-	text-decoration: underline;
-}
-
-[data-form-father-summary] button:hover,
-[data-form-father-summary] button:focus-visible {
-	background: transparent;
-	color: var(--accent-strong);
-}
-
-.field {
-	display: grid;
-	gap: 6px;
-}
-
-.field span {
-	color: var(--muted);
-	font-size: 14px;
-	font-weight: 700;
-}
-
-.input {
-	width: 100%;
-	min-height: 42px;
-	padding: 8px 10px;
-	border: 1px solid var(--line);
-	border-radius: 6px;
-	background: #ffffff;
-	color: var(--text);
-	font: inherit;
-}
-
-.input:focus {
-	border-color: var(--accent);
-	outline: 3px solid rgba(23, 107, 135, 0.16);
-}
-
-.input[aria-invalid="true"] {
-	border-color: var(--danger);
-}
-
-.input[aria-busy="true"] {
-	opacity: 0.72;
-}
-
-.input[data-form-father-state="valid"] {
-	border-color: var(--success);
-}
-
-.input[data-form-father-state="invalid"] {
-	border-color: var(--danger);
-}
-
-[data-form-father-error],
-.field-error {
-	color: var(--danger);
-	font-size: 13px;
-}
-
-.input__wrapper--error .input {
-	border-color: var(--danger);
-}
-
-.button--loading {
-	opacity: 0.74;
-	pointer-events: none;
-}
-
-.button__loader {
-	display: inline-flex;
-	width: 18px;
-	height: 18px;
-	margin-right: 8px;
-}
-
-.button__loader svg {
-	width: 18px;
-	height: 18px;
-}
-
-.error-block-under-input__wrapper {
-	color: var(--danger);
-	font-size: 14px;
-}
-
-.demo-output {
-	margin: 0 min(6vw, 72px) 40px;
-}
-
-pre {
-	min-height: 130px;
-	margin: 0;
-	overflow: auto;
-	padding: 16px;
-	border: 1px solid var(--line);
-	border-radius: 8px;
-	background: #101820;
-	color: #d8f3dc;
-	font-size: 13px;
-	white-space: pre-wrap;
-}
-
-@media (max-width: 760px) {
-	.demo-header {
-		display: grid;
-		align-items: start;
-		padding-top: 28px;
-	}
-
-	.demo-grid {
-		grid-template-columns: 1fr;
-	}
-}

package/docs/en/README.md

@@ -1,266 +0,0 @@
-# Form Father
-
-[![npm version](https://img.shields.io/npm/v/form-father)](https://www.npmjs.com/package/form-father)
-[![npm downloads](https://img.shields.io/npm/dm/form-father)](https://www.npmjs.com/package/form-father)
-
-[🇷🇺 Документация на русском](https://github.com/Poliklot/form-father/blob/master/README.md)
-
-**Form Father** is a library for handling forms in pure JavaScript, providing convenient validation and form submission
-with TypeScript support.
-
-## Installation
-
-Install the library via npm:
-
-```bash
-npm install form-father
-```
-
-## Usage
-
-```javascript
-import Form, { isUrlValid, serializeToFormData } from 'form-father';
-
-Form.setDefaultParams({
-  showLoaderButton: false,
-  scrollToFirstErroredInput: false,
-  logging: true,
-});
-
-const formElement = document.querySelector('#myForm');
-const options = {
-	onSubmit: formInstance => {
-		// Actions on form submission
-	},
-	onResponse: (responseBody, formInstance) => {
-		// Actions on receiving server response
-	},
-	// Other options...
-};
-
-const form = new Form(formElement, options);
-const simpleForm = new Form(document.querySelector('#simpleForm')); // options are optional
-
-const forms = Form.initAll('form[data-form-father]', {
-	inputWrapperSelector: '.field',
-	validateOn: ['blur', 'change'],
-	revalidateOn: ['input', 'change'],
-});
-```
-
-```ts
-import Form, {
-	FORM_ERROR_FIELD,
-	type FormOptions,
-	type ValidationSchema,
-	type ResponseBody,
-	type ValidationError,
-	type SubmitResult,
-	type FormResetOptions,
-	type FormValidator,
-	type ValidationIssue,
-	type FormValidatorPredicate,
-	type ErrorSummaryOptions,
-} from 'form-father';
-```
-
-## Options
-
-- **onSubmit**: Callback function executed on form submission.
-- **onBeforeSubmit**: Runs before sending an already valid form; returning `false` cancels the request.
-- **onSubmitError**: Runs when form submission throws.
-- **onResponse**: Callback function executed when a server response is received.
-- **onResponseSuccess**: Callback function executed for a successful HTTP response with `success: true`.
-- **onResponseUnsuccess**: Callback function executed for unsuccessful HTTP responses, `success !== true`, or invalid JSON.
-- **onValidationError**: Runs when client-side validation fails.
-- **showLoaderButton**: Whether to display a loader in the submit button. Defaults to `true`.
-- **scrollToFirstErroredInput**: Whether to scroll to the first input with an error. Defaults to `true`.
-- **focusFirstErroredInput**: Whether to focus the first invalid field. Defaults to `false`.
-- **customTypeError**: Custom error type.
-- **loaderColor**: Color of the loader in the submit button.
-- **logging**: Specifies whether to log data to the console. Defaults to false.
-- **validateOn**: Field live-validation events: `submit`, `input`, `blur`, `change`.
-- **revalidateOn**: Events used to re-check already invalid fields. Defaults to `input` and `change`.
-- **validationDebounce**: Live-validation delay in milliseconds.
-- **errorContainerAttribute**: Attribute containing the CSS selector for a custom error container. Defaults to
-  `data-error-container`.
-- **validationStateAttribute**: Field state attribute: `validating`, `valid`, or `invalid`. Defaults to
-  `data-form-father-state`.
-- **ariaDescribeErrors**: Links inline error text to the field with `aria-describedby`. Defaults to `true`.
-- **errorIdPrefix**: Prefix for automatically generated error element ids. Defaults to `form-father-error`.
-- **errorSummary**: Form error summary: `true` for the default renderer or `{ selector, title, focus, render }`.
-- **observeMutations**: Watches dynamically added fields and submit buttons.
-- **formValidators**: A form validator or array of validators for cross-field rules.
-
-## Form Submission
-
-- Submit elements are `button[type="submit"]`, `button` without `type`, `input[type="submit"]`, and
-  `input[type="image"]`.
-- `submit()` is public and returns `Promise<SubmitResult | undefined>`.
-- For `method="GET"` and `method="HEAD"`, data is appended to the `action` query string and no request body is sent.
-- `wrapData` applies to every supported `enctype`: `application/x-www-form-urlencoded`, `multipart/form-data`,
-  `text/plain`, and `application/json`.
-- `onResponseSuccess` runs only for a successful HTTP response with `success: true`.
-- `onResponseUnsuccess` runs for unsuccessful HTTP responses, `success !== true`, or invalid JSON responses.
-
-## Methods
-
-- **Form.initAll(selector, options)**: Initializes all forms matching a selector and reuses existing instances.
-- **updateOptions(options)**: Updates one form instance and rebinds live validation.
-- **validate()**: Validates the whole form.
-- **validateField(field)**: Validates one field by name or DOM element.
-- **showFieldError(field, message, source)**: Shows a field error manually.
-- **setErrors(errors, source)**: Applies backend/form-level errors from an object, array, or `ErrorResponse[]`.
-- **getErrors()**: Returns current errors as `{ field, rule, message, source }`.
-- **getValues()**: Returns form values as a plain object.
-- **setValues(values)**: Fills fields by `name` and dispatches `input`/`change`.
-- **clearErrors()**: Clears errors without changing field values.
-- **reset(options)**: Calls native `form.reset()` and clears errors by default.
-- **clearInputs()**: Clears all input fields in the form.
-- **setDefaultParams(params):** The setDefaultParams method is used to set default values for all instances of the form. These parameters can be overridden when initializing a specific form.
-- **destroy()**: Removes event listeners and runtime artifacts.
-
-## Validation
-
-```html
-<input
-	name="email"
-	type="email"
-	data-validate="required|email"
-	data-error-required="Email is required"
-	data-error-email="Enter a valid email"
-	data-error-container="#email-error"
-/>
-<small id="email-error" hidden></small>
-```
-
-- `data-validate` accepts rules separated by `|`, spaces, or commas.
-- `data-error-rule-name` overrides a message for one rule.
-- `data-error-container` points to a custom error container without requiring wrapper markup.
-- During async validation, fields receive `aria-busy="true"` and a `validating` state attribute; stale validator
-  responses are ignored.
-- Inline errors receive `role="alert"` and are linked to fields with `aria-describedby`.
-- `data-custom-validate` is still supported for backward compatibility.
-
-### Error summary and a11y
-
-```html
-<form data-form-father novalidate>
-	<div data-form-father-summary hidden></div>
-	<label>
-		Email
-		<input class="input" name="email" data-validate="required|email" />
-	</label>
-	<button type="submit">Submit</button>
-</form>
-```
-
-```ts
-new Form($form, {
-	inputWrapperSelector: 'label',
-	errorSummary: {
-		title: 'Please check the form',
-		focus: true,
-	},
-});
-```
-
-- If the form already contains `[data-form-father-summary]`, Form Father uses it; otherwise `errorSummary: true` creates
-  a summary at the start of the form.
-- `selector` sends the summary into your own container.
-- `render(errors, form)` lets you fully replace the summary markup.
-- `ariaDescribeErrors: false` disables automatic error id insertion into `aria-describedby`.
-
-Final rule order:
-
-```text
-required  →  schema.rules  →  data-validate  →  data-custom-validate
-```
-
-### Cross-field and form-level validation
-
-```ts
-import { dateOrder, requiredIf, sameAsField } from 'form-father';
-
-const form = new Form($form, {
-	formValidators: [
-		sameAsField('passwordConfirm', 'password', 'Passwords do not match'),
-		requiredIf('email', ({ values }) => Boolean(values.subscribe), 'Email is required for subscription'),
-		dateOrder('start', 'end', 'End date must be after start'),
-	],
-});
-```
-
-Return a string or an issue without `field` to show a form-level error. In `getErrors()`, it uses
-`FORM_ERROR_FIELD` (`"_form"`).
-
-```ts
-form.setErrors({
-	email: 'Email is already used',
-	[FORM_ERROR_FIELD]: 'Please check the form',
-});
-```
-
-### Rule DX helpers
-
-```ts
-import { createLengthValidator, createPatternValidator, registerFieldValidator } from 'form-father';
-
-registerFieldValidator('starts-with-a', value => value.startsWith('A'), 'Must start with A');
-registerValidator('slug', createPatternValidator(/^[a-z0-9-]+$/), 'Slug characters only');
-registerValidator('short-name', createLengthValidator({ min: 2, max: 24 }), 'Use 2-24 characters');
-```
-
-## Schema Adapters
-
-Form Father has no schema-library runtime dependency, but can wrap Zod/Valibot/Yup-like schemas with `safeParse()` or
-`parse()`.
-
-```ts
-import { registerSchemaValidator } from 'form-father';
-
-registerSchemaValidator('company-email', z.string().email(), 'Use a company email');
-```
-
-For simple checks, use `createFieldValidator(predicate, message)`.
-
-## Demos and Recipes
-
-- `demos/index.html` is a static login/callback/search/upload demo after `npm run build`.
-- `npm run demos` builds the package and starts the Vite demo server.
-- `docs/recipes/README.md` contains short API, data-attribute, adapter, and server-error recipes.
-
-## Helpers
-
-The library provides a number of utility functions:
-
-- **serializeToFormData($element)**: Serializes form data into a `FormData` object.
-- **isEmailValid(value)**: Checks if a string is a valid email address.
-- **isUrlValid(value)**: Checks an `http(s)` URL, domain, IP, or `localhost`; the scheme may be omitted.
-- **isPhoneValid(value)**: Checks if a string is a valid phone number.
-- **closest($el, selector)**: Finds the closest parent element matching the given selector.
-- **blockScrollBody()**: Blocks page scrolling.
-- **unblockScrollBody()**: Unblocks page scrolling.
-- **parseCommonResponseProperties(responseBody)**: Processes common properties from the server response.
-- **serializeFormToJSON(form)**: Serializes form data into a plain object.
-
-## Build and Development
-
-**Rollup** is used for building the project. Main commands:
-
-- **npm run build**: Builds the project.
-- **npm run watch**: Builds the project in watch mode.
-- **npm run demos**: Runs a demo version using Vite.
-
-## Contributing
-
-We welcome your suggestions and improvements! Please create [issues](https://github.com/poliklot/form-father/issues) and
-submit [pull requests](https://github.com/poliklot/form-father/pulls).
-
-## License
-
-[MIT](LICENSE)
-
----
-
-© 2024 Poliklot