Control multi selection mode by property

Author: bendera

src/vscode-list-item/vscode-list-item.ts

@@ -78,9 +78,9 @@ export class VscodeListItem extends VscElement {
   }
 
   private _selectItem(isCtrlDown: boolean) {
-    const {selectedItems} = this._listContextState;
+    const {selectedItems, multiSelect} = this._listContextState;
 
-    if (isCtrlDown) {
+    if (multiSelect && isCtrlDown) {
       if (this.selected) {
         this.selected = false;
         selectedItems.delete(this);
@@ -132,7 +132,7 @@ export class VscodeListItem extends VscElement {
     const isCtrlDown = ev.ctrlKey;
     this._selectItem(isCtrlDown);
 
-    if (this.branch && !isCtrlDown) {
+    if (this.branch && !(this._listContextState.multiSelect && isCtrlDown)) {
       this.closed = !this.closed;
     }
 

src/vscode-list/list-context.ts

@@ -5,6 +5,7 @@ import type {VscodeList} from './vscode-list';
 export interface ListContext {
   indent: number;
   arrows: boolean;
+  multiSelect: boolean;
   selectedItems: Set<VscodeListItem>;
   focusedItem: VscodeListItem | null;
   focusItem: (item: VscodeListItem) => void;

src/vscode-list/vscode-list.ts

@@ -31,8 +31,15 @@ export class VscodeList extends VscElement {
   @property({type: Number, reflect: true})
   indent = 8;
 
-  @property({type: Boolean, reflect: true})
-  multiselect = false;
+  @property({type: Boolean, reflect: true, attribute: 'multi-select'})
+  set multiSelect(val: boolean) {
+    this._multiSelect = val;
+    this._listContextState.multiSelect = val;
+  }
+  get multiSelect(): boolean {
+    return this._multiSelect;
+  }
+  private _multiSelect = false;
 
   /** @internal */
   @property({type: String, reflect: true})
@@ -45,6 +52,7 @@ export class VscodeList extends VscElement {
   private _listContextState: ListContext = {
     arrows: false,
     indent: 8,
+    multiSelect: false,
     selectedItems: new Set(),
     focusedItem: null,
     hasBranchItem: false,