c3-ui (1.2.64)
Installation
registry=https://gitea.chizhik.net/api/packages/yurgeman/npm/npm install c3-ui@1.2.64"c3-ui": "1.2.64"About this package
c3-ui
Customizable Company Core UI Nuxt module.
Features
- 🎨 Генерация CSS-переменных цветов из палитры
- 🌓 Тёмная тема из коробки:
useC3ColorMode()и<C3ColorModeSwitch> - 🌐 Поддержка RTL: в стилях только логические свойства, направление наследуется от
dir - 🧩 84 компонента в пяти категориях: Layout, Формы, Data, Element, Overlay
- 🧪 Ноль рантайм-зависимостей: вся логика (ARIA, фокус-тэп, работа с датами) написана вручную
- 🧱 Блочный редактор
<C3Editor>— в разработке, ядро пишется с нуля: план вdocs/editor.md - 📖
<C3EditorView>— тот же документ читаемой семантической разметкой безv-htmlи без служебных узлов правки
Composables модуля: useC3ColorMode, useC3MessageBox, useC3DynamicDialog, useC3Tour, useC3Toasts,
useC3Layout, useC3Mounted, useC3Editor, useC3DynamicForm, useC3ComputedFields — вычисляемые поля
формы (target из sources, debounce, карта ошибок).
Quick Setup
Install the module to your Nuxt application with one command:
bunx nuxt module add c3-ui
That's it! You can now use c3-ui in your Nuxt app ✨
Установка из приватного реестра
Модуль публикуется в приватный npm-реестр Gitea (gitea.env-dev.ru). Для установки добавьте в .npmrc проекта:
registry=https://gitea.chizhik.net/api/packages/yurgeman/npm/
//gitea.chizhik.net/api/packages/yurgeman/npm/:_authToken=<GITEA_TOKEN>
//gitea.chizhik.net/api/packages/yurgeman/npm/:strict-ssl=false
<GITEA_TOKEN> — токен из Gitea: Settings → Applications → Generate New Token (достаточно права read:package).
После этого установите модуль:
bunx nuxt module add c3-ui
или вручную:
bun add c3-ui
У пакета
c3-uiнет scope, поэтому npm не может адресовать приватный реестр только для него —registry=применяется ко всем пакетам. Если проекту нужны и публичные пакеты, указывайте реестр разово через флаг:bun add c3-ui --registry=https://gitea.env-dev.ru/api/packages/yurgeman/-/npm/
Если сертификат Gitea самоподписанный и установка падает с
UNABLE_TO_VERIFY_LEAF_SIGNATURE, добавьте вbunfig.tomlпроекта:[install] ca = ["/path/to/gitea-ca.pem"]либо на разовую установку:
NODE_TLS_REJECT_UNAUTHORIZED=0 bun add c3-ui.
Цвета (Palette)
Цвета темы задаются в nuxt.config.ts в секции c3Ui и применяются на этапе сборки: модуль генерирует CSS-файл
c3-ui/colors.css с переменными вида --c3-<цвет>-<оттенок>, который подключается после стилей модуля и
переопределяет дефолтные значения из runtime/assets/styles/_colors.scss.
Палитра в конфиге
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['c3-ui'],
c3Ui: {
colors: {
// карта оттенков → --c3-primary-50 … --c3-primary-950
primary: { 50: '#f5f3ff', 100: '#ede9fe', 500: '#7c3aed', 900: '#2e1065' },
// одиночный цвет → --c3-secondary-500
secondary: '#6b7280',
// имя с дефисом → --c3-color-link-500
'color-link': '#7c3aed',
},
},
})
- Имена цветов приводятся к kebab-case:
textColor→--c3-text-color-500. - Значение может быть любым корректным CSS-цветом:
#7c3aed,hsl(262 56% 58%),rgb(124 58 237),var(--brand). - Палитру удобно сгенерировать компонентом
<C3ColorsGen>— он выгружает JSON, который можно положить в конфиг.
Палитра в отдельном JSON-файле
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['c3-ui'],
c3Ui: {
colorsFile: '~/assets/palette/palette.json',
},
})
Путь разрешается через алиасы Nuxt (~, @, ~~) и rootDir; поддерживаются и абсолютные пути. Формат файла —
цвет → оттенок → значение:
{
"primary": { "50": "#f5f3ff", "500": "#7c3aed" },
"textColor": { "500": "#2c2d23" }
}
При изменении файла палитры dev-сервер перезапускается и пересобирает тему автоматически. Приоритет опций: если заданы
оба ключа, используется colorsFile.
Как это работает
c3Ui.colors/c3Ui.colorsFile→ список CSS-переменных--c3-*.- Шаблон
c3-ui/colors.cssгенерируется в.nuxtи добавляется вnuxt.options.cssпослеindex.scss. - Компоненты читают семантические алиасы (
--c3-color-primary,--c3-color-border, …) изruntime/assets/styles/_theme.scss, которые ссылаются на переменные палитры, поэтому переопределение оттенков сразу меняет оформление всех компонентов. - Тёмная тема (класс
.c3--darkна<html>) ссылается на те же переменные палитры — менять её отдельно не нужно.
Генерация дефолтного _colors.scss
Базовые цвета библиотеки лежат в src/runtime/assets/styles/_colors.scss. Перегенерировать их из JSON-палитры
репозитория
можно скриптом (он же используется для обновления значений по умолчанию):
bun run generate:colors -- public/palette/palette-1785492113876.json
Без аргумента скрипт возьмёт файл assets/palette/palette.json.
Contribution
Local development
# Install dependencies
bun install
# Generate type stubs
bun run dev:prepare
# Develop with the playground
bun run dev
# Build the playground
bun run dev:build
# Run ESLint
bun run lint
# Run Vitest
bun run test
bun run test:watch
# Run TypeScript checks
bun run test:types
# Generate CSS color variables from palette
bun run generate:colors
# Release new version
bun run release
Dependencies
Dependencies
| ID | Version |
|---|---|
| @nuxt/kit | ^4.6.0 |
| sass | ^1.105.1 |
| sass-loader | ^17.0.1 |
Development Dependencies
| ID | Version |
|---|---|
| @nuxt/devtools | ^3.4.2 |
| @nuxt/eslint-config | ^1.17.0 |
| @nuxt/module-builder | ^1.0.3 |
| @nuxt/schema | ^4.6.0 |
| @nuxt/test-utils | ^4.3.3 |
| @playwright/test | ^1.64.0 |
| @storybook/addon-a11y | 10.6.1 |
| @storybook/vue3 | 10.6.1 |
| @storybook/vue3-vite | 10.6.1 |
| @types/node | latest |
| @vitejs/plugin-vue | 6.0.9 |
| @vitest/expect | 5.0.3 |
| @vitest/spy | 5.0.3 |
| @vitest/utils | 5.0.3 |
| @vue/test-utils | ^2.5.1 |
| changelogen | ^0.6.2 |
| eslint | ^10.12.0 |
| eslint-config-prettier | ^10.1.8 |
| happy-dom | ^20.14.6 |
| nuxt | ^4.6.0 |
| prettier | ^3.9.9 |
| standard-version | ^9.5.0 |
| storybook | 10.6.1 |
| typescript | ~6.0.3 |
| unbuild | ^3.6.1 |
| vitest | ^5.0.3 |
| vitest-environment-nuxt | ^2.0.0 |
| vue | 3.5.43 |
| vue-tsc | ^3.3.12 |