Синхронизируйте с @heartdisease об идеях API для поля со списком. Он улучшает нашу текущую экспериментальную версию для Angular

Я протестировал Microsoft-graph-toolkit TemplateHelper для создания элементов combobox с заданным контекстом и шаблоном, предоставленным в слоте. Это работает так, как мы и надеялись, также с вложенными элементами в шаблоне.
Я загрузил тест в это репо

Таким образом, мы должны уметь передать список элементов и (необязательно) шаблон в поле со списком и «просто» добавить виртуализацию перед фактическим рендерингом элементов для рендеринга только x элементов, в зависимости от положения прокрутки и высоты накладной контейнер.

В настоящее время метод TemplateHelper.renderTemplate() принимает HTMLElement в качестве корневого узла, шаблона и контекста (и необязательного дополнительного контекста). Он создает все узлы в соответствии с заданным шаблоном и присоединяет их к корневому узлу.
Возможно, было бы лучше изменить это поведение и сделать так, чтобы метод принимал только шаблон и контекст и возвращал скомпилированный шаблон, чтобы затем иметь возможность выводить возвращенный HTML непосредственно в освещенном шаблоне в компоненте.
Что вы думаете?

Требования

• Виртуальная прокрутка: на самом деле должна отображаться только часть параметров, чтобы избежать проблем с производительностью.
• Пользовательский шаблон: пользователь должен иметь возможность предоставить шаблон, который используется для визуализации параметров.
• Фильтрация: пользователь должен иметь возможность вводить данные для фильтрации списка элементов; фильтрация должна происходить с использованием функции фильтрации, предоставленной пользователем
• Индикатор прокрутки: всегда должно быть очевидно, есть ли еще варианты -> пока есть больше вариантов, должна быть видна половина изначально последней видимой опции (или максимум x пикселей), чтобы четко указывать, что контейнер можно прокручивать .

Требования к следующим шагам

• Состояние загрузки: в наложении должен отображаться счетчик загрузки, пока нет доступных элементов. ToDo Где должен отображаться счетчик загрузки?
• Множественный выбор: пользователь должен иметь возможность выбирать несколько вариантов.
• Группы опций: должна быть возможность группировать опции

Доступность

При фокусировке поле со списком должно открываться при нажатии клавиши Enter , ArrowUp или ArrowDown или когда пользователь начинает вводить фильтр в поле ввода.

При открытии пользователь должен иметь возможность использовать клавишу ArrowUp / ArrowDown для выбора из существующих параметров. Фокус для ввода фильтра должен оставаться в поле ввода, параметры не должны иметь возможность вкладки. Состояние выбора опций следует указывать с помощью атрибута aria-selected .

Выбор должен быть отправлен с помощью клавиши Enter .

Нажатие клавиши Tab или Escape должно закрыть наложение и не должно изменять выбранный элемент.

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

Синтаксис настраиваемого шаблона

Пользователь должен указать строку открытия и закрытия частей шаблона. Это должно быть возможно либо на глобальном, либо на уровне компонентов (еще не определено).

По умолчанию {{ и }} .

Предложение API

_WIP_

ComboBox следует разделить на основной компонент FluidComboBox компонент FluidComboBoxOptionsList компонент FluidComboBoxOption .

FluidComboBox

Содержит FluidComboBoxOptionsList , который, в свою очередь, содержит FluidComboBoxOption s.
Управляет открытием и закрытием наложения и позиционированием наложения.
Принимает шаблон как дочерний элемент, который принимает base HTMLElement s.

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

Входы

| Имя | Планируется на | Тип | По умолчанию | Описание |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| варианты | MVP | Массив | [] | Массив параметров для отображения в FluidComboBoxOptionsList |
| filterFn | MVP | (option: T) => boolean | null | Функция, используемая для фильтрации опций |
| renderOptionFn | MVP | (option: T) => string | null | Функция, используемая для опций рендеринга на панели автозаполнения |
| заполнитель | MVP | строка | '' | Заполнитель для отображения в поле ввода, когда не выбран ни один параметр |
| отключен | MVP | логическое | ложь | Логическое значение, чтобы определить, отключено ли поле со списком |
| загрузка | MVP | логическое | ложь | Логическое значение, определяющее, отображать ли индикатор загрузки |
| выбрано | MVP | любой | null | Предмет для предварительного выбора |
| multiSelect | v2 | логическое | ложь | Логическое значение, определяющее возможность одновременного выбора нескольких опций |

Выходы

| Имя | Планируется на | Тип | Описание |
| ---------------- | ----------- | --------------------------------- | -------------------------------------------------- ---- |
| изменить | MVP | FluidComboBoxChangeEvent | Событие срабатывает при изменении значения |
| замена фильтра | MVP | FluidComboBoxFilterChangeEvent | Событие запускается, когда пользователь вводит значение для фильтрации |
| выбор-изменение | MVP | FluidComboBoxSelectionChangeEvent | Событие срабатывает при изменении выбранного параметра |

FluidLoadingSpinner

В качестве предварительного условия для FluidComboBox нам нужно сначала реализовать повторно используемый компонент загрузочного счетчика.
ToDo Спросите UX о L&F нового загрузочного счетчика (или о том, можно ли повторно использовать старый дизайн).

FluidVirtualScroller

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

Смотрите также:
https://github.com/WICG/virtual-scroller/blob/master/README.md
https://www.sitepen.com/blog/next-generation-virtual-scrolling/
https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib
https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

FluidPopover

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

Эта библиотека должна использоваться для реализации этого компонента:
https://popper.js.org/docs/v2/

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

Мой подход был бы своего рода написанием функций, которые возвращают строку HTML, которую можно поместить в DocumentFragment, который затем можно будет добавить.

Написав функции, вы получите полную гибкость преобразования или условий.
Чтобы предоставить простой выход для этого, мы могли бы использовать что-то похожее на JSX htm, которое может быть преобразовано в строку, поэтому компиляция не потребуется. Он также имеет очень минимальную занимаемую площадь, о которой мы говорим, ~ 700 байт.

затем его можно было бы использовать как-то так:

<script type="text/template">
html`
  <span>${text}</span>
   {count > 0
     <span>occurrences ${count}</span>
   }
   </div>
`;
</script>

import { render } from "preact-render-to-string";

const template = document.createElement('template');
template.innerHTML = render(option); // option is the script that can be passed via slot or input

const fragment = temp.content;

в качестве альтернативы мы могли бы использовать шаблоны с тегами https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates.

Возможно, это было бы более минимальное решение.

Я провел некоторое тестирование, и, к сожалению, Angular удаляет все теги скриптов из шаблона. Только мои 2 цента за объявление скрипта внутри шаблона.

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

Можно ли предоставить функцию LitElements как свойство? Потому что тогда я передал бы рендеринг потребителю, где у него есть все возможности javascript в этой функции. Функция имеет объявленные параметры (входные данные для шаблона) и должна возвращать строку.

Реализацию по умолчанию можно сделать так:

_defaultTemplate<T>(display: string, value: T): string {
   return `<option>${display}</option>`
}

Как обсуждалось в №1513, нам нужно правильно обрабатывать всплывающее окно.

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

В настоящее время ширина ввода увеличивается на 16 пикселей после фокусировки. Поэтому я бы предложил, чтобы метка + ввод перемещался с помощью отступа 8. Это означало бы, что если несколько элементов управления (ввод, выбор, ...) находятся в вертикальном макете формы, все ярлыки любых элементов управления должны быть выровнен. Возможно, имеет смысл использовать элемент управления формой, который заботится об унификации интервала для меток + входов.

Я хотел бы внести поправки в предложение, добавив новый ввод для рендеринга отображаемой строки для текущего варианта выбора:

Входы

| Имя | Планируется на | Тип | По умолчанию | Описание |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| displayNameFn | MVP | (option: T) => string | (option) => `$ {option}` | Функция, которая возвращает отображаемую строку (без использования HTML) для заданной опции. |

Это также обеспечило бы простое решение этой проблемы: # 1527

Что-то маленькое, что я считаю важным: текущий DtCombobox использует value качестве отображаемого текста по умолчанию для «выбранных параметров». Я думаю, что гораздо разумнее использовать опцию textContent .
1) textContent всегда является дружественным к пользовательскому интерфейсу значением ( value только иногда является дружественным к пользовательскому интерфейсу значением)
2) Использование textContent - это то, что делают стандартные select

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