@elcrm/form 0.1.2 → 0.1.4
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 -204
- package/dist/Form.d.ts +21 -3
- package/dist/assets/styles/Check.module.css +1 -1
- package/dist/assets/styles/Code.module.css +1 -1
- package/dist/assets/styles/Color.module.css +1 -1
- package/dist/assets/styles/Drag.module.css +1 -1
- 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 -1
- package/dist/assets/styles/Form.module.css +1 -1
- package/dist/assets/styles/Radio.module.css +1 -1
- package/dist/assets/styles/Rating.module.css +1 -1
- package/dist/assets/styles/Rich.module.css +1 -1
- 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 -1
- package/dist/assets/styles/Time.module.css +1 -1
- package/dist/core/Field.d.ts +38 -10
- package/dist/core/Field.js +2 -2
- package/dist/dark.css +34 -11
- package/dist/fields/Card.d.ts +26 -0
- package/dist/fields/Card.js +1 -0
- package/dist/fields/Check.d.ts +20 -2
- package/dist/fields/Check.js +1 -1
- package/dist/fields/Code.d.ts +26 -4
- package/dist/fields/Code.js +1 -1
- package/dist/fields/Color.d.ts +21 -13
- package/dist/fields/Color.js +1 -1
- package/dist/fields/ColorPanel.d.ts +20 -0
- package/dist/fields/ColorPanel.js +1 -0
- package/dist/fields/Date.d.ts +16 -2
- package/dist/fields/Date.js +1 -1
- package/dist/fields/DateCalendar.d.ts +26 -0
- package/dist/fields/DateCalendar.js +1 -0
- package/dist/fields/Display.d.ts +15 -5
- package/dist/fields/Display.js +2 -1
- package/dist/fields/DragDrop.d.ts +27 -4
- package/dist/fields/DragDrop.js +1 -1
- package/dist/fields/Email.d.ts +18 -3
- package/dist/fields/Email.js +1 -1
- package/dist/fields/FieldGroup.d.ts +127 -0
- package/dist/fields/FieldGroup.js +1 -0
- package/dist/fields/File.d.ts +14 -1
- package/dist/fields/File.js +1 -1
- package/dist/fields/Hidden.d.ts +7 -2
- package/dist/fields/Hidden.js +1 -1
- package/dist/fields/Input.d.ts +10 -5
- package/dist/fields/Input.js +1 -1
- package/dist/fields/Mask.d.ts +14 -1
- package/dist/fields/Mask.js +1 -1
- package/dist/fields/Modal.d.ts +20 -3
- package/dist/fields/Modal.js +1 -1
- package/dist/fields/Money.d.ts +12 -1
- package/dist/fields/Money.js +1 -1
- package/dist/fields/NativeTextField.d.ts +9 -5
- package/dist/fields/NativeTextField.js +1 -1
- package/dist/fields/Numeric.d.ts +10 -8
- package/dist/fields/Numeric.js +1 -1
- package/dist/fields/Options.d.ts +24 -5
- package/dist/fields/Options.js +1 -1
- package/dist/fields/Password.d.ts +11 -0
- package/dist/fields/Password.js +1 -1
- package/dist/fields/Percent.d.ts +10 -6
- package/dist/fields/Percent.js +1 -1
- package/dist/fields/Phone.d.ts +13 -1
- package/dist/fields/Phone.js +1 -1
- package/dist/fields/Radio.d.ts +17 -1
- package/dist/fields/Radio.js +1 -1
- package/dist/fields/Range.d.ts +19 -6
- package/dist/fields/Range.js +1 -1
- package/dist/fields/Rating.d.ts +13 -1
- package/dist/fields/Rating.js +1 -1
- package/dist/fields/RichText.d.ts +10 -2
- package/dist/fields/RichText.js +1 -1
- package/dist/fields/Select.d.ts +21 -0
- package/dist/fields/Select.js +1 -1
- package/dist/fields/Tabs.d.ts +45 -0
- package/dist/fields/Tabs.js +1 -0
- package/dist/fields/Tags.d.ts +13 -1
- package/dist/fields/Tags.js +1 -1
- package/dist/fields/Textarea.d.ts +10 -1
- package/dist/fields/Textarea.js +1 -1
- package/dist/fields/Time.d.ts +13 -4
- package/dist/fields/Time.js +1 -1
- package/dist/fields/TimePicker.d.ts +24 -0
- package/dist/fields/TimePicker.js +1 -0
- package/dist/fields/Url.d.ts +11 -1
- 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 +97 -26
- package/dist/hooks/use.d.ts +32 -13
- package/dist/index.d.ts +21 -9
- package/dist/index.js +2 -2
- package/dist/index.umd.js +3 -2
- package/dist/light.css +35 -12
- package/dist/package.js +1 -1
- package/dist/style.css +17 -13
- package/dist/styles/Code.module.js +1 -1
- package/dist/styles/Color.module.js +1 -1
- package/dist/styles/Field.module.js +1 -1
- package/dist/styles/FieldGroup.module.js +1 -0
- package/dist/styles/Tabs.module.js +1 -0
- package/package.json +1 -1
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,242 +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
|
-
- **Базовые стили полей** (Field / Form / Select / Color) **вшиты в начало** `dist/index.js` и `dist/core/Field.js` (скрипт сборки): при загрузке модуля в `<head>` добавляется один `<style>` — **отдельные CSS-файлы и настройка css-loader в приложении не нужны**. Работает и с **корня** (`@elcrm/form`), и с **подпутями** — стили подхватывает `Field`.
|
|
24
|
-
- **Опционально** можно по-прежнему подключить `@elcrm/form/style.css` вручную (тот же текст, что во встраивании) — например для SSR без клиентского JS.
|
|
25
|
-
- **Темы** (светлая / тёмная): `@elcrm/form/light.css`, `@elcrm/form/dark.css` — атрибут `data-theme` на контейнере (подключаются вручную). Для порталов (`document.body`) задайте `data-theme` на `<html>` или оберните приложение так, чтобы всплывающие списки и календарь наследовали переменные темы.
|
|
23
|
+
Это подтянет `@elcrm/*`, переименует устаревшие поля (`ProgressField` → `RangeField` и т.д.) и прогонит проверки.
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
В теме приложения: `--popup-shadow` (тени селекта / календаря / цвета) и `--field-padding` / `--field-padding-block` / `--field-padding-inline` (отступ капсулы). Старые `--field-note-padding*` / `--control-inner-padding` подхватит тот же `elcrm update --fix`.
|
|
28
26
|
|
|
29
|
-
|
|
30
|
-
import { useForm, StringField, PasswordField } from "@elcrm/form";
|
|
31
|
-
import "@elcrm/form/light.css";
|
|
27
|
+
## Подключение
|
|
32
28
|
|
|
33
|
-
|
|
34
|
-
const form = useForm({ login: "", password: "" });
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<>
|
|
38
|
-
<StringField
|
|
39
|
-
name="login"
|
|
40
|
-
form={form}
|
|
41
|
-
label="Логин"
|
|
42
|
-
native
|
|
43
|
-
autoComplete="username"
|
|
44
|
-
/>
|
|
45
|
-
<PasswordField name="password" form={form} label="Пароль" />
|
|
46
|
-
</>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### `Form.Init` (опционально)
|
|
52
|
-
|
|
53
|
-
Нужен, если используются **уведомления** (например, копирование телефона в буфер) или **свои модалки** для **ModalField** / **OptionsField** (`modal="module.name"`). Рендерит `null`, дочерние элементы не оборачивает.
|
|
29
|
+
Стили полей подхватываются сами при импорте компонентов. Темы подключаете вручную:
|
|
54
30
|
|
|
55
31
|
```tsx
|
|
56
|
-
import {
|
|
57
|
-
|
|
58
|
-
function Example() {
|
|
59
|
-
const form = useForm({ phone: "" });
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<>
|
|
63
|
-
<Form.Init
|
|
64
|
-
onNotice={(message) => {
|
|
65
|
-
/* тост / snackbar */
|
|
66
|
-
}}
|
|
67
|
-
onModal={({
|
|
68
|
-
module,
|
|
69
|
-
modalName,
|
|
70
|
-
fieldName,
|
|
71
|
-
value,
|
|
72
|
-
callback,
|
|
73
|
-
options,
|
|
74
|
-
}) => {
|
|
75
|
-
/* открыть модалку и передать результат в callback(...) */
|
|
76
|
-
}}
|
|
77
|
-
/>
|
|
78
|
-
<PhoneField name="phone" form={form} label="Телефон" />
|
|
79
|
-
</>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
32
|
+
import { useForm, StringField } from "@elcrm/form";
|
|
33
|
+
import "@elcrm/form/light.css"; // или dark.css
|
|
82
34
|
```
|
|
83
35
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
## Хук `useForm`
|
|
87
|
-
|
|
88
|
-
- `useForm(initialValues?)` возвращает API управления формой (`UseFormApi`).
|
|
36
|
+
На контейнере или на `<html>` задайте `data-theme="light"` | `"dark"` — от этого зависят цвета полей и всплывающих списков (селект, календарь, цвет).
|
|
89
37
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
`useForm(initialValues?)` возвращает стабильный объект со следующими возможностями:
|
|
95
|
-
|
|
96
|
-
- `getValue(name, fallback?)` — получить текущее значение поля.
|
|
97
|
-
- `getValues()` — получить **копию** всех значений (чтобы снаружи не мутировать store по ссылке).
|
|
98
|
-
- `getVersion(name)` — получить версию поля (увеличивается при уведомлениях).
|
|
99
|
-
- `subscribe(name, listener)` — подписаться на изменения конкретного поля; возвращает `unsubscribe()`.
|
|
100
|
-
|
|
101
|
-
### Изменение значений
|
|
102
|
-
|
|
103
|
-
- `onValue({ name, value })` — записывает значение **без уведомлений** (без bump `version`).
|
|
104
|
-
- `setValue({ name, value })` — записывает значение **и всегда уведомляет** подписчиков этого поля (в т.ч. если значение то же самое).
|
|
105
|
-
- `setValues(nextValues)` — массовая запись: обновляет значения и уведомляет **только поля, у которых значение изменилось** по `Object.is`.
|
|
106
|
-
- `reset(nextValues?)` — сброс значений.
|
|
107
|
-
- Если `nextValues` не передан, используются `initialValues` из `useForm(initialValues)`.
|
|
108
|
-
- Уведомления идут **только если значение изменилось** по `Object.is` (важно для `Date`, массивов и объектов).
|
|
109
|
-
|
|
110
|
-
### Важные нюансы (частые ошибки)
|
|
111
|
-
|
|
112
|
-
1. `setValues/reset` используют сравнение `Object.is(was, now)` — для ссылочных типов (`Date`/массив/объект) нужно передавать **новую ссылку**, иначе уведомление может не произойти.
|
|
113
|
-
2. Если нужно “перерисовать даже при том же значении”, используйте `setValue`, потому что он принудительно делает bump `version`.
|
|
114
|
-
|
|
115
|
-
Небольшой пример:
|
|
116
|
-
|
|
117
|
-
```ts
|
|
118
|
-
const form = useForm({ date: new Date(0) });
|
|
119
|
-
|
|
120
|
-
// перерисовать поля можно принудительно:
|
|
121
|
-
form.setValue({ name: "date", value: form.getValue("date") });
|
|
122
|
-
|
|
123
|
-
// или при reset для Date/объектов важно создать новую ссылку:
|
|
124
|
-
form.reset({ date: new Date(0) });
|
|
38
|
+
```tsx
|
|
39
|
+
<div data-theme="light">
|
|
40
|
+
{/* форма */}
|
|
41
|
+
</div>
|
|
125
42
|
```
|
|
126
43
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
Подробнее о API — в исходниках `hooks/use.ts`.
|
|
130
|
-
|
|
131
|
-
## Общие пропы (`TInput`)
|
|
132
|
-
|
|
133
|
-
База: `TFieldFormBindings` (связь с формой) + `TFieldPresentation` (оформление).
|
|
134
|
-
|
|
135
|
-
| Проп | Описание |
|
|
136
|
-
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
137
|
-
| `name`, `form`, `value`, `onValue`, `onBlur` | Связь с формой; `onBlur` — «коммит» после ухода фокуса, аргумент `{ value, name }`, не нативный `FocusEvent`. |
|
|
138
|
-
| `label`, `placeholder`, `error`, `className`, `id` | Подпись, плейсхолдер, текст ошибки, класс блока, id. |
|
|
139
|
-
| `disabled` | Только просмотр / без ввода. |
|
|
140
|
-
| `hidden` | При `true` поле **не рендерится, только если значение пустое**; при непустом — **показывается**. |
|
|
141
|
-
| `before`, `after` | Узлы до/после области ввода (например иконки). |
|
|
142
|
-
| `native` | Только `StringField`: нативный `<input>` вместо **contentEditable** — для **автозаполнения** логина/почты; сочетать с `autoComplete`, `inputType`. |
|
|
143
|
-
| `autoComplete`, `inputType` | Атрибуты нативного поля при `native` (например `username`, `email`). |
|
|
144
|
-
| `inputmode`, `spellCheck`, `maxLength` | Подсказки ввода (в т.ч. мобильная клавиатура), орфография, лимит длины — по смыслу каждого компонента. |
|
|
145
|
-
|
|
146
|
-
У `PasswordField` свой тип `TPasswordField`: проп `native` там означает **«не рендерить компонент»** (внешний нативный пароль), не путать с `native` у `StringField`.
|
|
147
|
-
|
|
148
|
-
`before` / `after` рендерятся единообразно во всех полях через общий стиль-обёртку `affix` (одинаковое выравнивание и отступы слева/справа).
|
|
44
|
+
## Быстрый старт
|
|
149
45
|
|
|
150
|
-
|
|
46
|
+
```tsx
|
|
47
|
+
import { useForm, StringField, PasswordField } from "@elcrm/form";
|
|
48
|
+
import "@elcrm/form/light.css";
|
|
151
49
|
|
|
152
|
-
|
|
153
|
-
|
|
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
|
+
```
|
|
154
70
|
|
|
155
|
-
|
|
71
|
+
## `useForm`
|
|
156
72
|
|
|
157
|
-
|
|
158
|
-
- `placeholder` используется как текст подписи внутри поля (рядом с квадратом чекбокса).
|
|
159
|
-
- Поддерживает `form + name`, `onValue`, `onBlur`, `disabled`, `hidden`, `before`, `after`.
|
|
160
|
-
- Клавиатура: `Space` / `Enter` переключают состояние.
|
|
73
|
+
Хранит значения и уведомляет **только** поле с изменившимся `name`.
|
|
161
74
|
|
|
162
|
-
|
|
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
|
+
```
|
|
163
87
|
|
|
164
|
-
|
|
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` |
|
|
165
136
|
|
|
166
|
-
|
|
167
|
-
import { DateField, useForm } from "@elcrm/form";
|
|
168
|
-
```
|
|
137
|
+
### Прочее
|
|
169
138
|
|
|
170
|
-
|
|
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` **удалены**. После обновления:
|
|
171
153
|
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
|
|
154
|
+
```bash
|
|
155
|
+
elcrm update --fix --test
|
|
156
|
+
# или только код:
|
|
157
|
+
elcrm migrate form-aliases
|
|
175
158
|
```
|
|
176
159
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
Объектные пропы (`options` у селекта и т.д.) не пересоздавайте на каждый рендер — вынесите в константы модуля.
|
|
180
|
-
|
|
181
|
-
## Экспорт компонентов (корень пакета)
|
|
182
|
-
|
|
183
|
-
### Поля
|
|
184
|
-
|
|
185
|
-
| Компонент | Примечание |
|
|
186
|
-
| ----------------------------- | ------------------------------------------------------------ |
|
|
187
|
-
| `StringField` | текст; `native` → `<input>` для автозаполнения |
|
|
188
|
-
| `PasswordField` | пароль; свой `native` = «не рендерить» (не путать со String) |
|
|
189
|
-
| `TextareaField` | многострочный CE |
|
|
190
|
-
| `NumberField` | **строка цифр** в форме; `max` = лимит **символов** |
|
|
191
|
-
| `PercentField` | `number` + clamp `min`/`max` (0–100) + аффикс `%` |
|
|
192
|
-
| `MoneyField` | деньги |
|
|
193
|
-
| `MaskField` | маска ввода |
|
|
194
|
-
| `PhoneField` | телефон; полный каталог масок — lazy при фокусе |
|
|
195
|
-
| `EmailField` | `type=email` |
|
|
196
|
-
| `UrlField` | `type=url` |
|
|
197
|
-
| `DateField` | дата + календарь |
|
|
198
|
-
| `TimeField` | время; опционально `picker` / `presets` |
|
|
199
|
-
| `SelectField` | список |
|
|
200
|
-
| `OptionsField` / `ModalField` | выбор через модалку (`Form.Init`) |
|
|
201
|
-
| `RangeField` | диапазон / прогресс |
|
|
202
|
-
| `CheckField` | чекбокс (`size`, `variant`, `showFocusRing`) |
|
|
203
|
-
| `RadioField` | радиогруппа |
|
|
204
|
-
| `TagsField` | чипы `string[]` |
|
|
205
|
-
| `RatingField` | оценка 0…max |
|
|
206
|
-
| `CodeField` | OTP / код по ячейкам |
|
|
207
|
-
| `FileField` | файлы |
|
|
208
|
-
| `DragDropField` | DnD-зона файлов |
|
|
209
|
-
| `RichTextField` | HTML (execCommand; санитизация — на стороне приложения) |
|
|
210
|
-
| `ColorField` | пикер цвета |
|
|
211
|
-
| `HiddenField` | без UI |
|
|
212
|
-
| `DisplayField` | только чтение |
|
|
213
|
-
|
|
214
|
-
### Deprecated / алиасы (лучше каноническое имя)
|
|
215
|
-
|
|
216
|
-
| Устарело / алиас | Использовать |
|
|
217
|
-
| ----------------- | --------------- |
|
|
218
|
-
| `ProgressField` | `RangeField` |
|
|
219
|
-
| `TProgress` | `TRange` |
|
|
220
|
-
| `ReadonlyField` | `DisplayField` |
|
|
221
|
-
| `OtpField` | `CodeField` |
|
|
222
|
-
| `DragonDropField` | `DragDropField` |
|
|
160
|
+
## `FieldGroup`
|
|
223
161
|
|
|
224
|
-
|
|
162
|
+
Общие `form` / `disabled` / `size` у родителя; у каждого item — `field` + `name` + свои пропы:
|
|
225
163
|
|
|
226
|
-
|
|
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
|
+
```
|
|
227
175
|
|
|
228
|
-
|
|
176
|
+
`field`: `string` | `password` | `email` | `number` | `select` | `card` | `color` | … — полный список в типе `FieldGroupFieldKind`.
|
|
229
177
|
|
|
230
|
-
|
|
178
|
+
## `Form.Init`
|
|
231
179
|
|
|
232
|
-
|
|
233
|
-
| ------- | ------------- | ------------------------ |
|
|
234
|
-
| В форме | строка `"42"` | число `42` |
|
|
235
|
-
| `max` | длина строки | верхняя граница значения |
|
|
236
|
-
| Дроби | нет | `decimals` |
|
|
237
|
-
| На blur | trim цифр | clamp в `min`…`max` |
|
|
180
|
+
Нужен для тостов (копирование телефона) и модалок `OptionsField` / `ModalField`. Рендерит `null`.
|
|
238
181
|
|
|
239
|
-
|
|
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
|
+
```
|
|
240
193
|
|
|
241
|
-
|
|
194
|
+
Без `Form.Init` эти колбэки — no-op.
|
|
242
195
|
|
|
243
|
-
|
|
244
|
-
import { ColorField, useForm } from "@elcrm/form";
|
|
196
|
+
## Частые ошибки
|
|
245
197
|
|
|
246
|
-
|
|
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` / объекты в пропах | Вынести в константу модуля — не создавать на каждый рендер |
|
|
247
206
|
|
|
248
|
-
|
|
249
|
-
```
|
|
207
|
+
## Примеры
|
|
250
208
|
|
|
251
|
-
|
|
209
|
+
Полный каталог сниппетов по каждому полю: **[Template.md](./Template.md)**.
|
|
252
210
|
|
|
253
211
|
## Лицензия
|
|
254
212
|
|
package/dist/Form.d.ts
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { TModalOpenPayload } from './FormInitContext';
|
|
2
2
|
export type { TModalOpenPayload };
|
|
3
|
+
/**
|
|
4
|
+
* Пропы {@link Form}.Init — регистрация колбэков для всех полей приложения.
|
|
5
|
+
*/
|
|
3
6
|
export type FormInitProps = {
|
|
4
|
-
/**
|
|
7
|
+
/** Тост: копирование телефона и т.п. */
|
|
5
8
|
onNotice?: (message: string) => void;
|
|
6
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* Открыть модалку выбора.
|
|
11
|
+
* Payload: `module` + `modalName` из пропа `modal="module.name"`,
|
|
12
|
+
* `callback(value)` — вернуть выбор в поле.
|
|
13
|
+
*/
|
|
7
14
|
onModal?: (payload: TModalOpenPayload) => void;
|
|
8
15
|
};
|
|
9
16
|
/**
|
|
@@ -14,7 +21,18 @@ declare function Init({ onNotice, onModal }: FormInitProps): null;
|
|
|
14
21
|
declare namespace Init {
|
|
15
22
|
var displayName: string;
|
|
16
23
|
}
|
|
17
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* Пространство имён формы приложения.
|
|
26
|
+
*
|
|
27
|
+
* **`Form.Init`** — зарегистрировать `onNotice` (тосты) и `onModal` (Options/Modal).
|
|
28
|
+
* Ничего не рисует (`null`). Монтировать один раз рядом с формой.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* <>
|
|
32
|
+
* <Form.Init onNotice={toast} onModal={openModal} />
|
|
33
|
+
* <PhoneField name="phone" form={form} />
|
|
34
|
+
* </>
|
|
35
|
+
*/
|
|
18
36
|
export declare const Form: {
|
|
19
37
|
Init: typeof Init;
|
|
20
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fkr>div{
|
|
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)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fdr
|
|
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
|
-
@layer elcrm-form{
|
|
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)}}}
|
|
@@ -1 +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}.fxz{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height);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;
|
|
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
|
-
@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=sm]{--field-height:32px;--control-height:32px;--field-side-padding:10px;--control-side-padding:10px;--control-inner-padding:0 10px;font-size:13px}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}.ffl[data-field=group] .fff>div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}.ffl[data-field=group] .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:center;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--control-inner-padding);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}.fff[data-disabled=true]>*{cursor:not-allowed}.fff>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);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:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);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>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding);padding-bottom:var(--field-note-padding);scrollbar-width:none;-ms-overflow-style:none;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>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}.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:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);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{flex-direction:column}.ffr>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;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}.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>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ffz{color:var(--field-placeholder)}}
|
|
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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fir>div,.fir .fin{
|
|
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
|
-
@layer elcrm-form{.fmo{z-index:var(--elcrm-z-popover);background:0 0;position:fixed;inset:0}.fmc{box-shadow:var(--
|
|
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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.frd>div{
|
|
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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fnr>div{
|
|
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)}}
|