@cavicode/uikit-webadmin (0.1.4)

Published 2026-08-29 17:19:22 +03:00 by CaviCode

Setup this registry in your project .npmrc file:

@cavicode:registry=

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

npm install @cavicode/uikit-webadmin@0.1.4

or add it to the package.json file:

"@cavicode/uikit-webadmin": "0.1.4"

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

@cavicode/uikit-webadmin

Vue 3 UI-компоненты административных интерфейсов CaviCode/HVZ.

Установка

npm install @cavicode/uikit-webadmin @tanstack/vue-table

.npmrc:

@cavicode:registry=https://git.cavicode.tech/api/packages/cavicode/npm/

@tanstack/vue-table требуется текущим единым entry пакета, даже если consumer напрямую не использует UiDataTable. В package.json пакета peer metadata пока объявляет только Vue; consumer не должен полагаться на автоматическую установку TanStack.

Nuxt 4

// plugins/uikit.ts
import CavicodeUIKitWebadmin from '@cavicode/uikit-webadmin'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(CavicodeUIKitWebadmin)
})

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@cavicode/uikit-webadmin/style.css'],
})

Для template types consumer добавляет GlobalComponents augmentation. Nuxt components[] не подходит: опубликованный dist содержит compiled JS и .d.ts, а не каталог исходных .vue.

Tailwind v4 consumer должен импортировать package CSS в общий pipeline и сканировать compiled dist:

@import "tailwindcss";
@import "@cavicode/uikit-webadmin/style.css";
@source "../../../node_modules/@cavicode/uikit-webadmin/dist";

Путь @source зависит от расположения consumer stylesheet.

Компоненты (30)

Поля: UiInput, UiTextarea, UiSelect, UiCheckbox, UiRadio, UiColorInput, UiSearchInput.
Кнопки: UiButton, UiIconButton.
Формы/layout: UiFormField, UiFormGrid, UiCard, UiAlert.
Диалоги: UiModal, UiConfirmDialog.
Таблицы: UiDataTable, UiSimpleTable, UiTableSearch.
Навигация: UiPagination, UiTabs, UiPageHeader.
Состояния: UiState, UiStatusBadge, UiToast.
Прочее: UiDropdown, UiMediaPicker, UiOrderControls, UiBarChart, UiLineChart, UiPieChart.

Политика модальных окон

UiModal по умолчанию не закрывается кликом по overlay или клавишей Escape. Пользователь закрывает окно только крестиком либо явным consumer action «Отмена»/«Закрыть»; программное закрытие через v-model="false" после успешной операции работает как обычно. Props close-on-overlay и close-on-escape с default false предназначены только для осознанных исключений.

Для дополнительного времени, статуса или другого содержимого справа от заголовка используется typed slot header-extra:

<UiModal v-model="open" title="Занятие">
  <template #header-extra><UiStatusBadge label="Проведено" /></template>
  <!-- Содержимое -->
</UiModal>

На экранах шириной до 768 px все UiModal разворачиваются на весь фактически видимый viewport, в том числе при открытой экранной клавиатуре, с учётом safe area и отдельной прокруткой body. Несколько открытых modal используют общий body lock, располагаются по порядку стека и корректно передают фокус верхнему окну либо внешнему opener после закрытия всего стека. Неактивные слои стека получают inert и скрываются от accessibility tree; только верхнее окно является modal и обрабатывает клавиатуру. Эта политика относится только к modal: UiDropdown и другие popover с более высоким слоем продолжают закрываться по Escape и клику снаружи.

UiDataTable автоматически распознаёт строковый заголовок ID и ограничивает колонку диапазоном 72–112 px без переноса цифр. В UiSimpleTable для той же семантики consumer ставит table-id-column на соответствующие th и td.

Для реестров, которые на телефоне должны становиться карточками, используется opt-in prop mobile-cards. Роль колонки задаётся через ColumnDef.meta:

const columns = [
  { accessorKey: 'name', header: 'Название', meta: { mobileRole: 'title' } },
  { accessorKey: 'status', header: 'Статус', meta: { mobileRole: 'badge' } },
  { accessorKey: 'note', header: 'Комментарий', meta: { mobileFullWidth: true } },
  { id: 'actions', header: '', meta: { mobileRole: 'actions' }, cell: renderActions },
]

Поддерживаются роли title, subtitle, badge, field и actions, а также mobileLabel, mobileHidden и mobileFullWidth. По умолчанию колонка выводится как обычное поле. Desktop-представление при этом остаётся таблицей.

Consumer-owned state

UiToast и UiConfirmDialog презентационные. Consumer передаёт props и обрабатывает emits; Nuxt composables в пакет не переносятся.

Charts используют generic data:

type UiBarChartDatum = { label: string; value: number; color?: string }
type UiLineChartPoint = { label?: string; date: string; value: number }
type UiPieChartDatum = { label: string; value: number; color?: string }

Ограничения версии 0.1.0

UiPageHeader больше не требует глобальный NuxtLink и использует обычную ссылку; UiToast использует ClientOnly, поэтому полный набор компонентов пока не гарантирует работу в чистом Vue без adapters.
Часть legacy CSS variables определяется consumer theme.
Export ./theme не предоставляет отдельный runtime API: tokens входят в общий style.css.

Эти ограничения нельзя удалять из consumer workarounds без выпуска и проверки новой версии пакета.

Разработка

npm ci
npm run typecheck
npm run build

npm run build также выполняет vue-tsc --noEmit. Тестов и lint script сейчас нет; изменения компонентов требуют проверки package build и consumer builds.

Development dependencies

ID	Version
@tanstack/vue-table	^8.21.3
@types/node	^26.2.0
@vitejs/plugin-vue	^5.2.1
@vue/tsconfig	^0.7.0
sass-embedded	^1.100.0
tailwindcss	^4.3.3
typescript	^5.6.0
vite	^6.0.0
vite-plugin-dts	^4.5.0
vue	^3.5.0
vue-tsc	^3.3.8

Peer dependencies

ID	Version
vue	^3.5.0

Details

npm

2026-08-29 17:19:22 +03:00

UNLICENSED

78 KiB

Assets (1)

uikit-webadmin-0.1.4.tgz 78 KiB

Versions (15) View all

1.4.0

2026-09-13

1.3.0

2026-09-13

1.2.0

2026-09-06

1.1.3

2026-09-03

1.1.1