@ava3v/ui-vue (0.1.1)

2026-07-04T21:07:04+03:00

Setup this registry in your project .npmrc file:

@ava3v:registry=

To install the package using npm, run the following command:

npm install @ava3v/ui-vue@0.1.1

or add it to the package.json file:

"@ava3v/ui-vue": "0.1.1"

For more information on the npm registry, see the documentation.

ava3v-ui

UI-компоненты от ava3v software
Приватная Vue 3-библиотека компонентов со стилизуемыми темами, SCSS-переменными и поддержкой компактного режима.

🚀 Технологический стек

Vue 3 + Composition API
TypeScript для типизации
SCSS с @use и переменными
Vite как сборщик
Scoped CSS-переменные для тем/режимов
Приватный NPM-репозиторий: https://npm.ava3v.ru

📦 Установка

npm install @ava3v/ui-vue --registry=https://npm.ava3v.ru

📚 Использование

import { Ava3vButton } from '@ava3v/ui-vue'
import '@ava3v/ui-vue/dist/ui.css'

<Ava3vButton>Нажми меня</Ava3vButton>

DataGrid backend

Контракт серверной загрузки 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')

Для обратной совместимости размер также понимает data-size.

🎨 Переменные (SCSS и CSS)

Все переменные оформлены с префиксом --ava3v-, чтобы исключить конфликты и повысить читаемость.

Примеры:

--ava3v-primary-color
--ava3v-bg-color
--ava3v-padding
--ava3v-font-size

CSS-переменные разделены по файлам:

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`
Компоненты Vue	`Ava3v*`	`Ava3vButton`
NPM-пакеты	`@ava3v/*`	`@ava3v/ui-vue`

📤 Публикация в приватный npm

# 1. Перейти в репозиторий компонентов
cd /Users/valentinvyzhletsov/VueComponents

# 2. Проверить авторизацию в приватном npm
npm whoami --registry=https://npm.ava3v.ru

# 3. Если авторизации нет, войти через legacy login
npm login --registry=https://npm.ava3v.ru --auth-type=legacy

# 4. Поднять версию без git tag
npm version patch --no-git-tag-version

# 5. Собрать библиотеку и декларации типов
npm run build

# 6. Опубликовать версию
npm publish

После публикации подключить новую версию в проекте:

cd /Users/valentinvyzhletsov/WareHub/frontend
npm install @ava3v/ui-vue@latest
npm run build

Если npm version не может записать файлы из-за symlink или sandbox, версию можно поднять вручную в package.json и package-lock.json, затем выполнить npm run build и npm publish.

Что не делаем:

npm audit fix --force

Силовой audit fix может обновить зависимости с breaking changes. Сначала разбираем причину уязвимости отдельно.

📁 Структура проекта

src/
├── components/            # Vue-компоненты
├── styles/                # Темы, переменные, SCSS
│   ├── variables/
│   │   ├── _base.scss
│   │   ├── _theme.light.scss
│   │   ├── _theme.dark.scss
│   │   ├── _mode.default.scss
│   │   ├── _mode.compact.scss
│   └── ui.scss
├── index.ts               # Точка входа: экспорт всех компонентов

🧠 Планы / TODO

Storybook или Playground для демо-компонентов
CI-публикация из GitHub Actions
Генерация автодоки (VitePress или аналог)
Тестирование компонентов (Vitest / Playwright)

👑 Автор

Raskolbasko
🔐 Приватный NPM: https://npm.ava3v.ru

Dependencies

ID	Version
file-saver	^2.0.5
vue	^3.5.17
vuedraggable	^4.1.0

Development Dependencies

ID	Version
@types/file-saver	^2.0.7
@types/node	^24.0.7
@vitejs/plugin-vue	^6.0.0
@vue/compiler-sfc	^3.5.17
@vue/tsconfig	^0.7.0
sass	^1.89.2
typescript	~5.8.3
vite	^7.0.0
vitest	^4.1.7
vue-tsc	^2.2.10
write-excel-file	^4.1.1

Peer Dependencies

ID	Version
write-excel-file	^4.1.1

Details

npm

2026-07-04 21:07:04 +03:00

3

latest

709 KiB

Assets (1)

ui-vue-0.1.1.tgz 709 KiB

Versions (1) View all

0.1.1

2026-07-04