@elcrm/form 0.0.64 → 0.0.66

package/dist/fields/Textarea.js

@@ -2,46 +2,51 @@ import e from "../styles/Field.module.js";
 import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { asEditableClipboard as i } from "../events/onEvent.js";
+import { isEmptyTextLike as a } from "./visibility.js";
 import "react";
-import { Fragment as a, jsx as o } from "react/jsx-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/lib/fields/Textarea.tsx
-function s({ value: s, form: c, onValue: l, name: u, placeholder: d = "", title: f = "", label: p = "", hide: m = !1, edit: h = !0, active: g = !0, after: _ = "", show: v = !0, maxLength: y, error: b = "", onSave: x, className: S = "", isCopy: C = !0 }) {
-	let { value: w, version: T } = n(c, u || "", s), E = (e) => {
+function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "text", maxLength: C, spellCheck: w = !0 }) {
+	let { value: T, version: E } = n(u, f || "", l), D = !g, O = (e) => {
 		let t = {
 			value: e.currentTarget.innerText,
-			name: u || ""
+			name: f || ""
 		};
-		c && u && c.onValue(t), l && l !== c?.onValue && l(t);
-	}, D = (e) => {
+		u && f && u.onValue(t), d && d !== u?.onValue && d(t);
+	}, k = (e) => {
 		let t = (e.currentTarget.textContent ?? "").trim();
-		y && t.length >= y && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
-	}, O = (e) => r.Paste(y || 0, i(e));
-	if (m) return /* @__PURE__ */ o(a, {});
-	if (!(h && g) && !v) return "";
-	let k = {};
-	return d && (k.placeholder = d), h && g && (k.edit = ""), /* @__PURE__ */ o(t, {
+		C && t.length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
+	}, A = (e) => r.Paste(C || 0, i(e));
+	if (h && a(T)) return /* @__PURE__ */ s(o, {});
+	let j = {};
+	return p && (j.placeholder = p), D && (j.edit = ""), j.inputMode = S || "text", /* @__PURE__ */ c(t, {
 		type: "note",
-		title: f || p,
-		error: b,
-		element_blok: { className: [S || ""] },
+		label: m,
+		error: x,
+		element_blok: { className: [v || ""] },
 		element_input: { className: [e.n] },
-		children: /* @__PURE__ */ o("div", {
-			onPaste: O,
-			onInput: E,
-			onBlur: (e) => {
-				r.Blur(e), x?.({
-					value: (e.currentTarget.textContent ?? "").trim(),
-					name: u || ""
-				});
-			},
-			onKeyDown: D,
-			contentEditable: h && g ? "plaintext-only" : !1,
-			suppressContentEditableWarning: !0,
-			...k,
-			children: w
-		}, T)
+		children: [
+			b,
+			/* @__PURE__ */ s("div", {
+				onPaste: A,
+				onInput: O,
+				onBlur: (e) => {
+					r.Blur(e), _?.({
+						value: (e.currentTarget.textContent ?? "").trim(),
+						name: f || ""
+					});
+				},
+				onKeyDown: k,
+				spellCheck: w,
+				contentEditable: D ? "plaintext-only" : !1,
+				suppressContentEditableWarning: !0,
+				...j,
+				children: T
+			}, E),
+			y
+		]
 	});
 }
-s.displayName = "TextareaField";
+l.displayName = "TextareaField";
 //#endregion
-export { s as default };
+export { l as default };

package/dist/fields/Time.d.ts

@@ -19,7 +19,7 @@ export type TTime = TInput & {
  * Пока фокус в группе — в DOM только введённые цифры без ведущих нулей; в форму значение
  * уходит при уходе фокуса с группы (snap минут, clamp, формат `HH:mm`).
  */
-declare function TimeField({ value, form, onValue: _onValue, onSave, name, title, label, error, placeholder, step, min, max, edit, active, disabled, className, isReload, id, spellCheck, align, }: TTime): import("react/jsx-runtime").JSX.Element;
+declare function TimeField({ value, form, onValue: _onValue, onBlur: onBlurField, name, placeholder, label, hidden, disabled, error, className, after, before, step, min, max, id, spellCheck, align, }: TTime): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TimeField {
     var displayName: string;
 }

package/dist/fields/Time.js

@@ -82,8 +82,8 @@ function _(e, t, n) {
 	}
 	return p(Math.floor(i / 60), i % 60);
 }
-function v({ value: h = "", form: v, onValue: ee, onSave: y, name: b = "", title: x = "", label: S = "", error: C = "", placeholder: w = "", step: T = 60, min: E, max: D, edit: te = !0, active: O = !0, disabled: k = !1, className: A = "", isReload: j = !1, id: ne, spellCheck: M = !1, align: N = "start" }) {
-	let { value: P, version: F } = n(v, b, h), I = d(P), L = te && O && !k, R = i.useRef(null), z = i.useRef(null), B = i.useRef(null), [V, H] = i.useState(!1);
+function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: D = "", before: te = "", step: O = 60, min: k, max: A, id: j, spellCheck: M = !1, align: N = "start" }) {
+	let { value: P, version: F } = n(v, b, h), I = d(P), L = !w, R = i.useRef(null), z = i.useRef(null), B = i.useRef(null), [V, H] = i.useState(!1);
 	i.useLayoutEffect(() => {
 		if (!V || !L) return;
 		let { h: e, m: t } = f(I), n = (e, t) => {
@@ -102,11 +102,11 @@ function v({ value: h = "", form: v, onValue: ee, onSave: y, name: b = "", title
 		let n = p(e, t);
 		if (!n) return "";
 		let { h: r, m: i } = f(n);
-		return i !== null && (n = p(r, g(i, T))), n &&= _(n, E, D), n || "";
+		return i !== null && (n = p(r, g(i, O))), n &&= _(n, k, A), n || "";
 	}, [
-		E,
-		D,
-		T
+		k,
+		A,
+		O
 	]), W = (e) => (t) => {
 		if (t.preventDefault(), !L) return;
 		let n = u(t.clipboardData?.getData("text/plain") ?? ""), r = e === "hour" ? 23 : 59;
@@ -167,8 +167,7 @@ function v({ value: h = "", form: v, onValue: ee, onSave: y, name: b = "", title
 			let r = U();
 			v && b && v.setValue({
 				name: b,
-				value: r,
-				reload: j
+				value: r
 			}), y && b && y({
 				value: r,
 				name: b
@@ -179,72 +178,75 @@ function v({ value: h = "", form: v, onValue: ee, onSave: y, name: b = "", title
 		v,
 		b,
 		y,
-		E,
-		D,
-		T,
-		j,
+		k,
+		A,
+		O,
 		U
 	]);
 	let { h: Z, m: Q } = f(I), $ = {};
-	return w && ($.placeholder = w), L && ($.edit = ""), /* @__PURE__ */ a(t, {
+	return x && ($.placeholder = x), L && ($.edit = ""), C && I === "" ? null : /* @__PURE__ */ o(t, {
 		type: "time",
-		title: x || S,
-		error: C,
-		element_blok: { className: [A || ""] },
+		label: S,
+		error: T,
+		element_blok: { className: [E || ""] },
 		element_input: {
 			className: [
 				e.w,
 				e.time,
 				N === "center" ? e.timeAlignCenter : ""
 			].filter(Boolean),
-			props: { "data-disabled": k || !L ? "true" : void 0 }
+			props: { "data-disabled": w || !L ? "true" : void 0 }
 		},
-		children: /* @__PURE__ */ o("div", {
-			ref: B,
-			className: e.timeInner,
-			role: "group",
-			"aria-label": x || S || "Время",
-			children: [
-				/* @__PURE__ */ a("div", {
-					id: ne,
-					ref: R,
-					className: e.timePart,
-					contentEditable: L ? "plaintext-only" : !1,
-					suppressContentEditableWarning: !0,
-					spellCheck: M,
-					inputMode: "numeric",
-					onPaste: W("hour"),
-					onInput: G,
-					onKeyDown: q,
-					onFocus: Y,
-					onBlur: X,
-					"aria-label": "Часы, 0–23",
-					...$,
-					children: !L || !V ? Z === null ? "" : l(Z) : null
-				}),
-				/* @__PURE__ */ a("span", {
-					className: e.timeSep,
-					"aria-hidden": "true",
-					children: ":"
-				}),
-				/* @__PURE__ */ a("div", {
-					ref: z,
-					className: e.timePart,
-					contentEditable: L ? "plaintext-only" : !1,
-					suppressContentEditableWarning: !0,
-					spellCheck: M,
-					inputMode: "numeric",
-					onPaste: W("minute"),
-					onInput: K,
-					onKeyDown: J,
-					onFocus: Y,
-					onBlur: X,
-					"aria-label": "Минуты, 0–59",
-					...$,
-					children: !L || !V ? Q === null ? "" : l(Q) : null
-				})
-			]
-		}, F)
+		children: [
+			te,
+			/* @__PURE__ */ o("div", {
+				ref: B,
+				className: e.timeInner,
+				role: "group",
+				"aria-label": S || "Время",
+				children: [
+					/* @__PURE__ */ a("div", {
+						id: j,
+						ref: R,
+						className: e.timePart,
+						contentEditable: L ? "plaintext-only" : !1,
+						suppressContentEditableWarning: !0,
+						spellCheck: M,
+						inputMode: "numeric",
+						onPaste: W("hour"),
+						onInput: G,
+						onKeyDown: q,
+						onFocus: Y,
+						onBlur: X,
+						"aria-label": "Часы, 0–23",
+						...$,
+						children: !L || !V ? Z === null ? "" : l(Z) : null
+					}),
+					/* @__PURE__ */ a("span", {
+						className: e.timeSep,
+						"aria-hidden": "true",
+						children: ":"
+					}),
+					/* @__PURE__ */ a("div", {
+						ref: z,
+						className: e.timePart,
+						contentEditable: L ? "plaintext-only" : !1,
+						suppressContentEditableWarning: !0,
+						spellCheck: M,
+						inputMode: "numeric",
+						onPaste: W("minute"),
+						onInput: K,
+						onKeyDown: J,
+						onFocus: Y,
+						onBlur: X,
+						"aria-label": "Минуты, 0–59",
+						...$,
+						children: !L || !V ? Q === null ? "" : l(Q) : null
+					})
+				]
+			}, F),
+			D
+		]
 	});
 }
 v.displayName = "TimeField";

package/dist/fields/type.d.ts

@@ -1,42 +1,77 @@
 import { ReactNode } from 'react';
 import { UseFormApi } from '../hooks/use';
-export type TInput = {
+/** Связь с формой и колбэки значения */
+export type TFieldFormBindings = {
     value?: unknown;
     form?: UseFormApi;
     onValue?: (data: TValue) => void | Promise<void>;
-    onSave?: (data: TValue) => void | Promise<void>;
+    /** Колбэк при потере фокуса (коммит значения), не нативный `FocusEvent` */
+    onBlur?: (data: TValue) => void | Promise<void>;
     name?: string;
-    placeholder?: string;
-    title?: string;
+};
+/** Подпись, доступность, видимость */
+export type TFieldPresentation = {
+    /** Подпись поля (визуально в `<dt>`) */
     label?: string;
+    placeholder?: string;
+    /** true — только просмотр, без ввода (аналог нативного disabled) */
     disabled?: boolean;
+    /**
+     * true — если значение поля **пустое**, поле не рендерится;
+     * при непустом значении поле показывается.
+     */
+    hidden?: boolean;
     error?: string;
-    hide?: boolean;
-    edit?: boolean;
-    active?: boolean;
     after?: ReactNode;
     before?: ReactNode;
-    show?: boolean;
     view?: string;
     id?: string;
     className?: string;
     isCopy?: boolean;
     maxLength?: number;
-    isReload?: boolean;
+    /**
+     * Проверка орфографии для **текстового** ввода (`Input`, `Textarea`).
+     * Для полей только с цифрами в компонентах выставляется **`false`**.
+     */
     spellCheck?: boolean;
+    /**
+     * Подсказка клавиатуры на мобильных (`inputMode`).
+     * Для **чисел** — `numeric`, для **денег** — `decimal`, **телефон** — `tel` (по умолчанию в полях).
+     */
     inputmode?: "text" | "email" | "none" | "tel" | "url" | "search" | "numeric" | "decimal";
+    /**
+     * Нативный `<input>` вместо **contentEditable** (`StringField`).
+     * Нужен для **автозаполнения логина/почты** (менеджеры паролей работают с нативными полями).
+     * У **`PasswordField`** свой проп **`native`** (см. **`TPasswordField`**).
+     */
+    native?: boolean;
+    /**
+     * Атрибут **`autocomplete`** (например **`username`**, **`email`**, **`off`**).
+     * Осмысленно при **`native`**; у `contentEditable` браузеры почти не применяют автозаполнение.
+     */
+    autoComplete?: string;
+    /**
+     * Тип нативного поля при **`native`** (по умолчанию **`text`**).
+     * Для почты удобно **`email`** + **`autoComplete="email"`**.
+     */
+    inputType?: "text" | "email" | "search" | "tel" | "url";
 };
+/** Базовые пропы текстовых и составных полей */
+export type TInput = TFieldFormBindings & TFieldPresentation;
 export type TValue = {
     value: unknown;
     name: string;
-    reload?: boolean;
     id?: string;
 };
-/** Поле пароля: расширение TInput (иконки «глаз», нативный режим отключён) */
-export type TPasswordField = TInput & {
+/**
+ * Поле пароля: **`native`** из `TInput` убран — здесь свой **`native`** = «не рендерить поле».
+ */
+export type TPasswordField = Omit<TInput, "native"> & {
+    /** true — компонент не рендерится (пустая строка), пароль отдаётся нативному `<input>` снаружи */
     native?: boolean;
-    /** Начальное состояние «показать пароль» */
-    isShow?: boolean;
-    /** [скрыть, показать] — ReactNode для переключателя */
+    /**
+     * Свои иконки переключателя **[показать пароль, скрыть пароль]** (когда ввод скрыт / виден).
+     * Если не задано — используются встроенные SVG.
+     */
     eyes?: [React.ReactNode?, React.ReactNode?];
 };

package/dist/fields/visibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Проверка «пустого» значения для режима **`hidden`**:
+ * при **`hidden === true`** поле не рендерится только если значение пустое.
+ */
+/** Строки и необработанный ввод (в т.ч. `contentEditable`) */
+export declare function isEmptyTextLike(value: unknown): boolean;

package/dist/fields/visibility.js

@@ -0,0 +1,6 @@
+//#region src/lib/fields/visibility.ts
+function e(e) {
+	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : !1;
+}
+//#endregion
+export { e as isEmptyTextLike };

package/dist/hooks/use.d.ts

@@ -4,7 +4,6 @@ export type FormValues = Record<string, unknown>;
 type FormChange = {
     name?: string;
     value?: unknown;
-    reload?: boolean;
 };
 type Listener = () => void;
 export type UseFormApi = {

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { default as SelectField } from './fields/Select';
 export { default as ModalField } from './fields/Modal';
 export { default as PasswordField } from './fields/Password';
 export { useForm, useFormField, useFormFieldState } from './hooks/use';
-export type { TInput, TValue, TPasswordField } from './fields/type';
+export type { TInput, TValue, TPasswordField, TFieldFormBindings, TFieldPresentation, } from './fields/type';
 export type { TRange, TProgress } from './fields/Range';
 export type { TTime } from './fields/Time';
 export type { FormValues, UseFormApi, UseFormFieldStateResult, } from './hooks/use';

package/dist/index.js

@@ -1,26 +1,28 @@
-import e from "./package.js";
-import { useForm as t, useFormField as n, useFormFieldState as r } from "./hooks/use.js";
-import i from "./fields/Range.js";
-import { asEditableClipboard as a } from "./events/onEvent.js";
-import o from "./fields/Money.js";
-import s from "./fields/Mask.js";
-import c from "./fields/Date.js";
-import l from "./fields/Time.js";
-import u from "./fields/Textarea.js";
-import { useFormInit as d } from "./FormInitContext.js";
-import f from "./fields/Phone.js";
-import p from "./fields/Input.js";
-import m from "./fields/Numeric.js";
-import h from "./fields/Options.js";
-import g from "./fields/Select.js";
-import _ from "./fields/Modal.js";
-import v from "./fields/Password.js";
-import { Form as y } from "./Form.js";
+import { markBaseStylesLoaded as e } from "./loadBaseStyles.js";
+import t from "./package.js";
+import { useForm as n, useFormField as r, useFormFieldState as i } from "./hooks/use.js";
+import a from "./fields/Range.js";
+import { asEditableClipboard as o } from "./events/onEvent.js";
+import s from "./fields/Money.js";
+import c from "./fields/Mask.js";
+import l from "./fields/Date.js";
+import u from "./fields/Time.js";
+import d from "./fields/Textarea.js";
+import { useFormInit as f } from "./FormInitContext.js";
+import p from "./fields/Phone.js";
+import m from "./fields/Input.js";
+import h from "./fields/Numeric.js";
+import g from "./fields/Options.js";
+import _ from "./fields/Select.js";
+import v from "./fields/Modal.js";
+import y from "./fields/Password.js";
+import { Form as b } from "./Form.js";
 //#region src/lib/index.ts
-function b() {
+e();
+function x() {
 	return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof self < "u" ? self : {};
 }
-var x = b();
-x.elcrm ||= {}, Object.assign(x.elcrm, { form: e.version });
+var S = x();
+S.elcrm ||= {}, Object.assign(S.elcrm, { form: t.version });
 //#endregion
-export { c as DateField, y as Form, s as MaskField, _ as ModalField, o as MoneyField, m as NumberField, h as OptionsField, v as PasswordField, f as PhoneField, i as ProgressField, i as RangeField, g as SelectField, p as StringField, u as TextareaField, l as TimeField, a as asEditableClipboard, t as useForm, n as useFormField, r as useFormFieldState, d as useFormInit };
+export { l as DateField, b as Form, c as MaskField, v as ModalField, s as MoneyField, h as NumberField, g as OptionsField, y as PasswordField, p as PhoneField, a as ProgressField, a as RangeField, _ as SelectField, m as StringField, d as TextareaField, u as TimeField, o as asEditableClipboard, n as useForm, r as useFormField, i as useFormFieldState, f as useFormInit };

package/dist/loadBaseStyles.d.ts

@@ -0,0 +1,2 @@
+/** Вызывается из `index.ts` при загрузке пакета с корня */
+export declare function markBaseStylesLoaded(): true;

package/dist/loadBaseStyles.js

@@ -0,0 +1,9 @@
+import e from "./styles/Field.module.js";
+import t from "./styles/Form.module.js";
+import n from "./styles/Select.module.js";
+//#region src/lib/loadBaseStyles.ts
+function r() {
+	return e.l, t.o, n.f, !0;
+}
+//#endregion
+export { r as markBaseStylesLoaded };

package/dist/package.js

@@ -1,6 +1,6 @@
 var e = {
 	name: "@elcrm/form",
-	version: "0.0.64",
+	version: "0.0.66",
 	description: "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
 	type: "module",
 	author: "MaSkal <dev@elcrm.online>",
@@ -11,6 +11,11 @@ var e = {
 		"form",
 		"react"
 	],
+	sideEffects: [
+		"**/*.css",
+		"**/*.scss",
+		"**/*.module.scss"
+	],
 	main: "./dist/index.umd.js",
 	module: "./dist/index.js",
 	types: "./dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@elcrm/form",
-    "version": "0.0.64",
+    "version": "0.0.66",
     "description": "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
     "type": "module",
     "author": "MaSkal <dev@elcrm.online>",
@@ -14,6 +14,11 @@
         "form",
         "react"
     ],
+    "sideEffects": [
+        "**/*.css",
+        "**/*.scss",
+        "**/*.module.scss"
+    ],
     "main": "./dist/index.umd.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",