vaadin · tomivirkki · Nov 22, 2024 · Nov 25, 2024 · Nov 25, 2024 · Nov 27, 2024
diff --git a/dev/virtual-list.html b/dev/virtual-list.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,23 +9,70 @@
 
     <script type="module">
       import '@vaadin/virtual-list';
-      // import '@vaadin/virtual-list/vaadin-lit-virtual-list.js';
 
-      const items = Array.from({ length: 100000 }).map((_, i) => {
-        return { label: `Item ${i}` };
-      });
+      import { render, html } from 'lit';
+
+      function generateItems(count) {
+        return Array.from({ length: count }).map((_, i) => {
+          return { label: `Item ${i}` };
+        });
+      }
 
       const renderer = (root, _, { item }) => {
-        root.innerHTML = `<div>${item.label}</div>`;
+        render(html`<div>${item.label}</div>`, root);
       };
 
       const list = document.querySelector('vaadin-virtual-list');
-      list.items = items;
+      list.items = generateItems(10000);
       list.renderer = renderer;
+      list.selectionMode = 'multi';
+      list.itemIdPath = 'label';
+
+      const selectionMode = document.querySelector('#selection-mode');
+      selectionMode.value = list.selectionMode;
+      selectionMode.addEventListener('change', (e) => {
+        list.selectionMode = e.target.value;
+      });
+
+      document.querySelector('#empty').addEventListener('click', () => {
+        list.items = [];
+      });
+
+      document.querySelector('#set-1000-items').addEventListener('click', () => {
+        list.items = generateItems(1000);
+      });
+
+      document.querySelector('#set-5-items').addEventListener('click', () => {
+        list.items = generateItems(5);
+      });
     </script>
+
+    <style>
+      vaadin-virtual-list[navigating] > [focused] {
+        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      }
+
+      vaadin-virtual-list > [selected] {
+        background-color: var(--lumo-primary-color-10pct);
+      }
+
+      vaadin-virtual-list > * {
+        outline: none;
+      }
+    </style>
   </head>
 
   <body>
     <vaadin-virtual-list style="height: 400px"></vaadin-virtual-list>
+
+    <select id="selection-mode">
+      <option>none</option>
+      <option>single</option>
+      <option>multi</option>
+    </select>
+
+    <button id="empty">Empty items</button>
+    <button id="set-1000-items">Set 1000 items</button>
+    <button id="set-5-items">Set 5 items</button>
   </body>
 </html>
diff --git a/packages/virtual-list/package.json b/packages/virtual-list/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/a11y-base": "24.7.0-alpha1",
     "@vaadin/component-base": "24.7.0-alpha1",
     "@vaadin/lit-renderer": "24.7.0-alpha1",
     "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",

diff --git a/packages/virtual-list/src/vaadin-lit-virtual-list.js b/packages/virtual-list/src/vaadin-lit-virtual-list.js
@@ -34,6 +34,8 @@ class VirtualList extends VirtualListMixin(ThemableMixin(ElementMixin(PolylitMix
       <div id="items">
         <slot></slot>
       </div>
+
+      <div id="focusexit" tabindex="0" hidden></div>
     `;
   }
 }

diff --git a/packages/virtual-list/src/vaadin-virtual-list-mixin.d.ts b/packages/virtual-list/src/vaadin-virtual-list-mixin.d.ts
@@ -3,15 +3,16 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { VirtualList } from './vaadin-virtual-list.js';
+import type { VirtualListSelectionMixinClass } from './vaadin-virtual-list-selection-mixin.js';
 
 export type VirtualListDefaultItem = any;
 
 export interface VirtualListItemModel<TItem> {
   index: number;
   item: TItem;
+  selected?: boolean;
 }
 
 export type VirtualListRenderer<TItem> = (
@@ -20,11 +21,18 @@ export type VirtualListRenderer<TItem> = (
   model: VirtualListItemModel<TItem>,
 ) => void;
 
-export declare function VirtualListMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ControllerMixinClass> & Constructor<VirtualListMixinClass<TItem>> & T;
+/**
+ * Fired when the `selectedItems` property changes.
+ */
+export type VirtualListSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+export interface VirtualListCustomEventMap<TItem> {
+  'selected-items-changed': VirtualListSelectedItemsChangedEvent<TItem>;
+}
+
+export interface VirtualListEventMap<TItem> extends HTMLElementEventMap, VirtualListCustomEventMap<TItem> {}
 
-export declare class VirtualListMixinClass<TItem = VirtualListDefaultItem> {
+export declare class VirtualListBaseMixinClass<TItem = VirtualListDefaultItem> {
   /**
    * Gets the index of the first visible item in the viewport.
    */
@@ -71,3 +79,8 @@ export declare class VirtualListMixinClass<TItem = VirtualListDefaultItem> {
    */
   requestContentUpdate(): void;
 }
+
+export interface VirtualListMixinClass<TItem>
+  extends VirtualListBaseMixinClass,
+    ControllerMixinClass,
+    VirtualListSelectionMixinClass<TItem> {}
diff --git a/packages/virtual-list/src/vaadin-virtual-list-mixin.js b/packages/virtual-list/src/vaadin-virtual-list-mixin.js
@@ -7,13 +7,14 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
+import { SelectionMixin } from './vaadin-virtual-list-selection-mixin.js';
 
 /**
  * @polymerMixin
  * @mixes ControllerMixin
  */
-export const VirtualListMixin = (superClass) =>
-  class VirtualListMixinClass extends ControllerMixin(superClass) {
+export const VirtualListBaseMixin = (superClass) =>
+  class extends ControllerMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -144,7 +145,7 @@ export const VirtualListMixin = (superClass) =>
       }
 
       if (this.renderer) {
-        this.renderer(el, this, { item, index });
+        this.renderer(el, this, this.__getItemModel(index));
       }
     }
 
@@ -153,6 +154,13 @@ export const VirtualListMixin = (superClass) =>
       el.role = 'listitem';
     }
 
+    /**
+     * @private
+     */
+    __getItemModel(index) {
+      return { index, item: this.items[index] };
+    }
+
     /**
      * Clears the content of a render target.
      * @private
@@ -213,3 +221,10 @@ export const VirtualListMixin = (superClass) =>
       }
     }
   };
+
+/**
+ * @polymerMixin
+ * @mixes SelectionMixin
+ * @mixes VirtualListBaseMixin
+ */
+export const VirtualListMixin = (superClass) => class extends SelectionMixin(VirtualListBaseMixin(superClass)) {};
diff --git a/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.d.ts b/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.d.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { VirtualListDefaultItem } from './vaadin-virtual-list.js';
+
+export declare function VirtualListSelectionMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<TItem> & T;
+
+export declare class VirtualListSelectionMixinClass<TItem = VirtualListDefaultItem> {
+  /**
+   * Selection mode for the virtual list. Available modes are: `none`, `single` and `multi`.
+   */
+  selectionMode: 'none' | 'single' | 'multi';
+
+  /**
+   * Path to an item sub-property that identifies the item.
+   * @attr {string} item-id-path
+   */
+  itemIdPath: string | null | undefined;
+
+  /**
+   * An array that contains the selected items.
+   */
+  selectedItems: TItem[];
+}
-Original file line number
+Diff line change
@@ Expand Up @@
           <div id="items">
             <slot></slot>
           </div>
+          <div id="focusexit" tabindex="0" hidden></div>
         `;
       }
     }
@@ Expand Down @@