@albank/vue-ui-kit v2.4.0

AebUiKitVue

Инструкция по разработке:

1. npm ci
2. npm run storybook
3. http://localhost:6006/

Инструкция по сборке и публикации:

1. npm run build
2. npm publish

Инструкция по использованию в проекте:

1. npm install @albank/vue-ui-kit
2. Импортировать стили import '@albank/vue-ui-kit/style.css'; в main.ts
3. Импортировать какой-нибудь компонент в приложении import { Button } from @albank/vue-ui-kit
4. Использовать его <Button>Сохранить<Button> или кебаб-кейсом с префиксом aeb <aeb-button></aeb-button>
5. Запустить проект (например, npm run serve)

Используемые технологии:

1. Vue 3 (Composition API)
2. TypeScript 5
3. Vite 5
4. SCSS

По умолчанию UI-кит использует шрифты Roboto, но в сборку они не входят, поэтому нужно добавить их отдельно. Пример добавления шрифтов Roboto:

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
}

Для изменения шрифтов компонентов UI-кита, нужно перезаписать CSS-переменную --default-font у себя в проекте через псевдокласс :root