Barista: 组合框：新组件

创建于 2020-03-02 · 8评论 · 资料来源: dynatrace-oss/barista

功能要求

概括

将组合框组件添加到库中。

功能描述

我们正在处理大量数据。我们的 dt-select 并不能真正处理大量选项。 dt-select 的搜索功能与本机选择中的相同。因此，用户只能跳转到以用户按下的键开始的选项。
这在具有大型数据集的用例中确实是有限制的。
可以从附加了 dt-autocomplete 的输入中构建的组合框组件可以帮助我们。

输入需要显示占位符文本。
Combobox

组合框应使用与 dt-select 相同的样式。

行为

单击下拉菜单会打开一个包含多个项目的列表供用户选择，光标将放置在输入字段中。一旦用户开始输入，组合框应该发出一个去抖动事件并在输入中显示一个加载指示器，类似于我们在过滤器字段中已有的指示器。

一旦选择了一个项目，下拉列表就会关闭，并且输入字段会相应地更新。

Combobox on click

对于组合框的第一个版本，我建议不要担心虚拟滚动。我们可以期望在服务器端完成项目的过滤。可以呈现客户端上填充的项目。我们可以在第二个版本中改进对大型数据集的处理。
对于第一个版本，我建议使用 dt-autocomplete，但我们应该考虑使用数据列表创建一个简化的下拉列表。

[ ] 编写 API 提案
[ ] 创建库和演示
[ ] 添加下拉菜单并创建其他样式以在 dtInput 中包含插入符号。
[ ] 添加去抖动输入事件 + 加载指示器
[] 添加单元测试
[ ] 添加 e2e 测试

附件

P2 feature help wanted new component

资料来源

ffriedl89

最有用的评论

我建议添加另外两个输入：
| 姓名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 加载 | boolean | false | 设置为 true 时，将显示加载指示器以向用户显示当前正在加载/过滤数据 |
| displayWith | (value: T) => string | (value: T) => ${value}`` | 返回给定对象的显示名称的函数，该对象表示组合框中的一个选项 |

displayWith 函数与将组合框与对象一起使用相关，并且加载指示器似乎对于在大多数情况下会将过滤卸载到服务器端的组件是有保证的。

heartdisease 于 2020-05-15

👍2

所有8条评论

作为可访问性参考，请考虑来自带有列表框弹出窗口的 WAI-ARIA 组合框的最佳实践建议

tomheller 于 2020-03-02

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-选项
dt-optgroup

清单

[ ] 适当的键盘支持（箭头：向上向下）
[ ] 围唱
[] 考虑 ngForms 兼容性
[ ] 考虑验证

lukett89 于 2020-04-13

🚀1 👍1

嘿@lukett89 ，感谢您的 API 提案。真的很棒的起点。
我认为我们需要与dt-select完全相同的输入。

我想补充
| 姓名 | 类型 | 说明 |
| ------------- | ------------- | ------------- |
| id | string | 选择的 ID |
| compareWith | (v1: T, v2: T) => boolean | 将选项值与选定值进行比较的函数 |
| required | boolean | 是否需要输入|
| panelClass | string | 类添加到组合框下拉菜单 |

我们还应该考虑为打开状态添加 getter，例如“打开”，并在该状态更改时输出。
我认为，如果我们能够尽可能坚持使用最接近 select 的 API 以尽可能轻松地在其中一个或另一个之间切换，那将是有益的。

ffriedl89 于 2020-04-14

感谢您的回复@ffriedl89。
我们将考虑您在组件的第一个版本中提到的所有输入/输出。

lukett89 于 2020-04-14

最终 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 | 类添加到组合框下拉菜单 |

输出

内容投影
dt-选项
dt-optgroup

清单

[ ] 适当的键盘支持（箭头：向上向下）
[ ] 围唱
[] 考虑 ngForms 兼容性
[ ] 考虑验证

lukett89 于 2020-04-14

我想在接下来的 2 周内负责实施此功能。你能把问题分配给我吗？

heartdisease 于 2020-04-15

在与@heartdisease和@lukett89同步讨论后，我重新分配了这个问题。

tomheller 于 2020-04-15