@qor/ui

Расширение темы Nuxt UI 4 для QOR.

Модуль @qor/ui расширяет тему Nuxt UI 4 с кастомными настройками для платформы QOR.

Установка

Terminal

pnpm add @qor/ui

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@qor/ui'],
})

@nuxt/ui v4 — peer dependency. Убедитесь, что он установлен в проекте.

Возможности

Цвет бренда QOR

Модуль добавляет кастомный цвет qor (на базе #B9FE47) с полной палитрой оттенков 50-950:

--color-qor-400: oklch(0.93 0.27 125);  /* #B9FE47 */

По умолчанию qor используется как primary цвет.

Шрифт

Используется шрифт Geist с оптимизированным letter-spacing:

--font-sans: "Geist", sans-serif;
letter-spacing: -0.2px;

Кастомные иконки

Модуль регистрирует коллекцию иконок qor:* (включая логотип):

<UIcon name="qor:logo" />

Переопределения компонентов

Настроены стили по умолчанию для компонентов:

Компонент	Изменения
`UButton`	`color: neutral`, `variant: subtle`
`UInput` / `UTextarea`	`color: neutral`, `variant: subtle`, custom focus ring
`USelect`	`color: neutral`, `variant: subtle`
`UCard`	`variant: subtle`, shadow, custom padding
`UTable`	Увеличенные отступы, muted заголовки
`UTabs`	Кастомные стили для `pill` и `link` вариантов
`UBadge`	`color: neutral`, `variant: subtle`
Dashboard компоненты	Кастомные стили sidebar, navbar, panel

Опции модуля

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@qor/ui'],
  qorUI: {
    primary: 'qor',    // или 'green', 'blue', etc.
    neutral: 'neutral',
    radius: 0.25,       // border-radius multiplier
    theme: {},          // deep merge с темой
  },
})

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

После установки все компоненты Nuxt UI используются как обычно, но с применёнными стилями QOR:

<template>
  <UButton>Сохранить</UButton>
  <UInput v-model="search" placeholder="Поиск..." />
  <UCard>
    <UTable :columns="columns" :rows="rows" />
  </UCard>
</template>

Утилиты

Вспомогательные функции для работы с файлами и ID.