Типы данных

В Slim Select данные представляют собой абстракцию над стандартным HTML <select> элементом. Библиотека поддерживает несколько форматов входных данных, каждый из которых трансформируется во внутреннюю структуру с унифицированными полями. Ключевая концепция заключается в том, что любой вариант данных сводится к сущностям с минимум двумя атрибутами: value и text.

Внутренне Slim Select оперирует нормализованным списком опций, где каждая запись имеет стабильную структуру:

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

Эта модель обеспечивает единообразие независимо от того, в каком виде данные были переданы изначально.

Примитивный строковый формат

Наиболее простой способ передачи данных — массив строк. В этом случае строка одновременно используется и как value, и как text.

new SlimSelect({
  select: '#example',
  data: ['Apple', 'Banana', 'Orange']
});

Внутренне это преобразуется в:

[
  { value: 'Apple', text: 'Apple' },
  { value: 'Banana', text: 'Banana' },
  { value: 'Orange', text: 'Orange' }
]

Особенности:

  • подходит для простых списков без метаданных
  • не поддерживает дополнительные свойства
  • не подходит для сложных интерфейсов

Объектный формат данных

Основной и наиболее гибкий формат — массив объектов. Каждый объект описывает опцию явно.

new SlimSelect({
  select: '#example',
  data: [
    { value: '1', text: 'Apple' },
    { value: '2', text: 'Banana' },
    { value: '3', text: 'Orange' }
  ]
});

Допустимые поля:

  • value — обязательное поле идентификации
  • text — отображаемая строка
  • disabled — блокировка выбора
  • дополнительные пользовательские свойства

Пример с расширенными данными:

data: [
  { value: '1', text: 'Apple', disabled: false, color: 'red' },
  { value: '2', text: 'Banana', disabled: true, category: 'fruit' }
]

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

Группировка данных (optgroup)

Поддержка групп реализуется через вложенную структуру. Каждая группа имеет заголовок и массив дочерних элементов.

new SlimSelect({
  select: '#example',
  data: [
    {
      label: 'Fruits',
      options: [
        { value: 'apple', text: 'Apple' },
        { value: 'banana', text: 'Banana' }
      ]
    },
    {
      label: 'Vegetables',
      options: [
        { value: 'carrot', text: 'Carrot' },
        { value: 'potato', text: 'Potato' }
      ]
    }
  ]
});

Структура групп:

  • label — название группы
  • options — массив опций

Особенности обработки:

  • группы не имеют собственного value
  • выбор осуществляется только внутри options
  • поддерживается визуальное разделение в UI

Множественный выбор и структура данных

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

new SlimSelect({
  select: '#example',
  data: [
    { value: '1', text: 'Apple' },
    { value: '2', text: 'Banana' }
  ],
  settings: {
    multiple: true
  }
});

В этом режиме:

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

Пример результата выбора:

['1', '2']

Предвыбранные значения

Slim Select синхронизирует данные с атрибутами HTML <option selected> либо с параметром value.

HTML-вариант:

<select id="example">
  <option value="1">Apple</option>
  <option value="2" selected>Banana</option>
</select>

При инициализации:

new SlimSelect({
  select: '#example'
});

Если данные задаются через data, предвыбор осуществляется явно через совпадение value.

data: [
  { value: '1', text: 'Apple' },
  { value: '2', text: 'Banana' }
],
settings: {
  selected: ['2']
}

Динамическое обновление данных

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

const slim = new SlimSelect({
  select: '#example',
  data: [
    { value: '1', text: 'Apple' }
  ]
});

slim.setData([
  { value: '2', text: 'Banana' },
  { value: '3', text: 'Orange' }
]);

При обновлении:

  • старая модель данных полностью заменяется
  • выбранные значения пересчитываются
  • UI перерисовывается

Асинхронные данные

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

Типичный сценарий:

const slim = new SlimSelect({
  select: '#example',
  data: []
});

fetch('/api/fruits')
  .then(res => res.json())
  .then(data => {
    slim.setData(
      data.map(item => ({
        value: item.id,
        text: item.name
      }))
    );
  });

Особенности:

  • библиотека не блокирует загрузку UI
  • данные могут приходить частями
  • возможна реализация debounce и lazy loading на уровне приложения

Пользовательские поля данных

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

data: [
  {
    value: '1',
    text: 'Apple',
    price: 100,
    stock: 42,
    meta: {
      origin: 'Kazakhstan'
    }
  }
]

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

  • фильтрация по дополнительным параметрам
  • кастомный рендер
  • интеграция с бизнес-логикой

Slim Select не удаляет и не нормализует неизвестные поля, сохраняя их целиком.

Работа с disabled-значениями

Состояние disabled может задаваться как в HTML, так и в объектной модели.

data: [
  { value: '1', text: 'Apple', disabled: true },
  { value: '2', text: 'Banana' }
]

Поведение:

  • элемент отображается, но не доступен для выбора
  • при множественном выборе игнорируется при добавлении
  • сохраняется при рендере списка

Частые особенности и ограничения структуры данных

Модель данных Slim Select имеет ряд устойчивых ограничений:

  • value должен быть уникальным в пределах списка
  • дублирующиеся value приводят к некорректному поведению выбора
  • группы не поддерживают вложенность более одного уровня
  • отсутствие text приводит к отображению пустых элементов
  • изменения структуры данных требуют явного вызова обновления

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

Оглавление