@1337exp/taoui 1.0.2 → 1.1.0

package/README.md

@@ -11,8 +11,10 @@
 - **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** — модальное окно с анимацией и слотами
+- **TaoDrawer** — боковая панель (фильтры, настройки). Esc, клик по фону, ловушка фокуса — как у модалки
 - **TaoSpoiler** — раскрывающийся блок (аккордеон)
 - **TaoTabs** — вкладки для переключения между секциями контента
 - **TaoTooltip** — всплывающая подсказка при наведении
@@ -28,14 +30,30 @@
 ### Формы и ввод
 
 - **TaoCheckbox** — чекбокс с поддержкой v-model и слотов pre/post
+- **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
+- **TaoRadio** / **TaoRadioGroup** — взаимоисключающий выбор из 2–5 вариантов
+- **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input
+- **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
+- **TaoFormField** — общие label / hint / error для полей формы
+- **TaoInputNumber** — число с min/max/step и кнопками ± справа. Пустое значение — `null`
+- **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
 - **TaoTextarea** — многострочное поле с авто-высотой и модификаторами (noBorder, noBackground, textCenter, submitOnEnter)
 - **TaoPinCode** — пин-код из N полей с авто-переходом фокуса между ними
 - **TaoSlider** — интерактивный слайдер (drag + клик), с опциональным точным вводом значения по правому клику
-- **TaoFileDrop** — зона загрузки файлов (drag & drop + клик)
+- **TaoFileDrop** — зона загрузки файлов (drag & drop + клик). Текст внутри — слот
 
 ### Отображение данных
 
-- **TaoTag** — тег/бейдж со статусами (neutral, success, danger)
+- **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** — фото или инициалы
+- **TaoTag** — тег/бейдж со статусами (neutral, success, danger, warning, info)
+- **TaoAlert** — инлайн-баннер страницы или ошибки формы (success / error / warning / info)
 - **TaoProgress** — статичная полоса прогресса, опционально с shimmer-анимацией
 - **TaoLoader** — анимированный лоадер (четыре точки)
 - **TaoImage** — обёртка над `<img>` с плавным fade-in при загрузке и плейсхолдером
@@ -44,9 +62,16 @@
 ### Навигация и взаимодействие
 
 - **TaoLink** — ссылка, использующая `<NuxtLink>` в Nuxt-проекте и обычный `<a>` вне его — без дополнительной настройки
+- **TaoBreadcrumb** — крошки: последний пункт — текущая страница
 - **TaoDropdownMenu** — выпадающее меню с авто-позиционированием у края экрана
 - **TaoScrollTop** — плавающая кнопка «наверх» с ripple-эффектом, появляется при обратном скролле
 
+### Обратная связь
+
+- **toast()** — fluent-уведомления: `toast().success().message('Сохранено')`
+- **confirm()** — вопрос с оверлеем: тот же fluent + `await`. Не тост — ждёт ответ, не исчезает сам.
+- **TaoToastViewport** / **TaoConfirmHost** — контейнеры; если их нет в разметке, первый вызов сам монтирует их в `body`
+
 ## Иконки
 
 `TaoIcon` не поставляет собственный набор иконок — он рендерит класс `icon-<name>`
@@ -116,6 +141,190 @@ 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), список переворачивается у края экрана.
+
+## Таблица и пагинация
+
+Таблица рендерит то, что передали: сама данные не режет и не сортирует. Это удобно и для серверной выборки, и для клиентской — страница режется снаружи.
+
+```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>
+```
+
 ## Дизайн-токены и темизация
 
 Стили библиотеки построены в три слоя. Компоненты **никогда** не обращаются
@@ -182,7 +391,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--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 +420,10 @@ npm run dev
 В showcase есть переключатель темы (dark / light) в шапке — так виден
 эффект переопределения токенов без правок кода компонентов.
 
+Showcase смотрит прямо в `src/`, поэтому правки компонентов видны без
+`npm run build`. Сборка `dist/` нужна для публикации и для чужих проектов,
+которые ставят пакет.
+
 ## Разработка
 
 ```bash