# UI kit Topvisor Vue

## Vue компоненты

Компоненты поставляются в двух форматах:

- amd (requirejs)
- es

Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.

Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.

Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки.
В этой же папке располагаются стили для асинхронно загружаемых компонентов.
Все стили грузятся автоматически вместе с загрузкой компонента.

Документация и описание всех компонентов: https://ui.topvisor.com/

## Общие стили UI

- /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
- /assets/themes/* - стили тем оформления

## Подключение стилей

Стили компонентов подгружаются автоматически.

Стили UI core.css необходимо подгрузить на страницу вручную.

```js
import '@topvisor/ui/assets/core.css';
```

```html
<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">
```

## Подключение стилей темы

Стили темы необходимо подгрузить на страницу вручную.

Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.

```js
import '@topvisor/ui/assets/themes/light.css';
```

```html

<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
```

## Внешние зависимсоти

Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.

```js
import '@topvisor/ui/icomoon/style.css';
```

```html

<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
```

## Подключение компонентов

Пример подключения библиотеки Forms и компонента Button:

```javascript
require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
	console.log(Button);
});

require(['@topvisor/ui/forms/forms.amd'], Forms => {
	const { Button } = Forms;

	console.log(Forms);
	console.log(Button);
});
```