@1337exp/taoui 1.3.5 → 1.5.0

package/README.md

@@ -10,7 +10,7 @@ change a handful of CSS variables and the whole kit follows.
 ### Basics
 
 - **TaoBlock** — container with padding and radius
-- **TaoButton** — `primary` / `secondary` / `ghost` / `danger`, sizes and states
+- **TaoButton** — `primary` / `secondary` / `ghost` / `text` / `danger`. `tone` tints ghost and text (danger, success, warning, info)
 - **TaoCard** — card with cover / header / footer slots. `#cover` can be a photo or `TaoCarousel`
 - **TaoCopy** — clipboard icon. After a click, a “Copied” tooltip; if the trigger is gone, the tooltip is too
 - **TaoInput** — text field with v-model, validation, and `#prefix` / `#suffix` slots (icon or text inside the frame)
@@ -20,7 +20,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoSpoiler** — disclosure. `v-model` and `aria-expanded`. Neighbours do not close each other
 - **TaoSpoilerGroup** — accordion: `v-model` is the open panel key (`null` = all closed); spoilers take `name`
 - **TaoTabs** — tabbed sections
-- **TaoTooltip** — hover hint
+- **TaoTooltip** — hover hint. `top` / `bottom` / `left` / `right`, flips at the viewport edge
 - **TaoPopover** — click panel with any slot content, Esc and outside click. Not a tooltip, not an action menu
 
 ### Layout
@@ -36,7 +36,8 @@ change a handful of CSS variables and the whole kit follows.
 
 - **TaoCheckbox** — checkbox with v-model, pre/post slots, and `indeterminate`
 - **TaoSwitch** — boolean toggle (`role="switch"`)
-- **TaoRadio** / **TaoRadioGroup** — exclusive choice among 2–5 options
+- **TaoRadio** / **TaoRadioGroup** — classic radios: longer labels, can stack vertically
+- **TaoSegmented** / **TaoSegmentedOption** — compact exclusive choice among 2–5 short options. Not tabs
 - **TaoSelect** — dropdown with keyboard, same chrome as Input. Clear via “Clear” in the list or Delete
 - **TaoCombobox** — Select with a field: type to filter, `allow-create` writes a custom value into `v-model`, `create` lets the parent append the list
 - **TaoDate** — a single day: `YYYY-MM-DD`, no time, no timezone. Calendar popup like Select
@@ -59,7 +60,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoCounter** — flipping digits (not an input)
 - **TaoCarousel** — strip: full slide with `autoplay`, card with `peek`, row with `per-view`. Arrows via `controls` or `#prev` / `#next`, dots via `dots`
 - **TaoAvatar** — photo or initials, sizes `small` / `medium` / `large`. Status `dot` and `count`
-- **TaoTag** — badge with tones (neutral, success, danger, warning, info)
+- **TaoTag** — badge with tones. `#prefix` (avatar), `closable` dismisses the chip, `flat` drops the border
 - **TaoAlert** — inline page/form banner (success / error / warning / info)
 - **TaoProgress** — static bar (`progress` in %). Percent centered on top, or `showPercentage="right"`; `#left` / `#right` slots are captions, then the percent sits in parentheses on the right. `false` hides it. Width is `minWidth` / `maxWidth`, not the value domain
 - **TaoLoader** — four-dot spinner
@@ -232,15 +233,34 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
   <TaoRadio value="pro" label="Pro" />
 </TaoRadioGroup>
 
+<TaoSegmented v-model="period" legend="Period">
+  <TaoSegmentedOption value="week">Week</TaoSegmentedOption>
+  <TaoSegmentedOption value="month">Month</TaoSegmentedOption>
+  <TaoSegmentedOption value="year">Year</TaoSegmentedOption>
+</TaoSegmented>
+
 <TaoAlert type="warning" title="Draft">Save before you leave.</TaoAlert>
 ```
 
+`TaoSegmented` is a short exclusive choice with every option visible. It is not page navigation — that is `TaoTabs`. Longer labels or more than 5–6 items belong in `TaoRadioGroup` or `TaoSelect`.
+
 `TaoSelect` opens from the keyboard (arrows, Enter, Esc); the list flips at the viewport edge. Delete or “Clear” at the bottom of the list resets the value to `null`.
 
 `TaoCombobox` is the same menu with a field. Typing filters options. `allow-create` writes the typed string into `v-model` when there is no exact match. The list does not mutate itself: listen to `create` and append an option from the parent.
 
 `TaoFormField` also wraps `TaoTextarea` and `TaoCheckbox` — id, hint, and error are forwarded for you.
 
+`TaoTag` can be a chip: `#prefix` on the left (usually `TaoAvatar`), `closable` draws a cross and emits `close`. The close click does not bubble. `flat` drops the border and keeps the fill.
+
+```vue
+<TaoTag type="neutral" closable @close="remove">
+  <template #prefix>
+    <TaoAvatar name="Anna Kozlova" size="small" />
+  </template>
+  Anna Kozlova
+</TaoTag>
+```
+
 ## Table and pagination
 
 The table renders what you pass in: it does not slice or sort the data. That works for both server-side and client-side paging — the page is cut outside.

package/README.ru.md

@@ -10,7 +10,7 @@
 ### Базовые
 
 - **TaoBlock** — базовый контейнер с настраиваемыми отступами и скруглением
-- **TaoButton** — кнопка с вариантами (primary, secondary, ghost, danger), размерами и состояниями
+- **TaoButton** — кнопка: `primary` / `secondary` / `ghost` / `text` / `danger`. `tone` красит ghost и text (danger, success, warning, info)
 - **TaoCard** — карточка со слотами cover / header / footer. В `#cover` — фото или `TaoCarousel`
 - **TaoCopy** — иконка копирования в буфер. После клика сверху тултип «Скопировано»; если кнопку убрали — тултип тоже
 - **TaoInput** — поле ввода с поддержкой v-model, валидации и слотов `#prefix` / `#suffix` (иконка или текст внутри рамки)
@@ -20,7 +20,7 @@
 - **TaoSpoiler** — раскрывающийся блок. `v-model` и `aria-expanded`. Несколько подряд сами друг друга не закрывают
 - **TaoSpoilerGroup** — аккордеон: `v-model` — ключ открытой панели (`null` — все закрыты), у спойлера `name`
 - **TaoTabs** — вкладки для переключения между секциями контента
-- **TaoTooltip** — всплывающая подсказка при наведении
+- **TaoTooltip** — всплывающая подсказка при наведении. `top` / `bottom` / `left` / `right`, у края экрана переворачивается
 - **TaoPopover** — панель по клику: слот с любым контентом, Esc и клик снаружи. Не тултип и не меню действий
 
 ### Layout
@@ -36,7 +36,8 @@
 
 - **TaoCheckbox** — чекбокс с v-model, слотами pre/post и `indeterminate` (частично выбран)
 - **TaoSwitch** — переключатель для булевых настроек (`role="switch"`)
-- **TaoRadio** / **TaoRadioGroup** — взаимоисключающий выбор из 2–5 вариантов
+- **TaoRadio** / **TaoRadioGroup** — классические радиокнопки: длинные подписи, можно столбиком
+- **TaoSegmented** / **TaoSegmentedOption** — компактный выбор из 2–5 коротких вариантов. Не вкладки
 - **TaoSelect** — выпадающий список с клавиатурой, тот же визуал, что у Input. Сброс — «Очистить» в списке или Delete
 - **TaoCombobox** — Select с полем: фильтр по вводу, `allow-create` пишет своё в `v-model`, `create` — чтобы родитель дополнил список
 - **TaoDate** — один день: `YYYY-MM-DD`, без часов и пояса. Календарь как у Select
@@ -59,7 +60,7 @@
 - **TaoCounter** — витрина числа с переворотом цифр (не инпут)
 - **TaoCarousel** — лента: целый слайд с `autoplay`, карточка с `peek`, полоса с `per-view`. Стрелки через `controls` или `#prev` / `#next`, точки — `dots`
 - **TaoAvatar** — фото или инициалы, размеры `small` / `medium` / `large`. Точка `dot` и счётчик `count`
-- **TaoTag** — тег/бейдж со статусами (neutral, success, danger, warning, info)
+- **TaoTag** — тег/бейдж со статусами. `#prefix` (аватар), `closable` убирает чип, `flat` — без рамки
 - **TaoAlert** — инлайн-баннер страницы или ошибки формы (success / error / warning / info)
 - **TaoProgress** — статичная полоса (`progress` в %). Проценты сверху по центру или `showPercentage="right"` справа; слоты `#left` / `#right` — подписи, тогда процент справа в скобках. `false` прячет. Ширина — `minWidth` / `maxWidth`, не диапазон значения
 - **TaoLoader** — анимированный лоадер (четыре точки)
@@ -233,15 +234,34 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
   <TaoRadio value="pro" label="Pro" />
 </TaoRadioGroup>
 
+<TaoSegmented v-model="period" legend="Период">
+  <TaoSegmentedOption value="week">Неделя</TaoSegmentedOption>
+  <TaoSegmentedOption value="month">Месяц</TaoSegmentedOption>
+  <TaoSegmentedOption value="year">Год</TaoSegmentedOption>
+</TaoSegmented>
+
 <TaoAlert type="warning" title="Черновик">Сохраните, прежде чем уйти.</TaoAlert>
 ```
 
+`TaoSegmented` — короткий взаимоисключающий выбор, все варианты видны сразу. Не для навигации по страницам: это `TaoTabs`. Длинные подписи или больше 5–6 пунктов — `TaoRadioGroup` или `TaoSelect`.
+
 `TaoSelect` открывается с клавиатуры (стрелки, Enter, Esc), список переворачивается у края экрана. Delete или «Очистить» внизу списка сбрасывает значение в `null`.
 
 `TaoCombobox` — то же меню, но с полем. Печатаете — варианты режутся. `allow-create` пишет введённое в `v-model`, если точного совпадения нет. Список сам не меняется: слушайте `create` и добавьте option снаружи.
 
 `TaoFormField` также оборачивает `TaoTextarea` и `TaoCheckbox` — id, hint и error прокидываются сами.
 
+`TaoTag` может быть чипом: `#prefix` слева (обычно `TaoAvatar`), `closable` рисует крестик и эмитит `close`. Клик по крестику наружу не всплывает. `flat` снимает рамку, заливка остаётся.
+
+```vue
+<TaoTag type="neutral" closable @close="remove">
+  <template #prefix>
+    <TaoAvatar name="Анна Козлова" size="small" />
+  </template>
+  Анна Козлова
+</TaoTag>
+```
+
 ## Таблица и пагинация
 
 Таблица рендерит то, что передали: сама данные не режет и не сортирует. Это удобно и для серверной выборки, и для клиентской — страница режется снаружи.