2024-11-10 16:26:42 +08:00
|
|
|
A sidebar combo (dropdown+list) is like this:
|
|
|
|
|
|
|
|
```html
|
2024-11-11 04:07:54 +08:00
|
|
|
<div class="issue-sidebar-combo" data-selection-mode="..." data-update-url="...">
|
2024-11-10 16:26:42 +08:00
|
|
|
<input class="combo-value" name="..." type="hidden" value="...">
|
|
|
|
<div class="ui dropdown">
|
|
|
|
<div class="menu">
|
|
|
|
<div class="item clear-selection">clear</div>
|
|
|
|
<div class="item" data-value="..." data-scope="...">
|
|
|
|
<span class="item-check-mark">...</span>
|
|
|
|
...
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui list">
|
|
|
|
<span class="item empty-list">no item</span>
|
|
|
|
<span class="item">...</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
|
|
|
When the selected items change, the `combo-value` input will be updated.
|
|
|
|
If there is `data-update-url`, it also calls backend to attach/detach the changed items.
|
|
|
|
|
|
|
|
Also, the changed items will be syncronized to the `ui list` items.
|
|
|
|
|
|
|
|
The items with the same data-scope only allow one selected at a time.
|
2024-11-11 04:07:54 +08:00
|
|
|
|
|
|
|
The dropdown selection could work in 2 modes:
|
|
|
|
* single: only one item could be selected, it updates immediately when the item is selected.
|
|
|
|
* multiple: multiple items could be selected, it defers the update until the dropdown is hidden.
|