wsender-input-dropdown

Установка

npm i @wsender/input-dropdown

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

<select id="dropdown" class="ws-dropdown-input"
    data-content-script="dropdown"
    data-placeholder="Выбрать страну"
    data-moretext="Еще страны"
    data-emptytext="Страны не найдены"
    data-search-on="true|false|number"
    data-search-placeholder="Найти страну"
    data-search-empty="Страна не найдена">
        <option value="1">Россия</option>
        <option value="2">Казахстан</option>
        <option value="3">Беларусь</option>
</select>

var inputElem = document.getElementById("dropdown");
new DropDown(inputElem);

Параметры

TextBox берёт параметры из аттрибутов элемента input или textarea.

Поддерживаемые аттрибуты от HTMLSelectElement:

• required
• disabled

Кастомные параметры:

• data-fast - Количество значений в быстром доступе. По умолчанию - 0.
• data-placeholder - Текст заголовка попапа. По умолчанию - Select.
• data-moretext - Текст по умолчанию селекта с остальными значениями. По умолчанию - Other.
• data-emptytext - Текст выводимый в выпадающем списке, если элементы не добавлены. По умолчанию - Empty list.
• data-search-on - Управление поиском элементов в списке. true - всегда включён. false - всегда выключен. number - минимальное кол-во элементов для включения. По умолчанию - 15.
• data-search-placeholder - Текст выводимый на поле поиска до начала ввода. По умолчанию - Search.
• data-search-empty - Текст выводимый в выпадающем списке, если элементов не найдено. По умолчанию - Not found.

API

var inputElem = document.getElementById("dropdown");
const dropdown = new DropDown(inputElem);

dropdown.getValue(): string || null;
dropdown.getSelectedIndex(): number;
dropdown.getSelectedTitle(): string || null;
dropdown.validate(): boolean;
dropdown.destroy(): void;

События

dropdown-change

Изменение значения пользователем в результате ввода, вставки из буфера обмена или через метод setValue.

var inputElem = document.getElementById("dropdown");
const dropdown = new DropDown(inputElem);

dropdown.addEventListener("dropdown-change", (e: CustomEvent<ChangeEventData>) => {
    e.detail.dropdown // экземпляр DropDown, в котором изменено значение
    e.detail.value // новое значение
    e.detail.index // индекс нового значения
    e.detail.title // текст нового значения
});

dropdown.onChange(handler: (e: CustomEvent<ChangeEventData>) => { /* process event */ });

Стилизация

Класс рутового элемента: ws-dropdown Класс body при открытом popup: ws-dropdown-opened

Субклассы состояний:

• empty - пустой селект
• fast - наличие значений в быстром доступе (data-fast > 0)
• select - отображение как select (data-fast == 0)
• noother - без выпадашки (data-fast >= кол-во значений)
• expanded - развернуть выпадашку
• invalid - невалидное значение
• searchable - включен поиск по элементам в popup
• required - обязателен для заполнения
• readonly - обязателен для заполнения
• disabled - обязателен для заполнения

Миниатюра загрузки

Миниатюра позволяет до создания экземпляра DropDown сохранить высоту и занимаемую область, чтобы после создания DropDown вёрстка не прыгала.

Для отображения миниатюры к тегу select добавьте класс ws-dropdown-input. А сразу под тегом создайте элемент с классом ws-dropdown-miniature.

<select class="ws-dropdown-input" data-content-script="dropdown"</select>
<div class="ws-dropdown-miniature"></div>

Если вам нужно стилизовать миниатюру, то применяйте стили к ws-dropdown-miniature.