@elcrm/form 0.0.79 → 0.0.81

package/dist/fields/Email.js

@@ -0,0 +1,80 @@
+import e from "../styles/Field.module.js";
+import t from "../core/Field.js";
+import { useFormFieldState as n } from "../hooks/use.js";
+import { isEmptyTextLike as r } from "./visibility.js";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/lib/fields/Email.tsx
+function s({ value: s = "", form: c, onValue: l, onBlur: u, name: d = "", placeholder: f = "", label: p = "", error: m = "", hidden: h = !1, disabled: g = !1, className: _ = "", after: v = "", before: y = "", maxLength: b, autoComplete: x = "email", id: S }) {
+	let { value: C, version: w } = n(c, d, s), T = !g, E = typeof C == "string" || typeof C == "number" ? String(C) : "", D = i.useRef(null);
+	i.useEffect(() => {
+		let e = D.current;
+		!e || e.value === E || (e.value = E);
+	}, [E, w]);
+	let O = (e, t = !1) => {
+		let n = {
+			value: e,
+			name: d
+		};
+		c && d && (t ? c.setValue(n) : c.onValue(n)), l && l !== c?.onValue && l(n);
+	};
+	return h && r(C) ? null : /* @__PURE__ */ o(t, {
+		type: "email",
+		label: p,
+		error: m,
+		element_blok: { className: [_ || ""] },
+		element_input: {
+			className: [e.w],
+			props: { "data-disabled": g || !T ? "true" : void 0 }
+		},
+		children: [
+			y ? /* @__PURE__ */ a("span", {
+				className: e.affix,
+				children: y
+			}) : null,
+			/* @__PURE__ */ a("div", { children: /* @__PURE__ */ a("input", {
+				id: S,
+				ref: D,
+				type: "email",
+				name: d || void 0,
+				defaultValue: E,
+				placeholder: f,
+				maxLength: b,
+				disabled: g,
+				readOnly: !T,
+				autoComplete: x,
+				inputMode: "email",
+				spellCheck: !1,
+				"aria-label": p || f || "Email",
+				onChange: (e) => O(e.target.value),
+				onBlur: (e) => {
+					let t = (e.target.value || "").trim();
+					O(t, !0), u?.({
+						value: t,
+						name: d
+					});
+				},
+				onKeyDown: (e) => {
+					e.key === "Enter" && e.preventDefault();
+				},
+				style: {
+					width: "100%",
+					border: "none",
+					outline: "none",
+					background: "transparent",
+					font: "inherit",
+					color: "inherit",
+					padding: 0,
+					margin: 0
+				}
+			}) }),
+			v ? /* @__PURE__ */ a("span", {
+				className: e.affix,
+				children: v
+			}) : null
+		]
+	});
+}
+s.displayName = "EmailField";
+//#endregion
+export { s as default };

package/dist/fields/File.d.ts

@@ -0,0 +1,24 @@
+import { TInput } from './type';
+/** Метаданные выбранного файла (File в форме сериализовать нельзя надёжно). */
+export type TFileMeta = {
+    name: string;
+    size: number;
+    type: string;
+    lastModified: number;
+};
+export type TFile = TInput & {
+    accept?: string;
+    multiple?: boolean;
+    /** Макс. размер одного файла, байт */
+    maxSize?: number;
+    /**
+     * Если true — в форму пишутся сами `File` / `File[]`.
+     * Иначе — метаданные `TFileMeta` / `TFileMeta[]` (удобнее для превью).
+     */
+    keepFile?: boolean;
+};
+declare function FileField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, accept, multiple, maxSize, keepFile, }: TFile): import("react/jsx-runtime").JSX.Element | null;
+declare namespace FileField {
+    var displayName: string;
+}
+export default FileField;

package/dist/fields/File.js

@@ -0,0 +1,115 @@
+import e from "../styles/Field.module.js";
+import t from "../core/Field.js";
+import { useFormFieldState as n } from "../hooks/use.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/fields/File.tsx
+function o(e) {
+	return {
+		name: e.name,
+		size: e.size,
+		type: e.type,
+		lastModified: e.lastModified
+	};
+}
+function s(e) {
+	return e ? Array.isArray(e) ? e : typeof File < "u" && e instanceof File || typeof e == "object" && e && "name" in e ? [e] : [] : [];
+}
+function c(e) {
+	return e < 1024 ? `${e} Б` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} КБ` : `${(e / (1024 * 1024)).toFixed(1)} МБ`;
+}
+function l({ value: l, form: u, onValue: d, onBlur: f, name: p = "", placeholder: m = "Выберите файл", label: h = "", error: g = "", hidden: _ = !1, disabled: v = !1, className: y = "", after: b = "", before: x = "", accept: S, multiple: C = !1, maxSize: w, keepFile: T = !0 }) {
+	let { value: E } = n(u, p, l), D = s(E), O = !v, k = r.useRef(null), [A, j] = r.useState(""), M = (e) => {
+		let t = {
+			value: e,
+			name: p
+		};
+		u && p && u.setValue(t), d && d !== u?.onValue && d(t);
+	}, N = (e) => {
+		if (!e || e.length === 0) return;
+		let t = Array.from(e);
+		if (w !== void 0) {
+			let e = t.find((e) => e.size > w);
+			if (e) {
+				j(`Файл «${e.name}» больше ${c(w)}`);
+				return;
+			}
+		}
+		j("");
+		let n = T ? C ? t : t[0] : C ? t.map(o) : o(t[0]);
+		M(n), f?.({
+			value: n,
+			name: p
+		});
+	}, P = () => {
+		O && (M(C ? [] : null), k.current && (k.current.value = ""), j(""));
+	}, F = D.length === 0;
+	return _ && F ? null : /* @__PURE__ */ a(t, {
+		type: "file",
+		label: h,
+		error: g || A,
+		element_blok: { className: [y || ""] },
+		element_input: {
+			className: [e.file],
+			props: { "data-disabled": v || !O ? "true" : void 0 }
+		},
+		children: [
+			x ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: x
+			}) : null,
+			/* @__PURE__ */ a("div", {
+				className: e.fileInner,
+				children: [
+					/* @__PURE__ */ i("input", {
+						ref: k,
+						type: "file",
+						className: e.fileInput,
+						accept: S,
+						multiple: C,
+						disabled: v || !O,
+						"aria-label": h || m || "Файл",
+						onChange: (e) => N(e.target.files)
+					}),
+					/* @__PURE__ */ i("button", {
+						type: "button",
+						className: e.fileButton,
+						disabled: !O,
+						onClick: () => k.current?.click(),
+						children: m
+					}),
+					/* @__PURE__ */ i("div", {
+						className: e.fileList,
+						children: F ? /* @__PURE__ */ i("span", {
+							className: e.fileEmpty,
+							children: "Нет файла"
+						}) : D.map((t, n) => /* @__PURE__ */ a("span", {
+							className: e.fileItem,
+							children: [/* @__PURE__ */ i("span", {
+								className: e.fileName,
+								children: t.name
+							}), /* @__PURE__ */ i("span", {
+								className: e.fileSize,
+								children: c(t.size)
+							})]
+						}, `${t.name}-${n}`))
+					}),
+					!F && O ? /* @__PURE__ */ i("button", {
+						type: "button",
+						className: e.fileClear,
+						"aria-label": "Очистить",
+						onClick: P,
+						children: "×"
+					}) : null
+				]
+			}),
+			b ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: b
+			}) : null
+		]
+	});
+}
+l.displayName = "FileField";
+//#endregion
+export { l as default };

package/dist/fields/Hidden.d.ts

@@ -0,0 +1,11 @@
+import { TInput } from './type';
+/**
+ * HiddenField — значение в форме без UI.
+ * Рендерит нативный `<input type="hidden">` для submit обычных форм.
+ */
+export type THidden = Pick<TInput, "value" | "form" | "onValue" | "name" | "id" | "hidden">;
+declare function HiddenField({ value, form, onValue, name, id, hidden, }: THidden): import("react/jsx-runtime").JSX.Element | null;
+declare namespace HiddenField {
+    var displayName: string;
+}
+export default HiddenField;

package/dist/fields/Hidden.js

@@ -0,0 +1,33 @@
+import { useFormFieldState as e } from "../hooks/use.js";
+import t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/fields/Hidden.tsx
+function r({ value: r = "", form: i, onValue: a, name: o = "", id: s, hidden: c = !1 }) {
+	let { value: l } = e(i, o, r);
+	if (t.useEffect(() => {
+		if (!i || !o || i.getValue(o) !== void 0) return;
+		let e = {
+			value: l,
+			name: o
+		};
+		i.onValue(e), a && a !== i.onValue && a(e);
+	}, [
+		i,
+		o,
+		l,
+		a
+	]), c) return null;
+	let u = l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : JSON.stringify(l);
+	return /* @__PURE__ */ n("input", {
+		type: "hidden",
+		id: s,
+		name: o || void 0,
+		value: u,
+		readOnly: !0,
+		"data-field": "hidden",
+		"aria-hidden": !0
+	});
+}
+r.displayName = "HiddenField";
+//#endregion
+export { r as default };

package/dist/fields/Numeric.js

@@ -15,39 +15,55 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 		let e = j.current;
 		e && e.textContent !== A && (e.textContent = A);
 	}, [A, k]);
-	let N = w ?? T, P = !1, F = (e) => {
-		let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
-		n.length > N && (n = n.slice(0, N), t.textContent = n, queueMicrotask(() => {
-			let e = t.firstChild;
-			if (e && e.nodeType === Node.TEXT_NODE) {
-				let t = n.length, r = window.getSelection(), i = document.createRange();
-				i.setStart(e, t), i.collapse(!0), r?.removeAllRanges(), r?.addRange(i);
-			}
+	let N = w ?? T, P = !1, F = (e, t) => {
+		e.textContent !== t && (e.textContent = t, queueMicrotask(() => {
+			let n = e.firstChild;
+			if (n && n.nodeType === Node.TEXT_NODE) {
+				let e = t.length, r = window.getSelection(), i = document.createRange();
+				i.setStart(n, e), i.collapse(!0), r?.removeAllRanges(), r?.addRange(i);
+			} else t || (e.innerHTML = "<br>");
 		}));
+	}, I = (e) => {
+		let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
+		N > 0 && n.length > N && (n = n.slice(0, N)), F(t, n);
 		let r = {
 			value: n,
 			name: p
 		};
 		d && p && d.onValue(r), f && f !== d?.onValue && f(r);
-	}, I = (e) => {
+	}, L = (e) => {
 		M.current = !0;
 		let t = e.currentTarget;
 		t.textContent = (t.textContent || "").replace(/\D/g, ""), r.Focus({ target: e.currentTarget });
-	}, L = (e) => {
+	}, R = (e) => {
 		if (P && e.which === 86) return;
 		if (e.which === 17 || e.which === 91) return P = !0;
 		if (e.key === "Backspace") return;
 		let t = (e.currentTarget.textContent ?? "").replace(/\D/g, "").length;
-		N > 0 && t >= N && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
-	}, R = (e) => {
+		N > 0 && t >= N && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && !e.metaKey && !e.ctrlKey && e.preventDefault();
+	}, z = (e) => {
 		if (e.which === 17 || e.which === 91) return P = !1;
-	}, z = (e) => r.PasteDigits(N, i(e)), B = (e) => {
-		r.Blur(e), v?.({
-			value: e.currentTarget.textContent,
+	}, B = (e) => {
+		r.PasteDigits(N, i(e)), queueMicrotask(() => {
+			let e = j.current;
+			if (!e) return;
+			let t = (e.textContent || "").replace(/\D/g, "");
+			N > 0 && t.length > N && (t = t.slice(0, N)), F(e, t), d && p && d.onValue({
+				value: t,
+				name: p
+			});
+		});
+	}, V = (e) => {
+		e.preventDefault();
+	}, H = (e) => {
+		r.Blur(e);
+		let t = (e.currentTarget.textContent || "").replace(/\D/g, "");
+		e.currentTarget.textContent !== t && (e.currentTarget.textContent = t), v?.({
+			value: t,
 			name: p
 		}), M.current = !1;
-	}, V = {};
-	return D && (V.edit = ""), V.inputMode = C ?? "numeric", m && (V.placeholder = m), g && a(O) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
+	}, U = {};
+	return D && (U.edit = ""), U.inputMode = C ?? "numeric", m && (U.placeholder = m), g && a(O) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
 		type: "numeric",
 		label: h,
 		error: S,
@@ -60,19 +76,21 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 			}) : null,
 			/* @__PURE__ */ c("div", {
 				ref: j,
-				onPaste: z,
-				onInput: F,
-				onFocus: I,
-				onBlur: B,
-				onKeyDown: L,
-				onKeyUp: R,
+				onPaste: B,
+				onDrop: V,
+				onDragOver: (e) => e.preventDefault(),
+				onInput: I,
+				onFocus: L,
+				onBlur: H,
+				onKeyDown: R,
+				onKeyUp: z,
 				spellCheck: !1,
 				role: "textbox",
 				tabIndex: D ? 0 : -1,
 				"aria-label": h || m || "Число",
 				contentEditable: D ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...V
+				...U
 			}),
 			b ? /* @__PURE__ */ c("span", {
 				className: e.affix,

package/dist/fields/Percent.d.ts

@@ -0,0 +1,13 @@
+import { TInput } from './type';
+/** PercentField — процент 0…max с суффиксом «%». */
+export type TPercent = TInput & {
+    min?: number;
+    max?: number;
+    /** Допускать дробную часть */
+    decimals?: number;
+};
+declare function PercentField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, min, max, decimals, inputmode, }: TPercent): import("react/jsx-runtime").JSX.Element | null;
+declare namespace PercentField {
+    var displayName: string;
+}
+export default PercentField;

package/dist/fields/Percent.js

@@ -0,0 +1,100 @@
+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 a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/lib/fields/Percent.tsx
+function c(e, t, n) {
+	return Number.isFinite(e) ? Math.min(n, Math.max(t, e)) : t;
+}
+function l(e, t) {
+	let n = e.replace(",", ".").replace(/[^\d.]/g, "");
+	if (!n) return null;
+	let r = Number(n);
+	if (!Number.isFinite(r)) return null;
+	if (t <= 0) return Math.round(r);
+	let i = 10 ** t;
+	return Math.round(r * i) / i;
+}
+function u(e, t) {
+	return Number.isFinite(e) ? String(t <= 0 ? Math.round(e) : Number(e.toFixed(t))) : "";
+}
+function d({ value: d = 0, form: f, onValue: p, onBlur: m, name: h = "", placeholder: g = "0", label: _ = "", error: v = "", hidden: y = !1, disabled: b = !1, className: x = "", after: S, before: C = "", min: w = 0, max: T = 100, decimals: E = 0, inputmode: D = "decimal" }) {
+	let { value: O, version: k } = n(f, h, d), A = !b, j = c(Number(O), w, T), M = O == null || O === "" ? "" : u(j, E), N = a.useRef(null), P = a.useRef(!1);
+	a.useLayoutEffect(() => {
+		if (P.current) return;
+		let e = N.current;
+		e && e.textContent !== M && (e.textContent = M);
+	}, [M, k]);
+	let F = (e, t = !1) => {
+		let n = {
+			value: e,
+			name: h
+		};
+		f && h && (t ? f.setValue(n) : f.onValue(n)), p && p !== f?.onValue && p(n);
+	}, I = (e) => {
+		let t = (e.currentTarget.textContent || "").replace(/[^\d.,]/g, "");
+		e.currentTarget.textContent !== t && (e.currentTarget.textContent = t);
+		let n = l(t, E);
+		if (n === null) {
+			F("");
+			return;
+		}
+		F(c(n, w, T));
+	}, L = (e) => {
+		r.Blur(e), P.current = !1;
+		let t = l(e.currentTarget.textContent || "", E), n = t === null ? w : c(t, w, T), i = u(n, E);
+		e.currentTarget.textContent !== i && (e.currentTarget.textContent = i), F(n, !0), m?.({
+			value: n,
+			name: h
+		});
+	};
+	if (y && (O == null || O === "")) return null;
+	let R = {};
+	return g && (R.placeholder = g), A && (R.edit = ""), R.inputMode = D || "decimal", /* @__PURE__ */ s(t, {
+		type: "percent",
+		label: _,
+		error: v,
+		element_blok: { className: [x || ""] },
+		element_input: {
+			className: [e.w],
+			props: { "data-disabled": b || !A ? "true" : void 0 }
+		},
+		children: [
+			C ? /* @__PURE__ */ o("span", {
+				className: e.affix,
+				children: C
+			}) : null,
+			/* @__PURE__ */ o("div", {
+				ref: N,
+				onInput: I,
+				onFocus: (e) => {
+					P.current = !0, r.Focus({ target: e.currentTarget });
+				},
+				onBlur: L,
+				onPaste: (e) => r.Paste(12, i(e)),
+				onKeyDown: (e) => {
+					e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/[\d.,]/.test(e.key) && !e.metaKey && !e.ctrlKey && e.preventDefault();
+				},
+				spellCheck: !1,
+				role: "textbox",
+				tabIndex: A ? 0 : -1,
+				"aria-label": _ || g || "Процент",
+				contentEditable: A ? "plaintext-only" : !1,
+				suppressContentEditableWarning: !0,
+				...R
+			}),
+			S === void 0 ? /* @__PURE__ */ o("span", {
+				className: e.affix,
+				children: "%"
+			}) : /* @__PURE__ */ o("span", {
+				className: e.affix,
+				children: S
+			})
+		]
+	});
+}
+d.displayName = "PercentField";
+//#endregion
+export { d as default };

package/dist/fields/Radio.d.ts

@@ -0,0 +1,22 @@
+import { TInput } from './type';
+type RadioOptionObject = Record<string | number, {
+    n: string;
+    s?: number;
+}>;
+type RadioOptionArrayItem = {
+    id?: string | number;
+    i?: string | number;
+    n: string;
+    s?: number;
+};
+type RadioOptions = RadioOptionObject | RadioOptionArrayItem[];
+export type TRadio = TInput & {
+    options?: RadioOptions;
+    /** Горизонтальный ряд вместо колонки */
+    inline?: boolean;
+};
+declare function RadioField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, options, inline, }: TRadio): import("react/jsx-runtime").JSX.Element | null;
+declare namespace RadioField {
+    var displayName: string;
+}
+export default RadioField;

package/dist/fields/Radio.js

@@ -0,0 +1,88 @@
+import e from "../styles/Field.module.js";
+import t from "../core/Field.js";
+import { useFormFieldState as n } from "../hooks/use.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/fields/Radio.tsx
+function o(e) {
+	return e ? Array.isArray(e) ? e.map((e) => ({
+		id: e.id ?? e.i ?? "",
+		label: e.n || "",
+		hidden: e.s === 0
+	})).filter((e) => e.label.length > 0 && e.id !== "") : Object.keys(e).map((t) => {
+		let n = e[t], r = Number(t);
+		return {
+			id: Number.isFinite(r) && String(r) === t ? r : t,
+			label: n?.n || "",
+			hidden: n?.s === 0
+		};
+	}).filter((e) => e.label.length > 0) : [];
+}
+function s(e, t) {
+	return e === t ? !0 : String(e) === String(t);
+}
+function c({ value: c = "", form: l, onValue: u, onBlur: d, name: f = "", placeholder: p = "", label: m = "", error: h = "", hidden: g = !1, disabled: _ = !1, className: v = "", after: y = "", before: b = "", options: x, inline: S = !1 }) {
+	let { value: C } = n(l, f, c), w = !_, T = o(x).filter((e) => !e.hidden), E = r.useId(), D = (e) => {
+		let t = {
+			value: e,
+			name: f
+		};
+		l && f && l.setValue(t), u && u !== l?.onValue && u(t);
+	};
+	return g && (C == null || C === "") ? null : /* @__PURE__ */ a(t, {
+		type: "radio",
+		label: m,
+		error: h,
+		element_blok: { className: [v || ""] },
+		element_input: {
+			className: [e.radio, S ? e.radioInline : ""],
+			props: {
+				"data-disabled": _ || !w ? "true" : void 0,
+				role: "radiogroup",
+				"aria-label": m || p || "Выбор"
+			}
+		},
+		children: [
+			b ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: b
+			}) : null,
+			/* @__PURE__ */ i("div", { children: T.map((t) => {
+				let n = s(C, t.id);
+				return /* @__PURE__ */ a("button", {
+					type: "button",
+					className: e.radioItem,
+					role: "radio",
+					"aria-checked": n,
+					"aria-disabled": _ || !w ? !0 : void 0,
+					disabled: _ || !w,
+					name: E,
+					onClick: () => {
+						w && D(t.id);
+					},
+					onBlur: () => {
+						!d || !f || d({
+							value: l ? l.getValue(f, C) : C,
+							name: f
+						});
+					},
+					children: [/* @__PURE__ */ i("span", {
+						className: e.radioDot,
+						"aria-hidden": !0,
+						children: n ? /* @__PURE__ */ i("span", { className: e.radioDotFill }) : null
+					}), /* @__PURE__ */ i("span", {
+						className: e.radioText,
+						children: t.label
+					})]
+				}, String(t.id));
+			}) }),
+			y ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: y
+			}) : null
+		]
+	});
+}
+c.displayName = "RadioField";
+//#endregion
+export { c as default };

package/dist/fields/Rating.d.ts

@@ -0,0 +1,12 @@
+import { TInput } from './type';
+/** RatingField — оценка звёздами. Значение: число 0…max. */
+export type TRating = TInput & {
+    max?: number;
+    /** Разрешить сброс повторным кликом по текущей оценке */
+    allowClear?: boolean;
+};
+declare function RatingField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, max, allowClear, }: TRating): import("react/jsx-runtime").JSX.Element | null;
+declare namespace RatingField {
+    var displayName: string;
+}
+export default RatingField;