콤보 상자에 대한 API 아이디어에 대해 @heartdisease 와 동기화하십시오. 그는 Angular에 대한 현재 실험 버전을 개선하고 있습니다.

슬롯에 제공된 주어진 컨텍스트와 템플릿 을 사용하여 콤보 상자 항목을 생성하기 위해
이 리포지토리에 테스트를 업로드했습니다.

따라서 항목 목록을 전달하고 (선택 사항) 템플릿을 콤보 상자에 전달하고 스크롤 위치와 높이에 따라 x개 항목만 렌더링하도록 항목을 실제로 렌더링하기 전에 가상화를 "그냥" 추가하는 것이 좋습니다. 오버레이 컨테이너.

현재 TemplateHelper.renderTemplate() 메서드는 HTMLElement를 루트 노드, 템플릿 및 컨텍스트(및 선택적 추가 컨텍스트)로 허용합니다. 주어진 템플릿에 따라 모든 노드를 생성하고 루트 노드에 연결합니다.
이 동작을 변경하고 메서드가 템플릿과 컨텍스트만 수락하고 컴파일된 템플릿을 반환하도록 한 다음 반환된 HTML을 구성 요소의 조명 템플릿에서 직접 출력할 수 있도록 하는 것이 더 나을 수 있습니다.
어떻게 생각해?

요구 사항

• 가상 스크롤: 성능 문제를 피하기 위해 옵션의 일부만 실제로 렌더링되어야 합니다.
• 사용자 지정 템플릿: 사용자는 옵션을 렌더링하는 데 사용되는 템플릿을 제공할 수 있어야 합니다.
• 필터링: 항목 목록을 필터링하려면 사용자가 입력을 입력할 수 있어야 합니다. 필터링은 사용자가 제공하는 필터 기능을 사용하여 발생해야 합니다.
• 스크롤 표시기: 더 많은 옵션이 있는지 여부는 항상 명확해야 합니다

다음 단계 요구 사항

• 로딩 상태: 사용할 수 있는 항목이 없는 한 로딩 스피너가 오버레이에 표시되어야 합니다. ToDo 로딩 스피너는 어디에 표시되어야 합니까?
• 다중 선택: 사용자가 여러 옵션을 선택할 수 있어야 합니다.
• 옵션 그룹: 옵션을 그룹화 할 수 있어야 합니다.

접근성

초점이 맞춰지면 Enter , ArrowUp 또는 ArrowDown 키를 누르거나 사용자가 입력 필드에 필터를 입력하기 시작할 때 콤보 상자가 열립니다.

열리면 사용자는 ArrowUp / ArrowDown 키를 사용하여 기존 옵션에서 선택할 수 있어야 합니다. 필터 입력에 대한 초점은 입력 필드에 남아 있어야 하며 옵션은 탭할 수 없어야 합니다. 옵션의 선택 상태는 aria-selected 속성을 사용하여 표시되어야 합니다.

Enter 키를 사용하여 선택 항목을 제출해야 합니다.

Tab 또는 Escape 키를 누르면 오버레이가 닫히고 선택한 항목이 변경되지 않아야 합니다.

필터를 입력한 다음 입력 필드 밖으로 탭을 이동하면 필터가 재설정되고 이전에 선택한 항목이 표시되어야 합니다.

사용자 정의 템플릿 구문

사용자는 템플릿 부분의 여는 문자열과 닫는 문자열을 제공해야 합니다. 이는 전역 또는 구성 요소별 수준에서 가능해야 합니다(아직 결정되지 않음).

기본값은 {{ 및 }} 입니다.

API 제안

_WIP_

ComboBox는 기본 FluidComboBox 구성 요소, FluidComboBoxOptionsList 구성 요소 및 FluidComboBoxOption 구성 요소로 분할되어야 합니다.

FluidComboBox

FluidComboBoxOptionsList 를 포함하며, 여기에는 차례로 FluidComboBoxOption 가 포함됩니다.
오버레이 열기 및 닫기 및 오버레이 위치 지정을 처리합니다.
기본 HTMLElement s를 허용하는 하위 요소로 템플릿을 허용합니다.

템플릿을 제공할 때 템플릿 바인딩에 사용되는 여는 문자열과 닫는 문자열을 설정해야 합니다.

입력

| 이름 | 예정 | 유형 | 기본값 | 설명 |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| 옵션 | MVP | 배열 | [] | FluidComboBoxOptionsList 에 표시할 옵션 배열 |
| 필터Fn | MVP | (option: T) => boolean | null | 필터링 옵션에 사용되는 기능 |
| 렌더옵션Fn | MVP | (option: T) => string | null | 자동 완성 패널에서 옵션을 렌더링하는 데 사용되는 기능 |
| 자리 표시자 | MVP | 문자열 | '' | 옵션이 선택되지 않은 경우 입력 필드에 표시할 자리 표시자 |
| 장애인 | MVP | 부울 | 거짓 | 콤보 상자가 비활성화되었는지 여부를 확인하는 부울 |
| 로딩 | MVP | 부울 | 거짓 | 로딩 표시기를 표시할지 여부를 결정하는 부울 |
| 선택 | MVP | 어떤 | 널 | 사전 선택 항목 |
| 다중 선택 | v2 | 부울 | 거짓 | 둘 이상의 옵션을 동시에 선택할 수 있는지 여부를 결정하는 부울 |

출력

| 이름 | 예정 | 유형 | 설명 |
| ---------------- | ----------- | ---------------------------------- | -------------------------------------------------- ---- |
| 변경 | MVP | FluidComboBoxChangeEvent | 값이 변경될 때 발생하는 이벤트 |
| 필터 교환 | MVP | FluidComboBoxFilterChangeEvent | 사용자가 필터링 값을 입력하면 발생하는 이벤트 |
| 선택 변경 | MVP | FluidComboBoxSelectionChangeEvent | 선택한 옵션이 변경될 때 발생하는 이벤트 |

FluidLoadingSpinner

FluidComboBox의 전제 조건으로 재사용 가능한 로딩 스피너 구성 요소를 먼저 구현해야 합니다.
ToDo 새로운 로딩 스피너의 L&F에 대해 UX에 문의하십시오(또는 이전 디자인을 재사용할 수 있는지 여부).

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/

플루이드팝오버

FluidComboBox의 전제 조건으로 배치할 수 있는 재사용 가능한 팝오버 구성 요소를 구현해야 합니다.
콤보 상자의 입력 요소 아래에 완벽하게 있습니다.

이 라이브러리는 해당 구성 요소를 구현하는 데 사용해야 합니다.
https://popper.js.org/docs/v2/

템플릿과 관련하여 개발자가 텍스트 교체만 가질 수 있는 유연성이 없고 광범위하지 않기 때문에 몇 가지 우려가 있습니다. 기능을 통한 텍스트 변환이나 불가능하지만 필요한 경우와 같은 간단한 조건에 대해 생각해보십시오.

내 접근 방식은 추가할 수 있는 DocumentFragment에 넣을 수 있는 HTML 문자열을 반환하는 함수를 작성하는 것입니다.

쓰기 기능을 사용하면 변환 또는 조건의 완전한 유연성을 얻을 수 있습니다.
이를 위한 간단한 콘센트를 제공하기 위해 컴파일이 필요하지 않도록 문자열로 렌더링할 수 있는 JSX htm 과 유사한 것을 활용할 수 있습니다. 그것은 또한 우리가 ~700Bytes에 대해 이야기하는 매우 최소한의 공간을 가지고 있습니다.

그런 다음 어떻게 든 다음과 같이 사용할 수 있습니다.

<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에 기능을 제공할 수 있습니까? 그러면 나는 이 함수에서 자바스크립트의 모든 유연성을 가지고 있는 소비자에게 렌더링을 전달할 것이기 때문입니다. 함수는 매개변수(템플릿에 대한 입력)를 선언했으며 문자열을 반환해야 합니다.

기본 구현은 다음과 같이 수행할 수 있습니다.

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

#1513에서 논의한 것처럼 팝오버를 적절하게 처리해야 합니다.

나는 이것이 콤보 상자 구성 요소의 일부인 입력에 대해 논의하기에 적절한 장소인지 확실하지 않습니다. 그러나 입력이 초점에 따라 커지기 때문에 입력 구성 요소의 상자를 확장하여 가장 큰 상태의 공간을 차지하는 것이 합리적이라고 생각합니다. 가지다.

현재 입력은 초점이 맞춰지면 너비가 16px 증가합니다. 따라서 레이블 + 입력을 패딩 8만큼 이동하는 것이 좋습니다. 이는 여러 컨트롤(입력, 선택, ...)이 세로 형식 레이아웃에 있는 경우 모든 컨트롤의 모든 레이블이 다음과 같아야 함을 의미합니다. 정렬. 레이블 + 입력의 간격을 통합하는 양식 컨트롤이 의미가 있을 수 있습니다.

현재 선택 옵션에 대한 표시 문자열을 렌더링하기 위한 새 입력을 추가하여 제안을 수정하고 싶습니다.

입력

| 이름 | 예정 | 유형 | 기본값 | 설명 |
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| displayNameFn | MVP | (option: T) => string | (옵션) => `${옵션}` | 주어진 옵션에 대한 표시 문자열(HTML 허용 안 됨)을 반환하는 함수입니다. |

이것은 또한 이 문제에 대한 쉬운 해결책을 제공합니다: #1527

내가 중요하다고 생각하는 작은 것: 현재 DtCombobox는 옵션의 value 를 기본 "선택된 옵션" 표시 텍스트로 사용합니다. 옵션의 textContent 를 사용하는 것이 훨씬 더 합리적이라고 생각합니다.
1) textContent 는 항상 UI 친화적인 값입니다( value 는 때때로 UI 친화적인 값임)
2) textContent 를 사용하는 것은 표준 select 가 하는 일입니다.

웹 구성 요소는 향후 구성 요소를 만들고자 하는 방식이 아니므로 팀의 우선 순위 이동과 관련이 있으므로 이 문제를 종료합니다.