@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
package/README.md
CHANGED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# @elcrm/form
|
|
2
|
+
|
|
3
|
+
React-компоненты полей ввода для elCRM: текст, пароль, маски, деньги, даты, селекты и связка с **`useForm`** (гранулярные подписки по имени поля).
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @elcrm/form
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Требуются **peer-зависимости** (см. `package.json`): **`react`** и **`react-dom`**.
|
|
12
|
+
|
|
13
|
+
**`Form.Init` не обязателен** — поля работают без него. Компонент нужен **только** если вы задаёте свои **`onModal`** и/или **`onNotice`** (см. ниже). Рендерит `null`, дерево приложения не оборачивает.
|
|
14
|
+
|
|
15
|
+
## Быстрый старт
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { useForm, StringField, PasswordField } from "@elcrm/form";
|
|
19
|
+
import "@elcrm/form/light.css";
|
|
20
|
+
|
|
21
|
+
function Example() {
|
|
22
|
+
const form = useForm({ login: "", password: "" });
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<>
|
|
26
|
+
<StringField
|
|
27
|
+
name="login"
|
|
28
|
+
form={form}
|
|
29
|
+
value=""
|
|
30
|
+
title="Логин"
|
|
31
|
+
edit
|
|
32
|
+
active
|
|
33
|
+
/>
|
|
34
|
+
<PasswordField
|
|
35
|
+
name="password"
|
|
36
|
+
form={form}
|
|
37
|
+
value=""
|
|
38
|
+
title="Пароль"
|
|
39
|
+
edit
|
|
40
|
+
active
|
|
41
|
+
/>
|
|
42
|
+
</>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### `Form.Init` (опционально)
|
|
48
|
+
|
|
49
|
+
Подключайте, когда нужны **уведомления** (например после копирования телефона в буфер) или **свои модалки** для полей **ModalField**, **OptionsField** (`modal="module.name"`):
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { Form, useForm, PhoneField } from "@elcrm/form";
|
|
53
|
+
|
|
54
|
+
function Example() {
|
|
55
|
+
const form = useForm({ phone: "" });
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<>
|
|
59
|
+
<Form.Init
|
|
60
|
+
onNotice={(message) => {
|
|
61
|
+
/* тост / snackbar */
|
|
62
|
+
}}
|
|
63
|
+
onModal={({
|
|
64
|
+
module,
|
|
65
|
+
modalName,
|
|
66
|
+
fieldName,
|
|
67
|
+
value,
|
|
68
|
+
callback,
|
|
69
|
+
options,
|
|
70
|
+
}) => {
|
|
71
|
+
/* открыть модалку и передать результат в callback(...) */
|
|
72
|
+
}}
|
|
73
|
+
/>
|
|
74
|
+
<PhoneField name="phone" form={form} title="Телефон" edit active />
|
|
75
|
+
</>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Без **`Form.Init`** вызовы **`onNotice` / `onModal`** из полей просто ничего не делают (пустые заглушки).
|
|
81
|
+
|
|
82
|
+
Темы: подключите `@elcrm/form/light.css` и `@elcrm/form/dark.css`, переключайте `data-theme` на контейнере.
|
|
83
|
+
|
|
84
|
+
Стили полей (классы из SCSS-модулей): `import "@elcrm/form/style.css"` (альтернатива — `@elcrm/form/dist/style.css`).
|
|
85
|
+
|
|
86
|
+
### Минимальный бандл (tree-shaking)
|
|
87
|
+
|
|
88
|
+
Пакет собран как **ESM по модулям** — бандлер приложения может отбросить неиспользуемые поля. Импорт из корня:
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
import { DateField, useForm } from "@elcrm/form";
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Чтобы подключать только нужные части, используйте **подпути** (имя совпадает с компонентом, например `Date` → поле даты):
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import DateField from "@elcrm/form/fields/Date";
|
|
98
|
+
import { useForm } from "@elcrm/form/hooks/use";
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Доступные префиксы: `fields/*`, `hooks/*`, `events/*`, `core/*`, `mask/*` — см. поле **`exports`** в `package.json` пакета.
|
|
102
|
+
|
|
103
|
+
Объектные пропы (например `options` у селекта) не создавайте заново на каждый рендер — вынесите в константу модуля или держите одну ссылку.
|
|
104
|
+
|
|
105
|
+
Типы **`TModalOpenPayload`**, **`FormInitProps`** экспортируются из пакета. Хук **`useFormInit()`** внутри полей; без **`Form.Init`** возвращаются заглушки — можно вызывать и в своих компонентах.
|
|
106
|
+
|
|
107
|
+
## История изменений
|
|
108
|
+
|
|
109
|
+
Список версий и правок — в **`CHANGELOG.md`** в репозитории пакета.
|
|
110
|
+
|
|
111
|
+
## Лицензия
|
|
112
|
+
|
|
113
|
+
MIT — см. `package.json`.
|
package/dist/Form.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { TModalOpenPayload } from './FormInitContext';
|
|
2
|
+
export type { TModalOpenPayload };
|
|
3
|
+
export type FormInitProps = {
|
|
4
|
+
/** Уведомления (копирование в буфер и т.п.) */
|
|
5
|
+
onNotice?: (message: string) => void;
|
|
6
|
+
/** Модальные окна выбора для полей ModalField / OptionsField (`modal="module.name"`) */
|
|
7
|
+
onModal?: (payload: TModalOpenPayload) => void;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Регистрирует колбэки глобально для полей. Не рендерит разметку и не принимает `children`.
|
|
11
|
+
* Достаточно один раз смонтировать рядом с формой или в корне приложения.
|
|
12
|
+
*/
|
|
13
|
+
declare function Init({ onNotice, onModal }: FormInitProps): null;
|
|
14
|
+
declare namespace Init {
|
|
15
|
+
var displayName: string;
|
|
16
|
+
}
|
|
17
|
+
/** Пространство имён: `Form.Init` */
|
|
18
|
+
export declare const Form: {
|
|
19
|
+
Init: typeof Init;
|
|
20
|
+
};
|
package/dist/Form.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { registerFormInitHandlers as e } from "./FormInitContext.js";
|
|
2
|
+
import t from "react";
|
|
3
|
+
//#region src/lib/Form.tsx
|
|
4
|
+
var n = () => {}, r = (e) => {};
|
|
5
|
+
function i({ onNotice: i, onModal: a }) {
|
|
6
|
+
return t.useLayoutEffect(() => e(i ?? n, a ?? r), [i, a]), null;
|
|
7
|
+
}
|
|
8
|
+
i.displayName = "Form.Init";
|
|
9
|
+
var a = { Init: i };
|
|
10
|
+
//#endregion
|
|
11
|
+
export { a as Form };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { TValue } from './fields/type';
|
|
2
|
+
/**
|
|
3
|
+
* Аргументы для колбэка открытия модалки (замена бывшему Modal.Open из @elcrm/modal).
|
|
4
|
+
* `module` и `modalName` — части строки пропа `modal` вида `"module.modalName"`.
|
|
5
|
+
*/
|
|
6
|
+
export type TModalOpenPayload = {
|
|
7
|
+
module: string;
|
|
8
|
+
modalName: string;
|
|
9
|
+
/** Имя поля формы */
|
|
10
|
+
fieldName: string;
|
|
11
|
+
value?: unknown;
|
|
12
|
+
options?: Record<string, unknown>;
|
|
13
|
+
callback?: (value: unknown) => void;
|
|
14
|
+
onValue?: (data: TValue) => void | Promise<void>;
|
|
15
|
+
};
|
|
16
|
+
export type FormInitContextValue = {
|
|
17
|
+
/** Текст уведомления (например после копирования в буфер) */
|
|
18
|
+
onNotice: (message: string) => void;
|
|
19
|
+
/** Открыть модалку выбора — реализация на стороне приложения */
|
|
20
|
+
onModal: (payload: TModalOpenPayload) => void;
|
|
21
|
+
};
|
|
22
|
+
/** Регистрация колбэков из `Form.Init`; возвращает cleanup */
|
|
23
|
+
export declare function registerFormInitHandlers(onNotice: FormInitContextValue["onNotice"], onModal: FormInitContextValue["onModal"]): () => void;
|
|
24
|
+
/** Доступ к колбэкам в полях (без React Context и без обёртки-children) */
|
|
25
|
+
export declare function useFormInit(): FormInitContextValue;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var e = {
|
|
2
|
+
onNotice: () => {},
|
|
3
|
+
onModal: (e) => {}
|
|
4
|
+
}, t = { current: e }, n = {
|
|
5
|
+
onNotice: (e) => t.current.onNotice(e),
|
|
6
|
+
onModal: (e) => t.current.onModal(e)
|
|
7
|
+
};
|
|
8
|
+
function r(n, r) {
|
|
9
|
+
return t.current = {
|
|
10
|
+
onNotice: n,
|
|
11
|
+
onModal: r
|
|
12
|
+
}, () => {
|
|
13
|
+
t.current = e;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function i() {
|
|
17
|
+
return n;
|
|
18
|
+
}
|
|
19
|
+
//#endregion
|
|
20
|
+
export { r as registerFormInitHandlers, i as useFormInit };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._l_zzcgd_2{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_zzcgd_2>dt,._l_zzcgd_2>dd{margin:0;padding:0}._l_zzcgd_2[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_zzcgd_2[data-field=group] div:last-child{border-bottom:0}._l_zzcgd_2 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);display:block}._l_zzcgd_2 [placeholder]:focus:before{display:none}._f_zzcgd_33{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:0 var(--field-side-padding,14px);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_zzcgd_33:hover{border-color:var(--field-border-hover,var(--field-border))}._f_zzcgd_33:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:0 0 0 3px var(--field-focus-ring,#0000);background:var(--field-background-focus,var(--field-background))}._f_zzcgd_33._e_zzcgd_57:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_zzcgd_33[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_zzcgd_33[data-disabled=true]>*{cursor:not-allowed}._f_zzcgd_33>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);padding:var(--field-inner-padding,0 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0}._f_zzcgd_33>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_zzcgd_33>:not(div){color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-items:center;display:inline-flex}._f_zzcgd_33>:not(div) svg{width:20px;height:20px}._n_zzcgd_97 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px))}._w_zzcgd_104>div{text-wrap:nowrap;overflow:scroll hidden}._w_zzcgd_104>div::-webkit-scrollbar{width:0;height:0}._time_zzcgd_114>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_zzcgd_114 ._timeInner_zzcgd_121{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timeInner_zzcgd_121{justify-content:center}._time_zzcgd_114 ._timeSep_zzcgd_135{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_zzcgd_114 ._timePart_zzcgd_146{box-sizing:border-box;width:1em;min-width:0;color:inherit;font:inherit;line-height:inherit;text-align:left;min-height:var(--field-height);cursor:text;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0}._time_zzcgd_114 ._timePart_zzcgd_146[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_zzcgd_114 ._timePart_zzcgd_146:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:.6}._time_zzcgd_114 ._timePart_zzcgd_146:focus:empty:before{content:none}._time_zzcgd_114 ._timePart_zzcgd_146:focus-visible{background:0 0}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timePart_zzcgd_146{text-align:center}._t_zzcgd_114{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:10px}._g_zzcgd_192{flex-direction:column}._range_zzcgd_196>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_zzcgd_196 ._rangeTrack_zzcgd_205{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_zzcgd_196 ._rangeTrack_zzcgd_205:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000)}._range_zzcgd_196 ._rangeTrack_zzcgd_205[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_zzcgd_196 ._rangeFill_zzcgd_226{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_zzcgd_196 ._rangeFillFull_zzcgd_237{border-radius:999px}._h_zzcgd_241{--field-border:0}._h_zzcgd_241 div{border:var(--field-check-box-border,--field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);cursor:pointer;flex:none;gap:10px;margin:0;position:relative}._h_zzcgd_241 div[aria-checked=true]{background:var(--field-background-active)}._h_zzcgd_241 div:after{content:"";background:0 0;border-top:none;border-bottom:3px solid #fcfff4;border-left:3px solid #fcfff4;border-right:none;width:9px;height:5px;margin:4px;position:absolute;top:5px;left:4px;transform:rotate(-45deg)}._e_zzcgd_57{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_zzcgd_280{color:var(--field-error-color);margin-top:6px;font-size:12px;font-style:normal}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._o_j48yg_2{z-index:98;background:0 0;position:fixed;inset:0}._c_j48yg_13{background:var(--select-background);z-index:99;color:#fff;box-sizing:border-box;border-radius:10px;min-width:259px;max-height:min(92vh,480px);margin:0;padding:10px 12px 12px;display:block;position:absolute;overflow:hidden auto;box-shadow:5px 7px 18px #000000a8}._c_j48yg_13 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:34px;gap:2px;display:grid}._c_j48yg_13 [grid-calendar]>p{color:var(--color-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_j48yg_13 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_j48yg_13 b{cursor:pointer;text-align:center;border-radius:5px;padding:8px 5px;font-weight:400;display:block}._c_j48yg_13 b.__active_j48yg_64{background:var(--bg-select-active)}._c_j48yg_13 b:hover{background:var(--bg-select-hover)}._c_j48yg_13 p{color:var(--color-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_j48yg_13 i{text-align:center;cursor:pointer;border-radius:5px;flex:0 30px;padding:9px}._c_j48yg_13 i:hover{background:var(--bg-select-hover)}._c_j48yg_13 i:before{cursor:pointer;display:block}._c_j48yg_13 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_j48yg_13 s h2{text-align:center;color:#fff;cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;min-width:0;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_j48yg_13 ._dateHeaderMonth_j48yg_119,._c_j48yg_13 ._dateHeaderYear_j48yg_119{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_j48yg_13 ._dateHeaderMonth_j48yg_119:hover,._c_j48yg_13 ._dateHeaderYear_j48yg_119:hover{background:var(--bg-select-hover)}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129{cursor:not-allowed;opacity:.45;pointer-events:none}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-active=true],._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-current=true]{opacity:.45}._c_j48yg_13 [grid-calendar] b[data-current=true],._c_j48yg_13 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_j48yg_13 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_j48yg_13 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_j48yg_13 [grid-calendar] b[data-active=true][data-current=true],._c_j48yg_13 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:5px;font-weight:600}._c_j48yg_13 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_j48yg_13 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 span{text-align:center;padding:2px}._c_j48yg_13 span p{color:var(--color-placeholder);padding:8px 5px}._c_j48yg_13 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_j48yg_13 [grid-calendar]>span>b,._c_j48yg_13 [grid-calendar]>span>p{box-sizing:border-box;border-radius:5px;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_j48yg_13 ._as_j48yg_196{cursor:ns-resize}._c_j48yg_13 ._ap_j48yg_199{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;-webkit-user-select:text;user-select:text}[field=password][show] dd,[field=password] dd:before{-webkit-text-security:none}[field=code] div{gap:8px;display:flex}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{cursor:pointer;max-width:35px;padding:0}[field=check] [active]:after{content:"";background:#394264;border-radius:5px;width:15px;height:15px;display:block}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;cursor:pointer;position:relative}[field=file] img{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block}[field=file] label{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block;position:absolute}[field=color] dd{border:0;gap:3px;padding:0;display:flex}[field=color] dd s{cursor:pointer;opacity:.6;border:1px solid #dde2e4;border-radius:6px;flex:1}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--select-overlay:#0000;--select-height:52px;--select-separator:1px solid #40434c;--select-color:#e8e8eb;--select-background:#26282e;--select-icon:calc(--select-height / 1.5);--select-icon-padding:calc((--select-height - --select-icon) / 2);--select-font-size:13px}._o_1q26w_12{z-index:98;background:var(--select-overlay);position:fixed;inset:0}._l_1q26w_22{background:var(--select-background);z-index:99;border-radius:20px;max-height:300px;margin:0;padding:0;display:block;position:fixed;overflow:scroll}._l_1q26w_22::-webkit-scrollbar{width:0;height:0}._l_1q26w_22 ul{width:100%;max-height:300px;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_1q26w_22 li{border-bottom:var(--select-separator);cursor:pointer;color:var(--select-color);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_1q26w_22 li:hover,._l_1q26w_22 li[data-focus=true]{background:#2f323a}._l_1q26w_22 li:last-child{border-bottom:0}._i_1q26w_80{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._f_1q26w_89{cursor:pointer}._f_1q26w_89[aria-disabled=true]{cursor:not-allowed}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
interface Input {
|
|
3
|
+
element_blok?: {
|
|
4
|
+
className?: string[];
|
|
5
|
+
};
|
|
6
|
+
element_input?: {
|
|
7
|
+
className?: string[];
|
|
8
|
+
props?: Record<string, unknown>;
|
|
9
|
+
};
|
|
10
|
+
title?: string;
|
|
11
|
+
before?: ReactNode;
|
|
12
|
+
type?: string;
|
|
13
|
+
after?: ReactNode;
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
error?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const Field: ({ element_blok, element_input, type, title, error, before, after, children, }: Input) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default Field;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import e from "../styles/Field.module.js";
|
|
2
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
3
|
+
//#region src/lib/core/Field.tsx
|
|
4
|
+
var r = ({ element_blok: r = { className: [] }, element_input: i = {
|
|
5
|
+
className: [],
|
|
6
|
+
props: {}
|
|
7
|
+
}, type: a = "input", title: o, error: s, before: c, after: l, children: u }) => /* @__PURE__ */ n("dl", {
|
|
8
|
+
"data-field": a,
|
|
9
|
+
className: [e.l, ...r.className || []].filter((e) => e !== void 0).join(" "),
|
|
10
|
+
children: [
|
|
11
|
+
o ? /* @__PURE__ */ t("dt", {
|
|
12
|
+
className: e.t,
|
|
13
|
+
children: o
|
|
14
|
+
}) : "",
|
|
15
|
+
c,
|
|
16
|
+
/* @__PURE__ */ t("dd", {
|
|
17
|
+
className: [
|
|
18
|
+
e.f,
|
|
19
|
+
...i.className || [],
|
|
20
|
+
s && s.length > 0 ? e.e : ""
|
|
21
|
+
].join(" "),
|
|
22
|
+
...i.props || {},
|
|
23
|
+
children: u
|
|
24
|
+
}),
|
|
25
|
+
s && s.length > 0 ? /* @__PURE__ */ t("em", {
|
|
26
|
+
className: e.m,
|
|
27
|
+
children: s
|
|
28
|
+
}) : "",
|
|
29
|
+
l
|
|
30
|
+
]
|
|
31
|
+
});
|
|
32
|
+
//#endregion
|
|
33
|
+
export { r as default };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/** Публичный тип цели для contentEditable-полей (фокус, вставка) */
|
|
2
|
+
export type EditableFieldTarget = HTMLElement & {
|
|
3
|
+
textContent: string | null;
|
|
4
|
+
scrollLeft: number;
|
|
5
|
+
innerHTML: string;
|
|
6
|
+
querySelector: (selector: string) => HTMLElement | null;
|
|
7
|
+
};
|
|
8
|
+
type EditableTarget = EditableFieldTarget;
|
|
9
|
+
type EditableEvent = {
|
|
10
|
+
key?: string;
|
|
11
|
+
preventDefault: () => void;
|
|
12
|
+
target: EditableTarget;
|
|
13
|
+
};
|
|
14
|
+
/** Событие вставки: target + текст из буфера (синхронно из clipboardData) */
|
|
15
|
+
export type EditableClipboardEvent = {
|
|
16
|
+
preventDefault: () => void;
|
|
17
|
+
target: EditableFieldTarget;
|
|
18
|
+
/** plain text из события paste — без async navigator.clipboard */
|
|
19
|
+
clipboardText: string;
|
|
20
|
+
};
|
|
21
|
+
type BlurLikeEvent = {
|
|
22
|
+
target: HTMLElement;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Вставка уже отфильтрованного текста в позицию каретки и генерация `input`
|
|
26
|
+
* (для полей со своим правилом фильтрации, например Money).
|
|
27
|
+
*/
|
|
28
|
+
export declare function pastePlainTextIntoSelection(text: string, el: HTMLElement): void;
|
|
29
|
+
/**
|
|
30
|
+
* Приводит ClipboardEvent к виду для Paste/PasteOne/PasteDigits
|
|
31
|
+
* (синхронный текст из clipboardData — надёжнее, чем navigator.clipboard.readText).
|
|
32
|
+
*/
|
|
33
|
+
export declare function asEditableClipboard(e: {
|
|
34
|
+
preventDefault: () => void;
|
|
35
|
+
currentTarget: HTMLElement;
|
|
36
|
+
clipboardData?: DataTransfer | null;
|
|
37
|
+
}): EditableClipboardEvent;
|
|
38
|
+
declare const _default: {
|
|
39
|
+
ContentEditable: string;
|
|
40
|
+
KeyDown(e: EditableEvent): void;
|
|
41
|
+
/**
|
|
42
|
+
* Маска / телефон: в буфере оставляем только цифры, затем вставка и input.
|
|
43
|
+
*/
|
|
44
|
+
PasteOne(e: EditableClipboardEvent): void;
|
|
45
|
+
Paste(maxLength: number, e: EditableClipboardEvent): void;
|
|
46
|
+
/**
|
|
47
|
+
* Числовое поле: только цифры (и при необходимости ограничение длины).
|
|
48
|
+
*/
|
|
49
|
+
PasteDigits(maxLength: number, e: EditableClipboardEvent): void;
|
|
50
|
+
Focus(e: {
|
|
51
|
+
target: EditableTarget;
|
|
52
|
+
}): void;
|
|
53
|
+
Blur(e: BlurLikeEvent): void;
|
|
54
|
+
};
|
|
55
|
+
export default _default;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
//#region src/lib/events/onEvent.ts
|
|
2
|
+
var e = (e) => {
|
|
3
|
+
let t = window.getSelection();
|
|
4
|
+
if (!t || t.rangeCount === 0) return;
|
|
5
|
+
let n = t.getRangeAt(0);
|
|
6
|
+
n.deleteContents(), n.insertNode(document.createTextNode(e)), n.collapse(!1), t.removeAllRanges(), t.addRange(n);
|
|
7
|
+
};
|
|
8
|
+
function t(t, n) {
|
|
9
|
+
e(t), n.dispatchEvent(new Event("input", { bubbles: !0 }));
|
|
10
|
+
}
|
|
11
|
+
var n = (e) => {
|
|
12
|
+
let t = window.getSelection();
|
|
13
|
+
if (!t) return;
|
|
14
|
+
let n = document.createRange();
|
|
15
|
+
n.selectNodeContents(e), n.collapse(!1), t.removeAllRanges(), t.addRange(n);
|
|
16
|
+
}, r = (e, t, n) => {
|
|
17
|
+
if (!t) return e;
|
|
18
|
+
let r = window.getSelection(), i = 0;
|
|
19
|
+
if (r && r.rangeCount > 0) {
|
|
20
|
+
let e = r.getRangeAt(0);
|
|
21
|
+
n.contains(e.commonAncestorContainer) && (i = e.toString().length);
|
|
22
|
+
}
|
|
23
|
+
let a = t - ((n.textContent || "").length - i);
|
|
24
|
+
return a <= 0 ? "" : e.slice(0, a);
|
|
25
|
+
};
|
|
26
|
+
function i(e) {
|
|
27
|
+
queueMicrotask(() => {
|
|
28
|
+
e.dispatchEvent(new Event("input", { bubbles: !0 }));
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
var a = {
|
|
32
|
+
KeyDown(e) {
|
|
33
|
+
e.key === "Enter" && e.preventDefault();
|
|
34
|
+
},
|
|
35
|
+
PasteOne(t) {
|
|
36
|
+
t.preventDefault(), e(t.clipboardText.replace(/\D/g, "")), i(t.target);
|
|
37
|
+
},
|
|
38
|
+
Paste(t, n) {
|
|
39
|
+
n.preventDefault();
|
|
40
|
+
let a = r(n.clipboardText, t, n.target);
|
|
41
|
+
a && (e(a.replace(/(\r\n|\n|\r)/gm, " ")), i(n.target));
|
|
42
|
+
},
|
|
43
|
+
PasteDigits(t, n) {
|
|
44
|
+
n.preventDefault();
|
|
45
|
+
let a = r(n.clipboardText.replace(/\D/g, ""), t, n.target);
|
|
46
|
+
a && (e(a), i(n.target));
|
|
47
|
+
},
|
|
48
|
+
Focus(e) {
|
|
49
|
+
(e.target.textContent || "").length || (e.target.innerHTML = "<br>"), n(e.target);
|
|
50
|
+
},
|
|
51
|
+
Blur(e) {
|
|
52
|
+
e.target.scrollLeft = 0, e.target.querySelector("br") !== null && e.target.querySelector("br")?.remove();
|
|
53
|
+
}
|
|
54
|
+
}, o = "plaintext-only";
|
|
55
|
+
function s(e) {
|
|
56
|
+
return {
|
|
57
|
+
preventDefault: () => e.preventDefault(),
|
|
58
|
+
target: e.currentTarget,
|
|
59
|
+
clipboardText: e.clipboardData?.getData("text/plain") ?? ""
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
var c = {
|
|
63
|
+
...a,
|
|
64
|
+
ContentEditable: o
|
|
65
|
+
};
|
|
66
|
+
//#endregion
|
|
67
|
+
export { s as asEditableClipboard, c as default, t as pastePlainTextIntoSelection };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
1
2
|
import { TInput } from './type';
|
|
2
3
|
type TDate = TInput & {
|
|
3
4
|
max?: Date;
|
|
4
5
|
min?: Date;
|
|
5
|
-
icon?: () => JSX.Element;
|
|
6
|
+
icon?: () => React.JSX.Element;
|
|
6
7
|
};
|
|
7
8
|
/**
|
|
8
9
|
* DateField component
|
|
@@ -14,5 +15,8 @@ type TDate = TInput & {
|
|
|
14
15
|
* @param {string} [className] - css class
|
|
15
16
|
* @param {string} [placeholder] - placeholder
|
|
16
17
|
*/
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
declare function DateField({ title, label, error, edit, active, className, placeholder, max, min, onValue, form, icon, name, value, after, disabled, }: TDate): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare namespace DateField {
|
|
20
|
+
var displayName: string;
|
|
21
|
+
}
|
|
22
|
+
export default DateField;
|