@elcrm/form 0.0.88 → 0.1.1

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.
Files changed (68) hide show
  1. package/README.md +87 -47
  2. package/dist/Form.js +1 -11
  3. package/dist/FormInitContext.js +1 -20
  4. package/dist/assets/styles/Field.module.css +1 -1
  5. package/dist/assets/styles/Form.module.css +1 -1
  6. package/dist/assets/styles/Select.module.css +1 -1
  7. package/dist/core/Field.d.ts +14 -2
  8. package/dist/core/Field.js +2 -35
  9. package/dist/dark.css +22 -3
  10. package/dist/events/onEvent.js +1 -67
  11. package/dist/fields/Check.js +1 -86
  12. package/dist/fields/Code.js +1 -94
  13. package/dist/fields/Color.js +1 -495
  14. package/dist/fields/Date.js +1 -450
  15. package/dist/fields/Display.d.ts +1 -1
  16. package/dist/fields/Display.js +1 -49
  17. package/dist/fields/DragDrop.js +1 -189
  18. package/dist/fields/Email.d.ts +4 -2
  19. package/dist/fields/Email.js +1 -80
  20. package/dist/fields/File.js +1 -115
  21. package/dist/fields/Hidden.js +1 -33
  22. package/dist/fields/Input.d.ts +3 -1
  23. package/dist/fields/Input.js +1 -149
  24. package/dist/fields/Mask.js +1 -119
  25. package/dist/fields/Modal.js +1 -68
  26. package/dist/fields/Money.js +1 -125
  27. package/dist/fields/NativeTextField.d.ts +15 -0
  28. package/dist/fields/NativeTextField.js +1 -0
  29. package/dist/fields/Numeric.d.ts +12 -1
  30. package/dist/fields/Numeric.js +1 -105
  31. package/dist/fields/Options.js +1 -69
  32. package/dist/fields/Password.d.ts +1 -1
  33. package/dist/fields/Password.js +1 -143
  34. package/dist/fields/Percent.d.ts +8 -1
  35. package/dist/fields/Percent.js +1 -100
  36. package/dist/fields/Phone.d.ts +2 -2
  37. package/dist/fields/Phone.js +1 -128
  38. package/dist/fields/Radio.js +1 -88
  39. package/dist/fields/Range.js +1 -109
  40. package/dist/fields/Rating.js +1 -82
  41. package/dist/fields/RichText.js +1 -134
  42. package/dist/fields/Select.d.ts +3 -1
  43. package/dist/fields/Select.js +1 -171
  44. package/dist/fields/Tags.js +1 -97
  45. package/dist/fields/Textarea.d.ts +1 -1
  46. package/dist/fields/Textarea.js +1 -68
  47. package/dist/fields/Time.js +1 -444
  48. package/dist/fields/Url.d.ts +4 -2
  49. package/dist/fields/Url.js +1 -80
  50. package/dist/fields/emit.d.ts +9 -0
  51. package/dist/fields/emit.js +1 -0
  52. package/dist/fields/type.d.ts +1 -1
  53. package/dist/fields/visibility.js +1 -6
  54. package/dist/hooks/use.js +1 -57
  55. package/dist/index.js +2 -42
  56. package/dist/index.umd.js +2 -2
  57. package/dist/light.css +23 -3
  58. package/dist/mask/MaskPhone.js +1 -1384
  59. package/dist/mask/phoneDefaults.d.ts +8 -0
  60. package/dist/mask/phoneDefaults.js +1 -0
  61. package/dist/overlayZ.js +1 -25
  62. package/dist/package.js +1 -130
  63. package/dist/style.css +3 -3
  64. package/dist/styles/Color.module.js +1 -27
  65. package/dist/styles/Field.module.js +1 -77
  66. package/dist/styles/Form.module.js +1 -12
  67. package/dist/styles/Select.module.js +1 -9
  68. package/package.json +2 -5
@@ -1,189 +1 @@
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 "react";
5
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
- //#region src/lib/fields/DragDrop.tsx
7
- function o(e) {
8
- return {
9
- name: e.name,
10
- size: e.size,
11
- type: e.type,
12
- lastModified: e.lastModified
13
- };
14
- }
15
- function s(e) {
16
- return typeof File < "u" && e instanceof File ? o(e) : e;
17
- }
18
- function c(e) {
19
- return e ? Array.isArray(e) ? e : typeof File < "u" && e instanceof File || typeof e == "object" && e && "name" in e ? [e] : [] : [];
20
- }
21
- function l(e) {
22
- return e < 1024 ? `${e} Б` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} КБ` : `${(e / (1024 * 1024)).toFixed(1)} МБ`;
23
- }
24
- function u(e, t) {
25
- if (!t || !t.trim()) return !0;
26
- let n = t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
27
- if (n.length === 0) return !0;
28
- let r = e.name.toLowerCase(), i = (e.type || "").toLowerCase();
29
- return n.some((e) => {
30
- if (e.startsWith(".")) return r.endsWith(e);
31
- if (e.endsWith("/*")) {
32
- let t = e.slice(0, -1);
33
- return i.startsWith(t);
34
- }
35
- return i === e;
36
- });
37
- }
38
- function d(e) {
39
- return `${e.name}:${e.size}`;
40
- }
41
- function f({ value: f, form: p, onValue: m, onBlur: h, name: g = "", placeholder: _ = "Перетащите файлы сюда или нажмите", label: v = "", error: y = "", hidden: b = !1, disabled: x = !1, className: S = "", after: C = "", before: w = "", accept: T, multiple: E = !0, maxSize: D, maxFiles: O, keepFile: k = !0, hint: A, append: j = !0 }) {
42
- let { value: M } = n(p, g, f), N = c(M), P = !x, F = r.useRef(null), [I, L] = r.useState(""), [R, z] = r.useState(!1), B = r.useRef(0), V = (e) => {
43
- let t = {
44
- value: e,
45
- name: g
46
- };
47
- p && g && p.setValue(t), m && m !== p?.onValue && m(t);
48
- }, H = (e) => {
49
- if (e.length === 0) return;
50
- let t = e.filter((e) => !u(e, T));
51
- if (t.length > 0) {
52
- L(`Тип файла не подходит: ${t.map((e) => e.name).join(", ")}`);
53
- return;
54
- }
55
- if (D !== void 0) {
56
- let t = e.find((e) => e.size > D);
57
- if (t) {
58
- L(`Файл «${t.name}» больше ${l(D)}`);
59
- return;
60
- }
61
- }
62
- let n;
63
- if (!E) n = [e[0]];
64
- else if (j && N.length > 0) {
65
- let t = new Set(N.map((e) => d(e))), r = e.filter((e) => !t.has(d(e))), i = N.filter((e) => typeof File < "u" && e instanceof File);
66
- n = k && i.length === N.length ? [...i, ...r] : [...e];
67
- } else n = e;
68
- if (O !== void 0 && n.length > O) {
69
- L(`Не больше ${O} файлов`);
70
- return;
71
- }
72
- L("");
73
- let r = k ? E ? n : n[0] : E ? n.map(o) : o(n[0]);
74
- V(r), h?.({
75
- value: r,
76
- name: g
77
- });
78
- }, U = () => {
79
- P && (V(E ? [] : null), F.current && (F.current.value = ""), L(""));
80
- }, W = (e) => {
81
- if (!P) return;
82
- if (!E) {
83
- U();
84
- return;
85
- }
86
- let t = N.filter((t, n) => n !== e);
87
- V(k ? t : t.map(s)), F.current && (F.current.value = "");
88
- }, G = (e) => {
89
- e.preventDefault(), e.stopPropagation(), P && (B.current += 1, z(!0));
90
- }, K = (e) => {
91
- e.preventDefault(), e.stopPropagation(), --B.current, B.current <= 0 && (B.current = 0, z(!1));
92
- }, q = (e) => {
93
- e.preventDefault(), e.stopPropagation(), e.dataTransfer && (e.dataTransfer.dropEffect = P ? "copy" : "none");
94
- }, J = (e) => {
95
- e.preventDefault(), e.stopPropagation(), B.current = 0, z(!1), P && H(Array.from(e.dataTransfer.files || []));
96
- }, Y = N.length === 0;
97
- if (b && Y) return null;
98
- let X = y || I, Z = A || _;
99
- return /* @__PURE__ */ a(t, {
100
- type: "dragdrop",
101
- label: v,
102
- error: X,
103
- element_blok: { className: [S || ""] },
104
- element_input: {
105
- className: [e.dragDrop],
106
- props: {
107
- "data-disabled": x || !P ? "true" : void 0,
108
- "data-dragging": R ? "true" : void 0
109
- }
110
- },
111
- children: [
112
- w ? /* @__PURE__ */ i("span", {
113
- className: e.affix,
114
- children: w
115
- }) : null,
116
- /* @__PURE__ */ a("div", {
117
- className: e.dragDropInner,
118
- children: [
119
- /* @__PURE__ */ i("input", {
120
- ref: F,
121
- type: "file",
122
- className: e.fileInput,
123
- accept: T,
124
- multiple: E,
125
- disabled: x || !P,
126
- "aria-label": v || _ || "Файлы",
127
- onChange: (e) => {
128
- H(Array.from(e.target.files || [])), e.target.value = "";
129
- }
130
- }),
131
- /* @__PURE__ */ a("button", {
132
- type: "button",
133
- className: e.dragDropZone,
134
- disabled: !P,
135
- "data-dragging": R ? "true" : void 0,
136
- onClick: () => F.current?.click(),
137
- onDragEnter: G,
138
- onDragLeave: K,
139
- onDragOver: q,
140
- onDrop: J,
141
- children: [/* @__PURE__ */ i("span", {
142
- className: e.dragDropHint,
143
- children: Z
144
- }), T ? /* @__PURE__ */ i("span", {
145
- className: e.dragDropAccept,
146
- children: T
147
- }) : null]
148
- }),
149
- Y ? null : /* @__PURE__ */ i("ul", {
150
- className: e.dragDropList,
151
- children: N.map((t, n) => /* @__PURE__ */ a("li", {
152
- className: e.dragDropItem,
153
- children: [/* @__PURE__ */ a("div", {
154
- className: e.dragDropMeta,
155
- children: [/* @__PURE__ */ i("span", {
156
- className: e.dragDropName,
157
- title: t.name,
158
- children: t.name
159
- }), /* @__PURE__ */ i("span", {
160
- className: e.dragDropSize,
161
- children: l(t.size)
162
- })]
163
- }), P ? /* @__PURE__ */ i("button", {
164
- type: "button",
165
- className: e.dragDropRemove,
166
- "aria-label": `Удалить ${t.name}`,
167
- onClick: () => W(n),
168
- children: "×"
169
- }) : null]
170
- }, `${t.name}-${n}`))
171
- }),
172
- !Y && P ? /* @__PURE__ */ i("button", {
173
- type: "button",
174
- className: e.dragDropClearAll,
175
- onClick: U,
176
- children: "Очистить всё"
177
- }) : null
178
- ]
179
- }),
180
- C ? /* @__PURE__ */ i("span", {
181
- className: e.affix,
182
- children: C
183
- }) : null
184
- ]
185
- });
186
- }
187
- f.displayName = "DragDropField";
188
- //#endregion
189
- export { f as default };
1
+ 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";function o(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}function s(e){return typeof File<`u`&&e instanceof File?o(e):e}function c(e){return e?Array.isArray(e)?e:typeof File<`u`&&e instanceof File||typeof e==`object`&&e&&`name`in e?[e]:[]:[]}function l(e){return e<1024?`${e} Б`:e<1024*1024?`${(e/1024).toFixed(1)} КБ`:`${(e/(1024*1024)).toFixed(1)} МБ`}function u(e,t){if(!t||!t.trim())return!0;let n=t.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=(e.type||``).toLowerCase();return n.some(e=>{if(e.startsWith(`.`))return r.endsWith(e);if(e.endsWith(`/*`)){let t=e.slice(0,-1);return i.startsWith(t)}return i===e})}function d(e){return`${e.name}:${e.size}`}function f({value:f,form:p,onValue:m,onBlur:h,name:g=``,placeholder:_=`Перетащите файлы сюда или нажмите`,label:v=``,error:y=``,hidden:b=!1,disabled:x=!1,className:S=``,after:C=``,before:w=``,accept:T,multiple:E=!0,maxSize:D,maxFiles:O,keepFile:k=!0,hint:A,append:j=!0}){let{value:M}=n(p,g,f),N=c(M),P=!x,F=r.useRef(null),[I,L]=r.useState(``),[R,z]=r.useState(!1),B=r.useRef(0),V=e=>{let t={value:e,name:g};p&&g&&p.setValue(t),m&&m!==p?.onValue&&m(t)},H=e=>{if(e.length===0)return;let t=e.filter(e=>!u(e,T));if(t.length>0){L(`Тип файла не подходит: ${t.map(e=>e.name).join(`, `)}`);return}if(D!==void 0){let t=e.find(e=>e.size>D);if(t){L(`Файл «${t.name}» больше ${l(D)}`);return}}let n;if(!E)n=[e[0]];else if(j&&N.length>0){let t=new Set(N.map(e=>d(e))),r=e.filter(e=>!t.has(d(e))),i=N.filter(e=>typeof File<`u`&&e instanceof File);n=k&&i.length===N.length?[...i,...r]:[...e]}else n=e;if(O!==void 0&&n.length>O){L(`Не больше ${O} файлов`);return}L(``);let r=k?E?n:n[0]:E?n.map(o):o(n[0]);V(r),h?.({value:r,name:g})},U=()=>{P&&(V(E?[]:null),F.current&&(F.current.value=``),L(``))},W=e=>{if(!P)return;if(!E){U();return}let t=N.filter((t,n)=>n!==e);V(k?t:t.map(s)),F.current&&(F.current.value=``)},G=e=>{e.preventDefault(),e.stopPropagation(),P&&(B.current+=1,z(!0))},K=e=>{e.preventDefault(),e.stopPropagation(),--B.current,B.current<=0&&(B.current=0,z(!1))},q=e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect=P?`copy`:`none`)},J=e=>{e.preventDefault(),e.stopPropagation(),B.current=0,z(!1),P&&H(Array.from(e.dataTransfer.files||[]))},Y=N.length===0;if(b&&Y)return null;let X=y||I,Z=A||_;return a(t,{type:`dragdrop`,label:v,error:X,element_blok:{className:[S||``]},element_input:{className:[e.dragDrop],props:{"data-disabled":x||!P?`true`:void 0,"data-dragging":R?`true`:void 0}},children:[w?i(`span`,{className:e.affix,children:w}):null,a(`div`,{className:e.dragDropInner,children:[i(`input`,{ref:F,type:`file`,className:e.fileInput,accept:T,multiple:E,disabled:x||!P,"aria-label":v||_||`Файлы`,onChange:e=>{H(Array.from(e.target.files||[])),e.target.value=``}}),a(`button`,{type:`button`,className:e.dragDropZone,disabled:!P,"data-dragging":R?`true`:void 0,onClick:()=>F.current?.click(),onDragEnter:G,onDragLeave:K,onDragOver:q,onDrop:J,children:[i(`span`,{className:e.dragDropHint,children:Z}),T?i(`span`,{className:e.dragDropAccept,children:T}):null]}),Y?null:i(`ul`,{className:e.dragDropList,children:N.map((t,n)=>a(`li`,{className:e.dragDropItem,children:[a(`div`,{className:e.dragDropMeta,children:[i(`span`,{className:e.dragDropName,title:t.name,children:t.name}),i(`span`,{className:e.dragDropSize,children:l(t.size)})]}),P?i(`button`,{type:`button`,className:e.dragDropRemove,"aria-label":`Удалить ${t.name}`,onClick:()=>W(n),children:`×`}):null]},`${t.name}-${n}`))}),!Y&&P?i(`button`,{type:`button`,className:e.dragDropClearAll,onClick:U,children:`Очистить всё`}):null]}),C?i(`span`,{className:e.affix,children:C}):null]})}f.displayName=`DragDropField`;export{f as default};
@@ -1,8 +1,10 @@
1
+ import { default as React } from 'react';
1
2
  import { TInput } from './type';
2
3
  /** EmailField — нативный input type=email (автозаполнение, мобильная клавиатура). */
3
4
  export type TEmail = TInput;
4
- declare function EmailField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxLength, autoComplete, id, }: TEmail): import("react/jsx-runtime").JSX.Element | null;
5
+ declare function EmailField(props: TEmail): import("react/jsx-runtime").JSX.Element;
5
6
  declare namespace EmailField {
6
7
  var displayName: string;
7
8
  }
8
- export default EmailField;
9
+ declare const _default: React.MemoExoticComponent<typeof EmailField>;
10
+ export default _default;
@@ -1,80 +1 @@
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 { isEmptyTextLike as r } from "./visibility.js";
5
- import i from "react";
6
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
7
- //#region src/lib/fields/Email.tsx
8
- 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 }) {
9
- let { value: C, version: w } = n(c, d, s), T = !g, E = typeof C == "string" || typeof C == "number" ? String(C) : "", D = i.useRef(null);
10
- i.useEffect(() => {
11
- let e = D.current;
12
- !e || e.value === E || (e.value = E);
13
- }, [E, w]);
14
- let O = (e, t = !1) => {
15
- let n = {
16
- value: e,
17
- name: d
18
- };
19
- c && d && (t ? c.setValue(n) : c.onValue(n)), l && l !== c?.onValue && l(n);
20
- };
21
- return h && r(C) ? null : /* @__PURE__ */ o(t, {
22
- type: "email",
23
- label: p,
24
- error: m,
25
- element_blok: { className: [_ || ""] },
26
- element_input: {
27
- className: [e.w],
28
- props: { "data-disabled": g || !T ? "true" : void 0 }
29
- },
30
- children: [
31
- y ? /* @__PURE__ */ a("span", {
32
- className: e.affix,
33
- children: y
34
- }) : null,
35
- /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a("input", {
36
- id: S,
37
- ref: D,
38
- type: "email",
39
- name: d || void 0,
40
- defaultValue: E,
41
- placeholder: f,
42
- maxLength: b,
43
- disabled: g,
44
- readOnly: !T,
45
- autoComplete: x,
46
- inputMode: "email",
47
- spellCheck: !1,
48
- "aria-label": p || f || "Email",
49
- onChange: (e) => O(e.target.value),
50
- onBlur: (e) => {
51
- let t = (e.target.value || "").trim();
52
- O(t, !0), u?.({
53
- value: t,
54
- name: d
55
- });
56
- },
57
- onKeyDown: (e) => {
58
- e.key === "Enter" && e.preventDefault();
59
- },
60
- style: {
61
- width: "100%",
62
- border: "none",
63
- outline: "none",
64
- background: "transparent",
65
- font: "inherit",
66
- color: "inherit",
67
- padding: 0,
68
- margin: 0
69
- }
70
- }) }),
71
- v ? /* @__PURE__ */ a("span", {
72
- className: e.affix,
73
- children: v
74
- }) : null
75
- ]
76
- });
77
- }
78
- s.displayName = "EmailField";
79
- //#endregion
80
- export { s as default };
1
+ import e from"./NativeTextField.js";import t from"react";import{jsx as n}from"react/jsx-runtime";function r(t){return n(e,{...t,fieldType:`email`,inputType:`email`,inputmode:t.inputmode??`email`,autoComplete:t.autoComplete??`email`,defaultAriaLabel:`Email`})}r.displayName=`EmailField`;var i=t.memo(r);export{i as default};
@@ -1,115 +1 @@
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 "react";
5
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
- //#region src/lib/fields/File.tsx
7
- function o(e) {
8
- return {
9
- name: e.name,
10
- size: e.size,
11
- type: e.type,
12
- lastModified: e.lastModified
13
- };
14
- }
15
- function s(e) {
16
- return e ? Array.isArray(e) ? e : typeof File < "u" && e instanceof File || typeof e == "object" && e && "name" in e ? [e] : [] : [];
17
- }
18
- function c(e) {
19
- return e < 1024 ? `${e} Б` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} КБ` : `${(e / (1024 * 1024)).toFixed(1)} МБ`;
20
- }
21
- 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 }) {
22
- let { value: E } = n(u, p, l), D = s(E), O = !v, k = r.useRef(null), [A, j] = r.useState(""), M = (e) => {
23
- let t = {
24
- value: e,
25
- name: p
26
- };
27
- u && p && u.setValue(t), d && d !== u?.onValue && d(t);
28
- }, N = (e) => {
29
- if (!e || e.length === 0) return;
30
- let t = Array.from(e);
31
- if (w !== void 0) {
32
- let e = t.find((e) => e.size > w);
33
- if (e) {
34
- j(`Файл «${e.name}» больше ${c(w)}`);
35
- return;
36
- }
37
- }
38
- j("");
39
- let n = T ? C ? t : t[0] : C ? t.map(o) : o(t[0]);
40
- M(n), f?.({
41
- value: n,
42
- name: p
43
- });
44
- }, P = () => {
45
- O && (M(C ? [] : null), k.current && (k.current.value = ""), j(""));
46
- }, F = D.length === 0;
47
- return _ && F ? null : /* @__PURE__ */ a(t, {
48
- type: "file",
49
- label: h,
50
- error: g || A,
51
- element_blok: { className: [y || ""] },
52
- element_input: {
53
- className: [e.file],
54
- props: { "data-disabled": v || !O ? "true" : void 0 }
55
- },
56
- children: [
57
- x ? /* @__PURE__ */ i("span", {
58
- className: e.affix,
59
- children: x
60
- }) : null,
61
- /* @__PURE__ */ a("div", {
62
- className: e.fileInner,
63
- children: [
64
- /* @__PURE__ */ i("input", {
65
- ref: k,
66
- type: "file",
67
- className: e.fileInput,
68
- accept: S,
69
- multiple: C,
70
- disabled: v || !O,
71
- "aria-label": h || m || "Файл",
72
- onChange: (e) => N(e.target.files)
73
- }),
74
- /* @__PURE__ */ i("button", {
75
- type: "button",
76
- className: e.fileButton,
77
- disabled: !O,
78
- onClick: () => k.current?.click(),
79
- children: m
80
- }),
81
- /* @__PURE__ */ i("div", {
82
- className: e.fileList,
83
- children: F ? /* @__PURE__ */ i("span", {
84
- className: e.fileEmpty,
85
- children: "Нет файла"
86
- }) : D.map((t, n) => /* @__PURE__ */ a("span", {
87
- className: e.fileItem,
88
- children: [/* @__PURE__ */ i("span", {
89
- className: e.fileName,
90
- children: t.name
91
- }), /* @__PURE__ */ i("span", {
92
- className: e.fileSize,
93
- children: c(t.size)
94
- })]
95
- }, `${t.name}-${n}`))
96
- }),
97
- !F && O ? /* @__PURE__ */ i("button", {
98
- type: "button",
99
- className: e.fileClear,
100
- "aria-label": "Очистить",
101
- onClick: P,
102
- children: "×"
103
- }) : null
104
- ]
105
- }),
106
- b ? /* @__PURE__ */ i("span", {
107
- className: e.affix,
108
- children: b
109
- }) : null
110
- ]
111
- });
112
- }
113
- l.displayName = "FileField";
114
- //#endregion
115
- export { l as default };
1
+ 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";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: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?i(`span`,{className:e.affix,children:x}):null,a(`div`,{className:e.fileInner,children:[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)}),i(`button`,{type:`button`,className:e.fileButton,disabled:!O,onClick:()=>k.current?.click(),children:m}),i(`div`,{className:e.fileList,children:F?i(`span`,{className:e.fileEmpty,children:`Нет файла`}):D.map((t,n)=>a(`span`,{className:e.fileItem,children:[i(`span`,{className:e.fileName,children:t.name}),i(`span`,{className:e.fileSize,children:c(t.size)})]},`${t.name}-${n}`))}),!F&&O?i(`button`,{type:`button`,className:e.fileClear,"aria-label":`Очистить`,onClick:P,children:`×`}):null]}),b?i(`span`,{className:e.affix,children:b}):null]})}l.displayName=`FileField`;export{l as default};
@@ -1,33 +1 @@
1
- import { useFormFieldState as e } from "../hooks/use.js";
2
- import t from "react";
3
- import { jsx as n } from "react/jsx-runtime";
4
- //#region src/lib/fields/Hidden.tsx
5
- function r({ value: r = "", form: i, onValue: a, name: o = "", id: s, hidden: c = !1 }) {
6
- let { value: l } = e(i, o, r);
7
- if (t.useEffect(() => {
8
- if (!i || !o || i.getValue(o) !== void 0) return;
9
- let e = {
10
- value: l,
11
- name: o
12
- };
13
- i.onValue(e), a && a !== i.onValue && a(e);
14
- }, [
15
- i,
16
- o,
17
- l,
18
- a
19
- ]), c) return null;
20
- let u = l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : JSON.stringify(l);
21
- return /* @__PURE__ */ n("input", {
22
- type: "hidden",
23
- id: s,
24
- name: o || void 0,
25
- value: u,
26
- readOnly: !0,
27
- "data-field": "hidden",
28
- "aria-hidden": !0
29
- });
30
- }
31
- r.displayName = "HiddenField";
32
- //#endregion
33
- export { r as default };
1
+ import{useFormFieldState as e}from"../hooks/use.js";import t from"react";import{jsx as n}from"react/jsx-runtime";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 n(`input`,{type:`hidden`,id:s,name:o||void 0,value:u,readOnly:!0,"data-field":`hidden`,"aria-hidden":!0})}r.displayName=`HiddenField`;export{r as default};
@@ -1,3 +1,4 @@
1
+ import { default as React } from 'react';
1
2
  import { TInput } from './type';
2
3
  /**
3
4
  * StringField — текстовое поле (по умолчанию contentEditable).
@@ -9,4 +10,5 @@ import { TInput } from './type';
9
10
  * @param hidden — при true скрывает поле, только если значение пустое
10
11
  */
11
12
  declare function StringField({ value, form, onValue, name, placeholder, label, hidden, disabled, onBlur: onBlurField, className, after, before, error, inputmode, maxLength, spellCheck, native, autoComplete, inputType, id, size, }: TInput): import("react/jsx-runtime").JSX.Element | "";
12
- export default StringField;
13
+ declare const _default: React.MemoExoticComponent<typeof StringField>;
14
+ export default _default;
@@ -1,149 +1 @@
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 { isEmptyTextLike as a } from "./visibility.js";
6
- import o from "react";
7
- import { jsx as s, jsxs as c } from "react/jsx-runtime";
8
- //#region src/lib/fields/Input.tsx
9
- 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, native: T = !1, autoComplete: E, inputType: D = "text", id: O, size: k = "md" }) {
10
- let { value: A, version: j } = n(u, f, l), M = !g, N = typeof A == "string" || typeof A == "number" ? String(A) : "", P = o.useRef(null), F = o.useRef(null), I = o.useRef(!1);
11
- o.useLayoutEffect(() => {
12
- if (T) return;
13
- let e = F.current;
14
- e && e.textContent !== N && (e.textContent = N);
15
- }, [
16
- T,
17
- N,
18
- j
19
- ]), o.useEffect(() => {
20
- if (!T) return;
21
- let e = P.current;
22
- e && e.value !== N && (e.value = N);
23
- }, [T, N]);
24
- let L = (e) => {
25
- let t = {
26
- value: (e.target.textContent || "").trim(),
27
- name: f
28
- };
29
- u && f && u.onValue(t), d && d !== u?.onValue && d(t);
30
- }, R = (e) => {
31
- let t = {
32
- value: e.target.value,
33
- name: f
34
- };
35
- u && f && u.onValue(t), d && d !== u?.onValue && d(t);
36
- }, z = (e) => {
37
- let t = e.target;
38
- C && (t.textContent || "").trim().length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && e.preventDefault();
39
- }, B = (e) => {
40
- e.key === "Enter" && e.preventDefault();
41
- }, V = (e) => r.Paste(C || 0, i(e));
42
- if (h && a(A)) return "";
43
- let H = (e) => {
44
- r.Blur(e), _?.({
45
- value: (e.target.textContent || "").trim(),
46
- name: f
47
- }), I.current = !1;
48
- }, U = (e) => {
49
- _?.({
50
- value: (e.target.value || "").trim(),
51
- name: f
52
- });
53
- }, W = (e) => {
54
- I.current = !0, r.Focus({ target: e.currentTarget });
55
- }, G = {};
56
- return p && (G.placeholder = p), M && (G.edit = ""), T ? /* @__PURE__ */ c(t, {
57
- type: "input",
58
- label: m,
59
- error: x,
60
- size: k,
61
- element_blok: { className: [v || ""] },
62
- element_input: {
63
- className: [e.w],
64
- props: { "data-disabled": g || !M ? "true" : void 0 }
65
- },
66
- children: [
67
- b ? /* @__PURE__ */ s("span", {
68
- className: e.affix,
69
- children: b
70
- }) : null,
71
- /* @__PURE__ */ s("div", {
72
- style: {
73
- flex: 1,
74
- minWidth: 0,
75
- display: "flex",
76
- alignItems: "center"
77
- },
78
- children: /* @__PURE__ */ s("input", {
79
- id: O,
80
- ref: P,
81
- type: D,
82
- name: f || void 0,
83
- defaultValue: N,
84
- placeholder: p,
85
- maxLength: C,
86
- spellCheck: w,
87
- disabled: g,
88
- readOnly: g,
89
- autoComplete: E,
90
- inputMode: S || "text",
91
- "aria-label": m || p || "Текст",
92
- "aria-disabled": g || !M ? !0 : void 0,
93
- tabIndex: g ? -1 : 0,
94
- onChange: R,
95
- onBlur: U,
96
- onKeyDown: B,
97
- style: {
98
- width: "100%",
99
- border: "none",
100
- outline: "none",
101
- background: "transparent",
102
- font: "inherit",
103
- color: "inherit",
104
- padding: 0,
105
- margin: 0,
106
- boxSizing: "border-box"
107
- }
108
- })
109
- }),
110
- y ? /* @__PURE__ */ s("span", {
111
- className: e.affix,
112
- children: y
113
- }) : null
114
- ]
115
- }) : /* @__PURE__ */ c(t, {
116
- type: "input",
117
- label: m,
118
- error: x,
119
- size: k,
120
- element_blok: { className: [v] },
121
- element_input: { className: [e.w] },
122
- children: [
123
- b ? /* @__PURE__ */ s("span", {
124
- className: e.affix,
125
- children: b
126
- }) : null,
127
- /* @__PURE__ */ s("div", {
128
- ref: F,
129
- id: O,
130
- onBlur: H,
131
- onFocus: W,
132
- onPaste: V,
133
- onInput: L,
134
- onKeyDown: z,
135
- spellCheck: w,
136
- inputMode: S || "text",
137
- contentEditable: M ? "plaintext-only" : !1,
138
- suppressContentEditableWarning: !0,
139
- ...G
140
- }),
141
- y ? /* @__PURE__ */ s("span", {
142
- className: e.affix,
143
- children: y
144
- }) : null
145
- ]
146
- });
147
- }
148
- //#endregion
149
- export { l as default };
1
+ import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import i,{asEditableClipboard as a}from"../events/onEvent.js";import{isEmptyTextLike as o}from"./visibility.js";import{createFieldEmit as s}from"./emit.js";import c from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({value:n,form:d,onValue:m,name:h=``,placeholder:g=``,label:_=``,hidden:v=!1,disabled:y=!1,onBlur:b,className:x=``,after:S=``,before:C=``,error:w=``,inputmode:T=`text`,maxLength:E,spellCheck:D=!0,native:O=!1,autoComplete:k,inputType:A=`text`,id:j,size:M=`md`}){let{value:N,version:P}=r(d,h,n),F=!y,I=typeof N==`string`||typeof N==`number`?String(N):``,L=c.useRef(null),R=c.useRef(null),z=c.useRef(!1);c.useLayoutEffect(()=>{if(O)return;let e=R.current;e&&e.textContent!==I&&(e.textContent=I)},[O,I,P]),c.useEffect(()=>{if(!O)return;let e=L.current;e&&e.value!==I&&(e.value=I)},[O,I]);let B=s(d,h,m),V=e=>{let t=e.target;B((t.textContent||``).trim())},H=e=>{B(e.target.value)},U=e=>{let t=e.target;E&&(t.textContent||``).trim().length>=E&&e.key!==`Backspace`&&e.preventDefault(),e.key===`Enter`&&e.preventDefault()},W=e=>{e.key===`Enter`&&e.preventDefault()},G=e=>i.Paste(E||0,a(e));if(v&&o(N))return``;let K=e=>{i.Blur(e),b?.({value:(e.target.textContent||``).trim(),name:h}),z.current=!1},q=e=>{b?.({value:(e.target.value||``).trim(),name:h})},J=e=>{z.current=!0,i.Focus({target:e.currentTarget})},Y={};return g&&(Y.placeholder=g),F&&(Y.edit=``),O?u(t,{type:`input`,label:_,error:w,id:j,size:M,element_blok:{className:[x||``]},element_input:{className:[e.w],props:{"data-disabled":y||!F?`true`:void 0}},children:[C?l(`span`,{className:e.affix,children:C}):null,l(f,{inputRef:L,name:h,displayString:I,placeholder:g,maxLength:E,spellCheck:D,disabled:y,editable:F,autoComplete:k,inputType:A,inputmode:T,label:_,onChangeNative:H,handleBlurNative:q,onKeyDownNative:W}),S?l(`span`,{className:e.affix,children:S}):null]}):u(t,{type:`input`,label:_,error:w,id:j,size:M,element_blok:{className:[x]},element_input:{className:[e.w]},children:[C?l(`span`,{className:e.affix,children:C}):null,l(p,{ceRef:R,editable:F,label:_,placeholder:g,spellCheck:D,inputmode:T,dd:Y,onBlur:K,onFocus:J,onPaste:G,onInput:V,onKeyDown:U}),S?l(`span`,{className:e.affix,children:S}):null]})}function f({inputRef:t,name:r,displayString:i,placeholder:a,maxLength:o,spellCheck:s,disabled:c,editable:u,autoComplete:d,inputType:f,inputmode:p,label:m,onChangeNative:h,handleBlurNative:g,onKeyDownNative:_}){let v=n();return l(`div`,{className:e.nativeWrap,children:l(`input`,{id:v?.controlId,ref:t,className:e.nativeInput,type:f,name:r||void 0,defaultValue:i,placeholder:a,maxLength:o,spellCheck:s,disabled:c,readOnly:c,autoComplete:d,inputMode:p||`text`,"aria-label":m?void 0:a||`Текст`,"aria-describedby":v?.describedBy,"aria-invalid":v?.errorId?!0:void 0,"aria-disabled":c||!u?!0:void 0,tabIndex:c?-1:0,onChange:h,onBlur:g,onKeyDown:_})})}function p({ceRef:e,editable:t,label:r,placeholder:i,spellCheck:a,inputmode:o,dd:s,onBlur:c,onFocus:u,onPaste:d,onInput:f,onKeyDown:p}){let m=n();return l(`div`,{ref:e,id:m?.controlId,role:`textbox`,"aria-multiline":`false`,"aria-label":r?void 0:i||`Текст`,"aria-describedby":m?.describedBy,"aria-invalid":m?.errorId?!0:void 0,"aria-disabled":!t,tabIndex:t?0:-1,onBlur:c,onFocus:u,onPaste:d,onInput:f,onKeyDown:p,spellCheck:a,inputMode:o||`text`,contentEditable:t?`plaintext-only`:!1,suppressContentEditableWarning:!0,...s})}var m=c.memo(d);export{m as default};