@1337exp/taoui 1.0.2 → 1.1.1

package/README.md

@@ -11,9 +11,11 @@
 - **TaoButton** — кнопка с вариантами (primary, secondary, ghost, danger), размерами и состояниями
 - **TaoCard** — карточка с поддержкой слотов (cover, headerTitle, header/headerSecondary, title/sub, footer)
 - **TaoCopy** — кнопка копирования текста в буфер обмена
-- **TaoInput** — поле ввода с поддержкой v-model, валидации и различных типов
+- **TaoInput** — поле ввода с поддержкой v-model, валидации и слотов `#prefix` / `#suffix` (иконка или текст внутри рамки)
+- **TaoInputGroup** — склейка снаружи: `#before` | поле | `#after` (протокол, единица, кнопка)
 - **TaoModal** — модальное окно с анимацией и слотами
-- **TaoSpoiler** — раскрывающийся блок (аккордеон)
+- **TaoDrawer** — боковая панель (фильтры, настройки). Esc, клик по фону, ловушка фокуса — как у модалки
+- **TaoSpoiler** — раскрывающийся блок. `v-model` и `aria-expanded`; несколько подряд — не exclusive-аккордеон
 - **TaoTabs** — вкладки для переключения между секциями контента
 - **TaoTooltip** — всплывающая подсказка при наведении
 
@@ -22,21 +24,37 @@
 - **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
-- **TaoTextarea** — многострочное поле с авто-высотой и модификаторами (noBorder, noBackground, textCenter, submitOnEnter)
-- **TaoPinCode** — пин-код из N полей с авто-переходом фокуса между ними
-- **TaoSlider** — интерактивный слайдер (drag + клик), с опциональным точным вводом значения по правому клику
-- **TaoFileDrop** — зона загрузки файлов (drag & drop + клик)
+- **TaoCheckbox** — чекбокс с v-model, слотами pre/post и `indeterminate` (частично выбран)
+- **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
+- **TaoRadio** / **TaoRadioGroup** — взаимоисключающий выбор из 2–5 вариантов
+- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. Сброс — «Очистить» в списке или Delete
+- **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
+- **TaoFormField** — общие label / hint / error для полей формы
+- **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`
+- **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
+- **TaoTextarea** — многострочное поле с авто-высотой. `maxlength` ограничивает ввод, `count` показывает «введено / максимум»
+- **TaoPinCode** — пин-код из N полей. По умолчанию клик стирает ячейку и все справа (`clear-on="focus"`); `clear-on="input"` заменяет цифру только при вводе. Последняя ячейка снимает фокус и эмитит `complete`
+- **TaoSlider** — слайдер: мышь, тач и стрелки. Опциональный точный ввод по правому клику
+- **TaoFileDrop** — зона загрузки файлов (drag & drop + клик). Текст внутри — слот
 
 ### Отображение данных
 
-- **TaoTag** — тег/бейдж со статусами (neutral, success, danger)
-- **TaoProgress** — статичная полоса прогресса, опционально с shimmer-анимацией
+- **TaoTable** — простая таблица: колонки, empty, loading, сортировка через `v-model:sort`. Не datagrid.
+- **TaoPagination** — страницы с многоточием. Клик по «…» прыгает на `jump` страниц (5 по умолчанию)
+- **TaoEmpty** — пустой список, нет результатов, нет прав
+- **TaoStages** — список стадий: `wait` / `work` / `ok` / `bad`. Не линейный степпер
+- **TaoSkeleton** — плейсхолдер загрузки (text / title / circle / rect)
+- **TaoCounter** — витрина числа с переворотом цифр (не инпут)
+- **TaoCarousel** — лента: целый слайд с `autoplay`, карточка с `peek`, полоса с `per-view`. Стрелки через `controls` или `#prev` / `#next`, точки — `dots`
+- **TaoAvatar** — фото или инициалы, размеры `small` / `medium` / `large`. Точка `dot` и счётчик `count`
+- **TaoTag** — тег/бейдж со статусами (neutral, success, danger, warning, info)
+- **TaoAlert** — инлайн-баннер страницы или ошибки формы (success / error / warning / info)
+- **TaoProgress** — статичная полоса (`progress` в %). Проценты сверху по центру или `showPercentage="right"` справа; слоты `#left` / `#right` — подписи, тогда процент справа в скобках. `false` прячет. Ширина — `minWidth` / `maxWidth`, не диапазон значения
 - **TaoLoader** — анимированный лоадер (четыре точки)
 - **TaoImage** — обёртка над `<img>` с плавным fade-in при загрузке и плейсхолдером
 - **TaoIcon** — обёртка для icon-шрифта (см. раздел «Иконки» ниже)
@@ -44,8 +62,25 @@
 ### Навигация и взаимодействие
 
 - **TaoLink** — ссылка, использующая `<NuxtLink>` в Nuxt-проекте и обычный `<a>` вне его — без дополнительной настройки
+- **TaoBreadcrumb** — крошки: последний пункт — текущая страница
 - **TaoDropdownMenu** — выпадающее меню с авто-позиционированием у края экрана
-- **TaoScrollTop** — плавающая кнопка «наверх» с ripple-эффектом, появляется при обратном скролле
+- **TaoScrollTop** — плавающая кнопка «наверх» с ripple. Появляется при обратном скролле после `boundary`
+
+### Обратная связь
+
+- **toast()** — fluent-уведомления: `toast().success().message('Сохранено')`
+- **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`.
 
 ## Иконки
 
@@ -116,6 +151,192 @@ import '@1337exp/taoui/styles.css'
 </template>
 ```
 
+## Toast
+
+Вызов — цепочка в одном тике, `setTimeout(0)` отправляет уведомление.
+
+```javascript
+import { toast } from '@1337exp/taoui'
+
+toast().success().message('Сохранено')
+toast().error().title('Сеть').timeout(5000).message('Нет соединения')
+toast.success('Сохранено')
+toast.warning('Черновик', { timeout: 1000 })
+```
+
+Позиция по умолчанию — `topCenter`. Глобально:
+
+```javascript
+toast.defaults({ position: 'bottomRight' })
+toast.byBottomRight()
+```
+
+`question` с оверлеем в kit нет — это confirm, не toast. Кнопки в тосте, если нужны:
+
+```javascript
+toast().info().message('Удалить файл?').action('Удалить', onRemove)
+```
+
+Viewport можно не вставлять: первый вызов сам создаст его. Если нужен явный контроль (тесты, свой layout):
+
+```vue
+<TaoToastViewport />
+```
+
+## Confirm
+
+Вопрос с оверлеем: всплывает по центру и спрашивает. Это не toast — нет прогресс-бара и автозакрытия, есть `await`, Esc и клик по оверлею = отмена.
+
+```javascript
+import { confirm } from '@1337exp/taoui'
+
+if (await confirm().title('Удалить файл?').message('Это нельзя отменить').danger()) {
+  remove()
+}
+
+const ok = await confirm('Выйти без сохранения?', {
+  ok: 'Выйти',
+  cancel: 'Остаться',
+})
+```
+
+Очередь: второй `confirm()`, пока открыт первый, подождёт. Подписи по умолчанию — «ОК» / «Отмена»:
+
+```javascript
+confirm.defaults({ ok: 'Yes', cancel: 'No' })
+```
+
+## Формы
+
+`TaoFormField` вешает общий label / hint / error и прокидывает `id` во вложенный контрол.
+
+```vue
+<TaoFormField label="Город" hint="Необязательно">
+  <TaoSelect v-model="city" :options="cities" />
+</TaoFormField>
+
+<TaoSwitch v-model="dark" label="Тёмная тема" />
+
+<TaoRadioGroup v-model="plan" legend="Тариф">
+  <TaoRadio value="free" label="Free" />
+  <TaoRadio value="pro" label="Pro" />
+</TaoRadioGroup>
+
+<TaoAlert type="warning" title="Черновик">Сохраните, прежде чем уйти.</TaoAlert>
+```
+
+`TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана. Delete или «Очистить» внизу списка сбрасывает значение в `null`.
+
+`TaoFormField` также оборачивает `TaoTextarea` и `TaoCheckbox` — id, hint и error прокидываются сами.
+
+## Таблица и пагинация
+
+Таблица рендерит то, что передали: сама данные не режет и не сортирует. Это удобно и для серверной выборки, и для клиентской — страница режется снаружи.
+
+```vue
+<TaoTable
+  :columns="columns"
+  :rows="pageRows"
+  v-model:sort="sort"
+  empty-text="Пока нет записей"
+>
+  <template #cell-status="{ row }">
+    <TaoTag :type="row.status === 'active' ? 'success' : 'neutral'">
+      {{ row.status }}
+    </TaoTag>
+  </template>
+</TaoTable>
+
+<TaoPagination v-model:page="page" :total="rows.length" :page-size="8" />
+```
+
+```javascript
+const columns = [
+  { key: 'name', label: 'Имя', sortable: true },
+  { key: 'city', label: 'Город' },
+  { key: 'status', label: 'Статус' },
+]
+```
+
+Слот `cell-<ключ>` перекрывает ячейку. `loading` показывает оверлей, пустой список — текст или слот `#empty`. Клик по шапке с `sortable` крутит `asc → desc → сброс`.
+
+## Пустые состояния и загрузка
+
+```vue
+<TaoEmpty title="Ничего не нашлось">
+  Измените фильтр или сбросьте поиск.
+  <template #action>
+    <TaoButton variant="secondary">Сбросить</TaoButton>
+  </template>
+</TaoEmpty>
+
+<TaoSkeleton variant="title" />
+<TaoSkeleton :lines="3" />
+<TaoSkeleton variant="circle" />
+
+<TaoStages :items="[
+  { key: 'pay', label: 'Оплата', status: 'ok' },
+  { key: 'pack', label: 'Сборка', status: 'work' },
+  { key: 'ship', label: 'Доставка', status: 'wait' },
+]" />
+```
+
+```vue
+<TaoInput v-model="q" placeholder="Найти…">
+  <template #prefix>⌕</template>
+</TaoInput>
+
+<TaoInputGroup>
+  <template #before>https://</template>
+  <TaoInput v-model="host" placeholder="example.com" />
+  <template #after>
+    <TaoButton>Проверить</TaoButton>
+  </template>
+</TaoInputGroup>
+
+<form @submit.prevent="onSave">
+  <TaoFormField label="Email">
+    <TaoInput v-model="email" type="email" />
+  </TaoFormField>
+  <TaoButton type="submit">Сохранить</TaoButton>
+</form>
+
+<TaoFormField label="Количество">
+  <TaoInputNumber v-model="qty" :min="1" :max="99" />
+</TaoFormField>
+
+<TaoQuantity v-model="qty" :max="12" @dec="onDec" />
+
+<TaoFormField label="День доставки" hint="В модели всегда YYYY-MM-DD">
+  <TaoDate v-model="day" min="2026-09-01" max="2026-09-30" />
+</TaoFormField>
+
+<TaoCounter :value="score" :max-digits="6" />
+
+<TaoCarousel :autoplay="4000" loop dots>
+  <article v-for="item in banners" :key="item.id" class="hero">
+    <strong>{{ item.title }}</strong>
+    <span>{{ item.text }}</span>
+  </article>
+</TaoCarousel>
+<TaoCarousel :peek="72" :controls="false" dots>…</TaoCarousel>
+<TaoCarousel v-model="slide" :per-view="5" :peek="28">
+  <template #prev></template>
+  <template #next="{ go, disabled }">
+    <button type="button" :disabled="disabled" @click="go">вперёд</button>
+  </template>
+  <article v-for="item in products" :key="item.id">…</article>
+</TaoCarousel>
+```
+
+`TaoDrawer` — лист сбоку, не модалка по центру:
+
+```vue
+<TaoDrawer v-model="open" title="Фильтры">
+  ...
+</TaoDrawer>
+```
+
 ## Дизайн-токены и темизация
 
 Стили библиотеки построены в три слоя. Компоненты **никогда** не обращаются
@@ -179,10 +400,12 @@ 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)
-- `--tao-color-danger*`, `--tao-color-success*` — статусные цвета
+- `--tao-color-danger*`, `--tao-color-success*`, `--tao-color-warning*`, `--tao-color-info*` — статусные цвета
 - `--tao-color-input-*` — поля ввода отдельно, т.к. фон/текст полей часто не совпадают с surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — скругления (мелкие контролы vs крупные панели)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — тени
@@ -211,6 +434,10 @@ npm run dev
 В showcase есть переключатель темы (dark / light) в шапке — так виден
 эффект переопределения токенов без правок кода компонентов.
 
+Showcase смотрит прямо в `src/`, поэтому правки компонентов видны без
+`npm run build`. Сборка `dist/` нужна для публикации и для чужих проектов,
+которые ставят пакет.
+
 ## Разработка
 
 ```bash