Инспекция состояния

Модель состояния Slim Select построена вокруг синхронизации нативного элемента <select> и внутреннего представления данных библиотеки. Любое изменение — выбор значения, фильтрация, открытие списка или программная модификация опций — отражается одновременно в DOM и в объекте экземпляра Slim Select, что позволяет рассматривать состояние как единый источник истины.

В основе состояния лежит структура, описывающая текущие опции и выбранные значения. При инициализации библиотеки формируется кэш данных, извлечённый из <option> и <optgroup>.

Каждый экземпляр содержит:

  • массив доступных опций;
  • список выбранных значений;
  • состояние UI (открыт/закрыт);
  • состояние поиска;
  • флаги активности и блокировки.

Внутренние структуры не предназначены для прямого изменения, доступ к ним осуществляется через API-инспекцию.

Получение выбранных значений

Одним из центральных аспектов инспекции состояния является доступ к текущему выбору. Slim Select предоставляет несколько уровней получения данных, отличающихся по детализации.

Сырые значения выбранных элементов

Метод getSelected() возвращает массив значений, соответствующих атрибуту value элементов <option>.

const ss = new SlimSelect({
  select: '#select'
});

const selected = ss.getSelected();
console.log(selected);

Результат:

["1", "3", "7"]

В случае одиночного выбора возвращается массив с одним элементом, что сохраняет единообразие модели.

Полные данные выбранных элементов

Метод getSelectedData() предоставляет расширенную информацию:

const data = ss.getSelectedData();
console.log(data);

Каждый элемент содержит:

  • value — значение;
  • text — отображаемый текст;
  • selected — флаг выбора;
  • disabled — состояние недоступности;
  • дополнительные пользовательские атрибуты.

Структура полезна при построении зависимых интерфейсов, где требуется контекст выбранной опции.

Инспекция всех опций

Для анализа доступного набора данных используется метод получения полного списка опций.

Полный список данных

const options = ss.getData();
console.log(options);

Результирующая структура представляет собой массив объектов, включающих как активные, так и неактивные элементы.

Каждый объект обычно содержит:

{
  value: string,
  text: string,
  selected: boolean,
  disabled: boolean
}

При наличии групп (optgroup) структура дополняется вложенными массивами элементов.

Состояние интерфейса

Открытие и закрытие списка

Состояние раскрытия списка управляется внутренним флагом. Инспекция этого состояния осуществляется через API:

ss.isOpen();

Возвращает логическое значение:

  • true — список раскрыт;
  • false — список скрыт.

Открытие и закрытие не только визуальное состояние, но и изменение фокуса, обработчиков клавиатуры и слоя взаимодействия.

Поведение поиска

Slim Select поддерживает встроенный поиск, состояние которого также подлежит инспекции.

Текущее значение поискового запроса:

ss.search();

Возвращает строку, введённую пользователем в поле фильтрации. При отсутствии активности возвращается пустая строка.

Поисковое состояние влияет на:

  • фильтрацию опций;
  • отображение скрытых элементов;
  • реакцию на ввод клавиатуры.

Состояние блокировки

Slim Select может быть переведён в неактивное состояние, при котором взаимодействие с компонентом ограничено.

Проверка блокировки

ss.isDisabled();

Возвращает:

  • true — компонент отключён;
  • false — активен.

Блокировка синхронизируется с атрибутом disabled исходного <select> и может быть изменена программно или через DOM.

Синхронизация состояния с DOM

Одной из ключевых особенностей является двусторонняя синхронизация:

  • изменение <select> отражается в Slim Select;
  • изменение через Slim Select обновляет DOM.

Пример изменения через DOM:

document.querySelector('#select').value = "2";
document.querySelector('#select').dispatchEvent(new Event('change'));

После этого внутреннее состояние обновляется автоматически.

Наблюдение за изменениями состояния

Хотя инспекция состояния предоставляет доступ к текущим данным, динамическое отслеживание реализуется через события.

Основные события:

  • change — изменение выбора;
  • open — раскрытие списка;
  • close — закрытие списка;
  • search — изменение строки поиска.

Пример обработки:

ss.on('change', (info) => {
  console.log(info);
});

Объект события обычно содержит:

  • текущее значение;
  • список выбранных элементов;
  • контекст изменения.

Состояние множественного выбора

При включённом режиме multiple модель состояния расширяется:

  • getSelected() возвращает массив значений;
  • getSelectedData() возвращает массив объектов;
  • порядок элементов соответствует порядку выбора.

Дополнительно учитываются ограничения:

  • максимальное количество выбранных элементов;
  • запреты на повторный выбор;
  • блокировка отдельных опций.

Взаимосвязь состояния и опций

Состояние выбора напрямую зависит от структуры опций. Любое изменение набора опций приводит к пересчёту:

  • текущего selection state;
  • доступности элементов;
  • результатов поиска.

Удаление опции, которая была выбрана, автоматически приводит к её исключению из состояния выбранных значений.

Внутренние флаги и метаданные

Помимо публичных методов, Slim Select использует ряд внутренних флагов:

  • _isOpen — состояние выпадающего списка;
  • _data — кэш опций;
  • _selected — текущий выбор;
  • _search — строка поиска.

Хотя прямой доступ к ним не предусмотрен, их поведение отражается через публичные методы инспекции.

Консистентность состояния

Состояние поддерживается в строгой консистентности:

  • DOM всегда отражает внутреннюю модель;
  • внутренняя модель пересчитывается при любом внешнем событии;
  • изменения проходят через единый поток обновления.

Это исключает расхождения между визуальным представлением и данными формы, что особенно важно при сложных динамических интерфейсах с частыми обновлениями опций и зависимыми селектами.

Оглавление