Vue UI Kit

Vue 3 компоненты для UI Kit SCSS с TypeScript поддержкой.

Установка

npm install @ui-system/vue-ui-kit

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

Полная установка

import { createApp } from 'vue'
import VueUIKit from '@ui-system/vue-ui-kit'
import App from './App.vue'

const app = createApp(App)
app.use(VueUIKit)
app.mount('#app')

Импорт отдельных компонентов

<script setup>
import { UiButton, UiInput, UiModal } from '@ui-system/vue-ui-kit'
</script>

<template>
  <UiButton variant="primary" @click="showModal = true">
    Открыть модалку
  </UiButton>
  
  <UiModal v-model="showModal" title="Заголовок">
    <UiInput 
      v-model="inputValue" 
      label="Имя пользователя"
      placeholder="Введите имя"
    />
  </UiModal>
</template>

Компоненты

UiButton

Кнопка с различными вариантами и состояниями.

<template>
  <!-- Основные варианты -->
  <UiButton variant="primary">Основная</UiButton>
  <UiButton variant="secondary">Вторичная</UiButton>
  <UiButton variant="outline-primary">Контурная</UiButton>
  
  <!-- Размеры -->
  <UiButton size="sm">Маленькая</UiButton>
  <UiButton size="lg">Большая</UiButton>
  
  <!-- Состояния -->
  <UiButton :loading="true">Загрузка...</UiButton>
  <UiButton :disabled="true">Неактивная</UiButton>
  
  <!-- С иконками -->
  <UiButton>
    <template #icon-left>🔍</template>
    Поиск
  </UiButton>
  
  <!-- События -->
  <UiButton @click="handleClick">Кликни меня</UiButton>
</template>

Props:

• variant: 'primary' | 'secondary' | 'outline-primary' | 'outline-secondary' | 'ghost' | 'success' | 'warning' | 'error'
• size: 'sm' | 'md' | 'lg' | 'xl'
• disabled: boolean
• loading: boolean
• fullWidth: boolean
• iconOnly: boolean

UiInput

Поле ввода с поддержкой различных типов и валидации.

<template>
  <!-- Основное использование -->
  <UiInput 
    v-model="value"
    label="Email"
    type="email"
    placeholder="[email protected]"
    help-text="Мы не передаем email третьим лицам"
  />
  
  <!-- С ошибкой -->
  <UiInput 
    v-model="value"
    label="Пароль"
    type="password"
    :error-message="passwordError"
  />
  
  <!-- Многострочный -->
  <UiInput 
    v-model="comment"
    label="Комментарий"
    :multiline="true"
    :rows="4"
  />
  
  <!-- С дополнениями -->
  <UiInput v-model="price" label="Цена">
    <template #prepend>₽</template>
    <template #append>.00</template>
  </UiInput>
</template>

Props:

• modelValue: string | number
• type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
• label: string
• placeholder: string
• helpText: string
• errorMessage: string
• size: 'sm' | 'md' | 'lg'
• disabled: boolean
• readonly: boolean
• required: boolean
• multiline: boolean

UiSelect

Выпадающий список с поддержкой объектов и примитивов.

<template>
  <!-- Простые опции -->
  <UiSelect 
    v-model="selectedValue"
    :options="['Вариант 1', 'Вариант 2', 'Вариант 3']"
    label="Выберите вариант"
    placeholder="Выберите..."
  />
  
  <!-- Объекты -->
  <UiSelect 
    v-model="selectedUser"
    :options="users"
    label="Пользователь"
    value-key="id"
    label-key="name"
  />
  
  <!-- Ручные опции -->
  <UiSelect v-model="country" label="Страна">
    <option value="ru">Россия</option>
    <option value="us">США</option>
    <option value="de">Германия</option>
  </UiSelect>
</template>

<script setup>
const users = [
  { id: 1, name: 'Иван Иванов' },
  { id: 2, name: 'Петр Петров' }
]
</script>

UiCheckbox

Чекбокс с поддержкой неопределенного состояния.

<template>
  <UiCheckbox v-model="agreed" label="Согласен с условиями" />
  
  <UiCheckbox v-model="notifications" :indeterminate="partiallySelected">
    Получать уведомления
  </UiCheckbox>
</template>

UiRadio

Радио-кнопка для выбора одного из вариантов.

<template>
  <UiRadio 
    v-model="selectedOption" 
    value="option1"
    name="options"
    label="Первый вариант" 
  />
  
  <UiRadio 
    v-model="selectedOption" 
    value="option2"
    name="options"
    label="Второй вариант" 
  />
</template>

UiModal

Модальное окно с различными размерами и настройками.

<template>
  <!-- Простое модальное окно -->
  <UiModal v-model="showModal" title="Заголовок">
    <p>Содержимое модального окна...</p>
    
    <template #footer>
      <UiButton variant="outline-primary" @click="showModal = false">
        Отмена
      </UiButton>
      <UiButton variant="primary" @click="save">
        Сохранить
      </UiButton>
    </template>
  </UiModal>
  
  <!-- Настраиваемое -->
  <UiModal 
    v-model="showModal"
    size="lg"
    :centered="true"
    :close-on-backdrop="false"
  >
    <template #header>
      <h3>Кастомный заголовок</h3>
    </template>
    
    <!-- Содержимое -->
    
    <template #footer>
      <!-- Кастомный футер -->
    </template>
  </UiModal>
</template>

Props:

• modelValue: boolean
• title: string
• size: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
• closable: boolean
• closeOnBackdrop: boolean
• centered: boolean
• scrollable: boolean

UiNotification

Компонент уведомлений с автоматическим скрытием.

<template>
  <!-- В шаблоне компонента уведомлений -->
  <UiNotification
    type="success"
    title="Успех!"
    message="Данные сохранены успешно"
    :duration="5000"
  />
  
  <UiNotification
    type="error"
    title="Ошибка"
    message="Не удалось сохранить данные"
    :closable="true"
  />
</template>

Props:

• type: 'success' | 'error' | 'warning' | 'info'
• title: string
• message: string
• duration: number (в миллисекундах)
• closable: boolean
• showIcon: boolean
• persistent: boolean

Типы TypeScript

Все компоненты экспортируют TypeScript типы:

import type { 
  UiButtonProps, 
  UiInputProps, 
  UiModalProps 
} from '@ui-system/vue-ui-kit'

Стилизация

Компоненты используют классы из @ui-system/ui-kit-scss. Для кастомизации переопределите CSS переменные или SCSS переменные перед импортом стилей.

Лицензия

MIT