urfu-ui-kit-vue

urfu-ui-kit-vue

Компоненты UI-кита УрФУ для Vue 3. Пакет живёт в монорепозитории ui/urfu-ui-kit, папка packages/vue. Эталон поведения и вида — React-кит из packages/react, стили — packages/vanilla. Vanilla собирается внутрь пакета: сервису не нужен urfu-ui-kit-vanilla, а кит берёт стили из соседней папки монорепозитория, поэтому собирать его можно только в полном checkout.

npm install urfu-ui-kit-vue

Нужен vue 3.5 и новее в самом проекте (peer-зависимость).

Браузеры: Chrome, Edge и Яндекс Браузер 109+, Firefox 121+, Safari 16+. style.layer.css старше Chrome 99 / Firefox 97 / Safari 15.4 не применяется совсем — поддерживаемые браузеры.

import 'urfu-ui-kit-vue/style.css';
import { Button } from 'urfu-ui-kit-vue';

Шрифты Montserrat — отдельными файлами рядом со стилями (font-display: swap), браузер берёт только нужные начертания; preload для первого захода — в разделе «Шрифты» установки.

Сервису внутри оболочки ЛК — urfu-ui-kit-vue/style.layer.css вместо style.css: свой глобальный сброс — в @layer u-kit.service-reset, теговые стили (p, h1–h6) — в @layer u-kit.service-base, свои классы — вне слоя. Так сброс сервиса не обнуляет отступы компонентов кита, а теговые стили сервиса главнее сбросов кита (Кит в оболочке ЛК).

Разработка

Команды запускаются в папке packages/vue:

npm ci
npm run dev             # песочница
npm run sb              # Storybook
npm run test:unit:run   # unit-тесты
npm run test:pw         # Playwright CT
npm run parity:visual   # сверка вида с эталонами React
npm run build:lib && npm run check:package   # сборка и контракт пакета

Правила разработки и выпуска — CLAUDE.md, история версий — docs/versioning.md.