@elcrm/form 0.0.62 → 0.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -0
- package/dist/Form.d.ts +20 -0
- package/dist/Form.js +11 -0
- package/dist/FormInitContext.d.ts +25 -0
- package/dist/FormInitContext.js +20 -0
- package/dist/assets/styles/Field.module.css +1 -0
- package/dist/assets/styles/Form.module.css +1 -0
- package/dist/assets/styles/Select.module.css +1 -0
- package/dist/core/Field.d.ts +18 -0
- package/dist/core/Field.js +33 -0
- package/dist/events/onEvent.d.ts +55 -0
- package/dist/events/onEvent.js +67 -0
- package/dist/{src/lib/fields → fields}/Date.d.ts +7 -3
- package/dist/fields/Date.js +345 -0
- package/dist/{src/lib/fields → fields}/Input.d.ts +2 -2
- package/dist/fields/Input.js +55 -0
- package/dist/fields/Mask.d.ts +9 -0
- package/dist/fields/Mask.js +95 -0
- package/dist/fields/Modal.d.ts +25 -0
- package/dist/fields/Modal.js +55 -0
- package/dist/fields/Money.d.ts +35 -0
- package/dist/fields/Money.js +93 -0
- package/dist/fields/Numeric.d.ts +9 -0
- package/dist/fields/Numeric.js +69 -0
- package/dist/fields/Options.d.ts +30 -0
- package/dist/fields/Options.js +63 -0
- package/dist/fields/Password.d.ts +6 -0
- package/dist/fields/Password.js +100 -0
- package/dist/{src/lib/fields → fields}/Phone.d.ts +5 -1
- package/dist/fields/Phone.js +109 -0
- package/dist/fields/Range.d.ts +16 -0
- package/dist/fields/Range.js +101 -0
- package/dist/fields/Select.d.ts +21 -0
- package/dist/fields/Select.js +143 -0
- package/dist/{src/lib/fields → fields}/Textarea.d.ts +5 -1
- package/dist/fields/Textarea.js +47 -0
- package/dist/fields/Time.d.ts +26 -0
- package/dist/fields/Time.js +252 -0
- package/dist/fields/type.d.ts +42 -0
- package/dist/hooks/use.d.ts +42 -0
- package/dist/hooks/use.js +57 -0
- package/dist/index.d.ts +26 -2
- package/dist/index.js +26 -0
- package/dist/index.umd.js +2 -89
- package/dist/mask/MaskPhone.d.ts +8 -0
- package/dist/mask/MaskPhone.js +1384 -0
- package/dist/package.js +96 -0
- package/dist/style.css +5 -0
- package/dist/styles/Field.module.js +22 -0
- package/dist/styles/Form.module.js +12 -0
- package/dist/styles/Select.module.js +8 -0
- package/package.json +72 -11
- package/src/lib/styles/Field.module.scss +315 -0
- package/src/lib/styles/Form.module.scss +313 -0
- package/src/lib/styles/Select.module.scss +90 -0
- package/src/lib/styles/dark.css +47 -0
- package/src/lib/styles/light.css +51 -0
- package/dist/index.css +0 -1
- package/dist/index.es.js +0 -5045
- package/dist/src/lib/Captcha.d.ts +0 -1
- package/dist/src/lib/Check.d.ts +0 -13
- package/dist/src/lib/Code.d.ts +0 -22
- package/dist/src/lib/Color.d.ts +0 -22
- package/dist/src/lib/Field.d.ts +0 -13
- package/dist/src/lib/Files.d.ts +0 -20
- package/dist/src/lib/Generator.d.ts +0 -1
- package/dist/src/lib/Group.d.ts +0 -21
- package/dist/src/lib/Image.d.ts +0 -22
- package/dist/src/lib/Init.d.ts +0 -1
- package/dist/src/lib/MaskPhone.d.ts +0 -2
- package/dist/src/lib/Message.d.ts +0 -15
- package/dist/src/lib/Money.d.ts +0 -22
- package/dist/src/lib/Month.d.ts +0 -18
- package/dist/src/lib/Palette.d.ts +0 -9
- package/dist/src/lib/Progress.d.ts +0 -9
- package/dist/src/lib/Toogle.d.ts +0 -8
- package/dist/src/lib/Users.d.ts +0 -1
- package/dist/src/lib/_Time.d.ts +0 -0
- package/dist/src/lib/fields/Mask.d.ts +0 -19
- package/dist/src/lib/fields/Modal.d.ts +0 -19
- package/dist/src/lib/fields/Numeric.d.ts +0 -6
- package/dist/src/lib/fields/Options.d.ts +0 -22
- package/dist/src/lib/fields/Password.d.ts +0 -23
- package/dist/src/lib/fields/Select copy.d.ts +0 -23
- package/dist/src/lib/fields/Select.d.ts +0 -28
- package/dist/src/lib/fields/type.d.ts +0 -30
- package/dist/src/lib/index.d.ts +0 -16
- package/dist/src/lib/onEvent.d.ts +0 -2
- package/dist/src/lib/use.d.ts +0 -10
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import e from "../core/Field.js";
|
|
2
|
+
import { useFormFieldState as t } from "../hooks/use.js";
|
|
3
|
+
import n from "../styles/Select.module.js";
|
|
4
|
+
import r from "react";
|
|
5
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
6
|
+
import { createPortal as s } from "react-dom";
|
|
7
|
+
//#region src/lib/fields/Select.tsx
|
|
8
|
+
function c({ form: c, title: u, error: d, edit: f = !0, active: p = !0, hide: m, value: h = 0, onValue: g, options: _, placeholder: v = "", className: y, name: b = "", order: x, isReload: S = !1, disabled: C = !1 }) {
|
|
9
|
+
let [w, T] = r.useState(!1), [E, D] = r.useState(0), [O, k] = r.useState(null), A = r.useId(), { value: j } = t(c, b, h ?? 0), M = Number(j), N = [];
|
|
10
|
+
_ && (N = Array.isArray(_) ? _.map((e) => ({
|
|
11
|
+
id: e.id ?? e.i ?? 0,
|
|
12
|
+
label: e.n || "",
|
|
13
|
+
hidden: e.s === 0
|
|
14
|
+
})).filter((e) => e.id !== 0 && e.label.length > 0) : Object.keys(_).map((e) => {
|
|
15
|
+
let t = Number(e), n = _[t];
|
|
16
|
+
return {
|
|
17
|
+
id: t,
|
|
18
|
+
label: n?.n || "",
|
|
19
|
+
hidden: n?.s === 0
|
|
20
|
+
};
|
|
21
|
+
}).filter((e) => e.label.length > 0));
|
|
22
|
+
let P = (() => {
|
|
23
|
+
if (!x || x.length === 0) return N;
|
|
24
|
+
let e = new Map(N.map((e) => [e.id, e]));
|
|
25
|
+
return x.map((t) => e.get(t)).filter((e) => !!e);
|
|
26
|
+
})().filter((e) => !e.hidden), F = (e) => P.find((t) => t.id === e)?.label;
|
|
27
|
+
m = !!(m && (M === 0 || F(M) === void 0)) && !(f && p);
|
|
28
|
+
let I = w && P.length > 0 ? `${A}-opt-${E}` : void 0, L = (e) => {
|
|
29
|
+
let t = {
|
|
30
|
+
value: e,
|
|
31
|
+
name: b,
|
|
32
|
+
reload: S
|
|
33
|
+
};
|
|
34
|
+
c && b && c.onValue(t), g && g !== c?.onValue && g(t);
|
|
35
|
+
}, R = (e) => {
|
|
36
|
+
if (P.length === 0 || !(f && p) || C) return;
|
|
37
|
+
let t = P.findIndex((e) => e.id === M);
|
|
38
|
+
k(e.getBoundingClientRect()), D(t >= 0 ? t : 0), T(!0);
|
|
39
|
+
}, z = (e) => {
|
|
40
|
+
R(e.currentTarget);
|
|
41
|
+
}, B = (e) => {
|
|
42
|
+
if (!(!(f && p) || C) && P.length !== 0) {
|
|
43
|
+
if (!w && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
|
|
44
|
+
e.preventDefault(), R(e.currentTarget);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
if (w) {
|
|
48
|
+
if (e.key === "Escape") {
|
|
49
|
+
e.preventDefault(), T(!1);
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (e.key === "ArrowDown") {
|
|
53
|
+
e.preventDefault(), D((e) => (e + 1) % P.length);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (e.key === "ArrowUp") {
|
|
57
|
+
e.preventDefault(), D((e) => e - 1 < 0 ? P.length - 1 : e - 1);
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (e.key === "Enter") {
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
let t = P[E];
|
|
63
|
+
t && L(t.id), T(!1);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, V = {};
|
|
68
|
+
return v && (V.placeholder = v), m ? "" : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, {
|
|
69
|
+
type: "select",
|
|
70
|
+
title: u,
|
|
71
|
+
element_blok: { className: [y || ""] },
|
|
72
|
+
error: d,
|
|
73
|
+
element_input: {
|
|
74
|
+
className: [n.f],
|
|
75
|
+
props: {
|
|
76
|
+
onClick: z,
|
|
77
|
+
onKeyDown: B,
|
|
78
|
+
tabIndex: f && p && !C ? 0 : -1,
|
|
79
|
+
role: "combobox",
|
|
80
|
+
"aria-expanded": w,
|
|
81
|
+
"aria-haspopup": "listbox",
|
|
82
|
+
"aria-controls": A,
|
|
83
|
+
...I ? { "aria-activedescendant": I } : {},
|
|
84
|
+
"aria-disabled": C || !(f && p),
|
|
85
|
+
"data-disabled": C || !(f && p)
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ a("div", {
|
|
89
|
+
...V,
|
|
90
|
+
children: F(M) || v || ""
|
|
91
|
+
})
|
|
92
|
+
}), w && s(/* @__PURE__ */ a(l, {
|
|
93
|
+
parent: O || void 0,
|
|
94
|
+
onValue: L,
|
|
95
|
+
className: y,
|
|
96
|
+
items: P,
|
|
97
|
+
setOpen: T,
|
|
98
|
+
listId: A,
|
|
99
|
+
activeIndex: E,
|
|
100
|
+
currentValue: M
|
|
101
|
+
}), document.body)] });
|
|
102
|
+
}
|
|
103
|
+
c.displayName = "SelectField";
|
|
104
|
+
var l = ({ onValue: e, parent: t, className: r, items: s, setOpen: c, listId: l, activeIndex: d, currentValue: f }) => {
|
|
105
|
+
if (!t) return null;
|
|
106
|
+
let p = () => {
|
|
107
|
+
c(!1);
|
|
108
|
+
}, m = (t) => {
|
|
109
|
+
c(!1), e(t);
|
|
110
|
+
}, h = window.innerHeight - t.bottom < 306 ? Math.max(6, t.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, t.bottom + 6), g = Math.max(t.width, 260), _ = Math.min(Math.max(6, t.left), window.innerWidth - g - 6);
|
|
111
|
+
return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
|
|
112
|
+
className: n.o,
|
|
113
|
+
onClick: p,
|
|
114
|
+
"aria-hidden": !0
|
|
115
|
+
}), /* @__PURE__ */ a("div", {
|
|
116
|
+
className: [n.l, r].filter((e) => e !== void 0).join(" "),
|
|
117
|
+
style: {
|
|
118
|
+
top: h + "px",
|
|
119
|
+
left: _ + "px",
|
|
120
|
+
width: g
|
|
121
|
+
},
|
|
122
|
+
children: /* @__PURE__ */ a(u, {
|
|
123
|
+
listId: l,
|
|
124
|
+
items: s,
|
|
125
|
+
link: m,
|
|
126
|
+
activeIndex: d,
|
|
127
|
+
currentValue: f
|
|
128
|
+
})
|
|
129
|
+
})] });
|
|
130
|
+
}, u = ({ listId: e, items: t, link: n, activeIndex: r, currentValue: i }) => /* @__PURE__ */ a("ul", {
|
|
131
|
+
id: e,
|
|
132
|
+
role: "listbox",
|
|
133
|
+
children: t.map((t, o) => /* @__PURE__ */ a("li", {
|
|
134
|
+
id: `${e}-opt-${o}`,
|
|
135
|
+
role: "option",
|
|
136
|
+
"aria-selected": i === t.id,
|
|
137
|
+
"data-focus": r === o ? "true" : "false",
|
|
138
|
+
onClick: () => n(t.id),
|
|
139
|
+
children: t.label
|
|
140
|
+
}, t.id))
|
|
141
|
+
});
|
|
142
|
+
//#endregion
|
|
143
|
+
export { c as default };
|
|
@@ -20,4 +20,8 @@ import { TInput } from './type';
|
|
|
20
20
|
* @param {boolean} [isCopy] - разрешить копирование
|
|
21
21
|
* @return {ReactElement} - поле ввода
|
|
22
22
|
*/
|
|
23
|
-
|
|
23
|
+
declare function TextareaField({ value, form, onValue, name, placeholder, title, label, hide, edit, active, after, show, maxLength, error, onSave, className, isCopy, }: TInput): import("react/jsx-runtime").JSX.Element | "";
|
|
24
|
+
declare namespace TextareaField {
|
|
25
|
+
var displayName: string;
|
|
26
|
+
}
|
|
27
|
+
export default TextareaField;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import e from "../styles/Field.module.js";
|
|
2
|
+
import t from "../core/Field.js";
|
|
3
|
+
import { useFormFieldState as n } from "../hooks/use.js";
|
|
4
|
+
import r, { asEditableClipboard as i } from "../events/onEvent.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import { Fragment as a, jsx as o } from "react/jsx-runtime";
|
|
7
|
+
//#region src/lib/fields/Textarea.tsx
|
|
8
|
+
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 }) {
|
|
9
|
+
let { value: w, version: T } = n(c, u || "", s), E = (e) => {
|
|
10
|
+
let t = {
|
|
11
|
+
value: e.currentTarget.innerText,
|
|
12
|
+
name: u || ""
|
|
13
|
+
};
|
|
14
|
+
c && u && c.onValue(t), l && l !== c?.onValue && l(t);
|
|
15
|
+
}, D = (e) => {
|
|
16
|
+
let t = (e.currentTarget.textContent ?? "").trim();
|
|
17
|
+
y && t.length >= y && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
|
|
18
|
+
}, O = (e) => r.Paste(y || 0, i(e));
|
|
19
|
+
if (m) return /* @__PURE__ */ o(a, {});
|
|
20
|
+
if (!(h && g) && !v) return "";
|
|
21
|
+
let k = {};
|
|
22
|
+
return d && (k.placeholder = d), h && g && (k.edit = ""), /* @__PURE__ */ o(t, {
|
|
23
|
+
type: "note",
|
|
24
|
+
title: f || p,
|
|
25
|
+
error: b,
|
|
26
|
+
element_blok: { className: [S || ""] },
|
|
27
|
+
element_input: { className: [e.n] },
|
|
28
|
+
children: /* @__PURE__ */ o("div", {
|
|
29
|
+
onPaste: O,
|
|
30
|
+
onInput: E,
|
|
31
|
+
onBlur: (e) => {
|
|
32
|
+
r.Blur(e), x?.({
|
|
33
|
+
value: (e.currentTarget.textContent ?? "").trim(),
|
|
34
|
+
name: u || ""
|
|
35
|
+
});
|
|
36
|
+
},
|
|
37
|
+
onKeyDown: D,
|
|
38
|
+
contentEditable: h && g ? "plaintext-only" : !1,
|
|
39
|
+
suppressContentEditableWarning: !0,
|
|
40
|
+
...k,
|
|
41
|
+
children: w
|
|
42
|
+
}, T)
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
s.displayName = "TextareaField";
|
|
46
|
+
//#endregion
|
|
47
|
+
export { s as default };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { TInput } from './type';
|
|
2
|
+
/** Значение в форме: строка `HH:mm` или пустая строка */
|
|
3
|
+
export type TTime = TInput & {
|
|
4
|
+
/** Шаг для минут в секундах (`60` — любая минута; `300` — кратно 5 мин) */
|
|
5
|
+
step?: number;
|
|
6
|
+
/** Минимальное время `HH:mm` */
|
|
7
|
+
min?: string;
|
|
8
|
+
/** Максимальное время `HH:mm` */
|
|
9
|
+
max?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Выравнивание пары «часы : минуты» внутри поля:
|
|
12
|
+
* `start` — слева (как у даты), `center` — по центру капсулы.
|
|
13
|
+
* @default 'start'
|
|
14
|
+
*/
|
|
15
|
+
align?: "start" | "center";
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Время: два contentEditable по образцу Mask (каретка через queueMicrotask + setCursorPosition).
|
|
19
|
+
* Пока фокус в группе — в DOM только введённые цифры без ведущих нулей; в форму значение
|
|
20
|
+
* уходит при уходе фокуса с группы (snap минут, clamp, формат `HH:mm`).
|
|
21
|
+
*/
|
|
22
|
+
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;
|
|
23
|
+
declare namespace TimeField {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
export default TimeField;
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import e from "../styles/Field.module.js";
|
|
2
|
+
import t from "../core/Field.js";
|
|
3
|
+
import { useFormFieldState as n } from "../hooks/use.js";
|
|
4
|
+
import r from "../events/onEvent.js";
|
|
5
|
+
import i from "react";
|
|
6
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
|
+
//#region src/lib/fields/Time.tsx
|
|
8
|
+
function s(e) {
|
|
9
|
+
let t = window.getSelection();
|
|
10
|
+
if (!t || t.rangeCount === 0) return 0;
|
|
11
|
+
let n = t.getRangeAt(0);
|
|
12
|
+
if (!e.contains(n.startContainer)) return 0;
|
|
13
|
+
let r = document.createRange();
|
|
14
|
+
return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
|
|
15
|
+
}
|
|
16
|
+
function c(e, t) {
|
|
17
|
+
let n = t.firstChild;
|
|
18
|
+
if (!n || n.nodeType !== Node.TEXT_NODE) return;
|
|
19
|
+
let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
|
|
20
|
+
o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
|
|
21
|
+
}
|
|
22
|
+
function l(e) {
|
|
23
|
+
return String(e).padStart(2, "0");
|
|
24
|
+
}
|
|
25
|
+
function u(e) {
|
|
26
|
+
return (e || "").replace(/\D/g, "");
|
|
27
|
+
}
|
|
28
|
+
function d(e) {
|
|
29
|
+
if (e == null || e === "" || typeof e != "string") return "";
|
|
30
|
+
let t = e.trim(), n = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(t);
|
|
31
|
+
if (!n) return "";
|
|
32
|
+
let r = Math.min(23, Math.max(0, parseInt(n[1], 10))), i = Math.min(59, Math.max(0, parseInt(n[2], 10)));
|
|
33
|
+
return `${l(r)}:${l(i)}`;
|
|
34
|
+
}
|
|
35
|
+
function f(e) {
|
|
36
|
+
let t = d(e);
|
|
37
|
+
if (!t) return {
|
|
38
|
+
h: null,
|
|
39
|
+
m: null
|
|
40
|
+
};
|
|
41
|
+
let [n, r] = t.split(":").map((e) => parseInt(e, 10));
|
|
42
|
+
return {
|
|
43
|
+
h: n,
|
|
44
|
+
m: r
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
function p(e, t) {
|
|
48
|
+
if (e === null && t === null) return "";
|
|
49
|
+
let n = e ?? 0, r = t ?? 0;
|
|
50
|
+
return `${l(n)}:${l(r)}`;
|
|
51
|
+
}
|
|
52
|
+
function m(e, t) {
|
|
53
|
+
let n = u(e).slice(0, 2);
|
|
54
|
+
if (n === "") return null;
|
|
55
|
+
let r = parseInt(n, 10);
|
|
56
|
+
return Number.isNaN(r) ? null : Math.min(t, Math.max(0, r));
|
|
57
|
+
}
|
|
58
|
+
function h(e) {
|
|
59
|
+
let t = d(e);
|
|
60
|
+
if (!t) return null;
|
|
61
|
+
let [n, r] = t.split(":").map((e) => parseInt(e, 10));
|
|
62
|
+
return n * 60 + r;
|
|
63
|
+
}
|
|
64
|
+
function g(e, t) {
|
|
65
|
+
let n = Math.max(1, Math.round(t / 60));
|
|
66
|
+
if (n <= 1) return e;
|
|
67
|
+
let r = Math.round(e / n) * n;
|
|
68
|
+
return Math.min(59, Math.max(0, r));
|
|
69
|
+
}
|
|
70
|
+
function _(e, t, n) {
|
|
71
|
+
let r = d(e);
|
|
72
|
+
if (!r) return "";
|
|
73
|
+
let i = h(r);
|
|
74
|
+
if (i === null) return "";
|
|
75
|
+
if (t) {
|
|
76
|
+
let e = h(t);
|
|
77
|
+
e !== null && (i = Math.max(i, e));
|
|
78
|
+
}
|
|
79
|
+
if (n) {
|
|
80
|
+
let e = h(n);
|
|
81
|
+
e !== null && (i = Math.min(i, e));
|
|
82
|
+
}
|
|
83
|
+
return p(Math.floor(i / 60), i % 60);
|
|
84
|
+
}
|
|
85
|
+
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" }) {
|
|
86
|
+
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);
|
|
87
|
+
i.useLayoutEffect(() => {
|
|
88
|
+
if (!V || !L) return;
|
|
89
|
+
let { h: e, m: t } = f(I), n = (e, t) => {
|
|
90
|
+
e && (t === null ? e.innerHTML = "<br>" : e.textContent = String(t));
|
|
91
|
+
};
|
|
92
|
+
n(R.current, e), n(z.current, t);
|
|
93
|
+
}, [
|
|
94
|
+
V,
|
|
95
|
+
I,
|
|
96
|
+
F,
|
|
97
|
+
L
|
|
98
|
+
]);
|
|
99
|
+
let U = i.useCallback(() => {
|
|
100
|
+
let e = m(R.current?.textContent || "", 23), t = m(z.current?.textContent || "", 59);
|
|
101
|
+
if (e === null && t === null) return "";
|
|
102
|
+
let n = p(e, t);
|
|
103
|
+
if (!n) return "";
|
|
104
|
+
let { h: r, m: i } = f(n);
|
|
105
|
+
return i !== null && (n = p(r, g(i, T))), n &&= _(n, E, D), n || "";
|
|
106
|
+
}, [
|
|
107
|
+
E,
|
|
108
|
+
D,
|
|
109
|
+
T
|
|
110
|
+
]), W = (e) => (t) => {
|
|
111
|
+
if (t.preventDefault(), !L) return;
|
|
112
|
+
let n = u(t.clipboardData?.getData("text/plain") ?? ""), r = e === "hour" ? 23 : 59;
|
|
113
|
+
if (n.length >= 4) {
|
|
114
|
+
let e = Math.min(23, Math.max(0, parseInt(n.slice(0, 2), 10))), t = Math.min(59, Math.max(0, parseInt(n.slice(2, 4), 10))), r = R.current, i = z.current;
|
|
115
|
+
r && (r.textContent = String(e), queueMicrotask(() => c(String(e).length, r))), i && (i.textContent = String(t), queueMicrotask(() => c(String(t).length, i)));
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
let i = n.slice(0, 2), a = t.currentTarget;
|
|
119
|
+
if (i === "") {
|
|
120
|
+
a.innerHTML = "<br>", queueMicrotask(() => c(0, a));
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
let o = parseInt(i, 10);
|
|
124
|
+
if (Number.isNaN(o)) return;
|
|
125
|
+
let s = String(Math.min(r, Math.max(0, o)));
|
|
126
|
+
a.textContent = s, queueMicrotask(() => c(s.length, a));
|
|
127
|
+
}, G = (e) => {
|
|
128
|
+
let t = e.target, n = t.textContent || "", r = s(t), i = n.slice(0, r).replace(/\D/g, "").length, a = u(n).slice(0, 2);
|
|
129
|
+
if (a === "") {
|
|
130
|
+
t.innerHTML = "<br>", queueMicrotask(() => c(0, t));
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
let o = parseInt(a, 10);
|
|
134
|
+
if (Number.isNaN(o)) return;
|
|
135
|
+
let l = String(Math.min(23, Math.max(0, o)));
|
|
136
|
+
t.textContent = l;
|
|
137
|
+
let d = Math.min(i, l.length);
|
|
138
|
+
queueMicrotask(() => c(d, t));
|
|
139
|
+
}, K = (e) => {
|
|
140
|
+
let t = e.target, n = t.textContent || "", r = s(t), i = n.slice(0, r).replace(/\D/g, "").length, a = u(n).slice(0, 2);
|
|
141
|
+
if (a === "") {
|
|
142
|
+
t.innerHTML = "<br>", queueMicrotask(() => c(0, t));
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
let o = parseInt(a, 10);
|
|
146
|
+
if (Number.isNaN(o)) return;
|
|
147
|
+
let l = String(Math.min(59, Math.max(0, o)));
|
|
148
|
+
t.textContent = l;
|
|
149
|
+
let d = Math.min(i, l.length);
|
|
150
|
+
queueMicrotask(() => c(d, t));
|
|
151
|
+
}, q = (e) => {
|
|
152
|
+
(e.key === "Enter" || e.key === ":") && (e.preventDefault(), z.current?.focus());
|
|
153
|
+
}, J = (e) => {
|
|
154
|
+
e.key === "Enter" && e.preventDefault();
|
|
155
|
+
}, Y = (e) => {
|
|
156
|
+
let t = e.currentTarget;
|
|
157
|
+
(t.textContent || "").trim().length || (t.innerHTML = "<br>"), L && H(!0);
|
|
158
|
+
}, X = (e) => {
|
|
159
|
+
r.Blur(e);
|
|
160
|
+
};
|
|
161
|
+
i.useEffect(() => {
|
|
162
|
+
let e = B.current;
|
|
163
|
+
if (!e) return;
|
|
164
|
+
let t = (t) => {
|
|
165
|
+
let n = t.relatedTarget;
|
|
166
|
+
if (n && e.contains(n)) return;
|
|
167
|
+
let r = U();
|
|
168
|
+
v && b && v.setValue({
|
|
169
|
+
name: b,
|
|
170
|
+
value: r,
|
|
171
|
+
reload: j
|
|
172
|
+
}), y && b && y({
|
|
173
|
+
value: r,
|
|
174
|
+
name: b
|
|
175
|
+
}), H(!1);
|
|
176
|
+
};
|
|
177
|
+
return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
|
|
178
|
+
}, [
|
|
179
|
+
v,
|
|
180
|
+
b,
|
|
181
|
+
y,
|
|
182
|
+
E,
|
|
183
|
+
D,
|
|
184
|
+
T,
|
|
185
|
+
j,
|
|
186
|
+
U
|
|
187
|
+
]);
|
|
188
|
+
let { h: Z, m: Q } = f(I), $ = {};
|
|
189
|
+
return w && ($.placeholder = w), L && ($.edit = ""), /* @__PURE__ */ a(t, {
|
|
190
|
+
type: "time",
|
|
191
|
+
title: x || S,
|
|
192
|
+
error: C,
|
|
193
|
+
element_blok: { className: [A || ""] },
|
|
194
|
+
element_input: {
|
|
195
|
+
className: [
|
|
196
|
+
e.w,
|
|
197
|
+
e.time,
|
|
198
|
+
N === "center" ? e.timeAlignCenter : ""
|
|
199
|
+
].filter(Boolean),
|
|
200
|
+
props: { "data-disabled": k || !L ? "true" : void 0 }
|
|
201
|
+
},
|
|
202
|
+
children: /* @__PURE__ */ o("div", {
|
|
203
|
+
ref: B,
|
|
204
|
+
className: e.timeInner,
|
|
205
|
+
role: "group",
|
|
206
|
+
"aria-label": x || S || "Время",
|
|
207
|
+
children: [
|
|
208
|
+
/* @__PURE__ */ a("div", {
|
|
209
|
+
id: ne,
|
|
210
|
+
ref: R,
|
|
211
|
+
className: e.timePart,
|
|
212
|
+
contentEditable: L ? "plaintext-only" : !1,
|
|
213
|
+
suppressContentEditableWarning: !0,
|
|
214
|
+
spellCheck: M,
|
|
215
|
+
inputMode: "numeric",
|
|
216
|
+
onPaste: W("hour"),
|
|
217
|
+
onInput: G,
|
|
218
|
+
onKeyDown: q,
|
|
219
|
+
onFocus: Y,
|
|
220
|
+
onBlur: X,
|
|
221
|
+
"aria-label": "Часы, 0–23",
|
|
222
|
+
...$,
|
|
223
|
+
children: !L || !V ? Z === null ? "" : l(Z) : null
|
|
224
|
+
}),
|
|
225
|
+
/* @__PURE__ */ a("span", {
|
|
226
|
+
className: e.timeSep,
|
|
227
|
+
"aria-hidden": "true",
|
|
228
|
+
children: ":"
|
|
229
|
+
}),
|
|
230
|
+
/* @__PURE__ */ a("div", {
|
|
231
|
+
ref: z,
|
|
232
|
+
className: e.timePart,
|
|
233
|
+
contentEditable: L ? "plaintext-only" : !1,
|
|
234
|
+
suppressContentEditableWarning: !0,
|
|
235
|
+
spellCheck: M,
|
|
236
|
+
inputMode: "numeric",
|
|
237
|
+
onPaste: W("minute"),
|
|
238
|
+
onInput: K,
|
|
239
|
+
onKeyDown: J,
|
|
240
|
+
onFocus: Y,
|
|
241
|
+
onBlur: X,
|
|
242
|
+
"aria-label": "Минуты, 0–59",
|
|
243
|
+
...$,
|
|
244
|
+
children: !L || !V ? Q === null ? "" : l(Q) : null
|
|
245
|
+
})
|
|
246
|
+
]
|
|
247
|
+
}, F)
|
|
248
|
+
});
|
|
249
|
+
}
|
|
250
|
+
v.displayName = "TimeField";
|
|
251
|
+
//#endregion
|
|
252
|
+
export { v as default };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { UseFormApi } from '../hooks/use';
|
|
3
|
+
export type TInput = {
|
|
4
|
+
value?: unknown;
|
|
5
|
+
form?: UseFormApi;
|
|
6
|
+
onValue?: (data: TValue) => void | Promise<void>;
|
|
7
|
+
onSave?: (data: TValue) => void | Promise<void>;
|
|
8
|
+
name?: string;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
title?: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
error?: string;
|
|
14
|
+
hide?: boolean;
|
|
15
|
+
edit?: boolean;
|
|
16
|
+
active?: boolean;
|
|
17
|
+
after?: ReactNode;
|
|
18
|
+
before?: ReactNode;
|
|
19
|
+
show?: boolean;
|
|
20
|
+
view?: string;
|
|
21
|
+
id?: string;
|
|
22
|
+
className?: string;
|
|
23
|
+
isCopy?: boolean;
|
|
24
|
+
maxLength?: number;
|
|
25
|
+
isReload?: boolean;
|
|
26
|
+
spellCheck?: boolean;
|
|
27
|
+
inputmode?: "text" | "email" | "none" | "tel" | "url" | "search" | "numeric" | "decimal";
|
|
28
|
+
};
|
|
29
|
+
export type TValue = {
|
|
30
|
+
value: unknown;
|
|
31
|
+
name: string;
|
|
32
|
+
reload?: boolean;
|
|
33
|
+
id?: string;
|
|
34
|
+
};
|
|
35
|
+
/** Поле пароля: расширение TInput (иконки «глаз», нативный режим отключён) */
|
|
36
|
+
export type TPasswordField = TInput & {
|
|
37
|
+
native?: boolean;
|
|
38
|
+
/** Начальное состояние «показать пароль» */
|
|
39
|
+
isShow?: boolean;
|
|
40
|
+
/** [скрыть, показать] — ReactNode для переключателя */
|
|
41
|
+
eyes?: [React.ReactNode?, React.ReactNode?];
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
/** Значения формы: только через getValues() / getValue — не мутируйте ссылку снаружи */
|
|
3
|
+
export type FormValues = Record<string, unknown>;
|
|
4
|
+
type FormChange = {
|
|
5
|
+
name?: string;
|
|
6
|
+
value?: unknown;
|
|
7
|
+
reload?: boolean;
|
|
8
|
+
};
|
|
9
|
+
type Listener = () => void;
|
|
10
|
+
export type UseFormApi = {
|
|
11
|
+
valuesRef: React.MutableRefObject<FormValues>;
|
|
12
|
+
onValue: (payload: FormChange) => void;
|
|
13
|
+
setValue: (payload: FormChange) => void;
|
|
14
|
+
setValues: (nextValues: FormValues) => void;
|
|
15
|
+
/** Неглубокая копия текущих значений (защита от случайной мутации снаружи) */
|
|
16
|
+
getValues: () => FormValues;
|
|
17
|
+
getValue: (name: string, fallback?: unknown) => unknown;
|
|
18
|
+
getVersion: (name: string) => number;
|
|
19
|
+
reset: (nextValues?: FormValues) => void;
|
|
20
|
+
subscribe: (name: string, listener: Listener) => () => void;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* useForm — сборщик значений полей. Подписки по имени поля (гранулярные ререндеры).
|
|
24
|
+
*
|
|
25
|
+
* Чтение: form.getValue("name"), form.getValues()
|
|
26
|
+
* Запись без ререндера: form.onValue({ name, value })
|
|
27
|
+
* Запись с уведомлением подписчиков поля: form.setValue({ name, value })
|
|
28
|
+
*/
|
|
29
|
+
export declare function useForm(initialValues?: FormValues): UseFormApi;
|
|
30
|
+
/**
|
|
31
|
+
* Подписка на одно поле формы: актуальное значение + версия (для key у contentEditable и т.п.).
|
|
32
|
+
* Поля используют внутри себя; снаружи обычно достаточно передать form + name.
|
|
33
|
+
*/
|
|
34
|
+
/** Результат хука подписки на поле (значение + версия для key) */
|
|
35
|
+
export type UseFormFieldStateResult = {
|
|
36
|
+
value: unknown;
|
|
37
|
+
version: number;
|
|
38
|
+
};
|
|
39
|
+
export declare function useFormFieldState(form: UseFormApi | undefined, name: string, fallback: unknown): UseFormFieldStateResult;
|
|
40
|
+
/** Подписка только на значение (без поля-компонента), например внешняя логика превью */
|
|
41
|
+
export declare function useFormField(form: UseFormApi, name: string, fallback?: unknown): unknown;
|
|
42
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import e from "react";
|
|
2
|
+
//#region src/lib/hooks/use.ts
|
|
3
|
+
var t = (e, t) => Object.is(e, t);
|
|
4
|
+
function n(n = {}) {
|
|
5
|
+
let r = e.useRef({ ...n }), i = e.useRef({}), a = e.useRef({}), o = e.useCallback((e) => {
|
|
6
|
+
let t = i.current[e];
|
|
7
|
+
t && t.forEach((e) => e());
|
|
8
|
+
}, []), s = e.useCallback((e) => {
|
|
9
|
+
a.current[e] = (a.current[e] || 0) + 1;
|
|
10
|
+
}, []), c = e.useCallback((e) => {
|
|
11
|
+
!e || !e.name || (r.current[e.name] = e.value);
|
|
12
|
+
}, []), l = e.useCallback((e) => {
|
|
13
|
+
let n = r.current, i = new Set([...Object.keys(n), ...Object.keys(e)]), a = { ...e };
|
|
14
|
+
r.current = a, i.forEach((e) => {
|
|
15
|
+
let r = n[e], i = a[e];
|
|
16
|
+
t(r, i) || (s(e), o(e));
|
|
17
|
+
});
|
|
18
|
+
}, [s, o]), u = e.useCallback((e) => {
|
|
19
|
+
!e || !e.name || (r.current[e.name] = e.value, s(e.name), o(e.name));
|
|
20
|
+
}, [s, o]), d = e.useCallback((e = n) => {
|
|
21
|
+
let i = r.current, a = new Set([...Object.keys(i), ...Object.keys(e)]);
|
|
22
|
+
r.current = { ...e }, a.forEach((e) => {
|
|
23
|
+
let n = i[e], a = r.current[e];
|
|
24
|
+
t(n, a) || (s(e), o(e));
|
|
25
|
+
});
|
|
26
|
+
}, [
|
|
27
|
+
n,
|
|
28
|
+
s,
|
|
29
|
+
o
|
|
30
|
+
]), f = e.useCallback(() => ({ ...r.current }), []), p = e.useCallback((e, t) => r.current[e] ?? t, []), m = e.useCallback((e) => a.current[e] || 0, []), h = e.useCallback((e, t) => (i.current[e] || (i.current[e] = /* @__PURE__ */ new Set()), i.current[e].add(t), () => {
|
|
31
|
+
i.current[e]?.delete(t), i.current[e]?.size === 0 && delete i.current[e];
|
|
32
|
+
}), []), g = e.useRef(null);
|
|
33
|
+
return g.current ||= {}, Object.assign(g.current, {
|
|
34
|
+
valuesRef: r,
|
|
35
|
+
getValues: f,
|
|
36
|
+
setValues: l,
|
|
37
|
+
setValue: u,
|
|
38
|
+
onValue: c,
|
|
39
|
+
reset: d,
|
|
40
|
+
getValue: p,
|
|
41
|
+
getVersion: m,
|
|
42
|
+
subscribe: h
|
|
43
|
+
}), g.current;
|
|
44
|
+
}
|
|
45
|
+
function r(t, n, r) {
|
|
46
|
+
let i = e.useCallback((e) => !t || !n ? () => {} : t.subscribe(n, e), [t, n]), a = e.useCallback(() => !t || !n ? 0 : t.getVersion(n), [t, n]), o = e.useSyncExternalStore(i, a, a);
|
|
47
|
+
return {
|
|
48
|
+
value: t && n ? t.getValue(n, r) : r,
|
|
49
|
+
version: o
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
function i(e, t, n = "") {
|
|
53
|
+
let { value: i } = r(e, t, n);
|
|
54
|
+
return i;
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
export { n as useForm, i as useFormField, r as useFormFieldState };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,26 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export { default as RangeField } from './fields/Range';
|
|
2
|
+
/** @deprecated используйте `RangeField` */
|
|
3
|
+
export { ProgressField } from './fields/Range';
|
|
4
|
+
export { default as MoneyField } from './fields/Money';
|
|
5
|
+
export { default as MaskField } from './fields/Mask';
|
|
6
|
+
export { default as DateField } from './fields/Date';
|
|
7
|
+
export { default as TimeField } from './fields/Time';
|
|
8
|
+
export { default as TextareaField } from './fields/Textarea';
|
|
9
|
+
export { default as PhoneField } from './fields/Phone';
|
|
10
|
+
export { default as StringField } from './fields/Input';
|
|
11
|
+
export { default as NumberField } from './fields/Numeric';
|
|
12
|
+
export { default as OptionsField } from './fields/Options';
|
|
13
|
+
export { default as SelectField } from './fields/Select';
|
|
14
|
+
export { default as ModalField } from './fields/Modal';
|
|
15
|
+
export { default as PasswordField } from './fields/Password';
|
|
16
|
+
export { useForm, useFormField, useFormFieldState } from './hooks/use';
|
|
17
|
+
export type { TInput, TValue, TPasswordField } from './fields/type';
|
|
18
|
+
export type { TRange, TProgress } from './fields/Range';
|
|
19
|
+
export type { TTime } from './fields/Time';
|
|
20
|
+
export type { FormValues, UseFormApi, UseFormFieldStateResult, } from './hooks/use';
|
|
21
|
+
export type { EditableFieldTarget, EditableClipboardEvent, } from './events/onEvent';
|
|
22
|
+
export { asEditableClipboard } from './events/onEvent';
|
|
23
|
+
export { Form } from './Form';
|
|
24
|
+
export type { FormInitProps, TModalOpenPayload } from './Form';
|
|
25
|
+
export { useFormInit } from './FormInitContext';
|
|
26
|
+
export type { FormInitContextValue } from './FormInitContext';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import e from "./package.js";
|
|
2
|
+
import { useForm as t, useFormField as n, useFormFieldState as r } from "./hooks/use.js";
|
|
3
|
+
import i from "./fields/Range.js";
|
|
4
|
+
import { asEditableClipboard as a } from "./events/onEvent.js";
|
|
5
|
+
import o from "./fields/Money.js";
|
|
6
|
+
import s from "./fields/Mask.js";
|
|
7
|
+
import c from "./fields/Date.js";
|
|
8
|
+
import l from "./fields/Time.js";
|
|
9
|
+
import u from "./fields/Textarea.js";
|
|
10
|
+
import { useFormInit as d } from "./FormInitContext.js";
|
|
11
|
+
import f from "./fields/Phone.js";
|
|
12
|
+
import p from "./fields/Input.js";
|
|
13
|
+
import m from "./fields/Numeric.js";
|
|
14
|
+
import h from "./fields/Options.js";
|
|
15
|
+
import g from "./fields/Select.js";
|
|
16
|
+
import _ from "./fields/Modal.js";
|
|
17
|
+
import v from "./fields/Password.js";
|
|
18
|
+
import { Form as y } from "./Form.js";
|
|
19
|
+
//#region src/lib/index.ts
|
|
20
|
+
function b() {
|
|
21
|
+
return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof self < "u" ? self : {};
|
|
22
|
+
}
|
|
23
|
+
var x = b();
|
|
24
|
+
x.elcrm ||= {}, Object.assign(x.elcrm, { form: e.version });
|
|
25
|
+
//#endregion
|
|
26
|
+
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 };
|