Компоненты админ-панели

Краткое описание

Компонент	Назначение
BaseForm	Компонент генератора формы CRUD из конфига
BaseFormItemWrapper	Компонент обёртки формы BaseForm
Breadcrumbs	Компонент хлебных крошек с навигацией
ColorModeButton	Компонент переключателя цветовой схемы
ContentWrapper	Компонент для обёртки содержимого страницы
DebugDrawer	Компонент дебагера payload форм и ответов API
DomainSwitcher	Компонент переключателя воркспейсов
Header	Компонент шапки страницы
InstanceDeleteButton	Компонент кнопки вызова окна удаления экземпляра
PageTitle	Компонент заголовка страницы
Sidebar	Компонент боковой панели
SummaryList	Компонент списка элементов для страниц "Сводка"
Table	Компонент таблицы для страниц сущностей
TableEditable	Компонент таблицы с редактированием, используемый в формах

Подробное описание

BaseForm

Компонент формы для создания и редактирования сущностей, основанной на переданных конфигурациях полей

Props:

Название	Тип	Описание
groupedFields	Object	Структура сгруппированных полей по блокам (blocks, switches, readonlys). Используется для визуальной организации формы
fields	Object	Поля формы, где ключ — имя поля, а значение — конфигурация (type, value, label и т.д.). Используется для генерации полей ввода
rules	Object	Правила валидации для Vuelidate
data	Object	Исходные данные экземпляра сущности. Используется при редактировании
formType	String	Тип формы: "create" или "edit". Определяет логику сабмита

BaseFormItemWrapper

Компонент-обёртка для блока полей формы. Используется для визуального объединения элементов с заголовком, подсказкой и настраиваемыми стилями

Props:

Название	Тип	Описание
title	String	Заголовок блока. Отображается в верхней части обёртки
hint	String	Подсказка или дополнительное описание, выводится рядом с заголовком
viev	String	Режим отображения содержимого: "grid" (по умолчанию, две колонки) или "column" (одна колонка)
customClassWrapper	String	Кастомные классы для внешней обёртки компонента
customClassContent	String	Кастомные классы для контейнера со слотом (содержимым)
disabled	Boolean	Если true, делает блок визуально неактивным (снижает прозрачность)

Breadcrumbs

Компонент для отображения хлебных крошек с возможностью выпадающего меню и кастомных элементов

Props:

Название	Тип	Описание
items	Array	Дополнительные элементы хлебных крошек, добавляемые после стандартных. По умолчанию — пустой массив

Особенности:

• Автоматически добавляет первый элемент — ссылку на "Сводку" (label: 'Сводка', icon: 'i-lucide-house', to: computedSubLink.value)
• Добавляет элементы из useBreadcrumbsMenuItems()
• Использует <UBreadcrumb> с пользовательским слотом dropdown, который реализует выпадающее меню через <UDropdownMenu>

Слоты:

• #dropdown: Кастомизация отображения элементов хлебных крошек с дочерними пунктами (children)

ColorModeButton

Кнопка для переключения между светлой и тёмной темой интерфейса с вариантами отображения: только иконка или иконка с текстом

Props:

Название	Тип	Описание
variantType	String	Тип отображения кнопки: 'icon' (по умолчанию) — только иконка, 'text' — иконка + текст. Допускаются только значения 'icon' или 'text'

Поведение:

• Использует useColorMode() для определения текущего режима и переключения между 'light' и 'dark'

• Варианты отображения:

  • icon — только иконка (sun/moon);
  • text — иконка + подпись (Светлая / Тёмная);

• Отображает <UButton> с соответствующими параметрами

• Обёрнут в <ClientOnly>, чтобы избежать SSR-проблем

• Показывает кнопку-заглушку в режиме загрузки через слот #fallback

Слоты:

• #fallback — отображается при отсутствии данных во время клиентской загрузки

Вот исправленная и полная документация для компонента ContentWrapper.vue:

ContentWrapper

Обёртка для основной контентной области. Обеспечивает вертикальный скролл, отступы и адаптивные промежутки между элементами

<ContentWrapper>
    <div>Контент</div>
</ContentWrapper>

DebugDrawer

Компонент для отображения отладочной информации. Показывает исходные данные и подготовленный payload для отправки на сервер

<script setup>
const formFields = {
	menutitle: {
		value: '',
		type: 'text',
		label: 'Название',
	},
	category_id: {
		value: 5,
		type: 'select',
		label: 'Категория товара',
	},
}

const responseData = {
	menutitle: 'Пример',
	category_id: 5,
}
</script>

<template>
	<DebugDrawer
		:fields="formFields"
		:data="responseData"
	/>
</template>

Props

Название	Тип	Описание
fields	Object	Поля формы, используемые для генерации payload
data	Object	Данные, полученные с бэкенда

Поведение

• Компонент отображается только при debugStatus === true
• При клике на кнопку "Отладка" вызывается useFormatFormData(fields) для обработки полей формы

Вот документация для компонента DomainSwitcher.vue в формате VitePress:

DomainSwitcher

Компонент для переключения между рабочими пространствами в интерфейсе. Использует выпадающее меню с кнопкой и отображением текущего выбранного сайта

<template>
	<DomainSwitcher />
</template>

Props

Компонент не принимает явных пропсов, но использует следующие внешние зависимости:

• sitesDropdownItems — массив объектов для меню
• selectedSiteLabel — название выбранного сайта
• isCollapsed — флаг, определяющий состояние (свернутое или развёрнутое)
• handleSelectSite(item) — функция выбора сайта

Слоты

• #item — пользовательский рендеринг каждого элемента меню

Поведение

• Отображает выпадающее меню с вариантами выбора сайта
• Меню открывается снизу или справа, в зависимости от значения isCollapsed
• Каждый элемент меню может быть обычным, с иконкой или управлением

Вот документация для компонента Header.vue в формате VitePress:

Header

Универсальный компонент шапки страницы. Содержит кнопки управления сайдбаром, навигацией, режимом отладки и действиями

<template>
	<Header
		pagetitle="Название страницы"
		:buttonBackStatus="true"
		:buttonType="'common'"
		:buttonAction="{ label: 'Создать', icon: 'i-lucide-plus', to: '/some-path' }"
	/>
</template>

Props

Название	Тип	По умолчанию	Описание
pagetitle	String	''	Заголовок страницы
buttonType	String	''	Тип кнопки действия (например, 'common')
buttonAction	Object	{}	Объект действия для CommonActionButton
buttonBackStatus	Boolean	false	Показывать кнопку «Назад»

Слоты

Компонент не использует слоты, но включает внутренние компоненты:

• CommonPageTitle
• CommonColorModeButton
• CommonActionButton

Поведение

• Отображает кнопку управления сайдбаром
• Отображает кнопку «Назад», если buttonBackStatus включён и есть история
• Показывает заголовок страницы
• Отображает кнопку переключения цветовой темы
• Включает кнопку режима отладки (debugStatus)
• В зависимости от типа страницы (edit) и глобального режима (isGlobal) добавляет кнопки действий

Вот документация для компонента InstanceDeleteButton.vue в формате VitePress:

InstanceDeleteButton

Кнопка для удаления записи с подтверждением. Открывает модальное окно, в котором необходимо ввести название записи для подтверждения удаления

<template>
	<InstanceDeleteButton :data="{ id: 1, menutitle: 'Пример записи' }" />
</template>

Props

Название	Тип	По умолчанию	Описание
data	Object	{}	Объект с данными записи, должен содержать id и menutitle

Функциональность

• Открывает модальное окно с предупреждением

• Для подтверждения необходимо ввести menutitle

• При успешном удалении:

  • Показывается уведомление
  • Выполняется навигация к списку записей

• При ошибке удаления — отображается сообщение об ошибке

PageTitle

Компонент для отображения заголовка страницы

<template>
	<PageTitle pagetitle="Настройки профиля" />
</template>

Props

Название	Тип	По умолчанию	Описание
pagetitle	String	''	Текст заголовка страницы

Функциональность

• Отображает заголовок уровня h1
• Автоматически обрезает длинный текст с помощью truncate Вот документация для компонента Sidebar.vue в формате VitePress:

Sidebar

Боковая панель навигации с меню, переключателем доменов и выпадающим меню администратора

<template>
	<Sidebar />
</template>

Функциональность

• Отображает навигационное меню с учетом состояния isCollapsed
• Содержит переключатель доменов <CommonDomainSwitcher />
• Отображает админское меню с выпадающим списком и выбором темы
• Использует UNavigationMenu и UDropdownMenu из UI-библиотеки Nuxt UI

Используемые зависимости

• useSidebarItems() — возвращает списки пунктов меню для свернутого и полного вида
• CommonDomainSwitcher — переключатель между доменами
• CommonColorModeButton — кнопка для выбора цветовой темы

Компоненты внутри

• CommonDomainSwitcher
• UNavigationMenu
• UDropdownMenu
• CommonColorModeButton

SummaryList

Компонент для отображения списка сводных карточек с навигацией

<template>
	<SummaryList :items="summaryItems" />
</template>

Props

Название	Тип	Описание	По умолчанию
items	Array	Массив объектов со свойствами title, count, to	[]

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

Каждый элемент массива items рендерится как ссылка <NuxtLink>, которая ведет на соответствующую страницу и содержит:

• Заголовок (title)
• Количество записей (count)

Карточки оформлены в виде адаптивной сетки из 3 колонок

Table

Компонент-обёртка над UTable, включающий заголовок с количеством записей и встроенный отладочный вывод

<template>
	<Table
		:data="rows"
		:columns="columns"
		:pinning="pinning"
		:titles="['запись', 'записи', 'записей']"
	/>
</template>

Props

Название	Тип	Описание	По умолчанию
data	Array	Массив данных для таблицы	[]
columns	Array	Описание колонок таблицы (передаётся в UTable)	—
pinning	Object	Конфигурация закрепления колонок (опция columnPinning в UTable)	{}
titles	Array	Массив словоформ для склонения (например: ['запись', 'записи', 'записей'])	[]

Особенности

• В верхней части таблицы отображается количество отфильтрованных строк с корректным склонением
• Для отладки используется CommonDebugDrawer, которому передаются текущие данные
• Поддерживает слот empty от UTable

Слоты

Название	Описание
empty	Содержимое, если таблица пуста

TableEditable

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

<template>
	<TableEditable
		:data="rows"
		:columns="columns"
		:pinning="pinning"
		:new-row-value="{ name: '', value: '' }"
		@update:data="handleDataUpdate"
	/>
</template>

Props

Название	Тип	Описание	По умолчанию
data	Array	Данные таблицы	[]
columns	Array	Описание колонок	—
pinning	Object	Закреплённые колонки (columnPinning от UTable)	{}
newRowValue	Object	Значение новой строки, добавляемой при нажатии на кнопку	{}
disabled	Boolean	Отключает добавление и удаление строк	false

Emits

Событие	Аргументы	Описание
update:data	Array	Обновлённые данные таблицы

Особенности

• Полноэкранный режим (UDrawer) с таблицей и кнопкой "Добавить значение"
• Возможность включать и отключать фиксированную высоту таблицы
• Динамическое добавление и удаление строк
• Автоматическое вычисление ID для новой строки
• Дополнительная колонка "Управление" с кнопкой удаления

Слоты

Название	Описание
empty	Содержимое, если таблица пуста