@ava3v/ui-vue (0.1.54)
Installation
@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/npm install @ava3v/ui-vue@0.1.54"@ava3v/ui-vue": "0.1.54"About this package
@ava3v/ui-vue
UI-компоненты от ava3v software — production-grade библиотека компонентов для Vue 3 с темизацией, плотностью интерфейса и строгой типизацией.
Технологический стек
- Vue 3 + Composition API
- TypeScript — полная типизация публичного API
- SCSS с
@useи CSS-переменными - Vite — сборка ESM + UMD
- Scoped CSS-переменные для тем (светлая/тёмная) и плотности (обычная/компактная)
Установка
Пакет размещён в приватном npm-реестре. Направьте scope @ava3v на реестр — создайте .npmrc в корне проекта:
@ava3v:registry=https://npm.ava3v.ru
Затем установите пакет:
npm install @ava3v/ui-vue
Использование
import { Ava3vButton } from '@ava3v/ui-vue'
import '@ava3v/ui-vue/dist/ui.css'
<Ava3vButton type="success" @click="save">Сохранить</Ava3vButton>
Серверная загрузка DataGrid
Контракт серверной загрузки Ava3vDataGrid — JSON DTO и C# records для .NET — описан в docs/datagrid-backend-contract.md.
Темизация и плотность
По умолчанию — светлая тема и обычная плотность. Переключение выполняется через data-атрибуты на <html> или <body>:
// Тема
document.documentElement.setAttribute('data-theme', 'dark') // тёмная
document.documentElement.setAttribute('data-theme', 'light') // светлая
// Плотность интерфейса
document.documentElement.setAttribute('data-density', 'compact') // компактная
document.documentElement.setAttribute('data-density', 'default') // обычная
Плотность можно задавать и локально — большинство компонентов принимают проп size="compact".
Переменные (SCSS и CSS)
Все переменные с префиксом --ava3v- — чтобы исключить конфликты со стилями приложения:
--ava3v-primary-color
--ava3v-bg-color
--ava3v-padding
--ava3v-font-size
Токены разнесены по файлам:
| Файл | Назначение |
|---|---|
src/styles/variables/_base.scss |
базовые токены, z-index, transition |
src/styles/variables/_theme.light.scss |
светлая тема |
src/styles/variables/_theme.dark.scss |
тёмная тема |
src/styles/variables/_mode.default.scss |
обычная плотность контролов |
src/styles/variables/_mode.compact.scss |
компактная плотность контролов |
Правила наименования
| Что | Префикс | Пример |
|---|---|---|
| CSS-классы | .ava3v-* |
.ava3v-button |
| CSS-переменные | --ava3v-* |
--ava3v-text-color |
| Компоненты | Ava3v* |
Ava3vButton |
| npm-пакеты | @ava3v/* |
@ava3v/ui-vue |
Что входит
Поля ввода (Input, NumberBox, Select, TagBox, Lookup, DatePicker, TimePicker, Calendar и др.), данные (DataGrid, TreeGrid, PivotGrid, Chart, Scheduler), оверлеи (Modal, Dialog, Tooltip, ContextMenu), обратная связь (Notify, Loader, ProgressBar, Skeleton, Badge, Tag), раскладка (FormLayout, Tabs, Accordion, Splitter, Toolbar) и headless-валидация форм.
Лицензия
Проприетарная. © ava3v software.
Dependencies
Dependencies
| ID | Version |
|---|---|
| file-saver | ^2.0.5 |
| vuedraggable | ^4.1.0 |
Development Dependencies
| ID | Version |
|---|---|
| @types/file-saver | ^2.0.7 |
| @types/node | ^24.0.7 |
| @types/react | ^19.2.17 |
| @types/react-dom | ^19.2.3 |
| @vitejs/plugin-vue | ^6.0.0 |
| @vue/compiler-sfc | ^3.5.17 |
| @vue/tsconfig | ^0.7.0 |
| jsdom | ^29.1.1 |
| react | ^19.2.7 |
| react-dom | ^19.2.7 |
| sass | ^1.89.2 |
| typescript | ~5.8.3 |
| vite | ^7.0.0 |
| vitest | ^4.1.7 |
| vue | ^3.5.17 |
| vue-tsc | ^2.2.10 |
| write-excel-file | ^4.1.1 |
Peer Dependencies
| ID | Version |
|---|---|
| vue | ^3.5.17 |
| write-excel-file | ^4.1.1 |