Barista: Поле со списком: новый компонент

Созданный на 2 мар. 2020  ·  8Комментарии  ·  Источник: dynatrace-oss/barista

Запрос функции

Резюме

Добавьте в библиотеку компонент combobox.

Описание функции

Мы имеем дело с большим количеством данных. Наш dt-select действительно не работает с большим набором опций. Функциональность поиска для dt-select такая же, как и для собственного выбора. Следовательно, пользователь может перейти только к параметру, который начинается с клавиши, нажатой пользователем.
Это действительно ограничение в случаях использования с большими наборами данных.
В этом нам может помочь компонент combobox, который может быть построен из ввода с прикрепленным dt-autocomplete.

На входе должен отображаться текст-заполнитель.
Combobox

Поле со списком должно использовать те же стили, что и dt-select.

Поведение

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

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

Combobox on click

Для первой версии поля со списком я предлагаю не беспокоиться о виртуальной прокрутке. Мы можем ожидать, что фильтрация элементов будет выполняться на стороне сервера. Элементы, заполненные на клиенте, могут быть отображены. Во второй версии мы можем улучшить обработку больших наборов данных.
Для первой версии я бы предложил использовать dt-autocomplete, но мы должны рассмотреть возможность создания упрощенного раскрывающегося списка с помощью списка данных.

  • [] Написать предложение API
  • [] Создать библиотеку и демо
  • [] Добавьте раскрывающийся список и создайте дополнительные стили, чтобы курсор находился внутри dtInput.
  • [] Добавить противодействующее событие ввода + индикатор загрузки
  • [] Добавить модульные тесты
  • [] Добавить тесты e2e

Вложения

P2 feature help wanted new component
Источник
picture ffriedl89

Самый полезный комментарий

Предлагаю добавить еще два входа:
| Имя | Тип | Значение по умолчанию | Описание |
| --- | --- | --- | --- |
| загрузка | boolean | false | Если установлено значение true, отображается индикатор загрузки, показывающий пользователю, что данные в данный момент загружаются / фильтруются |
| displayWith | (value: T) => string | (value: T) => $ {значение} `| Функция, возвращающая отображаемое имя для данного объекта, представляющего опцию из поля со списком |

Функция displayWith актуальна для использования поля со списком с объектами, и индикатор загрузки кажется оправданным для компонента, который - в большинстве случаев - переносит фильтрацию на сторону сервера.

picture heartdisease 15 мая 2020
👍2

Все 8 Комментарий

В качестве справочника по специальным возможностям рассмотрите рекомендации по передовой практике из комбинированного списка WAI-ARIA со всплывающим списком.

tomheller picture tomheller 2 мар. 2020

Поле со списком предложений API

Расширенная структура

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

Входы

| Имя | Тип | Описание |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Начальное значение для входа |
| placeholder | string \| undefined | Заполнитель для ввода |

Выходы

| Имя | Тип | Описание |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Событие генерируется при выборе нового значения |
| filterChanges | EventEmitter<string> | Событие возникает при изменении фильтра |

Проекция контента
dt-option
dt-optgroup

Контрольный список

  • [] правильная поддержка клавиатуры (стрелка: вверх вниз)
  • [] WAI-ARIA
  • [] рассмотреть совместимость с ngForms
  • [] рассмотреть вопрос о валидации
lukett89 picture lukett89 13 апр. 2020
🚀1 👍1

Привет, @ lukett89 , спасибо за предложение API. Действительно отличная отправная точка.
Я думаю, нам понадобятся те же входные данные, что и в dt-select .

Я бы добавил
| Имя | Тип | Описание |
| ------------- | ------------- | ------------- |
| id | string | Id для выбора |
| compareWith | (v1: T, v2: T) => boolean | Функция сравнения значений параметров с выбранными значениями |
| required | boolean | Требуется ли ввод |
| panelClass | string | Класс добавлен в раскрывающийся список combobox |

Мы также должны рассмотреть возможность добавления геттеров для открытого состояния, такого как «открыто», и выходов при изменении этого состояния.
Я думаю, было бы полезно, если бы мы могли придерживаться ближайшего к выбранному API API, чтобы сделать переключение между одним или другим как можно проще.

ffriedl89 picture ffriedl89 14 апр. 2020

Спасибо за ответ @ ffriedl89.
Мы учтем все упомянутые вами входы / выходы для первой версии компонента.

lukett89 picture lukett89 14 апр. 2020

Поле со списком окончательного предложения по API

Расширенная структура

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

Входы

| Имя | Тип | Описание |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Начальное значение для входа |
| placeholder | string \| undefined | Заполнитель для ввода |
| id | строка | Id для выбора |
| compareWith | (v1: T, v2: T) => boolean | Функция сравнения значений параметров с выбранными значениями |
| required | boolean | Требуется ли ввод |
| panelClass | string | Класс добавлен в раскрывающийся список combobox |

Выходы

| Имя | Тип | Описание |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Событие генерируется при выборе нового значения |
| filterChanges | EventEmitter<string> | Событие возникает при изменении фильтра |
| openedChange | EventEmitter| Событие генерируется при переключении панели выбора. |

Проекция контента
dt-option
dt-optgroup

Контрольный список

  • [] правильная поддержка клавиатуры (стрелка: вверх вниз)
  • [] WAI-ARIA
  • [] рассмотреть совместимость с ngForms
  • [] рассмотреть вопрос о валидации
lukett89 picture lukett89 14 апр. 2020

Я хотел бы позаботиться о внедрении этой функции в течение следующих 2 недель. Не могли бы вы передать мне проблему?

heartdisease picture heartdisease 15 апр. 2020

Синхронно и после обсуждения с @ lukett89 я переназначил проблему.

tomheller picture tomheller 15 апр. 2020

Предлагаю добавить еще два входа:
| Имя | Тип | Значение по умолчанию | Описание |
| --- | --- | --- | --- |
| загрузка | boolean | false | Если установлено значение true, отображается индикатор загрузки, показывающий пользователю, что данные в данный момент загружаются / фильтруются |
| displayWith | (value: T) => string | (value: T) => $ {значение} `| Функция, возвращающая отображаемое имя для данного объекта, представляющего опцию из поля со списком |

Функция displayWith актуальна для использования поля со списком с объектами, и индикатор загрузки кажется оправданным для компонента, который - в большинстве случаев - переносит фильтрацию на сторону сервера.

heartdisease picture heartdisease 15 мая 2020
👍2
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

beeme1mr picture beeme1mr  ·  7Комментарии
Sherif-Elhefnawy picture Sherif-Elhefnawy  ·  3Комментарии
areknow picture areknow  ·  12Комментарии
schobocop picture schobocop  ·  10Комментарии
TannerGilbert picture TannerGilbert  ·  4Комментарии