@elcrm/form 0.1.1 → 0.1.3
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 +162 -203
- package/dist/assets/styles/Check.module.css +1 -0
- package/dist/assets/styles/Code.module.css +1 -0
- package/dist/assets/styles/Color.module.css +1 -1
- package/dist/assets/styles/Drag.module.css +1 -0
- package/dist/assets/styles/Field.module.css +1 -1
- package/dist/assets/styles/FieldGroup.module.css +1 -0
- package/dist/assets/styles/File.module.css +1 -0
- package/dist/assets/styles/Form.module.css +1 -1
- package/dist/assets/styles/Radio.module.css +1 -0
- package/dist/assets/styles/Rating.module.css +1 -0
- package/dist/assets/styles/Rich.module.css +1 -0
- package/dist/assets/styles/Select.module.css +1 -1
- package/dist/assets/styles/Tabs.module.css +1 -0
- package/dist/assets/styles/Tags.module.css +1 -0
- package/dist/assets/styles/Time.module.css +1 -0
- package/dist/core/Field.d.ts +26 -10
- package/dist/core/Field.js +2 -2
- package/dist/dark.css +38 -11
- package/dist/fields/Card.d.ts +12 -0
- package/dist/fields/Card.js +1 -0
- package/dist/fields/Check.d.ts +6 -2
- package/dist/fields/Check.js +1 -1
- package/dist/fields/Code.d.ts +13 -4
- package/dist/fields/Code.js +1 -1
- package/dist/fields/Color.d.ts +8 -13
- package/dist/fields/Color.js +1 -1
- package/dist/fields/ColorPanel.d.ts +16 -0
- package/dist/fields/ColorPanel.js +1 -0
- package/dist/fields/Date.d.ts +3 -1
- package/dist/fields/Date.js +1 -1
- package/dist/fields/DateCalendar.d.ts +16 -0
- package/dist/fields/DateCalendar.js +1 -0
- package/dist/fields/Display.d.ts +8 -5
- package/dist/fields/Display.js +2 -1
- package/dist/fields/DragDrop.d.ts +13 -3
- package/dist/fields/DragDrop.js +1 -1
- package/dist/fields/Email.d.ts +6 -3
- package/dist/fields/Email.js +1 -1
- package/dist/fields/FieldGroup.d.ts +107 -0
- package/dist/fields/FieldGroup.js +1 -0
- package/dist/fields/File.js +1 -1
- package/dist/fields/Hidden.js +1 -1
- package/dist/fields/Input.js +1 -1
- package/dist/fields/Mask.d.ts +2 -1
- package/dist/fields/Mask.js +1 -1
- package/dist/fields/Modal.js +1 -1
- package/dist/fields/Money.d.ts +2 -1
- package/dist/fields/Money.js +1 -1
- package/dist/fields/NativeTextField.js +1 -1
- package/dist/fields/Numeric.d.ts +2 -1
- package/dist/fields/Numeric.js +1 -1
- package/dist/fields/Options.js +1 -1
- package/dist/fields/Password.js +1 -1
- package/dist/fields/Percent.js +1 -1
- package/dist/fields/Phone.js +1 -1
- package/dist/fields/Radio.d.ts +3 -1
- package/dist/fields/Radio.js +1 -1
- package/dist/fields/Range.d.ts +9 -6
- package/dist/fields/Range.js +1 -1
- package/dist/fields/Rating.js +1 -1
- package/dist/fields/RichText.js +1 -1
- package/dist/fields/Select.js +1 -1
- package/dist/fields/Tabs.d.ts +30 -0
- package/dist/fields/Tabs.js +1 -0
- package/dist/fields/Tags.js +1 -1
- package/dist/fields/Textarea.js +1 -1
- package/dist/fields/Time.js +1 -1
- package/dist/fields/TimePicker.d.ts +15 -0
- package/dist/fields/TimePicker.js +1 -0
- package/dist/fields/cardUtils.d.ts +37 -0
- package/dist/fields/cardUtils.js +1 -0
- package/dist/fields/colorUtils.d.ts +29 -0
- package/dist/fields/colorUtils.js +1 -0
- package/dist/fields/dateUtils.d.ts +32 -0
- package/dist/fields/dateUtils.js +1 -0
- package/dist/fields/emailUtils.d.ts +4 -0
- package/dist/fields/emailUtils.js +1 -0
- package/dist/fields/timeUtils.d.ts +23 -0
- package/dist/fields/timeUtils.js +1 -0
- package/dist/fields/type.d.ts +4 -3
- package/dist/hooks/use.d.ts +12 -7
- package/dist/index.d.ts +19 -9
- package/dist/index.js +2 -2
- package/dist/index.umd.js +3 -2
- package/dist/light.css +39 -12
- package/dist/package.js +1 -1
- package/dist/style.css +26 -4
- package/dist/styles/Check.module.js +1 -0
- package/dist/styles/Code.module.js +1 -0
- package/dist/styles/Color.module.js +1 -1
- package/dist/styles/Drag.module.js +1 -0
- package/dist/styles/Field.module.js +1 -1
- package/dist/styles/FieldGroup.module.js +1 -0
- package/dist/styles/File.module.js +1 -0
- package/dist/styles/Form.module.js +1 -1
- package/dist/styles/Radio.module.js +1 -0
- package/dist/styles/Rating.module.js +1 -0
- package/dist/styles/Rich.module.js +1 -0
- package/dist/styles/Select.module.js +1 -1
- package/dist/styles/Tabs.module.js +1 -0
- package/dist/styles/Tags.module.js +1 -0
- package/dist/styles/Time.module.js +1 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# `@elcrm/form`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Поля формы для elCRM + хук `useForm`: одно поле обновляется само, без лишних перерисовок всей формы.
|
|
4
4
|
|
|
5
|
-
[npm
|
|
6
|
-
[license](https://www.npmjs.com/package/@elcrm/form)
|
|
5
|
+
[npm](https://www.npmjs.com/package/@elcrm/form) · подробные примеры по каждому полю — [Template.md](./Template.md)
|
|
7
6
|
|
|
8
7
|
## Установка
|
|
9
8
|
|
|
@@ -13,241 +12,201 @@ npm install @elcrm/form
|
|
|
13
12
|
bun add @elcrm/form
|
|
14
13
|
```
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
Нужны `react` и `react-dom` ≥ 18.
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
После обновления пакета в приложении:
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
```bash
|
|
20
|
+
elcrm update --fix --test
|
|
21
|
+
```
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
- **Опционально** можно по-прежнему подключить `@elcrm/form/style.css` вручную (тот же текст, что во встраивании) — например для SSR без клиентского JS.
|
|
24
|
-
- **Темы** (светлая / тёмная): `@elcrm/form/light.css`, `@elcrm/form/dark.css` — атрибут `data-theme` на контейнере (подключаются вручную). Для порталов (`document.body`) задайте `data-theme` на `<html>` или оберните приложение так, чтобы всплывающие списки и календарь наследовали переменные темы.
|
|
23
|
+
Это подтянет `@elcrm/*`, переименует устаревшие поля (`ProgressField` → `RangeField` и т.д.) и прогонит проверки.
|
|
25
24
|
|
|
26
|
-
|
|
25
|
+
В теме приложения: `--popup-shadow` (тени селекта / календаря / цвета) и `--field-padding` / `--field-padding-block` / `--field-padding-inline` (отступ капсулы). Старые `--field-note-padding*` / `--control-inner-padding` подхватит тот же `elcrm update --fix`.
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
import { useForm, StringField, PasswordField } from "@elcrm/form";
|
|
30
|
-
import "@elcrm/form/light.css";
|
|
27
|
+
## Подключение
|
|
31
28
|
|
|
32
|
-
|
|
33
|
-
const form = useForm({ login: "", password: "" });
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<>
|
|
37
|
-
<StringField
|
|
38
|
-
name="login"
|
|
39
|
-
form={form}
|
|
40
|
-
label="Логин"
|
|
41
|
-
native
|
|
42
|
-
autoComplete="username"
|
|
43
|
-
/>
|
|
44
|
-
<PasswordField name="password" form={form} label="Пароль" />
|
|
45
|
-
</>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### `Form.Init` (опционально)
|
|
51
|
-
|
|
52
|
-
Нужен, если используются **уведомления** (например, копирование телефона в буфер) или **свои модалки** для **ModalField** / **OptionsField** (`modal="module.name"`). Рендерит `null`, дочерние элементы не оборачивает.
|
|
29
|
+
Стили полей подхватываются сами при импорте компонентов. Темы подключаете вручную:
|
|
53
30
|
|
|
54
31
|
```tsx
|
|
55
|
-
import {
|
|
56
|
-
|
|
57
|
-
function Example() {
|
|
58
|
-
const form = useForm({ phone: "" });
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<>
|
|
62
|
-
<Form.Init
|
|
63
|
-
onNotice={(message) => {
|
|
64
|
-
/* тост / snackbar */
|
|
65
|
-
}}
|
|
66
|
-
onModal={({
|
|
67
|
-
module,
|
|
68
|
-
modalName,
|
|
69
|
-
fieldName,
|
|
70
|
-
value,
|
|
71
|
-
callback,
|
|
72
|
-
options,
|
|
73
|
-
}) => {
|
|
74
|
-
/* открыть модалку и передать результат в callback(...) */
|
|
75
|
-
}}
|
|
76
|
-
/>
|
|
77
|
-
<PhoneField name="phone" form={form} label="Телефон" />
|
|
78
|
-
</>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
32
|
+
import { useForm, StringField } from "@elcrm/form";
|
|
33
|
+
import "@elcrm/form/light.css"; // или dark.css
|
|
81
34
|
```
|
|
82
35
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
## Хук `useForm`
|
|
86
|
-
|
|
87
|
-
- `useForm(initialValues?)` возвращает API управления формой (`UseFormApi`).
|
|
36
|
+
На контейнере или на `<html>` задайте `data-theme="light"` | `"dark"` — от этого зависят цвета полей и всплывающих списков (селект, календарь, цвет).
|
|
88
37
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
`useForm(initialValues?)` возвращает стабильный объект со следующими возможностями:
|
|
94
|
-
|
|
95
|
-
- `getValue(name, fallback?)` — получить текущее значение поля.
|
|
96
|
-
- `getValues()` — получить **копию** всех значений (чтобы снаружи не мутировать store по ссылке).
|
|
97
|
-
- `getVersion(name)` — получить версию поля (увеличивается при уведомлениях).
|
|
98
|
-
- `subscribe(name, listener)` — подписаться на изменения конкретного поля; возвращает `unsubscribe()`.
|
|
99
|
-
|
|
100
|
-
### Изменение значений
|
|
101
|
-
|
|
102
|
-
- `onValue({ name, value })` — записывает значение **без уведомлений** (без bump `version`).
|
|
103
|
-
- `setValue({ name, value })` — записывает значение **и всегда уведомляет** подписчиков этого поля (в т.ч. если значение то же самое).
|
|
104
|
-
- `setValues(nextValues)` — массовая запись: обновляет значения и уведомляет **только поля, у которых значение изменилось** по `Object.is`.
|
|
105
|
-
- `reset(nextValues?)` — сброс значений.
|
|
106
|
-
- Если `nextValues` не передан, используются `initialValues` из `useForm(initialValues)`.
|
|
107
|
-
- Уведомления идут **только если значение изменилось** по `Object.is` (важно для `Date`, массивов и объектов).
|
|
108
|
-
|
|
109
|
-
### Важные нюансы (частые ошибки)
|
|
110
|
-
|
|
111
|
-
1. `setValues/reset` используют сравнение `Object.is(was, now)` — для ссылочных типов (`Date`/массив/объект) нужно передавать **новую ссылку**, иначе уведомление может не произойти.
|
|
112
|
-
2. Если нужно “перерисовать даже при том же значении”, используйте `setValue`, потому что он принудительно делает bump `version`.
|
|
113
|
-
|
|
114
|
-
Небольшой пример:
|
|
115
|
-
|
|
116
|
-
```ts
|
|
117
|
-
const form = useForm({ date: new Date(0) });
|
|
118
|
-
|
|
119
|
-
// перерисовать поля можно принудительно:
|
|
120
|
-
form.setValue({ name: "date", value: form.getValue("date") });
|
|
121
|
-
|
|
122
|
-
// или при reset для Date/объектов важно создать новую ссылку:
|
|
123
|
-
form.reset({ date: new Date(0) });
|
|
38
|
+
```tsx
|
|
39
|
+
<div data-theme="light">
|
|
40
|
+
{/* форма */}
|
|
41
|
+
</div>
|
|
124
42
|
```
|
|
125
43
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
Подробнее о API — в исходниках `hooks/use.ts`.
|
|
129
|
-
|
|
130
|
-
## Общие пропы (`TInput`)
|
|
131
|
-
|
|
132
|
-
База: `TFieldFormBindings` (связь с формой) + `TFieldPresentation` (оформление).
|
|
133
|
-
|
|
134
|
-
| Проп | Описание |
|
|
135
|
-
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
136
|
-
| `name`, `form`, `value`, `onValue`, `onBlur` | Связь с формой; `onBlur` — «коммит» после ухода фокуса, аргумент `{ value, name }`, не нативный `FocusEvent`. |
|
|
137
|
-
| `label`, `placeholder`, `error`, `className`, `id` | Подпись, плейсхолдер, текст ошибки, класс блока, id. |
|
|
138
|
-
| `disabled` | Только просмотр / без ввода. |
|
|
139
|
-
| `hidden` | При `true` поле **не рендерится, только если значение пустое**; при непустом — **показывается**. |
|
|
140
|
-
| `before`, `after` | Узлы до/после области ввода (например иконки). |
|
|
141
|
-
| `native` | Только `StringField`: нативный `<input>` вместо **contentEditable** — для **автозаполнения** логина/почты; сочетать с `autoComplete`, `inputType`. |
|
|
142
|
-
| `autoComplete`, `inputType` | Атрибуты нативного поля при `native` (например `username`, `email`). |
|
|
143
|
-
| `inputmode`, `spellCheck`, `maxLength` | Подсказки ввода (в т.ч. мобильная клавиатура), орфография, лимит длины — по смыслу каждого компонента. |
|
|
144
|
-
|
|
145
|
-
У `PasswordField` свой тип `TPasswordField`: проп `native` там означает **«не рендерить компонент»** (внешний нативный пароль), не путать с `native` у `StringField`.
|
|
146
|
-
|
|
147
|
-
`before` / `after` рендерятся единообразно во всех полях через общий стиль-обёртку `affix` (одинаковое выравнивание и отступы слева/справа).
|
|
44
|
+
## Быстрый старт
|
|
148
45
|
|
|
149
|
-
|
|
46
|
+
```tsx
|
|
47
|
+
import { useForm, StringField, PasswordField } from "@elcrm/form";
|
|
48
|
+
import "@elcrm/form/light.css";
|
|
150
49
|
|
|
151
|
-
|
|
152
|
-
|
|
50
|
+
function LoginForm() {
|
|
51
|
+
const form = useForm({ login: "", password: "" });
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div data-theme="light">
|
|
55
|
+
<StringField
|
|
56
|
+
name="login"
|
|
57
|
+
form={form}
|
|
58
|
+
label="Логин"
|
|
59
|
+
native
|
|
60
|
+
autoComplete="username"
|
|
61
|
+
/>
|
|
62
|
+
<PasswordField name="password" form={form} label="Пароль" />
|
|
63
|
+
<button type="button" onClick={() => console.log(form.getValues())}>
|
|
64
|
+
Сохранить
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
153
70
|
|
|
154
|
-
|
|
71
|
+
## `useForm`
|
|
155
72
|
|
|
156
|
-
|
|
157
|
-
- `placeholder` используется как текст подписи внутри поля (рядом с квадратом чекбокса).
|
|
158
|
-
- Поддерживает `form + name`, `onValue`, `onBlur`, `disabled`, `hidden`, `before`, `after`.
|
|
159
|
-
- Клавиатура: `Space` / `Enter` переключают состояние.
|
|
73
|
+
Хранит значения и уведомляет **только** поле с изменившимся `name`.
|
|
160
74
|
|
|
161
|
-
|
|
75
|
+
```tsx
|
|
76
|
+
type Values = { login: string; role: number };
|
|
77
|
+
const form = useForm<Values>({ login: "", role: 0 });
|
|
78
|
+
|
|
79
|
+
form.getValue("login");
|
|
80
|
+
form.getValues(); // копия объекта
|
|
81
|
+
form.onValue({ name: "login", value: "a" }); // записать без перерисовки
|
|
82
|
+
form.setValue({ name: "login", value: "a" }); // записать и обновить поле
|
|
83
|
+
form.setValues({ login: "b", role: 1 });
|
|
84
|
+
form.reset(); // к initialValues
|
|
85
|
+
form.subscribe("login", () => { /* … */ }); // → unsubscribe()
|
|
86
|
+
```
|
|
162
87
|
|
|
163
|
-
|
|
88
|
+
| Метод | Когда |
|
|
89
|
+
| ----- | ----- |
|
|
90
|
+
| `onValue` | Ввод по символам (без bump) |
|
|
91
|
+
| `setValue` | Выбор / blur / нужно обновить UI |
|
|
92
|
+
| `setValues` / `reset` | Массово; для `Date`/массивов — **новая ссылка** |
|
|
93
|
+
|
|
94
|
+
## Общие пропы полей
|
|
95
|
+
|
|
96
|
+
Почти у всех компонентов (`TInput`):
|
|
97
|
+
|
|
98
|
+
| Проп | Назначение |
|
|
99
|
+
| ---- | ---------- |
|
|
100
|
+
| `name` + `form` | Связь с `useForm` |
|
|
101
|
+
| `value` / `onValue` / `onBlur` | Controlled или колбэки; `onBlur` → `{ value, name }`, не `FocusEvent` |
|
|
102
|
+
| `label`, `placeholder`, `error` | Подпись, плейсхолдер, ошибка |
|
|
103
|
+
| `disabled`, `size` | `"s"` \| `"m"` \| `"l"` |
|
|
104
|
+
| `before` / `after` | Аффиксы (иконки, «₽») |
|
|
105
|
+
| `hidden` | **Не** CSS-hide: не рендерится только если значение **пустое** |
|
|
106
|
+
|
|
107
|
+
## Что есть в пакете
|
|
108
|
+
|
|
109
|
+
### Текст и ввод
|
|
110
|
+
|
|
111
|
+
| Компонент | В `form` | Как пользоваться |
|
|
112
|
+
| --------- | -------- | ---------------- |
|
|
113
|
+
| `StringField` | `string` | По умолчанию contentEditable; для логина/почты — `native` + `autoComplete` |
|
|
114
|
+
| `PasswordField` | `string` | Глаз показать/скрыть; `native` здесь = **не рендерить** поле |
|
|
115
|
+
| `TextareaField` | `string` | Многострочный текст |
|
|
116
|
+
| `EmailField` | `string` | Проверка формата на blur (`validate`) |
|
|
117
|
+
| `UrlField` | `string` | `type="url"` |
|
|
118
|
+
| `PhoneField` | digits | Маска страны; тосты — через `Form.Init` |
|
|
119
|
+
| `MaskField` | digits | `format="___-___-___ __"` (`_` = слот) |
|
|
120
|
+
| `NumberField` | **строка** `"42"` | `max` = лимит **символов**, не максимум числа |
|
|
121
|
+
| `PercentField` | `number` | Clamp `min`/`max`, аффикс `%`, `decimals` |
|
|
122
|
+
| `MoneyField` | `number` × `course` | В UI рубли, в form — минорные единицы |
|
|
123
|
+
| `CardField` | digits | Группы 4×4, Luhn, бренд |
|
|
124
|
+
|
|
125
|
+
### Дата, время, выбор
|
|
126
|
+
|
|
127
|
+
| Компонент | В `form` | Как пользоваться |
|
|
128
|
+
| --------- | -------- | ---------------- |
|
|
129
|
+
| `DateField` | `YYYY-MM-DD` \| `""` | Календарь; пустое ≠ «сегодня» |
|
|
130
|
+
| `TimeField` | `HH:mm` \| `""` | `picker`, `presets`, `step` |
|
|
131
|
+
| `SelectField` | `number` (id) | `options={{ 1: { n: "Админ", s: 1 } }}` — `s: 0` скрывает |
|
|
132
|
+
| `RadioField` | id | `options` + `inline` |
|
|
133
|
+
| `TabsField` | id | Сегменты; `equal` — равная ширина |
|
|
134
|
+
| `CheckField` | `boolean` | `placeholder` — текст рядом с квадратом; `variant="field"|"plain"` |
|
|
135
|
+
| `OptionsField` / `ModalField` | зависит от `outFormat` | Выбор в модалке приложения — нужен `Form.Init` |
|
|
164
136
|
|
|
165
|
-
|
|
166
|
-
import { DateField, useForm } from "@elcrm/form";
|
|
167
|
-
```
|
|
137
|
+
### Прочее
|
|
168
138
|
|
|
169
|
-
|
|
139
|
+
| Компонент | В `form` | Как пользоваться |
|
|
140
|
+
| --------- | -------- | ---------------- |
|
|
141
|
+
| `RangeField` | `number` | `variant="bar"|"line"`, `min`/`max`/`step` |
|
|
142
|
+
| `TagsField` | `string[]` | Чипы; `maxTags`, `separators` |
|
|
143
|
+
| `RatingField` | `number` | `max`, `allowClear` |
|
|
144
|
+
| `CodeField` | `string` | OTP-ячейки; крупно — `cellSize={80}` |
|
|
145
|
+
| `ColorField` | hex | Пикер; `colors`, `alpha`, `inlinePalette` (пресеты в поле) |
|
|
146
|
+
| `FileField` / `DragDropField` | `File` / мета | `accept`, `multiple`, `maxSize` |
|
|
147
|
+
| `RichTextField` | HTML-строка | `toolbar`; санитизация — на стороне приложения |
|
|
148
|
+
| `HiddenField` | любое | Без UI |
|
|
149
|
+
| `DisplayField` | любое | Только показ; `format`, `emptyText` |
|
|
150
|
+
| `FieldGroup` | через `form` | Несколько полей одним `items={[…]}` |
|
|
151
|
+
|
|
152
|
+
Алиасы вроде `ProgressField` / `OtpField` **удалены**. После обновления:
|
|
170
153
|
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
|
|
154
|
+
```bash
|
|
155
|
+
elcrm update --fix --test
|
|
156
|
+
# или только код:
|
|
157
|
+
elcrm migrate form-aliases
|
|
174
158
|
```
|
|
175
159
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
Объектные пропы (`options` у селекта и т.д.) не пересоздавайте на каждый рендер — вынесите в константы модуля.
|
|
179
|
-
|
|
180
|
-
## Экспорт компонентов (корень пакета)
|
|
181
|
-
|
|
182
|
-
### Поля
|
|
183
|
-
|
|
184
|
-
| Компонент | Примечание |
|
|
185
|
-
| ----------------------------- | ------------------------------------------------------------ |
|
|
186
|
-
| `StringField` | текст; `native` → `<input>` для автозаполнения |
|
|
187
|
-
| `PasswordField` | пароль; свой `native` = «не рендерить» (не путать со String) |
|
|
188
|
-
| `TextareaField` | многострочный CE |
|
|
189
|
-
| `NumberField` | **строка цифр** в форме; `max` = лимит **символов** |
|
|
190
|
-
| `PercentField` | `number` + clamp `min`/`max` (0–100) + аффикс `%` |
|
|
191
|
-
| `MoneyField` | деньги |
|
|
192
|
-
| `MaskField` | маска ввода |
|
|
193
|
-
| `PhoneField` | телефон; полный каталог масок — lazy при фокусе |
|
|
194
|
-
| `EmailField` | `type=email` |
|
|
195
|
-
| `UrlField` | `type=url` |
|
|
196
|
-
| `DateField` | дата + календарь |
|
|
197
|
-
| `TimeField` | время; опционально `picker` / `presets` |
|
|
198
|
-
| `SelectField` | список |
|
|
199
|
-
| `OptionsField` / `ModalField` | выбор через модалку (`Form.Init`) |
|
|
200
|
-
| `RangeField` | диапазон / прогресс |
|
|
201
|
-
| `CheckField` | чекбокс (`size`, `variant`, `showFocusRing`) |
|
|
202
|
-
| `RadioField` | радиогруппа |
|
|
203
|
-
| `TagsField` | чипы `string[]` |
|
|
204
|
-
| `RatingField` | оценка 0…max |
|
|
205
|
-
| `CodeField` | OTP / код по ячейкам |
|
|
206
|
-
| `FileField` | файлы |
|
|
207
|
-
| `DragDropField` | DnD-зона файлов |
|
|
208
|
-
| `RichTextField` | HTML (execCommand; санитизация — на стороне приложения) |
|
|
209
|
-
| `ColorField` | пикер цвета |
|
|
210
|
-
| `HiddenField` | без UI |
|
|
211
|
-
| `DisplayField` | только чтение |
|
|
212
|
-
|
|
213
|
-
### Deprecated / алиасы (лучше каноническое имя)
|
|
214
|
-
|
|
215
|
-
| Устарело / алиас | Использовать |
|
|
216
|
-
| ----------------- | --------------- |
|
|
217
|
-
| `ProgressField` | `RangeField` |
|
|
218
|
-
| `TProgress` | `TRange` |
|
|
219
|
-
| `ReadonlyField` | `DisplayField` |
|
|
220
|
-
| `OtpField` | `CodeField` |
|
|
221
|
-
| `DragonDropField` | `DragDropField` |
|
|
160
|
+
## `FieldGroup`
|
|
222
161
|
|
|
223
|
-
|
|
162
|
+
Общие `form` / `disabled` / `size` у родителя; у каждого item — `field` + `name` + свои пропы:
|
|
224
163
|
|
|
225
|
-
|
|
164
|
+
```tsx
|
|
165
|
+
<FieldGroup
|
|
166
|
+
form={form}
|
|
167
|
+
gap={12}
|
|
168
|
+
items={[
|
|
169
|
+
{ field: "string", name: "login", label: "Логин", native: true },
|
|
170
|
+
{ field: "email", name: "email", label: "Email" },
|
|
171
|
+
{ field: "select", name: "role", label: "Роль", options: ROLES },
|
|
172
|
+
]}
|
|
173
|
+
/>
|
|
174
|
+
```
|
|
226
175
|
|
|
227
|
-
|
|
176
|
+
`field`: `string` | `password` | `email` | `number` | `select` | `card` | `color` | … — полный список в типе `FieldGroupFieldKind`.
|
|
228
177
|
|
|
229
|
-
|
|
178
|
+
## `Form.Init`
|
|
230
179
|
|
|
231
|
-
|
|
232
|
-
| ------- | ------------- | ------------------------ |
|
|
233
|
-
| В форме | строка `"42"` | число `42` |
|
|
234
|
-
| `max` | длина строки | верхняя граница значения |
|
|
235
|
-
| Дроби | нет | `decimals` |
|
|
236
|
-
| На blur | trim цифр | clamp в `min`…`max` |
|
|
180
|
+
Нужен для тостов (копирование телефона) и модалок `OptionsField` / `ModalField`. Рендерит `null`.
|
|
237
181
|
|
|
238
|
-
|
|
182
|
+
```tsx
|
|
183
|
+
<>
|
|
184
|
+
<Form.Init
|
|
185
|
+
onNotice={(message) => { /* тост */ }}
|
|
186
|
+
onModal={({ module, modalName, value, callback }) => {
|
|
187
|
+
/* открыть UI → callback(result) */
|
|
188
|
+
}}
|
|
189
|
+
/>
|
|
190
|
+
<PhoneField name="phone" form={form} label="Телефон" />
|
|
191
|
+
</>
|
|
192
|
+
```
|
|
239
193
|
|
|
240
|
-
|
|
194
|
+
Без `Form.Init` эти колбэки — no-op.
|
|
241
195
|
|
|
242
|
-
|
|
243
|
-
import { ColorField, useForm } from "@elcrm/form";
|
|
196
|
+
## Частые ошибки
|
|
244
197
|
|
|
245
|
-
|
|
198
|
+
| Ловушка | Как правильно |
|
|
199
|
+
| ------- | ------------- |
|
|
200
|
+
| `hidden` | Не CSS-hide: скрывает поле только при **пустом** значении |
|
|
201
|
+
| `StringField` vs `PasswordField` `native` | У String — нативный input; у Password — «не рендерить» |
|
|
202
|
+
| Select `options` | `{ n, s }`, не `{ value, label }` |
|
|
203
|
+
| Number vs Percent | Number → строка цифр; Percent → число + clamp |
|
|
204
|
+
| `onBlur` | `{ value, name }`, не DOM-событие |
|
|
205
|
+
| `options` / объекты в пропах | Вынести в константу модуля — не создавать на каждый рендер |
|
|
246
206
|
|
|
247
|
-
|
|
248
|
-
```
|
|
207
|
+
## Примеры
|
|
249
208
|
|
|
250
|
-
|
|
209
|
+
Полный каталог сниппетов по каждому полю: **[Template.md](./Template.md)**.
|
|
251
210
|
|
|
252
211
|
## Лицензия
|
|
253
212
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fkr>div{align-items:center;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fkr[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}.fkr[data-variant=plain]:hover,.fkr[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.fkr[data-variant=plain]>div{align-items:flex-start}.fkr[data-size=sm]>div,.fkr[data-size=s]>div{align-items:center;min-height:0}.fkp{width:100%;min-width:0}.fkc{width:100%;min-height:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:12px;margin:0;padding:0;display:flex}.fkc[data-align=top]{align-items:flex-start}.fkc[data-align=bottom]{align-items:flex-end}.fkc[data-align=center]{align-items:center}.fkc[data-align=top] .fkb{margin-top:calc((1.25em - var(--field-check-size)) / 2)}.fkc[data-align=bottom] .fkb{margin-bottom:calc((1.25em - var(--field-check-size)) / 2)}.fkc:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:calc(var(--field-radius) - 2px)}.fkc[data-focus-ring=false]:focus-visible{box-shadow:none}.fkc[aria-disabled=true]{cursor:not-allowed}.fkc[data-size=sm],.fkc[data-size=s]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:0}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkb{border-radius:5px;width:18px;height:18px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkm{width:9px;height:5px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkt{padding-top:0;font-size:13px;line-height:1.2}.fkc[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]),.fkc[data-size=s][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus)}.fkb{width:var(--field-check-size);height:var(--field-check-size);border:var(--field-check-box-border);background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}.fkm{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}.fkt{min-width:0;color:inherit;font-size:var(--control-font-size);flex:auto;padding-top:0;line-height:1.25}.fkc[aria-checked=true] .fkb{background:var(--field-background-active)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fds{width:.75em;color:var(--field-placeholder);font-size:max(var(--control-font-size), calc(var(--field-code-size) * .35));line-height:var(--field-code-size);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;flex:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@layer elcrm-form{.fco{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fcp{z-index:var(--elcrm-z-popover-front);box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background);color:var(--select-color);border-radius:var(--color-picker-radius);box-shadow:var(--popup-shadow);flex-direction:column;gap:8px;display:flex;position:fixed}.fcv{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}.fcw{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.fcb{background:linear-gradient(#0000,#000);position:absolute;inset:0}.fch{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}.fcr{align-items:center;gap:8px;display:flex}.fce{border-radius:var(--color-picker-input-radius);background:var(--field-background);width:26px;height:26px;color:var(--field-icon-color);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.fce:hover{color:var(--field-color)}.fcs{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.fcl{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}.fcu{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.fca{background-image:linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}.fcd{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}.fci{align-items:center;gap:6px;display:flex}.fcf{color:var(--field-placeholder);flex:none;padding:0 2px;font-size:12px}.fcn{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background);min-width:0;height:28px;color:var(--field-color);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}.fcn:focus{box-shadow:0 0 0 2px var(--field-focus-ring)}.fcx{text-align:center;flex:0 0 56px}.fcy{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}.fcz{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}.fcz[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background), 0 0 0 3px #ffffff59;transform:scale(1.35)}.fcz:disabled{cursor:not-allowed;opacity:.5}.fct{cursor:pointer;align-items:center;gap:var(--field-icon-gap);flex:1;min-width:0;height:auto;min-height:0;display:flex}.fct[aria-disabled=true]{cursor:not-allowed}.fcq{overflow:hidden}.fcq>div{min-width:0}.fcc{background-color:var(--preview-color);background-image:linear-gradient(var(--preview-color), var(--preview-color)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}.fcg{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size);font-variant-numeric:tabular-nums;flex:1;overflow:hidden}.fct:has(+.fcj){flex:none;margin-left:-1px;padding-left:3px}.fct:has(+.fcj) .fcg{flex:none;width:9ch;min-width:9ch;max-width:9ch}.fcm{color:var(--field-placeholder);font-weight:400}.fcj{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;flex:1;align-items:center;gap:4px;min-width:0;max-width:100%;margin-left:0;padding:0 2px;display:flex;overflow:auto hidden}.fcj::-webkit-scrollbar{width:0;height:0;display:none}.fck{cursor:pointer;background:var(--swatch);transform-origin:50%;border:none;border-radius:50%;flex:none;width:18px;min-width:18px;height:18px;padding:0;transition:box-shadow .12s;box-shadow:inset 0 0 0 1px #0000001f}.fck[data-exit=true]{pointer-events:none;animation:.22s ease-in forwards fcq0}.fck:disabled{cursor:not-allowed;opacity:.5}@keyframes fcq0{0%{opacity:1;width:18px;min-width:18px;transform:scale(1)}55%{opacity:.7;transform:scale(.55)}to{opacity:0;width:0;min-width:0;box-shadow:none;margin:0;transform:scale(0)}}.fcc[data-enter=true]{animation:.28s cubic-bezier(.22,1,.36,1) fcq1}@keyframes fcq1{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fxr{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}.fxr>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}.fxr[data-dragging=true]{background:0 0!important}.fxi{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}.fxi[data-layout=fill],.fxi[data-layout=overlay]{gap:0;height:100%;min-height:0}.fxr[data-layout=fill],.fxr[data-layout=overlay]{width:100%;height:100%}:is(.fxr[data-layout=fill],.fxr[data-layout=overlay])>div{flex-direction:column;align-items:stretch;height:100%;min-height:0;display:flex}.fxz{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height);padding:var(--field-padding);border:var(--field-drag-border);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}.fxz:hover:not(:disabled){border-color:var(--field-drag-border-hover);background:var(--field-background-focus)}.fxz[data-dragging=true]{border-color:var(--field-range-fill);background:color-mix(in srgb, var(--field-range-fill) 10%, transparent);border-style:solid}.fxz:focus-visible{box-shadow:var(--field-focus-shadow)}.fxz:disabled{cursor:not-allowed;opacity:.65}.fxz[data-layout=fill],.fxz[data-layout=overlay]{flex:auto;height:100%;min-height:100%}.fxz[data-layout=overlay]{padding:var(--field-padding);background:0 0;justify-content:flex-end}.fxz[data-layout=overlay]:hover:not(:disabled){background:var(--field-background-focus)}.fxh{font-size:var(--control-font-size);color:inherit;line-height:1.35}.fxa{font-size:var(--field-error-size);color:var(--field-placeholder);letter-spacing:.01em}.fxl{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.fxt{min-width:0;padding:var(--field-padding);background:var(--field-background-focus);border-radius:10px;align-items:center;gap:10px;display:flex}.fxm{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.fxn{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size);color:inherit;line-height:1.3;overflow:hidden}.fxs{font-size:var(--field-error-size);color:var(--field-placeholder);line-height:1.2}.fxd{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}.fxd:hover{color:var(--field-error-color);background:color-mix(in srgb, var(--field-error-color) 10%, transparent)}.fxc{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size);cursor:pointer;padding:var(--field-padding-block) 0;background:0 0;border:0;align-self:flex-start;margin-top:2px}.fxc:hover{color:var(--field-error-color)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._l_2ps0c_4{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_2ps0c_4[data-size=sm]{--field-height:32px;--control-height:32px;--field-side-padding:10px;--control-side-padding:10px;--control-inner-padding:0 10px;font-size:13px}._l_2ps0c_4>._t_2ps0c_22,._l_2ps0c_4>._f_2ps0c_22,._l_2ps0c_4>._m_2ps0c_22{margin:0}._l_2ps0c_4[data-field=group] ._f_2ps0c_22>div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_2ps0c_4[data-field=group] ._f_2ps0c_22>div:last-child{border-bottom:0}._l_2ps0c_4 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}._l_2ps0c_4 [placeholder]:focus:before{display:none}._f_2ps0c_22{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:var(--control-inner-padding,0 var(--field-side-padding,14px));transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_2ps0c_22:hover{border-color:var(--field-border-hover,var(--field-border))}._f_2ps0c_22:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));background:var(--field-background-focus,var(--field-background))}._f_2ps0c_22._e_2ps0c_78:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_2ps0c_22[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_2ps0c_22[data-disabled=true]>*{cursor:not-allowed}._f_2ps0c_22>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}._f_2ps0c_22>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_2ps0c_22>:not(div){box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}._f_2ps0c_22>:not(div) svg{width:var(--field-icon-size,20px);height:var(--field-icon-size,20px);flex-shrink:0;display:block}._f_2ps0c_22 input::placeholder,._f_2ps0c_22 textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}._f_2ps0c_22 [contenteditable=true],._f_2ps0c_22 [contenteditable=plaintext-only],._f_2ps0c_22>div{scrollbar-width:none;-ms-overflow-style:none}._f_2ps0c_22 [contenteditable=true]::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._f_2ps0c_22 [contenteditable=plaintext-only]::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._f_2ps0c_22>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._n_2ps0c_199>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));scrollbar-width:none;-ms-overflow-style:none;overflow:hidden auto}._n_2ps0c_199>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._w_2ps0c_216>div{box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;overflow:auto hidden}._w_2ps0c_216>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._w_2ps0c_216>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}._time_2ps0c_243>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_2ps0c_243 ._timeInner_2ps0c_250{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_2ps0c_243._timeAlignCenter_2ps0c_261 ._timeInner_2ps0c_250{justify-content:center}._time_2ps0c_243 ._timeSep_2ps0c_264{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_2ps0c_243 ._timePickerBtn_2ps0c_272{color:var(--field-icon-color,var(--field-placeholder));cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:hover:not(:disabled){color:var(--field-color)}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:6px}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:disabled{cursor:not-allowed;opacity:.5}._time_2ps0c_243 ._timePart_2ps0c_300{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;min-height:var(--field-height);cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0;overflow:hidden}._time_2ps0c_243 ._timePart_2ps0c_300::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._time_2ps0c_243 ._timePart_2ps0c_300[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_2ps0c_243 ._timePart_2ps0c_300:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}._time_2ps0c_243 ._timePart_2ps0c_300:focus:empty:before{content:none}._time_2ps0c_243 ._timePart_2ps0c_300:focus-visible{background:0 0}._time_2ps0c_243._timeAlignCenter_2ps0c_261 ._timePart_2ps0c_300{text-align:center}._t_2ps0c_22{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap,10px);cursor:default;display:block}._nativeWrap_2ps0c_361{flex:1;align-items:center;min-width:0;display:flex}._nativeInput_2ps0c_368{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}._nativeInput_2ps0c_368:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._affix_2ps0c_393{box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);color:var(--field-icon-color,var(--field-placeholder));font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}._affix_2ps0c_393:disabled{cursor:not-allowed;opacity:.6}._affix_2ps0c_393 svg{width:var(--field-icon-size,20px);height:var(--field-icon-size,20px);flex-shrink:0;display:block}._g_2ps0c_426{flex-direction:column}._range_2ps0c_430>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_2ps0c_430 ._rangeTrack_2ps0c_439{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_2ps0c_430 ._rangeTrack_2ps0c_439:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._range_2ps0c_430 ._rangeTrack_2ps0c_439[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_2ps0c_430 ._rangeFill_2ps0c_460{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_2ps0c_430 ._rangeFillFull_2ps0c_471{border-radius:999px}._checkbox_2ps0c_475>div{min-height:var(--field-height);align-items:flex-start;width:100%;padding:0;line-height:normal;display:flex}._checkbox_2ps0c_475[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}._checkbox_2ps0c_475[data-variant=plain]:hover,._checkbox_2ps0c_475[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}._checkbox_2ps0c_475[data-size=sm]>div{align-items:center;min-height:0}._checkPlainBlok_2ps0c_502{width:100%;min-width:0}._checkControl_2ps0c_507{width:100%;min-height:var(--field-height);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:flex-start;gap:12px;margin:0;padding:10px 0;display:flex}._checkControl_2ps0c_507:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:calc(var(--field-radius) - 2px)}._checkControl_2ps0c_507[data-focus-ring=false]:focus-visible{box-shadow:none}._checkControl_2ps0c_507[aria-disabled=true]{cursor:not-allowed}._checkControl_2ps0c_507[data-size=sm]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:7px 8px}._checkControl_2ps0c_507[data-size=sm] ._checkBox_2ps0c_540{border-radius:5px;width:18px;height:18px}._checkControl_2ps0c_507[data-size=sm] ._checkMark_2ps0c_545{width:9px;height:5px}._checkControl_2ps0c_507[data-size=sm] ._checkText_2ps0c_549{padding-top:0;font-size:13px;line-height:1.2}._checkControl_2ps0c_507[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus,#ffffff0f)}._checkBox_2ps0c_540{width:var(--field-check-size,22px);height:var(--field-check-size,22px);border:var(--field-check-box-border,var(--field-border));background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}._checkMark_2ps0c_545{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}._checkText_2ps0c_549{min-width:0;color:inherit;font-size:var(--control-font-size,14px);flex:auto;padding-top:2px;line-height:1.25}._checkControl_2ps0c_507[aria-checked=true] ._checkBox_2ps0c_540{background:var(--field-background-active)}._e_2ps0c_78{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_2ps0c_22{color:var(--field-error-color);font-size:var(--field-error-size,12px);margin-top:var(--field-error-gap,6px);font-style:normal}._display_2ps0c_607>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._displayEmpty_2ps0c_614{color:var(--field-placeholder)}._radio_2ps0c_619>div{width:100%;min-height:var(--field-height);flex-direction:column;align-items:stretch;gap:4px;padding:6px 0;line-height:normal;display:flex}._radioInline_2ps0c_630>div{flex-flow:wrap;align-items:center;gap:8px 16px}._radioItem_2ps0c_637{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:4px 0;display:inline-flex}._radioItem_2ps0c_637:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:6px}._radioItem_2ps0c_637[aria-disabled=true]{cursor:not-allowed;opacity:.7}._radioDot_2ps0c_660{width:var(--field-radio-size,20px);height:var(--field-radio-size,20px);border:var(--field-check-box-border,var(--field-border));border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}._radioDotFill_2ps0c_671{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}._radioText_2ps0c_678{font-size:var(--control-font-size,14px);line-height:1.25}._tags_2ps0c_684>div,._tags_2ps0c_684 ._tagsInner_2ps0c_685{width:100%;min-height:var(--field-height);flex-wrap:wrap;align-items:center;gap:4px;padding:0;line-height:normal;display:flex;overflow:visible}._tagsInner_2ps0c_685{flex:1;min-width:0}._tagChip_2ps0c_702{background:var(--field-background-focus,#0000000f);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}._tagLabel_2ps0c_713{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._tagRemove_2ps0c_719{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}._tagRemove_2ps0c_719:hover{opacity:1}._tagInput_2ps0c_733{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}._rating_2ps0c_746>div{width:100%;min-height:var(--field-height);outline:none;align-items:center;gap:2px;line-height:normal;display:flex}._ratingStar_2ps0c_756{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size,22px);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}._ratingStar_2ps0c_756:disabled{cursor:not-allowed;opacity:.6}._ratingStar_2ps0c_756:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:4px}._ratingStarOn_2ps0c_775{color:var(--field-range-fill,#34c759)}._code_2ps0c_780>div,._code_2ps0c_780 ._codeInner_2ps0c_781{width:100%;min-height:var(--field-height);align-items:center;gap:8px;line-height:normal;display:flex;overflow:visible}._codeInner_2ps0c_781{flex:1;min-width:0}._codeCell_2ps0c_796{box-sizing:border-box;width:var(--field-code-cell-size,36px);height:calc(var(--field-height) - 12px);border:var(--field-border);border-radius:calc(var(--field-radius) - 2px);background:var(--field-background-focus,#0000000a);min-height:32px;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:center;outline:none;padding:0}._codeCell_2ps0c_796:focus{border-color:var(--field-border-focus,var(--field-border));box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._codeCell_2ps0c_796:disabled{opacity:.6;cursor:not-allowed}._file_2ps0c_821>div,._file_2ps0c_821 ._fileInner_2ps0c_822{width:100%;min-height:var(--field-height);align-items:center;gap:10px;line-height:normal;display:flex;overflow:visible}._fileInner_2ps0c_822{flex:1;min-width:0;position:relative}._fileInput_2ps0c_838{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}._fileButton_2ps0c_846{background:var(--field-background-focus,#0000000f);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;padding:6px 10px;font-size:13px}._fileButton_2ps0c_846:disabled{cursor:not-allowed;opacity:.6}._fileList_2ps0c_863{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}._fileEmpty_2ps0c_872{color:var(--field-placeholder);font-size:13px}._fileItem_2ps0c_877{align-items:baseline;gap:8px;min-width:0;display:flex}._fileName_2ps0c_884{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}._fileSize_2ps0c_891{color:var(--field-placeholder);font-size:var(--field-error-size,12px);flex:none}._fileClear_2ps0c_897{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0 2px;font-size:18px;line-height:1}._fileClear_2ps0c_897:hover{opacity:1}._rich_2ps0c_913{align-items:stretch}._rich_2ps0c_913>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}._richWrap_2ps0c_926{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}._richToolbar_2ps0c_934{box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;width:100%;max-width:100%;margin:0;padding:4px 0 6px;display:inline-flex}._richBtn_2ps0c_948{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}._richBtn_2ps0c_948:hover:not(:disabled){background:var(--field-background-focus,#0000000f)}._richBtn_2ps0c_948:disabled{opacity:.5;cursor:not-allowed}._richEditor_2ps0c_977{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 36px);padding:var(--field-note-padding,8px) 0;overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;overflow:hidden auto}._richEditor_2ps0c_977::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._richEditor_2ps0c_977:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}._richEditor_2ps0c_977 ul,._richEditor_2ps0c_977 ol{margin:.25em 0;padding-left:1.25em}._dragDrop_2ps0c_1008{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}._dragDrop_2ps0c_1008>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}._dragDrop_2ps0c_1008[data-dragging=true]{background:0 0!important}._dragDropInner_2ps0c_1027{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}._dragDropZone_2ps0c_1036{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height,88px);border:var(--field-drag-border,2px dashed #c7c7cc);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;padding:18px 14px;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}._dragDropZone_2ps0c_1036:hover:not(:disabled){border-color:var(--field-drag-border-hover,#8e8e93);background:var(--field-background-focus,#00000008)}._dragDropZone_2ps0c_1036[data-dragging=true]{border-color:var(--field-range-fill,#34c759);background:color-mix(in srgb, var(--field-range-fill,#34c759) 10%, transparent);border-style:solid}._dragDropZone_2ps0c_1036:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._dragDropZone_2ps0c_1036:disabled{cursor:not-allowed;opacity:.65}._dragDropHint_2ps0c_1074{font-size:var(--control-font-size,14px);color:inherit;line-height:1.35}._dragDropAccept_2ps0c_1080{font-size:var(--field-error-size,12px);color:var(--field-placeholder);letter-spacing:.01em}._dragDropList_2ps0c_1086{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}._dragDropItem_2ps0c_1095{background:var(--field-background-focus,#0000000a);border-radius:10px;align-items:center;gap:10px;min-width:0;padding:8px 10px;display:flex}._dragDropMeta_2ps0c_1105{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}._dragDropName_2ps0c_1113{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size,14px);color:inherit;line-height:1.3;overflow:hidden}._dragDropSize_2ps0c_1122{font-size:var(--field-error-size,12px);color:var(--field-placeholder);line-height:1.2}._dragDropRemove_2ps0c_1128{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}._dragDropRemove_2ps0c_1128:hover{color:var(--field-error-color,#d70015);background:color-mix(in srgb, var(--field-error-color,#d70015) 10%, transparent)}._dragDropClearAll_2ps0c_1149{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size,12px);cursor:pointer;background:0 0;border:0;align-self:flex-start;margin-top:2px;padding:2px 0}._dragDropClearAll_2ps0c_1149:hover{color:var(--field-error-color,#d70015)}
|
|
1
|
+
@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fur{gap:var(--field-group-gap);width:var(--field-width);background:0 0;border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fir>div,.fir .fin{align-items:center;gap:10px;width:100%;min-height:0;line-height:normal;display:flex;overflow:visible}.fin{flex:1;min-width:0;position:relative}.fip{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fib{padding:var(--field-padding);background:var(--field-background-focus);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;font-size:13px}.fib:disabled{cursor:not-allowed;opacity:.6}.fil{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}.fie{color:var(--field-placeholder);font-size:13px}.fit{align-items:baseline;gap:8px;min-width:0;display:flex}.fim{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.fiz{color:var(--field-placeholder);font-size:var(--field-error-size);flex:none}.fic{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0;font-size:18px;line-height:1}.fic:hover{opacity:1}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
@layer elcrm-form{.fmo{z-index:var(--elcrm-z-popover);background:0 0;position:fixed;inset:0}.fmc{box-shadow:var(--popup-shadow);padding:var(--date-popup-padding);background:var(--select-background);z-index:var(--elcrm-z-popover-front);border-radius:var(--date-popup-radius);scrollbar-width:none;-ms-overflow-style:none;max-height:min(92vh,480px);margin:0;display:block;position:fixed;overflow:hidden auto}.fmc::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fmc{color:var(--select-color);box-sizing:border-box;min-width:var(--date-popup-min-width)}.fmc [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:var(--date-popup-row-height);gap:2px;display:grid}.fmc [grid-calendar]>p{color:var(--field-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}.fmc [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}.fmc b{border-radius:var(--date-popup-cell-radius);cursor:pointer;text-align:center;padding:8px 5px;font-weight:400;display:block}.fmc b:hover{background:var(--select-li-hover-bg)}.fmc p{color:var(--field-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}.fmc i{text-align:center;cursor:pointer;border-radius:var(--date-popup-cell-radius);flex:0 30px;padding:9px}.fmc i:hover{background:var(--select-li-hover-bg)}.fmc i:before{cursor:pointer;display:block}.fmc s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}.fmc s h2{text-align:center;min-width:0;color:var(--select-color);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}.fmc .fmh,.fmc .fmy{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}.fmc .fmh:hover,.fmc .fmy:hover{background:var(--select-li-hover-bg)}.fmc .fmd{cursor:not-allowed;opacity:.45;pointer-events:none}.fmc .fmd[data-active=true],.fmc .fmd[data-current=true]{opacity:.45}.fmc [grid-calendar] b[data-current=true],.fmc [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}.fmc [grid-calendar] b[data-active=true]:not([data-current=true]),.fmc [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}.fmc [grid-calendar] b[data-active=true][data-current=true],.fmc [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:var(--date-popup-cell-radius);font-weight:600}.fmc [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}.fmc [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc span{text-align:center;padding:2px}.fmc span p{color:var(--field-placeholder);padding:8px 5px}.fmc [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}.fmc [grid-calendar]>span>b,.fmc [grid-calendar]>span>p{box-sizing:border-box;border-radius:var(--date-popup-cell-radius);flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}.fmc .fms{cursor:ns-resize}.fmc .fmp{cursor:pointer}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.frd>div{flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fri>div{flex-flow:wrap;align-items:center;gap:8px 16px}.frt{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:0;display:inline-flex}.frt[data-align=top]{align-items:flex-start}.frt[data-align=bottom]{align-items:flex-end}.frt[data-align=center]{align-items:center}.frt[data-align=top] .fro{margin-top:calc((1.25em - var(--field-radio-size)) / 2)}.frt[data-align=bottom] .fro{margin-bottom:calc((1.25em - var(--field-radio-size)) / 2)}.frt:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.frt[aria-disabled=true]{cursor:not-allowed;opacity:.7}.fro{width:var(--field-radio-size);height:var(--field-radio-size);border:var(--field-check-box-border);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.frf{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}.frx{font-size:var(--control-font-size);line-height:1.25}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fnr>div{outline:none;align-items:center;gap:2px;width:100%;min-height:0;line-height:normal;display:flex}.fns{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}.fns:disabled{cursor:not-allowed;opacity:.6}.fns:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:4px}.fno{color:var(--field-range-fill)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fhr{align-items:stretch}.fhr>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}.fhw{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}.fht{width:100%;max-width:100%;padding:var(--field-padding-block) 0;box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0;display:inline-flex}.fhb{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.fhb:hover:not(:disabled){background:var(--field-background-focus)}.fhb:disabled{opacity:.5;cursor:not-allowed}.fhe{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 28px - 2 * var(--field-padding-block));overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;padding:0;overflow:hidden auto}.fhe::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fhe:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}.fhe ul,.fhe ol{margin:.25em 0;padding-left:1.25em}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:
|
|
1
|
+
@layer elcrm-form{.fso{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fsl{--select-icon:calc(var(--select-height,52px) / 1.5);--select-icon-padding:calc((var(--select-height,52px) - var(--select-icon)) / 2);background:var(--select-background);box-shadow:var(--popup-shadow);z-index:var(--elcrm-z-popover-front);border-radius:var(--select-radius,20px);max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;display:block;position:fixed;overflow:hidden auto}.fsl::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl ul{width:100%;max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}.fsl ul::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl li{border-bottom:var(--select-separator);cursor:pointer;padding:0 var(--field-padding-inline);color:var(--select-color);height:var(--select-height,52px);line-height:var(--select-height,52px);font-size:var(--select-font-size,var(--control-font-size));white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;display:block;overflow:hidden;text-align:left!important;border-left:0!important}.fsl li[aria-selected=true]{background:var(--select-li-selected-bg)}.fsl li:hover{background:var(--select-li-hover-bg)}.fsl li[data-focus=true]{background:var(--select-li-focus-bg)}.fsl li:last-child{border-bottom:0}.fsi{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}.fsp{color:var(--field-placeholder);font-weight:400}.fsf{cursor:pointer}.fsf[aria-disabled=true]{cursor:not-allowed}}
|