@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 +25 -11
- package/dist/index.cjs +696 -344
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +292 -169
- package/dist/index.mjs +697 -345
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +488 -306
- package/package.json +1 -1
- package/src/styles/base.css +10 -0
- package/src/styles/semantic.css +3 -1
- package/src/styles/themes/light.css +3 -1
- package/src/styles/variables.css +0 -77
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** — чекбокс с
|
|
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** — многострочное поле с
|
|
41
|
-
- **TaoPinCode** — пин-код из N
|
|
42
|
-
- **TaoSlider** —
|
|
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** — статичная полоса
|
|
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)
|