@brandup/ui-textbox 1.0.36 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +14 -7
  2. package/package.json +6 -6
  3. package/source/index.ts +4 -0
  4. package/source/textbox.ts +6 -1
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ## Установка
10
10
 
11
- ```
11
+ ```bash
12
12
  npm i @brandup/ui-textbox
13
13
  ```
14
14
 
@@ -35,7 +35,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
35
35
  `TextBox` принимает `<input>` со следующими значениями атрибута `type`:
36
36
 
37
37
  | Тип | Поведение |
38
- |---|---|
38
+ | --- | --- |
39
39
  | `text` | Обычный текст |
40
40
  | `email` | Фильтрует недопустимые символы, ограничивает длину до 256 символов (RFC 5321) |
41
41
  | `url` | URL-адрес |
@@ -47,7 +47,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
47
47
  ## Data-атрибуты
48
48
 
49
49
  | Атрибут | Описание |
50
- |---|---|
50
+ | --- | --- |
51
51
  | `data-symbolcounter` | Показывает счётчик введённых символов (и максимума, если задан `maxlength`) |
52
52
  | `data-autofocus` | Автофокус при инициализации (игнорируется на touch-устройствах) |
53
53
  | `data-copy-button` | Добавляет кнопку копирования значения в буфер обмена |
@@ -55,6 +55,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
55
55
  | `data-readonly` | Альтернативный способ задать режим только для чтения |
56
56
  | `data-format` | Включает форматирование текста (только для `type="text"`) |
57
57
  | `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
58
+ | `data-editor-actions` | Кнопки действий в панели через пробел (по умолчанию нет): `erase undo redo` |
58
59
  | `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
59
60
  | `data-format-md-bold` | Markdown-маркер для жирного (по умолчанию `**`) |
60
61
  | `data-format-md-italic` | Markdown-маркер для курсива (по умолчанию `*`) |
@@ -83,6 +84,12 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
83
84
 
84
85
  Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
85
86
 
87
+ ### Кнопки действий — `data-editor-actions`
88
+
89
+ Список через пробел из значений `erase` (очистить форматирование), `undo` (отменить), `redo` (повторить). В отличие от инструментов, действия подключаются явно: без атрибута кнопок действий нет. Они добавляются в панель после инструментов форматирования, отделяются разделителем и блокируются, когда действие недоступно (нечего отменять или очищать).
90
+
91
+ `erase` снимает все форматы с выделения, а без выделения — со слова под кареткой. Чтобы очистить всё поле, выделите текст целиком (`Ctrl+A`) и нажмите кнопку.
92
+
86
93
  ### Применение формата
87
94
 
88
95
  - Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
@@ -100,7 +107,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
100
107
  Значение синхронизируется в скрытое поле в выбранном формате:
101
108
 
102
109
  | Значение | Хранение | Поддерживаемые теги/маркеры |
103
- |---|---|---|
110
+ | --- | --- | --- |
104
111
  | `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
105
112
  | `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
106
113
 
@@ -125,7 +132,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
125
132
  ### Методы
126
133
 
127
134
  | Метод | Описание |
128
- |---|---|
135
+ | --- | --- |
129
136
  | `getValue(): string` | Возвращает текущее значение (обрезает пробелы по краям) |
130
137
  | `setValue(value: string): void` | Устанавливает значение программно |
131
138
  | `hasValue(): boolean` | `true`, если значение не пустое |
@@ -136,7 +143,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
136
143
  ### Свойства
137
144
 
138
145
  | Свойство | Тип | Описание |
139
- |---|---|---|
146
+ | --- | --- | --- |
140
147
  | `type` | `TextBoxType` | Тип ввода: `"text"` \| `"email"` \| `"url"` \| `"tel"` \| `"number"` |
141
148
  | `multyline` | `boolean` | `true` для `<textarea>` |
142
149
  | `maxlength` | `number` | Максимальная длина (из атрибута `maxlength`) |
@@ -176,7 +183,7 @@ textbox.onChange((data) => { ... });
176
183
  ## CSS-классы состояний
177
184
 
178
185
  | Класс | Условие |
179
- |---|---|
186
+ | --- | --- |
180
187
  | `focused` | Поле в фокусе |
181
188
  | `invalid` | Значение не прошло валидацию |
182
189
  | `incorrect` | Введён недопустимый символ (мигает, затем снимается) |
package/package.json CHANGED
@@ -24,15 +24,15 @@
24
24
  "email": "it@brandup.online"
25
25
  },
26
26
  "license": "Apache-2.0",
27
- "version": "1.0.36",
27
+ "version": "1.0.38",
28
28
  "main": "source/index.ts",
29
29
  "types": "source/index.ts",
30
30
  "dependencies": {
31
- "@brandup/ui": "^2.0.5",
32
- "@brandup/ui-helpers": "^2.0.5",
33
- "@brandup/ui-input": "^1.0.36",
34
- "@brandup/ui-kit": "^1.0.36",
35
- "@brandup/ui-richeditor": "^1.0.36"
31
+ "@brandup/ui": "^2.0.7",
32
+ "@brandup/ui-helpers": "^2.0.7",
33
+ "@brandup/ui-input": "^1.0.38",
34
+ "@brandup/ui-kit": "^1.0.38",
35
+ "@brandup/ui-richeditor": "^1.0.38"
36
36
  },
37
37
  "files": [
38
38
  "source",
package/source/index.ts CHANGED
@@ -3,11 +3,15 @@ export * from "./textbox";
3
3
 
4
4
  // реэкспорт типов/утилит форматирования из @brandup/ui-richeditor для обратной совместимости
5
5
  export {
6
+ ALL_EDITOR_ACTIONS,
6
7
  ALL_FORMAT_TOOLS,
8
+ EDITOR_ACTIONS,
7
9
  FORMAT_TOOLS,
10
+ parseEditorActions,
8
11
  parseFormatTools,
9
12
  defaultFormatMarkers,
10
13
  normalizeWhitespace,
14
+ type EditorAction,
11
15
  type FormatTool,
12
16
  type FormatStorage,
13
17
  type FormatMarkers,
package/source/textbox.ts CHANGED
@@ -6,6 +6,7 @@ import { DOM } from "@brandup/ui";
6
6
  import { FuncHelper } from "@brandup/ui-helpers";
7
7
  import RichEditor, {
8
8
  defaultFormatMarkers,
9
+ parseEditorActions,
9
10
  parseFormatTools,
10
11
  type FormatMarkers,
11
12
  type FormatStorage,
@@ -93,6 +94,8 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
93
94
  const formatStorage: FormatStorage =
94
95
  valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
95
96
  const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
97
+ // кнопки действий панели (очистка формата, отмена, повтор) — подключаются явно
98
+ const editorActions = format ? parseEditorActions(valueElem.getAttribute("data-editor-actions")) : [];
96
99
 
97
100
  // markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
98
101
  const formatMarkers = defaultFormatMarkers();
@@ -123,9 +126,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
123
126
  if (inputmode) inputElem.inputMode = inputmode;
124
127
 
125
128
  if (copyButton) {
129
+ // команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui
126
130
  const buttonElem = DOM.tag(
127
131
  "button",
128
- { command: "copy-text", title: "Скопировать в буфер обмена" },
132
+ { "data-command": "copy-text", title: "Скопировать в буфер обмена" },
129
133
  copyIcon
130
134
  );
131
135
  if (disabled) buttonElem.disabled = true;
@@ -164,6 +168,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
164
168
  const options: RichEditorOptions = {
165
169
  format,
166
170
  tools: formatTools,
171
+ actions: editorActions,
167
172
  storage: formatStorage,
168
173
  markers: formatMarkers,
169
174
  placeholder,