form-father 0.7.0 → 0.7.1

package/demos/main.js

@@ -1,149 +0,0 @@
-const api = window.FormFather || {};
-const Form = api.default || api.Form || api;
-const { FORM_ERROR_FIELD, 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',
-		});
-	}
-
-	if (requestUrl.startsWith('/demo/api')) {
-		return json({
-			success: true,
-			message: 'Programmatic API form accepted',
-			method,
-		});
-	}
-
-	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 },
-);
-
-const forms = 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();
-		}
-	},
-});
-
-const formByDemo = new Map(forms.map(form => [form.$el.dataset.demo, form]));
-const apiForm = formByDemo.get('api');
-
-document.querySelectorAll('[data-api-action]').forEach(button => {
-	button.addEventListener('click', async () => {
-		if (!apiForm) return;
-
-		switch (button.dataset.apiAction) {
-			case 'fill':
-				apiForm.setValues({
-					name: 'Ada Lovelace',
-					email: 'ada@example.com',
-					plan: 'team',
-				});
-				writeOutput('setValues()', apiForm.getValues());
-				break;
-
-			case 'validate-email': {
-				const valid = await apiForm.validateField('email');
-				writeOutput('validateField("email")', {
-					valid,
-					errors: apiForm.getErrors(),
-				});
-				break;
-			}
-
-			case 'server-errors':
-				apiForm.setErrors({
-					email: 'Этот email уже зарегистрирован',
-					[FORM_ERROR_FIELD]: 'Сервер попросил проверить форму',
-				});
-				writeOutput('setErrors()', apiForm.getErrors());
-				break;
-
-			case 'values':
-				writeOutput('getValues()', apiForm.getValues());
-				break;
-
-			case 'clear':
-				apiForm.clearErrors();
-				writeOutput('clearErrors()', apiForm.getErrors());
-				break;
-		}
-	});
-});

package/demos/styles.css

@@ -1,276 +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;
-}
-
-.demo-panel--wide {
-	grid-column: 1 / -1;
-}
-
-.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);
-}
-
-.demo-actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-
-.demo-actions button {
-	min-height: 38px;
-	padding-inline: 12px;
-}
-
-.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/api/README.md

@@ -1,153 +0,0 @@
-# Form Father API Reference
-
-This page is a compact reference for the public API exported by `form-father`.
-
-## Main Import
-
-```ts
-import Form from 'form-father';
-```
-
-`Form` is the default export and is constructed with a native `<form>` element.
-
-```ts
-const form = new Form(document.querySelector('form')!, {
-	inputWrapperSelector: '.field',
-	validateOn: ['blur', 'change'],
-	revalidateOn: ['input', 'change'],
-	errorSummary: true,
-});
-```
-
-## Form Options
-
-| Option | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `inputSelector` | `string` | `.input` | Selector used by legacy input collection helpers. |
-| `inputWrapperSelector` | `string` | `.input-primary` | Field wrapper selector used for inline error rendering. |
-| `showLoaderButton` | `boolean` | `true` | Adds a loader to submit buttons while a request is pending. |
-| `loaderColor` | `string` | `#fff` | Loader SVG color. |
-| `scrollToFirstErroredInput` | `boolean` | `true` | Scrolls to the first invalid field. |
-| `focusFirstErroredInput` | `boolean` | `false` | Focuses the first invalid field after validation. |
-| `validateOn` | `ValidationTrigger | ValidationTrigger[]` | `submit` | Live validation triggers: `submit`, `input`, `blur`, `change`. |
-| `revalidateOn` | `ValidationTrigger | ValidationTrigger[]` | `input`, `change` | Rechecks fields that are already invalid. |
-| `validationDebounce` | `number` | `0` | Delay for live validation. |
-| `validationSchema` | `ValidationSchema` | built in defaults | Field rules matched by selectors or `data-validate`. |
-| `formValidators` | `FormValidator | FormValidator[]` | none | Cross-field and form-level validation. |
-| `errorContainerAttribute` | `string` | `data-error-container` | Attribute containing a selector for a custom error container. |
-| `validationStateAttribute` | `string` | `data-form-father-state` | Field state attribute: `validating`, `valid`, `invalid`. |
-| `ariaDescribeErrors` | `boolean` | `true` | Links inline errors to fields with `aria-describedby`. |
-| `errorIdPrefix` | `string` | `form-father-error` | Prefix for generated error element ids. |
-| `errorSummary` | `boolean | ErrorSummaryOptions` | `false` | Enables an accessible form error summary. |
-| `observeMutations` | `boolean` | `false` | Rebinds controls when fields/buttons are added dynamically. |
-| `wrapData` | `(data) => data` | none | Transforms form values before request body creation. |
-| `logging` | `boolean` | `false` | Logs submitted `FormData` values. |
-
-## Lifecycle Callbacks
-
-| Callback | When it runs |
-| --- | --- |
-| `onBeforeValidate(form)` | Before submit-time validation. |
-| `onAfterValidate(isValid, form)` | After validation and before submit. |
-| `onValidationError(errors, form)` | When client-side validation fails. |
-| `onBeforeSubmit(form)` | Before a valid form is sent. Return `false` to cancel. |
-| `onSubmit(form)` | When request sending starts. |
-| `onResponse(body, form)` | After a response body is parsed. |
-| `onResponseSuccess(body, form)` | For successful HTTP responses with `success: true`. |
-| `onResponseUnsuccess(body, form)` | For non-OK responses, `success !== true`, or invalid JSON. |
-| `onSubmitError(error, form)` | When sending or response parsing throws. |
-
-## Instance Methods
-
-| Method | Returns | Purpose |
-| --- | --- | --- |
-| `validate()` | `Promise<boolean>` | Validates the whole form. |
-| `validateField(field)` | `Promise<boolean>` | Validates one field by `name` or element. |
-| `submit()` | `Promise<SubmitResult | undefined>` | Sends the form programmatically. |
-| `showFieldError(field, message, source?)` | `boolean` | Shows a field error manually. |
-| `setErrors(errors, source?)` | `this` | Applies backend, form-level, or manual errors. |
-| `getErrors()` | `ValidationError[]` | Returns current error records. |
-| `getValues()` | `Record<string, any>` | Serializes the form into a plain object. |
-| `setValues(values)` | `this` | Sets field values by `name` and dispatches `input`/`change`. |
-| `clearErrors()` | `this` | Clears field and form errors. |
-| `reset(options?)` | `this` | Calls native `form.reset()` and clears errors by default. |
-| `clearInputs()` | `void` | Clears input values without resetting native defaults. |
-| `updateOptions(options)` | `this` | Updates options and rebinds listeners. |
-| `destroy()` | `void` | Removes listeners, loaders, error nodes, and runtime state. |
-
-## Static Methods and Constants
-
-```ts
-Form.initAll('form[data-form-father]', options);
-Form.setDefaultParams({ inputWrapperSelector: '.field' });
-Form.defaultValidationSchema = {};
-```
-
-| Export | Purpose |
-| --- | --- |
-| `FORM_ERROR_FIELD` | Constant for form-level errors in `getErrors()` and `setErrors()`. |
-| `Form.initAll(selector, options)` | Initializes matching forms and reuses existing instances. |
-| `Form.setDefaultParams(params)` | Merges global default options for future instances. |
-| `Form.defaultValidationSchema` | Global default validation schema. |
-
-## Validators
-
-```ts
-import {
-	createLengthValidator,
-	createPatternValidator,
-	registerFieldValidator,
-	registerValidator,
-} from 'form-father';
-```
-
-| Export | Purpose |
-| --- | --- |
-| `registerValidator(name, fn, message, options?)` | Registers a full validator. |
-| `registerFieldValidator(name, predicate, message, options?)` | Registers a predicate-only field validator. |
-| `getValidator(name)` | Reads one validator definition. |
-| `getAllValidators()` | Reads the validator registry. |
-| `createPatternValidator(pattern)` | Builds a regex validator. |
-| `createLengthValidator(options)` | Builds min/max length validation. |
-
-## Form Validators
-
-```ts
-import { dateOrder, requiredIf, sameAsField } from 'form-father';
-```
-
-| Export | Purpose |
-| --- | --- |
-| `createFormValidator(predicate, issue)` | Builds a reusable cross-field validator. |
-| `sameAsField(field, otherField, message?, rule?)` | Checks that two values match. |
-| `requiredIf(field, condition, message?, rule?)` | Makes a field required when a predicate is true. |
-| `dateOrder(startField, endField, message?, rule?)` | Checks chronological field order. |
-
-## Schema Adapters
-
-```ts
-import { createSchemaValidator, registerSchemaValidator } from 'form-father';
-```
-
-Adapters expect a schema-like object with either `safeParse(value)` or `parse(value)`.
-
-| Export | Purpose |
-| --- | --- |
-| `createSchemaValidator(schema, message?)` | Converts a schema into a field validator function. |
-| `registerSchemaValidator(name, schema, message?, options?)` | Registers a schema-backed rule. |
-| `createFieldValidator(predicate, message)` | Creates a simple predicate validator. |
-
-## Helpers
-
-| Export | Purpose |
-| --- | --- |
-| `serializeToFormData(element)` | Serializes a form-like element into `FormData`. |
-| `serializeFormToJSON(form)` | Serializes a form into a plain object. |
-| `isEmailValid(value)` | Checks email format. |
-| `isUrlValid(value)` | Checks URLs, domains, IPs, and `localhost`. |
-| `isPhoneValid(value)` | Checks Russian `+7XXXXXXXXXX` phone numbers. |
-| `closest(element, selector)` | Finds a closest matching ancestor. |
-| `parseCommonResponseProperties(body)` | Normalizes common response flags. |
-| `blockScrollBody()` | Locks body scrolling. |
-| `unblockScrollBody()` | Restores body scrolling. |
-

package/docs/demo/README.md

@@ -1,37 +0,0 @@
-# Demo Guide
-
-The demo is a static, dependency-light page that exercises common Form Father flows after a package build.
-
-```bash
-npm run build
-npm run demos
-```
-
-Open the Vite URL printed by the command. The page loads `dist/FormFather.min.js` and `demos/main.js`, so it reflects the
-actual browser bundle.
-
-## Demo Forms
-
-| Form | What it demonstrates |
-| --- | --- |
-| Login | Live validation, async validator state, password confirmation, and custom error containers. |
-| Callback | Server-side field errors and form-level API errors. |
-| Search | `GET` forms and query-string body handling. |
-| Multipart | Browser-managed `FormData` upload flow. |
-| Public API | `setValues()`, `validateField()`, `setErrors()`, `getValues()`, and `clearErrors()`. |
-
-## Useful Manual Checks
-
-- Enter `taken@example.com` in the Login email field to see async validation fail.
-- Submit Callback with a valid phone to see backend field errors applied after the mocked response.
-- Clear the Search query and submit to inspect the accessible error summary.
-- Use Public API buttons to inspect programmatic state changes in the Output panel.
-
-## Files
-
-| File | Purpose |
-| --- | --- |
-| `demos/index.html` | Demo markup and forms. |
-| `demos/main.js` | Mock API, validator registration, `Form.initAll()`, and public API playground actions. |
-| `demos/styles.css` | Minimal UI styling for fields, summaries, output, and loading states. |
-