r3ui-lib

📚 r3ui-lib UI Library

Современная библиотека Vue 3 компонентов с TypeScript поддержкой

🚀 Быстрый старт

# Установка
npm install r3ui-lib

# Использование
import { DefaultButton, Table, useTableDefault } from 'r3ui-lib'

📖 Документация

Полная документация доступна в папке docs/:

• 📚 Главная документация - Обзор и навигация
• 🧩 Компоненты - Все UI компоненты
• 🔧 Composables - Vue composables
• 🎨 Стилизация - Темы и стили
• 📁 Примеры - Готовые примеры использования

🧩 Компоненты

🔘 Кнопки и действия

• DefaultButton - Базовая кнопка с 7 стилями
• AddButton - Кнопка добавления
• ExportButton - Кнопка экспорта
• PrintButton - Кнопка печати
• ClearFormButton - Кнопка очистки формы
• CollapseButton - Кнопка сворачивания/разворачивания
• ToggleButtons - Переключатели для выбора опций

📝 Формы

• CustomInput - Поле ввода с валидацией
• PasswordInput - Поле пароля
• Checkbox - Чекбокс
• FormError - Отображение ошибок
• VSelect - Селект с поиском и загрузкой
• BooleanCheckbox - Булевый чекбокс с кастомными значениями
• MultiCheckbox - Множественный выбор чекбоксов
• MultiInput - Динамические поля ввода
• Flatpickr - Поле выбора даты
• HeaderSearchForm - Форма поиска в заголовке
• AddressForm - Форма адреса с каскадной загрузкой
• AgeFromAgeTo - Диапазон возрастов

📊 Таблицы

• Table - Универсальная таблица с AJAX
• TableCount - Счетчик записей
• ColumnSubFilter - Подфильтры для колонок таблицы
• TableAppliedFiltersStorage - Сохранение фильтров в localStorage
• TableQuickFilterComponent - Быстрые фильтры таблицы
• EditTableColumns - Управление колонками таблицы
• ToggleAllTableRowButtons - Кнопки выбора всех строк

🪟 Модальные окна

• DefaultModal - Базовое модальное окно
• ConfirmationModal - Модальное окно подтверждения
• TableFilterModalComponent - Модальное окно фильтров таблицы
• EditTableColumnsModalComponent - Модальное окно редактирования колонок

🔔 Уведомления

• Toast - Всплывающие уведомления
• ErrorMessageComponent - Компонент ошибок

🎨 Макет

• PageTitle - Заголовок страницы
• Card - Карточка
• Divider - Разделитель
• Footer - Подвал страницы
• Header - Заголовок страницы
• MainComponent - Основной компонент макета
• CardInfo - Информационная карточка
• PageCard - Карточка страницы
• Sidebar - Навигационное меню с поддержкой внешних ссылок

📋 Аккордеоны

• DefaultAccordion - Базовый аккордеон
• KindCheckboxesAccordion - Аккордеон с чекбоксами по категориям

🔍 Фильтры

• MultipleQuickFilterComponent - Множественные быстрые фильтры

🎨 Утилиты

• Spinner - Индикатор загрузки
• Icon - Компонент иконки
• DefaultDropDown - Выпадающий список
• QuestionIcon - Иконка вопроса
• FilterValuesPanel - Панель значений фильтра
• Slider - Диапазонный слайдер

📤 Экспорт

• ExportComponent - Компонент экспорта данных

🏠 Адресные компоненты

• AddressForm - Полная форма адреса с каскадной загрузкой
  • Автоматическая загрузка регионов при изменении страны
  • Поддержка setFilterParamsStringsHandler для интеграции
  • Методы сброса полей и получения полного адреса

🔧 Composables

• useTableDefault - Управление состоянием таблицы
• useTableStorage - Работа с localStorage
• useBreadcrumbs - Универсальное управление breadcrumbs

📁 Примеры

См. папку examples/ для полных примеров:

• TableWithComposable.vue - Пример использования Table с useTableDefault
• BreadcrumbsExample.vue - Пример использования useBreadcrumbs
• SidebarExample.vue - Пример использования Sidebar с внешними ссылками

🛠️ Разработка

# Клонирование репозитория
git clone git@github.com:REGAGRO-LTD-CY/r3lib.git
cd r3lib

# Установка зависимостей
npm install

# Запуск Storybook
npm run storybook

# Сборка библиотеки
npm run build

# Тестирование
npm run test

📦 Установка

npm install r3ui-lib

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

Базовые компоненты

<template>
  <div>
    <PageTitle title="Моя страница" />

    <Card>
      <Table
        :columns="columns"
        :data="data"
        :loading="isLoading"
        @sort="handleSort"
      />
    </Card>

    <DefaultButton
      label="Сохранить"
      styles="primary"
      @click="handleSave"
    />
  </div>
</template>

<script setup>
import {
  PageTitle,
  Card,
  Table,
  DefaultButton,
  useTableDefault
} from 'r3ui-lib'

// Ваша логика
</script>

Форма адреса

<template>
  <AddressForm
    :countryId="selectedCountryId"
    :modelValue="addressData"
    @update:modelValue="addressData = $event"
    :loadRegions="getRegionOptions"
    :loadDistricts="getDistrictOptions"
    :loadLocalities="getLocalityOptions"
    :loadStreets="getStreetOptions"
    :setFilterParamsStringsHandler="handleAddressChange"
    filterName="address_full_address"
    prefix="address_"
  />
</template>

<script setup>
import { AddressForm } from 'r3ui-lib'
import {
  getRegionOptions,
  getDistrictOptions,
  getLocalityOptions,
  getStreetOptions
} from '~/utils/address/selectOptions'

const addressData = ref({})
const selectedCountryId = ref(1)

function handleAddressChange(key, value) {
  console.log(`${key}: ${value}`)
}
</script>

Навигационное меню (Sidebar)

<template>
  <Sidebar 
    :links="sidebarLinks" 
    :is-collapsed="isCollapsed"
    @navigate="handleNavigation"
  >
    <template #footer>
      <button @click="toggleSidebar" class="btn btn-light w-100">
        Toggle Sidebar
      </button>
    </template>
  </Sidebar>
</template>

<script setup>
import { ref } from 'vue'
import { Sidebar } from 'r3ui-lib'

const isCollapsed = ref(false)

const sidebarLinks = [
  {
    level: 0,
    uniqueKey: 1,
    isVisible: true,
    icon: '<i class="bi bi-house"></i>',
    label: 'Главная',
    href: '/',
  },
  {
    level: 0,
    uniqueKey: 2,
    isVisible: true,
    icon: '<i class="bi bi-github"></i>',
    label: 'GitHub',
    href: 'https://github.com',
    isExternal: true, // Внешняя ссылка
  }
]

const handleNavigation = (href) => {
  console.log('Navigation to:', href)
}

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>

🔗 Полезные ссылки

• GitHub Repository
• Storybook - Интерактивные примеры
• NPM Package

📄 Лицензия

MIT License

Статус: ✅ Готов к использованию Последнее обновление: Декабрь 2024

🆕 Последние обновления

v1.2.3-1 (Декабрь 2024)

• ✅ Новый компонент Sidebar - Навигационное меню с поддержкой внешних ссылок
• ✅ Внешние ссылки в Sidebar - Автоматическое открытие в новой вкладке с безопасными атрибутами
• ✅ Визуальные индикаторы - Иконка ↗ для внешних ссылок
• ✅ Storybook примеры - Новые истории с внешними ссылками
• ✅ Полная документация - Подробное описание API и примеры использования

Предыдущие обновления

• ✅ Добавлены новые компоненты форм: BooleanCheckbox, MultiCheckbox, MultiInput, Flatpickr, HeaderSearchForm, AgeFromAgeTo
• ✅ Расширены компоненты таблиц: ColumnSubFilter, TableAppliedFiltersStorage, TableQuickFilterComponent, EditTableColumns, ToggleAllTableRowButtons
• ✅ Добавлены новые модальные окна: TableFilterModalComponent, EditTableColumnsModalComponent
• ✅ Добавлены компоненты макета: Footer, Header, MainComponent, CardInfo, PageCard
• ✅ Добавлены аккордеоны: DefaultAccordion, KindCheckboxesAccordion
• ✅ Добавлены утилиты: Spinner, Icon, DefaultDropDown, QuestionIcon, FilterValuesPanel, Slider
• ✅ Добавлен компонент экспорта: ExportComponent
• ✅ Добавлены кнопки: ClearFormButton, CollapseButton, ToggleButtons
• ✅ Обновлена документация с полным списком всех 57+ компонентов
• ✅ Добавлены примеры использования для всех новых компонентов
• ✅ Исправлена бесконечная рекурсия в AddressForm
• ✅ Добавлен watcher для countryId с автоматической загрузкой регионов
• ✅ Восстановлен функционал setFilterParamsStringsHandler
• ✅ Добавлены методы сброса полей и получения полного адреса
• ✅ Исправлены TypeScript декларации
• ✅ Добавлена полная поддержка TypeScript
• ✅ Все 57+ компонентов теперь доступны
• ✅ Улучшена производительность сборки