@elcrm/form 0.0.80 → 0.0.82

package/dist/fields/Rating.js

@@ -0,0 +1,82 @@
+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/Rating.tsx
+function o(e, t) {
+	return Number.isFinite(e) ? Math.min(t, Math.max(0, Math.round(e))) : 0;
+}
+function s({ value: s = 0, 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 = "", max: b = 5, allowClear: x = !0 }) {
+	let { value: S } = n(c, d, s), C = o(Number(S), b), w = !g, [T, E] = r.useState(0), D = (e) => {
+		let t = {
+			value: e,
+			name: d
+		};
+		c && d && c.setValue(t), l && l !== c?.onValue && l(t);
+	};
+	if (h && !C) return null;
+	let O = T || C;
+	return /* @__PURE__ */ a(t, {
+		type: "rating",
+		label: p,
+		error: m,
+		element_blok: { className: [_ || ""] },
+		element_input: {
+			className: [e.rating],
+			props: { "data-disabled": g || !w ? "true" : void 0 }
+		},
+		children: [
+			y ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: y
+			}) : null,
+			/* @__PURE__ */ i("div", {
+				role: "slider",
+				"aria-label": p || f || "Оценка",
+				"aria-valuemin": 0,
+				"aria-valuemax": b,
+				"aria-valuenow": C,
+				tabIndex: w ? 0 : -1,
+				onMouseLeave: () => E(0),
+				onBlur: () => {
+					E(0), u?.({
+						value: C,
+						name: d
+					});
+				},
+				onKeyDown: (e) => {
+					if (!w) return;
+					let t = C;
+					if (e.key === "ArrowRight" || e.key === "ArrowUp") t = Math.min(b, C + 1);
+					else if (e.key === "ArrowLeft" || e.key === "ArrowDown") t = Math.max(0, C - 1);
+					else if (e.key === "Home") t = 0;
+					else if (e.key === "End") t = b;
+					else return;
+					e.preventDefault(), D(t);
+				},
+				children: Array.from({ length: b }, (t, n) => {
+					let r = n + 1;
+					return /* @__PURE__ */ i("button", {
+						type: "button",
+						className: r <= O ? `${e.ratingStar} ${e.ratingStarOn}` : e.ratingStar,
+						"aria-label": `${r} из ${b}`,
+						disabled: !w,
+						onMouseEnter: () => w && E(r),
+						onClick: () => {
+							w && D(x && C === r ? 0 : r);
+						},
+						children: "★"
+					}, r);
+				})
+			}),
+			v ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: v
+			}) : null
+		]
+	});
+}
+s.displayName = "RatingField";
+//#endregion
+export { s as default };

package/dist/fields/RichText.d.ts

@@ -0,0 +1,14 @@
+import { TInput } from './type';
+/**
+ * RichTextField — простой WYSIWYG без внешних библиотек.
+ * Значение: HTML-строка. Панель: жирный / курсив / подчёркивание / списки.
+ */
+export type TRichText = TInput & {
+    /** Показать панель форматирования */
+    toolbar?: boolean;
+};
+declare function RichTextField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxLength, spellCheck, toolbar, }: TRichText): import("react/jsx-runtime").JSX.Element | null;
+declare namespace RichTextField {
+    var displayName: string;
+}
+export default RichTextField;

package/dist/fields/RichText.js

@@ -0,0 +1,134 @@
+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/RichText.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, spellCheck: x = !0, toolbar: S = !0 }) {
+	let { value: C, version: w } = n(c, d, s), T = !g, E = typeof C == "string" ? C : "", D = i.useRef(null), O = i.useRef(!1);
+	i.useLayoutEffect(() => {
+		if (O.current) return;
+		let e = D.current;
+		e && e.innerHTML !== E && (e.innerHTML = E || "");
+	}, [E, w]);
+	let k = (e, t = !1) => {
+		let n = e;
+		if (b && n.replace(/<[^>]+>/g, "").length > b) return;
+		let r = {
+			value: n,
+			name: d
+		};
+		c && d && (t ? c.setValue(r) : c.onValue(r)), l && l !== c?.onValue && l(r);
+	}, A = (e) => {
+		if (T) {
+			D.current?.focus();
+			try {
+				document.execCommand(e, !1);
+			} catch {}
+			k(D.current?.innerHTML || "");
+		}
+	};
+	if (h && r(E.replace(/<[^>]+>/g, ""))) return null;
+	let j = {};
+	return f && !E && (j.placeholder = f), T && (j.edit = ""), /* @__PURE__ */ o(t, {
+		type: "richtext",
+		label: p,
+		error: m,
+		element_blok: { className: [_ || ""] },
+		element_input: {
+			className: [e.rich],
+			props: { "data-disabled": g || !T ? "true" : void 0 }
+		},
+		children: [
+			y ? /* @__PURE__ */ a("span", {
+				className: e.affix,
+				children: y
+			}) : null,
+			/* @__PURE__ */ o("div", {
+				className: e.richWrap,
+				children: [S ? /* @__PURE__ */ o("div", {
+					className: e.richToolbar,
+					role: "toolbar",
+					children: [
+						/* @__PURE__ */ a("button", {
+							type: "button",
+							className: e.richBtn,
+							disabled: !T,
+							"aria-label": "Жирный",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => A("bold"),
+							children: "B"
+						}),
+						/* @__PURE__ */ a("button", {
+							type: "button",
+							className: e.richBtn,
+							disabled: !T,
+							"aria-label": "Курсив",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => A("italic"),
+							children: /* @__PURE__ */ a("em", { children: "I" })
+						}),
+						/* @__PURE__ */ a("button", {
+							type: "button",
+							className: e.richBtn,
+							disabled: !T,
+							"aria-label": "Подчёркивание",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => A("underline"),
+							children: /* @__PURE__ */ a("u", { children: "U" })
+						}),
+						/* @__PURE__ */ a("button", {
+							type: "button",
+							className: e.richBtn,
+							disabled: !T,
+							"aria-label": "Маркированный список",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => A("insertUnorderedList"),
+							children: "•"
+						}),
+						/* @__PURE__ */ a("button", {
+							type: "button",
+							className: e.richBtn,
+							disabled: !T,
+							"aria-label": "Нумерованный список",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => A("insertOrderedList"),
+							children: "1."
+						})
+					]
+				}) : null, /* @__PURE__ */ a("div", {
+					ref: D,
+					className: e.richEditor,
+					contentEditable: T,
+					suppressContentEditableWarning: !0,
+					spellCheck: x,
+					role: "textbox",
+					"aria-multiline": !0,
+					"aria-label": p || f || "Текст",
+					tabIndex: T ? 0 : -1,
+					onFocus: () => {
+						O.current = !0;
+					},
+					onInput: () => k(D.current?.innerHTML || ""),
+					onBlur: () => {
+						O.current = !1;
+						let e = D.current?.innerHTML || "";
+						k(e, !0), u?.({
+							value: e,
+							name: d
+						});
+					},
+					...j
+				})]
+			}),
+			v ? /* @__PURE__ */ a("span", {
+				className: e.affix,
+				children: v
+			}) : null
+		]
+	});
+}
+s.displayName = "RichTextField";
+//#endregion
+export { s as default };

package/dist/fields/Tags.d.ts

@@ -0,0 +1,12 @@
+import { TInput } from './type';
+/** TagsField — чипы / метки. Значение: `string[]`. */
+export type TTags = TInput & {
+    maxTags?: number;
+    /** Разделители при вводе (по умолчанию Enter / запятая) */
+    separators?: string[];
+};
+declare function TagsField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxTags, maxLength, separators, }: TTags): import("react/jsx-runtime").JSX.Element | null;
+declare namespace TagsField {
+    var displayName: string;
+}
+export default TagsField;

package/dist/fields/Tags.js

@@ -0,0 +1,97 @@
+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/Tags.tsx
+function o(e) {
+	return Array.isArray(e) ? e.map(String).map((e) => e.trim()).filter(Boolean) : typeof e == "string" && e.trim() ? e.split(",").map((e) => e.trim()).filter(Boolean) : [];
+}
+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 = "", maxTags: b, maxLength: x, separators: S = [",", "Enter"] }) {
+	let { value: C } = n(c, d, s), w = o(C), T = !g, [E, D] = r.useState(""), O = r.useRef(null), k = (e) => {
+		let t = {
+			value: e,
+			name: d
+		};
+		c && d && c.setValue(t), l && l !== c?.onValue && l(t);
+	}, A = (e) => {
+		let t = e.trim();
+		if (t && !(x && t.length > x)) {
+			if (w.some((e) => e.toLowerCase() === t.toLowerCase())) {
+				D("");
+				return;
+			}
+			b !== void 0 && w.length >= b || (k([...w, t]), D(""));
+		}
+	}, j = (e) => {
+		T && k(w.filter((t, n) => n !== e));
+	}, M = (e) => {
+		if (T) {
+			if (S.includes(e.key) || e.key === "," && S.includes(",")) {
+				e.preventDefault(), A(E);
+				return;
+			}
+			e.key === "Backspace" && !E && w.length > 0 && (e.preventDefault(), j(w.length - 1));
+		}
+	}, N = w.length === 0;
+	return h && N ? null : /* @__PURE__ */ a(t, {
+		type: "tags",
+		label: p,
+		error: m,
+		element_blok: { className: [_ || ""] },
+		element_input: {
+			className: [e.tags],
+			props: {
+				"data-disabled": g || !T ? "true" : void 0,
+				onClick: () => O.current?.focus()
+			}
+		},
+		children: [
+			y ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: y
+			}) : null,
+			/* @__PURE__ */ a("div", {
+				className: e.tagsInner,
+				children: [w.map((t, n) => /* @__PURE__ */ a("span", {
+					className: e.tagChip,
+					children: [/* @__PURE__ */ i("span", {
+						className: e.tagLabel,
+						children: t
+					}), T ? /* @__PURE__ */ i("button", {
+						type: "button",
+						className: e.tagRemove,
+						"aria-label": `Удалить ${t}`,
+						onClick: (e) => {
+							e.stopPropagation(), j(n);
+						},
+						children: "×"
+					}) : null]
+				}, `${t}-${n}`)), T && (b === void 0 || w.length < b) ? /* @__PURE__ */ i("input", {
+					ref: O,
+					className: e.tagInput,
+					value: E,
+					placeholder: w.length === 0 ? f : "",
+					disabled: g,
+					maxLength: x,
+					"aria-label": p || f || "Теги",
+					onChange: (e) => D(e.target.value),
+					onKeyDown: M,
+					onBlur: () => {
+						E.trim() && A(E), u?.({
+							value: w,
+							name: d
+						});
+					}
+				}) : null]
+			}),
+			v ? /* @__PURE__ */ i("span", {
+				className: e.affix,
+				children: v
+			}) : null
+		]
+	});
+}
+s.displayName = "TagsField";
+//#endregion
+export { s as default };

package/dist/fields/Time.d.ts

@@ -13,13 +13,20 @@ export type TTime = TInput & {
      * @default 'start'
      */
     align?: "start" | "center";
+    /**
+     * Кнопка быстрого выбора: popup со слотами времени.
+     * Слоты строятся по `step` / `min` / `max` или из `presets`.
+     */
+    picker?: boolean;
+    /** Свои слоты `HH:mm` для popup (если заданы — вместо автогенерации) */
+    presets?: string[];
 };
 /**
  * Время: два contentEditable по образцу Mask (каретка через queueMicrotask + setCursorPosition).
  * Пока фокус в группе — в DOM только введённые цифры без ведущих нулей; в форму значение
  * уходит при уходе фокуса с группы (snap минут, clamp, формат `HH:mm`).
  */
-declare function TimeField({ value, form, 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 function TimeField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, hidden, disabled, error, className, after, before, step, min, max, id, spellCheck, align, picker, presets, }: TTime): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TimeField {
     var displayName: string;
 }