ava3v/uiv0.1.185
Документация Получить доступ

Vue 3 · Reactодна версия · v0.1.185

Интерфейсы для внутренних систем — из готовых деталей

64 компонента, на которых строятся учётные и складские системы: реестры с серверной загрузкой, справочники, формы с валидацией, модальные окна и каркас приложения. Одна тема, один CSS, два фреймворка. Ниже — живое приложение на этих компонентах, а не картинка.

Открыть витрину Запросить доступ

Переходите по разделам меню, сортируйте и фильтруйте, раскрывайте строки, отгружайте перемещения, правьте контрагентов, выгружайте в Excel, переключайте тему и плотность.

Возможности

Собрано под реальные бизнес-приложения

Не набор кнопок, а инструменты для реестров, справочников и документов — того, из чего состоят внутренние системы.

Реестры на 100 000+ строк

DataGrid с серверной и локальной загрузкой через единый контракт DataStoreLoadOptions, виртуализацией, фильтрами, группировкой и итогами. Рядом — TreeGrid, PivotGrid и конструктор фильтров.

Справочники, как в учётных системах

Lookup с табличным попапом: несколько колонок, поиск по всем полям, серверный источник. Плюс Select и TagBox для выбора из списков — с теми же параметрами загрузки, что у грида.

Формы с валидацией

useAva3vForm(model, schema) с группами и правилами required, email, minLength/maxLength, min/max, pattern и своими проверками. Ошибки сервера (ProblemDetails) раскладываются по полям, раскладка — через FormLayout.

Vue и React одной версией

Vue 3 — основной пакет, React — порт на том же CSS и той же headless-логике. Оба выходят синхронно, поведение и внешний вид совпадают.

Тема — это токены

Цвета, шрифт и геометрия — CSS-переменные --ava3v-*. Светлая и тёмная палитры, две плотности, конструктор темы с выгрузкой готового CSS.

Графики без зависимостей

Chart (bar, line, area, donut, pie, с накоплением) и Gauge на чистом SVG — без тяжёлых чарт-библиотек в бандле. Ещё есть Scheduler, Gantt и Timesheet.

Флагман

Ava3vDataGrid: реестр, который не тормозит

Главный компонент любой учётной системы — список документов, товаров или контрагентов. Здесь он описывается декларативно, колонка за колонкой.

  • Серверная загрузка. Сортировка, фильтры и страницы уходят на бэкенд одним объектом.
  • Виртуализация строк. Плавный скролл на 100k+ записей без пагинации.
  • Фильтры на любой вкус. Строка фильтров, фильтры в заголовках, конструктор условий И/ИЛИ.
  • Группировка и итоги. Перетаскивание колонок в панель групп, суммы и счётчики по группам.
WarehouseList.vue 
<script setup lang="ts">
import { Ava3vDataGrid, Ava3vDataGridColumn } from '@ava3v/ui-vue'
import { warehouses as rows } from './data'
</script>

<template>
  <Ava3vDataGrid
    :rows="rows"
    row-key="id"
    selection-mode="multiple"
    :show-search="true"
    :show-filter-row="true"
    :show-group-panel="true"
    :show-pagination="true"
    :page-size="50"
  >
    <Ava3vDataGridColumn data-field="id" label="№" type="number" :width="70" />
    <Ava3vDataGridColumn data-field="name" label="Склад" />
    <Ava3vDataGridColumn data-field="city" label="Город" />
    <Ava3vDataGridColumn data-field="isActive" label="Активен" type="boolean" />
  </Ava3vDataGrid>
</template>

Темизация

Под фирменный стиль — без форка

Каждый цвет, отступ и радиус — CSS-переменная. Поменяйте пару токенов, и весь интерфейс следует за ними, включая тёмную тему.

Светлая

data-theme="light"
  • primary#2563eb
  • success#16794c
  • warning#d99a10
  • danger#c9351c
  • bg-secondary#f6f8fb
  • text#202a37

Тёмная

data-theme="dark"
  • primary#2f8f83
  • success#55c28d
  • warning#ffc857
  • danger#ff7f6a
  • bg-secondary#4e505b
  • text#edf2f7

Две плотности

Default — для форм и карточек, compact — для плотных реестров. Атрибут data-density работает глобально или на любом блоке.

Конструктор темы

Настройте палитры, типографику и геометрию на живом макете и заберите CSS только с изменёнными токенами.

/* theme.css */
:root {
  --ava3v-primary-color: #0f766e;
  --ava3v-border-radius: 8px;
  --ava3v-font-family: "Golos Text", sans-serif;
}

Каталог

64 компонента в 6 разделах

У каждого — страница на витрине: живые пропсы, примеры и код для Vue и React. Нажмите на любой, чтобы открыть.

beta — API ещё может менятьсяОстальные — stable

Витрина

Документация, в которой можно потрогать

docs.ava3v.com — интерактивный стенд, а не PDF. Каждую настройку видно сразу.

  1. Живые свойства

    Пропсы меняются прямо на странице, превью и код обновляются сразу.

  2. Код для Vue и React

    Переключатель в шапке меняет превью и сниппет между пакетами, фрагмент копируется одной кнопкой.

  3. Тема и плотность

    Светлая и тёмная темы, две плотности и конструктор токенов применяются ко всему стенду.

  4. RU и EN

    Язык меняет и описание, и локаль самой библиотеки: даты, тексты грида, кнопки диалогов.

Доступ по запросу

Пакеты лежат в закрытом реестре ava3v software и пока не распространяются публично. Подключение, обновления и история изменений — по согласованию с командой.

Запросить доступ Смотреть витрину