yurgeman

Joined on 2026-06-28

c3-ui (1.2.61)

Published 2026-10-16 06:56:39 +00:00 by yurgeman

Set up this registry in your project .npmrc file:

registry=https://gitea.chizhik.net/api/packages/yurgeman/npm/

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

npm install c3-ui@1.2.61

or add it to the package.json file:

"c3-ui": "1.2.61"

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

Customizable Company Core UI Nuxt module

c3-ui

Customizable Company Core UI Nuxt module.

✨ Release Notes

Features

🎨 Генерация CSS-переменных цветов из палитры
🌓 Тёмная тема из коробки: useC3ColorMode() и <C3ColorModeSwitch>
🌐 Поддержка RTL: в стилях только логические свойства, направление наследуется от dir
🌍 Локализация: встроенные ru/en, кастомные словари и setLocale() в рантайме
🧩 84 компонента в пяти категориях: Layout, Формы, Data, Element, Overlay
🧪 Ноль рантайм-зависимостей: вся логика (ARIA, фокус-тэп, работа с датами) написана вручную
🧱 Блочный редактор <C3Editor> — в разработке, ядро пишется с нуля: план в docs/editor.md

Composables модуля: useC3ColorMode, useC3I18n, useC3MessageBox, useC3DynamicDialog, useC3Tour, useC3Toasts, useC3Layout, useC3Mounted.

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.

Локализация (i18n)

Тексты интерфейса — подписи кнопок, aria-label, сообщения валидации и ошибки сборки — хранятся в словарях по ключам-терминам, а не в коде компонентов. Встроены две локали: ru (по умолчанию) и en (эталон полноты); термины можно переопределять, а собственную локаль — собрать из конфига.

Конфигурация

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['c3-ui'],
  c3Ui: {
    i18n: {
      // активная локаль: встроенная 'ru' | 'en' или произвольный код ('fr', 'pt-BR', 'zh-Hans')
      code: 'ru',
      // глубокий merge поверх словаря активной локали
      locale: {
        common: { ok: 'Хорошо', cancel: 'Отменить' },
      },
    },
  },
})

code — активная локаль на старте. Для произвольного кода словарь собирается из locale поверх английского эталона: непереведённые термины остаются английскими, словарь можно наполнять постепенно.
locale — переопределения терминов для встроенных локалей либо словарь кастомной локали.
Если термина нет ни в активной локали, ни в en, termin() возвращает сам ключ — опечатку видно сразу.

Кастомная локаль целиком:

c3Ui: {
  i18n: {
    code: 'fr',
    locale: {
      common: { ok: 'D’accord', cancel: 'Annuler' },
      components: { tour: { next: 'Suivant', skip: 'Passer' } },
    },
  },
},

Ключи сгруппированы по компонентам, общие строки лежат в common; полный набор — в src/runtime/locales/ru.ts (структура совпадает с en).

Переключение локали в рантайме

// composables модуля авто-импортируются
const { locale, termin, setLocale, availableLocales, plural } = useC3I18n()

locale.value                                        // 'ru' — активный код (readonly ref)
setLocale('en')                                     // переключение, false — если словаря нет
availableLocales                                    // ['ru', 'en'] плюс коды из конфига
termin('components.tour.next')                      // 'Далее' — поиск по dot-path
termin('components.chip.remove', { label: 'Тег' })  // 'Удалить Тег' — подстановка {label}
plural(5, ['вариант', 'варианта', 'вариантов'])     // 'вариантов' — русская морфология

Строки компонентов реактивны: setLocale() обновляет интерфейс без перезагрузки. Готовый переключатель языка есть в playground модуля.

Как это работает

c3Ui.i18n → resolveC3Locales(): валидация code, merge locale поверх встроенного словаря (или en для кастомного кода) и запись результата в app config (appConfig.c3ui.i18n), который можно дополнительно переопределить в app.config.ts приложения.
useC3I18n() читает словари из app config, а вне Nuxt-контекста — из встроенных ru/en.
Компоненты вызывают termin(key, params?); ошибки сборки модуля берутся из словаря активной локали.

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

ID	Version
@nuxt/kit	^4.6.1
sass	^1.105.1
sass-loader	^17.0.1

Development Dependencies

ID	Version
@nuxt/devtools	^3.4.3
@nuxt/eslint-config	^1.17.0
@nuxt/module-builder	^1.0.3
@nuxt/schema	^4.6.1
@nuxt/test-utils	^4.3.3
@playwright/test	^1.64.0
@storybook/addon-a11y	10.6.2
@storybook/vue3	10.6.2
@storybook/vue3-vite	10.6.2
@types/node	latest
@vitejs/plugin-vue	6.0.10
@vitest/expect	5.0.4
@vitest/spy	5.0.4
@vitest/utils	5.0.4
@vue/test-utils	^2.5.1
changelogen	^0.6.2
eslint	^10.12.0
eslint-config-prettier	^10.1.8
happy-dom	^21.0.1
nuxt	^4.6.1
prettier	^3.9.10
standard-version	^9.5.0
storybook	10.6.2
typescript	~6.0.3
unbuild	^3.6.1
vitest	^5.0.4
vitest-environment-nuxt	^2.0.0
vue	3.5.44
vue-tsc	^3.3.13

Details

npm

2026-10-16 06:56:39 +00:00

MIT

279 KiB

Assets (1)

c3-ui-1.2.61.tgz 279 KiB

Versions (5) View all

1.2.64

2026-10-17

1.2.63

2026-10-17

1.2.61

2026-10-16

1.2.60

2026-10-16

1.2.59

2026-10-15

c3-ui (1.2.61)

Installation

About this package

c3-ui

Features

Quick Setup

Установка из приватного реестра

Цвета (Palette)

Палитра в конфиге

Палитра в отдельном JSON-файле

Как это работает

Генерация дефолтного `_colors.scss`

Локализация (i18n)

Конфигурация

Переключение локали в рантайме

Как это работает

Contribution

Dependencies

c3-ui (1.2.61)

Installation

About this package

c3-ui

Features

Quick Setup

Установка из приватного реестра

Цвета (Palette)

Палитра в конфиге

Палитра в отдельном JSON-файле

Как это работает

Генерация дефолтного _colors.scss

Локализация (i18n)

Конфигурация

Переключение локали в рантайме

Как это работает

Contribution

Dependencies

Генерация дефолтного `_colors.scss`