Блок "Выпадающий список"

Блок доступен начиная с версии 1.0

Назначение блока

Блок предназначен для выбора одного или нескольких значений из заданного набора.

Для работы с блоком его необходимо выбрать в библиотеке и переместить в область графа.

Настройки блока

Работа с настройками блока осуществляется через локальное меню (пункт Настройки):

Модальное окно настроек представлено ниже:

Общие настройки блоков описаны в отдельном разделе.

Раздел "Настройки выпадающего списка"

Наименование	Тип	Обязательное	Описание	Пример
Список	JSON	Нет	Json c параметрами списка	[{"id": 1, "val": 1}, {"id": 2, "val": 2}]
Множественная отметка	Флаг	Нет	Использовать множественную отметку в компоненте	-
Отметка по умолчанию	Целочисленный	Нет	Целое число, начиная с 1	-
Подпись	Строковый	Нет	Подпись к выпадающему списку
Плейсхолдер	Строковый	Нет	Подсказка, отображаемая в поле ввода	-
Подсказка	Строковый	Нет	Подпись при наведении на компонент	-
Поиск	Флаг	Нет	Доступ к поиску внутри выпадающего списка	-
Закрывать при выборе	Флаг	Нет	Закрывать выпадающий список при выборе опции
Заблокировать выпадающий список	Флаг	Нет	Статус недоступности компонента	-
Стили	HTML	Нет	Стили компонента	.vismind-dropdown-container {} .vismind-dropdown-container-placeholder {} .vismind-dropdown-container-item {}

Входы блока

Наименование выхода	Тип	Описание
Список	JSON	Json c параметрами списка
Заблокировать выпадающий список	Флаг	Статус недоступности компонента
Стили	HTML	Стили компонента

Выходы блока

В блоке нет выходов

События блока

Название выхода	Тип	Описание
Событие смены выбора (выбранные элементы)	JSON	Используется для динамического обновления визуализаторов, при изменении отметки в выпадающем списке

Описание работы блока

Формат входных опций списка

[
    {
        "id": "0",
        "value": "value_0"
    },
    {
        "id": "1",
        "value": "value_1"
    },
    {
        "id": "2",
        "value": "value_2"
    },
    {
        "id": "3",
        "value": "value_3"
    },
    {
        "id": "4",
        "value": "value_4"
    }
]

Формат выхода блока

[
    {
        "id": "0",
        "value": "value_0"
    },
    {
        "id": "1",
        "value": "value_1"
    },
    {
        "id": "2",
        "value": "value_2"
    }
]

Стилизация выпадающего списка

Структура выпадающего списка для стилизации

    <div class="vismind-dropdown-container">
      <!-- Лейбл -->
      <div class="vismind-dropdown-container-label-wrapper">
        <span class="vismind-dropdown-container-label"></span>
      </div>

      <!-- Контейнер для селектора -->
      <div class="vismind-dropdown-selector">
        <!-- Выбранные значения или плейсхолдер -->
        <div 
          class="vismind-dropdown-selected"
          :class="{ 'has-selection': true, 'is-open': true }"
        >
          <!-- Отображение выбранных значений или плейсхолдера -->
          <div class="vismind-dropdown-selected-content">
            <span class="vismind-dropdown-placeholder"></span>
            <span class="vismind-dropdown-single-selected"></span>
            <span class="vismind-dropdown-multiple-selected"></span>
          </div>

          <!-- Поле поиска -->
          <div class="vismind-dropdown-search-inline">
            <input
              type="text"
              class="vismind-dropdown-search-input-inline"
            />
          </div>
        </div>

        <!-- Список опций -->
        <div class="vismind-dropdown-options">
          <div class="vismind-dropdown-option is-selected">
            <span class="vismind-dropdown-option-checkbox">
              <input type="checkbox" checked />
            </span>
            <span class="vismind-dropdown-option-label"></span>
          </div>
          <div class="vismind-dropdown-option">
            <span class="vismind-dropdown-option-checkbox">
              <input type="checkbox" />
            </span>
            <span class="vismind-dropdown-option-label"></span>
          </div>
          <div class="vismind-dropdown-option">
            <span class="vismind-dropdown-option-checkbox">
              <input type="checkbox" />
            </span>
            <span class="vismind-dropdown-option-label"></span>
          </div>
          <div class="vismind-dropdown-option">
            <span class="vismind-dropdown-option-label"></span>
          </div>
          <div class="vismind-dropdown-option is-disabled">
            <span class="vismind-dropdown-option-checkbox">
              <input type="checkbox" disabled />
            </span>
            <span class="vismind-dropdown-option-label"></span>
          </div>
        </div>

        <!-- Нет результатов -->
        <div class="vismind-dropdown-no-results"></div>
      </div>
    </div>

Пример стилей для выпадающего списка

    .vismind-dropdown-container {
        font-family: Arial, sans-serif;
        position: relative;
        width: 100%;
    }

    .vismind-dropdown-selector {
        width: 100%;
    }

    .vismind-dropdown-options {
        padding: 0;
        margin: 0;
        border: 2px solid rgba(0, 0, 0, 0.05);
        border-top: none;
        border-radius: 0 4px 4px 4px;
        background: white;
        list-style-type: none;
        box-shadow: 
            2px 2px 8px rgba(0, 0, 0, 0.08),
            4px 4px 12px rgba(0, 0, 0, 0.04);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 300px;
    }

    .vismind-dropdown-container-label-wrapper {
        margin-bottom: 8px;
    }

    .vismind-dropdown-container-label {
        display: block;
        margin: 0.1rem 0.2rem;
        font-weight: 500;
        color: rgba(60, 102, 127, 1);
        font-size: 0.85rem;
    }

    .vismind-dropdown-selected {
        padding: 0.5rem 0.5rem;
        width: 100%;
        min-height: 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        gap: 0.25rem;

        box-sizing: border-box;
        border: 2px solid rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        background: #ffffff;
        transition: box-shadow 0.2s ease;

        cursor: pointer;
    }

    .vismind-dropdown-selected.has-selection {
        border-color: rgba(0, 0, 0, 0.05);
    }

    .vismind-dropdown-selected.is-open {
        border-color: rgba(0, 0, 0, 0.05);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }

    .vismind-dropdown-selected:hover {
        border-color: rgba(0, 0, 0, 0.1);
    }

    .vismind-dropdown-selected-content {
        width: 100%;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        min-height: 1rem;
    }

    .vismind-dropdown-search-inline {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.5rem;
        background: white;
        display: flex;
        align-items: center;
        z-index: 2;
    }

    .vismind-dropdown-search-input-inline {
        width: 100%;
        border: none;
        background: none;
        box-shadow: none;
        outline: none;
        padding: 0;
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center;
        color: rgba(60, 102, 127, 1);
        font-size: 0.9rem;
        font-family: inherit;
    }

    .vismind-dropdown-search-input-inline::placeholder {
        color: rgba(60, 102, 127, 0.51);
        font-size: 0.9rem;
    }

    .vismind-dropdown-selected.is-open .vismind-dropdown-selected-content {
        visibility: hidden;
    }

    .vismind-dropdown-option {
        display: block;
        min-height: 2rem;
        max-height: 2rem;
        line-height: 2rem;
        padding: 0 0.5rem;
        color: rgba(60, 102, 127, 1);
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background-color 0.2s;
        box-sizing: border-box;
    }

    .vismind-dropdown-option:hover {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(60, 102, 127, 1);
    }

    .vismind-dropdown-option.is-selected {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(60, 102, 127, 1);
    }

    .vismind-dropdown-option.is-selected:hover {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(60, 102, 127, 1);
    }

    .vismind-dropdown-option.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .vismind-dropdown-option-checkbox {
        margin-right: 8px;
        display: flex;
        align-items: center;
    }

    .vismind-dropdown-option-checkbox input {
        cursor: pointer;
        margin: 0;
        accent-color: rgba(60, 102, 127, 0.7);
    }

    .vismind-dropdown-option-label {
        font-size: 0.9rem;
        flex: 1;
        color: rgba(60, 102, 127, 1);
    }

    .vismind-dropdown-no-results {
        text-align: left;
        color: rgba(60, 102, 127, 0.51);
        font-size: 0.9rem;
        min-height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vismind-dropdown-selected::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
        background: transparent;
        z-index: 3;
    }

    .vismind-dropdown-selected.is-open::after {
        transform: translateY(-50%) rotate(180deg);
        border-top-color: rgba(0, 0, 0, 0.1);
    }

    .vismind-dropdown-option-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
        border: 1px solid rgba(60, 102, 127, 0.3);
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        background: white;
    }

    .vismind-dropdown-option-checkbox input[type="checkbox"]:checked {
        background-color: #3c667f;
        border-color: rgba(60, 102, 127, 0.7);
    }

    .vismind-dropdown-option-checkbox input[type="checkbox"]:checked::before {
        content: '✓';
        position: absolute;
        color: white;
        font-size: 12px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .vismind-dropdown-search-input-inline,
    .vismind-dropdown-option-checkbox input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
    }