@1337exp/taoux
| Install | |
|---|---|
npm install @1337exp/taoux |
|
| Latest Version: | 0.1.1 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | Oct 18, 2026 |
| Links: | GitHub · npm |
TaoUX
Блоки взаимодействия для Vue-приложений.
Импортируйте только нужное, дизайн приносите свой.
English · Русский · С TaoUI · Модули · Песочница · Список изменений
Почему TaoUX
- Платите только за используемое. Каждый модуль это свой subpath-импорт и своя точка входа:
import { zoomAt } from '@1337exp/taoux/camera'.sideEffectsобъявлен, остальное режется tree-shaking'ом. - Сначала логика. Ядро модуля (математика камеры, история, easing, воспроизведение) это обычный TypeScript без Vue и DOM, если это не его задача, и тесты написаны именно так. Компоненты тонкая оболочка сверху.
- Ваш дизайн. Компоненты настраиваются CSS-переменными
--tx-*с разумными тёмными значениями по умолчанию. Дизайн-система не обязательна. - С TaoUI в одну строку.
import '@1337exp/taoux/taoui.css', и редакторы следуют теме TaoUI. Подробности ниже. - Типизированный i18n, undo/redo, автосохранение, воспроизведение и остальное, что каждое приложение-редактор пишет заново.
 curveeditor — сетка, шаг, границы, ручки Безье, клавиатура |
 gradienteditor — остановки, ручки, gradientCss |
 playback — время, цикл, скорость, перемотка; usePlayback + TaoTimeline из TaoUI |
 curvefield — кривая с полями TaoUI в одном компоненте |
Установка
npm install @1337exp/taoux
npm install @1337exp/taoui # по желанию: только для curvefield и моста к TaoUI
Peer-зависимости: vue ^3.4 (для Vue-модулей) и, по желанию, @1337exp/taoui ^3.2.1. Модулям без Vue ничего не нужно.
Только ESM. Импорт по subpath; корневой точки входа нет намеренно, чтобы в сборку не попало ничего неимпортированного.
С TaoUI
TaoUX и TaoUI это два отдельных пакета: у TaoUX нет своих кнопок и полей, а TaoUI ничего не знает про TaoUX. Связать их это две вещи, и первая делается одной строкой:
import '@1337exp/taoui/styles.css';
import '@1337exp/taoux/taoui.css'; // мост: --tx-* → --tao-*, редакторы следуют теме TaoUI
import '@1337exp/taoux/curveeditor.css'; // стили Vue-модуля подключаются явно
taoui.css это обычный CSS с нулевой специфичностью и без зависимости от TaoUI, поэтому любое ваше правило главнее. Дальше значения ходят через v-model: usePlayback ведёт TaoTimeline, поле TaoUI правит точку кривой, слайдер TaoUI задаёт прозрачность остановки градиента. С кодом: docs/taoui.ru.md. Без моста редакторы остаются с тёмными значениями по умолчанию; TaoxCurveField (собран из компонентов TaoUI) подстраивается под тему сам.
Модули
Каждый модуль — отдельный subpath-импорт, поэтому в сборку попадает только то, что реально используется:
import { zoomAt } from '@1337exp/taoux/camera';
import { History } from '@1337exp/taoux/history';
| Модуль | Что делает | Зависимости |
|---|---|---|
camera |
камера холста: pan, zoom вокруг курсора, экран ↔ мир | нет |
history |
undo/redo на снимках-строках со склейкой частых правок | нет |
storage |
автосохранение в localStorage без исключений | нет |
file |
скачивание текста как файла, лимит размера | DOM |
snap |
мягкая привязка к сетке с порогом по масштабу камеры | нет |
wheel |
колесо/тачпад → pan или zoom (как в Figma) | нет |
edgescroll |
скорость автопрокрутки у края и готовый цикл createEdgeScroller (холст, редакторы кривых и любое перетаскивание) |
нет |
gestures |
сенсорные жесты: тап, двойной тап, долгое нажатие, щипок | нет |
touch |
coarse — есть ли грубый указатель (палец) |
vue (peer) |
curve |
пути связей: безье между пинами, стрелки постоянного экранного размера | нет |
ids |
uid(prefix, taken) |
нет |
ease |
функции движения между точками кривой: 8 семейств × in / out / in-out, linear, step, кубический Безье; easeValue, isEase (редактор рисует ими, рантайм считает ими же) |
нет |
num |
мелкая числовая математика: clamp, roundTo, snapTo, niceStep, ticks (общая для кривой, градиента и воспроизведения) |
нет |
session |
жизненный цикл документа: история, автосохранение, файлы, восстановление, уведомления | vue (peer) |
palette |
поиск и группы нод для палитры | нет |
links (Vue) |
слой связей: SVG из готовой геометрии, --tx-link-* |
vue (peer) |
canvas (Vue) |
холст: жесты мыши и сенсора, колесо, автопрокрутка, клавиши; контракт CanvasHost |
vue (peer) |
curveeditor (Vue) |
поле редактора кривой: сетка, шаг, границы, знаки, автопрокрутка у края; операции над точками; переходы между точками с ручками Безье; клавиатура (Tab, стрелки, Shift, Insert, Delete) | vue (peer) |
curvefield (Vue, ярус 2) |
TaoxCurveField: кривая с полями на компонентах TaoUI: время и значение точки, переход к следующей точке (ease), шаг, удаление и сброс; надписи задаёт приложение |
vue, @1337exp/taoui (peer) |
gradienteditor (Vue) |
полоса градиента с ручками остановок; операции над остановками, gradientCss; клавиатура (Tab, стрелки, Home/End, Insert, Delete) |
vue (peer) |
playback |
модель воспроизведения: время, пауза, цикл, скорость, перемотка; createPlayback без Vue и usePlayback для компонента |
vue (peer, для usePlayback) |
pins |
позиции пинов-строк, измеренные по DOM: usePinMeasure, createPinRegistry |
vue (peer) |
i18n |
типизированный i18n: createI18n({ locales, fallback, storageKey }) |
vue (peer, опционально) |
Vue-модули (links, canvas, curveeditor, curvefield, gradienteditor) требуют явного импорта стилей: import '@1337exp/taoux/canvas.css'. Составные модули (session, palette, links, canvas, pins, curveeditor, gradienteditor, playback) импортируют только примитивы. Ярус 2, поля (curvefield), собирает составные модули в готовое поле на компонентах TaoUI: только ему можно импортировать TaoUI, поэтому @1337exp/taoui это необязательная peer-зависимость. Для curvefield нужны оба файла стилей, curveeditor.css и curvefield.css. Всё это охраняет тест tiers.test.ts; контракт холста описан в docs/canvas.ru.md, переходы между точками кривой в docs/ease.ru.md.
Правило: модуль попадает сюда, когда он понадобился во втором проекте. Ядро модулей не знает про Vue и DOM, если это не их задача.
Разработка
npm install
npm test # vitest
npm run typecheck
npm run build # dist/ (vite + tsc declarations)
npm run smoke # упаковать, поставить во временное приложение рядом с TaoUI, собрать
npm run sandbox # песочница: http://localhost:5300, страницы из sandbox/
npm run dev # watch: пересборка JS и деклараций
Новый модуль: файл src/<имя>.ts (или папка с index.ts) и запись в exports в package.json; тест exports.test.ts следит, чтобы они совпадали. Подробнее: CONTRIBUTING.ru.md.
Работа с локальной копией вместо npm: в package.json проекта "@1337exp/taoux": "file:../taoux" (правки видны сразу после npm run dev здесь). Тогда в vite.config.ts потребителя нужен resolve: { dedupe: ['vue'] }, а в tsconfig.json в paths строка "vue": ["./node_modules/vue"]: иначе у слинкованного пакета своя копия Vue и реактивность ломается. Обычной установке из npm ничего из этого не нужно.
Песочница
Папка sandbox/ это демо и поле для проверки: страницы подключают модули прямо из src/, без сборки. Сейчас там curveeditor, curvefield, gradienteditor, slider, color и playback, с переключателем языка (EN / RU) и темы (тёмная / светлая: тема TaoUI через мост). Новая страница = sandbox/<имя>.html + .ts + демо .vue и ссылка в sandbox/index.html. npm run sandbox:build собирает статическую копию с относительными путями, её можно положить в любую папку (например, /sandbox/taoux/).
Скриншоты и ролики в этом README сняты с песочницы: см. docs/media.
Участие в проекте
Issues и pull request'ы приветствуются, см. CONTRIBUTING.ru.md. Об уязвимостях: SECURITY.md.
Лицензия
MIT © 2026 1337exp
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.1.1 | ^3.4.0 | MIT | |
| 0.1.0 | ^3.4.0 | MIT |
Pre-releases (1)
| Version | Released | License |
|---|---|---|
| 0.0.0-stage |