ru-components

Набор vanilla Web Components для русских интерфейсов.

Компоненты

• <ru-checkbox> — кастомный чекбокс
• <ru-dialog> — обёртка над dialog с заголовком
• <ru-dialog-close-button> — кнопка для закрытия диалогов
• <ru-dialog-header> — заголовок диалога с кнопкой закрытия
• <ru-dialog-header-content> — контент заголовка
• <ru-dropdown-button> — кнопка с выпадающим списком

Установка

npm install ru-components

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

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

import 'ru-components'

Подключение отдельного компонента

import 'ru-components/src/components/dialog-close-button/index.js'

или через CDN:

<script type="module" src="https://unpkg.com/ru-components/dist/ru-components.js"></script>

dialog-close-button

Кнопка для закрытия диалоговых окон.

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

<dialog id="my-dialog">
  <dialog-close-button></dialog-close-button>
  <p>Содержимое диалога</p>
</dialog>

С указанием целевого диалога

<dialog id="my-dialog">
  <p>Содержимое диалога</p>
</dialog>

<dialog-close-button dialog-target="#my-dialog"></dialog-close-button>

Атрибуты

| Атрибут | Описание | |---------|----------| | dialog-target | CSS-селектор целевого диалога |

События

| Событие | Описание | |---------|----------| | dialog-closed | Срабатывает после закрытия диалога |

document.addEventListener('dialog-closed', (event) => {
  console.log('Диалог закрыт:', event.detail.dialog)
})

ru-dropdown-button

Кнопка с выпадающим списком элементов.

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

<ru-dropdown-button>
  <svg slot="icon-left" width="20" height="20">...</svg>
  <span slot="text">Меню</span>
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</ru-dropdown-button>

Слоты

| Слот | Описание | |------|----------| | icon-left | Иконка слева от текста | | text | Текст кнопки | | default | Элементы выпадающего списка |

События

| Событие | Описание | |---------|----------| | open | Срабатывает при открытии списка | | close | Срабатывает при закрытии списка |

Методы

| Метод | Описание | |-------|----------| | open() | Открыть список | | close() | Закрыть список |

Геттеры

| Геттер | Описание | |--------|----------| | isOpen | Возвращает true, если список открыт |

Позиционирование

• Выпадающий список всегда позиционируется под кнопкой
• Если места справа достаточно → left списка равен left кнопки
• Если места справа не хватает → right списка равен right кнопки

Закрытие

Список закрывается при:

• Клике мимо списка
• Клике по элементу списка

Добавление нового компонента

1. Создайте директорию src/components/<название-компонента>/
2. Добавьте файлы index.js и styles.js
3. Экспортируйте компонент в главном src/index.js

Структура проекта

ru-components/
├── src/
│   ├── components/
│   │   ├── dialog-close-button/
│   │   │   ├── index.js       # Веб-компонент
│   │   │   └── styles.js      # Стили
│   │   └── <новый-компонент>/
│   └── index.js               # Точка входа для сборки
├── index.js               # Главный файл экспорта
├── package.json
├── vite.config.js
└── README.md

Лицензия

MIT