@1337exp/taoui 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -15,7 +15,7 @@
15
15
  - **TaoInputGroup** — склейка снаружи: `#before` | поле | `#after` (протокол, единица, кнопка)
16
16
  - **TaoModal** — модальное окно с анимацией и слотами
17
17
  - **TaoDrawer** — боковая панель (фильтры, настройки). Esc, клик по фону, ловушка фокуса — как у модалки
18
- - **TaoSpoiler** — раскрывающийся блок (аккордеон)
18
+ - **TaoSpoiler** — раскрывающийся блок. `v-model` и `aria-expanded`; несколько подряд — не exclusive-аккордеон
19
19
  - **TaoTabs** — вкладки для переключения между секциями контента
20
20
  - **TaoTooltip** — всплывающая подсказка при наведении
21
21
 
@@ -24,22 +24,22 @@
24
24
  - **TaoContainer** — контейнер с ограничением ширины (wide/slim/ultra-slim) и авто-центровкой
25
25
  - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
26
26
  - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
27
- - **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ)
27
+ - **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
28
28
  - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)
29
29
 
30
30
  ### Формы и ввод
31
31
 
32
- - **TaoCheckbox** — чекбокс с поддержкой v-model и слотов pre/post
32
+ - **TaoCheckbox** — чекбокс с v-model, слотами pre/post и `indeterminate` (частично выбран)
33
33
  - **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
34
34
  - **TaoRadio** / **TaoRadioGroup** — взаимоисключающий выбор из 2–5 вариантов
35
- - **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input
35
+ - **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. Сброс — «Очистить» в списке или Delete
36
36
  - **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
37
37
  - **TaoFormField** — общие label / hint / error для полей формы
38
38
  - **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`
39
39
  - **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
40
- - **TaoTextarea** — многострочное поле с авто-высотой и модификаторами (noBorder, noBackground, textCenter, submitOnEnter)
41
- - **TaoPinCode** — пин-код из N полей с авто-переходом фокуса между ними
42
- - **TaoSlider** — интерактивный слайдер (drag + клик), с опциональным точным вводом значения по правому клику
40
+ - **TaoTextarea** — многострочное поле с авто-высотой. `maxlength` ограничивает ввод, `count` показывает «введено / максимум»
41
+ - **TaoPinCode** — пин-код из N полей. По умолчанию клик стирает ячейку и все справа (`clear-on="focus"`); `clear-on="input"` заменяет цифру только при вводе. Последняя ячейка снимает фокус и эмитит `complete`
42
+ - **TaoSlider** — слайдер: мышь, тач и стрелки. Опциональный точный ввод по правому клику
43
43
  - **TaoFileDrop** — зона загрузки файлов (drag & drop + клик). Текст внутри — слот
44
44
 
45
45
  ### Отображение данных
@@ -51,10 +51,10 @@
51
51
  - **TaoSkeleton** — плейсхолдер загрузки (text / title / circle / rect)
52
52
  - **TaoCounter** — витрина числа с переворотом цифр (не инпут)
53
53
  - **TaoCarousel** — лента: целый слайд с `autoplay`, карточка с `peek`, полоса с `per-view`. Стрелки через `controls` или `#prev` / `#next`, точки — `dots`
54
- - **TaoAvatar** — фото или инициалы
54
+ - **TaoAvatar** — фото или инициалы, размеры `small` / `medium` / `large`. Точка `dot` и счётчик `count`
55
55
  - **TaoTag** — тег/бейдж со статусами (neutral, success, danger, warning, info)
56
56
  - **TaoAlert** — инлайн-баннер страницы или ошибки формы (success / error / warning / info)
57
- - **TaoProgress** — статичная полоса прогресса, опционально с shimmer-анимацией
57
+ - **TaoProgress** — статичная полоса (`progress` в %). Проценты сверху по центру или `showPercentage="right"` справа; слоты `#left` / `#right` — подписи, тогда процент справа в скобках. `false` прячет. Ширина — `minWidth` / `maxWidth`, не диапазон значения
58
58
  - **TaoLoader** — анимированный лоадер (четыре точки)
59
59
  - **TaoImage** — обёртка над `<img>` с плавным fade-in при загрузке и плейсхолдером
60
60
  - **TaoIcon** — обёртка для icon-шрифта (см. раздел «Иконки» ниже)
@@ -64,7 +64,7 @@
64
64
  - **TaoLink** — ссылка, использующая `<NuxtLink>` в Nuxt-проекте и обычный `<a>` вне его — без дополнительной настройки
65
65
  - **TaoBreadcrumb** — крошки: последний пункт — текущая страница
66
66
  - **TaoDropdownMenu** — выпадающее меню с авто-позиционированием у края экрана
67
- - **TaoScrollTop** — плавающая кнопка «наверх» с ripple-эффектом, появляется при обратном скролле
67
+ - **TaoScrollTop** — плавающая кнопка «наверх» с ripple. Появляется при обратном скролле после `boundary`
68
68
 
69
69
  ### Обратная связь
70
70
 
@@ -72,6 +72,16 @@
72
72
  - **confirm()** — вопрос с оверлеем: тот же fluent + `await`. Не тост — ждёт ответ, не исчезает сам.
73
73
  - **TaoToastViewport** / **TaoConfirmHost** — контейнеры; если их нет в разметке, первый вызов сам монтирует их в `body`
74
74
 
75
+ ## Соглашения
76
+
77
+ Тоны визуала: `success` | `danger` | `warning` | `info` | `neutral`.
78
+ `error` у Alert, Tag и `toast()` — синоним `danger`. Button уже `danger`.
79
+ Stages — это процесс, не тон: `wait` / `work` / `ok` / `bad` (`danger` принимается как `bad`).
80
+
81
+ Размеры контролов: `small` | `medium` | `large`.
82
+ Avatar понимает и короткие `s` / `m` / `l`. Divider `gap` раньше называл крупный размер `big` — это алиас `large`.
83
+ Container живёт на другой оси: `wide` / `slim` / `ultra-slim`.
84
+
75
85
  ## Иконки
76
86
 
77
87
  `TaoIcon` не поставляет собственный набор иконок — он рендерит класс `icon-<name>`
@@ -215,7 +225,9 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
215
225
  <TaoAlert type="warning" title="Черновик">Сохраните, прежде чем уйти.</TaoAlert>
216
226
  ```
217
227
 
218
- `TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана.
228
+ `TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана. Delete или «Очистить» внизу списка сбрасывает значение в `null`.
229
+
230
+ `TaoFormField` также оборачивает `TaoTextarea` и `TaoCheckbox` — id, hint и error прокидываются сами.
219
231
 
220
232
  ## Таблица и пагинация
221
233
 
@@ -388,6 +400,8 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
388
400
  ### Ключевые группы токенов
389
401
 
390
402
  - `--tao-color-accent*` — акцентный/брендовый цвет (кнопки primary, активные вкладки, ссылки)
403
+ - `--tao-color-on-accent` — текст на акцентном фоне (`--tao-color-text-on-accent` — алиас)
404
+ - `--tao-color-selection`, `--tao-color-selection-text` — выделение текста (`::selection`)
391
405
  - `--tao-color-surface*` — фоны контейнеров (обычный / приподнятый / утопленный / hover)
392
406
  - `--tao-color-border*` — границы
393
407
  - `--tao-color-text*` — текст (обычный / усиленный / приглушённый / disabled)