@1337exp/taoui 1.1.0 → 1.2.2

package/README.md

@@ -9,13 +9,13 @@
 
 - **TaoBlock** — базовый контейнер с настраиваемыми отступами и скруглением
 - **TaoButton** — кнопка с вариантами (primary, secondary, ghost, danger), размерами и состояниями
-- **TaoCard** — карточка с поддержкой слотов (cover, headerTitle, header/headerSecondary, title/sub, footer)
+- **TaoCard** — карточка со слотами cover / header / footer. В `#cover` — фото или `TaoCarousel`
 - **TaoCopy** — кнопка копирования текста в буфер обмена
 - **TaoInput** — поле ввода с поддержкой v-model, валидации и слотов `#prefix` / `#suffix` (иконка или текст внутри рамки)
 - **TaoInputGroup** — склейка снаружи: `#before` | поле | `#after` (протокол, единица, кнопка)
 - **TaoModal** — модальное окно с анимацией и слотами
 - **TaoDrawer** — боковая панель (фильтры, настройки). Esc, клик по фону, ловушка фокуса — как у модалки
-- **TaoSpoiler** — раскрывающийся блок (аккордеон)
+- **TaoSpoiler** — раскрывающийся блок. `v-model` и `aria-expanded`; несколько подряд — не exclusive-аккордеон
 - **TaoTabs** — вкладки для переключения между секциями контента
 - **TaoTooltip** — всплывающая подсказка при наведении
 
@@ -24,22 +24,23 @@
 - **TaoContainer** — контейнер с ограничением ширины (wide/slim/ultra-slim) и авто-центровкой
 - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
 - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
-- **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ)
+- **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
 - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)
 
 ### Формы и ввод
 
-- **TaoCheckbox** — чекбокс с поддержкой v-model и слотов pre/post
+- **TaoCheckbox** — чекбокс с v-model, слотами pre/post и `indeterminate` (частично выбран)
 - **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
 - **TaoRadio** / **TaoRadioGroup** — взаимоисключающий выбор из 2–5 вариантов
-- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input
+- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. Сброс — «Очистить» в списке или Delete
+- **TaoCombobox** — Select с полем: фильтр по вводу, `allow-create` пишет своё в `v-model`, `create` — чтобы родитель дополнил список
 - **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
 - **TaoFormField** — общие label / hint / error для полей формы
 - **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`
 - **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
-- **TaoTextarea** — многострочное поле с авто-высотой и модификаторами (noBorder, noBackground, textCenter, submitOnEnter)
-- **TaoPinCode** — пин-код из N полей с авто-переходом фокуса между ними
-- **TaoSlider** — интерактивный слайдер (drag + клик), с опциональным точным вводом значения по правому клику
+- **TaoTextarea** — многострочное поле с авто-высотой. `maxlength` ограничивает ввод, `count` показывает «введено / максимум»
+- **TaoPinCode** — пин-код из N полей. По умолчанию клик стирает ячейку и все справа (`clear-on="focus"`); `clear-on="input"` заменяет цифру только при вводе. Последняя ячейка снимает фокус и эмитит `complete`
+- **TaoSlider** — слайдер: мышь, тач и стрелки. Опциональный точный ввод по правому клику
 - **TaoFileDrop** — зона загрузки файлов (drag & drop + клик). Текст внутри — слот
 
 ### Отображение данных
@@ -51,10 +52,10 @@
 - **TaoSkeleton** — плейсхолдер загрузки (text / title / circle / rect)
 - **TaoCounter** — витрина числа с переворотом цифр (не инпут)
 - **TaoCarousel** — лента: целый слайд с `autoplay`, карточка с `peek`, полоса с `per-view`. Стрелки через `controls` или `#prev` / `#next`, точки — `dots`
-- **TaoAvatar** — фото или инициалы
+- **TaoAvatar** — фото или инициалы, размеры `small` / `medium` / `large`. Точка `dot` и счётчик `count`
 - **TaoTag** — тег/бейдж со статусами (neutral, success, danger, warning, info)
 - **TaoAlert** — инлайн-баннер страницы или ошибки формы (success / error / warning / info)
-- **TaoProgress** — статичная полоса прогресса, опционально с shimmer-анимацией
+- **TaoProgress** — статичная полоса (`progress` в %). Проценты сверху по центру или `showPercentage="right"` справа; слоты `#left` / `#right` — подписи, тогда процент справа в скобках. `false` прячет. Ширина — `minWidth` / `maxWidth`, не диапазон значения
 - **TaoLoader** — анимированный лоадер (четыре точки)
 - **TaoImage** — обёртка над `<img>` с плавным fade-in при загрузке и плейсхолдером
 - **TaoIcon** — обёртка для icon-шрифта (см. раздел «Иконки» ниже)
@@ -64,7 +65,7 @@
 - **TaoLink** — ссылка, использующая `<NuxtLink>` в Nuxt-проекте и обычный `<a>` вне его — без дополнительной настройки
 - **TaoBreadcrumb** — крошки: последний пункт — текущая страница
 - **TaoDropdownMenu** — выпадающее меню с авто-позиционированием у края экрана
-- **TaoScrollTop** — плавающая кнопка «наверх» с ripple-эффектом, появляется при обратном скролле
+- **TaoScrollTop** — плавающая кнопка «наверх» с ripple. Появляется при обратном скролле после `boundary`
 
 ### Обратная связь
 
@@ -72,6 +73,16 @@
 - **confirm()** — вопрос с оверлеем: тот же fluent + `await`. Не тост — ждёт ответ, не исчезает сам.
 - **TaoToastViewport** / **TaoConfirmHost** — контейнеры; если их нет в разметке, первый вызов сам монтирует их в `body`
 
+## Соглашения
+
+Тоны визуала: `success` | `danger` | `warning` | `info` | `neutral`.
+`error` у Alert, Tag и `toast()` — синоним `danger`. Button уже `danger`.
+Stages — это процесс, не тон: `wait` / `work` / `ok` / `bad` (`danger` принимается как `bad`).
+
+Размеры контролов: `small` | `medium` | `large`.
+Avatar понимает и короткие `s` / `m` / `l`. Divider `gap` раньше называл крупный размер `big` — это алиас `large`.
+Container живёт на другой оси: `wide` / `slim` / `ultra-slim`.
+
 ## Иконки
 
 `TaoIcon` не поставляет собственный набор иконок — он рендерит класс `icon-<name>`
@@ -215,7 +226,11 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
 <TaoAlert type="warning" title="Черновик">Сохраните, прежде чем уйти.</TaoAlert>
 ```
 
-`TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана.
+`TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана. Delete или «Очистить» внизу списка сбрасывает значение в `null`.
+
+`TaoCombobox` — то же меню, но с полем. Печатаете — варианты режутся. `allow-create` пишет введённое в `v-model`, если точного совпадения нет. Список сам не меняется: слушайте `create` и добавьте option снаружи.
+
+`TaoFormField` также оборачивает `TaoTextarea` и `TaoCheckbox` — id, hint и error прокидываются сами.
 
 ## Таблица и пагинация
 
@@ -388,6 +403,8 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 ### Ключевые группы токенов
 
 - `--tao-color-accent*` — акцентный/брендовый цвет (кнопки primary, активные вкладки, ссылки)
+- `--tao-color-on-accent` — текст на акцентном фоне (`--tao-color-text-on-accent` — алиас)
+- `--tao-color-selection`, `--tao-color-selection-text` — выделение текста (`::selection`)
 - `--tao-color-surface*` — фоны контейнеров (обычный / приподнятый / утопленный / hover)
 - `--tao-color-border*` — границы
 - `--tao-color-text*` — текст (обычный / усиленный / приглушённый / disabled)