@karta.io/ui-components

Библиотека UI компонентов

Установка

NPM токен

@todo написать про .npmrc и токен на чтение

Менеджер зависимостей

npm install @karta.io/ui-components

pnpm add @karta.io/ui-components

yarn add @karta.io/ui-components

Использование

Вариант "Из коробки"

В main.js/main.ts проекта:

import { createApp } from 'vue';
import KartaUi from '@karta.io/ui-components';

// Глобальные стили. Содержат обе темы; переключение через data-theme на <html>
import '@karta.io/ui-components/styles';

const app = createApp(App);
// Все компоненты доступны сразу
app.use(KartaUi);

В файле компонента (SomeComponent.vue):

<script setup lang="ts">
const value = ref('');
</script>

<template>
  <div>
    <UiInput v-model="value" />
  </div>
</template>

Вариант "Выборочный"

В данном случае можно каждый компонент импортировать отдельно. Стили импорт стилей пока остается только глобальным

В файле компонента (SomeComponent.vue):

<script setup lang="ts">
import { UiInput } from '@karta.io/ui-components';

const value = ref('');
</script>

<template>
  <div>
    <UiInput v-model="value" />
  </div>
</template>

Разработка

В качестве рефа использовались 2 библиотеки компонентов:

• qui-max
• element-plus

@todo раписать

Дополнительная информация

Сеты иконок

• heroicons-outline- Основной пак иконок (без заливки)
• heroicons-solid - Основной пак иконок (с заливкой)
• circle-flags - Иконки стран